Toggle Div on click - javascript

I want to modify this code for click event. But I am not able to do so. My requirement is to slide the panel on click (not hover) and again rollback on click (and not mouse out).
HTML
<div id="sidePanel">
<div id="panelContent">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FWebsTutorial&width=200&height=258&colorscheme=light&show_faces=true&border_color&stream=false&header=false&appId=253401284678598" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:258px;" allowTransparency="true"></iframe>
</div>
<div id="panelHandle"><p>Facebook</p></div>
</div>
CSS
/* ===== Primary Styles ========================================================
Author: NTechi | WebsTutorial
========================================================================== */
body{
font-family:Arial;
}
#sidePanel{
width:245px;
position:fixed;
left:-202px;
top:15%;
}
#panelHandle{
background-image: -webkit-linear-gradient(top,#333,#222);
background-image: -moz-linear-gradient(center top , #333333, #222222);
background-image: -o-linear-gradient(center top , #333333, #222222);
background-image: -ms-linear-gradient(center top , #333333, #222222);
background-image:linear-gradient(center top , #333333, #222222);
height:150px;
width:40px;
border-radius:0 5px 5px 0;
float:left;
cursor:pointer;
}
#panelContent{
float:left;
border:1px solid #333333;
width:200px;
height:300px;
background-color:#EEEEEE;
}
#panelHandle p {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
color: #FFFFFF;
font-size: 24px;
font-weight: bold;
left: -4px;
margin: 0;
padding: 0;
position: relative;
top: 26px;
}
JavaScript
jQuery(function($) {
$(document).ready(function() {
$('#panelHandle').hover(function() {
$('#sidePanel').stop(true, false).animate({
'left': '0px'
}, 900);
}, function() {
jQuery.noConflict();
});
jQuery('#sidePanel').hover(function() {
// Do nothing
}, function() {
jQuery.noConflict();
jQuery('#sidePanel').animate({
left: '-201px'
}, 800);
});
});
});
Any help would be really helpful.
Thanks in advance!

Use Toggle API Instead http://api.jquery.com/toggle-event/
$('#panelHandle').toggle(function() {
$('#sidePanel').stop(true, false).animate({
'left': '0px'
}, 900);
}, function() {
jQuery('#sidePanel').animate({
left: '-201px'
}, 800);
});
Fiddle: http://jsfiddle.net/GPdFk/4812/

Simple way to do this. Change the hover event to toggle event.
Using your jsfiddle it would be something like this:
$(document).ready(function() {
$('#panelHandle').toggle(function() {
$('#sidePanel').stop(true, false).animate({
'left': '0px'
}, 900);
}, function() {
jQuery.noConflict();
jQuery('#sidePanel').animate({
left: '-201px'
}, 800);
});
});

It can easily be done using .toggle()
Here is the updated code:
jQuery(function($) {
$('#panelHandle').toggle(function() {
$('#sidePanel').animate({
'left': '0px'
}, 900);
}, function() {
$('#sidePanel').animate({
'left': '-202px'
}, 900);
});
});

Related

Use jQuery to animate the re-position of DIV's after fadeOut (fiddle)?

To get a better idea of what I'm trying to do, I have this fiddle:
https://jsfiddle.net/tfisher9180/7efagjhj/1/
When you click the button 3 squares fade out, and then afterwards the orange square immediately snaps up because of the absence of the others.
I want to know if there's a way to animate that to look more fluid so that the orange box slides up as well.
.square {transition: all 0.3s linear;}
This did not work as I expected.
UPDATE:
Marking #anied as correct answer for working with me a bit and helping to fix positioning. Everyone's solutions were awesome though and worked nicely. +1 for all and will have to try out a few to see which looks best!!!
So, the problem with using a CSS transition here is that there is no CSS property of the orange box that is changing when the boxes around it disappear-- it is simply reflowing to the new position in the DOM based on the change the display property of these other boxes. I think if you want this to work you will have to write a custom bit of jQuery code that fades the boxes out but doesn't immediately hide them, but instead slides them up and out of sight.
Try something like this:
$('#sort').on('click', function() {
$('.square').each(function() {
if (!$(this).hasClass('square-orange')) {
$(this).animate({'opacity' : 0}, 400, 'swing', function () {
$(this).slideUp();
});
}
});
});
edit:
Regarding the skip-- not really sure exactly, but I tried replacing the slideUp with a custom replacement and it seemed to resolve it:
$('#sort').on('click', function() {
$('.square').each(function() {
if (!$(this).hasClass('square-orange')) {
$(this).animate({'opacity': 0}, 400, 'swing', function() {
$(this).animate({'height': 0}, 400, 'swing');
});
}
});
});
edit (again): actually, looking now I see that one problem is that the top .row still is retaining height after the boxes within slide-up.... you might need to slide that up as well, depending on your requirements..
edit:
OK, last time, fixed your positioning a bit-- I think this works:
$('#sort').on('click', function() {
$('.square').each(function() {
if (!$(this).hasClass('square-orange')) {
$(this).animate({'opacity': 0}, 400, 'swing', function() {
$(this).animate({'height' : 0}, 400, 'swing');
});
}
});
});
.clearfix:after {
content: "";
display: table;
clear: both;
}
.row {
display: block;
clear: both;
}
.square {
width: 60px;
height: 60px;
display: block;
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
.square-red {
background-color: red;
}
.square-blue {
background-color: blue;
}
.square-orange {
background-color: orange;
}
.square-purple {
background-color: purple;
}
#sort {
margin-top: 30px;
background-color: #414141;
border: 0;
color: #f2f2f2;
padding: 10px 15px;
cursor: pointer;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="row row-top clearfix">
<div class="square square-red"></div>
<div class="square square-blue"></div>
</div>
<div class="row row-bottom clearfix">
<div class="square square-orange"></div>
<div class="square square-purple"></div>
</div>
</div>
<button id="sort">Sort Orange</button>
Use this jquery:
$('#sort').on('click', function() {
$("row").eq(0).css("min-height",$(".square-red").height()+"px");
$(".square:not(.square-orange)").fadeOut().slideUp();
$(".square-red").parent().slideUp();});
Try This:
$('#sort').on('click', function() {
$('.square').each(function() {
if (!$(this).hasClass('square-orange')) {
$(this).animate({
opacity: 0
}, 500, function() {
$(this).slideUp(100);
});
}
});
});
https://jsfiddle.net/7efagjhj/7/
You can set the position of .square-orange and #sort to absolute and set top .position().top before .fadeOut() begins, use .promise(), .animate() to animate .square-orange when .square:not(.square-orange) elements animation completes
$('#sort').on('click', function() {
$(this).add(".square-orange")
.each(function() {
$(this).css({
"position": "absolute",
top: $(this).position().top
})
})
$('.square:not(.square-orange)').each(function() {
$(this).fadeOut();
})
.promise()
.then(function() {
$(".square-orange")
.animate({
top: 20
}, 1000, "linear")
})
});
.square {
width: 60px;
height: 60px;
display: inline-block;
}
.square-red {
background-color: red;
}
.square-blue {
background-color: blue;
}
.square-orange {
background-color: orange;
}
.square-purple {
background-color: purple;
}
#sort {
margin-top: 30px;
background-color: #414141;
border: 0;
color: #f2f2f2;
padding: 10px 15px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="row">
<div class="square square-red"></div>
<div class="square square-blue"></div>
</div>
<div class="row">
<div class="square square-orange"></div>
<div class="square square-purple"></div>
</div>
</div>
<button id="sort">Sort Orange</button>
jsfiddle https://jsfiddle.net/7efagjhj/8/

Count back percentage using JQuery

I have the code below where I'd like to the numbers count back to 0% once hover the object out. Also I can't figure our how to make the value disappear again as it was on load. Could you please help me solve this.
Thanks in advance.
HTML
<div class="container">
<div class="fill" data-width="80%"></div>
</div>
<div class="container">
<div class="fill" data-width="50%"></div>
</div>
CSS
.container {
position: relative;
width: 300px;
height: 30px;
background-color: blue;
margin: 10px auto;
}
.fill {
height: 100%;
width: 0;
background-color: red;
line-height: 30px;
text-align: left;
z-index: 1;
text-align: right;
}
JQuery
$(function() {
$('.container').hover( function(){
var width=$(this).find(".fill").data('width');
$(this).find(".fill").animate({ width: width }, {
duration:800,
step: function(now, fx) {
$(this).html(Math.round(now) + '%');
}
});
},
function(){
$(this).find(".fill").animate({ "width": "0px" }, 800);
});
});
jsFiddle http://jsfiddle.net/zp8pe069/
jsBin demo
CSS: set overflow: hidden to .fill to prevent the text being visible after the animation ends.
HTML: remove % from the data attribute
JS and here you go. all you need:
$('.container').hover(function( e ){
var $fill = $(this).find(".fill");
var width = $fill.data('width');
$fill.stop().animate({width: e.type=="mouseenter" ? width+"%" : "0%" }, {
duration : 800,
step : function(now) {
$(this).html(Math.round(now) + '%') ;
}
});
});
Note also the use of the .stop() method, if you hover multiple time hysterically :) it'll prevent endless animations.

Stop animation on .siblings()

I'm creating a page when you hover a div. That div will grow in size (width) and the other divs (siblings) will be smaller in size (width).
I use a mouseenter and a mouseleave. But I can't get the .stop() function working.
When you hover one and less than a sec another one. The old one will not stop.
Live example:
http://jsfiddle.net/5kyw9ya7/7/
Code:
Html:
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
Css:
body, html {
margin:0px;
overflow:hidden;
}
div {
float:left;
height:100vh;
top:0;
bottom:0;
}
.one {
background-color:orange;
}
.two {
background-color:yellow;
}
.three {
background-color:red;
}
.four {
background-color:purple;
}
.five {
background-color:green;
}
Jquery:
var breedte = $(window).width() / 5;
$("div").css("width", breedte);
$("div").stop()
.mouseenter(function () {
$(this).animate({
width: "+=100"
});
$(this).siblings().animate({
width: "-=25",
});
$(this).siblings().css(
"backgroundColor", "grey");
})
.stop().mouseleave(function () {
$(this).animate({
width: "-=100"
});
$(this).siblings().animate({
width: "+=25"
});
$(this).siblings().css(
"backgroundColor", "");
});
It works better if you put .stop() in the event handlers. You should also call it as .stop(true,true) in order for it to finish the animation. Otherwise, the sizes get all messed up. See the documentation.
var breedte = $(window).width() / 5;
$("div").css("width", breedte);
$("div").stop()
.mouseenter(function () {
$(this).stop(true,true).animate({
width: "+=100"
});
$(this).siblings().stop(true,true).animate({
width: "-=25",
});
$(this).siblings().css(
"backgroundColor", "grey");
})
.stop().mouseleave(function () {
$(this).stop(true,true).animate({
width: "-=100"
});
$(this).siblings().stop(true,true).animate({
width: "+=25"
});
$(this).siblings().css(
"backgroundColor", "");
});
Updated fiddle: http://jsfiddle.net/5kyw9ya7/10/

Jquery Text Animation

I am converting flash banner into html5 banner . Everything is working fine except the text animation. The text should work like this but my text is working fine but it is coming over the border it should work like my image animation which is working within the border. Here is my code http://jsfiddle.net/tU9LV/
<div id = "wrapper" >
<div id="mainContainer">
<div>
<img id="introImg" src="http://i.imgur.com/FClbHjn.png"/>
</div>
<div id="images">
<p id="headline1Txt" >Striped Bag</p><br />
<p id="headline2Txt" >$14</p><br />
<p id="headline3Txt" >Sale $25</p><br />
</div>
<div id="ctaBtn">
<button class="btn btn-primary" type="button">SHOP NOW</button>
</div>
</div>
</div>
$(document).ready(function () {
bannerAnimation();
});
function bannerAnimation(){
//Jquery Animation
$("#introImg").animate({ width: "120px",
height: "140px"
}, 1000);
$("#headline1Txt").animate({ left: "20" }, 500, function () {
$("#headline1Txt").animate({ left: "10" }, 200);
});
setTimeout(function () {
$("#headline2Txt").animate({ left: "20" }, 500, function () {
$("#headline3Txt").animate({ left: "20" }, 500, function () {
$("#headline3Txt").animate({ left: "10" }, 200);
});
$("#headline2Txt").animate({ left: "10" }, 200);
});
}, 1000);
}* {
margin:0;
padding:0;
}
#wrapper {
outline: 12px solid rgba(186,202,228 , 1);
width:285px;
height:235px;
position: absolute;
}
#mainContainer{
background: url('https://secure-ds.serving-sys.com/BurstingRes/Site-8188/Type-0/5fefb401-b187-4d82-b4db-cbd2ef29cc48.gif');
width:285px;
height:235px;
overflow: hidden;
position: fixed;
}
#introImg{
position:absolute;
top:80px;
left:150px;
right:100px;
opacity: 100;
}
#ctaBtn{
top:200px;
left:15px;
position:absolute;
}
#headline1Txt, #headline2Txt, #headline3Txt
{
position:absolute;
overflow: hidden;
margin:60px 8px;
left: -120px;
}
#headline2Txt, #headline3Txt
{
font-size:21px;line-height: 2.0;
}
#headline1Txt
{
font-size:26px;line-height: 1.5;
}
The simple solution for this if you can't change your background image is to layover a div for the borders..
http://jsfiddle.net/K3SXu/
I've added:
<div id="borders"></div>
to the html.
and:
#borders { position:absolute; top:0; left:0; z-index:999; border:12px solid rgba(186,202,228,1); width:285px; height:235px;}
to the css. and also removed the 'outline' property from the #wrapper.
it works :)

