SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)

    Highlighting a div

    I am not 100% if this is the correct forum, but here we go. People at work found some jQuery code that makes a slider. I cannot recall the website where they got the code, but it looks similar to the demo found here: http://demo.webdeveloperplus.com/fea...ontent-slider/
    In the sider example you can see it says "15+ Excellent...", the code looks like:
    HTML Code:
     <div class="info" > 
      <h2><a href="#" >15+ Excellent High Speed Photographs</a></h2> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p> 
     </div> 
    What I am wanting to do is, when you tab to the link in the <h2>, change the background of the info div. I can make the div change via css if you hover the div, but not if you give focus to the link. I need guidance how to make this work. Do not use the slider in the link above. You can work off of the html snippet above.
    Thanks
    Ryan B | My Blog | Twitter

  2. #2
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I suspect the slider in your demo link uses setInterval() to loop through an array of element id's containing the 4 thumbnails and sets the background for the current id to the background image and clears the background for the other elements along the lines of the demo code below.

    This demo loops through 4 divs and changes the background colour of the current div to green with the other 3 returning to the default background every 2 seconds.

    Code:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <style type="text/css">
     
    #div1, #div2, #div3, #div4 {
     margin: 0px 0px 20px 100px;
        padding: 0px 0px 0px 0px;
        width: 200px;
        height: 100px;
        border: 1px solid black
    }
    </style>
    <script type="text/javascript">
     
    var contO = new Array();
    var currInd = 0;
     
    function changeBg() {
        for(var i=0; i < contO.length; i++) {
              var bg = (i != currInd)? '' : 'green';
             contO[i].style.backgroundColor = bg;
        }
        if(++currInd > contO.length-1) currInd = 0;
    }
     
    window.onload=function() {
        contO = document.getElementById("container").getElementsByTagName("div");
        changeBg();
        setInterval('changeBg()',2000);  
    }
    </script>
    </head>
    <body>
     
    <div id="container">
            <div id="div1">div 1</div>
            <div id="div2">div 2</div>
           <div id="div3">div 3</div>
           <div id="div4">div 4</div>
    </div>
     
    </body>
    </html>
    Is this the same type of effect you want for your code snippet?

  3. #3
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    I am now at work, the code was taken from http://landofcoder.com/our-porfolios...y-plugins.html

    There is not any arrays that I can see in our code.

    Code JavaScript:
    (function($) {
    	 $.fn.lofJSidernews = function( settings ) {
    	 	return this.each(function() {
    			// get instance of the lofSiderNew.
    			new  $.lofSidernews( this, settings ); 
    		});
     	 }
    	 $.lofSidernews = function( obj, settings ){
    		this.settings = {
    			direction	    	: '',
    			mainItemSelector    : 'li',
    			navInnerSelector	: 'ul',
    			navSelector  		: 'li' ,
    			navigatorEvent		: 'click',
    			wapperSelector: 	'.lof-main-wapper',
    			interval	  	 	: 4000,
    			auto			    : true,
    			maxItemDisplay	 	: 3,
    			startItem			: 0,
    			navPosition			: 'vertical', 
    			navigatorHeight		: 115,
    			navigatorWidth		: 325,
    			duration			: 600,
    			navItemsSelector    : '.lof-navigator li',
    			navOuterSelector    : '.lof-navigator-outer' ,
    			isPreloaded			: true,
    			easing				: 'easeInOutQuad'
    		}	
    		$.extend( this.settings, settings ||{} );	
    		this.nextNo         = null;
    		this.previousNo     = null;
    		this.maxWidth  = this.settings.mainWidth || 690;
    		this.wrapper = $( obj ).find( this.settings.wapperSelector );	
    		this.slides = this.wrapper.find( this.settings.mainItemSelector );
    		if( !this.wrapper.length || !this.slides.length ) return ;
    		// set width of wapper
    		if( this.settings.maxItemDisplay > this.slides.length ){
    			this.settings.maxItemDisplay = this.slides.length;	
    		}
    		this.currentNo      = isNaN(this.settings.startItem)||this.settings.startItem > this.slides.length?0:this.settings.startItem;
    		this.navigatorOuter = $( obj ).find( this.settings.navOuterSelector );	
    		this.navigatorItems = $( obj ).find( this.settings.navItemsSelector ) ;
    		this.navigatorInner = this.navigatorOuter.find( this.settings.navInnerSelector );
     
    		if( this.settings.navPosition == 'horizontal' ){ 
    			this.navigatorInner.width( this.slides.length * this.settings.navigatorWidth );
    			this.navigatorOuter.width( this.settings.maxItemDisplay * this.settings.navigatorWidth );
    			this.navigatorOuter.height(	this.settings.navigatorHeight );
     
    		} else {
    			this.navigatorInner.height( this.slides.length * this.settings.navigatorHeight );	
     
    			this.navigatorOuter.height( this.settings.maxItemDisplay * this.settings.navigatorHeight );
    			this.navigatorOuter.width(	this.settings.navigatorWidth );
    		}		
    		this.navigratorStep = this.__getPositionMode( this.settings.navPosition );		
    		this.directionMode = this.__getDirectionMode();  
     
     
    		if( this.settings.direction == 'opacity') {
    			this.wrapper.addClass( 'lof-opacity' );
    			$(this.slides).css('opacity',0).eq(this.currentNo).css('opacity',1);
    		} else { 
    			this.wrapper.css({'left':'-'+this.currentNo*this.maxSize+'px', 'width':( this.maxWidth ) * this.slides.length } );
    		}
     
     
    		if( this.settings.isPreloaded ) {
    			this.preLoadImage( this.onComplete );
    		} else {
    			this.onComplete();
    		}
     
    	 }
         $.lofSidernews.fn =  $.lofSidernews.prototype;
         $.lofSidernews.fn.extend =  $.lofSidernews.extend = $.extend;
     
    	 $.lofSidernews.fn.extend({
     
    		startUp:function( obj, wrapper ) {
    			seft = this;
     
    			this.navigatorItems.each( function(index, item ){
    				$(item).click( function(){
    					seft.jumping( index, true );
    					seft.setNavActive( index, item );					
    				} );
    				$(item).css( {'height': seft.settings.navigatorHeight, 'width':  seft.settings.navigatorWidth} );
    			})
    			this.registerWheelHandler( this.navigatorOuter, this );
    			this.setNavActive(this.currentNo );
     
    			if( this.settings.buttons && typeof (this.settings.buttons) == "object" ){
    				this.registerButtonsControl( 'click', this.settings.buttons, this );
     
    			}
    			if( this.settings.auto ) 
    			this.play( this.settings.interval,'next', true );
     
    			return this;
    		},
    		onComplete:function(){
    			setTimeout( function(){ $('.preload').fadeOut( 900 ); }, 400 );	this.startUp( );
    		},
    		preLoadImage:function(  callback ){
    			var self = this;
    			var images = this.wrapper.find( 'img' );
     
    			var count = 0;
    			images.each( function(index,image){ 
    				if( !image.complete ){				  
    					image.onload =function(){
    						count++;
    						if( count >= images.length ){
    							self.onComplete();
    						}
    					}
    					image.onerror =function(){ 
    						count++;
    						if( count >= images.length ){
    							self.onComplete();
    						}	
    					}
    				}else {
    					count++;
    					if( count >= images.length ){
    						self.onComplete();
    					}	
    				}
    			} );
    		},
    		navivationAnimate:function( currentIndex ) { 
    			if (currentIndex <= this.settings.startItem 
    				|| currentIndex - this.settings.startItem >= this.settings.maxItemDisplay-1) {
    					this.settings.startItem = currentIndex - this.settings.maxItemDisplay+2;
    					if (this.settings.startItem < 0) this.settings.startItem = 0;
    					if (this.settings.startItem >this.slides.length-this.settings.maxItemDisplay) {
    						this.settings.startItem = this.slides.length-this.settings.maxItemDisplay;
    					}
    			}		
    			this.navigatorInner.stop().animate( eval('({'+this.navigratorStep[0]+':-'+this.settings.startItem*this.navigratorStep[1]+'})'), 
    												{duration:500, easing:'easeInOutQuad'} );	
    		},
    		setNavActive:function( index, item ){
    			if( (this.navigatorItems) ){ 
    				this.navigatorItems.removeClass( 'active' );
    				$(this.navigatorItems.get(index)).addClass( 'active' );	
    				this.navivationAnimate( this.currentNo );	
    			}
    		},
    		__getPositionMode:function( position ){
    			if(	position  == 'horizontal' ){
    				return ['left', this.settings.navigatorWidth];
    			}
    			return ['top', this.settings.navigatorHeight];
    		},
    		__getDirectionMode:function(){
    			switch( this.settings.direction ){
    				case 'opacity': this.maxSize=0; return ['opacity','opacity'];
    				default: this.maxSize=this.maxWidth; return ['left','width'];
    			}
    		},
    		registerWheelHandler:function( element, obj ){ 
    			 element.bind('mousewheel', function(event, delta ) {
    				var dir = delta > 0 ? 'Up' : 'Down',
    					vel = Math.abs(delta);
    				if( delta > 0 ){
    					obj.previous( true );
    				} else {
    					obj.next( true );
    				}
    				return false;
    			});
    		},
    		registerButtonsControl:function( eventHandler, objects, self ){ 
    			for( var action in objects ){ 
    				switch (action.toString() ){
    					case 'next':
    						objects[action].click( function() { self.next( true) } );
    						break;
    					case 'previous':
    						objects[action].click( function() { self.previous( true) } );
    						break;
    				}
    			}
    			return this;	
    		},
    		onProcessing:function( manual, start, end ){	 		
    			this.previousNo = this.currentNo + (this.currentNo>0 ? -1 : this.slides.length-1);
    			this.nextNo 	= this.currentNo + (this.currentNo < this.slides.length-1 ? 1 : 1- this.slides.length);				
    			return this;
    		},
    		finishFx:function( manual ){
    			if( manual ) this.stop();
    			if( manual && this.settings.auto ){ 
    				this.play( this.settings.interval,'next', true );
    			}		
    			this.setNavActive( this.currentNo );	
    		},
    		getObjectDirection:function( start, end ){
    			return eval("({'"+this.directionMode[0]+"':-"+(this.currentNo*start)+"})");	
    		},
    		fxStart:function( index, obj, currentObj ){
    				if( this.settings.direction == 'opacity' ) { 
    					$(this.slides).stop().animate({opacity:0}, {duration: this.settings.duration, easing:this.settings.easing} );
    					$(this.slides).eq(index).stop().animate( {opacity:1}, {duration: this.settings.duration, easing:this.settings.easing} );
    				}else {
    					this.wrapper.stop().animate( obj, {duration: this.settings.duration, easing:this.settings.easing} );
    				}
    			return this;
    		},
    		jumping:function( no, manual ){
    			this.stop(); 
    			if( this.currentNo == no ) return;		
    			 var obj = eval("({'"+this.directionMode[0]+"':-"+(this.maxSize*no)+"})");
    			this.onProcessing( null, manual, 0, this.maxSize )
    				.fxStart( no, obj, this )
    				.finishFx( manual );	
    				this.currentNo  = no;
    		},
    		next:function( manual , item){
     
    			this.currentNo += (this.currentNo < this.slides.length-1) ? 1 : (1 - this.slides.length);	
    			this.onProcessing( item, manual, 0, this.maxSize )
    				.fxStart( this.currentNo, this.getObjectDirection(this.maxSize ), this )
    				.finishFx( manual );
    		},
    		previous:function( manual, item ){
    			this.currentNo += this.currentNo > 0 ? -1 : this.slides.length - 1;
    			this.onProcessing( item, manual )
    				.fxStart( this.currentNo, this.getObjectDirection(this.maxSize ), this )
    				.finishFx( manual	);			
    		},
    		play:function( delay, direction, wait ){	
    			this.stop(); 
    			if(!wait){ this[direction](false); }
    			var self  = this;
    			this.isRun = setTimeout(function() { self[direction](true); }, delay);
    		},
    		stop:function(){ 
    			if (this.isRun == null) return;
    			clearTimeout(this.isRun);
                this.isRun = null; 
    		}
    	})
    })(jQuery)
    Ryan B | My Blog | Twitter

  4. #4
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    can I get this bumped
    Ryan B | My Blog | Twitter

  5. #5
    SitePoint Enthusiast nimpkish-media's Avatar
    Join Date
    Jun 2010
    Location
    Victoria BC, Canada
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey there,

    I am not sure what you mean...

    Quote Originally Posted by rguy84 View Post
    What I am wanting to do is, when you tab to the link in the <h2>, change the background of the info div. I can make the div change via css if you hover the div, but not if you give focus to the link. I need guidance how to make this work. Do not use the slider in the link above. You can work off of the html snippet above.
    Thanks
    What do you mean by "tab"? Focus? Please explain and I think I can help.

  6. #6
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    tab = tab key, above caps lock...

    do you know how you can tab to a link, or button, and hit enter to follow that button or link? When you hit tab, you get that gray dotted border around the link or button, that dotted border means that that element has focus. For example, if you go to my site's contact page (http://rbenson.info/contact.php) you click in the name field, the field should turn blue, meaning that field has focus... So what i need is some JS that says (using my demo code in post 1):
    if(an anchor wrapped in an h2, inside div with class info has focus){ make the background color of div with class info blue }
    Ryan B | My Blog | Twitter


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
  •