Stellar.js in RWD - responsive-design

Question

I've been messing around with stellar.js. In my design, the navigation needs to become a select in order to save horizontal space.
I imagine the html would be similar to this :
<select>
<option data-slide="1">Accueil</option>
<option data-slide="2">Services</option>
<option data-slide="3">Réalisations</option>
<option data-slide="4">Contact</option>
</select>
However, I am not sure as to how the .js file should be changed in order to do this. I believe this is where the magic happens, but I am not 100% on this :
slide.waypoint(function (d, e) {
dataslide = c(this).attr("data-slide");
if (e === "down") {
c('.navigation li[data-slide="' + dataslide + '"]').addClass("active").prev().removeClass("active")
} else {
c('.navigation li[data-slide="' + dataslide + '"]').addClass("active").next().removeClass("active")
}
});
Has anyone ever done this ? Thanks !

Answer 1

I can tell by the code you posted that you're following the tutorial published a while a go in Tutsplus, right?
Well, that piece of Javascript code leverages the waypoint plugin to mark as selected the link corresponding to the slide in the viewport (and hence visually enhance it). But since you're going to be using a dropdown list the approach above is useless. To get things done you will need first to ensure that the user is properly scrolled upon changing the selectbox value. This will make the trick (you'd better change the jQuery selector below to ensure this handler does not affect any other input control in the page but the main dropdown nav widget):
$('select').on('change', function() {
var slide = $(this).find(':selected').data('slide');
goToByScroll(dataslide);
});
Ok, and now we need to ensure that the listbox changes its default value as the user performs the scrolling. We will leverage some bits of the code you posted. Something like this will be enough:
slide.waypoint(function (d, e) {
var dataslide = c(this).attr("data-slide");
$('select').prop('selectedIndex', parseInt(dataslide)-1);
});
AS a word of caution, the code above assumes that all aslides have a numeric data-slide value that goes from 1 to n and each listbox index refer to a matching slide with the same index in the page, plus 1, being its sorting order the same as the dataslide it represents.