We Keep Coding

If element is scrolled on data-attribute then

I have two headers (menu1 - default, menu2 - display:none).
In sections of website I added special attribute (data-ix="change-header").
I want to have the effect.. that if I will scroll site and if we scrolled on section where data-ix="change-header" then header will be other - so menu1 will be display:none and menu2 will be display:block;
I have something like that, but I don't know how I can use scroll.
if ($(this).attr("data-ix") == "change-header"){
$("‪#‎menu1‬").css("display","none");
$("‪#‎menu2‬").css("display","block");
} else {
$("#menu1").css("display","block");
$("#menu2").css("display","none");
}
My html looks like that:
<header id="menu1"></header>
<header id="menu2"></header>
<div class="test" data-ix="change-header"></div>
<div class="test"></div>
<div class="test" data-ix="change-header"></div>
<div class="test" data-ix="change-header"></div>
<div class="test" data-ix="change-header"></div>
<div class="test"></div>
<footer></footer>
Help :)

You can take a look at this: http://janpaepke.github.io/ScrollMagic/
It's only 6Kb gzipped, and it lets you animate elements or toggle CSS classes based on scroll position :)

You can compute the threshold values at which you will change header (or not). Something like this
var thresholds = [];
$('.test').each(function(i, e) {
// after we scroll past the top coordinate of this element,
// either show or hide the second header, based on the presence
// of the data-ix attribute
thresholds.push([e.offsetTop, $(e).data('ix') === 'change-header']);
});
Then, consult these thresholds on every scroll event
// cache menu elements
var $menu1 = $('#menu1'), $menu2 = $('#menu2');
// update header once, and listen on scroll
update();
$(window).on('scroll', update);
function update() {
// pick first visible threshold
var scrollTop = $(this).scrollTop(), thresh;
for (var i = 0, len = thresholds.length; i < len; ++i) {
thresh = thresholds[i];
if (thresh[0] >= scrollTop) break;
}
// update header as necessary
if (thresh[1]) {
$menu1.hide();
$menu2.show();
} else {
$menu2.hide();
$menu1.show();
}
}
Here is a working Plunker.

Bootstrap 3.1.0: affix too long

I am using Bootstrap 3.1.0. When an "affix" gets too long for the viewport, it gets cut off, never showing bottom items.
Is there a possibility to have Bootstrap's affix behave in a way that it is still possible for the user to scroll the complete affix from top to bottom?
Problematic example:
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="list-group" id="sidebar">
Long
list
with
many
entries
...
29. Last
</div>
</div>
<div class="col-md-9">
... regular content
</div>
</div>
</div>
I hope my jsFiddle exemplifies this problem.

I hope it can help you :
Just add an overflow-y
Jsfiddle : http://jsfiddle.net/Ja3XT/1/
Added Css :
#sidebar{
max-height: 100%;
overflow-y: auto;
}
UPDATE AFTER COMMENT:
fiddle : http://jsfiddle.net/F4FZL/1/
JS :
$('#sidebar').affix({
offset: {
top:100,
bottom:0
}
});
$('#sidebar').on('affixed.bs.affix', function(){
$(this).removeAttr('style');
});

I had the same issue. I spent a few hours and finnaly I wrote the following solution:
$('#sidebar').on('affix.bs.affix', function (e) {
var $this = $(this),
affix = $this.data('bs.affix'),
offset = affix.options.offset,
offsetBottom = offset.bottom;
if (typeof offset != 'object') {
offsetBottom = offset;
}
if (typeof offsetBottom == 'function') {
offsetBottom = offset.bottom($this);
}
if ($this.outerHeight() + $this.offset().top + offsetBottom === Math.max($(document).height(), $(document.body).height())) {
e.preventDefault();
}
});
You can see code at http://jsfiddle.net/F4FZL/10/ and play with demo at https://jsfiddle.net/F4FZL/10/embedded/result/.
Hope this information will be helpful.

In my case I had a really long sidebar on the left side which i wanted to be scrollable at anytime.
For me the solution was even easier than the aforementioned solutions:
$('[data-spy="affix"]').on('affix.bs.affix', function (e) {
e.preventDefault();
return;
});

Multiple ID in getElementById

