My problem is that after scrolling in the #leftnav the #leftnavHover does not position itself according to the new top css value. I need the #leftnavHover div to follow in the same way the native title text for the browser does.
Here's a fiddle http://jsfiddle.net/fauverism/b4rwb/6/
Here's a step by step of what I'm describing...
Visit the link and hover over Sabers in the nav
Scroll inside the nav div
Hover over Sabers again and you'll notice that the placement of the Sabers text inside of the #leftnavHover is in the same place. The div placement does not insert the new topAfterScroll array. The array is only present once and it then gets removed with the original value.
Here are some details...
I can't seem to store the array that is retrieved after the scroll from topAfterScroll into a new var
This only has to work in Chrome :)
Yes I know that this does seem strange to do since browsers handle this functionality just fine. It's a Chromium issue.
Just subtract the scrolled pixels using jQuerys scrollTop (API) on #leftnav like this:
$('#leftnavHover').text(this.title).css('top', this.offsetTop - $('#leftnav').scrollTop());
http://jsfiddle.net/b4rwb/7/
Related
So I'm trying to make a double slider in Owl-Carousel 2.0,
The first slider has 9 images, which means it has 9 dots. These dots are in placed in a container, #customdots. I'm trying to make the position of these dots be: horizontally centered (which works), and appear on top of the second slider, so position, bottom should be the height of the second slider (#sync2).
I tried using JQuery to do this, with the following line of code:
$("#customDots").css('bottom', $("#sync2").outerHeight()+ "px");
However, this doesn't get the actual #sync2 height, and it doesn't update on moving the window, neither does using height().
How would I go about making this #customDots div stick to the top of #sync2, when it can't be a child of #sync2?
See full codepen here: http://codepen.io/JJvanSteijn/pen/aJxgdW
I would wrap #sync2 in an element (I created #sync2Container), use that new element to position the second slider at the bottom of the window, and just add the dots to the top of that element. http://codepen.io/mcoker/pen/JWgKxJ
You need to add height to the CSS for #sync2:
#sync2{height:210px}
and use JS code to get the height:
$('#customDots').css('padding-bottom','0px');
$('#customDots').css('bottom',sync2.outerHeight());
Hope it's useful.
I'm new to jQuery and watching a tutorial for a sticky nav bar and something went wrong and idk what to do!
In my Script file I have it so it runs this code on load [http://pastebin.com/XYWR5tKJ][1] and I have a class in css to use with the nav Placeholder wrap.
Well the margin property doesn't seem to be working, if you run the site and scroll the whole way down the nav bar sticks to the side, its supposed to be centered(the margins job). I have no idea why its not doing it, its probably something stupid but please help!`
HERES THE CODE__
Script.js: http://pastebin.com/XYWR5tKJ
Css: http://pastebin.com/Y51rYJVE
HTML: http://pastebin.com/tTftEJKh
__
THANKS!
[1]: http://pastebin.com/tTftEJKh
Basic set up for a fixed, centered element is:
Containing element that is position fixed.
An element within that has margin:0 auto; and a set width.
I'd say that your left:0 inside fixed is counteracting things mostly.
Since you didn't specify responsive is this good enough for you?
http://jsbin.com/nevuqi/4/
Also probably better, as a tip to share code in something like a JSFiddle, Codepen or JSBin to name a few... good for learning inside of too.
This question reminded me of a JSFIDLE I made a while back to learn the same concept. I've updated it with comments to make it more readable...
It doesn't really answer your question but I thought it would help understand the various components involved when implementing the sticky nav effect in JQuery for anyone who comes across this thread who is unsure.
JavaScript/JQuery code:
(refer to jsfiddle for the accompanying html/css )
//window - the container that holds and renders the document.
//document - the rendered html within the window. the document can be bigger than the window as with this example as scrolling is needed..
//refer to css for more info on the appended classes to nav bar and proceeding element.
$(document).ready(function () {
//add a scroll function to the document that
$(document).on('scroll', function () {
//get the number of pixels that the window is from the top of the document. this is zero at first.
var scrollTop = $(this).scrollTop();
//insert the name of your sticky nav element here in place of .scrollFixed
$('.scrollFixed').each(function () {
//scrollFix variable is initialized as .scrollFixed object with all its attributes.
var scrollFix = $(this);
//gets offset of sticky nav element in pixels
var topDistance = scrollFix.offset().top;
var previousElement = scrollFix.prev();
//this is just for debugging and learning purposes.
$('.fixed_info').html('nav bar is ' + topDistance + ' pixels from top of document');
//if you put topDistance here instead of the number manually, the nav bar will flicker.
//unsure why..
//checks to see whether nav element has been scrolled past the top of window.
if ((298) < scrollTop) {
//make sticky nav a fixed element
scrollFix.addClass("stuck");
//extend the element below for this example so proceeding elements don't visually jump up
//when closing the empty gap.
$(".element_below_fixed_nav_bar").addClass("extend");
//indicates element is fixed!
scrollFix.html("Element now fixed!");
//you will have to manually put the topDistance here as well...
//this checks whether the nav element's original top has passed the top of
//the enclosing window.
//it needs to become scrollable again
} else if (298 >= scrollTop && scrollFix.hasClass('stuck')) {
//make sticky nav a scrollable element
scrollFix.removeClass('stuck');
//make proceeding element shorter to compensate for sticky nav pushing elements below it down.
$(".element_below_fixed_nav_bar").removeClass("extend");
//indicates element is scrollable!
scrollFix.html("Element now moveable!");
}
});
});
});
It's very similar to the logic behind the JavaScript code you linked.
find number of pixels of window from top of document. starts at 0 when document first loads unless otherwise coded. This updates every time you scroll.
find (offset) number of pixels of nav bar element from top of document.
check if nav bar has reached the top of the window by checking its offset to the window. If it is then make it fixed.
check whether the nav bar's original offset has fallen below the top of the window. If it has then make the nav bar scrollable.
It doesn't really answer your question but I thought it would help understand the various components involved when implementing the sticky nav effect in JQuery for anyone who comes across this thread who is unsure.
I am working on building a schedule. So far it's pretty straight-forward. There is one bit of functionality I am having issues with.
I have an ul that has a fixed height to allow scrolling. There are "Labels" (li.dayLabel) withing the ul that separate the hours. What I am trying to do is to have it so that when a label is scrolled out of view it will change the text in the placeholder to it's text. Then once that works, I need it to work in reverse. So when they label scrolls back into view it updates the placeholder. Basically, I am trying to make the placeholder be a title for the available items until another label is then scrolled out of view. This is for scrolling from the top. So as you scroll down the list the placeholder is meant to be a title for the section you are viewing until you reach another section and it takes its place. Then when you scroll back down I need it to replace the text with the previous li.dayLabel so the sections stay organized. I hope this makes sense.
You can see what I am trying to do by looking at the original that I am basing this off of. Notice how the placeholder changes as you scroll down the list and changes back when you scroll back up.
Demo: jsFiddle // Note: line 54 is the part that is in question
I originally used:
$(".snlf-schedule-list li.dayLabel:visible:first").text();
as the :first selector is suppose to only match a single element.
I later tried:
$(".snlf-schedule-list li.dayLabel:visible").filter(":eq(0)")
as this is suppose to be the same thing.
It seems that when an element is out of view it still is considered :visible I believe this is my issue.
Am I doing this completely wrong? I was under the impression that when you scroll an element like this it should no longer be :visible. After reading the documentation I have learned that this is not the correct selector to use.
It would appear that scrollTop is how I should be doing this. Now I have used scrollTop for scrolling down pages to disable animations when not in view but I am not clear on how to untilize this for a ul with scrollbars.
I tried:
var _first = $('li.dayLabel:first'); // next element to scroll out of view?
if( $(this).scrollTop() > (_first.offset().top+_first.height())) {
// Out of view
console.log("out");
} else {
// in view
console.log("in");
}
Updated Demo: jsFiddle
But it seems to be redundant as it's already calculating the first element so I am not sure how to get the correct element (the next one that's about to scroll out of view.) Then I need this to work when they scroll back up...
Any insight on this is much appreciated. Hopefully it's something simple I am just over complicating or missing completely.
Thanks,
Jeremy
The solution for my case was:
// Set placeholder text on scroll
var _scrollCagePositionTop = $(".snlf-schedule-list").offset().top;
var _first = $('li.dayLabel:first'); // first dayLabel element
$(".snlf-schedule-list").scroll(function(){
var _lastOffText = $(_first).text();
$("li.dayLabel").each(function() {
if ($(this).offset().top < _scrollCagePositionTop) {
_lastOffText = $(this).text();
}
});
$("#schedule-placeholder").text(_lastOffText);
});
What I did was set the known position of the top of the scroll cage (_scrollCagePositionTop)
When the user scrolls I set a variable _lastOffText that keeps track of the last item text content when scrolled out of view (less offset top than the palceholder). I then set this value to the placeholder.
This method allows me to have the proper text in my placeholder when the user scrolls up or down.
To fix the issue of an empty placeholder when the user scrolls back to the top I just set the default of _lastOffText to be the text of the first label ($(_first).text())
Hope others find this useful.
Here is the working demo: jsFiddle Final
I have a div of fixed dimensions into which some JavaScript functions will be placing text over time. When the amount of text exceeds the height of the box, a scrollbar appears thanks to overflow:scroll.
The new problem is that the view into the div stays at the same place as more content appears. What I mean to say is that it stays scrolled wherever it is as more content appears beneath, hidden unless you manually scroll down. I want to make it automatically scroll to the bottom as new content appears so that the user naturally sees what appeared most recently instead of what's oldest.
Ideas?
You can use scrollTop method after each text addition:
$("div").scrollTop($("div").children().height());
Use inner block to get the true height.
DEMO: http://jsfiddle.net/eyY5k/1/
I found this approach to work for my needs:
var realHeight = $("#history")[0].scrollHeight;
$("#history").scrollTop(realHeight);
Do note this uses jquery.
I modified a version of the iScroll touch scroller. It was modified based on the carousel demo in the sample file when you download the library.
I need to center the text that is displayed when you scroll through each item and when it hits the end of the list it should correctly cycle back to the first item. This is the default behavior.
I got as far as centering the first text item but it only centers the text in the currently selected item and when another item is selected it breaks the text centering, this also breaks the snap back to first element effect when the list is done. I did this by simply adding a margin
margin:0 250px.
A sample of the modded scroller is here: http://jsfiddle.net/egfx/5TswV/2/show/
buggy code: http://jsfiddle.net/5TswV/3/
And the library is here: https://github.com/cubiq/iscroll/tarball/master
my resolution: 1600x1200
I am looking for a stretchable solution that would fit any container and res.
Thanks.
Here is your problem: Your Li's are smaller than your container, if you find a way to make the li's the same width as the container, everything will be aligned correctly.
http://fiddle.jshell.net/5TswV/5/show/
http://fiddle.jshell.net/5TswV/5/
Using jQuery:
$('#scroller li').width($('#wrapper').width());
$(window).resize(function(){$('#scroller li').width($('#wrapper').width())});