Slide issues with my image slider on my website - javascript

Hey so the problem I am having is on my website www.stallionstride.org .
The image slider works when my buttons are pressed slowly, however, if you press the left and right buttons quickly when my images should slide back the other way instead it slides to an empty spot.
I tried using the stop command but that has not worked for me.
Here is my code. I only included the right buttons event since the left is basically the same. Any help is greatly appreciated.
$('#rightbutton').click(function() {
//clear the timer since photos scroll through at a certain amount of time
clearTimeout(timeoutTracker);
var scrollAmount = $('#slideshow_inner img').width();
var currentPos = Math.abs(parseInt($('#slideshow_inner').css('left')));
var remainingScroll = ($('#slideshow_inner').width() - currentPos)/908;
if (remainingScroll == 1) {
$('#slideshow_inner').stop(true, false).animate({ 'left' : '0' }, 'slow');
}
else {
$('#slideshow_inner').stop(true, false).animate({ 'left' : '-=' + scrollAmount}, 'slow');
}
timeoutTracker = setTimeout(function() {$('#rightbutton').click(); }, 3000);
});

Sliding images requires more design especially with back/next button.
I would suggest well developed plugin instead of building on your own.
One I can think of is slidejs, http://www.slidesjs.com/

Related

Autoscroll div (JavaScript)

I've got 2 div's (left div and right div). They are separated by half. On the right div you can see some pictures and on left side, there are information, which could be longer on some days that's the reason why I want to let it autoscroll to the bottom and back to the top.
I got already a Script but my version is scrolling the whole website.:/
My question: where is my mistake?
setInterval(function(){
$("html, body").animate({ scrollTop: $("leftdiv").height() }, 10000);
setTimeout(function() {
$('html, body').animate({scrollTop:0}, 8000);
},1500);
},1500);
https://jsfiddle.net/4gLts2f0/5/
I found a script which can scroll down.:) But I got still a problem: I do not know how I can let him jump back to the top and repeat the process
https://jsfiddle.net/4gLts2f0/7/
Try $("leftdiv").animate({ scrollTop: $("leftdiv").height() }, 10000);
scrollTop is a tricky properties to play with, i personally solved a similar issue calculating the offset from the top of the page with this function:
function getDistanceFromTop(element) {
var yPos = -100;
while(element) {
yPos += (element.offsetTop);
element = element.offsetParent;
}
return yPos;
}
after that i suggest try to use the scroll function from the specific target until you reach the specific point.

Positioning the top attribute of a element with jquery

I'm having an annoying issue trying to position the responsive navigation hamburger. I am using a plugin called responsive menu which creates the hamburger and uses absolute positioning.
I am trying to position the hamburger in the centre of the header at all times.
To achieve this I am using the following jQuery code.
However, the issue I have is when the hamburger is displayed and you scroll down the page and scroll back to the top of the page quickly. The hamburger does not position itself in the centre of the header. You need to scroll back down slightly for it to jump into place.
Any ideas how I can fix this please.. It's driving me crazy and I don't know jquery very well :(
Thank you for any advice in advance :)
Link to the site in question
$( window ).on("load resize scroll", function(e){
var headerHeight = $('nav').height()/2;
var iconHeight = $('#click-menu').height()/2;
var total = headerHeight - iconHeight;
if ($(window).scrollTop() >= 1) {
$('#click-menu').css('top', total);
}
else {
$('#click-menu').css('top', total);
}
});
It's hard for me to test and confirm this, but I believe the reason it's position is off when it hits the top is because the evaluation of $('nav').height()/2; happens immediately, but the header animates to size over 300 ms.
Although a bit hacky, I think you can solve the problem by adding a setTimeout
function setNavTop(){
var headerHeight = $('nav').height()/2;
var iconHeight = $('#click-menu').height()/2;
var total = headerHeight - iconHeight;
$('#click-menu').css('top', total);
}
$( window ).on("load resize scroll", function(e){
if ($(window).scrollTop() >= 1) {
setNavTop();
}
else {
setTimeout(setNavTop, 300); // wait for header to animate to size.
}
});
Since it has to delay for 300ms before adjusting the icon, its looks a bit glitchy. You can improve this by adding tweening the setTimeout. Not the most elegant, but it works
setNavTop();
setTimeout(setNavTop, 100);
setTimeout(setNavTop, 200);
setTimeout(setNavTop, 300);

sliding image css3 only or javascript needed?

