Home/ Questions/Q 7812479
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T04:31:11+00:00

Possible Duplicate: I need to down-size jQuery code Yesterday I placed a jQuery code

  • 0

Possible Duplicate:
I need to down-size jQuery code

Yesterday I placed a jQuery code snipet that y developed and need a little help with, It works fine but, it’s just too long and repetitive, I do not mean disrespect to the grate programmers that tried to help me yesterday because there grate, but its almost sure I did not asked the right questions, one of theme suggested that the question needed to be asked here and so I am doing now.

OK, I have as you can see in the code, 12 tiles in a left div, those tiles are to be generated from a mySql database, and will show a thumbnail.. when clicking on a tile, the content on the right div will fade out and present the div corresponding to the clicked tile, the information on the appearing div is stored on a mySql db as well. Its working ok but. The code for the whole thing is just too big, and repetitive. It’s not a gallery and the icon on the tile probably has nothing to do with the content to de right.

Thanks to mrtsherman, jfriend00 and elclanrs for the help last night, I know it’s my fault for not asking the right question.
Som, here is the code in action: http://jsfiddle.net/tgcNd/6/

And below my Frankenstein of a code

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);
});

The HTML

<div id="contenedorPrimario">
<div id="botones">
<div class="boton" id="btn1"><a class="tooltip" rel="Contenedor 1"><img src="http://www.auviproducciones.com/more/imagenes/imagen1.jpg"></a></div>
<div class="boton" id="btn2"><a class="tooltip" rel="Cajón<br>Contenedor 2"><img src="http://www.auviproducciones.com/more/imagenes/imagen2.jpg"></a></div>
<div class="boton" id="btn3"><a class="tooltip" rel="Este es el<br>Cajón 3"><img src="http://www.auviproducciones.com/more/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="http://www.auviproducciones.com/more/imagenes/imagen4.jpg"></a></div>
<div class="boton" id="btn5"><a class="tooltip" rel="Aqui texto"><img src="http://www.auviproducciones.com/more/imagenes/imagen5.jpg"></a></div>
<div class="boton" id="btn6"><a class="tooltip" rel="Aqui texto"><img src="http://www.auviproducciones.com/more/imagenes/imagen6.jpg"></a></div>
<div class="boton" id="btn7"><a class="tooltip" rel="Aqui texto"><img src="http://www.auviproducciones.com/more/imagenes/imagen7.jpg"></a></div>
<div class="boton" id="btn8"><a class="tooltip" rel="Aqui texto"><img src="http://www.auviproducciones.com/more/imagenes/imagen8.jpg"></a></div>
<div class="boton" id="btn9"><a class="tooltip" rel="Aqui texto"><img src="http://www.auviproducciones.com/more/imagenes/imagen9.jpg"></a></div>
<div class="boton" id="btn10"><a class="tooltip" rel="Aqui texto"><img src="http://www.auviproducciones.com/more/imagenes/imagen10.jpg"></a></div>
<div class="boton" id="btn11"><a class="tooltip" rel="Aqui texto"><img src="http://www.auviproducciones.com/more/imagenes/imagen11.jpg"></a></div>
<div class="boton" id="btn12"><a class="tooltip" rel="Aqui texto"><img src="http://www.auviproducciones.com/more/imagenes/imagen12.jpg"></a></div>
</div>
<div id="aparador"> <!-- main right container -->
<div id="mercancia"> <!-- info Divs container this one scrolls uo and down if animation tyoe changes from fade to scroll -->
<div class="vitrina1">Hello this his window #1<br>with mySql content</div>
<div class="vitrina2">Hello this his window #2<br>with mySql content</div>
<div class="vitrina3">Hello this his window #3<br>with mySql content</div>
<div class="vitrina4">window #4<br>with mySql content</div>
<div class="vitrina5">window #5<br>with mySql content</div>
<div class="vitrina6">window #6<br>with mySql content</div>
<div class="vitrina7">window #7<br>with mySql content</div>
<div class="vitrina8">window #8<br>with mySql content</div>
<div class="vitrina9">window #9<br>with mySql content</div>
<div class="vitrina10">window #10<br>with mySql content</div>
<div class="vitrina11">window #11<br>with mySql content</div>
<div class="vitrina12">window #12<br>with mySql content</div>
</div>
</div>
</div>

Adn finally 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;}
/* Inicia Cajón Izquierdo */
#botones {position:absolute; width:450px; height: 592px; margin-left:3px; margin-right:20px;margin-top:50px;padding-bottom:4px;}
.boton {width:150px;height:142px;float:left;cursor: default;}
.boton img {width:150px;height:142px;}
#sociales { position: absolute; width:450px; height: 120px; margin-left: 2px; margin-top: 620px; /*background: #FF3300; */}
/* Inicia Cajón Derecho */
#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;}​
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This seem pretty trivial… See my version of your code

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

    Also note that I changed default style for vitrinas from position:relative to display:none

    • 0