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

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.
LVL 4
eddyperuAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

williamcampbellCommented:
var nothanksbtn = GetTagByID("NoThanks1");

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
eddyperuAuthor Commented:
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
eddyperuAuthor Commented:
If is ok with williamcampbell , I will set up my answer as the correct answer.

Thanks
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

kadabaCommented:
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
kadabaCommented:
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
rdivilbissCommented:
I think eddyperu is exactly right.  Sorry he doesn't agree with your suggestion, but neither do I.
0
kadabaCommented:
@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
Michel PlungjanIT ExpertCommented:
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
williamcampbellCommented:
Your question asks about visibility not existence! My code checks for visibility (albeit the code is sparse).
0
eddyperuAuthor Commented:
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
williamcampbellCommented:
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
Michel PlungjanIT ExpertCommented:
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
Michel PlungjanIT ExpertCommented:
suggedtion use style="display:none" on the button and do NOT use server visibility
0
eddyperuAuthor Commented:
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
williamcampbellCommented:
>> @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
rdivilbissCommented:
@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
Michel PlungjanIT ExpertCommented:
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
rdivilbissCommented:
Sorry, no ASP.NET advice here either.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Editors IDEs

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.