Change visibility of a link - Using Javascript

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • David Hirst
    New Member
    • Dec 2011
    • 6
    #1

    Change visibility of a link - Using Javascript

    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.
    Code:
    function mouseOver(img_name, img_src)
{
document[img_name].src = img_src;
}
function mouseOut(img_name, img_src)
{
document[img_name].src = img_src;
}
function changeImage(newimage) {
		var changeimg = document.getElementById("imgchange");

		changeimg.src = newimage;
}
function changedescription(newtext) {
		var description = document.getElementById("description");
			
		description.innerHTML = newtext;				
}
function changewebaddress(newtext) {
		var webdescription = document.getElementById("webdescription");
			
		webdescription.innerHTML = newtext;				
}
function changeurl(newurl) {
		var siteurl = document.getElementById("siteurl").href = newurl;
		siteurl.innerHTML = webdescription;	
		siteurl.href = newurl;
}
function urlvisability(urlhideshow) {
	if (document.getElementById("siteurl").style.display = 'none')
	{
	   (document.getElementById("siteurl").style.display = 'visible')
	}
}
    And here is the website:

    Code:
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Wordpress Websites</title>
<link href="home2012 css.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="home2012JS.js"></script>
</head>

<body>
<div class="maincontainer">

<div class="navshow" id="navshow">
    <ul class="navshow">
    <li class="liheadingshow">
    <h2>Wordpress Websites</h2>
    </li>
	<li><a href="#" onclick="changeImage('imgs/sampleMIC.gif'), 
    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.'), 
    changeurl('http://meditateincopenhagen.org/')
    ; return false">Meditate in Copenhagen</a></li>
    
	<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.'), 
    changeurl('http://meditasjonibergen.no/')
    ; return false">Meditate in Bergen</a></li>
    
	<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/')
    ; return false">2012 - Nordic Dharma Celebrations</a></li>
    
    <li><a href="webdesign.html">Back</a></li>
</ul>

</div> <!--End of navbar -->
<div class="imgflipshow">
  <p><img src="imgs/wordpresspage.png" width="350" height="200" id="imgchange"/></p>
  <p class="description" id="description">Click on one of the site from the menu to learn more.</p>
  <a id="siteurl" href="">Click here to visit the site!</a>

</div>


</div>
</body>
</html>
    Thanks for your help. My Javascript knowledge is a bit limited, so please make sure your answers are fairly clear.
    Tags: None
    • Dormilich
      Recognized Expert Expert
      • Aug 2008
      • 8694
      #2
      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.

        Comment

        • David Hirst
          New Member
          • Dec 2011
          • 6
          #3
          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.

          Code:
          function urlvisability(urlhideshow) {
	if (document.getElementById("siteurl").style.visibility = 'hidden')
	{
	   (document.getElementById("siteurl").style.visibility = 'visible')
	}
          I have also removed the webdescription entirely as it was redundant. It was a hangover from my previous attempt.

            Comment

            • Dormilich
              Recognized Expert Expert
              • Aug 2008
              • 8694
              #4
              if you set it to display: none in the CSS, changing the visibility with JS won't bring it back ...

                Comment

                • David Hirst
                  New Member
                  • Dec 2011
                  • 6
                  #5
                  No I know. Sorry I forgot to mention id also fixed that.

                  Code:
                  #siteurl {
	text-decoration:none;
	visibility:visible;
}

                    Comment

                    • David Hirst
                      New Member
                      • Dec 2011
                      • 6
                      #6
                      I have solved the problem by removing:

                      "siteurl.innerH TML = webdescription; "

                      And by adding this line to the function changeurl(newur l)

                      "document.getEl ementById("site url").style.dis play = 'block';"

                      The finished product looks like this:
                      Code:
                      function changeurl(newurl) {
		var siteurl = document.getElementById("siteurl").href = newurl;
		siteurl.href = newurl;
		document.getElementById("siteurl").style.display = 'block';	

}
                      Thanks for your help :).

                        Comment

                        • acoder
                          Recognized Expert MVP
                          • Nov 2006
                          • 16032
                          #7
                          The if statement in your function should have been
                          Code:
                          if (document.getElementById("siteurl").style.visibility [B]==[/B] 'hidden')
                          Note the == for comparison.

                            Comment

                            Previous template Next
                            Working...