Suppose I have a list of tasks taking the width of the screen. When I click on one of them, that it slides to the left to occupy the 50% of the with of the screen, and that, at the same time, slides from the right of the screen some details about the clicked task. This 'detail card' will take the half of the screen too. To summarize, I want to mimic the wunderlist effect. So I wrote this fiddle, but it is not working smoothly. Could some one help ?
Give appropriate width,position.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<STYLE>
#content {
background-color:#6688ff;
position:absolute;
width:100px;
height:100px;
padding:3px;
margin-top:5px;
left: 100px;
}
</STYLE>
<input type="button" id="left" value="Left"/>
<input type="button" id="right" value="Right"/>
<div id="content">Move</div>
<script>
$(document).ready(function(){
$("#right").click(function() {
$("#content").animate(
{"left": "+=50px"},
"slow");
});
$("#left").click(function() {
$("#content").animate(
{"left": "-=50px"},
"slow");
});
});
</script>
Related
How can I prevent toggle from sliding twice on double click?
I have a button that triggers a slide toggle. It toggles fine if the button is clicked once but if the button is clicked twice the slide toggle slides out then immediately slides back in.
How can I get the slide toggle to stay out even on double click?
Code here: https://codepen.io/anon/pen/Ljgqjo
JS:
$('button').on('click', function(){
$('#one').fadeOut('slow', function(){
$('#two').toggle('slide', {direction: 'right'}, 800, function(){
});
});
});
.container{
width:300px;
height:200px;
overflow:hidden;
}
#one{
background:blue;
width:300px;
height:200px;
}
#two{
background:purple;
width:300px;
display:none;
height:200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<button>Click me to slide</button>
<div class="container">
<div id="one">
</div>
<div id="two">
</div>
</div>
Set a flag for tracking whether your animation is running. Check if it is set before allowing the click action to have any effect. Unset it once your animation is done:
var animating = false;
$('button').on('click', function(){
if(!animating){
animating = true;
$('#one').fadeOut('slow', function(){
$('#two').toggle('slide', {direction: 'right'}, 800, function(){
animating = false;
});
});
}
});
This has the additional benefit of protecting against triple clicks (and quadruple clicks, etc...)
Here you go with a solution http://jsfiddle.net/nya99njz/2/
var sliding = false;
$('button').on('click dblclick', function(){
if(!sliding){
sliding = true;
$('#one').fadeOut('slow', function(){
$('#two').toggle('slide', {direction: 'right'}, 800, function(){
sliding = false;
});
});
}
});
.container{
width:300px;
height:200px;
overflow:hidden;
}
#one{
background:blue;
width:300px;
height:200px;
}
#two{
background:purple;
width:300px;
display:none;
height:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<button>Click me to slide</button>
<div class="container">
<div id="one">
</div>
<div id="two">
</div>
</div>
Instead of click use dblclick.
Hope this will help you.
You can change this line
$('button').on('click', function(){
To
$('button').on('click dblclick', function(){
Then it will do the same thing for click and double click.
Goldman Sachs has a pretty cool webpage here. What interests me about the page is that when you scroll down, you get a header appearing, which - depending on the section where you're at - has more of its squares turn from white to blue. I was wondering (because I can't seem to find the answer in the code), how exactly they made the scrollbar appear seemingly out of the blue (pun not intended), but also how the squares turn from white to blue depending on where you are on the page.
the most common way to do this is by detecting the position of the scrollbar with javascript. I've used the JQuery library for this demo.
here's some code (merely for illustration purpose!)
$(window).scroll(function (event) {
var numOfButtons = 4;
var scroll = $(window).scrollTop();
var heightContainer = $(".container").height();
console.log('scrollPos', scroll);
if(scroll > heightContainer/ numOfButtons){
$(".header .button:nth-child(2)").addClass('act');
}else{
$(".header .button:nth-child(2)").removeClass('act');
}
if(scroll > (heightContainer/ numOfButtons)*2){
$(".header .button:nth-child(3)").addClass('act');
}else{
$(".header .button:nth-child(3)").removeClass('act');
}
if(scroll > (heightContainer/ numOfButtons)*3){
$(".header .button:nth-child(4)").addClass('act');
}else{
$(".header .button:nth-child(4)").removeClass('act');
}
});
.header{
height:50px;
background-color:blue;
color:white;
position:fixed;
top:0;
left:0;
width:100%
}
.button{
display:inline-block;
width:10px;
height:10px;
background-color:white;
border-radius:20px;
}
.button.act{
background-color:red;
}
h1{
margin-top:60px;
}
.container{
height:4000px;
background:url("http://www.planwallpaper.com/static/images/518164-backgrounds.jpg");
}
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h1>Scroll demo</h1>
<div class="header">
<div class="button act"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
</div>
<div class="container"><div id="mydiv"></div>
</div>
</body>
</html>
enter link description here
you can easily achieve an effect like that using jquery waypoints: http://imakewebthings.com/waypoints/guides/getting-started/
the first thing that comes to my mind is adding a class with display:block to the header when a certain section hits the top of the viewport to make it visible and playing with addClass and removeClass with css transitions for the squares.
I have a sliding div, or we can say that its a on click expand and collapse div(toggle).
I want to apply the .scrollTop() to the div. when the button is clicked to expand the div
before expand set to top, and then expand. I tried it more then hundreds times
with different ways but i unable to get the desired result. Any help will be appreciated.
<div id="mainarea">
</div>
<div class="slidingDiv">
</div>
<div class="show_hide">
<p> Click me</p>
</div>
var currentscrollpos;
currentscrollpos = $(window).scrollTop();
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
$('body').animate({scrollTop:100}, 'slow')
return false;
});
});
$(document).click(function()
{
$('body').animate({ scrollTop: currentscrollpos }, 0);
});
//This is my css
#mainarea{width:550px; height:300px;background-color: yellow;}
.slidingDiv {
height:200px;
background-color: white;
margin-top:10px;
width:261px;
background-color: black;
}
.show_hide {
display:none;
}
#notificationFooter {
background:#FFFFFF; margin:0 auto; height:8px; width:96px;
}
This is the fiddle
http://jsfiddle.net/muheetmehfooz/wmwn5424/
What you are doing is not bring you to top, just move you bit up. However, if your question is only about how to make this actions in right order - try this.
jsfiddle
just use callback function
P.S.
to get to the top use
{scrollTop:currentscrollpos}
I'm trying to make two buttons that slide when clicked and push the other button out of the viewport. For example:
Before clicked - [ blue | grey ]
Click blue - [ all blue ]
Get it? I have the html and css set up perfectly (I think), but I just can't get this jQuery code to animate and change the positioning of the element that contains the two buttons. It's driving me nuts. What I have so far is:
<div id='container'>
<div id='wrapper'>
<a id='wrapper_photo' href=""></a>
<a id='wrapper_video' href=""></a>
</div>
</div>
<style>
#container{
width:760px;
height:25px;
background:#000000;
overflow:hidden;
}
#wrapper {
width:1520px;
height:25px;
background-color:#0F0;
position:relative;
left:-380px;
}
#wrapper_photo{
width:760px;
height:25px;
background-color:#666666;
float:left;
}
#wrapper_video {
width:760px;
height:25px;
background-color:#0000CC;
float:left;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#wrapper_photo').click(function() {
$('#wrapper').animate({
left:"-=380"},
5000);
});
});
</script>
I stopped when I couldn't get the left side to work.
here you go: DEMO
$(function(){
$('#wrapper_photo, #wrapper_video').click(function() {
$(this).animate({
width:"100%"},
5000);
$(this).siblings('a').animate({
width:'0px'
},5000);
});
});
I'm not sure if this new value for left will be set, so you can use position() function to get value of left of #wrapper container and then calculate new value.
$(document).ready(function() {
$('#wrapper_photo').click(function() {
var leftVal = $('#wrapper').position().left - 380;
$('#wrapper').animate({
left:leftVal},
5000);
});
});
I have been using the ScrollTop JQuery so that when buttons are clicked in the right hand column, they scroll to the specific id in the left. It goes to the specific id when I first load the page, but after that it doesn't go to the other three, but glitches out going up or down slightly when buttons are clicked. I found that when I scroll to the top of the page and click the link it goes to the correct place, so it seems it it trying to find the top position of the left column and trying to go from there. No ideas as to how to fix this so would appreciate any thoughts.
CSS:
html,
body {
height: 100%;
margin: 0px auto;
}
#main,
#col_l,
#col_r
{
height: 100%;
}
div[id*="col"]{
float: left;
width: 50%;
overflow: auto;
}
#col_r{
overflow:hidden;
position:relative;
}
JS:
<script src="jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="jquery.scrollTo-1.4.3.1-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#stsp").click(function() {
$('#col_l').animate({
scrollTop: $("#lgg").offset().top}, 2000);
});
$("#fg").click(function() {
$('#col_l').animate({
scrollTop: $("#funny").offset().top}, 2000);
});
$("#covers").click(function() {
$('#col_l').animate({
scrollTop: $("#coverso").offset().top}, 2000);
});
$("#demo").click(function() {
$('#col_l').animate({
scrollTop: $("#mp3").offset().top}, 2000);
});
});
HTML:
<div id="col_r">
<div id="hb"><button id="demo">One × Fifteen (64mb) </button></div>
<div id="lg"><button id="stsp">Same Time Same Place</button></div>
<div id="fg"><button id="funny">Funny Games Funny Games</button></div>
<div id="c"><button id="covers">Covers Over Covers</button></div>
</div>
This was fixed this using the ScrollTo Jquery:http://flesler.com/jquery/scrollTo/
I'm not sure why I was having problems with the ScrollTop Jquery.