jQuery - making scrolling and toggling simple
I recently discovered jQuery and I thought it looked great. I could hardly wait to try it out in a project and the time has finally come.
In this case we have a list of feeds with the following requirements:
1.) When a link next to the title of each item is pressed we want to display item description (they are hidden by default).
2.) To improve the user experience we want an animation to bring the displayed item description to the middle of the window.
3.) When a user presses the above link again we will hide the item description, however this time we don’t want the animation. It makes no sense enhancing focus on something the user wants to get rid of.
This is how the requirements can be solved with jQuery:
First the markup (rendered with Smarty):
<script language="JavaScript" src="{$baseUrl}/js/jquery.js"></script>
<script language="JavaScript" src="{$baseUrl}/js/jquery.dimensions.js"></script>
<script language="JavaScript" src="{$baseUrl}/js/jquery.scrollTo.js"></script>
<script language="JavaScript" src="{$baseUrl}/js/jquery_help.js"></script>
<table>
{foreach from=$feeds item=feed}
<tr style="background:{cycle values="#ddd,#eee"};">
<td class="feed_list"><b>{$feed.feedname}</b></td>
<td class="feed_list" width="700px">
<a href="{$feed.link}" class="black_link">{$feed.title}</a> <a href="javascript:toggleViz('{$feed.id}')">more</a>
<div id="{$feed.id}" class="hidden_simple">{$feed.description}</div>
</td>
<td class="feed_list"><b>{$feed.category}</b></td>
</tr>
{/foreach}
</table>Notice that I use the dimensions plugin and the scrollTo plugin. ScrollTo is used to scroll the main window and dimensions are used to read the position of elements in my case. It can be used for a hell of a lot more though.
Let’s take a look at hidden_simple as it is of some importance in our case:
.hidden_simple{
visibility:hidden;
width:0px;
height:0px;
}
.feed_list{
margin:0px 0px 0px 0px;
padding:0px 5px 0px 5px;
}So it will hide everything and make it have no size. Let’s move on to the magic. In jquery_help.js I only have the function toggleViz which is called when pressing the more link:
function toggleViz(el_id){
$("#"+el_id).toggleClass("hidden_simple");
if($("#"+el_id).attr("className") != "hidden_simple"){
var scroll_to = $("#"+el_id).position();
$.scrollTo(scroll_to.top, {speed:500});
}
}ToggleClass will apply or remove the hidden_simple class from the element. Next we check if the class in fact is applied, if it is not (if it was just removed which will show the element) we will scroll to the vertical position of the element.
So as you can see, jQuery and Co will make effects ridiculously simple. Javascript is not my strength but libraries like this makes my life extremely easy.
Related Posts
Tags: dimensions, Javascript, jquery, scrollto
December 5th, 2007 at 10:03 am
Hi, doesn’t this work as expected ?
function toggleViz(el_id){
$(”#”+el_id).toggleClass(”hidden_simple”);
if($(”#”+el_id).attr(”className”) != “hidden_simple”){
// see the modification here V
$.scrollTo( “#”+el_id, {speed:500});
}
}
December 5th, 2007 at 11:55 pm
The
<a href="javascript:toggleViz('{$feed.id}')" rel="nofollow">more</a>stuff could probably be implemented with some kind of callback event functionality. It’s on my to do list.December 6th, 2007 at 12:37 am
Awesome Ariel, I didn’t see that one in your example (didn’t look very hard though). So I suppose we can throw out the dimension plugin in this example.
December 6th, 2007 at 9:08 am
Indeed.. since the… third release, more or less. The plugin stopped relying on dimensions.
If you are interested, that function could be shorter written like this:
function toggleViz(el_id){
var $el = $(”#”+el_id).toggleClass(”hidden_simple”);
if ( !$el.is(’.hidden_simple’) )
$.scrollTo( $el, {speed:500});
};
I do admit the examples don’t show all the possible uses of the plugin. But the source code has some more examples and explains each customizable option too.
Please let me know, if you think it’s not clear enough, thanks.
December 6th, 2007 at 10:05 am
I think the problem was that I looked to dimensions before I found scrollto ,therefore I knew I could get the position of an element with dimensions and that made me not review your stuff like I should have it seems. I think everything is clear enough, thanks for an awesome plugin!
December 6th, 2007 at 1:11 pm
If you’re using jQuery 1.2.1, you can use the hasClass() method instead of is() so you could re-write part of Ariel’s code from:
!$el.is(’.hidden_simple’)
to
!$el.hasClass(’.hidden_simple’)
I ran a few very basic speed tests and found the hasClass() method to be about 30% faster.
December 6th, 2007 at 4:47 pm
Can you post a demo of effect you are doing?
Thanks,
Rich
December 7th, 2007 at 3:19 am
Thanks Dave!
Rich: I will link to that whole project when it is finished. In the meantime what we do here is simply making the main browser window scroll to make the element clicked centered vertically. The purpose is to enhance the usability of the interface.
December 7th, 2007 at 8:47 am
@dave
If you use hasClass, you must remove the dot leading the className. As for speed.. that is odd, because if you take a look at hasClass:
hasClass: function(expr) {
return this.is(”.” + expr);
},
It’s doing, internally, the same as I did. I don’t think it can be really faster. hasClass is useful when you have the className in a variable, so it saves you the ‘#’ + klass .
December 7th, 2007 at 8:48 am
Oops.. I mean ‘.’ + klass. Not ‘#’ + klass.
December 12th, 2007 at 2:32 pm
How about a demo about ‘load on scroll’ or ‘pageless scrolling’
example at http://www.dzone.com and just try to scroll down on the page. pretty neat!