StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><a href="http://jsfiddle.net/yfcZN/" rel="nofollow noreferrer"><strong>Here is the working code for the shopping cart</strong></a> (<em>make sure you edit the CSS to how you want it</em>). It's the same code as on the <a href="http://paulsturgess.co.uk/articles/show/83-jquery-text-slide-up-slide-down-effect" rel="nofollow noreferrer"><strong>example page</strong></a>, with the HTML from your question copy pasted in.</p> <hr> <p>Ok, now let's go through the code.</p> <p>Here is the original code from the example page in a<br> <a href="http://jsfiddle.net/JkJuV/" rel="nofollow noreferrer"><strong>jsFiddle example</strong></a></p> <p>Stepping through the code...</p> <p>First we call the method from inside an anonymous function using:</p> <pre><code>$('.feature_box').showFeatureText(); </code></pre> <p>Since, <code>showFeatureText</code> is a method of <code>$('.feature_box')</code> we know that every time <code>this</code> is used insde <code>showFeatureText</code>, <code>this</code> is refering to all the elements with the <code>feature_box</code> class. That is one <code>DIV</code> in your case. The box of text.</p> <p>Now let's step into `showFeatureText. It's being used as a short jQuery plugin. It is a method of jQuery:</p> <pre><code>$.fn.showFeatureText = function() { return this.each(function(){ var box = $(this); var text = $('p',this); text.css({ position: 'absolute', top: '57px' }).hide(); box.hover(function(){ text.slideDown("fast"); },function(){ text.slideUp("fast"); }); }); } </code></pre> <p>Ok, the <code>return this.each(function(){...})</code> has to be included so that the function plays nicely with the jQuery selections. In this case our jQuery selection is one DIV with the class <code>feature_box</code>, but notice that this function would work even if it were added as a method to a jQuery selection that had many elements selected, since it uses <code>return this.each()</code>. At any rate, it's enough to know that this has to be included, and it's what allows you to chain <code>.showFeatureText</code> onto <code>$('.feature_box')</code>. Ok, moving on.</p> <pre><code> var box = $(this); var text = $('p',this); </code></pre> <p>These two lines just define two local variables for our convenience. <code>box</code> is <code>$(this)</code> which in this case is the <code><div class="feature_box"></code>. So it makes sense to call it <code>box</code>.</p> <p>text are the paragraphs inside the div. This is because <code>('p', this)</code> selects all the paragraphs within <code>this</code>, and <code>this</code> is the <code>feature_box</code> div. It's basic syntax for jQuery. To select all of this within that use: <code>$(this, that)</code>. It's a little confusing, since to select id <code>a</code> and id <code>b</code> you would use <code>$("#a, #b")</code> which is completely different. Note the quotation marks.</p> <p>So now <code>box</code> is synonymous with our big div <code>.feature_box</code>, and <code>text</code> is synonymous with the text inside.</p> <p>Let's move on:</p> <pre><code>text.css({ position: 'absolute', top: '57px' }).hide(); </code></pre> <p>We simply make all the paragraphs in the <code>feature_box</code> div invisible. <code>text</code> are the paragaphs. <code>.css()</code> assigns CSS styles to them. It positions them. Finally <code>hide()</code> makes them invisible. The CSS positioning will remain in effect essentially throughout the life of the page. Without it, the paragraphs would be below the photo.</p> <p>Ok, so now that the text is all hidden, we're going to add some event handlers to our div. In other words we want to make it so that if we hover over <code>this</code> which is <code>$('.feature_box')</code>, the <code>.feature_box</code> div, then the text will appear. We also want to hide everything when we're not hovering:</p> <pre><code> box.hover(function(){ text.slideDown("fast"); },function(){ text.slideUp("fast"); }); </code></pre> <p>Notice how there are 2 functions in hover(). The first one is what happens when we mouse over the <code>box</code>. The second is what happens when we mouse out. When we hover over the div, the <code>text</code> slides down. When we stop hovering it slides back up.</p> <p>And that's it. A jQuery plugin for sliding content.</p> <p>You can see <code>each</code> at work on <a href="http://jsfiddle.net/KkGby/" rel="nofollow noreferrer"><strong>this jsFiddle example</strong></a>. Note how all three images have their own sliding text.</p> <p>References:</p> <p><a href="http://api.jquery.com/category/selectors/" rel="nofollow noreferrer"><strong>jQuery selectors</strong></a><br> <a href="http://api.jquery.com/hide/" rel="nofollow noreferrer"><strong>.hide()</strong></a><br> <a href="http://api.jquery.com/hover/" rel="nofollow noreferrer"><strong>.hover()</strong></a><br> <a href="http://api.jquery.com/slideDown/" rel="nofollow noreferrer"><strong>.slideDown()</strong></a><br> <a href="http://api.jquery.com/slideUp/" rel="nofollow noreferrer"><strong>.slideUp()</strong></a><br> <a href="http://api.jquery.com/each/" rel="nofollow noreferrer"><strong>.each()</strong></a><br> <a href="http://docs.jquery.com/Plugins/Authoring" rel="nofollow noreferrer"><strong>authoring jQuery plugins</strong></a> </p>

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