I have a simple animation I'm playing with where it slides content from behind the parent element. The problem is I'm not sure where to account for that parents width. I tried to put it in the else part of the statement but if I do then the animation only runs once, where do I make it so when the animation is finished the child isn't hiding behind the parent?
JSFiddle
HTML
<div id="slideContainer">
Start Slide
<div id="slide">
This is More Content!
</div>
</div>
CSS
#slideContainer{
position: relative;
width: 500px;
overflow:hidden;
}
#slideContainer a{
display:block;
background-color: beige;
width:50px;
height: 50px;
float: left;
position: relative;
z-index: 1;
}
#slide{
width: 200px;
height: 50px;
background-color: beige;
position: absolute;
left: -500px;
}
Jquery
$(document).ready(function(){
$('#slideContainer a').click(function() {
var lefty = $(this).next();
lefty.animate({
left: parseInt(lefty.css('left'),10) == 0 ?
-lefty.width() :
100
});
});
});
Just change the comparisons from 0 to whatever value you want to use (such as 100 or 50).
left: parseInt(lefty.css('left'),10) == 50 ?
-lefty.width() :
50
http://jsfiddle.net/ExplosionPIlls/NwJTU/2/
Try this fiddle.
I have used .toggleClass to add/remove class "close". And used jQuery's .hasClass to decide the animation.
Related
Hello :) I wonder: Each time I want to use a slider, I have to define a parent element in position: relative, and his child in position: absolute, then using javaScript playing with the left position to make it move.
For exemple:
thisElement.style.left = 100 + "px";
I just feel uncomfortable using position: absolute at each time I want to do that.
Is there a better way, without using position:absolute to make a slider work?
You actually do not need to use position: absolute.
.bar {
height: 30px;
width: 300px;
background-color: red;
}
.slider {
display: inline-block;
height: 50px;
width: 50px;
border-radius: 25px;
background-color: blue;
transform: translateX(50px)
}
<div class="bar">
<div class="slider">
</div>
</div>
$(".raindrop1").clone().removeClass("raindrop1").addClass("raindropDelete").appendTo("body").css({
left: $(".shape").position().left - 29.50,
top: $(".shape").position().top + 1,
position: "relative"
}).animate({
top: "+=1000"
}, function() {
$(".raindropDelete").remove();
});
body {
background: rgb(0, 0, 0);
}
.shape {
border-radius: 50px;
width: 10px;
height: 10px;
background-color: white;
position: absolute;
left: 50%;
top: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="shape" onclick="curse()"></div>
<img src='http://images.clipartpanda.com/raindrop-clipart-RTGdn5bTL.png' width="15px" class="raindrop1">
I got this bit of code but I just can't seem to get it to work the way I want to. I want to make an image fall down to the bottom of the screen but to delete itself just before a scrollbar appears.
JS:
$(".raindrop1").clone().removeClass("raindrop1").addClass("raindropDelete").appendTo("body").css({
left: $(".shape").position().left - 29.50,
top: $(".shape").position().top + 1,
position: "relative"
}).animate({top :"+=1000"}, function() {
$(".raindropDelete").remove();
});
HTML:
<div class = "shape" onclick = "curse()"></div>
<img src = 'http://images.clipartpanda.com/raindrop-clipart-RTGdn5bTL.png' width = "15px" class = "raindrop1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
and CSS:
body{
background: rgb(0, 0, 0);
}
.shape{
border-radius: 50px;
width: 10px;
height: 10px;
background-color: white;
position: absolute;
left: 50%;
top: 50%;
}
Am I doing anything wrong?
JSFiddle
You are trying to remove your droplet in the function that is used to do something when animation is completed. So droplet animation is still going until it will reach +1000px from the top.
To remove before it falls below the window it's possible to use step option for animate method. What it does is looking what happens during animation and you can remove the droplet if when it falls below the edge.
Step Function
The second version of .animate() provides a step option — a callback
function that is fired at each step of the animation. This function is
useful for enabling custom animation types or altering the animation
as it is occurring. It accepts two arguments (now and fx), and this is
set to the DOM element being animated.
now: the numeric value of the property being animated at each step
fx: a reference to the jQuery.fx prototype object, which contains a number
of properties such as elem for the animated element, start and end for
the first and last value of the animated property, respectively, and
prop for the property being animated.
So what I've done is created a step function that each step looks if droplet is reached the edge of the window. If condition is met - just remove the droplet
$(".raindrop1").clone()
.removeClass("raindrop1")
.addClass("raindropDelete")
.appendTo("body").css({
left: $(".shape").position().left - 29.50,
top: $(".shape").position().top + 1,
position: "relative"
})
.animate({top :"+=100"},
{step: function(now) {
if (now+50 >= $(window).height())
$(".raindropDelete").remove();
}
},
function() {});
body{
background: rgb(0, 0, 0);
}
.shape{
border-radius: 50px;
width: 10px;
height: 10px;
background-color: white;
position: absolute;
left: 50%;
top: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "shape" onclick = "curse()"></div>
<img src = 'http://images.clipartpanda.com/raindrop-clipart-RTGdn5bTL.png' width = "15px" class = "raindrop1">
using this css you can stick your image to the bottom of the window in all new browsers
.fix{
position:fixed;
bottom:0px;
left:50%;
}
<img src="yourimagepath" class="fix"/>
and for IE6 you can use
position:absolute; instead of fixed. It will position the image on the bottom of the page but as you scroll up the image will scroll with the page. Unfortunately position:fixed in not supported in IE6
Using this code you can detect if the user has reached to the bottom of the page. Here you can add your code for deleting the image. If you put the code here the image will be deleted automatic if the user reaches to the bottom of the page.
window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
// you're at the bottom of the page
}
};
You can use sticky elements. They are elements on a page that will not be scrolled out of view. In other words it sticks to a visible area (viewport or scrolling box). You can create this with CSS using position: sticky;.
[Ref: http://www.hongkiat.com/blog/useful-css-tricks-you-might-have-overlooked/]
Look at the following code for an example:
https://codepen.io/rpsthecoder/pen/zGYXEX
HTML:
<h4>Scroll to see the sticky element <em>sticking</em></h4>
<div class="extra"></div>
<br />
<div id="wrapper">
<div id="sticky">
sticky
</div>
</div>
<br />
<div class="extra"></div>
CSS:
#sticky {
position: sticky;
background: #F762BC;
width: 100px;
height: 100px;
top: 70px;
left: 10px;
display: flex;
justify-content:center;
align-items:center;
box-shadow: 0 0 6px #000;
text-shadow: 0 0 4px #fff
}
#wrapper {
width: 75%;
margin: auto;
height: 400px;
background-color: #ccc;
}
.extra{
background: #ccc;
width: 75%;
margin: auto;
height: 100px;
}
body {
height: 1000px;
font-family: georgia;
}
h4{
text-align: center;
}
I looked around what I would like to achieve, but I wasn't able to find any suitable answer.
Basically I can't make the code to correctly detect mouse entering and leaving a div that is overlapping another div.
This is my current situation:
Working demo: http://jsfiddle.net/2f5xx73y/
HTML:
<div style='height: 100%; width: 100%;padding: 30%;'>
<div class='box'>
<div class='inner-box'>Merry xmas!</div>
</div>
<div class='box'>
<div class='inner-box'>Happy new year!</div>
</div>
</div>
CSS:
.box {
height: 100px;
width: 100px;
display: inline-block;
position: relative;
background-color: green;
}
.inner-box {
height: 100%;
width: 100%;
position: absolute;
opacity: 0;
z-index: 1;
}
.zoomed-inner-box {
height: 160%;
width: 160%;
top: -30%;
left: -30%;
position: absolute;
background-color: red;
z-index: 1;
}
JS:
$(".inner-box").mouseenter(function () {
$(this).attr("class", "zoomed-inner-box");
});
$(".inner-box").mouseleave(function () {
$(this).attr("class", "inner-box");
});
As you can see there are two boxes which become bigger when hovered overlapping the other box.
Going right to left everything works fine, in fact the red div goes away as soon as the mouse leave it. This doesn't happen in the opposite direction, where a mouseleave event it's fired as soon as the cursor enters the green div behind the red one, while I want the red div to go away when the mouse completely leave it.
I also tried using the :hover selector for the inner-box class but it has the exact same behaviour. Do you know a nice solution to this problem?
Just change the z-index on .zommed-inner-box to overwrite the .inner-box's z-index. That way the currently hovered box has a higher z-index than .inner-box :
.inner-box {
height: 100%;
width: 100%;
position: absolute;
opacity: 0;
z-index: 1; <---- original z-index
}
.zoomed-inner-box {
height: 160%;
width: 160%;
top: -30%;
left: -30%;
position: absolute;
background-color: red;
z-index: 2; <---- higher z-index
}
FIDDLE
I am working on a form that has multiple pages that I would like to scroll in/out of view. I have to use absolute positioning to force the divs (pages) to scroll in a single line; however, this causes the parent divs height to not be responsive to the children (which have varying heights based on amount of content plus dynamic content being added to them).
How can I make the parents height be responsive to the children while still allowing my pages to scroll in a single line (I have already tried float)?
Is there anyway to achieve the same effect as the jsFiddle Demo without having to use absolute positioning?
Example: jsFiddle Demo <--- How do I make the toggle button remain below the divs no matter how tall they are?
#div1{
width: 500px;
height: 110px;
background-color: blue;
position: absolute;
top: 0px;
left: 0px;
}
#div2{
width: 500px;
height: 110px;
background-color: red;
position: absolute;
top: 0px;
left: 0px;
}
.container {
width: 800px;
position: relative;
height: 100px;
}
<p>some content here </p>
<div class="container">
<div id="div1"></div>
<div id="div2"></div>
</div>
<button>Toggle</button>
EDIT
Updated jsFiddle to show problem better.
You inspect the height and position of the child elements and calculate the total height and apply that to the parent. Absolutely-positioned elements have their own layout context, so CSS alone cannot solve this.
The height in #div1 and #div2 is causing an overflow of the .container div:
Set the height of #div1 and #div2 to the same height as its container:
#div1{
width: 500px;
height: 100px;
background-color: blue;
position: absolute;
top: 0px;
left: 0px;
}
#div2{
width: 500px;
height: 100px;
background-color: red;
position: absolute;
top: 0px;
left: 0px;
}
Or set the .container to overflow:hidden:
.container {
width: 800px;
position: relative;
overflow:hidden
height: 100px;
}
Updated jsfiddle:
http://jsfiddle.net/FkNa2/193/
Depending on what you want, i Updated your fiddle:
Button position is fixed at document loading, based on height of the biggest absolute element:
$(function(){
$('#container').height(Math.max($('#div1').height(),$('#div2').height()));
});
you can see the fiddle here
Button position is recomputed each time the toggle is done, you can use the complete option of one of your toggle to handle it:
$div2.toggle('slide', {
direction: 'left',
complete:function(){
$('#container').height($('#'+currentDiv).height());
}
}, 'slow');
see the fiddle here
use min-height for #div2
#div2{
width: 500px;
min-height: 100px;
background-color: red;
position: absolute;
top: 0px;
left: 0px;
}
I'm trying to do what many have asked before, but even after trying everything I still can't get the results I want.
I have an image 600px by 1600px, 4 images of 600px by 400px in a vertical line. I want to show 600px by 400px of the image at any one time. Ideally I would be able to hover over an element somewhere on my page and move the image upwards to reveal the other portions of the 600px by 400px image. In effect, I'd have 4 images viewable by hovering over 4 the elements.
I've tried various css3 and jquery solution but none have worked. I would appreciate any help with this.
HTML
<div class="mainimage">
<div class="buttonsection">
<div class="button1">Button 1</div>
<div class="button2">Button 2</div>
<div class="button3">Button 3</div>
<div class="button4">Button 4</div>
</div><!--end of buttonsection-->
<div class="rollingimage">
<img src="IMG/four-pics.png">
</div><!--end of rollingimage-->
</div><!--end of mainimage-->
</div><!--end of main content-->
CSS
.mainimage {
position: relative;
top: 0px;
left: 0px;
width: 900px;
height: 400px;
border: 2px solid #E78F25;
margin: 0 10px 20px 0;
}
.buttonsection {
width: 290px;
height: 400px;
position: relative;
float: left;
}
.button1,
.button2,
.button3,
.button4 {
display: inline;
height: 98px;
width: 290px;
border: 1px solid #E78F24;
text-align: center;
float: left;
}
.rollingimage {
width: 598px;
height: 400px;
position: relative;
overflow: hidden;
top: 0px;
left: 0px;
float: right;
}
jquery
$(document).ready(function(){
$(".button1").hover(function(){
$('.rollingimage').stop().animate({'top': '-200px'}, 1500);
});
});
Here is the jsfidle: http://jsfiddle.net/dirtyd77/jCvYm/1/
Thanks yet again
Gary
Just for fun, no JS:
http://jsfiddle.net/coma/MTWdb/5/
HTML
<div id="foo">
Button 1
Button 2
Button 3
Button 4
<div></div>
</div>
CSS
#foo {
width: 400px;
border: 2px solid #E78F25;
position: relative;
}
#foo > div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 200px;
background: #fff url(http://placekitten.com/600/1600) no-repeat 0 0;
transition: background-position .5s;
}
#foo > a {
display: block;
width: 200px;
line-height: 100px;
text-align: center;
text-decoration: none;
}
#foo > a + a {
border-top: 1px solid #E78F25;
}
#foo > a:nth-child(1):hover ~ div {
background-position: 0 0;
}
#foo > a:nth-child(2):hover ~ div {
background-position: 0 -400px;
}
#foo > a:nth-child(3):hover ~ div {
background-position: 0 -800px;
}
#foo > a:nth-child(4):hover ~ div {
background-position: 0 -1200px;
}
You need to change the positioning of the image inside the div, not the div itself. To animate my example, you could add CSS transitions for better performance than JS animations.
http://jsfiddle.net/jCvYm/8/
$('.rollingimage').find('img')
As Dom mentioned, the jsFiddle you provided didn't reference the jQuery library. It also didn't included any actual images, and only contained code for one of the three buttons. I doubt those were the original problems you were having, though. (The missing reference to jQuery might have been.)
Once I had those straightened out, I noticed that hovering the button caused the picture to slide out of the screen, instead of scrolling. The simplest way to fix that is to move the img element, instead of moving the div. (The more natural way would be to change the scroll position of the div, but I don't recall how to do that off the top of my head.)
Added CSS:
.rollingimage img {
position: relative;
}
New JS:
$(document).ready(function(){
$(".button1").hover(function(){
$('.rollingimage img').stop().animate({'top': '0px'}, 1500);
});
$(".button2").hover(function(){
$('.rollingimage img').stop().animate({'top': '-400px'}, 1500);
});
$(".button3").hover(function(){
$('.rollingimage img').stop().animate({'top': '-800px'}, 1500);
});
$(".button4").hover(function(){
$('.rollingimage img').stop().animate({'top': '-1200px'}, 1500);
});
});
jsFiddle: http://jsfiddle.net/jCvYm/6/