I'm stuck in a drupal project, I would like to know how to get this effect done please, the left image will expand to right on click and same I want to the right image which will expand left on click, I want to know if it can be done by css3 only or javascript needed and how please... here are two image for my issue, I am mainly as front-end developer and know little of backend, so if anyone can help please..!
http://s14.postimg.org/aahx57ke9/img.png
If you want the image to slide and stay in that position after letting go of the mouse button, you have to use JavaScript.
I recommend jQuery. Here is an example illustrating how you can use JavaScript to slide elements and seamlessly superimpose them over each other, with jQuery animations; the JFiddle link at the bottom will show you the HTML, CSS, and JavaScript. It should be perfectly applicable to your image situation, assuming the images are positioned absolute.
JavaScript:
var b1 = $('#block1');
var b2 = $('#block2');
function slide(block, left, callback)
{
block.animate({
'left': left
}, 750, function() {
// Do this after finished animating.
if (callback) callback();
});
}
b1.on('click', function() {
// Only slide if not already done.
if (b1.css('left') != '-50px') {
// First slide both elements so they meet at the,
// middle, then switching the z-index is not noticeable.
slide(b1, '-250px');
slide(b2, '250px', function() {
// After animating, superimpose b1 over b2
// by changing z-index order, then animate
// the rest of the way.
b1.css('z-index', '1');
b2.css('z-index', '0');
slide(b1, '-50px');
});
}
});
b2.on('click', function() {
// Same here but with right element.
if (b2.css('left') != '50px') {
slide(b1, '-250px');
slide(b2, '250px', function() {
b1.css('z-index', '0');
b2.css('z-index', '1');
slide(b2, '50px');
});
}
});
Check it out in action here: https://jsfiddle.net/86sr3okk/6/
Welcome to the wonderful world of JavaScript.

Jquery toggleClass toggle's class but doesn't run animation more than once

The problem is that I have a certain link that I want to pull the div upward over the screen if clicked but to be able to be clicked and pulled back down. Problem is, it only does it once and then no more. I check in Chrome's style checker and the class toggles on and off as expected, but it refuses to run the animation I'm lost
Here's a short code example:
$('#gallL a').unbind('click');
$('#gallL').click(function(){
var $this = $(this);
$this.toggleClass('hlinks hlinksClicked');
if($this.hasClass('hlinksClicked')) {
$(foot).animate({
'bottom': $(window).height()-60}, 900, 'easeOutBounce');
} else {
$(foot).css({'top': '0px'});
$(foot).animate({
'top': $(window).height()-60}, 900, 'easeOutBounce');
}
});
seems simple enough but no go :-(
You're animating one time using the bottom value and other time using the top value.

animated scroll is very buggy

So I've been trying to figure this out for awhile and can't seem to get it.
I use a navigation consisting of circles (see website below) and when the user clicks on one, it forwards him/her to the corresponding slide.
When you click around, it will sometimes slide all the way back to the beginning of the window (margin-left = 0). If it doesn't do it at first, just click around for a second or two and you'll eventually see it.
http://dan.stargroupdev.com/
Here's the code that's buggy:
$("#footer-slidenav .links a").click(function () {
// Get nav index
var slidenum = $(this).attr("id").slice(3);
// Setup slide selector with string to avoid issues
var slidetext = ".slide:eq(" + slidenum + ")";
slidenum = $(slidetext).offset().left;
console.log("Top: " + slidenum);
var offset2 = 0;
// Find window offset to center slide if screen is bigger than 1000px (size of one slide)
if (($(window).width() - 1000) / 2 > 0) {
offset2 = ($(window).width() - 1000) / 2;
}
// Slide window to slide # that was clicked
$("html:not(:animated), body:not(:animated)").animate({
scrollLeft: slidenum
}, 1000, function () {
console.log("Middle: " + slidenum);
// Callback to center slide and give a nice little animated touch
slidenum = $(slidetext).offset().left;
console.log("Bottom: " + slidenum);
$("html:not(:animated), body:not(:animated)").animate({
scrollLeft: (slidenum - offset2)
}, "fast");
});
return false;
});
I tried things like $("html:not(:animated), body:not(:animated)") along with a few other similar possible solutions, but the bug is still there.
Any advice would be great and I'm more than happy to entertain any ideas you guys might have.
Thanks.
Turns out I had a leftover piece of code in another JS file. Sorry for wasting your time guys, that's why it was getting messed up.
I appreciate your answers though.
Ill propose an entirely new solution(mostly new)
$("#footer-slidenav .links a").click(function () {
var slidenum = $(this).attr("id").slice(3);
var slidetext = ".slide:eq(" + slidenum + ")";
offset = $(slidetext).position().left;
console.log(offset );
$("body").animate({
scrollLeft: offset
});
});
Could you give it a try?
my suggestion is to test the site without the class front on body. The script http://dan.stargroupdev.com/sites/all/themes/starsite/js/starsite.js use this class with result to create the unwanted behavior I think. If I remove it with firebug it works ok for me. Check it and give feedback to see if this is true.
First of all can I suggest Arial Flesler's scrollTo plugin? It's awesome and works like a charm.
You can use offsets to center the final position.
If you want some kind of easing then you can use them to make the animation look more natural. What about an elastic animation?
I've been using this plugin for over one year, without finding any problem.
Also, remember to .stop() the scrolled/animated element.

Categories

Resources