I've ran into a inconsistency with the sliding animation in jQuery and I'm not too sure how I can overcome it.
I basically have two floating divs that act as opening and closing doors:
.door-one{
float: left;
width: 50%;
height: 100%;
background-image: url('dark-wood.png');
box-shadow: inset 0 0 10px black;
}
.door-two{
float: right;
width: 50%;
height: 100%;
background-image: url('dark-wood.png');
box-shadow: inset 0 0 10px black;
}
And the animation to govern their movements:
$(document).ready(function(){
$('.home-button').click(function(){
$('.door-one').animate({width: 'toggle'}, 1000);
$('.door-two').animate({width: 'toggle'}, 1000);
});
});
The problem exists with the left floating element. You see, the right one moves off the page to the right (images and all) in one smooth motion. The left one however just gets 'covered' up and doesn't actually 'slide' off of the page.
Is anyone familiar with this? Is there anyway to get the left element to slide off the page properly?
The background image for right door works, because the float causes it to move right as the door's width shrinks. The background image simply goes along for the ride.
The background image for the left door does not work, because the door doesn't move left when its width shrinks.
An alternative would be to animate the left door's position rather than its width.
You can do this by removing float: left and adding absolute positioning for the left door. I don't think you can toggle left for this purpose. But you can animate it in one direction or the other based on its current offset.
Snippet:
$('.home-button').click(function(){
var d1= $('.door-one');
if(d1.offset().left < 0) {
d1.animate({left: '0'}, 1000);
}
else {
d1.animate({left: '-50%'}, 1000);
}
$('.door-two').animate({width: 'toggle'}, 1000);
});
html,body {
width: 100%;
height: 100%;
margin: 0px;
}
.door-one{
position: absolute;
width: 50%;
height: 100%;
background-image: url("http://www.iconsdb.com/icons/preview/royal-blue/stackoverflow-4-xxl.png");
box-shadow: inset 0 0 10px black;
}
.door-two{
float: right;
width: 50%;
height: 100%;
background-image: url("http://www.iconsdb.com/icons/preview/royal-blue/stackoverflow-4-xxl.png");
box-shadow: inset 0 0 10px black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="home-button">Click me</button>
<hr>
<div class="door-one"></div>
<div class="door-two"></div>
Related
$(".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;
}
On a website there is a black line on the left of a picture about 1 or 2 pixels long. I can't get rid of it after checking the code (border etc). I think its a javascript problem. The picture doesn't have the black line on the home page but does have it on subsequent pages. There is no margin etc. How would I identify/fix the problem
image with no black border
http://www.darkrome.com/tours/rome-tours/colosseum-coliseum-ancient-rome-tour
image with black border on left hand side
http://darkrome.com/tours/vatican-tours/extended-vatican-museum-tour-with-bramante-staircase
Check out your css and remove the background image.
Actually the float: left is causing the issue, so you can remove it afaik
#tourDetFluidOuter {
margin: 0;
padding: 0 0;
width: 100%;
height: 100%;
float: left;
background: url(/images/tour-detail-bg.gif) repeat-x 0 0;
}
this black border (actually it is not a border but a background) is produced by
#tourDetFluidOuter {
margin: 0;
padding: 0 0;
width: 100%;
height: 100%;
float: left;
background: url(/images/tour-detail-bg.gif) repeat-x 0 0;
}
just remove the background or cover it fully.
First look at this website: http://irismediainfo2.lili.de/spip.php?article4924
On my screen it looks like on this screenshot: chrome - full window - desktop resolution: 1440x900
I think for most of you it will look diferent but thats part of the problem...
The main div with the gray border is inside an other div with id="page".
#page {
width: 560px;
margin: 50px auto 0px auto;
position:relative;
}
I created a new div with id="toolbar", that looks like it sticks to this #page-div, but it does not scroll with the page. On the website I linked above u can see the #toolbar as a dummy-box (grey with some Text).
At the moment the I use position:fixed in #toolbar.
When I position it at the side of #page so that it LOOKS like it is attached to it, and I resize the browser window... the two divs dont move the same way because the position of #page is calculated from the middle (by margin:auto) and the position of #toolbar is calculated from the side of the browser window (by position:fixed). So it is not attatched anymore in any other windowsizes.
I tried to make the #page float, to make the #toolbar appear at the side but that destroys the "margin:auto" of the #page so it is not centered anymore.
I also tried
#toolbar {
position: fixed;
center: 0px; }
Because I hoped there could be a way to calculate the position for position:fixed from the center.
Nothing worked, I hope you know a solution.
Actually everything I want is something like:
#page {
width: 560px;
margin: 50px auto 0px auto;
position:relative; }
#toolbar {
position: fixed;
center: 0px 280px 0px 0px; }
I would like to do this with minimal code and resources because I don't want to make the loading speed worse because of a little toolbar.
If you need more specific code from my css or html please tell me.
I hope the target and the problem is clear.
All you need is a wrapper-div that centers the whole block and algin the toolbar after that, since your #page has a fixed width in every viewport.
HTML:
<div class="wrapper">
<div id="toolbar">
content
</div>
</div>
CSS:
#toolbar {
height: auto;
padding: 10px 20px 10px 15px;
background-color: rgba(170, 170, 170, 0.5);
border: 1px solid #AAA;
border-radius: 0px 5px 5px 0px;
text-align: center;
margin: 0px auto 0px 279px;
}
.wrapper {
position: fixed;
top: 30%;
left: 50%;
}
I am trying to implement a star rating system for articles and found this nice plugin. I have exchanged the default star.gif with my own stars. Everything works fine if I use a full star rating. As soon as I am trying to use the split star function, the stars are not displayed correctly anymore.
The stars itself have a width of 32px.
The half stars should be on top of the right side of the full stars.
The following if-clause seems to be responsible for calculating the position:
// Prepare division control
if(typeof control.split=='number' && control.split>0){
var stw = ($.fn.width ? star.width() : 0) || control.starWidth;
var spi = (control.count % control.split), spw = Math.floor(stw/control.split);
star
// restrict star's width and hide overflow (already in CSS)
.width(spw)
// move the star left by using a negative margin
// this is work-around to IE's stupid box model (position:relative doesn't work)
.find('a').css({ 'margin-left':'-'+ (spi*spw) +'px' })
};
it is embedded in a "for-each star" loop. I have debugged this with firebug and the calculation seems to be correct. Each second star should have a left-margin of -16px.
For some reason this is not displayed on the site though.
Does anyone know what I am doing wrong? I have to mention that I do not have much experience with JS.
Here is the css:
div.rating-cancel, div.star-rating {
background: none repeat scroll 0 0 transparent;
cursor: pointer;
display: block;
float: left;
height: 32px;
overflow: hidden;
text-indent: -999em;
width: 17px;
}
div.rating-cancel, div.rating-cancel a {
background: url("delete.gif") no-repeat scroll 0 -16px rgba(0, 0, 0, 0);
}
div.star-rating, div.star-rating a {
background: url("star.gif") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}
div.rating-cancel a, div.star-rating a {
background-position: 0 0;
border: 0 none;
display: block;
height: 100%;
width: 32px;
}
div.star-rating-on a {
background-position: 0 -32px !important;
}
div.star-rating-hover a {
background-position: 0 -64px;
}
div.star-rating-readonly a {
cursor: default !important;
}
div.star-rating {
background: none repeat scroll 0 0 transparent !important;
overflow: hidden !important;
}
I cannot really tell what went wrong here. First of all the width in this setting had to be adjusted. Then one might want to get rid of the float option and use inline-block on the display instead. That way the following components will be drawn in a new line.
div.rating-cancel, div.star-rating {
background: none repeat scroll 0 0 transparent;
cursor: pointer;
display: inline-block;
height: 32px;
overflow: hidden;
text-indent: -999em;
width: 32px;
}
If I changed this value with firebug nothing happened. I replaced the css with the original file and then just added the changes I needed again and voilá, everything looks nice now.
I have made a JSFiddle where I am trying to make a DIV stay fixed vertically in the viewport as the user scrolls, but stay under a header.
However, the fixed DIV, with the green border, pops over to the right edge of the viewport when you scroll down to the point where the Javascript kicks in.
How do I constrain the green DIV so that it stays within the red bordered containing DIV? Ideally its horizontal position would stay fixed relative to the right edge of the container.
CSS:
header {
width: 100%;
height: 10em;
border: purple thin solid;
}
#container {
border: thin solid red;
position: relative;
height: 100%;
max-width:30em;
margin: 0 auto 0 auto;
}
#staticRight {
border: green thin solid;
display: inline-block;
float: right;
right: 0;
margin: 2em 0 0 0;
width: 120px;
height:600px;
font-size: .82em;
line-height:2em;
}
article {
border: blue thin solid;
max-width: 20em;
}
Javascript:
var elementPosition = $('#staticRight').offset();
$(window).scroll(function () {
if ($(window).scrollTop() > elementPosition.top) {
$('#staticRight').css('position', 'fixed').css('top', '0');
} else {
$('#staticRight').css('position', 'static');
}
});
Try this code. Giving right also to your staticRight div
$('#staticRight').css('position', 'fixed').css('top', '0').css('right','20px');
Instead
$('#staticRight').css('position', 'fixed').css('top', '0');
DEMO
When you set an element to fixed, it gets out of the flow and hence setting the parent to relative would'nt matter. The fixed div gets positioned at the desired coordinates relative to the browser window. So if you can calculate the left poition from the browser, just add it to your $(window).scroll when you change it to fixed. Your code should look like this-
<div id="staticRight" style="position: fixed; top: 0px; left: 70%;"></div>