I've found a great tutorial to detach a navigation from the page to keep it static when you scroll using Javascript (http://code.stephenmorley.org/javascript/detachable-navigation/).
However, I'd like to implement this on more than one nav div.
I assume it's adding another class name to document.getElementById('navigation').className but I can't get the right syntax
Here is the code:
/* Handles the page being scrolled by ensuring the navigation is always in
* view.*/
function handleScroll(){
// check that this is a relatively modern browser
if (window.XMLHttpRequest){
// determine the distance scrolled down the page
var offset = window.pageYOffset
? window.pageYOffset
: document.documentElement.scrollTop;
// set the appropriate class on the navigation
document.getElementById('navigation').className =
(offset > 104 ? 'fixed' : '');
}
}
// add the scroll event listener
if (window.addEventListener){
window.addEventListener('scroll', handleScroll, false);
}else{
window.attachEvent('onscroll', handleScroll);
}

You will have to call getElementById() for each ID. The Method is only designed to get exactly one element (or zero, if the ID isn't found).
Assuming, you have two navigation divs, left and right, like this:
<div id="navigationLeft">
<ul>
<!-- Navigation entries -->
</ul>
</div>
<!-- Maybe some content or whatever? -->
<div id="navigationRight">
<ul>
<!-- Navigation entries -->
</ul>
</div>
Then your Javascript line in question would look like this:
// set the appropriate class on the navigation
document.getElementById('navigationLeft').className = (offset > 104 ? 'fixed' : '');
document.getElementById('navigationRight').className = (offset > 104 ? 'fixed' : '');
// or, shorter but less readable (i think)
document.getElementById('navigationLeft').className
= document.getElementById('navigationRight').className
= (offset > 104 ? 'fixed' : '');
If this does not yet answer your question, please feel free to add some relevant HTML-Code to your question.
[Update: Example]

This is not recommended you should replace id with classes and use that in a loop to set the value:
HTML:
<div class="navigation">
<p>test 1</p>
</div>
<div class="navigation">
<p>test 2</p>
</div>
Javascript:
divs = document.getElementsByClassName('navigation');
for(i = 0; i < divs.length; i++) {
var div = divs[i];
var divClassName = div.className;
if(divClassName.indexOf('fixed') != -1 && offset > 104) {
divClassName.replace(' fixed','');
} else {
divClassName += ' fixed';
}
}
I think that will do the trick :-)
Greetings!
Gonzalo G.

you shouldnt have multiple items on a page with the same ID, ID's are meant to be unique...if you want to capture multiple items you should use:
<div class="navigation"></div>
var nodes = document.getElementsByClassName('navigation')
...if not using jquery, otherwise do something like
var nodes = $('.navigation')
which will get you yor nav bars, then check to see if that node is also "fixed" ( a node can have more than one css class )
(nodes[i].indexOf("navigation") >= 0)
if using jquery, you can use .hasClass('fixed') )
nodes[i].hasClass('fixed')
...your current problem is that it cant add className to navigation because there are two of them and youre not specifying which one you'd like to use.
If you want this to happen in two navigation div's, consider putting them both into one div and call it nav and set a style on it (this depends on your design)

All id's on an element must be unique.
One solution so that you can do a simple change would be to change the CSS file to something like this:
.navigation{
position:absolute;
top:120px;
left:0;
}
.navigationFixed{
position:fixed;
top:16px;
}
And define the Div's vis this:
<div class="navigation">
<!-- your navigation code -->
</div>
And then edit the JavaScript to something along the lines of this:
/* Handles the page being scrolled by ensuring the navigation is always in
* view.
*/
function handleScroll(){
// check that this is a relatively modern browser
if (window.XMLHttpRequest){
divs = document.getElementsByClassName('navigation');
for(i = 0; i < divs.length; i++) {
// determine the distance scrolled down the page
var offset = window.pageYOffset
? window.pageYOffset
: document.documentElement.scrollTop;
divs[i].className =
(offset > 104 ? 'navigationFixed' : 'navigation');
}
}
}
// add the scroll event listener
if (window.addEventListener){
window.addEventListener('scroll', handleScroll, false);
}else{
window.attachEvent('onscroll', handleScroll);
}

Jquery slide down only if not already visible

I have a simple problem using Jquery. I want to display detailed information under menu headings, but the interface isn't so smooth. After a few hours of trying some things out, I've come back to the beginning to see if there is a simple answer
Look at this example
Two problems:
If you mouse over several categories at once to get to the category you want, the animation still runs through all of the other animations instead of stopping the other ones and only animating the one that the mouse is currently hovered over.
If you mouse over a category that is already open, it still runs the animation, but I only want the animation to run if the content is not already visible. Is there a simple if statement that can do this?

