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.
Related
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);
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/
I am trying to make the elements on my site fly-in and fly-out on scroll.
This is the effect I am looking for.
http://nizoapp.com/
The effect in the nizo site is done with jquery, I think
I have tried many different ways to get this effect working, with Skrollr, scrollorama, and jquery animate and with css transitions etc etc etc
I decided to use css transitions as mad by the "css animation cheat sheet" (google it)
After a lot of effort and some borrowed code, I have got it half working, as in, I can get the elements to fly-in on down scroll, but not to fly back out on up scroll.
This is a jsfiddle with it half working
http://jsfiddle.net/mrcharis/Hjx3Z/4/
The code is......
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));
}
$(window).scroll(function () {
$('.box').each(function (i) {
if (isScrolledIntoView(this)) {
$(this).addClass("slideRight");
}
});
});
// this is the function to check if is scroll down or up, but I cannot get it to trigger the fly in effect,
(function () {
var previousScroll = 0;
$(window).scroll(function () {
var currentScroll = $(this).scrollTop();
if (currentScroll > previousScroll){
// i figure to put the fly-in code here
}
else {
// and the fly-out code here
}
previousScroll = currentScroll;
});
}());
I have tried using another function (code chunk) to check if the scrolling is down or up, but i can't get it working with the existing code.
Any help to get this working would be awesome
Have a nice day
I will post the solution one day, if I can figure it out, sure someone else would like to know
The trick to knowing whether you're scrolling up or down is not to ask. Make it relational by using the top offset of the elements in question. Then it's as easy as > or <, for the most part.
Though if you do want to get the current direction you could always record the last scroll position and compare it with the current one.
var before = 0;
$(window).scroll(function(event){
var now = $(this).scrollTop();
if (now > before){
//on down code
} else {
//on up code
}
before = now;
});
Like the answer here suggests.
I like to trigger the events based on the screen size and the element position in the screen, so it doesn't matter whether it's up or down, it follows the same rules forwards and backwards. That way instead of asking up or down, it just asks if it's scrolling and executes it accordingly.
If you need me to make changes to my fiddle for you, just let me know what you want to happen. I only made the fiddle because of the horrible job they did on the tympanus.net example. You don't make a tutorial to accomplish a simple task 2 pages of js, that's unnecessary and it doesn't provide any instruction other than "hey, you want to do this? Then copy and paste these things I put together that have no clear course of action, and way too much code to digest quickly". Which doesn't help anyone learn.
After some code borrowing from tympanus.net and using the modernizer library I came up with this.
I tried different approaches as well but all of them turned out to have some flaws in them so I find best approach to be using the sample code and the already provided modernizer JS library.
I have this javascript code that scrolls a div depending on the mouse position.
Ive got the code working, the problem is its a bit jittery. I was wondering if anybody could give me advice on how to optimise it so it runs smoothly!
To view the code please visit my jsfiddle:
http://jsfiddle.net/ENhwT/3/
I realised i was going WELL too far with this, and the solution was easy.
You calculate the new scroll position based on the EXACT mouse Position... Code Follows:
$(window).load(function(){
var container = $("#PortfolioReel");
var elem = $("#PortfolioReel div");
var max_pos = container.width();
var max_scroll = elem.width() - max_pos;
var differential = max_scroll / max_pos;
$("#PortfolioReel").mousemove(function(e){
var pos = (e.pageX - this.offsetLeft) + 1;
var scr = Math.round(pos * differential);
container.scrollLeft(scr);
});
});
You set the position in fixed large steps, so it's 'jumping'. You have to iterate in smaller steps until you reach the target position.
You shouldn't use six fixed position values, but calculate new values in timesteps.
You could use something like this to make a smoother transition:
http://api.jquery.com/animate/
Sample
Something like this should be working:
elem.animate({
scrollLeft: current + 25
}, 500, function() {
// Animation complete.
});
Im trying to create a custom horizontal accordion style showcase. In terms of actual functionality, i have the framework (which can be seen here):
http://www.jsfiddle.net/adrianjacob/UdUus/
However my main bug bear (and the clients) is that if you look at the right hand side, there is always slight movement/flickering as the widths animate up and down.
Ideally I want it to appear smooth so only the opening/closing lists have movement.
ANy advice would be much appreciated.
A.
Use the animate function's step (it's not well documented)... I've updated the demo
var panels = $('#promo li');
panels.hoverIntent(
function() {
if (!$(this).is('.expanded') && !panels.is(':animated')) {
$(this).animate({
width: 200
}, {
// width is the calculated width, ani is the animation object
step: function(width, ani) {
var w = Math.floor(width);
// use 250 so we end up with 50 as the reduced size
$('.expanded').css('width', (250 - w) + 'px');
$(ani.elem).css('width', (200 - w) + 'px');
},
duration: 500,
complete: function() {
panels.removeClass('expanded');
$(this).addClass('expanded');
}
});
}
}, function() {});
A similar method is used in the Kwicks plugin.
You could try this plugin which may have figured out the bug. The example provided was too showy to actually tell.
Have you played around with jQuery UI easings?
You can also try to stop the event just when the div is opening.
The website with explanation is: http://api.jquery.com/stop/