I need to down-size jQuery code

Question

I’m trying to put lots of buttons inside a div whit a bunch of little windows that make content change in a neighbor div, but I’m quite new to jQuery and I'm sure that this code can be much simpler.

Yes it works but It's just that I can see it’s too long and repetitive I’m sure that it can be down sized, Ill post my code in hopes that any of you experts can help me. Thanks in advanced.

jQuery(function($) {
function boton1(event)
{
$(".vitrina1").css("opacity","0");
$(".vitrina1").css("top","0");
$(".vitrina1").animate({"opacity":1,"top":0},300, "linear", null);
$(".vitrina2").animate({"top":712},1, "linear", null);
$(".vitrina3").animate({"top":1424},1, "linear", null);
$(".vitrina4").animate({"top":2136},1, "linear", null);
$(".vitrina5").animate({"top":2848},1, "linear", null);
$(".vitrina6").animate({"top":3560},1, "linear", null);
$(".vitrina7").animate({"top":4272},1, "linear", null);
$(".vitrina8").animate({"top":4984},1, "linear", null);
$(".vitrina9").animate({"top":5696},1, "linear", null);
$(".vitrina10").animate({"top":6408},1, "linear", null);
$(".vitrina11").animate({"top":7120},1, "linear", null);
$(".vitrina12").animate({"top":7832},1, "linear", null);
}
function boton2(event)
{
$(".vitrina2").css("opacity","0");
$(".vitrina2").css("top","-712px");
$(".vitrina2").animate({"opacity":1,"top":-712},300, "linear", null);
$(".vitrina1").animate({"top":712},1, "linear", null);
$(".vitrina3").animate({"top":1424},1, "linear", null);
$(".vitrina4").animate({"top":2136},1, "linear", null);
$(".vitrina5").animate({"top":2848},1, "linear", null);
$(".vitrina6").animate({"top":3560},1, "linear", null);
$(".vitrina7").animate({"top":4272},1, "linear", null);
$(".vitrina8").animate({"top":4984},1, "linear", null);
$(".vitrina9").animate({"top":5696},1, "linear", null);
$(".vitrina10").animate({"top":6408},1, "linear", null);
$(".vitrina11").animate({"top":7120},1, "linear", null);
$(".vitrina12").animate({"top":7832},1, "linear", null);
}
function boton3(event)
{
$(".vitrina3").css("opacity","0");
$(".vitrina3").css("top","-1424px");
$(".vitrina3").animate({"opacity":1,"top":-1424},300, "linear", null);
$(".vitrina1").animate({"top":712},1, "linear", null);
$(".vitrina2").animate({"top":712},1, "linear", null);
$(".vitrina4").animate({"top":2136},1, "linear", null);
$(".vitrina5").animate({"top":2848},1, "linear", null);
$(".vitrina6").animate({"top":3560},1, "linear", null);
$(".vitrina7").animate({"top":4272},1, "linear", null);
$(".vitrina8").animate({"top":4984},1, "linear", null);
$(".vitrina9").animate({"top":5696},1, "linear", null);
$(".vitrina10").animate({"top":6408},1, "linear", null);
$(".vitrina11").animate({"top":7120},1, "linear", null);
$(".vitrina12").animate({"top":7832},1, "linear", null);
}
function boton4(event)
{
$(".vitrina4").css("opacity","0");
$(".vitrina4").css("top","-2136px");
$(".vitrina4").animate({"opacity":1,"top":-2136},300, "linear", null);
$(".vitrina1").animate({"top":712},1, "linear", null);
$(".vitrina2").animate({"top":712},1, "linear", null);
$(".vitrina3").animate({"top":1424},1, "linear", null);
$(".vitrina5").animate({"top":2848},1, "linear", null);
$(".vitrina6").animate({"top":3560},1, "linear", null);
$(".vitrina7").animate({"top":4272},1, "linear", null);
$(".vitrina8").animate({"top":4984},1, "linear", null);
$(".vitrina9").animate({"top":5696},1, "linear", null);
$(".vitrina10").animate({"top":6408},1, "linear", null);
$(".vitrina11").animate({"top":7120},1, "linear", null);
$(".vitrina12").animate({"top":7832},1, "linear", null);
}
function boton5(event)
{
$(".vitrina5").css("opacity","0");
$(".vitrina5").css("top","-2848px");
$(".vitrina5").animate({"opacity":1,"top":-2848},300, "linear", null);
$(".vitrina1").animate({"top":712},1, "linear", null);
$(".vitrina2").animate({"top":712},1, "linear", null);
$(".vitrina3").animate({"top":1424},1, "linear", null);
$(".vitrina4").animate({"top":2136},1, "linear", null);
$(".vitrina6").animate({"top":3560},1, "linear", null);
$(".vitrina7").animate({"top":4272},1, "linear", null);
$(".vitrina8").animate({"top":4984},1, "linear", null);
$(".vitrina9").animate({"top":5696},1, "linear", null);
$(".vitrina10").animate({"top":6408},1, "linear", null);
$(".vitrina11").animate({"top":7120},1, "linear", null);
$(".vitrina12").animate({"top":7832},1, "linear", null);
}
function boton6(event)
{
$(".vitrina6").css("opacity","0");
$(".vitrina6").css("top","-3560px");
$(".vitrina6").animate({"opacity":1,"top":-3560},300, "linear", null);
$(".vitrina1").animate({"top":712},1, "linear", null);
$(".vitrina2").animate({"top":712},1, "linear", null);
$(".vitrina3").animate({"top":1424},1, "linear", null);
$(".vitrina4").animate({"top":2136},1, "linear", null);
$(".vitrina5").animate({"top":2848},1, "linear", null);
$(".vitrina7").animate({"top":4272},1, "linear", null);
$(".vitrina8").animate({"top":4984},1, "linear", null);
$(".vitrina9").animate({"top":5696},1, "linear", null);
$(".vitrina10").animate({"top":6408},1, "linear", null);
$(".vitrina11").animate({"top":7120},1, "linear", null);
$(".vitrina12").animate({"top":7832},1, "linear", null);
}
function boton7(event)
{
$(".vitrina7").css("opacity","0");
$(".vitrina7").css("top","-4272px");
$(".vitrina7").animate({"opacity":1,"top":-4272},300, "linear", null);
$(".vitrina1").animate({"top":712},1, "linear", null);
$(".vitrina2").animate({"top":712},1, "linear", null);
$(".vitrina3").animate({"top":1424},1, "linear", null);
$(".vitrina4").animate({"top":2136},1, "linear", null);
$(".vitrina5").animate({"top":2848},1, "linear", null);
$(".vitrina6").animate({"top":3560},1, "linear", null);
$(".vitrina8").animate({"top":4984},1, "linear", null);
$(".vitrina9").animate({"top":5696},1, "linear", null);
$(".vitrina10").animate({"top":6408},1, "linear", null);
$(".vitrina11").animate({"top":7120},1, "linear", null);
$(".vitrina12").animate({"top":7832},1, "linear", null);
}
function boton8(event)
{
$(".vitrina8").css("opacity","0");
$(".vitrina8").css("top","-4984px");
$(".vitrina8").animate({"opacity":1,"top":-4984},300, "linear", null);
$(".vitrina1").animate({"top":712},1, "linear", null);
$(".vitrina2").animate({"top":712},1, "linear", null);
$(".vitrina3").animate({"top":1424},1, "linear", null);
$(".vitrina4").animate({"top":2136},1, "linear", null);
$(".vitrina5").animate({"top":2848},1, "linear", null);
$(".vitrina6").animate({"top":3560},1, "linear", null);
$(".vitrina7").animate({"top":4272},1, "linear", null);
$(".vitrina9").animate({"top":5696},1, "linear", null);
$(".vitrina10").animate({"top":6408},1, "linear", null);
$(".vitrina11").animate({"top":7120},1, "linear", null);
$(".vitrina12").animate({"top":7832},1, "linear", null);
}
function boton9(event)
{
$(".vitrina9").css("opacity","0");
$(".vitrina9").css("top","-5696px");
$(".vitrina9").animate({"opacity":1,"top":-5696},300, "linear", null);
$(".vitrina1").animate({"top":712},1, "linear", null);
$(".vitrina2").animate({"top":712},1, "linear", null);
$(".vitrina3").animate({"top":1424},1, "linear", null);
$(".vitrina4").animate({"top":2136},1, "linear", null);
$(".vitrina5").animate({"top":2848},1, "linear", null);
$(".vitrina6").animate({"top":3560},1, "linear", null);
$(".vitrina7").animate({"top":4272},1, "linear", null);
$(".vitrina8").animate({"top":4984},1, "linear", null);
$(".vitrina10").animate({"top":6408},1, "linear", null);
$(".vitrina11").animate({"top":7120},1, "linear", null);
$(".vitrina12").animate({"top":7832},1, "linear", null);
}
function boton10(event)
{
$(".vitrina10").css("opacity","0");
$(".vitrina10").css("top","-6408px");
$(".vitrina10").animate({"opacity":1,"top":-6408},300, "linear", null);
$(".vitrina1").animate({"top":712},1, "linear", null);
$(".vitrina2").animate({"top":712},1, "linear", null);
$(".vitrina3").animate({"top":1424},1, "linear", null);
$(".vitrina4").animate({"top":2136},1, "linear", null);
$(".vitrina5").animate({"top":2848},1, "linear", null);
$(".vitrina6").animate({"top":3560},1, "linear", null);
$(".vitrina7").animate({"top":4272},1, "linear", null);
$(".vitrina8").animate({"top":4984},1, "linear", null);
$(".vitrina9").animate({"top":5696},1, "linear", null);
$(".vitrina11").animate({"top":7120},1, "linear", null);
$(".vitrina12").animate({"top":7832},1, "linear", null);
}
function boton11(event)
{
$(".vitrina11").css("opacity","0");
$(".vitrina11").css("top","-7120px");
$(".vitrina11").animate({"opacity":1,"top":-7120},300, "linear", null);
$(".vitrina1").animate({"top":712},1, "linear", null);
$(".vitrina2").animate({"top":712},1, "linear", null);
$(".vitrina3").animate({"top":1424},1, "linear", null);
$(".vitrina4").animate({"top":2136},1, "linear", null);
$(".vitrina5").animate({"top":2848},1, "linear", null);
$(".vitrina6").animate({"top":3560},1, "linear", null);
$(".vitrina7").animate({"top":4272},1, "linear", null);
$(".vitrina8").animate({"top":4984},1, "linear", null);
$(".vitrina9").animate({"top":5696},1, "linear", null);
$(".vitrina10").animate({"top":6408},1, "linear", null);
$(".vitrina12").animate({"top":7832},1, "linear", null);
}
function boton12(event)
{
$(".vitrina12").css("opacity","0");
$(".vitrina12").css("top","-7832px");
$(".vitrina12").animate({"opacity":1,"top":-7832},300, "linear", null);
$(".vitrina1").animate({"top":712},1, "linear", null);
$(".vitrina2").animate({"top":712},1, "linear", null);
$(".vitrina3").animate({"top":1424},1, "linear", null);
$(".vitrina4").animate({"top":2136},1, "linear", null);
$(".vitrina5").animate({"top":2848},1, "linear", null);
$(".vitrina6").animate({"top":3560},1, "linear", null);
$(".vitrina7").animate({"top":4272},1, "linear", null);
$(".vitrina8").animate({"top":4984},1, "linear", null);
$(".vitrina9").animate({"top":5696},1, "linear", null);
$(".vitrina10").animate({"top":6408},1, "linear", null);
$(".vitrina11").animate({"top":7120},1, "linear", null);
}
$('#btn1').bind('click', boton1);
$('#btn2').bind('click', boton2);
$('#btn3').bind('click', boton3);
$('#btn4').bind('click', boton4);
$('#btn5').bind('click', boton5);
$('#btn6').bind('click', boton6);
$('#btn7').bind('click', boton7);
$('#btn8').bind('click', boton8);
$('#btn9').bind('click', boton9);
$('#btn10').bind('click', boton10);
$('#btn11').bind('click', boton11);
$('#btn12').bind('click', boton12);
});

