I'm simply wanting a static button/image/div on a page which onclick activates a separate div to slide from the right side of the screen. This link is virtually what I want:
http://jsfiddle.net/yHPTv/876/
The problem is, is that I don't want the button to slide with it, that should remain in a static position on the page. I'd then like a 'close' button within the newly visible div.
$(function () {
$("#clickme").toggle(function () {
$(this).parent().animate({right:'0px'}, {queue: false, duration: 500});
}, function () {
$(this).parent().animate({right:'-280px'}, {queue: false, duration: 500});
});
});
body {
overflow-x: hidden;
}
#slideout {
background: #666;
position: absolute;
width: 280px;
height: 80px;
top: 45%;
right:-280px;
padding-left: 20px
}
#clickme {
position: absolute;
top: 0; left: 0;
height: 20px;
width: 20px;
background: #ff0000;
}
#slidecontent {
float:left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slideout">
<div id="slidecontent">
Yar, there be dragonns herre!
</div>
<div id="clickme">
</div>
</div>
One possible solution is to instead slide the content div. Something like:
http://jsfiddle.net/yHPTv/877/
Updated CSS:
#slidecontent {
position: absolute;
right: 0px;
}
Updated JS:
$(function () {
$("#clickme").toggle(function () {
$(this).siblings("#slidecontent").animate({right:'280px'}, {queue: false, duration: 500});
}, function () {
$(this).siblings("#slidecontent").animate({right:'0px'}, {queue: false, duration: 500});
});
});
Related
I have the following code:
$(function() {
$("button").click(function() {
$("#box1").animate({
left: $(window).width() - 800
}, {
complete: function() {
$("#box1").hide();
}
});
$("#box2").animate({
left: $(window).width() - 800
}, {
complete: function() { // complete call back
$("#box2").hide(); // can hide or remove this element
$("#box3").animate({
right: $(window).width() - 200,
top: $(window).height() - 200
});
}
});
});
});
#box1,
#box2,
#box3 {
width: 30px;
height: 50px;
position: absolute;
text-align: center;
font-family: Times New Roman;
}
#box1 {
background-color: skyblue;
left: 0px;
top: 50px;
}
#box2 {
background-color: green;
left: 0px;
top: 120px;
}
#box3 {
background-color: black;
left: 100px;
top: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button> Start </button>
<div id="box1">
<p> BOX 1 </p>
</div>
<div id="box2">
<p> BOX 2 </p>
</div>
<div id="box3">
<p> BOX 3 </p>
</div>
I want to add another complete function that occurs after box 3 moves to its new position. Box 2 will reappear and eventually move to the left. How do I do this? Where would it go in the function so it keeps going in the animation?
Add a complete callback for box3's animation that shows box2 and animates it:
$("#box3").animate({
right: $(window).width() - 200,
top: $(window).height() - 200
}, {
complete: function() {
$("#box2").show();
// Animate box2 here...
}
});
I have the below code:
$('#button').click(function () {
$('#divName').animate({
top: 90%,
}, 1000, function(){
});
});
When the button is clicked, it sets the top property for the DIV to 90%.
When I click the button again, I went to revert the CSS back to its original (50%).
How can I do this?
My attempt which seems to work but seems messy:
var state = false;
$('#button').click(function () {
if (state) {
state = false;
$('#divName').animate({
top: '50%',
}, 1000, function(){
});
} else if (state == false){
state = false;
$('#divName').animate({
top: '90%',
}, 1000, function(){
});
}
});
You could do it with CSS transitions. With jQuery just toggle a class.
$('#button').click(function () {
$('#divName').toggleClass('animate');
});
.container {
position: relative;
height: 80vh;
border: 2px solid red;
}
#divName {
position: absolute;
top: 50%;
width: 100%;
height: 50px;
border: 2px solid blue;
transition: top 1s linear;
}
.animate {
top: 90% !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Press</button>
<div class="container">
<div id="divName"></div>
</div>
You could improve this with some minor changes:
var state = false;
$('#button').click(function() {
percent = state ? 50 : 90
$('#divName').animate({
top: percent + '%',
}, 1000, function() {});
state = !state;
});
div {
background-color: green;
position: absolute;
top: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="button">clickme</p>
<div id="divName">
<p>hello</p>
</div>
here is one way to do it by removing the style added by jQuery
var div = $('#divName');
$('#button').click(function () {
var style = div.attr("style");
if(style && style.includes("top")){
div.attr("style", style.replace(/top:[^;]+;/,""));
}else{
div.css("top", "90%");
}
});
#divName{
width: 20px;
height: 20px;
border: black solid 1px;
position: absolute;
top:50%; /*you need to give an init value to top*/
transition: top 1s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<button id="button">click me</button>
<div id="divName"></div>
I am using the code below to toggle a div out of screen partially, and back in screen fully. This code tells how far "sidebar" is to move offscreen. But in my case this functionality has a problem, due to media queries applied to sidebar width. Therefore I need the code not to state how far over sidebar will move, but how much of sidebar will be left onscreen in pixels. The demo here (with the media queries).
$(document).ready(function () {
$("#toggle").click(function () {
if($(this).hasClass('active')){
$(this).removeClass('active');
$("#sidebar").animate({
left: '0%'
});
} else {
$(this).addClass('active');
$("#sidebar").animate({
left: '-55%'
});
}
});
});
Simple maths:
Say you want the side bar to have 40px left on the screen, and the rest hidden. So you want to move it left by (width - 40). I.e.
$(document).ready(function () {
$("#toggle").click(function () {
if($(this).hasClass('active')){
$(this).removeClass('active');
$("#sidebar").animate({
left: '0%'
});
} else {
$(this).addClass('active');
$("#sidebar").animate({
left: - ($("#sidebar").width() - 40)
});
}
});
});
html, body {
width:100%;
height: 100%;
}
#header {
width: 100%;
height: 20%;
float: left;
border: 1px solid;
}
#sidebar {
width: 70%;
height: 80%;
position: relative;
border: 1px solid;
}
#toggle {
width: 10%;
height: 40%;
margin-right: 6.5%;
margin-top: 3.5%;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar">SIDEBAR<input type="button" value="Toggle" id="toggle"></div>
Instead of setting negative left value in percentages, use the width of your element and set the left value according to the width of your element:
$("#sidebar").animate({
left: '-' + ($("#sidebar").width()*0.55) + 'px'
});
Check this snippet:
$(document).ready(function () {
$("#toggle").click(function () {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
$("#sidebar").animate({
left: '0'
});
} else {
$(this).addClass('active');
$("#sidebar").animate({
left: '-' + ($("#sidebar").width()*0.55) + 'px'
});
}
});
});
html, body {
width:100%;
height: 100%;
}
#header {
width: 100%;
height: 20%;
float: left;
border: 1px solid;
}
#sidebar {
width: 70%;
height: 80%;
position: relative;
border: 1px solid;
}
#toggle {
width: 10%;
height: 40%;
margin-right: 6.5%;
margin-top: 3.5%;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar">SIDEBAR<input type="button" value="Toggle" id="toggle"></div>
SOLVED!!
SEE DEMO HERE
$(document).ready(function() {
$("#togglebutton").click(function() {
var $container = $('#myToggleDiv');
$container.toggleClass('hide');
});
});
I try to animate a div from its original position to left of the screen, if a button was clicked. If another button is clicked then i want it to animate back to it's origin position. I was able to figure out on how to animate it from right to left, but i cant animate it back to its original position.
var left = $('#coolDiv').offset().left;
$("#b1").click(
function() {
$("#coolDiv").css({
left: left
}).animate({
"left": "0px"
}, "slow");
}
);
$("#b2").click(
function() {
$("#coolDiv").css({
right: right
}).animate({
"right": "0px"
}, "slow");
}
);
#coolDiv {
width: 50px;
height: 50px;
position: absolute;
right: 0;
background: yellow;
}
#b1 {
margin-top: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="coolDiv">cool</div>
<button id="b1">left</button>
<button id="b2">right</button>
http://jsfiddle.net/XqqtN/5385/
Set the left CSS to the window width minus the width of the box.
$("#b1").click(function() {
// Get the current left of the div
var left = $('#coolDiv').offset().left;
$("#coolDiv").css({
left: left
}).animate({
left: 0
}, "slow");
});
$("#b2").click(function() {
var left = $(window).width() - $('#coolDiv').width();
$("#coolDiv").css({
left: 0
}).animate({
left: left
}, "slow");
});
#coolDiv {
width: 50px;
height: 50px;
position: absolute;
right: 0;
background: yellow;
}
#b1 {
margin-top: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="coolDiv">cool</div>
<button id="b1">Left</button>
<button id="b2">Right</button>
Optimized Code:
// Common function to animate Div on both button clicks
function animateDiv(left, right) {
$('#coolDiv').css({
left: left
}).stop(true, true).animate({
left: right
}, 'slow');
}
$('#b1').click(function() {
animateDiv($('#coolDiv').offset().left, 0);
});
$('#b2').click(function() {
animateDiv(0, $(window).width() - $('#coolDiv').width());
});
#coolDiv {
width: 50px;
height: 50px;
position: absolute;
right: 0;
background: yellow;
}
#b1 {
margin-top: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="coolDiv">cool</div>
<button id="b1">Left</button>
<button id="b2">Right</button>
Can you try something simple like this?
$(function () {
$(".animateable").animate({
left: $(window).innerWidth() - 50
}, 1000, function () {
$(".animateable").animate({
left: 0
}, 1000);
});
});
* {font-family: Segoe UI; line-height: 1;}
.animateable {position: absolute; width: 50px; text-align: center; background-color: #ccf; line-height: 2em;}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div class="animateable">
Hi
</div>
You can use setInterval to make it work a lot of times.
$(function () {
setInterval(function () {
$(".animateable").animate({
left: $(window).innerWidth() - 50
}, 1000, function () {
$(".animateable").animate({
left: 0
}, 1000);
});
}, 2000);
});
* {font-family: Segoe UI; line-height: 1;}
.animateable {position: absolute; width: 50px; text-align: center; background-color: #ccf; line-height: 2em;}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div class="animateable">
Hi
</div>
This is your updated code. Make changes like following:
$("#b1").click(
function() {
$("#coolDiv").animate({
"left": "0px"
},
"slow"
);
$("#coolDiv").css('right', '');
}
);
$("#b2").click(
function() {
$("#coolDiv").animate({
"right": "0px"
},
"slow"
);
$("#coolDiv").css('left', '');
}
);
#coolDiv {
width: 50px;
height: 50px;
position: absolute;
right: 0;
background: yellow;
}
#b1 {
margin-top: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div id="coolDiv">cool</div>
<button id="b1">B1</button>
<button id="b2">B2</button>
Hope it helps.
I am trying to get the source of an image to use in a bigger image and the problem is that it just says that it is undefined when it is not. Here is my code and I appreciate the help in advance.
edit
It appears the code works perfectly in the code snippet but not here when I open the index file ;(, I have no idea why this is happening... halp me! D:, also, when I inspect the element with my own index.html file, it says that the source is equal to undefined
var src = $('.button').attr('src');
$(document).ready(function() {
$('.button').click(function() {
$('.backdrop').animate({
'opacity': '.5'
}, 300, 'linear');
$('.box').animate({
'opacity': '1.00'
}, 300, 'linear');
$('.box, .backdrop').css('display', 'block');
$('.box').html('<img class="boximg" src="' + src + '">');
});
});
$(document).ready(function() {
$('.backdrop').click(function() {
close_box();
});
$('.close').click(function() {
close_box();
});
});
function close_box() {
$('.backdrop, .box').animate({
'opacity': '0'
}, 300, 'linear', function() {
$('.backdrop, .box').css('display', 'none');
});
}
.backdrop {
position: absolute;
display: none;
top: 0px;
left: 0px;
background-color: #000;
opacity: 0;
height: 100%;
width: 100%;
}
.box {
position: absolute;
display: none;
background-color: white;
opacity: 0;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
border-radius: 13px;
}
.close {
float: right;
margin-right: 5px;
}
.boximg {
position: absolute;
top: 3%;
left: 2%;
width: 96%;
height: 94%;
}
.button {
border-radius: 30px;
height: 300px;
width: 300px;
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>
<img class="button" src="http://www.hdbackgroundpoint.com/wp-content/uploads/2013/10/13/urlttr.jpeg">
<div class="backdrop"></div>
<div class="box">
</div>
</body>
</html>
You set the var src = $('.button').attr('src'); before DOM has loaded, and is therefore not defined.
Try moving it inside $(document).ready()
$(document).ready(function() {
var src = $('.button').attr('src');
...
});
Thanks to one of the comments, I figured it out, I just had to have the var inside of the document.ready function :D