CODEWITHSUNDEEP
jqueryoptimization
Stuart Robson
Stuart Robson

Reputation: 1149

How can I make this jQuery code leaner, meaner and cleaner

I've currently got a load of jQuery functions for a site I'm currently front-ending on. I'm not really a jQuery 'ninja' (I have finally started reading the sitepoint book though) so I'm sure this code is probably badly written and could be a little cleaner, meaner and leaner.

Here's the code - 

// add hasJS to html to allow for CSS fallbacks

jQuery(function($) {
$('html').addClass('hasJS');
});

// ENDS

// show/hide/kill the upload files modal box 

$('.upload').click(function(){
$('.uploader').toggle();
});

$('.creategroup').click(function(){
$('.createnewgroup').toggle();
return false;  
});

$('.adduser').click(function(){
$('.addnewuser').toggle();
return false;
});

 $('#tap-menu').click(function() {
$('#left-column, #settings, #ortibi, #userprofile').toggle();
 }); 

$('.cancel').click(function(){
$('.uploader, .shareform').hide();
  });

$('.connection-type').click(function(){
$('.connectform').toggle();
  });


$('.shareit').click(function(){
$('.shareform').show();
});
$(function() {
    $('article .folder-items').hide();    

$("p.folder").click(function () {
      $(this).parent().next(".folder-items").slideToggle("slow");
});
});
 $(document).ready(function(){

    $('#scrollbar1').tinyscrollbar();

});


// ENDS

$('textarea#txtarea_Message"').autoResize({
// On resize:
onResize : function() {
    $(this).css({opacity:0.8});
},
// After resize:
animateCallback : function() {
    $(this).css({opacity:1});
},
// Quite slow animation:
animateDuration : 300,
// More extra space:
extraSpace : 40
});

$("input:checkbox").uniform();
$("#check1").live("click", function(){
var two = $("#check2").attr("checked", this.checked);
$.uniform.update(two);
});

Now I'm probably doing a lot wrong here. What can I do to improve this code? All help appreciated :o)

Upvotes: 0

Views: 155

Answers (2)

Rafael Herscovici
Rafael Herscovici

Reputation: 17094

something like this?

// add hasJS to html to allow for CSS fallbacks
jQuery(function ($) {
    $('html').addClass('hasJS');

    $('article .folder-items').hide();
    $("p.folder").click(function () { $(this).parent().next(".folder-items").slideToggle("slow"); });

    $('#scrollbar1').tinyscrollbar();
});

// ENDS

// show/hide/kill the upload files modal box

$('.upload').click(function () { $('.uploader').toggle(); });

$('.creategroup').click(function (e) { e.preventDefault(); $('.createnewgroup').toggle(); });

$('.adduser').click(function (e) { e.preventDefault(); $('.addnewuser').toggle(); });

$('#tap-menu').click(function () { $('#left-column, #settings, #ortibi, #userprofile').toggle(); });

$('.cancel').click(function () { $('.uploader, .shareform').hide(); });

$('.connection-type').click(function () { $('.connectform').toggle(); });

$('.shareit').click(function () { $('.shareform').show(); });

$('textarea#txtarea_Message"').autoResize({
    // On resize:
    onResize: function () { $(this).css({ opacity: 0.8 }); },
    // After resize:
    animateCallback: function () { $(this).css({ opacity: 1 }); },
    // Quite slow animation:
    animateDuration: 300,
    // More extra space:
    extraSpace: 40
});

$("input:checkbox").uniform();
$("#check1").bind("click", function () {
    var two = $("#check2").attr("checked", this.checked);
    $.uniform.update(two);
});

Upvotes: 1

Johnbabu Koppolu
Johnbabu Koppolu

Reputation: 3252

  1. Jquery live is deprecated as of version 1.7, on works/performs better

  2. As JT Smith commented - you have multiple 'document ready' scripts in mutiple formats -

    You can wrap all those into one on 'document ready' call

    $(document).ready{function() {} }, jquery(function() { }, and $(function() { } - AFAIK all these are same and work the same. You could stick to a single format.

Upvotes: 1

Related Questions