StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POJavaScript / Paginating Divs
text
Body
copied!<p>I am battling with a situation and figured I'd post the problem here to see if someone can figure out where I am going wrong.</p> <p>The idea behind what I am doing is as follows:</p> <p>I have a page (this is actually and iPad application) that allows to the user to scroll left and right moving forward and backward. Each time the user swipes left (moving forward) we want to show them a new 768px page (width). Being that each div is 768 pixles in width and that we can have 50+ divs the idea behind it was to remove the leading page.</p> <p>So at all times I have 4 divs on the screen, only 1 div at a time will show. So at startup we have something like below.</p> <pre><code><content> <div id='wrapper_1'>content</div> <div id='wrapper_2'>content</div> <div id='wrapper_3'>content</div> <div id='wrapper_4'>content</div> </content> </code></pre> <p>When the user swipes right I want to remove wrapper_1, add wrapper_5 and basically have everything re position properly. </p> <p>The problem that I am having is each time I remove the leading div my content div obviously changes width and I lose the page I am looking at. So the obvious "fix" in my mind was to reposition content taking into account for the div I just removed.</p> <p>However I am battling with the jquery offset method. Either I am using this incorrectly, or I am overlooking something. </p> <pre><code> $('#wrapper_'+this.pageArray[0]).remove(); this.pageArray.shift(); var n = pageIndex - 1; var t = 768 * n; $("#content").offset({ left: t}) </code></pre> <p>I am keeping track of what divs are on the page by storing the in an array. Each time I add a page I basically do a remove() on the div and then a shift on the array. Now the problem is the offset doesn't work the way I had expected it to. Basically it doesn't appear that the left values give me an absolute x position. </p> <p>Firstly, does this approach seem correct? Secondly is my understanding / implementation of offset incorrect? </p> <p>Edit:</p> <p>For anyone following the thread, it seems my biggest problem was how I was handling the gesturing. It appears there were some event conflicts, using a gesturing library certainly seems to have cleared up a lot of the confusion on my end.</p> <p>Below is my updated code, which is seems to be working well. Feel free to critique the approach.</p> <pre><code> <html> <head> <style> .wrapper{ height: 200px; width: 600px; overflow: hidden; } .button_wrapper{ width: 600px; } #content{ background-color: #F00; height: 200px; width: 3000px; } .page{ width: 200px; height: 200px; float: left; background-color: #FF0; } #wrapNext{ width: 100px; height: 20px; background-color: #FF0000; float: right; cursor: pointer; } #wrapPrev{ width: 100px; height: 20px; background-color: #FF0000; float: left; cursor: pointer; } .site_wrap > .slides_wrap { margin-bottom: 1em; margin-left: -8px; margin-right: -8px; } .img_slides_wrap { width: 784px; border: 8px solid #333333; background-color: #444444; overflow: hidden; } .img_slide { padding: 0; } .js .img_slide { /* Overide template's height transitions. */ width: 100%; height: auto; } .slide_buttons_index { text-align: center; } .notransition, .notransition .slide { -webkit-transition-duration: 0 !important; -moz-transition-duration: 0 !important; -ms-transition-duration: 0 !important; transition-duration: 0 !important; -webkit-transition-delay: 0 !important; -moz-transition-delay: 0 !important; -ms-transition-delay: 0 !important; transition-delay: 0 !important; } @media screen and (max-width: 640px) { .img_slides_wrap { width: 100%; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; -ms-box-sizing: content-box; box-sizing: content-box; } } </style> </head> <body> <div class='wrapper'> <div id='content' class='img_slides_wrap slides_wrap wrap'> <div id='page0' class='page'>Page 0</div> <div id='page1' class='page'>Page 1</div> <div id='page2' class='page'>Page 2</div> <div id='page3' class='page'>Page 3</div> </div> </div> <div class='button_wrapper'> <div id='wrapPrev'> <div id="prev">Previous</div> </div> <div id='wrapNext'> <div id="next">Next</div> </div> </div> </body> <script src="jquery.min.js"></script> <script src="jquery.event.move.js"></script> <script src="jquery.event.swipe.js"></script> <script> $(document).ready(function() { var counter = 4; var selectedPageIndex = 1; var lastKnownX = 0; var articleListLength = 10; // testing $("#next").click(function() { showNext(); }); $("#prev").click(function() { showPrev(); }); function showNext(){ if (counter <= articleListLength + 1){ // first remove the leading div var leadingDiv = $('#page'+(counter - 4)); leadingDiv.animate({ width: '0px' }, 250, function() { $(this).remove(); }); var html = "<div id='page"+counter+"' class='page img_slide slide'>Page "+counter+"</div>"; $('#content').append(html); counter ++; selectedPageIndex ++; } } function showPrev(){ if(counter >= 5){ var target = selectedPageIndex - 1; var leadingDiv = $('#page'+(target)); var newLeadingDiv = $('#page'+(target - 1)); var html = "<div id='page"+(target-1)+"' class='page img_slide slide' style='width:0px'>Page "+(target-1)+"</div>"; $(html).insertBefore('#page'+(selectedPageIndex-1)); $('#page'+(target - 1)).animate({ width: '200px' }, 250, function() { }); var removalTarget = $('#page'+(selectedPageIndex + 2)); removalTarget.remove(); counter --; selectedPageIndex --; } } var wrap = jQuery('.slides_wrap'), width = wrap.width(); $('#content') .on('swipeleft', function(e) { showNext(); }) .on('swiperight', function(e) { showPrev(); }) }); </script> </html> </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