Databases
StackOverflow2013
Postsdbo
POdiv sliding effect does not work with jQuery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POdiv sliding effect does not work with jQuery
    text
    copied!<p>I created this question before but in another way and got no answers. So today I wrote some simple code to share my problem in a clear way. </p> <ol> <li>I used <code>jQuery</code> to call an image slideshow function.</li> <li>The AJAX function in <code>show.php</code> will call <code>get.php</code> and print the results in a DIV.</li> </ol> <p>My problem is that sliding (prev - next) inside the DIV supplied by <code>get.php</code> does not work in <code>show.php</code>. But if I call <code>get.php</code> directly in my browser, then it works.</p> <p>I am confused, I guess I have an error in my div when calling AJAX.</p> <p><strong>My Files</strong></p> <p><strong>show.php</strong></p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;test &lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href="demo.css" /&gt; &lt;script type="text/javascript" src="jquery-1.4.2.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="newscript.js"&gt;&lt;/script&gt; &lt;link href="themes/2/js-image-slider.css" rel="stylesheet" type="text/css" /&gt; &lt;script src="themes/2/js-image-slider.js" type="text/javascript"&gt;&lt;/script&gt; &lt;link href="generic.css" rel="stylesheet" type="text/css" /&gt; &lt;/head&gt; &lt;body&gt; &lt;?php include("samiloxide.php"); $sql=mysql_query(" select * from section "); while($r=mysql_fetch_array($sql)){ echo "&lt;li&gt;&lt;a onclick='loadpage($r[id])' &gt;$r[section]&lt;/a&gt;&lt;/li&gt;" ; } ?&gt; &lt;div id="pageContent"&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>newscript.js</strong></p> <pre><code>var section; function loadpage(section){ var section = section.toString(); $.ajax({ type: "POST", url: "get.php", dataType: "script", data: ({section : section}), success: function(html){ $("#pageContent").empty(); $("#pageContent").append(html); } }); } </code></pre> <p><strong>get.php</strong></p> <pre><code>&lt;script type="text/javascript" src="jquery-1.4.2.min.js"&gt;&lt;/script&gt; &lt;style type="text/css"&gt; &lt;!-- #gallery-wrap{margin: 0 auto; overflow: hidden; width: 732px; position: relative;} #gallery{position: relative; left: 0; top: 0;} #gallery li{float: left; margin: 0 20px 15px 0;} #gallery li a img{border: 4px solid #40331b; height: 175px; width: 160px;} #gallery-controls{margin: 0 auto; width: 732px;} #gallery-prev{float: left;} #gallery-next{float: right;} --&gt; &lt;/style&gt; &lt;script type="text/javascript"&gt; &lt;!-- $(document).ready(function(){ // Gallery if(jQuery("#gallery").length){ // Declare variables var totalImages = jQuery("#gallery &gt; li").length, imageWidth = jQuery("#gallery &gt; li:first").outerWidth(true), totalWidth = imageWidth * totalImages, visibleImages = Math.round(jQuery("#gallery-wrap").width() / imageWidth), visibleWidth = visibleImages * imageWidth, stopPosition = (visibleWidth - totalWidth); jQuery("#gallery").width(totalWidth); jQuery("#gallery-prev").click(function(){ if(jQuery("#gallery").position().left &lt; 0 &amp;&amp; !jQuery("#gallery").is(":animated")){ jQuery("#gallery").animate({left : "+=" + imageWidth + "px"}); } return false; }); jQuery("#gallery-next").click(function(){ if(jQuery("#gallery").position().left &gt; stopPosition &amp;&amp; !jQuery("#gallery").is(":animated")){ jQuery("#gallery").animate({left : "-=" + imageWidth + "px"}); } return false; }); } }); --&gt; &lt;/script&gt; &lt;?php include("samiloxide.php"); //if(!$_POST['page']) die("0"); $section = (int)$_POST['section']; $sql=mysql_query(" select * from images where section='$section'"); echo " &lt;div id='gallery-wrap'&gt; &lt;ul id='gallery'&gt; "; while($rr=mysql_fetch_array($sql)){ echo " &lt;li&gt;&lt;a href='$rr[image]'&gt;&lt;img src='$rr[image]' alt='' /&gt;&lt;/a&gt;&lt;/li&gt;"; } echo " &lt;/ul&gt; &lt;/div&gt; &lt;div id='gallery-controls'&gt; &lt;a href='#' id='gallery-prev'&gt;&lt;img src='images/prev.png' alt='' /&gt;next&lt;/a&gt; &lt;a href='#' id='gallery-next'&gt;&lt;img src='images/next.png' alt='' /&gt;last&lt;/a&gt; &lt;/div&gt; "; ?&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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