Databases
StackOverflow2013
Postsdbo
POJQuery content slider - best practice?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJQuery content slider - best practice?
    primarykey
    data
    text
    <p>I want to create a website that’s basically a giant content slider, on page load you’d see div 1 (essentially the whole screen) and then you can click the down arrow to go to page 2 etc, when you get to page 2 I also want to be able to go left and right (only on page 2), think of it as an image slider but with divs.. </p> <p>I know there are plugins available but I quite fancy writing it myself, I’ve written some (basic) JQuery which does work but It seems too bloated and I wanted a better/more efficient way of doing it.. what I'm after is how the best way to approach this is, I'm not looking for code as I want to learn and get better but can't think of the best way to tackle this, is it possible to use some kind of switch statement? how would you go about doing it?</p> <p>I'll also need someway of making sure you can't scroll past the number of divs, I'm currently using a var with if statements but feel there must be a way to combine everyone into a simple function?</p> <p>JS is below and there's also a JSFiddle </p> <p>Thanks! </p> <p><a href="http://jsfiddle.net/W4SVz/">http://jsfiddle.net/W4SVz/</a></p> <pre><code>$(function () { var box = $('.box'); TriggerClick = 0; $("#down").click(function(){ var height = $('.box').outerHeight(); if(TriggerClick == 0){ TriggerClick = 1; $(box).stop().animate({top:'-='+height}, 500); }else if(TriggerClick == 1){ TriggerClick = 2; $(box).stop().animate({top:'-='+height}, 500); } }); $("#up").click(function(){ var height = $('.box').outerHeight(); if(TriggerClick == 2){ TriggerClick = 1; $(box).stop().animate({top:'+='+height}, 500); }else if(TriggerClick == 1){ TriggerClick = 0; $(box).stop().animate({top:'+='+height}, 500); } }); $("#left").click(function(){ var height = $('.box').outerHeight(); if(TriggerClick == 1){ $(box).stop().animate({left:'-='+height}, 500); } }); $("#right").click(function(){ var height = $('.box').outerHeight(); if(TriggerClick == 1){ $(box).stop().animate({left:'+='+height}, 500); } }); }); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USwoolm110
    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. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POJQuery content slider - best practice?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POJQuery content slider - best practice?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POJQuery content slider - best practice?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COGood you try making it yourself :) Take a look at [this page](http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/) There are some good templates to write a plugin/widget. It might help you to get more structure in your project.
      singulars
      1. POJQuery content slider - best practice?
      1. USBrainfeeder
    2. COTry having a look at [Ascensor](http://kirkas.ch/ascensor/), it seems to be working pretty well. Good luck with your slider!
      singulars
      1. POJQuery content slider - best practice?
      1. USPHearst
 

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