www.webdeveloper.com
Results 1 to 6 of 6

Thread: Help with Progressive Enhancement of onclick events

  1. #1
    Join Date
    Feb 2012
    Posts
    102

    Unhappy Help with Progressive Enhancement of onclick events

    Hello,

    I am trying to add onlick events to some links on my page and I am having trouble figuring out how to add the return false so the href url is not followed. Here is my code:
    Code:
    function init() {
    		'use strict'
    		connectLink.onclick = openConnect;
    		reviewsLink.onclick = openReviews;
    		attractionsLink.onclick = openAttractions;
    		aboutLInk.onclick = openAbout;
    		toptenLink.onclick = openTopten;
    		return false;
    	}
    	
    if (window.addEventListener) { // W3C
    		window.addEventListener('load', init, false);
    	}else if (window.attachEvent) { // Older IE
    		window.attachEvent('onload', init);
    	}
    I cant seem to figure out what I am doing wrong and where return false should go so it is functional. I do not want to use inline Javascript as I know that is not professional looking code.
    Owner of Reality TV Addict
    Publisher of Strategies for Stretching Your Income (ebook)
    CEO and Founder of Sport Directions
    Follow me at @RealityTV_Forum

  2. #2
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,252
    The return false is to place in the event functions : openConnect, openReviews, openAttractions, openAbout and openTopten; to avoid the click event.

  3. #3
    Join Date
    Feb 2012
    Posts
    102
    Thank you for your reply. I have updated my code making it a little more specialized for my situation but I am still having the problem of the browser following the links when they are clicked. I am also getting a new error saying "TypeError ad is null" Here is my code below if you have any ideas what could be causing the new error and ways to fix the previous error.

    Code:
    var connectLink = U.$('connectLink');
    var reviewsLink = U.$('reviewsLink');
    var attractionsLink = U.$('attractionsLink');
    var aboutLink = U.$('aboutLink');
    var toptenLink = U.$('toptenLink');
     
    var content = U.$('content');
    var ad = U.$('ad');
    var connect = U.$('connect');
    var reviews = U.$('reviews');
    var attractions = U.$('attractions');
    var about = U.$('about');
    var topten = U.$('topten');
    
    
    function openConnect(e) {
    		'use strict';
    		
    		// Get the event object:
    		e = window.event;
    		
    		U.$('close').onclick = closeContent;
    		
    		// Close the other links if they are currently open
    		if (reviews.style.visibility == 'visible') {
    			reviews.style.visibility = 'hidden';
    		}else if  (attractions.style.visibility == 'visible') {
    			attractions.style.visibility = 'hidden';
    		}else if  (about.style.visibility == 'visible') {
    			about.style.visibility = 'hidden';
    		}else if  (topten.style.visibility == 'visible') {
    			topten.style.visibility = 'hidden';
    		}
    		
    		// Open the connect div
    		content.style.visibility = 'visible';
    		connect.style.visiblity = 'visible';
    		ad.style.display = 'block';
    		connectLink.onclick = null;
    		
    		// Prevent the form's submission:
    		if (e.preventDefault) {
    			e.preventDefault();
    		} else {
    			e.returnValue = false;
    		}
    		return false;
    	} // End of openConnect() function
    window.onload = function() {
    		'use strict';
    		
    		U.addEvent(connectLink, 'click', openConnect);
    		U.addEvent(reviewsLink, 'click', openReviews);
    		U.addEvent(attractionsLink, 'click', openAttractions);
    		U.addEvent(aboutLink, 'click', openAbout);
    		U.addEvent(toptenLink, 'click', openTopten);
    	};
    * I have omitted some of the extra functions as they are similar to the one included.

  4. #4
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,252
    I do not see TypeError in the script and do not understand your U.$... but this script solve your first question
    Code:
    <body>
    <p><a href="#" id="connectLink">lien</a> 
    <script type="text/javascript">
    function init() {
            'use strict'
            connectLink.onclick = function(){alert('ok');return false};
            
        }
    if (window.addEventListener) { // W3C
            window.addEventListener('load', init, false);
        }else if (window.attachEvent) { // Older IE
            window.attachEvent('onload', init);
        }
    </script>
    Last edited by 007Julien; 06-28-2013 at 07:59 AM.

  5. #5
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    Quote Originally Posted by mcco View Post
    Code:
    function openConnect(e) {
            'use strict';
            
         // Get the event object:
            e = window.event;
    If the function was installed using addEventListener or attachEvent, e will always contain the event object, so remove that line. Otherwise:

    Code:
    function openConnect( evt ) 
    {
       'use strict';
            
        // Get the event object:
        var e = evt || window.event;
    Where used, return should be executed unconditionally and always as the last statement in the function.

    That's my signature, it's not part of the damn post!

  6. #6
    Join Date
    Feb 2012
    Posts
    102

    resolved [RESOLVED] WOW What an easy fix that I missed

    Hey guys I feel stupid, I accidentally made the ad id a class in the html so that was throwing the entire thing off. I went back and fixed it so it works fine now. Thanks for all your help.
    Owner of Reality TV Addict
    Publisher of Strategies for Stretching Your Income (ebook)
    CEO and Founder of Sport Directions
    Follow me at @RealityTV_Forum

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles