?
Solved

How to find out if an element is visible or not using javascript?

Posted on 2010-01-12
20
Medium Priority
?
916 Views
Last Modified: 2013-11-07
Hi experts
This is my javascript section
<script type="text/javascript">
        function btClick2() {
            if (document.getElementById('NoThanks1').style.visibility == 'visible') alert('visible');
            else alert('hidden');
       }
</script>

This is a button called  "getQuote" :
   <div class="footer">
            <asp:ImageButton runat="server" ID="getQuote" ImageUrl="images/GetAquote.png" OnClick="getQuote_Click"  OnClientClick="btClick2()"/>
    </div>

Also there is another button called "NoThanks1" :
 <div class="learn">
           <asp:ImageButton runat="server" ID="NoThanks1" ImageUrl="images/NothanksIcon.png"
                                             OnClick="NoThanks1_Click" />
 </div>

This is the C# for the "Nothanks1" Button:
        protected void NoThanks1_Click(object sender, ImageClickEventArgs e)
        {
             NoThanks1.Visible = false;
        }

Every time the client click the "getQuote" button, this will  trigger a javascript code that will check if the "Nothanks1" button is visible,   if is visible do something  else do something else.

Thanks for your help.
0
Comment
Question by:eddyperu
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
  • 4
  • +2
20 Comments
 
LVL 12

Accepted Solution

by:
williamcampbell earned 1000 total points
ID: 26298488
var nothanksbtn = GetTagByID("NoThanks1");

if ( nothanksbtn.style.visibility="hidden" )
{
   // No sign of it?
}
0
 
LVL 4

Author Comment

by:eddyperu
ID: 26298532
HI,
I copy your code and it didn't work, I found it out how to do it:
            if (document.getElementById('NoThanks1') != null) {
                alert('visible');
            }
            else {
                alert('hidden');
            }


as easy as that.... :) Thanks anyway

0
 
LVL 4

Author Comment

by:eddyperu
ID: 26298680
If is ok with williamcampbell , I will set up my answer as the correct answer.

Thanks
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 22

Expert Comment

by:kadaba
ID: 26300105
eddyperu,

I d not think thats the right way to do so,
check this.

<html>
<head>
<script type="text/javascript">
function testVisibility(elementId){
	if(document.getElementById(elementId)!=null){
		alert('visible');
	}else{
		alert('hidden');
	}
}
</script>
</head>
<body>
<div id="div1" style="visibility:hidden">
hello world
</div>
<input type="button" onclick="testVisibility('div1')" value="check visibility of div1">
<input type="button" onclick="testVisibility('div2')" value="check visibility of div 2">
</body>
</html>

Open in new window

0
 
LVL 22

Assisted Solution

by:kadaba
kadaba earned 500 total points
ID: 26300122
your code should look like this...
look at it and let me know.



<html>
<head>
<script type="text/javascript">
function testVisibility(elementId){
	alert(getSetVisibility(elementId));
}
function getSetVisibility(elementId,visibility){
	if(visibility == undefined){
		return document.getElementById(elementId).style.visibility;
	}else{
		document.getElementById(elementId).style.visibility = visibility;
	}
}
</script>
</head>
<body>
<div id="div1" style="visibility:hidden">
hello world 1 - DIV 1
</div>
<div id="div2" style="visibility:visible">
hello world 2 - DIV 2
</div>
<input type="button" onclick="testVisibility('div1')" value="check visibility of div1">
<input type="button" onclick="testVisibility('div2')" value="check visibility of div2">
</body>
</html>

Open in new window

0
 
LVL 29

Expert Comment

by:rdivilbiss
ID: 26301609
I think eddyperu is exactly right.  Sorry he doesn't agree with your suggestion, but neither do I.
0
 
LVL 22

Expert Comment

by:kadaba
ID: 26301993
@rdivilbiss

Please have a look at  ID: 26300105.

Sure I might be missing something, it will be helpful for me if you could explain the behavior
0
 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 500 total points
ID: 26302860
Guys - how can you tell anything about visibility if the element returns null?

No browsers will do that.

