How to minimize code in jQuery

Question

This may be a weird question, but i didnt find a solution for thiw anywhere. My question is simple, how can i minimize / optimalize code like this? Can this be done with some function or loop. I dont want to have like 500 lines in simple jQuery code like this.

var span1w = $("span", panel1).width();
var span2w = $("span", panel2).width();
var span3w = $("span", panel3).width();
var span4w = $("span", panel4).width();

var span1 = $("span", panel1);
var span2 = $("span", panel2);
var span3 = $("span", panel3);
var span4 = $("span", panel4);      

$(span1).css("margin-left", "-" + span1w / 2 + "px");
$(span2).css("margin-left", "-" + span2w / 2 + "px");
$(span3).css("margin-left", "-" + span3w / 2 + "px");
$(span4).css("margin-left", "-" + span4w / 2 + "px");

My HTML is just this with a bunch of JS under it. What im trying to do is center the span element by getting the width and using a simple css.

<body id="body">
    <img src="images/logos2.png" alt="KOP-KA logo Martin Mali" class="logo">
    <div id="web" class="uk-grid uk-width-1-1">
        <div class="uk-width-1-4" id="panel1">
            <canvas class="canvas"></canvas>
            <span>SNAKE</span>
        </div>
        <div class="uk-width-1-4" id="panel2">
            <canvas class="canvas"></canvas>
            <span>APP</span>
        </div>
        <div class="uk-width-1-4" id="panel3">
            <canvas class="canvas"></canvas>
            <span>????</span>
        </div>
        <div class="uk-width-1-4" id="panel4">
            <canvas class="canvas"></canvas>
            <span>O KOP</span>
        </div>           
    </div>

This is my CSS.

#panel1,#panel2,#panel3,#panel4{
    transition: background-color 0.6s linear;
    -moz-transition: background-color 0.6s linear;
    -o-transition: background-color 0.6s linear;
    -webkit-transition: background-color 0.6s linear;      
}

#panel2{
    border-left:1px solid rgba(32,145,216, 0.3);   
}
#panel3{
    border-left:1px solid rgba(32,145,216, 0.3);  
    border-right:1px solid rgba(32,145,216, 0.3);  
}
span{
    color:white;
    font-family:Impact, Charcoal, sans-serif;
    font-size:60px;
    position:absolute;
    left:50%;
    margin: 0;
    top:50%;
    transform: translate(0, -50%);
}

I really love fresh, fast and simple codes, that works well.

Show your HTML so that we can compare and minimize the code? — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Jan 1, 2016 at 21:04
you gonna need to append these divs in a loop (<div class="uk-width-1-4" id="panel*") otherwise youll have 500 of those too — Tasos
– Tasos, Commented Jan 1, 2016 at 21:15

Ram · Accepted Answer · 2016-01-01 21:20:56Z

3

You could use the .css() callback function. The callback is called once for each element in the set. This means css iterates through the collection behind the scenes. Within the handler this keyword refers to the current element of iteration.

$('.uk-grid > div').find('span').css('margin-left', function() {
    return "-" + $(this).width() / 2 + "px";
});

edited Jan 1, 2016 at 21:20

answered Jan 1, 2016 at 21:04

Ram

145k16 gold badges174 silver badges201 bronze badges

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

1 Comment

Martin Hetfield Mali Over a year ago

This does work very well, thank you! Now iľl remember.

Collectives™ on Stack Overflow

How to minimize code in jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related