I'm trying to make a nav that scrolls to a corresponding <div> for my site. The corresponding divs are nested inside another div with a max-height and scrollbar. That's when my jquery tends to fail me.
He's a fiddle from another question that I related to my problem: JSFIDDLE
Notice when you click the button, it doesn't scroll to the correct div, and it scrolls to an awkward position when clicked again.
How do I get it to scroll to the correct div and not strangely scroll back when it is clicked again? Thanks!
$(".third").offset().top) alternates coordinates between 1108 and 0 when clicked. These are the correct positions of .third before each click. You have to take into account the current scroll position and the position of the .first div.
Replace the scrollTop line of code with the following:
scrollTop: $(".third").position().top - $('div.nest').position().top + $('div.nest').scrollTop()},
http://jsfiddle.net/pyL62v58/3/
The Code works, it seems to be a padding/margin issue.
Just add this line in the css, and it should work:
* {paddin:0;margin:0}
/* tested on Chrome 39+ on Win7 */
here the Updated fiddle
Why it jumps up again, is hopefully clear. Documentation to the "offset" function can be found here: jQuery-Doc
Related
Here's the deal. I have a small div who is position: absolute;. I'm using stickyfloat plugin to make it scroll ONLY within the <section class="software-content"></section>, like the demo they show on the github page. However this absolutely positioned div, where the menu is, instead of scrolling with the browser, it instead scrolls ALL the way to the top. I have no idea why it is having this behaviour. Here's a fiddle demonstrating it:
http://jsfiddle.net/yisera/19amn27z/1/
Note: Summary the above fiddle for some reason, does not emulate the behaviour. The div.store-menu element should scroll within the section.softwate-content element and stop as the user scrolls down into the div.prefooter element.
Can anyone figure out what the problem is?
Try that way:
$(document).ready(function(){
t = function(){$('.scroll-store-menu').stickyfloat({duration: 400, lockBottom: true});}
setTimeout(t, 50);
});
http://jsfiddle.net/19amn27z/2/
I have a scrolling div with a visible width that's half of the content. (The actual content is double the width.)
I just want a simple javascript utilizing jquery (serialscroll plugin is really too much) to trigger the scroll to slide into view the next half of the content, then click again the slide it back. (the amount of the sliding is a static #)
I've got a jsfiddle with what I have so far. The initial slide left works, but the slide back does not and then it stops working altogether after that.
http://jsfiddle.net/w7Uvj/1/
Use left alone (or right alone) instead of left and right fiddle
Change your second function to:
$('.back').click(function() {
$('#maincol').animate({
'right':'-=400px'},750);
$(this).fadeOut(500);
$('.next').delay(600).fadeIn(500);
});
jsFiddle example.
You can also set the right property to just 0px as well (instead of -=400px).
I am trying to have an advertisement block/div that will be switched to a fixed position once you scroll down the page.
Here is a demo of what I am trying to do and the code I am using to do it with...
http://jsfiddle.net/jasondavis/6vpA7/3/embedded/result/
In the demo it works perfectly how I am wanting it to be, however when I implement it on my live site, http://goo.gl/zuaZx it works but when you scroll down the div flickers in and out of view on each scroll or down key press. On my site to see the problem live it is the block on the right sidebar that says "Recommended Books"
Here is the code I am using...
$(document).ready( function() {
$(window).scroll( function() {
if ($(window).scrollTop() > $('#social-container').offset().top)
$('#social').addClass('floating');
else
$('#social').removeClass('floating');
} );
} );
css
#social.floating {
position: fixed;
top: 0;
}
My demo jsfiddle where it works correctly
http://jsfiddle.net/jasondavis/6vpA7/3/
The only thing different on my live site is the div/id name is different. As you can see it is somewhat working on my live site except the flickering in and out of view as you scroll down the page.
Anyone have any ideas why this would happen on my live site and not on my jsfiddle demo?
You'll notice that in the example code, and your jsFiddle, your inner div (#social, #text-2 etc) have a wrapper/container div which is where the scrollTop() test is performed. On your live code, you've ommited this wrapper, and you are both checking the scrollTop() AND setting the floating class on the same element (#text-2). So every time you scroll, it swaps between the classes, because the scrollTop() conditional keeps checking the same element. You need to wrap #text-2 in another div and perform the conditional on that, just like in your examples.
Also, #text-2 is an li element yet has no parent ul. You should either give it a parent ul or change it to a div, otherwise it's invalid HTML.
I've been looking around for answers and everything I apply to my own code doesn't seem to work. I have a DIV with content. When I click on a link the DIV fades out, the content changes via the jQuery .html event and then the DIV fades back in. This gives the illusion of a gentle page change on my site. This DIV has a jScrollPane which works fine before any links are pressed.
What is happening however is that the scroll pane 'draggable area' stays the same size when the content is re-written and there is more or less, or even if there is no need for one at all.
I need to get the scroll pane 'draggable area' to change size in relation to the new content and I need it to scroll back to the top inbetween the .fadeTo fade out and in effect.
I've tried some of the following:
function showhome() {
$('#infohome').stop(true,true).fadeTo(100,0)
$('#infohome').delay(100).html("NEW CONTENT")
$('#infohome').stop(true,true).delay(200).fadeTo(100,1)
refreshNav();
function refreshNav() {
var element = $('.scroll-pane').jScrollPane({scrollToY(0, animate)});
var api = element.data('jsp');
}
As well as:
myJScrollPane.getVerticalScrollbar().setValue(int Pos);
and a few others.
As always, any help would be greatly appreciated.
I have a div inside a main div having following properties:
#inner {
width:149px;
overflow:auto; //Note this
margin:35px 0 0 0;
height:575px;
display:none;
}
on main div I am calling two functions on two events (onmouseover & onmouseout). On mouseover inner div displays with scrollbars. It seems whenever the mouse is moved off the scrollbar into the DIV after it being scrolled down, the DIV returns to the top.
You can find the code here: [a link] http://www.designworks.com.pk/example/
Please test in IE & chrome when we scroll down the DIV returns to the top. Please help me to solve this issue.
I don't have time to fully investigate it at the moment, but I believe it is caused by one of the strange behaviors of mouseover/mouseout that occur with child elements.
If jquery is an option, using hover deals with a lot of these issues and seems to fix your problem:
http://jsfiddle.net/ZJBXX/13/
EDIT: Note this is working off of the fiddle posted in the comments and may not be exactly the same as your current code.