here is Kadaba's code again, expanded to tell you exactly what the browser thinks

<html>
<head>
<script type="text/javascript">
function testVisibility(elementId){
       if(document.getElementById(elementId)!=null){
               alert('Element exists and its visibility is '+document.getElementById(elementId).style.visibility);
       }else{
               alert('Element does NOT exist so we cannot tell anything about visibility');
       }
}
</script>
</head>
<body>
<div id="div1" style="visibility:hidden">
hello world
</div>
<div id="div3" style="visibility:visible">
hello world
</div>
<input type="button" onclick="testVisibility('div1')" value="check visibility of div1">
<input type="button" onclick="testVisibility('div2')" value="check visibility of div 2">
<input type="button" onclick="testVisibility('div3')" value="check visibility of div 3">
</body>
</html>

Open in new window

0
 
LVL 12

Expert Comment

by:williamcampbell
ID: 26305307
Your question asks about visibility not existence! My code checks for visibility (albeit the code is sparse).
0
 
LVL 4

Author Comment

by:eddyperu
ID: 26305412
ok, guys..I am confuse!!!

If I change the asp:button in the code behind to do this :
  Button1.Visible = false;

How can I make for the javascript to make it visible when I trigger another button?
I try this:
   document.getElementById("Button1").style.visibility = 'visible';
but it is not working.

And second question: is visibility value make the button NULL or not?

Thank you for all your comments
0
 
LVL 12

Assisted Solution

by:williamcampbell
williamcampbell earned 1000 total points
ID: 26305513
1) Check for null first

if ( document.getElementById("Button1") != null )
{
   document.getElementById("Button1").style.visibility = 'visible';
}
else
{
    alert ( "Button1 does not exist" );
}

2) Visibility hides the button but it is still there (it is not null)

visibilty: button is not null and can either bee seen or not
null: button has not been created yet or it was deleted.

wc

 
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 26305551
1. If the code behind does not RENDER elements that are set to invisible on the SERVER then no amount of javascript will make the non existing button APPEAR. You would need js that INSERTED the button into the DOM. I think the confusion has to do with the server visibility not having anything to do with client side css.
@william your code was not just sparse, it used nonexisting javascript GetTagById
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 26305601
suggedtion use style="display:none" on the button and do NOT use server visibility
0
 
LVL 4

Author Comment

by:eddyperu
ID: 26305674
ok,
That means that the .net doesn't render the control back if the attribute is set to visible = false.
Meaninr  that I need to create a HTML attribute for that control using the Attributes.ADD in codebehind.

so it will looks like this in the codebehind :
 button1.Attributes.Add("???", " ?????");   // making this button invisible  

After this I will be able to change the visibility through Javascript.

Is this concept right???


Ps: Someone can complete this :

     button1.Attributes.Add("???", " ?????");  


Thanks
0
 
LVL 12

Expert Comment

by:williamcampbell
ID: 26305871
>> @william your code was not just sparse, it used nonexisting javascript GetTagById

good call epic fail on my should be getElementById ( GetTagById  is Java)

/bowsoutofthread

0
 
LVL 29

Expert Comment

by:rdivilbiss
ID: 26306625
@kadaba

Sorry, I was just foinf by the author's claim that had answered his own question.  I wasn't judging your code and will bow out.  Apologies

Rod
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 26307865
I am not into asp
My suggestion is to create the button with
style="display:none"

and add a script with onClick="document.getElementById('whateverIdOfTheButton').style.display="block"

or vice versa depending on if the button should be there or not
0
 
LVL 29

Expert Comment

by:rdivilbiss
ID: 26310246
Sorry, no ASP.NET advice here either.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Performance in games development is paramount: every microsecond counts to be able to do everything in less than 33ms (aiming at 16ms). C# foreach statement is one of the worst performance killers, and here I explain why.
This article aims to explain the working of CircularLogArchiver. This tool was designed to solve the buildup of log file in cases where systems do not support circular logging or where circular logging is not enabled
The viewer will learn how to use and create new code templates in NetBeans IDE 8.0 for Windows.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question