I have two divs with animation, both are doing the same but with different animation. I have
$(document).ready( function(){
$('#show_hide_button').click( function() {
$('#some_box').animate({ width: 'toggle' });
});
});
Whole code in in jsfiddle http://jsfiddle.net/xLHb8/192/
Can anyone please explain to me why first div is animating right to left, left to right and second div is animating always to top left corner.
How can I make second div animate same as first div?
First, the relevant details in your code should be included in your question (in addition to providing the fiddle). But so you have the following CSS:
#some_box {
background: #fc0;
width: 25%;
height: 200px;
}
.second img {
max-width:100%;
max-height:100%;
}
.second {
width: 200px;
}
With the following HTML:
<button id="show_hide_button">click me</button>
<div id="some_box"></div>
<div class="second">
<img src="http://piq.codeus.net/static/media/userpics/piq_66223.png" />;
</div>
Note that you're setting the img to have a maximum width and height of its parent container. So because you're toggling the width of the parent, as parent collapses, the image is scaling down. Further, since you don't have a height setting on the img, its height is going to animate along with the animated width. This creates the effect of the image animating to the top left corner.
Without further details, it's hard to say how to fix your code to achieve the desired effect.
Update
If you want the width only to collapse, you can set a pixel height on your image so that it doesn't scale in proportion to its width:
.second img {
max-width: 100%;
height: 200px;
}
You can also put both animations in a single click event handler, like so:
$(document).ready( function(){
$('#show_hide_button').click( function() {
$('#some_box').animate({ width: 'toggle'});
$('.second').animate({ width: 'toggle' });
});
});
Forked your fiddle: http://jsfiddle.net/u1sdd8j5/1/
Update 2
From the comments, it seems like you want the image to collapse to the left, without losing the aspect ratio. We need to get a little creative to pull that off, especially if you're looking for a solution involving jQuery.animate(). The image actually needs to move downwards as it is scaled down. We can pull that off by animating the <img> itself, rather than its container, and adjusting its top margin at the same time animate its width.
Revised CSS (making the containers the same size for consistency):
#some_box {
background: #fc0;
width: 25%;
height: 200px;
}
.second {
width: 25%;
height: 200px;
}
.second img {
max-width: 100%;
max-height: 100%;
}
Revised JS:
$(document).ready( function(){
$('#show_hide_button').click( function() {
$('#some_box').animate({ width: 'toggle' });
var $secondImg = $('.second img'),
secondImgMargin = $secondImg.is(':visible') ? '50%' : 0;
$('.second img').animate({
width: 'toggle',
marginTop: secondImgMargin
});
});
});
Note that we need to first determine whether or not the <img> is visible. If it is, then we want to animate the top margin to 50%. If it's not, then switch the top margin back to 0.
Here's a new forked fiddle: http://jsfiddle.net/xwanm9ze/1/
Final Note
All of this might be easier to achieve with CSS3 transitions. You would want to set up a class that toggles the animation. And you can specify the transform-origin which, in this case, would be 'left center'.
The problem is, that you added a relative width and height attribute to the inside the second div and did not give a height and width attribute to the second div. This way, the image controls the height and width of the second div, since it has no height and width attribute.
In your case, a solution would be to give the second div a fixed width and height
Also, for the JQuery, you only need one $(document).ready function
$(document).ready(function () {
$('#show_hide_button').click(function () {
$('#some_box').animate({
width: 'toggle'
});
$('.second').animate({
width: 'toggle'
});
});
});
#some_box {
background: #fc0;
width: 25%;
height: 200px;
}
.second img {
width:100%;
height:100%;
}
.second {
width:200px;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="show_hide_button">click me</button>
<div id="some_box"></div>
<div class="second">
<img src="http://piq.codeus.net/static/media/userpics/piq_66223.png" />
</div>
Related
I have a div that after I click an element(button1), expands its height. I then have another button appear which allows you to shrink the div(button2). After I click button1, the div expands and button2 shows at the bottom. I can then click button2 to shrink the div back to normal, but if I expand the div again, button2 is now off the edge of the screen, albeit in the same bottom location, just far left rather than centered.
I had to set the margin on button2 to -25px since the absolute positioning was kicking it off-center. And I need to use absolute positioning since it seemed it was only way to get the button to appear at the bottom of div after it had expanded.
$(".button1").on("click", function(){
$(".button1" ).fadeOut(200);
$("#block3").animate({
height: '800px'
}, 600, function() {
$(".button2").fadeIn(200);
});
});
$(".button2").on("click", function(){
$(".button2").fadeOut(200);
$("#block3").animate({
height: '400px'
}, 600,function(){
$(".button1" ).fadeIn(200);
});
});
.button2{
width: 50px;
height: 50px;
display:none;
position: absolute;
margin-left: 25px;
}
.button1{
width: 50px;
height: 50px;
margin-top: 25px;
image-rendering: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class = "col-md-12" id = "block3">
<img src="https://placehold.it/120x80/00aaaa/fff/?text=scroll.png" class = "button1" />
<img src="https://placehold.it/120x80/00aaaa/fff/?text=scroll1.png" class = "button2" />
</div>
</div>
Uploaded the code.
https://jsfiddle.net/bs9xhe5e/2/
On the second click it changed the inline styling to display:block instead of display:inline, if you just add the display:inline into your jQuery it works;
https://jsfiddle.net/havL1z3m/
Added
$(".button2").css({display:"inline"});
The reason .button2 is showing up all the way to the left is that the absolute positioning gives it a default left of 0px.
Probably the easiest fix would be to remove absolute position, as well as the margin-left. Instead, to get .button2 to the bottom of the section, just set margin-top: 725px.
.button2{
width: 50px;
height: 50px;
display:none;
margin-top: 725px;
}
And then you will no longer need to use .css() to change bottom of .button2.
Check out this working fiddle: https://jsfiddle.net/gkpx7L15/
Change button2 styles like this:
.button2{
width: 50px;
height: 50px;
display:none;
position: absolute;
margin-left: -25px;
left:50%;//added style
}
https://jsfiddle.net/bs9xhe5e/3/
And everything will work fine
NOTE: Element will be positioned to the center of parent like this only when width is fixed like here. Example:
.someItem{
width: someWidth;//here we set some width to element
left: 50%; //Here we set position from the left
margin-left: -(somewidth/2);//here we set -half of the element's width for margin-left
}
I want to make a half shown div in a page, like a footer. When I click it I want it to slide up. The div will contain information on it.
I achieved this somehow, but my problem is that the div does not get really hidden it just changes the position.
You can find the demo here: http://jsfiddle.net/8ZFMJ/394/
var clicked=false;
$(".two").on('click', function(){
if(clicked)
{
clicked=false;
$(".two").css({"bottom": -430});
}
else
{
clicked=true;
$(".two").css({"bottom": "-200px"});
}
});
I had a similar problem a while ago, in fact I think it was my first stackoverflow question. Unfortunately it got poorly received.
Anyway, the problem is currently that you are just changing the position of the div - that's what .bottom does. I think what you want to do is change the height, see this JSFiddle in which I managed to switch the div between states (no animation yet).
It makes simple use of css's overflow-y: hidden; to hide the div's contents when it is small, and all the JS does is toggle between heights:
if(clicked)
{
$(".two").css("height", 10);
}
else
{
$(".two").css("height", 250);
}
clicked = !clicked;
clicked = !clicked just flips the boolean state of the variable.
Now, to add the animation, we can use jQuery's .animate and produce this beautiful Fiddle
Basically, all we had to do in between is use animate instead of css. Simple, really.
TL;DR
final JSFiddle
.two must be absolute positioned inside .container that must be relative positioned. Then you just change the bottom with a negative value and that will hide the footer.
CSS:
html, body { height: 100%; }
.container {
position: relative;
height: 100%;
overflow: hidden;
}
.two {
position: absolute;
background-color: yellow;
width: 100%;
height:250px;
bottom: -200px;
transition: bottom 1s;
}
jQuery:
var clicked=false;
$(".two").on('click', function(){
if(clicked)
{
clicked=false;
$(".two").css({"bottom": "-200px"});
}
else
{
clicked=true;
$(".two").css({"bottom": 0});
}
});
http://jsfiddle.net/8ZFMJ/398/
I have a div called container which contains dynamically created content(paragraphs) through javascript. The problem is that the paragphs aren't shown on the div once they reach beyond the boundaries of the container. To solve this issue, I tried overflow but that just added x,y scrollbars.
What I'm trying to do is increase the height of the container after every parapgraph added i.e. when paragraph is added to container of height 20px, the container increases height to a further 40 px for next paragraph.
HTML
<div class="container"></div>
Add content
CSS
.container {
width: 120px;
height: 20px;
display: inline-block;
margin-left: auto;
margin-right: auto;
/* overflow: auto; */ //As aforementioned, I'm not in favour of scrollbars
background-image: url('http://i.imgur.com/dfzk0TW.png');
}
Javascript
$(function () {
$('#add').on('click', function () {
$('<p>Text</p>').appendTo('#container');
});
});
Any suggestions? Thank you!
Try this code
jsfiddle
remove height from css and use below code
$('<p>Text</p>').appendTo('.container');
remove # and put dot(.)
this code will get height of container div and than will add 20px in container div.
$(function () {
$('#add').on('click', function () {
$('<p>Text</p>').appendTo('#container');
heightWithPx = $('#container').css('height');
height = heightWithPx.substr(0,heightWithPx.length-2);
newHeight = parseFloat(height)+20;
$('#container').css('height',newHeight+'px');
});
});
I have html sturcture
<div id="bg" class="layer">
<img id="trackmap" src="images/back_2416.jpg" width="1208" height="768" class=" ui-draggable map-icon" usemap="#main-map" data-zoom-image="images/background_zoom.jpg" data-big="images/background_zoom.jpg" style="position: relative; left: -439px; top: -272.6px; margin: 0px; display: inline-block; height: 1327.2px; width: 2088px;">
<div id="nav-text">LOREM IPSUM.</div>
</div>
Jquery
var windowHeight = $("#trackmap").height();
var windowWidth = $("#trackmap").width();
var text_height=((windowHeight)-(100));
$("#nav-text").css("top",windowHeight);
Css
.layer {
position: absolute;
width: 1208px;
height: 768px;
}
#nav-text{
z-index: 200;
color: white;
position: absolute;
font-size: 10px;
margin-left: 715px;
width: 310px;
height: 10px;
position: fixed;
bottom: 5px;}
I just want to fix the nav-text to the bottom right whatsoever.. Now i problem i am facing is theres zoom function on the trackmap.. which increases the height and width of the image ..so the text comes in between of the image ..intereferring with the image.. I have tried taking the image width height using jquery ..but somehow its not working
I am not sure I am following your issue here, but it sounds like you are trying to get a div to be in the bottom-right of another div no matter what size it is. That can be done by setting the parent div position to relative which you have, and the child div position to absolute. You have that set but then override it by setting the position to fixed lower in the CSS. You will also want to set the bottom to 0 and the right to 0.
This will position the child div to the bottom right of the parent div. Then you can get rid of your jQuery. Hopefully this helps.
Ok.. I am in a hurry to catch the bus.. but here's a fiddle that illustrates the idea..
basically you will need to use the scrolltop and left parameters to do so:
$(".container").on("scroll", function() {
$(".nav-text").css("top", $(this).prop("scrollTop") + 130);
$(".nav-text").css("left", $(this).prop("scrollLeft") + 120);
});
but move the scrolls first.. sorry I need to go now..
You can achieve this by not fixing the .layer width and height, using display:inline-block; to prevent the div from filling the whole container width. At that point, the .layer size will match the image size whatever it is.
Finally you just need to set the text to absolute position and bottom and right properties too.
.parent{
display:inline-block;
position:relative;
}
.children{
position:absolute;
bottom:0;
right:0;
}
Here is the fiddle explaining
And here is the proof it works even if the image size is changed(click on the image).
Fiddle 2
Im trying to add a footer at the bottom of this content that doesn't overlay the content but moves it up.
The only way I can see it working would be something like, when browser is at the bottom remove 'fixed' class on the left red '#work'.
js fiddle DEMO
Updated js fiddle DEMO
HTML
<div id="header-block">
Header-block, this sits here in the background
</div>
<div id="content">
<div id="work">
This content should be fixed when at the top
</div>
<div id="description">
This content should scroll -
</div>
</div><!-- end content -->
<div id="footer">
This should appear at the bottom
</div>
CSS
body {
margin: 0px;
padding: 0px;
}
#header-block {
background: green;
width: 100%;
position: fixed;
z-index: 1;
height: 300px;
top: 0;
}
#content {
margin-top: 300px;
width: 100%;
position: relative;
z-index: 2;
}
#work {
background: red;
width: 50%;
height: 100vh;
float: left;
position: absolute;
}
#description {
background: blue;
width: 50%;
height: 1200px;
float: right;
font-size: 30px;
}
#footer {
background: black;
width: 100%;
height: 100px;
position: absolute;
z-index: 3;
bottom: 0;
}
If I understand your question correct, this should do the trick (although it depends very much on JavaScript unfortunately).
// Fix work column on scroll
contentStart = $("#content").offset().top ;
contentSize = $("#content").height() ;
window.onscroll = function(){
if( window.XMLHttpRequest ) {
var position=window.pageYOffset;
// calculate the position of the footer and the actual seen window
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $("#footer").offset().top;
if ( position > 300 && !(docViewBottom >= elemTop)) {
$('#work').css({'position':'fixed', 'top':'0', 'height':'100vh'});
} else {
// if the footer is visible on the screen
if(docViewBottom >= elemTop) {
$('#work').css({ 'top': 0 - (docViewBottom - elemTop) }); // scroll the #main div relative to the footer
} else {
$('#work').css({'position':'relative', 'top': 'auto'}) ;
}
}
}
}
For further informations about the calculations, perhaps this question on stackoverflow is useful.
Edit: Andrew Haining posted his answer in between of my answer, perhaps give his link a try and maybe it's a better (more proper) solution. Unfortunately I haven't actualised this page when I was testing your code in JSFiddle and I didn't see his answer.
If you want to use my script, make sure you can test it with different resolutions. It works just fine for my resolution in JSFiddle, I didn't test any other.
I'm not 100% sure what you want, but if you remove the position: absolute and the bottom: 0 from the footer, and put a div with class='clearboth' above the footer, it seems to do what you need.
CSS
.clearboth {
clear: both;
}
This is a drawing of what I see on your fiddle;
Do you want the red and the blue to always be touching the black?
I don't see the red overlying the black
You should use jQuery to add a class containing the position:fixed value when the scroll position of the page is less than the inline position of the #work div. Once it scrolls past the position, remove the class and have the element fall back in line.
You can achieve this using the following jQuery methods.. .scrollTop() .offset().top() and $(window).height().
This tutorial will give you an understanding of what you need to do to achieve the necessary results, you will just have to change the calculation slightly using $(window).height(), $('#footer').height() and a few other changes to get what you desire.
Based on the question you asked i think this is what you mean. The red div should be fixed when it gets to the top but be absolute when it is below the top for scrolling and the black footer should be below the red while scrolling, check this code i have done for you. just add this jquery script and run it.
<script type="text/javascript" src="js/jquery.js"></script>
<script>
$(document).ready(function() {
$(window).scroll(function () {
console.log($(window).scrollTop());
if ($(window).scrollTop() >= 322) {
$('#footer').css("z-index","1");
$('#work').css(
{
"background": "red",
"width": '50%',
'height': '100vh',
'float': 'left',
'position': 'fixed',
'top': '0'
});
}
if ($(window).scrollTop() <= 322)
{
$('#work').css(
{
"background": "red",
"width": "50%",
"height": "100vh",
"float": "left",
"position": "absolute"
});
};
});
});
</script>
If not exactly a parallax, this is somewhat close to how parallax works, containers moving at different speeds, and some containers sitting fixed or scrolling when they attain a particular top/bottom offset in the viewport.
There's plugin that can do it. Skrollr
You can use Skrollr along with skrollrcss, and it'll make sure how the containers take position on screen based on scrolltop of the window and the container specifically.