StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POjquery: adding nav list to sliding divs
text
Body
copied!<p>Hello — First and foremost I'm fairly new to jquery so your extended expertise is greatly appreciated.</p> <p>DEMO: <a href="http://www.transcendspace.com/beta/" rel="nofollow">http://www.transcendspace.com/beta/</a></p> <p>I'd like to generate a nav for my divs: 1|2|3|4|5 etc. that would highlight the number depending on which div is active. Ideally the highlight would work in combination with my left/right arrows.</p> <p>CODE: `</p> <p></p> <pre><code>$(document).ready(function() { $(window).resize(function () { resizePanel(); }); }); function resizePanel() { width = $(window).width(); height = $(window).height(); mask_width = width * $('.item').length; $('#debug').html(width + ' ' + height + ' ' + mask_width); $('#wrapper, .item').css({width: width, height: height}); $('#mask').css({width: mask_width, height: height}); $('#wrapper').scrollTo($('a.selected').attr('href'), 0); } function scrollToPosition(element) { if (element !== undefined) { $("#wrapper").scrollTo(element, 800, {}); } } $(function() { //Create an Array of posts var posts = $('.item'); var position = 0; //Start Position var next = $('#next'); var prev = $('#prev').hide(); //Better performance to use Id selectors than class selectors next.click(function(evt) { //Scroll to next position prev.show(); scrollToPosition(posts[position += 1]); if (position === posts.length - 1) { next.hide(); } }); prev.click(function(evt) { //Scroll to prev position next.show(); scrollToPosition(posts[position -= 1]); if (position === 0) { prev.hide(); } }); }); </script>' </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload