Im having problem getting the original width and height of a div, without the style property that is generated with a code.
This is how I solved it
var currentWidth = $("#container").width();
var currentHeight = $("#container").height();
$("#container").removeAttr("style");
var containerWidth = $("#container").width();
var containerHeight = $("#container").height();
$("#container").css("width", currentWidth, "height", currentHeight);
$("#container").animate({
width: containerWidth,
height: containerHeight
}, "slow");
This is pretty bad coded and it wont animate the height. I guess there is a easier way to solve this.
Like for example, $("#container").width(ignoring style attr);
Edit, better explenation:
In my css file the original size of container is 500x500.
But then when you click on a link it changes to 800x800 (adding the attribute style), now when you click back I want it to change back to 500x500 but I want the code to find out the original size for easier changes.
The code that changes the #container:
$("#container").animate({
width: 1250,
height: 600
}, "slow");
Thanks in advance!
Updated:
Keep the original width and height as min-width and min-height i.e in your case:
min-width: 500px;
min-height: 500px;
and then do this using jQuery:
$("#container").animate({
width: "",
height: ""
}, "slow");
Working Fiddle
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var curentDivWidth = 500;
var curentDivHeight = 500;
var clicked = false;
$("#ClickMe").click(function () {
if (!clicked) {
$("#container").animate({
width: 1250,
height: 600
}, "slow");
clicked = true; return;
}
$("#container").animate({
width: curentDivWidth,
height: curentDivHeight
}, "slow");
clicked = false;
});
});
</script>
<title>example</title>
</head>
<body>
<a href="javascript:void(0)" id="ClickMe" >click me </a>
<div id="container" style="border:1px solid black" >
the div
</div>
</body>
</html>
jsfiddle : http://jsfiddle.net/seekpunk/JhzAD/
Related
I want to change the width of a division by clicking on the options I wrote above it, each time by 100px, using jQuery. But I want the width not to become lesser than 200px or more than 600px. How can I do it?
<p id="increase">
Increase the width by 100px
</p>
<p id="reduce">
Reduce the width by 100px
</p>
<div id="box">
</div>
<script>
$("#increase").click(function(){
$("#box").animate({width: '+=100px'}, 1000);
});
$("#reduce").click(function(){
$("#box").animate({width: '-=100px'}, 1000);
});
</script>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p id="increase">
Increase the width by 100px
</p>
<p id="reduce">
Reduce the width by 100px
</p>
<div id="box" style="border:solid; width:200px">
dsfsdf
</div>
</body>
</html>
<script>
$("#increase").click(function () {
var width = $("#box").width();
if (width > 600) {
return;
}
$("#box").animate({ width: '+=100px' }, 1000);
});
$("#reduce").click(function () {
var width = $("#box").width();
if (width <= 200) {
return;
}
$("#box").animate({ width: '-=100px' }, 1000);
});
</script>
You can add a CSS code to your project,
#box {
max-width:600px !important;
min-width:100px !important;
}
Or use if to check the width of your box before any change.
I have a problem in animation in onscroll event.
The if condition works very well when I scroll down and div shows without any problem, but when I scroll up, the else condition does not work, so the div doesn't hide and it is still shown.
This is the code:
$(function () {
'use strict';
var myDiv1 = $('div'),
div1Top = (myDiv1.offset().top) / 2;
$(window).on('scroll', function () {
var docScrollTop = document.documentElement.scrollTop;
if (docScrollTop >= div1Top) {
$('div').animate({opacity: '1'}, 800);
} else {
$('div').css('opacity', '0');
}
});
});
This might not be exactly what you're trying to do, but I think it's in the right ballpark:
<html>
<style>
div {
width: 500px;
height: 500px;
}
.animated_div {
background-color: green;
position: absolute;
top: 2000px;
opacity: 0;
}
.placeholder {
position: absolute;
top:4000px;
}
</style>
<body>
<div class="animated_div"></div> <!--The div that will actually be animated-->
<div class="placeholder"></div> <!--This is just something below the animated DIV, so that you can scroll below the animated DIV -->
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
'use strict';
var myDiv1 = $('.animated_div');
// Start animating the div relative to its middle
var div1Middle = myDiv1.offset().top + myDiv1.height() / 2;
// Keep track of whether the animated_div is displayed or not
var myDiv1Shown = false;
$(window).on('scroll', function () {
var docScrollTop = $(window).scrollTop(); // Top of the window in page coordinates
var docScrollBottom = docScrollTop+$(window).height(); // Bottom of the window in page coordinates
if (div1Middle > docScrollTop && div1Middle < docScrollBottom && !myDiv1Shown) {
// The div middle is within view and it's not already shown, so we need to show it
myDiv1Shown = true;
myDiv1.animate({opacity: '1'}, 800);
} else if ((div1Middle > docScrollBottom || div1Middle < docScrollTop) && myDiv1Shown) {
// The div middle is out of view and it's shown, so we need to hide it
myDiv1Shown = false;
myDiv1.animate({opacity: '0'}, 800);
}
});
});
</script>
</html>
This changes the div opacity to 1 when it's in view and changes it to 0 when it's out of view. It's considered in-view if its vertical middle is in view.
If what you want to do is essentially fade-in the div when the user scrolls it into view and then fade-out the div when the user scrolls it out of view, you might consider this as an alternative:
<html>
<style>
div {
width: 500px;
height: 500px;
}
.animated_div {
background-color: green;
position: absolute;
top: 2000px;
opacity: 0;
}
.placeholder {
position: absolute;
top:4000px;
}
</style>
<body>
<div class="animated_div"></div> <!--The div that will actually be animated-->
<div class="placeholder"></div> <!--This is just something below the animated DIV, so that you can scroll below the animated DIV -->
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
'use strict';
var myDiv1 = $('.animated_div');
var div1Top = myDiv1.offset().top;
var div1Height = myDiv1.height();
var div1Bottom = div1Top + div1Height;
$(window).on('scroll', function () {
var docScrollTop = $(window).scrollTop(); // Top of the window in page coordinates
var docScrollBottom = docScrollTop+$(window).height(); // Bottom of the window in page coordinates
// Calculate fraction of div on page
var topOffPage = Math.max(0, docScrollTop - div1Top);
var bottomOffPage = Math.max(0, div1Bottom - docScrollBottom);
var fractionOnPage = Math.max(0, div1Height - topOffPage - bottomOffPage)/div1Height;
myDiv1.css('opacity', fractionOnPage);
});
});
</script>
</html>
The snippet immediately above sets the opacity of the div to be the fraction of it that is in view (considering only the vertical dimension). So if the entire DIV is on-screen, it's fully opaque. If only half of it is onscreen (with half of it either above the scroll top or below the scroll bottom), then the opacity is 0.5, and so on. If the div is large relative to the screen, then this could cause problems. For instance, if you have a 1000px div, and people are viewing the page with a viewport of height 500px, then the div will only ever be 50% opaque at most. But you can adapt it as necessary to fit your circumstances.
Above you will find a sketch of what I am trying to achieve. I am working in a 12 column layout. I want the div .row-2 to max out to 10 columns on the right but go all the way to the edge of .main-container on the left.
Below is what I have to work with but keep getting errors.
$('.main-container').once('.row-2').each(function () {
$(window).on('resize', function () {
$('.row-2').each(function () {
self.align($(this));
});
});
});
$(document).ready(function () {
$('.row-2', context).once('.row-2').each(function () {
self.align($(this));
});
});
align: function ($element) {
$element.css({
marginLeft: ''
});
var maxWidth = $element.width();
$element.css({
marginLeft: 'auto'
});
$('.row-2', $element).each(function () {
$(this).css({
maxWidth: maxWidth,
marginLeft: 'auto'
});
});
var offset = $element.offset();
// Use #focus element as wrapping element
offset.left = offset.left - $('.main-container').offset().left;
$element.css({
marginLeft: (offset.left * -1) + 'px'
});
};
.main-container {
max-width:1680px;
width:100%;
height:1000px;
margin:0 auto;
background-color:#cccccc;
}
.row-1, .row-2, .row-3 {
background-color:#f4f4f4;
width:1000px;
margin:0 auto;
height:100px;
margin-bottom:25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="main-container">
<div class="row-1"></div>
<div class="row-2"></div>
<div class="row-3"></div>
</div>
Here, working example please check below link.
I have set .row-2 in same container but take different css for .row-2 and .row-1 & .row-3
and .row-2 take 10 columna same you need please check it
https://jsfiddle.net/DineshV/frp1Luzo/
[Here is image with center same as you said. you know showed center because of you have nor resize window ][Check this img]
https://i.stack.imgur.com/sbhlK.png
I would like to scroll to the end of the container. The element is having new items added via ajax on click, so I am recalculating its height each time I click to load more. The page scrolls fine but I would like to also add the navigation height in order to have the exact pixels. It looks like it is not adding + 224 tho
Html
lorem
New items are added via a click and ajax.
Css
nav {
height: 90px;
}
#container {
margin-top: 104px;
margin-bottom: 120px;
}
Jquery
var page = $("html, body");
var pos = $("#container").height() + 224;
page.animate({scrollTop: pos}, 1000);
I think you want something like this no ?
var page = $("html, body");
console.log($("#t").height());
var pos = $("#t").height() - 500;
console.log(pos);
page.animate({scrollTop: pos}, 1000);
div{
height: 1000px;
width: 50px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="t"></div>
you can use scrollIntoView for last added item
var j=0;
function Add(){
var item=null;
for(var i=0;i<20;i++){
j++
item= $('<div class="item">'+j+'</div>').appendTo("#container")
}
item[0].scrollIntoView()
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" onclick="Add()" Value="Add" />
<div id="container"></div>
I want the width wise transition in image on clicking the image(size of image reduces slowly)
<head>
<script type="text/javascript">
function movediv(){
var division = document.getElementById('image');
division.style.width = "1000px";
division.style.width ='600px' ;
division.style.transition ='width 2s';
}
</head>
<body>
<img src = "generic_sky_wallpaper-1280x800.jpg" id="image" onclick="movediv();">
</body>
This FIDDLE will animate a friend of mine.
JS
$( ".imagediv" ).click(function(){
$( "#minion" ).animate({
height: 400,
width: 300
}, 3000,
function() {
// complete.
});
});