By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,287 Members | 1,644 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,287 IT Pros & Developers. It's quick & easy.

Change visibility of a link - Using Javascript

P: 6
I am trying to set up my website, so that a particular link isnít visible until the user clicks another link. I am unable to sort out how to make it change the visibility. Making it hidden using CSS is straight forward but I canít make the JS make it visible again.

Here is my JS code: The Problem is in the last function.
Expand|Select|Wrap|Line Numbers
  1. function mouseOver(img_name, img_src)
  2. {
  3. document[img_name].src = img_src;
  4. }
  5. function mouseOut(img_name, img_src)
  6. {
  7. document[img_name].src = img_src;
  8. }
  9. function changeImage(newimage) {
  10.         var changeimg = document.getElementById("imgchange");
  11.  
  12.         changeimg.src = newimage;
  13. }
  14. function changedescription(newtext) {
  15.         var description = document.getElementById("description");
  16.  
  17.         description.innerHTML = newtext;                
  18. }
  19. function changewebaddress(newtext) {
  20.         var webdescription = document.getElementById("webdescription");
  21.  
  22.         webdescription.innerHTML = newtext;                
  23. }
  24. function changeurl(newurl) {
  25.         var siteurl = document.getElementById("siteurl").href = newurl;
  26.         siteurl.innerHTML = webdescription;    
  27.         siteurl.href = newurl;
  28. }
  29. function urlvisability(urlhideshow) {
  30.     if (document.getElementById("siteurl").style.display = 'none')
  31.     {
  32.        (document.getElementById("siteurl").style.display = 'visible')
  33.     }
  34. }
  35.  
And here is the website:

Expand|Select|Wrap|Line Numbers
  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3. <title>Wordpress Websites</title>
  4. <link href="home2012 css.css" rel="stylesheet" type="text/css" />
  5. <script language="javascript" src="home2012JS.js"></script>
  6. </head>
  7.  
  8. <body>
  9. <div class="maincontainer">
  10.  
  11. <div class="navshow" id="navshow">
  12.     <ul class="navshow">
  13.     <li class="liheadingshow">
  14.     <h2>Wordpress Websites</h2>
  15.     </li>
  16.     <li><a href="#" onclick="changeImage('imgs/sampleMIC.gif'), 
  17.     changedescription('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dui justo, cursus quis varius mattis, convallis nec justo. Suspendisse potenti. Suspendisse quis mauris lorem. Maecenas at nunc tortor, nec laoreet velit.'), 
  18.     changeurl('http://meditateincopenhagen.org/')
  19.     ; return false">Meditate in Copenhagen</a></li>
  20.  
  21.     <li><a href="#" onclick="changeImage('imgs/sampleMIB.gif'), changedescription('In laoreet sem vel mi suscipit placerat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.'), 
  22.     changeurl('http://meditasjonibergen.no/')
  23.     ; return false">Meditate in Bergen</a></li>
  24.  
  25.     <li><a href="#" onclick="changeImage('imgs/sampleNDC2012.gif'), changedescription('Proin facilisis velit vitae augue semper vitae sodales odio malesuada. In a nisl sit amet dui placerat rutrum vel vel tellus. Phasellus leo velit, pharetra id scelerisque eget, volutpat eu ipsum. Pellentesque eget ante justo, vel dignissim odio.'), changeurl('http://kadampafestivals.org/scandinavia/')
  26.     ; return false">2012 - Nordic Dharma Celebrations</a></li>
  27.  
  28.     <li><a href="webdesign.html">Back</a></li>
  29. </ul>
  30.  
  31. </div> <!--End of navbar -->
  32. <div class="imgflipshow">
  33.   <p><img src="imgs/wordpresspage.png" width="350" height="200" id="imgchange"/></p>
  34.   <p class="description" id="description">Click on one of the site from the menu to learn more.</p>
  35.   <a id="siteurl" href="">Click here to visit the site!</a>
  36.  
  37. </div>
  38.  
  39.  
  40. </div>
  41. </body>
  42. </html>
  43.  
Thanks for your help. My Javascript knowledge is a bit limited, so please make sure your answers are fairly clear.
Dec 15 '11 #1
Share this Question
Share on Google+
6 Replies


Dormilich
Expert Mod 5K+
P: 8,639
the CSS display property does not have a value of hidden (that would belong to visibility) it has values like none, block, inline (etc.)

despite that mouseOut() and mouseOver() are absolutely identical and in changeurl() the variable webdescription is undefined.
Dec 15 '11 #2

P: 6
Thanks for your reply. I have changed the javascript function in question but its still not working any suggestions as to what im doing wrong now.

Expand|Select|Wrap|Line Numbers
  1. function urlvisability(urlhideshow) {
  2.     if (document.getElementById("siteurl").style.visibility = 'hidden')
  3.     {
  4.        (document.getElementById("siteurl").style.visibility = 'visible')
  5.     }
  6.  
I have also removed the webdescription entirely as it was redundant. It was a hangover from my previous attempt.
Dec 15 '11 #3

Dormilich
Expert Mod 5K+
P: 8,639
if you set it to display: none in the CSS, changing the visibility with JS won't bring it back ...
Dec 15 '11 #4

P: 6
No I know. Sorry I forgot to mention id also fixed that.

Expand|Select|Wrap|Line Numbers
  1. #siteurl {
  2.     text-decoration:none;
  3.     visibility:visible;
  4. }
  5.  
Dec 15 '11 #5

P: 6
I have solved the problem by removing:

"siteurl.innerHTML = webdescription;"

And by adding this line to the function changeurl(newurl)

"document.getElementById("siteurl").style.disp lay = 'block';"

The finished product looks like this:
Expand|Select|Wrap|Line Numbers
  1. function changeurl(newurl) {
  2.         var siteurl = document.getElementById("siteurl").href = newurl;
  3.         siteurl.href = newurl;
  4.         document.getElementById("siteurl").style.display = 'block';    
  5.  
  6. }
  7.  
Thanks for your help :).
Dec 16 '11 #6

acoder
Expert Mod 15k+
P: 16,027
The if statement in your function should have been
Expand|Select|Wrap|Line Numbers
  1. if (document.getElementById("siteurl").style.visibility == 'hidden')
Note the == for comparison.
Dec 17 '11 #7

Post your reply

Sign in to post your reply or Sign up for a free account.