I have 2 blocks - one with fixed position and the other next to it. I would like the fixed block to increase in length after clicking the button, and the second block to decrease in size and to click everything again to return it to its original state. Fixed block will be sidebar menu, permanently glued.
Everything should happen at 100% width.
How to do it, but the important thing is that the width of the fixed block and the latter should be specified in pixels, not in percent.
Is this to be done?
jQuery(document).ready(function($) {
jQuery(".btn").click(function() {
var div1 = jQuery(".left");
var div2 = jQuery(".right");
if (div1.width() < 200) {
div1.animate({
width: "25%"
}, {
duration: 200,
specialEasing: {
width: "linear"
}
});
div2.animate({
width: "75%"
}, {
duration: 200,
specialEasing: {
width: "linear"
}
});
} else {
div1.animate({
width: "5%"
}, {
duration: 200,
specialEasing: {
width: "linear"
}
});
div2.animate({
width: "95%"
}, {
duration: 200,
specialEasing: {
width: "linear"
}
});
}
});
});
.container {
width: 100%;
margin: 0 auto;
}
.left {
float: left;
position: fixed;
width: 5%;
height: 100%;
background: pink;
z-index: 5;
}
.right {
float: right;
position: relative;
width: 95%;
height: 300px;
background: green;
}
.content {
float: left;
position: relative;
width: 100%;
height: 100px;
background: silver;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="left">
<input type="button" value="click" class="btn">
</div>
<div class="right">
<div class="content"> abc </div>
</div>
</div>
Everything should happen at 100% width.
... in pixels, not in percent.
Are you sure that it's not the opposite? It's way more better to try to make yor css based on % rather that px or rem (unless it's required to do it in px)
In any case, I fixed your code, but in %, from now on you can play with px if that's the requirement:
jQuery(document).ready(function($) {
jQuery(".btn").click(function() {
var leftDiv = jQuery(".left");
var rightDiv = jQuery(".right");
console.log("leftDiv width: " + leftDiv.width() +
" - " + "rightDiv width: " + rightDiv.width())
var minWidthForRight = $('.container').width() - 300;
var maxWidthForRight = $('.container').width() - 100;
if (leftDiv.width() < 200) {
leftDiv.animate({
width: "300px",
}, {
duration: 200,
specialEasing: {
width: "linear"
}
});
rightDiv.animate({
width: minWidthForRight
}, {
duration: 200,
specialEasing: {
width: "linear"
}
});
} else {
leftDiv.animate({
width: "100px"
}, {
duration: 200,
specialEasing: {
width: "linear"
}
});
rightDiv.animate({
width: maxWidthForRight
}, {
duration: 200,
specialEasing: {
width: "linear"
}
});
}
});
});
.container {
width: 100%;
margin: 0 auto;
}
.left {
float: left;
position: fixed;
width: 150px;
height: 300px;
background: pink;
z-index: 5;
}
.right {
float: right;
position: relative;
width: 95%;
height: 300px;
background: green;
resize: horizontal;
}
.content {
float: left;
position: relative;
width: 100%;
height: 100px;
background: silver;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="left">
<input type="button" value="click" class="btn">
</div>
<div class="right">
<div class="content"> abc </div>
</div>
</div>
EDIT
Yes, it is possible to keep the left side in px and the left side in %, not % itself but calculated in px based on screen resolution.
Basically you take the container width and "eliminate" the width that you specified in animation:
var minWidthForRight = $('.container').width() - 300;
The right side will be: 300 + (100% - 300 ) and same for left: 100 + (100% - 100 )
Related
I have a horizontal slider with sections that scale when dragged using GSAP. The issue I have is the scaling is applied on click and the value is saved until after dragging. I need the scaling to only be applied while the mouse button is held down.
Here is a codepen.
var drag = Draggable.create(".horizontalContainer ", {
type: "x",
onPress() {
const scale = .6;
gsap.to('.section', {scale: scale, duration: .25});
},
onDragEnd() {
const xpos = this.target.getBoundingClientRect().left;
const winWidth = window.innerWidth;
gsap.to('.section', {scale: 1, duration: .25});
gsap.to(this.target, {x: Math.round(xpos / winWidth) * winWidth, duration: .5});
}
});
body {
margin: 0;
padding: 0;
overflow: hidden;
}
.horizontalContainer {
width: 600%;
display: flex;
flex-wrap: nowrap;
}
.section {
height: 100vh;
width: 100vw;
text-align: center;
font-size: 36px;
line-height: 90vh;
}
.section:nth-child(1) {
background-color: #deb887;
}
.section:nth-child(2) {
background-color: limegreen;
}
.section:nth-child(3) {
background-color: #b8860b;
}
.section:nth-child(4) {
background-color: #2f4f4f;
}
.proxy {
position: absolute;
visibility: hidden;
}
<script src="https://unpkg.com/gsap#3/dist/Draggable.min.js"></script>
<script src="https://unpkg.com/gsap#3/dist/ScrollTrigger.min.js"></script>
<script src="https://unpkg.co/gsap#3/dist/gsap.min.js"></script>
<div class='horizontalContainer'>
<div class='section'>ScrollTrigger with Draggable</div>
<div class='section'></div>
<div class='section'></div>
<div class='section'></div>
</div>
Use onRelease() callback to bring the scale back to 1.
onRelease() {
const scale = 1;
gsap.to('.section', {scale: scale, duration: .25});
}
Code Snippet:
var drag = Draggable.create(".horizontalContainer ", {
type: "x",
onPress() {
const scale = .6;
gsap.to('.section', {
scale: scale,
duration: .25
});
},
onRelease() {
const scale = 1;
gsap.to('.section', {
scale: scale,
duration: .25
});
},
onDragEnd() {
const xpos = this.target.getBoundingClientRect().left;
const winWidth = window.innerWidth;
gsap.to('.section', {
scale: 1,
duration: .25
});
gsap.to(this.target, {
x: Math.round(xpos / winWidth) * winWidth,
duration: .5
});
}
});
body {
margin: 0;
padding: 0;
overflow: hidden;
}
.horizontalContainer {
width: 600%;
display: flex;
flex-wrap: nowrap;
}
.section {
height: 100vh;
width: 100vw;
text-align: center;
font-size: 36px;
line-height: 90vh;
}
.section:nth-child(1) {
background-color: #deb887;
}
.section:nth-child(2) {
background-color: limegreen;
}
.section:nth-child(3) {
background-color: #b8860b;
}
.section:nth-child(4) {
background-color: #2f4f4f;
}
.proxy {
position: absolute;
visibility: hidden;
}
<div class='horizontalContainer'>
<div class='section'>ScrollTrigger with Draggable</div>
<div class='section'></div>
<div class='section'></div>
<div class='section'></div>
</div>
<script src="https://unpkg.com/gsap#3/dist/Draggable.min.js"></script>
<script src="https://unpkg.com/gsap#3/dist/ScrollTrigger.min.js"></script>
<script src="https://unpkg.co/gsap#3/dist/gsap.min.js"></script>
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 would like to have the first image slide from left to right. The second image slides from left to right, and the third image will be coming from the bottom to top. I managed to slide the first image from left to right with the answers I found here on stackoverflow. But when I modified the script & css for the other images, they're not sliding. I am not so knowledgeable in javascript.
$(document).ready(function() {
function animateImgs() {
$('ul.slide1 li:not(.visible)').first().animate({
'margin-right': '500px'
}, 2000, function() {
$(this).addClass('visible');
animateImgs();
});
}
animateImgs();
});
.content {
position: relative;
margin: 0 auto;
top: 0;
left: 0;
width: 500px;
height: 500px;
border: 1px solid #000;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
border-radius: 50%;
position: absolute;
}
.img1 {
max-width: 300px;
max-height: 300px;
z-index: 2;
}
.img2 {
max-width: 260px;
max-height: 260px;
z-index: 3;
left: 200px;
top: 100px;
}
.img3 {
max-width: 200px;
max-height: 200px;
z-index: 4;
left: 65px;
top: 235px;
}
/* -------------------------------------------------------------------- */
ul {
padding: 0;
margin: 0;
overflow: hidden;
}
ul.slide1 li {
float: right;
margin: 0 10px 0 0;
margin-right: 9999px;
list-style-type: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="content">
<ul class="slide1">
<li>
<img src="http://www.pngmart.com/files/4/Chrysanthemum-Transparent-Background.png" class="img1 slideLeft" />
</li>
</ul>
<img src="http://www.estanciavitoria.com/en/images/sobre_planta.png" class="img2 slideRight" />
<ul class="slide3">
<li>
<img src="https://s-media-cache-ak0.pinimg.com/originals/4d/09/e4/4d09e455070957363b2c0660a0d8cfef.png" class="img3 slideUp" />
</li>
</ul>
</div>
Steps:
Define a container element with class slideContent
Within container define slide elements with class slide
Specify sliding direction to slide elements with either slideUp, slideDown, slideLeft or slideRight
Specify data-margin to place element in container by sliding
Do not define following in CSS (instead use data-margin attribute in slide element):
margin-bottom for slideUp element
margin-top for slideDown element
margin-right for slideLeft element
margin-left for slideRight element
$(document).ready(function() {
function animateImgs() {
// Animation duration
var duration = 200;
// Get element reference needs to be shown
var el = $('.slideContent .slide:not(.visible)').first();
if (el.length === 0) {
console.log('No more elements found');
return;
}
// Read the margin value
var marginValue = el.attr('data-margin');
// Direction
var marginDirection,
animationProp = {};
// Animate now
if (el.hasClass('slideLeft')) {
marginDirection = 'margin-right';
} else if (el.hasClass('slideRight')) {
marginDirection = 'margin-left';
} else if (el.hasClass('slideUp')) {
marginDirection = 'margin-bottom'
} else if (el.hasClass('slideDown')) {
marginDirection = 'margin-top'
}
if (typeof marginDirection === 'undefined') {
// No valid animation direction defined
console.log('Invalid animation direction');
return;
}
animationProp[marginDirection] = marginValue;
el.animate(animationProp, duration, function() {
$(this).addClass('visible');
animateImgs();
});
}
animateImgs();
});
.slideContent {
position: relative;
margin: 0 auto;
top: 0;
left: 0;
width: 500px;
height: 500px;
border: 1px solid #000;
overflow: hidden;
}
.slideContent .slide {
position: absolute;
}
.slideContent .slideLeft {
right: -100%
}
.slideContent .slideRight {
left: -100%
}
.slideContent .slideUp {
bottom: -100%
}
img {
width: 100%;
height: 100%;
border-radius: 50%;
}
.img1 {
max-width: 300px;
max-height: 300px;
}
.img2 {
max-width: 260px;
max-height: 260px;
top: 100px;
}
.img3 {
max-width: 200px;
max-height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="slideContent">
<img src="http://www.pngmart.com/files/4/Chrysanthemum-Transparent-Background.png" data-margin="500px" class="img1 slide slideLeft" />
<img src="http://www.estanciavitoria.com/en/images/sobre_planta.png" data-margin="600px" class="img2 slide slideRight" />
<img src="https://s-media-cache-ak0.pinimg.com/originals/4d/09/e4/4d09e455070957363b2c0660a0d8cfef.png" data-margin="600px" class="img3 slide slideUp" />
</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.