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.

Expand|Select|Wrap|Line Numbers

 
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:

Expand|Select|Wrap|Line Numbers

 
<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.

Dec 15 '11 #1

Subscribe Post Reply

2463

Dormilich

8,658

Expert Mod 8TB

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

David Hirst

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

 
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.

Dec 15 '11 #3

Dormilich

8,658

Expert Mod 8TB

if you set it to display: none in the CSS, changing the visibility with JS won't bring it back ...

Dec 15 '11 #4

David Hirst

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

Expand|Select|Wrap|Line Numbers

 
#siteurl {

    text-decoration:none;

    visibility:visible;

}

Dec 15 '11 #5

David Hirst

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

 
function changeurl(newurl) {

        var siteurl = document.getElementById("siteurl").href = newurl;

        siteurl.href = newurl;

        document.getElementById("siteurl").style.display = 'block';    
 
}

Thanks for your help :).

Dec 16 '11 #6

acoder

16,027

Expert Mod 8TB

The if statement in your function should have been

Expand|Select|Wrap|Line Numbers

if (document.getElementById("siteurl").style.visibility == 'hidden')

Note the == for comparison.

Dec 17 '11 #7

Similar topics

change CSS definition by javascript

by: Gerhard Hönig | last post by:

Hi, i have a basic question on CSS. Is it possible to change the CSS class definition dynamically by using Javascript. example: ich have a css class like this one: ..test {

HTML / CSS

how to replace text on a page using Javascript code

by: Tony Strazzeri | last post by:

Hi, I recently posted "problem with Javascript code from Include" Thanks to response I have now fixed the problem. This is to ask how to solve my next problem/step. I am using javascript to...

Javascript

Image loading using javascript. Handling timeouts and parrallel loading under IE

by: zborisau | last post by:

Hey good people, I've been given a problem to solve recently - and stuck with the solution for a good 4 days already. i have a link which leads to popup window. the purpose of that popup...

Javascript

Show/hide multiple elements with one link using javascript

by: itunes66 | last post by:

how can i do this i already have a function to show/hide elements with one link but how can i show/hide multiple elements here is the script function obj_ref(object) { if...

Javascript

Problems with disabling ASP.NET controls using javascript

by: john | last post by:

I have two different problems: 1. When the user has clicked on a button that is causing the browser to post back to the server, it could take a little while for the new page to show up. So in...

ASP.NET

Is there a way to make a DIV invisible using JavaScript

by: Charlie | last post by:

Hi: I have sections on a page in asp panels. I would like to hide/show using javascript, but don't see a visible property for DIV. How do you do this? Thanks, Charlie

ASP.NET

Send a browser to a link with Javascript

by: mcraven.2 | last post by:

How do you send a browser to a link when a command is given? I've tried using Java Server Pages <jsp:forward /command but that doesn't change the link in the address bar and some other problems...

Javascript

Submitting Using Javascript

by: Goofy | last post by:

Hi everyone, My question is related to making a form submit using javascript. Here is my scenario. I have a form, which includes a user control. The user control has a search button and a...

ASP.NET

change the download settings using javascript.

by: Rakhi | last post by:

hello i want to alter the download settings of mozilla firefox browser using javascript of my application !! wat is happenin in my application is, on calling a method , it make a file ready...

Javascript

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++