Making javascript / jquery code shorter?

Question

Well I'm kind of new with jQuery and javascript and I have written 'some' code for a image slider but it is enormous. I am convinced it can be shorter, but I don't know how. Could somebody show me how it sould be done so I can learn from it ? Thanks in advance :D

PS I don't want to look lazy, I really want to get better in Javascript and Jquery

Here is my code

jQuery(document).ready(function(){

//Variables for image slider
var imgWrapper = $('.carousel-wrapper'),
    img = $('.carousel-box'),
    imgWidth = $('.carousel-box').width(), 
    imgLength = $('.carousel-box').length, // 4
    currentMargin = imgWrapper.css('margin-left').replace('px',''), //0px
    responsiveLength = 3,
    maxMargin = -((imgLength - responsiveLength) * imgWidth), 
    minMargin = 0; //0px

$(window).resize(function(){
    if ($(window).width() <= 1080) {
        responsiveLength = 2;
        maxMargin = -((imgLength - responsiveLength) * imgWidth);
    } else if ($(window).width() <= 700) {
        responsiveLength = 1;
        maxMargin = -((imgLength - responsiveLength) * imgWidth);
    } else {
        responsiveLength = 3;
        maxMargin = -((imgLength - responsiveLength) * imgWidth);    
    }
});

//Transition animation on click
$('.portbutton').click(function(){

    //Get the direction
    var dir = $(this).data('dir');

    if (dir === 'next' && currentMargin != maxMargin) {
        currentMargin -= imgWidth;
        imgWrapper.animate({marginLeft: currentMargin},300);
    } else if (dir === 'next' && currentMargin === maxMargin){
        currentMargin = minMargin;
        imgWrapper.animate({marginLeft: currentMargin},300);
    } else if (dir === 'prev' && currentMargin != minMargin){
        currentMargin += imgWidth;
        imgWrapper.animate({marginLeft: currentMargin},300);
    } else {
        currentMargin = maxMargin;
        imgWrapper.animate({marginLeft: currentMargin},300);
    }

});

});

Shorter !== better. If you want to improve your code, refactoring is what you want. — Stephan Vierkant
– Stephan Vierkant, Commented Apr 28, 2016 at 16:00

Sergi Case · Accepted Answer · 2016-04-28 15:42:33Z

2

You can use some functions for:

function animate(currentMargin){
 imgWrapper.animate({marginLeft: currentMargin},300);
}

function getMaxMargin(imgLength,responsiveLength,imgWidth){
 maxMargin = -((imgLength - responsiveLength) * imgWidth);
 return maxMargin  
}

And maybe avoid create all time the value responsiveLength, if it just a integer that you always set before use , then just punt the integer instead, you will have more memory space.

answered Apr 28, 2016 at 15:42

Sergi Case

2262 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

FlyingUnderpants Over a year ago

Thank you for your help :D I think those functions will come in handy

TheEllis · Accepted Answer · 2016-04-28 15:46:48Z

You code isn't really that bad. One thing to know about javascript, and especially using jquery, it does get / look messy and verbose. There have been attempts to clean up javascript syntax with CoffeeScript, but it hasn't caught on in mainstream development as much as some had hoped (myself included).

Also, making things as abbreviated as possible is not always in your's and other's best interest. You might end up making your code a whole lot less readable and therefore less maintainable when you come back to change the code a year later.

That being said, you could perhaps make the code cleaner and more readable by splitting some of your logic into separate functions. Anonymous functions are nice (and more or less standard), but you could perhaps break those out into named functions.

Collectives™ on Stack Overflow

Making javascript / jquery code shorter?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related