SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist
    Join Date
    Dec 2004
    Posts
    419
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Disable Hyperlink based on Variable Value

    Thanks to a query I just asked here, I have managed to write a simple Javascript function that checks the value of a variable as it is incremented / decremented:

    HTML Code:
    <html>
    <head>
    <script type="text/javascript">
    
    MyCurrentVar = 1;
    
    function prev() {
    	MyCurrentVar--;
    
    	if (MyCurrentVar <= 1) {
    		MyCurrentVar = 1
    	}
    
    	alert(MyCurrentVar);
    }
    
    function next() {
    	MyCurrentVar++;
    
    	if (MyCurrentVar >= 12) {
    		MyCurrentVar = 12
    	}
    
    	alert(MyCurrentVar);
    }
    </script>
    </head>
    
    <body>
    	<p><a href="#" onclick="prev()">Previous</a></p>
    	<p><a href="#" onclick="next()">Next</a></p>
    </body>
    
    </html>
    Is it possible to for example, disable the 'prev' hyperlink, if 'MyCurrentVar' has a value of 1, and disable the 'next' hyperlink if the 'MyCurrentVar' variable has a value of 12?

    Thanks

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    You will need some way for JavaScript to access the prev and next elements in order to disable them. Placing an id="prev" and id="next" on the paragraph around each anchor is suitable in this context.

    The prev() and next() scripts will need to be updated, to check the value of MyCurrentVar and take appropriate action when it's less than or equal to 1, or greater than or equal to 12.

    As well as adjusting the myCurrentVar variable, they can also disable the appropriate link, and check if the other needs to be re-enabled.

    The easiest way to change things is to set a temporary property on the paragraph and assign the anchor to it. Then once the anchor is removed you can append some text in there instead.

    Reversing the process you would remove the text and append the anchor from the temporary property on the paragraph.

    Then you just needto kick things off to have the prev link disable itself on the first page load. At the bottom of the page you can find the prev element and then call prev.onclick() to simulate someone clicking there. That will disable the prev button and you should then be ready to go.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    As an example, here is how you could convert the prev link to a text

    Code javascript:
    // convert link to text
    var el = document.getElementById('prev');
    var tag = el.getElementsByTagName('a')[0];
    var text = tag.text;
    el.store = document.createDocumentFragment();
    el.store.appendChild(tag);
    while (el.firstChild) {
    	el.removeChild(el.firstChild);
    }
    el.appendChild(document.createTextNode(text));

    and then at some other stage, convert it back to a link.

    Code javascript:
    // convert text to link
    var el = document.getElementById('prev');
    while (el.firstChild) {
    	el.removeChild(el.firstChild);
    }
    el.appendChild(el.store);
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Evangelist
    Join Date
    Dec 2004
    Posts
    419
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul!

    I have added the IDs to the <a> tags, but after that... I'm way out of my depth I am afraid.

    I added the javascript you kindly wrote into the header, but the javascript errors on first entering the page, according to the FFox Error Console:

    Error: el has no properties
    Source File: file: 005.htm
    Line: 29


    Thanks!

    Jim

    This is the HTML page:

    HTML Code:
    <html>
    <head>
    <script type="text/javascript">
    
    MyCurrentVar = 1;
    
    function prev() {
    	MyCurrentVar--;
    
    	if (MyCurrentVar <= 1) {
    		MyCurrentVar = 1
    	}
    
    	alert(MyCurrentVar);
    }
    
    function next() {
    	MyCurrentVar++;
    
    	if (MyCurrentVar >= 12) {
    		MyCurrentVar = 12
    	}
    
    	alert(MyCurrentVar);
    }
    
    // convert link to text
    var el = document.getElementById('prev');
    var tag = el.getElementsByTagName('a')[0];
    var text = tag.text;
    el.store = document.createDocumentFragment();
    el.store.appendChild(tag);
    while (el.firstChild) {
        el.removeChild(el.firstChild);
    }
    el.appendChild(document.createTextNode(text));
    
    // convert text to link
    var el = document.getElementById('prev');
    while (el.firstChild) {
        el.removeChild(el.firstChild);
    }
    el.appendChild(el.store);
    </script>
    </head>
    
    <body>
    	<p><a href="#" onclick="prev()" id="prev">Previous</a></p>
    	<p><a href="#" onclick="next()" id="next">Next</a></p>
    </body>
    
    </html>

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Place the code at the bottom of the body.

    The head of the page is one of the worst places to put scripting code. It slows down the loading of your page, and it's much harder to work with page elements from there.

    Loading scripts from the end of the body means that it's a lot easier to work with page elements, the page appears faster because everything doesn't have to stop (as it would in the head) when the script loads, and it is a good web site performance technique.
    http://developer.yahoo.com/performance/rules.html

    Anyhow, place the code at the end of the body, that's my advice. If you don't want to take it though you can always wrap it in a function and call it from some onload event instead. Either way, just ensure that the element is available before the code is activated.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •