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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Aug 2010
    Posts
    405
    Thanks
    17
    Thanked 2 Times in 2 Posts

    div class not switched in jquery

    This should be pretty simple, but I'm not sure what's stopping this from happening. I just need to switch a div class at a certain point to prevent the beginning animation to run, if they've clicked it - unless they return to the starting point. EDIT: But the mouseovers still work, despite the div change.

    Code:
    $(document).ready(function(){
    
    /* here I wanted to use a div class to dictate whether this animation runs. By default, page loads with it at 'main_page' */
    if ($("#testit").hasClass('main_page')) {
    
    
    /* now the image animations */
    
    
    var $width_one = $("#sq1").width();
    var $height_one = $("#sq1").height();
    
    
    $(".square.one,#link_nest").hover(function(){
        if (!$(".square.one").hasClass('animated')) {
            $(".square.one").dequeue().stop().animate({ width:"155px",height:"219px" },240);
            $("#link_nest").css({color:"#153d53",fontWeight:"400"},100);
            $("#square_caption1").css('visibility','visible');
                }
    }, function() {
        $(".square.one").addClass('animated').animate({ width:$width_one, height:$height_one }, "normal", "linear", function() {
            $("#square_caption1").css('visibility','hidden');
            $("#link_nest").css({color:"black",fontFamily: "Source Sans Pro",fontWeight:"300"},100);
            $(this).removeClass('animated').dequeue();
        });
    });
    
    } else if ( $(this).hasClass('sub_page') ) { /* do nothing */
    
    };
    
    
    /* end image animations */
    
    /* start showing,hiding */
    
    
        $('.square-container').on('click', '.square', function(event) {
    
    /* Here, I'm trying to remove the class - i know it should probably be an 'if' statement. I'm just testing the idea */
    
        $('#testit').removeClass('main_page');
    
    /* now on to the rest of the actions when clicked */
    
        if ( $(this).hasClass('active') ) {
    
    
                $('.details h1').animate({ opacity: 0 }, 600, function() { $('.details h1').html(' '); });
                $('.details .article').animate({ opacity: 0 }, 600, function() { $('.details .article').unload(); });
                $('.one').stop().animate({ width: '135', height: '207', left: '648', top: '190', opacity: 1}, 600, function() { /*animation completed*/ });            
                $('.two').stop().animate({ width: '154', height: '208', left: '485', top: '125', opacity: 1}, 600, function() { /*animation completed*/ });
                $('.three').stop().animate({ width: '245', height: '145', left: '231', top: '170', opacity: 1}, 600, function() { /*animation completed*/ });  
                $('.four').stop().animate({ width: '190', height: '139', left: '413', top: '340', opacity: 1}, 600, function() { /*animation completed*/ });
                $('.square').removeClass('active');
                /* this animation takes them back to the beginning, so I want to switch div back again */
                $('#testit').addClass('main_page');
    
            } else if ( $(this).hasClass('one') ) {
    
        /* in here, I don't want those first animations to run */
    
                /*hide the currently visible stuff*/
                $('.details h1').animate({ opacity: 0 }, 600, function() { /*animation completed*/ });
                $('.details .article').animate({ opacity: 0 }, 600, function() { /*animation completed*/ });
                $('#sub-nav').animate({ opacity: 0 }, 1, function() { /*animation completed*/ });
    
    
                /*Animate squares positions*/
                $('.one').stop().animate({ width: '227', height: '320', left: '260', top: '26', opacity: 1}, 600, function() {
    
                    /*load content*/;
    
                    $('.details h1').html(' ');
                    $('.details .article').load('inc/the-nest.php');           
                    $('.details h1').animate({ opacity: 1 }, 600, function() { /*animation completed*/ });
                    $('.details .article').animate({ opacity: 1 }, 600, function() { /*animation completed*/ });
                    $('.details .article').animate({ width: '400',left: '260', opacity: 1 }, 600, function() { /*animation completed*/ });
                    $('.home-register').animate({ opacity: 0 }, 1, function() { /*animation completed*/ });
                    $('#sub-nav').animate({ opacity: 0 }, 1, function() { /*animation completed*/ });
                    $('.gallery-subs').css({display:"none",overflow:"visible",position:"relative"},800);
                    $('.gallery-subs').animate({ opacity: 0 }, 1, function() { /*animation completed*/ });
                    $("#link_nest").css({color:"#153d53",fontWeight:"400"},100);
                    $("#link_hillcrest, #link_3little, #link_early, #link_contact, #link_ii_by_iv, #link_rockport, #link_raw").css({color:"black",fontFamily: "Source Sans Pro",fontWeight:"300"},100);
    
                 });
    
                 /*Position unselected squares*/    
                $('.two').stop().animate({ width: '90', height: '126', left: '160', top: '180', opacity: 1}, 600, function() { /*animation completed*/ });
                $('.three').stop().animate({ width: '70', height: '70', left: '50', top: '320', opacity: 1}, 600, function() { /*animation completed*/ }); 
                $('.four').stop().animate({ width: '80', height: '80', left: '129', top: '350', opacity: 1}, 600, function() { /*animation completed*/ });
    
    
                /*Select active square*/
                $('.square').removeClass('active');
                $(this).addClass('active');
    
            }  else {       
                alert('nothing');
            }       
    
        });
    });
    Last edited by turpentyne; 03-13-2013 at 07:53 PM.

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    no html to compare to makes it hard to visualize.

    - If this is just for your main page, first things first, it should only be on your main page, you are making it too complicated.

    - on this line

    if ( $(this).hasClass('active') ) {

    $(this) refers to the document itself as it's not inside of a function, was this your intention?


    - Make this easier for us. remove all the comments and then only comment about exactly what isnt working and annotate which line you think is failing.

  • #3
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    also Im wondering if using the :animated selector would be easier??
    http://api.jquery.com/animated-selector/

  • #4
    Regular Coder
    Join Date
    Aug 2010
    Posts
    405
    Thanks
    17
    Thanked 2 Times in 2 Posts
    It's not actually going to a subpage. The code is just including a new php file inside a div, along with the click animation.

    There's no actual subpage. I'd maybe have done it different, but I'm taking over somebody else's code.
    EDIT: I thought .square-container is referenced in:

    if ( $(this).hasClass('active') ) {

    This is the actual html:

    Code:
    <html>
    <head>
    	<title>The Title</title>
    	
    	<link rel="stylesheet" type="text/css" href="css/x.css">
    	<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,300,300italic' rel='stylesheet' type='text/css'>
    	<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    		
    	<script src="http://code.jquery.com/jquery-latest.js"></script>		
    	<script src="js/functions.js"></script>
    		
    </head>
    <body>
    <div id="testit" class="main_page"></div>
    <div id="content" style="">
    <div class="container">
    	<div class="header">
    		<div class="navbox">
    		<!-- later this nav will be separated out as an include -->
    		<ul class="main-nav">
    			<li><a href="#" class="main ee" id="link_nest">THE text1</a></li>
    			<li><a href="#" class="main bb" id="link_hillcrest">text2</a></li>
    			<li><a href="#" class="main cc" id="link_3little">text3</a></li>
    			<li><a href="#" class="main dd" id="link_early">EARLY BIRD REGISTRATION</a>
    				 <ul id="sub-nav">
    				 	<li class="subnav"> <span class="subnav-separators">: :</span> </li>
    				 	<li class="subnav"><a href="#" class="main ff"id="link_rockport"> text4 </a></li>   
    				 	<li class="subnav"><span class="subnav-separators">|</span></li>  
    				 	<li class="subnav"><a href="#"class="main gg" id="link_ii_by_iv"> text5 </a></li>  
    				 	<li class="subnav"><span class="subnav-separators">|</span></li> 
    				 	<li class="subnav"><a href="#" class="main hh" id="link_raw"> text6 </a></li>
    				 	</ul>
    			</li>
    			<li><a href="#" class="main contact" id="link_contact">CONTACT</a></li>
    			</ul>
    			</div>
    	
    			<div class="logo-main">
    			<ul class="main-nav">
    				<li><a href="#" class="main aa"><img src="images/logo.png"></a></li>
    				</ul>
    			</div>
    		</div>
    		
    
    	
    	
    	<div class="square-container"> 
    		<div class="square one" id="sq1" style="overflow:hidden;">
    			<div id="square_caption1" class="square_captions">The asdfasfd</div>
    			<div id="cf" style="overflow:hidden;height:100%;width:100%;">
    				<img class="bottom" style="width:100%;" src="images/the_nest_residences_1_color.jpg">
    				<img class="top" style="width:100%;" src="images/the_nest_residences_1.jpg">
    			</div>
    			
    						
    		</div>
    			<div class="gallery-subs" style="height:0px;overflow:visible; position:relative; top:340px;left:65px;z-index:40; display:none;opacity:0;">
    				<div style="height:30px;width:30px;background-color:#000000;float:left;margin-right:20px;">
    					<a href="images/examples/image-1.gif" rel="lightbox[plants]" title="asdfasdfasdf" id="nest_thumb_url_1"><img src="images/gallery/nest_thumb1.jpg" id="nest_thumbs_1" class="gallery_thumbs"></a>
    				</div>
    				<div style="height:30px;width:30px;background-color:#ffffff;float:left;margin-right:20px;">
    					<a href="images/examples/image-2.jpg" rel="lightbox[plants]" title="asdfasdfasdf" id="nest_thumb_url_2"><img src="images/gallery/nest_thumb2.jpg" id="nest_thumbs_2" class="gallery_thumbs"></a>
    				</div>
    				<div style="height:30px;width:30px;background-color:#000000;float:left;margin-right:20px;">
    					<a href="images/examples/image-3.jpg" rel="lightbox[plants]" title="asdfasdfasdf" id="nest_thumb_url_3"><img src="images/gallery/nest_thumb3.jpg" id="nest_thumbs_3" class="gallery_thumbs"></a>
    				</div>
    			</div>
    			
    
    			
    		<div class="square two" id="sq2" style="">
    			<div id="square_caption2" class="square_captions">Hillcrest Village</div>
    			<div id="cf" style="overflow:hidden;height:100%;width:100%;"">
    				<img class="bottom" style="height:120%;" src="images/the_nest_residences_2_color.jpg" id="pic_hillcrest_bw">
    				<img class="top" style="height:120%;" src="images/the_nest_residences_2.jpg" id="pic_hillcrest_color">
    			</div>
    
    		</div>
    		
    		<div class="square three" id="sq3" style="left-margin:20px;">
    			<div id="square_caption3" class="square_captions">Three Little Birds</div>
    			<div id="cf" style="overflow:hidden;height:100%;width:100%;"">
    				<img class="bottom" style="width:100%;" src="images/the_nest_residences_3_color.jpg">
    				<img class="top" style="width:100%;" src="images/the_nest_residences_3.jpg">
    			</div>
    		</div>
    		
    		<div class="square four" id="sq4" style="">
    			<div id="square_caption4" class="square_captions">Early Registration</div>
    			<div id="cf" style="overflow:hidden;height:100%;width:100%;"">
    				<img class="bottom" style="width:100%;" src="images/the_nest_residences_4_color.jpg">
    				<img class="top" style="width:100%;" src="images/the_nest_residences_4.jpg">
    			</div>
    		</div>
    		
    		<div class="home-register">
    		<p class="reg1">THIS SPRING DEFINE YOUR SPACE</p>
    		<p class="reg2">EARLY BIRD PREVIEW EVENT</p>
    		<p class="reg3"><a href="#" class="main dd"><i>Click to Register</i></a></p>
    			
    	</div>
    	</div>
    		
    	<div class="details">
    		<h1>The Nest</h1>
    		
    		<div class="article">
    		article
    
    		</div>
    	
    				
    	</div>
    
    	
    
    	<div class="foot-container"> 
    		<div class="foot-logo"><a href="http://www.rockportgroup.net/" target="_new"><img src="images/logo-rockport.png" border="0"></a><br/>
    		</div>
    			
    		<div class="foot-nav" style="">
    			<!-- later this nav will be separated out as an include -->
    			<span class="privacy_policy"><a href="#" class="main privacy_link" id="link_privacy">PRIVACY POLICY</a></span> | <a href="http://www.thewalshgroup.ca" target="_new">POWERED BY THE WALSH GROUP</a> | <a href="#" id="music_control" class="">MUSIC OFF</a>
    		</div>
    			
    	</div>		
    </div>
    </div>
    Last edited by turpentyne; 03-13-2013 at 09:20 PM.


  •  

    Posting Permissions

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