javascript - jQuery Simpler Way to Do True Slideup/Down -


i'm trying true sliding jquery (so element slides up), came following, i'm not sure it's optimised, can see way improve it?

fiddle at: http://jsfiddle.net/gpuhg/1/

the idea .content elements default being height off page or behind header, , when item on menu clicked if windows open close , requested item slides down. solution seems rather bloated simple!

jquery:

$.fn.exists = function() {     return this.length !== 0; }  $(".content").each(function() {     $(this).hide().css({         "margin-top": "-=" + $(this).outerheight() + "px"     }); });  $("#navigation ul li").each(function() {     var relatedcontent = $("#" + $(this).attr("title") + "-content");     $(this).click(function() {         if (!$(":animated").exists()) {             if ($(".open").exists()) {                 $(".current").first().removeclass("current");                 $(this).addclass("current");                 var element = $(".open").first();                 element.removeclass("open").animate({                     "margin-top": "-" + element.outerheight() + "px"                 }, 500, function() {                     $(this).hide();                     relatedcontent.show().addclass("open").animate({                         "margin-top": "0px"                     }, 500);                 });             } else {                 $(this).addclass("current");                 relatedcontent.show().addclass("open").animate({                     "margin-top": "0px"                 }, 500);             }         }     }); });​

thanks time,

overall, code fine, didn't change much. remember cache variables as possible; dom access expensive. also, providing context selectors improve performance. there many more tweaks make this, here few:

var $nav = $('#navigation'); $nav.find("ul li").click(function(){     if($(':animated').length) { return; }     var $this = $(this),         relatedcontent = $("#"+$this.attr("title")+"-content", $nav);     if(!relatedcontent.length) { return; }     if($(".open", $nav).length) {         $(".current", $nav).removeclass("current");         $this.addclass("current");         var element = $(".open", $nav).first();         element.removeclass("open").animate({"margin-top": "-"+element.outerheight()+"px"},             500,             function() {                 $(this).hide();                 relatedcontent.show().addclass("open").animate({"margin-top": "0px"},500);             });     } else {         $this.addclass("current");         relatedcontent.show().addclass("open").animate({"margin-top": "0px"},500);      } });​

edit: agree comment above: $.fn.exists function great convenience, using .length shorter , faster hitting additional function. keep if like, i'm ditching in code.


Comments

Post a Comment

Popular posts from this blog

jquery - Invalid Assignment Left-Hand Side -

i trying assign class tag via jquery, resulting in error through firebug says "invalid assignment left-hand side" on fourth line below. <cfoutput> $('.pngfix a').each(function(index) { var hreflink = $(this).attr("href"); if (hreflink.tolowercase() = '../audio.cfm') { $(this).addclass('audioimg'); } }); </cfoutput> looking around online, looks syntax problem, don't seem see it... any tips? thanks if (hreflink.tolowercase() = '../audio.cfm') that attempts assign value, rather check equality. change = operator == .
Read more

java - Play! framework 2.0: How to display multiple image? -

i need display gallery of photos. here template: @(photos: list[photo]) @title = { <bold>gallery</bold> } @main(title,"photo"){ <ul class="thumbnails"> @for(photo <- photos) { <li class="span3"> <a href="#" class="thumbnail"> <img src="@photo.path" alt=""> </a> </li> } </ul> } and here controller method: public static result getphotos() { return ok(views.html.photo.gallery.render(photo.get())); } and here photo bean : @entity public class photo extends model { @id public long id; @required public string label; public string path; public photo(string path, string label) { this.path = path; this.label = label; } private static finder<long, photo> find = new finder<long, photo>( long.class, photo.class); public static list<phot...
Read more

gmail - Is there any documentation for read-only access to the Google Contacts API? -

i want read-only access user's google contacts. there stackoverflow member wanted this, , received following answer : yes, there is, use https://www.googleapis.com/auth/contacts.readonly scope , "view contacts". this exchange reference read-only access google contacts can find using google. simply using access token obtained attempt read usual google contacts api (i.e. https://www.google.com/m8/feeds ) fails insufficient permissions. similarly, using google contacts api on new target fails 404 errors (for example https://www.googleapis.com/auth/contacts.readonly/default/full ). is there documentation anywhere on how use api, or permissible way access google contacts api full read-write access?
Read more