Hola que tal muy buenos dias a todos!!, pido mil disculpas si este post no va aquí, soy realmente nuevo y estoy un poco perdido, y siendo así pediría a los moderadores muevan mi tema correspondiente ya que sé la importancia de tener todo en orden dentro de la comunidad, pues bien ahora paso a mi problema:
Estoy trabajando con JavaEE, tecnología JSP, Servlets y todo eso para un carrito de compras, sé un poco de Javascript, mucho de HTML y Java, pero lo que es JQUERY apesar de ser JS tienen sintaxis diferente y está mucho mas enfocado al dinamismo con objectos y elementos, por eso les pido su ayuda en lo siguiente:
junto con java y html ciclo un div "hijo" que esta dentro de un div "papa" que está fijo, cada div "hijo" contiene datos de un producto que rescato de una BD, pero tengo otros subdivs, en uno de esos divs coloco lo que e sla imagen del producto, ahora bien, en cada div hijo tengo enlaces como "añadir al carrito" y "ver" con etiquetas a y propiedad href, quiero que al dar clic en "añadir al carrito de compras" la imagen que corresponde se diriga a otro div en especifico que tengo en la pagina, con elefecto de que se haga mas chico mientras se mueve y la opacidad disminuyendo, ahora bien, buscando en paginas encontre un codigo al que le modifique lo poco que le entendi, dejo todo lo que ocupo para que me puedan hechar una ayudadita porfavor.
1. - Lo que veo es que solo una vez ocurre la animación, es decir solo admite 1 click, yo quiero "n" numero de clicks, no logro ver en donde se le debe mover para que me permita lllamar la funcion y que se ejecute correctamente no importando el numero de click que yo haga para llamar la función.
2.- No logro saber como hacer que todas las imagenes se vayan al mismo posicionamiento del div a donde quiero que caigan.
3.- no se a donde debo agregarle para que en cuanto termine la animacion ejecute una fiocn javascript normal.
dejo codigo de todo:
Este es flyoff.js
uso el jquery-1.2.6.min.js
y aqui mi codigo JSP:
Código:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript"><%@include file="jquery-1.2.6.min.js" %></script>
<script type="text/javascript"><%@include file="flyoff.js" %></script>
<style>
#imagenes{
position: absolute;
margin-left: 50px;
margin-top: 50px;
z-index: 1;
}
#imagenes2{
position: absolute;
margin-left: 50px;
margin-top: 50px;
}
#carrito{
position: absolute;
margin-left: 60%;
margin-top: 80px;
border-color: #000;
border-width: 3px;
width: 80px;
height: 80px;
background-color: #000;
}
</style>
</head>
<body>
<div id="imagenes">
<img src="imagenes/bb-bold9900.png"><br/>
<img src="imagenes/bb-torch.png"><br/>
<img src="imagenes/bbplaybook.png">
</div>
<div id="imagenes2">
<img src="imagenes/bb-bold9900.png"><br/>
<img src="imagenes/bb-torch.png"><br/>
<img src="imagenes/bbplaybook.png">
</div>
</div>
<div id="carrito"></div>
<script>
$('img','#imagenes').click(function(){
$(this).flyOffPage({
/* retainSpace: {
height: 0,
width: 0,
margin: 0,
top:0
},*/
tween: {
opacity: -1,
marginTop: 80,
marginLeft: 60
}
});
return false;
});
</script>
</body>
</html>
Nota: veran que tengo duplicado un div con las mismas imagenes eso es porque el codigo de la animacion hace que desaparezcan las imagenes y yo quiero mantenerlas fijas y no sé usar algo así como clonacion!!