Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Rotation of a div using jQuery

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 43
    Comment on it

    There are many ways to rotate a div or a particular block. We can use animate to move a block from one position to another.

    Here is a simple way to change the position of a simple block.

    HTML:-

    <div id="rotator">
    
    	<div id="block-1" class="active">
    		<h2>Subtitle #1</h1>
    		<div>
    			<h1>WE DO COOL STUFF</h1>
    			<img src="spacefrog.jpg" alt="space frog">
    			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    		</div>
    	</div>
    	
    	<div id="block-2" class="block2_content">
    		<h2>Subtitle #2</h2>
    		<div>
    			<h1>FREQUENTLY ASKED QUESTIONS</h1>
    			<img src="goblins.jpg" alt="goblins">
    			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    		</div>			
    	</div>
    	
    	<div id="block-3" class="block3_content">
    		<h2>Subtitle #3</h2>
    		<div>
    			<h1>WHY WE ARE BUG FREE ?</h1>
    			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    		</div>			
    	</div>
    
    </div>

     

    CSS:-

    #rotator { width: 920px; height: 280px; position: relative; background: white; padding: 20px; }
    	 #block-1 { background: #d5fcff; }
    	#block-2 { background: #e1ffd5; }
    	#block-3 { background: #ffffd8; }
    	#rotator > div { 
    		position: absolute; 
    		overflow: hidden;
    		-webkit-transition: all 0.5s ease;
    		-moz-transition: all 0.5s ease;
    		-o-transition: all 0.5s ease;
    	}
    	#rotator .active { top: 20px; left: 20px; width: 580px; height: 280px; }
    	#rotator .block2_content { top: 20px; left: 620px; height: 130px; width: 320px; }
    	#rotator .block3_content { top: 170px; left: 620px; height: 130px; width: 320px; }
    	#rotator h2 {
    		text-align: center; 
    		line-height: 130px;
    	}
    	#rotator .active h2 {
    		display: none;
    	}

     

    JAVASCRIPT:-

    function rotate() {
    				
    	if (current == 1) {
    		$("#block-1").removeClass().addClass("active");
    		$("#block-2").removeClass().addClass("block2_content");
    		$("#block-3").removeClass().addClass("block3_content");
    	} else if (current == 2) {
    		$("#block-1").removeClass().addClass("block3_content");
    		$("#block-2").removeClass().addClass("active");
    		$("#block-3").removeClass().addClass("block2_content");
    	} else {
    		$("#block-1").removeClass().addClass("block2_content");
    		$("#block-2").removeClass().addClass("block3_content");
    		$("#block-3").removeClass().addClass("active");
    	}
    
    }
    $("#rotator div").click(function() {
    	current = this.id.substr(6);			
    	rotate();
    });

     

    https://jsfiddle.net/cgx6o724/1/

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: