Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy does this JavaScript code conflict alongside other JavaScript plugins?
    text
    copied!<p>My code is a website counter (<code>counter.php</code>). It works perfectly when run directly, meaning each time you refresh the page the counter increments starting from <code>5754</code>; however, when the <code>counter.php</code> is included in another page containing other jQuery plugins, it stops working. The counter is static then; it will show <code>5754</code> all the time. </p> <p>Please help me and clarify where I am going wrong.</p> <p>This section is where the incrementation (counting of the visitors) takes place:</p> <pre><code>&lt;?php session_start(); if(isset($_SESSION['executed'])) $_SESSION['executed'] = $_SESSION['executed']+ 1; else $_SESSION['executed'] = 5754; ?&gt; </code></pre> <p>The page itself, which is self explanatory: </p> <pre><code>&lt;head&gt; &lt;script src="counter/js/jquery-1.7.1.j"&gt; type="text/javascript"&gt;&lt;/script&gt; </code></pre> <p>Where the counter leaves:</p> <pre><code>&lt;div class="counter-wrap"&gt; &lt;div class="counter-number"&gt; &amp;nbsp; &lt;/div&gt; &lt;/div&gt; &lt;div&gt; </code></pre> <p>An inline CSS:</p> <pre><code>&lt;style&gt; .counter-wrap { height:18px; overflow:hidden; } .counter-number { height:198px; width:12px; position:relative; background-image:url(http://developer.mindtouch.com/@api/deki/files/4548/=counter_ticker_bg.gif); float:left; } &lt;/style&gt; </code></pre> <p>And now the jQuery code:</p> <pre><code>&lt;script type="text/javascript"&gt; $(".counter-number").each( function(i) { $(this).attr('id','num'+i); }); function loadinput() { var newval = $("#numgo").val(); loadticker(newval); } function loadticker(ticnum) { var fticnum = add_commas(ticnum); var numheight=18; addticker(fticnum); if (ticnum &amp;&amp; ticnum != 0) { var s = String(fticnum); for (i=s.length;i&gt;=0; i--) { var onum=s.charAt(i); $("#num"+i).attr('value',onum); } $(".counter-number").each( function() { var nval=$(this).attr("value"); if (!isNaN(nval)) { var nheight = Number(nval)*numheight*-1; $(this).animate({ top: nheight+'px'}, 1500 ); } if (nval==','){ $(this).animate({ top: '-180px'}, 1500 ); } }); } } function addticker(newnum) { var digitcnt = $(".counter-number").size(); var nnum = String(newnum).length; var digitdiff = Number(nnum - Number(digitcnt)); if (digitdiff &lt;0) { var ltdig = (Number(nnum)-1); $(".counter-number:gt(" + ltdig + ")").remove(); } for(i=1;i&lt;=digitdiff;i++) { $(".counter-wrap").append('&lt;div class="counter-number" id="num' + (Number(digitcnt+i-1)) + '"&gt;&amp;nbsp;&lt;/div&gt;'); } } function add_commas(nStr) { nStr += ''; x = nStr.split('.'); x1 = x[0]; x2 = x.length &gt; 1 ? '.' + x[1] : ''; var rgx = /(\d+)(\d{3})/; while (rgx.test(x1)) { x1 = x1.replace(rgx, '$1' + ',' + '$2'); } return x1 + x2; } &lt;/script&gt; &lt;/head&gt; </code></pre> <p>Here is where the function is called:</p> <pre><code>&lt;body onload="loadticker( '&lt;?php echo $_SESSION['executed']; ?&gt;' ) "&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance

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