jQuery addClass example

Change class name on click in jQuery

by oms02

HTML

<script src="http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js?1.4.11"></script>
<script src="http://demos.flesler.com/jquery/localScroll/js/jquery.localscroll-min.js?1.3.4"></script>
<a href="#section2.1">go to section 2.1</a>
<a href="#section2.2">go to section 2.2</a>

<div id="wrapper">
  <div id="div1">
    <div class="box" id="section1.1">
      <h2>content 1.1</h2>
    </div>
    <div class="box" id="section1.2">
      <h2>content 1.2</h2>
    </div>
    <div class="box" id="section1.3">
      <h2>content 1.3</h2>
    </div>
    <div class="box" id="section1.4">
      <h2>content 1.4</h2>
    </div>
    <div class="box" id="section1.5">
      <h2>content 1.5</h2>
    </div>
    <div class="box" id="section1.6">
      <h2>content 1.6</h2>
    </div>
  </div>
  <div id="div2">
    <div class="box" id="section2.1">
      <h2>content 2.1</h2>
    </div>
    <div class="box" id="section2.2">
      <h2>content 2.2</h2>
    </div>
    <div class="box" id="section2.3">
      <h2>content 2.3</h2>
    </div>
    <div class="box" id="section2.4">
      <h2>content 2.4</h2>
    </div>
    <div class="box" id="section2.5">
      <h2>content 2.5</h2>
    </div>
    <div class="box" id="section2.6">
      <h2>content 2.6</h2>
    </div>
  </div>
</div>

CSS

#wrapper {
  border:3px solid black;
  width:400px;
  height:300px;
  margin: 10px auto 0;
  overflow:hidden;
}

#div1 {
  width:4000px;height:200px;
  border:2px solid red;
  overflow-y:auto;overflow-x:auto;
  background-color:red;
}

#div2 {
  width:4000px;height:200px;
  border:2px solid blue;
  overflow-y:auto;overflow-x:auto;
  background-color:blue;
}

.box {
  float:left;
  border:2px solid green;
  width:50px;height:300px;
  background-color:green;
}

JavaScript

/*
$.localScroll({
    target: '#wrapper',
    axis: 'xy',
		queue:true,
		duration:1000,
		hash:false,
		lazy:true,
    onBefore:function( e, anchor, $target ){
		},
		onAfter:function( anchor, settings ){
		}
});
*/


jQuery(function( $ ){
	/*
	 * Most jQuery.localScroll's settings, actually belong to jQuery.ScrollTo, check it's demo for an example of each option.
	 * @see http://flesler.demos.com/jquery/scrollTo/
	 * You can use EVERY single setting of jQuery.ScrollTo, in the settings hash you send to jQuery.LocalScroll.
	 */

	// The default axis is 'y', but in this demo, I want to scroll both
	// You can modify any default like this
	$.localScroll.defaults.axis = 'xy';
	
	// Scroll initially if there's a hash (#something) in the url 
	$.localScroll.hash({
		target: '#wrapper', // Could be a selector or a jQuery object too.
		queue:true,
		duration:1500
	});
	
	/*
	 * NOTE: I use $.localScroll instead of $('#navigation').localScroll() so I
	 * also affect the >> and << links. I want every link in the page to scroll.
	 */
	$.localScroll({
		target: '#wrapper', // could be a selector or a jQuery object too.
		queue:true,
		duration:1000,
		hash:false,
		lazy:true,
		onBefore:function( e, anchor, $target ){
//			$(".section4").animate({ scrollTop: 0 }, 1000);
			// The 'this' is the settings object, can be modified
		},
		onAfter:function( anchor, settings ){
			// The 'this' contains the scrolled element (#content)
		}
	});

	
/*
hash: en false para no provocar problemas con la funcion url
lazy: en true para poder acceder el blacklab dinamicamente
	NO SE SI HAY DOS LLAMADAS CASI IDENTICAS Y SE PUEDEN RESUMIR EN 1 O HABIA ALGUN PROBLEMA CON EL 
	APAÑO DEL HASH Y SE HIZO ESO. MIRAR.

*/	


});