Databases
StackOverflow2013
Postsdbo
POBugged arrow keys navigation with scrollTop
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBugged arrow keys navigation with scrollTop
    primarykey
    data
    text
    <p>First of all I'm new to JavaScript/jQuery and English isn't my mother tongue.</p> <p>In this case I can't use anything more than jQuery/JavaScript (I mean no other plugin/library, anything that I haven't coded myself).</p> <p>I wanna make a website with arrow keys navigation, using overflow:hidden on my body, and scrollTop.</p> <h1>Here is what I already have :</h1> <pre><code>&lt;div id="slide1"&gt; &lt;div id="states"&gt; &lt;div id="selector"&gt;&lt;/div&gt; &lt;div id="state1"&gt;&lt;p&gt;INTRO&lt;/p&gt;&lt;/div&gt; &lt;div id="state2"&gt;&lt;p&gt;STAGE 1&lt;/p&gt;&lt;/div&gt; &lt;div id="state3"&gt;&lt;p&gt;STAGE 2&lt;/p&gt;&lt;/div&gt; &lt;div id="state4"&gt;&lt;p&gt;STAGE 3&lt;/p&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="slide2"&gt; &lt;/div&gt; &lt;div id="slide3"&gt; &lt;/div&gt; &lt;div id="slide4"&gt; &lt;/div&gt; </code></pre> <p>As i named it a bit randomly, i'll have to explain : - slide1 is my first "state" or "screen". It's a big container where I put informations about how to navigate through the website, as it's the first thing the user will see, we directly land on that state. - slide 2, 3, 4 : other big blocks will see if they navigate through the website, step by step. - state 1, 2, 3, 4 are buttons at the top of the document (position:fixed). By clicking on it, the user can jump to slide 1, 2, 3 or 4. - selector is only a design thing, if you're on slide x he puts himself on state x, that shows the user where he is in the page.</p> <h1>Now the JQuery part :</h1> <h2>Variables I use :</h2> <pre><code>var pressedKeys = {}; var state = [0,1200,2400,3600]; var slidestate = [0, 25, 50, 75]; var n = 0; </code></pre> <p>var state: contains in an array values I use for my scrollTop (for now each are 1200px height long.) var slidestate : contains in an array values my selector (the thing that shows the user where he is) margin (in %)</p> <h2>Obtaining keyCode :</h2> <pre><code>$(document).keyup(function(e) { if (e.keyCode == 40 || e.keyCode == 39) { n++; if (n&gt;3){n--;} } else if (e.keyCode == 37 || e.keyCode == 38){ n--; if (n&lt;0){n++;} } </code></pre> <p>So n = the state where I am. I don't want it to be &lt; 0 or > 3 that's why I use "if n>3 n--" in that case, as I have only 4 states (and my array start with a 0 index, so 0 1 2 3 = the 4 states I need).</p> <h2>Using var n to scroll (keyboard) :</h2> <pre><code>$("html:not(:animated),body:not(:animated),#basmontagne:not(:animated)").animate({ scrollTop:state[n] },1000); $(" #selector ").animate({left:slidestate[n]+'%'},1000); }); </code></pre> <p>I don't think I have to explain anything here, I use n as the index of my array containing values I need for every state. Animation duration is 1 second.</p> <h2>Using var n to scroll (.click event) :</h2> <pre><code>$("#state1").click(function() { n=0; $("html:not(:animated),body:not(:animated),#basmontagne:not(:animated)").animate({ scrollTop:state[n] },1000); $(" #selector ").animate({left:slidestate[n]+'%'},1000); }); </code></pre> <p>Same as below but with my and an onClick event.</p> <h1>The problem</h1> <p>The code below IS working. But there is some things I'm not able to fix. It all seems laggy, sometimes scrollTop seems to not be working;</p> <blockquote> <p>Case 1 : I'm at the 4th state, I press "down" arrow key once, then press "up" arrow key once. It should jump to state 3, but it doesn't. I have to press "up" once again, and then it jumps to state 2. what the heck?</p> <p>Case 2 : I don't know why but sometimes, when I navigate through the site, the selector moves, but scrollTop doesn't do anything. So my selector goes to state 3 where I'm only on state 1. Again what the heck? It should be the same value of n for scrollTop and selector, I don't get why it's all bugged like this.</p> </blockquote> <p>Anyone got any idea about this ?</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USSpiderone
    1. USSpiderone
    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. VO
      singulars
      1. POBugged arrow keys navigation with scrollTop
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POBugged arrow keys navigation with scrollTop
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    3. VO
      singulars
      1. POBugged arrow keys navigation with scrollTop
      1. This table or related slice is empty.
      1. VTUpMod
    1. COYou might be hitting an issue with the keycode detection, consider having only the `if` statements instead of incrementing and thrn decrementing `n` one after another.
      singulars
      1. POBugged arrow keys navigation with scrollTop
      1. USShafiq Jetha
    2. COIn the first html code snippet you are opening more DIVs than you close.
      singulars
      1. POBugged arrow keys navigation with scrollTop
      1. USAllInOne
    3. CO@AllInOne Yes sorry I'm editing this, that happened when I deleted some content so the code wasn't polluted with useless stuff.
      singulars
      1. POBugged arrow keys navigation with scrollTop
      1. USSpiderone
 

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