Duvida: Jquery
29/04/2009 00:00
0
Estou com problemas para integrar os efeitos de um menu animado no grails já que o evento não funciona fiz em um doc html para testar antes de integrar no grails no html funcionou já na integração não...Alguem poderia ajudar?

--Segue o codigo abaixo :


<!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>
<html xmlns=&quot;http&#58;//www.w3.org/1999/xhtml&quot;>
<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot; />
<title>teste ZOOM Boni</title>
<style type=&quot;text/css&quot;>
body &#123;
font&#58; Arial, Helvetica, sans-serif normal 10px;
margin&#58; 0; padding&#58; 0;
&#125;
* &#123;margin&#58; 0; padding&#58; 0;&#125;
img &#123;border&#58; none;&#125;
.container &#123;
height&#58; 360px;
width&#58; 100%;
// margin&#58; -180px 0 0 -450px;
top&#58; 50%; left&#58; 50%;
position&#58; absolute;
&#125;
ul.thumb &#123;
float&#58; left;
list-style&#58; none;
margin&#58; 0; padding&#58; 10px;
width&#58; 50%;
&#125;
ul.thumb li &#123;
margin&#58; 10px; padding&#58; 15px;
float&#58; left;
position&#58; relative;
width&#58; 120px;
height&#58; 200px;
&#125;
ul.thumb li img &#123;
width&#58; 100px; height&#58; 100px;
border&#58; 1px solid #fff;
padding&#58; 5px;
background&#58; #fffff;
position&#58; absolute;
left&#58; 0; top&#58; 0;
-ms-interpolation-mode&#58; bicubic;
&#125;
ul.thumb li img.hover &#123;
background&#58;url(thumb_bg.png) no-repeat center center;
border&#58; none;
&#125;
#main_view &#123;
float&#58; left;
padding&#58; 9px 0;
margin-left&#58; -10px;
&#125;
</style>
<script type=&quot;text/javascript&quot; src=&quot;jquery-latest.js&quot;></script>
<script type=&quot;text/javascript&quot;>
$(document).ready(function()&#123;

//Larger thumbnail preview

$(&quot;ul.thumb li&quot;).hover(function() &#123;
$(this).css(&#123;'z-index' &#58; '10'&#125;);
$(this).find('img').addClass(&quot;hover&quot;).stop()
.animate(&#123;
marginTop&#58; '-110px',
marginLeft&#58; '-110px',
top&#58; '50%',
left&#58; '50%',
width&#58; '174px',
height&#58; '174px',
padding&#58; '20px'
&#125;, 200);

&#125; , function() &#123;
$(this).css(&#123;'z-index' &#58; '0'&#125;);
$(this).find('img').removeClass(&quot;hover&quot;).stop()
.animate(&#123;
marginTop&#58; '0',
marginLeft&#58; '0',
top&#58; '0',
left&#58; '0',
width&#58; '100px',
height&#58; '100px',
padding&#58; '5px'
&#125;, 400);
&#125;);

//Swap Image on Click
$(&quot;ul.thumb li a&quot;).click(function() &#123;

var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
$(&quot;#main_view img&quot;).attr(&#123; src&#58; mainImage &#125;);
return false;
&#125;);

&#125;);
</script>
</head>

<body>
<table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;>
<tr>
<th scope=&quot;col&quot; align=&quot;center&quot;>

<ul class=&quot;thumb&quot;>
<li><a href=&quot;main_image1.jpg&quot;><img src=&quot;morter_diploma-icon.jpg&quot; alt=&quot;&quot; /></a></li>
<li><a href=&quot;main_image2.jpg&quot;><img src=&quot;icon_chalkboard.png&quot; alt=&quot;&quot; /></a></li>
<li><a href=&quot;main_image3.jpg&quot;><img src=&quot;gestor_pos2.png&quot; alt=&quot;&quot; /></a></li>
</ul>

</div>

</th>

<th>
jdjd
</th>
<th>
jddhdh
</th>
</tr>
</table>



</body>
</html>
Tags: Grails


0
qual a saida quando voce digita isso no console do firebug?

$(&quot;ul.thumb li a&quot;).click()
03/05/2009 00:00


0
A saida é a maximização da imagem, o problema na realidade não é esse mais um erro na tag $ do javascript, não consegui resolver o problema usando o Jquery.noConflict, mas resolvi adicionando o código direto no layout. =) <!-- s:) --><img src="{SMILIES_PATH}/icon_smile.gif" alt=":)" title="Smile" /><!-- s:) -->
04/05/2009 00:00



Ainda não faz parte da comunidade???

Para se registrar, clique aqui.


Aprenda Groovy e Grails com a Formação itexto!

Newsletter Semana Groovy

Assinar

Envie seu link!


Livro de Grails


/dev/All

Os melhores blogs de TI (e em português) em um único lugar!

 
Creative Commons
RSS Grails Brasil é mantido por itexto Consultoria.
Em caso de problemas contacte Henrique Lobo Weissmann (Kico) por e-mail: kico@itexto.com.br
Todo o conteúdo presente neste site adota o Creative Commons como licença padrão.
Ver: 4.14.0
itexto