SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    826
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    converting standard show/hide jQuery code to plain JS....

    hi,

    I have to do in plain JavaScript something that I'm much more used to doing in jQuery.. this is for a standard tabbed-content show/hide div switcheroo.. here's the jQuery code:

    $('.tabs a').click(function(e) {
    e.preventDefault();
    $('.tab_content_wrapper').hide();
    $('.tab_content_wrapper').eq( $(this).index('.tabs a') ).show();
    $('.tabs a').removeClass('tab_on').addClass('tab_off');
    $(this).addClass('tab_on').removeClass('tab_off');
    });

    the main difficulty in doing this in plain JS is in grabbing which anchor was clicked..

    this did not do the trick..

    if ( document.addEventListener ) {
    tabs.childNodes[i].addEventListener("click", function(){ this.style.border = '1px solid red'; }, false);
    } else if ( document.attachEvent ) {
    tabs.childNodes[i].attachEvent ("click", function(){ this.style.border = '1px solid red'; });
    }


    'this' evidently does not refer to the element that was clicked on...

    also, can you refer to elements by their class name?

    also, is it possible to do event-binding in plain JavaScript w/o using individual id's for the clicked-on elements? like I did, (thanks to help from people at the jQuery forums) in the code I posted above? if not I don't mind using element id's, but still, if possible would like something like if second tabbed was clicked show 2nd div...

    would appreciate some help & suggestions as to how to convert this jQuery functionality to plain JS...

    thank you..

    (PS: can't use [CODE] tags.. they mess things up.. hide part of the post.. (I guess new interface still a bit buggy...;-) )

  2. #2
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    the main difficulty in doing this in plain JS is in grabbing which anchor was clicked..

    this did not do the trick..
    HTML Code:
    if ( document.addEventListener ) {
    tabs.childNodes[i].addEventListener("click", function(){ this.style.border = '1px solid red'; }, false);
    } else if ( document.attachEvent ) {
    tabs.childNodes[i].attachEvent ("click", function(){ this.style.border = '1px solid red'; });
    }
    'this' evidently does not refer to the element that was clicked on...
    This is a guess:
    HTML Code:
    // Source: Sitepoint book, Simply Javascript
    document.getElementsByClass = function(theClass) {
    	var elementArray = [];
    	if (typeof document.all != "undefined") {
      		elementArray = document.all;
    	} else {
      		elementArray = document.getElementsByTagName("*");
    	}
    	var matchedArray = [];
    	var pattern = new RegExp("(^| )" + theClass + "( |$)");
    	for (var i = 0; i < elementArray.length; i++) {
      		if (pattern.test(elementArray[i].className)) {
          		matchedArray[matchedArray.length] = elementArray[i];
    		}
      	}
      	return matchedArray;
    };
    
    // From http://ejohn.org/projects/flexible-javascript-events/
    function addEvent( obj, type, fn ) {
    	if ( obj.attachEvent ) {
    		obj['e' + type + fn] = fn;
    		obj[type + fn] = function(){
    			obj['e' + type + fn]( window.event );
    		}
    		obj.attachEvent( 'on' + type, obj[type+fn] );
    	} else {
    		obj.addEventListener( type, fn, false );
    	}
    }	
    
    var tabs = document.getElementsByClass('.tabs')
    	tabsA = tabs.getElementsByTagName('a');
    for( var i=0; i<tabsA.length; i++ ) {
    	addEvent(tabsA[i], 'click', function(){
    		// your code here
    	});
    }
    also, can you refer to elements by their class name?

    also, is it possible to do event-binding in plain JavaScript w/o using individual id's for the clicked-on elements?
    See the code above.

    this is for a standard tabbed-content show/hide div switcheroo..
    Like this? (tested in FF/Chrome only - addEventlistener & forEach)
    HTML Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<style>
    			li { display: inline; }
    			#tabs > div { display: none; } 
    			#tabs > div.current { display: block; }  		
    		</style>	
    	</head>
    	<body>
    		<ul>
    			<li><a href="#test-1">Test 1</a></li>
    			<li><a href="#test-2">Test 2</a></li>
    			<li><a href="#test-3">Test 3</a></li>
    		</ul>
    		<div id="tabs">
    			<div id="test-1" class="current">Test 1 Div</div>
    			<div id="test-2">Test 2 Div</div>
    			<div id="test-3">Test 3 Div</div>
    		</div>
    		<script>
    			// Source: Sitepoint book, Simply Javascript
    			document.getElementsByClass = function(theClass) {
    				var elementArray = [];
    				if (typeof document.all != "undefined") {
    			  		elementArray = document.all;
    				} else {
    			  		elementArray = document.getElementsByTagName("*");
    				}
    				var matchedArray = [];
    				var pattern = new RegExp("(^| )" + theClass + "( |$)");
    				for (var i = 0; i < elementArray.length; i++) {
    			  		if (pattern.test(elementArray[i].className)) {
    			      		matchedArray[matchedArray.length] = elementArray[i];
    					}
    			  	}
    			  	return matchedArray;
    			};
    					
    			window.onload = function() {		
    				window.addEventListener(
    					'hashchange', 
    					function() {	
    						var currentDivs = document.getElementsByClass('current'),
    							currPageEl 	= document.getElementById(location.hash.substring(1));
    							
    							currentDivs.forEach(function(el,i) {
    								currentDivs[i].removeAttribute('class');
    							});
    							currPageEl.setAttribute('class','current');
    					},
    					false
    				);
    			};							
    		</script>
    	</body>
    </html>

  3. #3
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    826
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    thank you very very much for posting all that code..

    as expected (and as you hinted) of course it doesn't work in IE.....;-)

    you say "add addEventlistener " you meant add attachEvent, right? addEventListener is there already.. (and of course it does work in all browsers except IE...) so I did:

    Code:
    if (document.all) {
    		
    		window.onload = function() {		
    			window.attachEvent(
    				'hashchange', 
    				function() {	
    					var currentDivs = document.getElementsByClass('current'),
    						currPageEl 	= document.getElementById(location.hash.substring(1));
    						
    						currentDivs.forEach(function(el,i) {
    							currentDivs[i].removeAttribute('class');
    						});
    						currPageEl.setAttribute('class','current');
    				}
    			);
    		};		
    		
    	
    	}  else {	// yr code AddEventListener code...
    but this is not working in IE (took out that third param for AttachEvent, since it only takes two params (judging by examples I have seen..)


    I also have questions: what is 'hashchange'??? and how is event-binding done for 'click' event here? I don't see 'onclick' anywhere here...

    thank you very much...

  4. #4
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The first code example has the click event. The second was an alternative.

    Sent from my ADR6300 using Tapatalk

  5. #5
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    As stated the click example was shown above but I will show a basic example here using click and hashchange.

    Using this HTML and JS lib:
    HTML Code:
    <ul>
    	<li><a href="#test-1" class="tabLink">Test 1</a></li>
    	<li><a href="#test-2" class="tabLink">Test 2</a></li>
    	<li><a href="#test-3" class="tabLink">Test 3</a></li>
    </ul>
    <div id="tabs">
    	<div id="test-1" class="current">Test 1 Div</div>
    	<div id="test-2">Test 2 Div</div>
    	<div id="test-3">Test 3 Div</div>
    </div>
    <script>
    // Source: Sitepoint book, Simply Javascript
    document.getElementsByClass = function(theClass) {
    	var elementArray = [];
    	if (typeof document.all != "undefined") {
      		elementArray = document.all;
    	} else {
      		elementArray = document.getElementsByTagName("*");
    	}
    	var matchedArray = [];
    	var pattern = new RegExp("(^| )" + theClass + "( |$)");
    	for (var i = 0; i < elementArray.length; i++) {
      		if (pattern.test(elementArray[i].className)) {
    	  		matchedArray[matchedArray.length] = elementArray[i];
    		}
      	}
      	return matchedArray;
    };
    
    // From http://ejohn.org/projects/flexible-javascript-events/
    function addEvent( obj, type, fn ) {
    	if ( obj.attachEvent ) {
    		obj['e' + type + fn] = fn;
    		obj[type + fn] = function(){
    			obj['e' + type + fn]( window.event );
    		}
    		obj.attachEvent( 'on' + type, obj[type+fn] );
    	} else {
    		obj.addEventListener( type, fn, false );
    	}
    }	
    </script>
    Click just listens for the click event and the href is disregarded ie preventDefault():
    HTML Code:
    window.onload = function() {
    	var tabLinks = document.getElementsByClass('tabLink'),
    		i;
    	for(i = 0; i < tabLinks.length; i++) {
    		addEvent(
    			tabLinks[i], 
    			'click', 
    			function(e) { 
    				var currDiv  = document.getElementsByClass('current'),
    					newDiv = document.getElementById(this.href.split('#')[1]),
    					j;
    				e.preventDefault();
    				for(j = 0; j < currDiv.length; j++) {
    					currDiv[j].removeAttribute('class');
    				}
    				newDiv.setAttribute('class','current');	
    			}
    		);	
    	}
    };
    Hashchange listens to the URL#hash and reacts to that listener if changed:
    HTML Code:
    window.onload = function() {		
    	addEvent(
    		window, 
    		'hashchange', 
    		function() {	
    			var currentDivs = document.getElementsByClass('current'),
    				currPageEl 	= document.getElementById(location.hash.substring(1)),
    				i;
    			
    			for(i = 0; i < currentDivs.length; i++) {	
    				currentDivs[i].removeAttribute('class');
    			}
    			currPageEl.setAttribute('class','current');
    		}
    	);
    };	
    You see preventDefault isn't present because we want the A tag to do its thing so we can capture the URL#hash in location.hash


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
  •