This is the html code:

<div id="contenedorPrimario">
<div id="botones">
<div class="boton" id="btn1"><a class="tooltip" rel="Contenedor 1"><img src="imagenes/imagen1.jpg"></a></div>
<div class="boton" id="btn2"><a class="tooltip" rel="Cajón<br>Contenedor 2"><img src="imagenes/imagen2.jpg"></a></div>
<div class="boton" id="btn3"><a class="tooltip" rel="Este es el Contendor<br>#3 Cajón 3"><img src="imagenes/imagen3.jpg"></a></div>
<div class="boton" id="btn4"><a class="tooltip" rel="Ejemplo de contenido<br>dentro del cajón<br>Contenedor 4"><img src="imagenes/imagen4.jpg"></a></div>
<div class="boton" id="btn5"><a class="tooltip" rel="Aqui texto"><img src="imagenes/imagen5.jpg"></a></div>
<div class="boton" id="btn6"><a class="tooltip" rel="Aqui texto"><img src="imagenes/imagen6.jpg"></a></div>
<div class="boton" id="btn7"><a class="tooltip" rel="Aqui texto"><img src="imagenes/imagen7.jpg"></a></div>
<div class="boton" id="btn8"><a class="tooltip" rel="Aqui texto"><img src="imagenes/imagen8.jpg"></a></div>
<div class="boton" id="btn9"><a class="tooltip" rel="Aqui texto"><img src="imagenes/imagen9.jpg"></a></div>
<div class="boton" id="btn10"><a class="tooltip" rel="Aqui texto"><img src="imagenes/imagen10.jpg"></a></div>
<div class="boton" id="btn11"><a class="tooltip" rel="Aqui texto"><img src="imagenes/imagen11.jpg"></a></div>
<div class="boton" id="btn12"><a class="tooltip" rel="Aqui texto"><img src="imagenes/imagen12.jpg"></a></div>
</div>
<div id="sociales">Aqui van los iconos que controlan <a id="redes2" href="#">redes sociales</a> y el player</div>
<div id="aparador">
<div id="mercancia">
<div class="vitrina1"><img src="imagenes/principal_pic.jpg" width="652" height="568" alt=""><h2>Entra a la nueva era</h2></div>
<div class="vitrina2">Hola 2</div>
<div class="vitrina3">Hola 3</div>
<div class="vitrina4">Hola 4</div>
<div class="vitrina5">Hola 5</div>
<div class="vitrina6">Hola 6</div>
<div class="vitrina7">Hola 7</div>
<div class="vitrina8">Hola 8</div>
<div class="vitrina9">Hola 9</div>
<div class="vitrina10">Hola 10</div>
<div class="vitrina11">Hola 11</div>
<div class="vitrina12">Hola 12</div>
</div>
</div>
</div>

