Databases
StackOverflow2013
Postsdbo
POMVC 4 Mobile Site - Creating a Next/Previous button for a set of sliding panels
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMVC 4 Mobile Site - Creating a Next/Previous button for a set of sliding panels
    primarykey
    data
    text
    <p>I have a fairly simple script for a set of sliding panels on a mobile loan application website. The panels display different insurance packages available to the user based on user info like age, joint or individual app, and (for car loans) GAP insurance selection.</p> <p>The sliding works fine for us, but we want to add arrow buttons that also perform the slide function for the user. These buttons are to alert the user that more options lie to the left or right directions, and clicking on these buttons will perform the slide in that direction just like the user's finger motion would. This is what I don't know how to add and would like some guidance on how to create them with our current scripts/css if anyone has a suggestion. I'm not trying to navigate to a new page or anything, I just want the slide function to also be triggered by the buttons.</p> <p>The current behavior allows the user to slide to the right through all the packages (1 to 4 depending on the criteria above). And they can slide back to the left if there are packages that they've already slid past.</p> <p>The javascript for the sliding:</p> <pre><code>$(function () { var sliding = startClientX = startPixelOffset = pixelOffset = currentSlide = 0, slideCount = $('.slide').length; $('html').live('mousedown touchstart', slideStart); $('html').live('mouseup touchend', slideEnd); $('html').live('mousemove touchmove', slide); function slideStart(event) { if (event.originalEvent.touches) event = event.originalEvent.touches[0]; if (sliding == 0) { sliding = 1; startClientX = event.clientX; } } function slide(event) { event.preventDefault(); if (event.originalEvent.touches) event = event.originalEvent.touches[0]; var deltaSlide = event.clientX - startClientX; if (sliding == 1 &amp;&amp; deltaSlide != 0) { sliding = 2; startPixelOffset = pixelOffset; } if (sliding == 2) { var touchPixelRatio = 1; if ((currentSlide == 0 &amp;&amp; event.clientX &gt; startClientX) || (currentSlide == slideCount - 1 &amp;&amp; event.clientX &lt; startClientX)) touchPixelRatio = 2; pixelOffset = startPixelOffset + deltaSlide / touchPixelRatio; $('#slides').css('-webkit-transform', 'translate3d(' + pixelOffset + 'px,0,0)').removeClass(); } } function slideEnd(event) { if (sliding == 2) { sliding = 0; currentSlide = pixelOffset &lt; startPixelOffset ? currentSlide + 1 : currentSlide - 1; currentSlide = Math.min(Math.max(currentSlide, 0), slideCount - 1); pixelOffset = currentSlide * -$('body').width(); $('#temp').remove(); $('&lt;style id="temp"&gt;#slides.animate{-webkit-transform:translate3d(' + pixelOffset + 'px,0,0)}&lt;/style&gt;').appendTo('head'); $('#slides').addClass('animate').css('-webkit-transform', ''); } } }); </code></pre> <p>The CSS:</p> <pre><code>html, body { height: 100%; } body { margin: 0; overflow: hidden; background: #333; } #slides { width: 100%; height: 100%; white-space: nowrap; font-size: 0; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .slide { width: 100%; height:auto; display: inline-block; background-size: cover; } .animate { -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; } .slide:nth-child(1) { margin-left: 0px;} .slide:nth-child(n+2) { margin-left: 20px ;} </code></pre> <p>MVC code, this displays a partial page that creates each of the slide panels. There can be 1-4. Each "slide unselectable" is a rectangle containing a list of pricing.</p> <pre><code>&lt;div id="slides"&gt; @for (int i = 0; i &lt; @Model.Packages.Count; i++) { &lt;div class="slide unselectable"&gt; @Html.OurHiddenFor(model =&gt; @Model.Packages[i].Id) @Html.OurPartial("CalculatePackage", @Model.Packages[i]) &lt;/div&gt; } &lt;/div&gt; </code></pre> <p>Thank you for your time and suggestions!</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. UStereško
    1. UScookiekitty
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. COYou aren't using jQM, are you?
      singulars
      1. POMVC 4 Mobile Site - Creating a Next/Previous button for a set of sliding panels
      1. USOmar
    2. COWe are using jQM, yes.
      singulars
      1. POMVC 4 Mobile Site - Creating a Next/Previous button for a set of sliding panels
      1. UScookiekitty
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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