I created a sliding list of divs using the following code :
<div class="row">
<img class="back-arrow">
<div class="hide-extra">
<div class="tile-container">
<div class="tile"></div>
<!-- More Divs -->
</div>
</div>
<img class="next-arrow">
</div>
The overflow is supposed to stay hidden and the divs slide to show the next/ previous divs when the corresponding arrows are clicked. Here's a simplified version of my code to move forward a tile:
function nextTile() {
var tileWidth = /*Width of each div*/;
var position = parseInt($(".tile").css("right"));
position += tileWidth;
var rightPosition = position + "px";
$(".tile").animate({right:rightPosition}); //in my code each of the divs in the row move position
}
}
The code works fine except that if I press too rapidly on the arrows the divs will not slide the appropriate length. Instead they slide part way and leave me stuck with a div half visible.
I made the following addition to my code using Malk's comment and his attached link: jQuery animation detect if animating?
function nextTile() {
var tileWidth = /*Width of each div*/;
var position = parseInt($(".tile").css("right"));
position += tileWidth;
var rightPosition = position + "px";
var tileLock = $(".tile").is(':animated'); // new code
if (tileLock === false) // new code
$(".tile").animate({right:rightPosition});
}
Related
Trying to create an animated element (div) appear on background on page load and then on scroll (the first animation disappears and the second slides in).
As a beginner, I managed to create one simple, choppy animation (code below) but I can't figure out how to make it smooth, how to make it disappear on scroll down and how to place another animation instead of this one.
Although there are many questions that I need to find answers to,
the one i'm asking is -
How do I use the animation again in a different place ? Let's say vh height is 700px so after user scrolled those 700px I want the animation to slide in again from the top right corner.
function bgAnimation () {
let element = document.getElementById("bg");
let pos = -800;
let id = setInterval(frame, 1);
function frame () {
if (pos == -300) {clearInterval(id);} else {
pos++;
element.style.right = pos + 'px';
element.style.top = pos + 'px';
element.style.paddingLeft = '150px';
}
}
}
window.addEventListener("load", bgAnimation);
<body id="body">
<section>
<div id="cvs">
<div id="bg"></div>
</div>
</section>
</body>
I am trying to create an effect where when mouse is moved over the image it should display a translucent black box on the image and display some details on top. These div's contain images and the problem is this mouseover and mouseout event are creating flickering of the black translucent div added on top.
Here is the code,
function addfocus(elem)
{
// getting dimensions of current div.
var currelem = document.getElementById(elem);
var left = currelem.offsetLeft;
var top = currelem.offsetTop;
var w = currelem.offsetWidth;
var h = currelem.offsetHeight;
// create a new div to match up these dimensions.
var ddiv = document.createElement("div");
ddiv.style.position = "absolute";
ddiv.style.top = top + "px";
ddiv.style.left = left + "px";
ddiv.style.width = w + "px";
ddiv.style.height = h + "px";
ddiv.style.backgroundColor= "rgba(0,0,0,0.5)";
document.body.appendChild(ddiv);
}
function rmvfoucs(elem)
{
document.body.removeChild(document.getElementById(elem));
}
When there is only text in the div, the flickering is not seen. Only when the image is included in the div, do I see the flickering.
Please help if you have any solution to this.
Thanks.
Your problem is that when you add your overlay it causes a mouseout event which removes the overlay. So when you move the mouse you constantly adds and removes the overlay.
But I'm not sure why you use Javascript for this. It can be accomplished in CSS, using :hover.
<div class="item">
<div class="info">...</div>
<img src="..." />
</div>
Show your overlay on hover
.info {
display:none;
}
.item:hover .info {
display:block;
}
See example: http://jsfiddle.net/jj8X6/
I have a responsive site that has an image slider that the user can look through.
Here is the link to that slider:
http://firehousecoffeeco.com
I was able to get the slideshow to return to the first slide when they click the "right" button on the last slide, without the right edge of the last slide ever coming too far into the window. This is done by checking the viewport width against the container div's width (see the left button's click handler below).
My question is: How do I make it so that the same thing that is happening with the last slide happens with the first slide. (no matter what, I never want the container's left edge to go above 0px). I tried to do the same with the first slide as with the last, but it didnt' work, please see below:
Here is the markup of the slider:
<section id="photoGallery">
<div id="slides">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
<!--left and right buttons-->
<div id="left" data-dir="left"></div>
<div id="right" data-dir="right"></div>
</section>
The container div is "slides" and it is what is being moved.
Here is my script's click handlers and transition function:
//click handlers
leftButton.on('click', function(){
var viewport = $(window).width();
var slidesContainerLeftEdge = $('#slides').get(0).getBoundingClientRect().left;
var slidesContainer = $('#slides').width();
if (slidesContainerLeftEdge == 0) { //if on first image (this is not working, help!)
slides.animate({marginLeft: ""+-(slideShowLimiter * 320)+"px"}, 200);
console.log("working");
} else {
transition("+=");
}
});
rightButton.on('click', function(){
var viewport = $(window).width();
var slidesContainerEdge = $('#slides').get(0).getBoundingClientRect().right;
var slidesContainer = $('#slides').width();
if (slidesContainerEdge < viewport + 320) { //if last slide
slides.animate({marginLeft:"0px"}, 200);
} else {
transition("-=");
}
});
function transition(direction) {
slides.animate({marginLeft: ""+direction+""+movement+"px"}, 200);
}
Hopefully you guys can help me out of a jam. Thanks in advance!
if(0 >=slidesContainerLeftEdge > -320){ // if first slide
slides.animate({marginLeft: ($(window).width()-$('#slides').width())+"px"}, 200);
}else{
//...
}
Just to follow the logic here you used for the rightClick, so when it's the first slide on the left, you'll move the slides to the left (by setting the margin-left) so its right matches the right of the window.
See Full Code:
leftButton.on('click', function(){
var viewport = $(window).width();
var slidesContainerLeftEdge = $('#slides').get(0).getBoundingClientRect().left;
var slidesContainer = $('#slides').width();
if (0 >=slidesContainerLeftEdge > -320) {
slides.animate({marginLeft: (viewport-slidesContainer)+"px"}, 200);
} else {
transition("+=");
}
});
Here's my situation:
I have a bunch of rows. In each row is a button that when clicked displays a set of options. Depending on where the row is in the page, the settings need to open above or below the button. If the button is at the top of the page, the settings would display beneath the button. If the button is at the bottom of the page, it should open above.
If the user picks something at the bottom of the page, but then scrolls so it's towards the top, I need the settings to shift under the button as opposed to on top. What's the best way to do this? I'm not actually sure of ANY way to do this, so any advice would be appreciated.
http://jsfiddle.net/573zJ/
Test the position of the element relative to the viewport midpoint, and move it to the first or last position relative to its container, like so:
<div class="container">
<div class="element-set">
<div class="normal">content</div>
<div class="flipper">flipper</div>
</div>
... random number of .element-set
<div class="element-set">
<div class="normal">content</div>
<div class="flipper">flipper</div>
</div>
</div>
and
$(window).scroll(function () {
flippers();
});
function flippers() {
var midpoint = $(window).height() / 2;
$('.flipper').each( function () {
var $flipper = $(this);
var $parent = $flipper.parent();
var top = $parent.position().top - $(window).scrollTop();
if ( top > midpoint ) {
$flipper.prependTo( $parent );
} else {
$flipper.appendTo( $parent );
}
});
}
<div id="par">
<div id="item11"></div>
<div id="item12"></div>
<div id="item13"></div>
<div id="item14"></div>
....
</div>
I want to make the div#itemXX elements auto scroll up inside the div#par. Also I want it move one div each time.
I can use the <marquee> tag, but it has been deprecated, so I wonder if there other ways?
BTW, the height of the div#itemXX is not fixed.
UPDATE:
I want the "div#itemXX" move one each time. Just like the slide show,show one div each time,but if the current div's height is large than the viewport,it should scroll up,when the scroll end,the next div(slide) should move up.
(function(){
var top=0;
var par = document.getElementById('par')
var scroll = function() {
top++;
if( top>=par.firstElementChild.offsetHeight )
{
//first element is out of sight, so move to the end of the list
top=0;
par.firstElementChild.style.marginTop='';//reset to zero
par.appendChild(par.firstElementChild);
}
else
{
//move the first element 'top' px up
par.firstElementChild.style.marginTop='-'+top+'px';
}
setTimeout(scroll, 100);//repeat after 100ms
}
scroll();
})()
jsbin: http://jsbin.com/onohan/3/