[Resolvido] Exibir / Ocultar DIV

[CyriX 0]

Hey folks!

 

Estou carregando o jquery no magento e estou com uma função básica para exibir e esconder uma div, o problema é que não esta funcionando somente no meu sistema, rodando ela pelo jsFiddle funciona corretamente.

 

código

visibleItem = null;
timer = null;

show = function(selector){
   if(visibleItem && visibleItem!=selector){
       scheduleCancel();
       hideInstant();
   }
   if(timer){
       scheduleCancel();
   }
   visibleItem = selector;
   $(selector).fadeIn('fast');
}

scheduleCancel = function (){
   clearTimeout(timer);
   timer = null;
}

scheduleHide = function (){
   if(timer){
       scheduleCancel();
   }

   timer = setTimeout(function(){
       hide();
   }, 400);
}

hide = function (){
   $(visibleItem).fadeOut('fast');
   visibleItem = null;
   timer = null;
}
hideInstant = function (){
   $(visibleItem).css('display', 'none');
   visibleItem = null;
   timer = null;
}


$("li#login-mini").mouseenter(function() {
   show('.mini-login-form');
});
$("li#login-mini").mouseleave(function() {
   scheduleHide();
});
$(".mini-login-form").mouseenter(function() {
   scheduleCancel();
});
$(".mini-login-form").mouseleave(function() {
   scheduleHide();
});​

 

Link para ver a função funcionando. http://jsfiddle.net/WcUFe/70/

 

 

existe algo incorreto?

[William Bruno 1501]

aparece algum erro no console ?

 

Ctrl+Shift+J no Firefox.

[CyriX 0]

aparece algum erro no console ?

 

Ctrl+Shift+J no Firefox.

 

Sim

 

 

Timestamp: 19/10/12 15:07:27
Error: TypeError: $("#login-mini") is null
Source File: http://noirodeur.com/js/varien/mini-login.js
Line: 43

[William Bruno 1501]

esse código q você postou, deve estar dentro de um:

 

$(document).ready(function(){

   //aqui
});

 

 

pois você deve esperar o DOM estar pronto para manipular ele.

[CyriX 0]

Tanto o firefox como o chrome agora passam a exibir o erro:

 

Error: TypeError: $(document).ready is not a function

[William Bruno 1501]

você está carregando o jQuery corretamente antes desse script ?

 

é a isso que esse erro se refere.

[CyriX 0]

Sim,

 

Eu estava carregando o js com a função pelo page.xml porém agora passei ele pro head.phtml do magento junto ao carregamento do jquery e mesmo assim ele continua a apresentar o mesmo erro citado anteriormente.

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

visibleItem = null;
timer = null;

show = function(selector){
   if(visibleItem && visibleItem!=selector){
       scheduleCancel();
       hideInstant();
   }
   if(timer){
       scheduleCancel();
   }
   visibleItem = selector;
   $(selector).fadeIn('fast');
}

scheduleCancel = function (){
   clearTimeout(timer);
   timer = null;
}

scheduleHide = function (){
   if(timer){
       scheduleCancel();
   }

   timer = setTimeout(function(){
       hide();
   }, 400);
}

hide = function (){
   $(visibleItem).fadeOut('fast');
   visibleItem = null;
   timer = null;
}
hideInstant = function (){
   $(visibleItem).css('display', 'none');
   visibleItem = null;
   timer = null;
}


$("#login-mini").hover(function() {
   show('.mini-login-form');
});
$("#login-mini").mouseleave(function() {
   scheduleHide();
});
$(".mini-login-form").hover(function() {
   scheduleCancel();
});
$(".mini-login-form").mouseleave(function() {
   scheduleHide();
});


});</script>

 

CASO RESOLVIDO!

 

como eu tinha lido a um tempo o magento usa Prototype e por isso o Jquery fica em modo noConflict, desse modo o código $(document).ready(function() não funciona corretamente e para fixar o problema basta substituir por jQuery(document).ready(function($), foi o que fiz!

 

Valeu William, sua ajuda foi de grande valor! Grato!