$('.content').hide();
var $elms = $('.fruit, .vegetable, .dairy');
$elms.hover(function() {
var $content = $(this).next('.content');
$content.stop(1, 1).slideToggle(400);
});
http://jsfiddle.net/elclanrs/GBkMB/1/
Edit:
To prevent the content from sliding back up you can nest the divs like so:
<div class="fruit">fruit
<div class="content fruit_types">apple<br/>bannana<br/>orange</div>
</div>
<div class="vegetable">vegetable
<div class="content vegetable_types">celery<br/>lettuce<br/>cucumber</div>
</div>
<div class="dairy">dairy
<div class="content dairy_types">milk<br/>cheese<br/>butter</div>
</div>
jQ:
$('.content').hide();
var $elms = $('.fruit, .vegetable, .dairy');
$elms.hover(function() {
var $content = $(this).children('.content'); //<-`children()` not `next()`
$content.stop(1,1).slideToggle(400);
});
Example: http://jsfiddle.net/elclanrs/GBkMB/5/

I've edited your fiddle now to look like this. Should give you an idea of what you want to move forward:
http://jsfiddle.net/GBkMB/4/
$("body").on("hover", ".fruit, .vegetable, .dairy", function(event){
if(event.relatedTarget != $(this).next(".content")[0]){
if(event.type == "mouseenter"){
$('.content').slideUp('slow');
$('.'+$(this).attr("class")+'_types').slideDown('slow');
}else if(event.type == "mouseleave"){
$('.content').slideUp('slow');
}
}
});
$("body").on("mouseleave", ".content", function(event){
if(event.relatedTarget != $(this).prev("div")[0]){
$(this).slideUp('slow');
}
});
or: http://jsfiddle.net/GBkMB/6/ #elclanrs answer ++
$('.content').on("mouseleave", function(event){
if(event.relatedTarget != $(this).prev("div")[0]){
$(this).slideUp('slow');
}
});
var $elms = $('.fruit, .vegetable, .dairy');
$elms.on("hover", function(event) {
var $content = $(this).next('.content');
if(event.relatedTarget != $content[0]){
$content.stop(1,1).slideToggle(400);
}
});

Getting SmoothDivScroll to start at the center of the scrollable area

I'm trying to get jQuery plugin SmoothDivScroll (http://www.smoothdivscroll.com/) to start at the center of its contained content so there are scrollbars to the left and right on load. I'm aware that there's a startAtElementId option, but this doesn't allow me to start at the center.
I've tried calculating the centerpoint and applying it to the appropriate elements, but the left scroll always stops before it's expected to and the right elements float underneath.
Tried using this Js with no luck:
$("div#scroller").smoothDivScroll();
var halfWayDoc = $(document).width() / 2;
var halfWayScrollArea = $("#scroller .scrollableArea").width() /2;
var halfWay = halfWayDoc - halfWayScrollArea;
var scrollArea = $("#scroller .scrollableArea").width();
var scrollAreaAdjust = scrollArea + halfWay;
$("#scroller .item:first-child").css("margin-left",halfWay);
$("#scroller .item:last-child").css("margin-right",halfWay);
$("#scroller .scrollableArea").width(scrollAreaAdjust);
HTML looks like this:
<div id="scroller">
<div class="scrollingHotSpotLeft"></div>
<div class="scrollingHotSpotRight"></div>
<div class="scrollWrapper">
<div class="scrollableArea">
<div class="item">
<img src="assets/images/detail/Erdem-A-W-11-B2-sml.jpg" alt="example"/>
</div>
...
<div class="item">
<img src="assets/images/detail/Erdem-A-W-11-B2-sml.jpg" alt="example"/>
</div>
</div>
</div>
</div>
Any help or pointers are appreciated.
Cheers,
Shaun

Here is the solution that I suggest :-)
// Element for Scroll
var scrollElement = $("div#scroller");
// Enable Smooth Div Scroll
scrollElement.smoothDivScroll();
// Find out Scrollable area's width
var halfWidth = $("div#scroller .scrollableArea").width()/2;
// Force scroller to move to half width :-)
scrollElement.data("scrollWrapper").scrollLeft(halfWidth);
I update the fiddle, so you can take a look at this update one:
http://jsfiddle.net/3A9Zy/
I hope this helps :-)

The basic sample in the site http://www.smoothdivscroll.com/index.html#quickdemo is having the functionality implemented. The animation starts from an image with ID "startAtMe"
$("div#makeMeScrollable").smoothDivScroll({ autoScroll: "onstart",
autoScrollDirection: "backandforth",
autoScrollStep: 1,
autoScrollInterval: 15,
startAtElementId: "startAtMe",
visibleHotSpots: "always" });
. Did you try by specifying an id to the element you want to start with and passing the startAtElementId: "startAtMe" to the smoothDivScroll function?