JQuery - Custom slider - Restricting the slide when it reaches the end -


i've written custom slider using jquery show thumbnails of images. i've outer div inside slider moves. when slides come end don't want slide further (both left , right). how can that?

here code - can save html , run -

<html> <head>     <title>content slider</title>     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>     <script type="text/javascript">         $(document).ready(function () {          });          function left() {             $('#inner').animate({                 'marginleft': "-=200px"             }, 1000, function () {             });         }          function right() {             if ($('#inner').css('marginleft') != "0px" && $('#inner').css('marginleft') != "auto") {                 $('#inner').animate({                     'marginleft': "+=200px"                 }, 1000, function () {                 });             }          }     </script> </head> <body>     <div style="width: 800px; height: 200px; border: 3px solid #dadada; overflow: hidden;         padding: 5px;">         <div id="inner" style="height: 190px; overflow: hidden;">             <table cellpadding="0" cellspacing="5" style="width: 100%; height: 190px;">                 <tr>                     <td valign="middle" align="center">                         <div style="width: 200px; height: 100px; background-color: #dadada">                         </div>                     </td>                     <td valign="middle" align="center">                         <div style="width: 200px; height: 100px; background-color: #dadada">                         </div>                     </td>                     <td valign="middle" align="center">                         <div style="width: 200px; height: 100px; background-color: #dadada">                         </div>                     </td>                     <td valign="middle" align="center">                         <div style="width: 200px; height: 100px; background-color: #dadada">                         </div>                     </td>                     <td valign="middle" align="center">                         <div style="width: 200px; height: 100px; background-color: #dadada">                         </div>                     </td>                     <td valign="middle" align="center">                         <div style="width: 200px; height: 100px; background-color: #dadada">                         </div>                     </td>                     <td valign="middle" align="center">                         <div style="width: 200px; height: 100px; background-color: #dadada">                         </div>                     </td>                     <td valign="middle" align="center">                         <div style="width: 200px; height: 100px; background-color: #dadada">                         </div>                     </td>                 </tr>             </table>         </div>     </div>     <table style="width: 800px">         <tr>             <td align="left">                 <a href="javascript:left();"><<</a>             </td>             <td align="right">                 <a href="javascript:right();">>></a>             </td>         </tr>     </table> </body> </html>

any ideas?

i suggest check on total number of images not shown. in case = grand total - 4 (shown when page loaded)- call x. use sort of counter see margin left not decrease more 200*x.

code implementation:

 var x=4; //current total 8 (-4 gives x)         function left() { if( parseint($('#inner').css('marginleft'))>-x*200){ // 200 size of each image             $('#inner').animate({                 'marginleft': "-=200px"             }, 1000, function () {             });         } }

Comments

Post a Comment

Popular posts from this blog

c# - SharpSVN - How to get the previous revision? -

i trying find efficient way previous revision of file text comparison using sharpsvn. using (svnclient c = new svnclient()) { c.authentication.defaultcredentials = new networkcredential( configurationmanager.appsettings.get("svnserviceusername") , configurationmanager.appsettings.get("svnservicepassword") , configurationmanager.appsettings.get("svnservicedomain") ); c.authentication.sslservertrusthandlers += new eventhandler<svnsslservertrusteventargs>(authentication_sslservertrusthandlers); collection<svnfileversioneventargs> fileversioncollection = new collection<svnfileversioneventargs>(); svnrevisionrange range = new svnrevisionrange(0, this.hooks.revision); svnfileversionsargs args = new svnfileversionsargs(); args.retrieveproperties = true; args.range = range; foreach (svnchangeitem item in log.changedpaths) { string path = this.repositorypath + it...
Read more

c++ - Is it possible to compile a VST on linux? -

for class project i'm attempting write vst plugin backed cuda. current cuda workflow on linux box, i'd prefer compile , link there. according wikipedia , should possible (i couldn't find steinberg documentation relevant linux) can't find makefile or instructions on how build if aren't using xcode or visual studio. i'm vst 3 sdk doesn't support linux. when try compile plugin under linux, error: ./base/source/fatomic.cpp:39:30: fatal error: libkern/osatomic.h: no such file or directory this issue caused following code in "vst3 sdk/base/source/fatomic.cpp" #if mac #include <libkern/osatomic.h> #if mac_os_x_version_min_required > mac_os_x_version_10_4 #define native_atomic_type (volatile int32_t*) #else #define native_atomic_type (int32_t*) #endif #elif windows #include <windows.h> #endif but hope compiling under linux work vst sdk 2.4. reading. jvstwrapper seems run on lin...
Read more

url - Querystring manipulation of email Address in PHP -

i using third party application (email2http) send me emailid, body , message. unable retrieve email id due name appended on , enclosed < , >. here querystring getting. test.php?from=ajay+reddy &subject=cx&body=somebody when print variable in php returns name , not email id. $from = $_get['from']; echo $from; //output ajay reddy please suggest me how can emailid also. i dont want use post method due testing , debugging. it's working fine. forgot use htmlentities() in debugging.
Read more