I guys,
So I have a sidebar that I want to slide in and out when a user clicks a button. When that sidebar slides out, I want the body of the page to add a padding so that the sidebar doesn't hide the page content. I have it working, it's just the animation is very jumpy. Any suggestions. Here is what I have.
var userQueueVis = false
$(document).on('click', '#user-queue-button', function() {
if (userQueueVis == false) {
$('.user-queue').show('slide', {direction: 'right'}, { duration: 200, queue: false });
$(".main").animate({ 'padding-right' : '200px' }, { duration: 200, queue: false });
$("#user-queue-button").addClass("active-button");
userQueueVis = true;
} else {
$('.user-queue').hide('slide', {direction: 'right'}, { duration: 200, queue: false });
$(".main").animate({ 'padding-right' : '0px' }, { duration: 200, queue: false });
$("#user-queue-button").removeClass("active-button");
userQueueVis = false;
}
});
My snippet is not complete according to your needs but it gives you hit points what to do next, it toggle (show and hide) the sidebar (background red) along with adding padding to the specified parent div (#main). Hope this help.
$(document).ready(function(){
$('button').click(function(){
$("#sidebar").toggle("slide",function(){
$("#main").toggleClass("padding_10px");
});
});
});
#main{border:1px solid blue;}
#sidebar{
height:100vh;
width:250px;
background-color:red;
}
.padding_10px{padding:10px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main">
<button>Click me!</button>
<div id="sidebar">
</div>
</div>
Related
I made a Shiny application and I'm using dialog (jQuery) for it.
The problem is that, when I close the dialog, the page goes to the top and I would like it to stay in the same position when I close the dialog.
The problem is that, when I close the dialog, the page goes up or down (as if it adjusted the screen position). I didn't want that to happen. I want the page to stay in the same position when I close the dialog.
When I open the dialog there are no problems, only when I close it.
My code:
<head>
<script src='https://code.jquery.com/ui/1.13.0/jquery-ui.js'></script>
<script>
$(function() {
$('#text1').hide();
$('#text1').dialog({
autoOpen: false
}, {
modal: true
}, {
title: 'Bird'
}, {
width: 50
}, {
resizable: false
}, {
show: 'explode',
hide: 'explode'
}, {
closeText: null
},
///background-color header
{
open: function() {
$('.ui-dialog-titlebar-close').hide();
}
}
).prev('.ui-dialog-titlebar').css({
'background-color': '#f8d40c',
'color': '#333333',
'text-align': 'center',
'display': 'block',
'margin': 'auto',
'border-radius': '5px',
'font-size': '25px'
});
///background-color body
$('#text1').css('background-color', '#e3d47f');
$('#click1').on('click', function() {
$('#text1').dialog('option', 'position', {
at: 'left top',
of: this // this refers to the cliked element
}).dialog('open');
return false;
});
$('body').on('click', '.ui-widget-overlay', function() {
$('#text1').dialog('close');
});
});
</script>
<style>
.class1 {
margin-bottom: 100px;
}
</style>
</head>
<body>
<p class='class1'>Point</p>
<p class='class1'>Point</p>
<p id="text1">Open dialog</p>
<p id="click1" class='class1' style='color:red'>Click here</p>
</body>
Shiny App is a SPA (Single Page Application).
How can i make a div element fadeout slow when using the transition function
$('.masthead').visibility({
once: false,
onBottomPassed: function() {
$('.fixed.menu').transition('fade in');
$('.fixed.menu').animate({
height: 80
}, 500); //animate the menu to the width of 80
},
onBottomPassedReverse: function() {
$('.fixed.menu').animate({
height: 50
}, 500); //animate the menu back to the original width
$('.fixed.menu').transition('fade out');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="masthead">
<div id="fixed-menu">
</div>
</div>
You could use the jQuery fadeIn() and fadeOut()
$(".fixed.menu").fadeIn("slow");
and
$(".fixed.menu").fadeOut("slow");
I was playing around with the code from the w3schools editor which illustrates a jQuery animate function.
I want to try and make this movement reversible though, so I added an if/else statement to allow the div to move back if it had already been clicked.
Here is my code for between the script tags:
var clicked = false;
$(document).ready(function(){
$("button").click(function(){
if (clicked == false){
$("div").animate({
left: amount,
opacity: '0.5',
height: '150px',
width: '150px'
});
clicked = true;
} else {
$("div").animate({
right: amount,
opacity: '0.5',
height: '150px',
width: '150px'
});
clicked = false;
}
});
});
I am aware there is probably a better way of doing this, but I am fairly new to jQuery. In any case seeing as jQuery is just extended JavaScript it seems strange that this doesn't work.
--- update: corrected amount not being set and included full page code ---
Here is my new code. The div still doesn't move back when clicked again.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
var clicked = false;
$(document).ready(function(){
$("button").click(function(){
if (clicked == false){
$("div").animate({
left: '250px'
});
clicked = true;
} else {
$("div").animate({
right: '250px'
});
clicked = false;
}
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
It's failing because you're not setting amount!
var clicked = false;
var amount = 0;
$(document).ready(function(){
//more code that calls `amount`
})
Check this JSFiddle to see it in action: http://jsfiddle.net/1xt58q0a/1/
New JSFIddle to match updated question: http://jsfiddle.net/1xt58q0a/5/
You can use the .toggle() function.
$(document).ready(function(){
$("button").toggle(
function(){
$("div").animate({
left: amount,
opacity: '0.5',
height: '150px',
width: '150px'
});
},
function(){
$("div").animate({
right: amount,
opacity: '0.5',
height: '150px',
width: '150px'
});
}
);
});
I assume you have set amount to a value in advance.
The div doesn't change because the opacity, height and width are set the same in both options.
Embarrassing, but my mistake was a misunderstanding of CSS, not JS.
Here is the corrected - and functioning - code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
var clicked = false;
$(document).ready(function(){
$("button").click(function(){
if (clicked == false){
$("div").animate({
marginLeft: '250px'
});
clicked = true;
} else {
$("div").animate({
marginLeft: '0px'
});
clicked = false;
}
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
$("span").click(function(){
$("div").fadeToggle();
});
$("span").click( function(){
$("a").css({ opacity: '0' });
$(".text1").delay(200).animate({ opacity: '1' });
$(".text2").delay(400).animate({ opacity: '1' });
$(".text3").delay(600).animate({ opacity: '1' });
});
I want to animate my text in the following way:
When you click on the "CLICK HERE" text, the links in the pink div should animate. Each line should fade in, one after the other.
However, I think my code is wrong, because if you click the "CLICK HERE" text several times in quick succession, animation build up occurs.
How should I fix this?
http://jsfiddle.net/XdLzp/
Did you try somthing like this
$("span").click(function(){
$("div").fadeToggle();
});
$("span").click( function(){
$("a").css({ opacity: '0' });
$(".text1").animate({ opacity: '1' },function(){
$(".text2").animate({ opacity: '1' },function(){
$(".text3").animate({ opacity: '1' });
});
});
});
You have to stop the animation queue on the items e.g.
<a class="content-toggle" href="#">CLICK HERE</a>
<div class="content">
<div>TEXT 1</div>
<div>TEXT 2</div>
<div>TEXT 3</div>
</div>
$('.content-toggle').on('click', function(e) {
e.preventDefault();
var content = $('.content');
// Stop any ongoing animations and hide children.
content.finish().children().finish().hide();
content.fadeToggle(400, 'swing', function() {
animateChildrenIn(content);
});
});
function animateChildrenIn(parent) {
parent.children().each(function(i) {
$(this).delay((i + 1) * 200).fadeIn(800);
});
}
Fiddle: http://jsfiddle.net/4RW5d/
Hi i have two division with class named "tick" what i am trying to do here is if the content overflows then only the ticker should be activated.
div1 : <div class="home tick">
div2 : <div class="rbar tick">
problem: if content overflows in one div the other div also starts ticking any solution ?
if( ($('.tick > ul').height()) > 160){
$('.tick').vTicker({
speed: 500,
pause: 3000,
animation: 'fade',
showItems: 3,
height: 192
});
}
Take each div separately:
$('.tick > ul').each(function(){
if( ($(this).height()) > 160){
$(this).parent().vTicker({
speed: 500,
pause: 3000,
animation: 'fade',
showItems: 3,
height: 192
});
}
})