animate div on mouse hover and leave

I trying to animate listfrom left to right and vice versa,now i want when mouse hover on div list animate left to right and when mouse leave that div than it list animate right to left , can anyone help me for this.
$('.ul_div').mouseover(function () {
$('.ul_div').css({ display: 'block' });
$('.ul_div ul').animate({ left: '100px', background: '#ccc' }, 100);
});
<div class="ul_div">Hover Me<div>
<ul id='ulEle'>
<li>demo</li>
<li>demo</li>
<li>demo</li>
<li>demo</li>
</ul>
Demo Here
jsFiddle Demo
CSS:
.ul_div ul {
position: absolute;
display: none
}
.ul_div {
border:2px solid Red;
position: relative;
}
Javascript:
$('.ul_div').hover(
function () {
$('.ul_div ul').css({
display: 'block'
});
$('.ul_div ul').animate({
left: '100px',
background: '#ccc'
}, 100);
},
function () {
$('.ul_div ul').animate({
left: '0',
background: '#ccc'
}, 100, function () {
$('.ul_div ul').css({
display: 'none'
});
});
});
You need to specify positioning on the ul element in order to use the CSS left and right properties.
Update your CSS as follows:
#ulEle {
position: absolute;
}
.ul_div {
border:2px solid Red;
position: relative;
}
You should then update your jQuery code to use the hover() function, and use the following code:
$('.ul_div').hover(function () {
$('.ul_div ul').animate({ left: '100px', background: '#ccc' }, 100);
}, function() {
$('.ul_div ul').animate({ left: '0px', background: '#ccc' }, 100);
});
Please see the updated jsFiddle for a demo.

Categories