Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

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

Posted on 2010-01-12
20
Medium Priority
?
924 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
  • 4
  • 4
  • 4
  • +2
18 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
This tutorial covers a step-by-step guide to install VisualVM launcher in eclipse.
THe viewer will learn how to use NetBeans IDE 8.0 for Windows to perform CRUD operations on a MySql database.
Suggested Courses

578 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