Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2013
    Location
    Russia - Kazan
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Jquery change background-position problem

    Hello as u read from the title it's like Change the background-position of div by hover over anther element like li u can find in the code
    it's like css sprites but in anther element so i use jQuery

    HTML CODE
    Code:
    <div class="root">
    <div class="home-banner">
    			<ul class="services">
    									<li class="item-1"><a href="#">love</a></li>
    										<li class="item-2"><a href="#">love o</a></li>
    										<li class="item-3"><a href="#">love 2 <br> Marketing</a></li>
    										<li class="item-4"><a href="#">love 3 <br> Optimization</a></li>
    										<li class="item-5"><a href="#">love love 4 </a></li>
    										<li class="item-6"><a href="#">love 6</a></li>
    										<li class="item-7"><a href="#">love  7</a></li>
    								</ul>
    			<ul class="desc">
    				<li style="display: list-item;">
    					&nbsp;
    <h2>Say <br>
    My<br>
    Love</h2>	
    				</li>
    									<li class="seo">OK ok 1 </li>
    										<li class="ppc">OK ok 2</li>
    										<li class="e-mail-marketing">OK ok 3</li>
    										<li class="conversion-rate-optimization">OK ok 4</li>
    										<li class="social-media">OK ok 4</li>
    										<li class="online-pr">OK ok 6</li>
    										<li class="website-landing-page-design">OK ok 7</li>
    								</ul>
    		</div></div>
    CSS CODE
    Code:
    .home-banner { margin: 7px 0 25px; position: relative; height: 396px; width: 100%; background: url(images/home-banner.png) no-repeat 112px 0; }
    .home-banner .services li { position: absolute; list-style: none; font-family: 'TradeGothic-Light'; font-size: 28px; line-height: 30px; color: #434343; cursor: pointer; }
    .home-banner .services li a { text-decoration: none; color: #434343; display: block; }
    .home-banner .services li a:hover { text-decoration: none; }
    .home-banner .services li.item-1 { padding: 20px 80px 20px 0; top: 55px; left: 52px; }
    .home-banner .services li.item-2 { padding: 20px 80px 20px 0; top: 133px; left: 77px; }
    .home-banner .services li.item-3 { padding: 20px 80px 20px 0; top: 213px; left: 42px; text-align: right; }
    .home-banner .services li.item-4 { padding: 10px 0 10px 90px; top: 15px; right: 46px; font-size: 26px; }
    .home-banner .services li.item-5 { padding: 16px 0 28px 90px; top: 110px; right: 52px; font-size: 26px; }
    .home-banner .services li.item-6 { padding: 20px 0 18px 76px; top: 188px; right: 31px; font-size: 26px; }
    .home-banner .services li.item-7 { padding: 10px 0 10px 90px; top: 275px; right: -4px; font-size: 26px; }
    .home-banner .desc li { position: absolute; top: 120px; left: 353px; list-style: none; font-size: 21px; line-height: 23px; text-align: center; width: 214px; display: none; }
    .home-banner .desc li.online-pr { top: 100px; font-size: 20px; }
    .home-banner .desc li h2 { font-family: 'TradeGothicBoldCn'; font-size: 44px; line-height: 46px; color: #3a3a3a; font-weight: normal; }
    .home-banner .desc li h3 { font-family: 'TradeGothic-Light'; font-size: 28px; line-height: 30px; color: #434343; font-weight: normal; }
    .root { position: relative; width: 965px; margin: 0 auto;}
    .ppc,.seo,.e-mail-marketing{margin-top:10px;}
    and here the jQuery code

    Code:
    jQuery(function($) {$('.desc li:eq(0)').show();
    	formJS();
    	var suspend;
    	$('.widget_black_studio_tinymce').each(function() {
    		if($(this).find('h3').length) {
    			$(this).addClass('side-services');
    		}
    	})
    	$(document).on('mouseenter', '.services li', function(){
    		clearTimeout(suspend);
    		$self = $(this);
    
    		showIt = setTimeout( function(){
    			var index = $self.index() + 1;
    			var position = -(index * 396);
    			$('.home-banner').css('background-position', '112px '+ position +'px');
    			$('.desc li').hide();
    			$('.desc li:eq(' + index + ')').fadeIn();
    		}, 250);
    	}).on('mouseleave', '.services li', function(){
    		clearTimeout(showIt);
    		suspend = setTimeout( function(){
    			if ( $('.desc li:first').is(':visible')) {
    				return false;
    			}
    
    			else { 
    				$('.desc li').hide();
    				$('.desc li:eq(0)').fadeIn();
    				$('.home-banner').css('background-position', '112px 0');
    			}
    		}, 500);
    	});

  • #2
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,987
    Thanks
    4
    Thanked 2,660 Times in 2,629 Posts
    Not a thing to do with Java. Moving from Java forum to Javascript frameworks forum.
    PHP Code:
    header('HTTP/1.1 420 Enhance Your Calm'); 


  •  

    Posting Permissions

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