Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Try this:</p> <pre><code>$(function() { $("#foo3").carouFredSel({ auto : true, scroll : { items : 1, duration : 1000, mousewheel : true, wipe : true, pauseOnHover: true, onAfter : function() { if ( $(this).triggerHandler( "currentPosition" ) == 0 ) { $(this).trigger( "pause" ); } } } }) .find("li") .click(function() { var deviation = parseInt( $("#foo3_deviation").val() ); $("#foo3").trigger("slideTo", [$(this), deviation]); }) .css("cursor", "pointer") .end() .parent() .css('margin','auto'); }); </code></pre> <p>Every time you run another method (e.g. <code>.css("cursor","pointer")</code>) directly after a previous method has completed, you're doing what's called <a href="http://tobiasahlin.com/blog/quick-guide-chaining-in-jquery/" rel="nofollow">chaining</a>. jQuery methods are functions which return the jQuery object they operated on. But some methods, like <code>.find()</code>, actually change the underlying elements of the object that is returned. You can think of a method like <code>.css</code> as <strong>returning the original jQuery object</strong>, and a method like <code>.find()</code> as <strong>returning a new jQuery object</strong>. When you're looking through the jQuery docs, note what each method says it returns.</p> <p>For more readable code, you can avoid the chaining so you always know what you're operating on. Like this:</p> <pre><code>$(function() { var $carousel = $('#foo3'); // caching the initial jQuery object in a variable. $carousel.carouFredSel({ auto : true, scroll : { items : 1, duration : 1000, mousewheel : true, wipe : true, pauseOnHover: true, onAfter : function() { if ( $(this).triggerHandler( "currentPosition" ) == 0 ) { $(this).trigger( "pause" ); } } } }); // change the css of the carousel's parent. $carousel.parent().css('margin','auto'); // modify each &lt;li&gt; child of the carousel. $carousel.find("li") .click(function() { var deviation = parseInt( $("#foo3_deviation").val() ); $("#foo3").trigger("slideTo", [$(this), deviation]); }) .css("cursor", "pointer"); }); </code></pre> <p>I know this is tough to understand if you're just writing a tiny bit of code and you don't care about the internals, but if you know more about what jQuery is doing, you'll be able to work with it a lot faster.</p>
    singulars
    1. This table or related slice is empty.
    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. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

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