And this is the CSS:

#contenedorPrimario { position:relative;margin-left:auto;margin-right:auto;width:100%;  background: url(../imagenes/fondo_index.jpg); width: 1100px; height: 800px;}
.clear {clear:both;}
#aparador {position:absolute; margin-top: 50px; margin-left: 456px; width:641px;overflow: hidden; height:712px; background:#666; margin-right: 20px; }
#mercancia {position:absolute; width: 641px; height: 9324px; margin-top: 0px; visibility: visible; background: #fff; }
.vitrina1, .vitrina2, .vitrina3, .vitrina4, .vitrina5, .vitrina6, .vitrina7, .vitrina8,      .vitrina9, .vitrina10, .vitrina11, .vitrina12 { position:relative; width:641px; height: 712px; }
.vitrina1 { /*background-color: #33CCCC;*/ background: #D2D2D2;}
.vitrina2 { background-color: #999900;}
.vitrina3 { background-color: #CC6600;}
.vitrina4 { background-color: #AA0000;}
.vitrina5 { background-color: #99CC33;}
.vitrina6 { background-color: #0066CC;}
.vitrina7 { background-color: #570699;}
.vitrina8 { background-color: #CC33CC;}
.vitrina9 { background-color: #02F965;}
.vitrina10 { background-color: #FFFF00;}
.vitrina11 { background-color: #C80461;}
.vitrina12 { background-color: #000066;}

There, the thumbs or botons on the left must change the content in the right

mrtsherman · Answer 1 · 2012-04-15 02:52:17Z

It is very difficult to tell what you are trying to do from you code, but here is a very general example of a cleanup I would do on your code based on some assumptions.

http://jsfiddle.net/tgcNd/1

Combine your css changes into a single statement as Jonathjan Sampson suggested.
```
$(selector).css( { opacity: "0", top: "0" });
```
Alon has another valid point which is method chaining. This increases performance by decreasing the number of jQuery object looksups.
```
$(selector).css().css().animate(); //etc
```
Use jQuerys on for your event binding. Assuming the buttons share a parent you can monitor that parent for button presses. This reduces the number of bound events and increases performance.
```
$('#buttoncontainer').on('click', 'button', function() { ... });
```
Use a class or a general function so that you are not repeating code over and over again. In this simplified example I change the clicked button's state and then make a change to all other buttons by making use of the not method.
```
$(this).css( { opacity: "0", top: "0" });
$('button').not(this).each(function() {
   console.log('animating button: ' + this.innerHTML);
   $(this).animate({
      //animate
   }, 1, "linear", null);
});
```

Sorry, you’re right... I posted the rest of the code, my screen is split in two, on the left I have this 12 tiles, every time I click in one of theme, any of them, the content on the right changes, fade in fade out so on.
There are far better ways to do this (as you surmised). See this example. jsfiddle.net/dLGvg
My God, that's it... it does the same but whiteout a thousand lines... Thank you, Thank you. This is great. I promise Ill learn from it.
one thing only, the content from the windows on the right are queried from a database... will this work as well?

jfriend00 · Answer 2 · 2012-04-15 02:52:25Z

EDIT: This is a new answer now that we see the HTML and understand what the OP is actually trying to do. There is a much, much simpler way to do this.

Conceptually, instead of maintaining manually controlled relative positions of every .vitrinaX div, we just make them all absolutely positioned on top of one another with only one div visible at a time. To show a new one, we fadeOut() the current one (which we maintain a reference to with an active class and fadeIn() the new one. Since they are all on top of one another, it makes a smooth opacity transition from one to the other.

Here's a working demo: http://jsfiddle.net/jfriend00/4UmQ5/

You can change ALL of your Javascript to this:

jQuery(function($) {
    $(".boton").click(function() {
        var id = this.id.replace("btn", "");
        $("#mercancia .active").removeClass("active").fadeOut();
        $(".vitrina" + id).fadeIn().addClass("active");
    });
});

And, change this part of your CSS from this:

.vitrina1, .vitrina2, .vitrina3, .vitrina4, 
.vitrina5, .vitrina6, .vitrina7, .vitrina8, 
.vitrina9, .vitrina10, .vitrina11, .vitrina12 { 
    position:relative; 
    width:641px; 
    height: 712px; 
 }
.vitrina1 { /*background-color: #33CCCC;*/ background: #D2D2D2;}

to this:

.vitrina1, .vitrina2, .vitrina3, .vitrina4, 
.vitrina5, .vitrina6, .vitrina7, .vitrina8, 
.vitrina9, .vitrina10, .vitrina11, .vitrina12 { 
    position:absolute; 
    width:641px; 
    height: 712px; 
    display: none;
}
.vitrina1 { 
    /*background-color: #33CCCC;*/ background: #D2D2D2; 
    display: block;
}

And, then in your HTML, add the "active" class to this line:

<div class="vitrina1 active">Hola-Hello this his window #1</div>

Here's the original answer before the actual HTML and actual rendering intent was disclosed

It would be useful to both see the HTML and understand what you're really trying to do here. It may be much easier to add some appropriate classes and do things a simpler way, but we can't really tell without seeing the whole problem including the HTML and a description of what you're really trying to accomplish.

From purely studying your code, it can be deduced to a pattern and that pattern can be generated with javascript rather than repeatedly typed out. Here's my first analysis of deducing the pattern to a couple loops of code. There's one loop to create each event handler and another loop inside each event handler to loop through each item and apply the desired change to each one:

jQuery(function ($) {
    for (var i = 1; i <= 12; i++) {
        (function(i) {
            $("#btn" + i).click(function (event) {
                $(".vitrina" + i).css({opacity: 0, top: 0});
                for (var j = 1; j <= 12; j++) {
                    var topVal = j - 1;
                    if (j == i) {
                        topVal = -topVal;
                    }
                    $(".vitrina" + j).animate({top: topVal * 712}, 1, "linear");
                }
            });
        })(i);
    }
});

OK, thanks’ for such a fast response every one, and yes mrtsherman you’re right, here is the rest of the code ;)
@SamRamSan - can you describe what visual effect are you trying to achieve? All, I see is one div to the right moving into the visible position when you click on a square and I see no animation. That effect can be achieved very, very simply with 1/100th the complication you have now. Unless, there's supposed to be more to the switch than I currently see. Please explain what you are trying to achieve.
OK, I have as you can see, 12 tiles the left, those tiles are to be generated from a MySqk database, and will show a thumbnail.. when clicking on the thumb, the content on the right div will be populated from data coming from mysql as well. Its working ok but. The code for the whole thing is just too big, and repetitive. Now the info from the right will have or does have a slight fade out and fade in every time on or other tile is clicked. It’s already working, but it’s just very repetitive. Thanks
@SamRamSan - I've proposed a radically simpler idea that replaces all your code with 7 lines of code and needs a couple corresponding changes in HTML/CSS.

elclanrs · Answer 3 · 2012-04-15 02:57:16Z

I've no way to try this out, but with your actual code, without changin classes etc, this seems like the obvious way to do it, but maybe not the best...

var max = 12;
var animVitrina = function (btn) {
    var _ival = 712,
         _top =  - ((btn - 1) * _ival);
    $('.vitrina' + btn).css({
        opacity : 0,
        top : _top
    }, 300).animate({
        opacity : 1,
        top : _top
    });
    _top = 0;
    for (var i = 1; i < max; i++, _top += _ival) {
        if (i !== btn) {
            $('.vitrina' + i).animate({
                top : _top
            });
        }
    }
};
for (var i = 1; i < max; i++) {
    $('#btn' + i).on('click', animVitrina(i));
}

Sam Ram San · Accepted Answer · 2012-04-15 20:25:26Z

Thanks to Ilia G for the help, problem solved. Here is the code in case some else needs it. God bless you all.

$("#botones div.boton a").each(function(idx)
{
$(this).click(function() 
{
    $("#mercancia div").hide()
        .filter("div.vitrina" + (idx+1)).fadeIn();
    return false;
});
});

asked	1 year ago
viewed	77 times
active	1 year ago

I need to down-size jQuery code

migrated from stackoverflow.com Apr 15 '12 at 19:06

4 Answers

Your Answer

Not the answer you're looking for? Browse other questions tagged jquery or ask your own question.

I need to down-size jQuery code

migrated from stackoverflow.com Apr 15 '12 at 19:06

4 Answers

Your Answer

Sign up or login

Post as a guest

Not the answer you're looking for? Browse other questions tagged jquery or ask your own question.

Related