Databases
StackOverflow2013
Postsdbo
POVariables in my simple jQuery slider are not working as expected. Could anyone take a look?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POVariables in my simple jQuery slider are not working as expected. Could anyone take a look?
    primarykey
    data
    text
    <p>So, I had need of a very, very simple image slider. Instead of wrestling with a far too capable plugin, I thought I'd just write one.</p> <p>I've put it into a <a href="http://jsfiddle.net/magnakai/7FUBB/" rel="nofollow">fiddle here</a></p> <p>There is a container div 620px wide, and the internal div is 1240px wide. Thus only half of it is in view at any one time, and I just animate the left attribute of the internal div. Foo moves it to the first slide, and Bar Humbug moves it to the second one. This works fine.</p> <p>So, I was asked to add a timer in. So, every five seconds it should go to the other slide, whichever that one is. If you move to the other slide manually, it waits a bit longer before moving by itself again. Being a general programming n00b, I tried to do this with <code>if</code>s and variables, which seemed to make sense to me.</p> <p>However, something in here doesn't work. It happily moves to the second slide, but will never move back by itself. I'm assuming this is something to do with the variables not being read within the various functions, but they do get changed, and the console.logs do report the correct number. So perhaps the <code>if</code>s aren't reading the variables. Frankly, I'm a little lost as to where to move from here. Any help would be greatly appreciated. Thank you.</p> <p>I've added the code below incase the fiddle doesn't work for someone, or incase you prefer to have it inline here.</p> <p>Here's the javascript</p> <pre><code>$(document).ready(function() { var speed = 5000; var timerOn = 0; var slideNumber = 1; console.log(slideNumber) function slideTimer() { if (timerOn = 1) { if (slideNumber=1) { goToSlide2(); console.log(slideNumber) } else if (slideNumber=2) { goToSlide1(); console.log(slideNumber) } }; } function goToSlide2() { $('#slider_arrow').animate({left: '375px'}, 400); $('#slider_content').animate({left: '-620px'}, 400, function(){ slideNumber=2; window.setTimeout(function() { timerOn = 1; }, speed); }); } function goToSlide1() { $('#slider_arrow').animate({left: '75px'}, 400); $('#slider_content').animate({left: '0px'}, 400, function(){ slideNumber=1; window.setTimeout(function() { timerOn = 1; }, speed); }); } $('#isr_title span.slider_button.foo').click(function() { timerOn = 0; goToSlide1(); }); $('#isr_title span.slider_button.bar_humbug').click(function() { timerOn = 0; goToSlide2(); }); window.setInterval( function() { slideTimer(); }, 4000); }); </code></pre> <p>Here's the HTML</p> <pre><code>&lt;div id="main" role="main" class="clearfix"&gt; &lt;div id="branding_section_buttons"&gt; &lt;h1 id="isr_title"&gt;&lt;span class="slider_button foo"&gt;Foo&lt;/span&gt; &lt;span class="slider_button bar_humbug"&gt; Bar Humbug&lt;/span&gt;&lt;/h1&gt; &lt;div id="slider_arrow" class="target_independent"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="slider"&gt; &lt;div id="slider_content" class="clearfix"&gt; &lt;p&gt;Our &lt;span class="highlight"&gt;lorem&lt;/span&gt; ipsum lorem ipsum lorem ipsum lorem ipsum &lt;span class="highlight"&gt;lorem&lt;/span&gt; ipsum &lt;span class="highlight"&gt;lorem&lt;/span&gt; ipsum.&lt;/p&gt; &lt;img src="http://placekitten.com/280/200" alt="" width="280" height="200"&gt; &lt;p style="color: red;"&gt;Our &lt;span class="highlight"&gt;lorem&lt;/span&gt; ipsum lorem ipsum lorem ipsum lorem ipsum &lt;span class="highlight"&gt;lorem&lt;/span&gt; ipsum &lt;span class="highlight"&gt;lorem&lt;/span&gt; ipsum.&lt;/p&gt; &lt;img src="http://placekitten.com/280/200" alt="" width="280" height="200"&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Here's the relevant CSS</p> <pre><code>#slider { position: relative; width: 600px; margin-bottom: 20px; margin-right: 20px; overflow:hidden; height: 200px; } #slider_content { width: 1240px; position: absolute; } #slider_content p, #slider_content img { float: left; width: 300px; } #slider_content p { font-size:182%; line-height: 1.2; font-weight: 300; } #slider_content p span.highlight { font-weight: 700; color: #445daa; } #slider_content img { margin-right: 20px; } #slider_content { width: 1240px; position: absolute; } #slider_content p, #slider_content img { float: left; width: 300px; } #slider_content p { font-size:182%; line-height: 1.2; font-weight: 300; } #slider_content p span.highlight { font-weight: 700; color: #445daa; } #slider_content img { margin-right: 20px; } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USJodi Warren
    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. This table or related slice is empty.
    1. COJust an FYI: a single equal sign is for assigning a value (e.g. var foo = bar). For logical tests you use if(foo == bar). Because you're putting assignments if your "if" statements, they're always returning true.
      singulars
      1. POVariables in my simple jQuery slider are not working as expected. Could anyone take a look?
      1. USKevin Ennis
    2. COI should also mention, for the sake of completeness, that you could also use the strict equality operator "if(foo === bar)". Strict equality matches value AND type. so ('2' == 2) returns true, but ('2' === 2) returns false, because you're comparing a string and an integer.
      singulars
      1. POVariables in my simple jQuery slider are not working as expected. Could anyone take a look?
      1. USKevin Ennis
    3. COThank you for the guidance, especially for the pointer on strict equality operators. I hadn't come across those before and I can see how they'd be very useful.
      singulars
      1. POVariables in my simple jQuery slider are not working as expected. Could anyone take a look?
      1. USJodi Warren
 

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