Ayuda con setTimeout
- Scott K
- Born


- Registrado: Ago 11, 2011
- Mensajes: 1
- Status: Offline
Estoy trabajando en mi propio sistema de clasificación por estrellas. Heres cómo funciona: se genera una tabla html en el código subyacente (permite me para determinar la clasificación actual, si un usuario puede votar, etc.). La tabla se asigna una función onmouseover de showDiv() que muestra una div oculto junto a la estrella tabla que muestra un mensaje. La tabla también se asigna a la resetRating() de función onmouseout. Esta función se utiliza para restablecer la imagen de fondo de tablas a la original star rating si el usuario mueve el ratón fuera de la mesa sin votación. Tenga en cuenta que la función resetRating() también se utiliza para llamar a la función hideDiv() que esconde la div de mensaje.
Cada celda de la tabla se asigna una función onmouseover de hoverStar() que cambia la imagen de fondo de tablas a la imagen de estrellas adecuados, así como cambia el texto de la div de mensaje.
Mientras todo esto parece funcionar bien, hay un problema que no parecen de moverse. Decidí que no quiero div mensaje a desaparecer el instante en que un usuario trasladó su puntero de ratón fuera de la mesa (esta sería la función hideDiv() que fue llamada por la función resetRating() que se desencadenó el evento onmouseout de tablas. Así, para dar el mensaje div un segundo antes de que desaparezca, que decidí llamar a hideDiv como tal: setTimeout ("hideDiv", 2000); Ahora, el problema es que una vez he añadido esto, div mensaje desaparece después de unos segundos incluso cuando el puntero del mouse está aún sobre la mesa! Si los fiunctions resetRating() y hideDiv() sólo se supone que se dispararon en el evento onmouseout tablas, ¿por qué estoy recibiendo a la este comportamiento? A continuación se presenta el código html y javascript.
Cada celda de la tabla se asigna una función onmouseover de hoverStar() que cambia la imagen de fondo de tablas a la imagen de estrellas adecuados, así como cambia el texto de la div de mensaje.
Mientras todo esto parece funcionar bien, hay un problema que no parecen de moverse. Decidí que no quiero div mensaje a desaparecer el instante en que un usuario trasladó su puntero de ratón fuera de la mesa (esta sería la función hideDiv() que fue llamada por la función resetRating() que se desencadenó el evento onmouseout de tablas. Así, para dar el mensaje div un segundo antes de que desaparezca, que decidí llamar a hideDiv como tal: setTimeout ("hideDiv", 2000); Ahora, el problema es que una vez he añadido esto, div mensaje desaparece después de unos segundos incluso cuando el puntero del mouse está aún sobre la mesa! Si los fiunctions resetRating() y hideDiv() sólo se supone que se dispararon en el evento onmouseout tablas, ¿por qué estoy recibiendo a la este comportamiento? A continuación se presenta el código html y javascript.
JAVASCRIPT Código: [ Select ]
function showDiv() {
showRateText('MainContent_RateWrap', 'RateMsg', 200, 215);
}
function showRateText(parentEle, dropDownEle, dropDownWidth, offSetRight) {
parentElement = document.getElementById(parentEle);
dropDownElement = document.getElementById(dropDownEle)
//position
dropDownElement.style.left = (getOffsetLeft(parentElement) - offSetRight) + 'px';
dropDownElement.style.top = (getOffsetTop(parentElement) + parentElement.offsetHeight + 3) + 'px';
//width
dropDownElement.style.width = dropDownWidth + 'px';
dropDownElement.style.visibility = 'visible';
}
function hoverStar(cls, STAR) {
document.getElementById('MainContent_Rating').style.backgroundImage = "URL(../images/" + cls + ")";
var targetElement = $get('starTxt')
targetElement.className = 'starTxtExp';
targetElement.innerHTML = STAR + ' out of 5 stars';
}
function resetRating(rst) {
document.getElementById('MainContent_Rating').style.backgroundImage = "URL(../images/" + rst + ")";
var targetElement = $get('starTxt');
targetElement.className = 'starTxt';
setTimeout("hideDiv()", 2000);
}
function hideDiv() {
document.getElementById('RateMsg').style.visibility = 'hidden';
}
showRateText('MainContent_RateWrap', 'RateMsg', 200, 215);
}
function showRateText(parentEle, dropDownEle, dropDownWidth, offSetRight) {
parentElement = document.getElementById(parentEle);
dropDownElement = document.getElementById(dropDownEle)
//position
dropDownElement.style.left = (getOffsetLeft(parentElement) - offSetRight) + 'px';
dropDownElement.style.top = (getOffsetTop(parentElement) + parentElement.offsetHeight + 3) + 'px';
//width
dropDownElement.style.width = dropDownWidth + 'px';
dropDownElement.style.visibility = 'visible';
}
function hoverStar(cls, STAR) {
document.getElementById('MainContent_Rating').style.backgroundImage = "URL(../images/" + cls + ")";
var targetElement = $get('starTxt')
targetElement.className = 'starTxtExp';
targetElement.innerHTML = STAR + ' out of 5 stars';
}
function resetRating(rst) {
document.getElementById('MainContent_Rating').style.backgroundImage = "URL(../images/" + rst + ")";
var targetElement = $get('starTxt');
targetElement.className = 'starTxt';
setTimeout("hideDiv()", 2000);
}
function hideDiv() {
document.getElementById('RateMsg').style.visibility = 'hidden';
}
- function showDiv() {
- showRateText('MainContent_RateWrap', 'RateMsg', 200, 215);
- }
- function showRateText(parentEle, dropDownEle, dropDownWidth, offSetRight) {
- parentElement = document.getElementById(parentEle);
- dropDownElement = document.getElementById(dropDownEle)
- //position
- dropDownElement.style.left = (getOffsetLeft(parentElement) - offSetRight) + 'px';
- dropDownElement.style.top = (getOffsetTop(parentElement) + parentElement.offsetHeight + 3) + 'px';
- //width
- dropDownElement.style.width = dropDownWidth + 'px';
- dropDownElement.style.visibility = 'visible';
- }
- function hoverStar(cls, STAR) {
- document.getElementById('MainContent_Rating').style.backgroundImage = "URL(../images/" + cls + ")";
- var targetElement = $get('starTxt')
- targetElement.className = 'starTxtExp';
- targetElement.innerHTML = STAR + ' out of 5 stars';
- }
- function resetRating(rst) {
- document.getElementById('MainContent_Rating').style.backgroundImage = "URL(../images/" + rst + ")";
- var targetElement = $get('starTxt');
- targetElement.className = 'starTxt';
- setTimeout("hideDiv()", 2000);
- }
- function hideDiv() {
- document.getElementById('RateMsg').style.visibility = 'hidden';
- }
HTML Código: [ Select ]
<table id="MainContent_Rating" class="Rating_2" onmouseover="showDiv()" onmouseout="resetRating('Rating_2.png');" align="right">
<tr>
<td id="MainContent_rtgTD1" onmouseover="hoverStar('Rating_1.png', 'Poor - 1');">
</td>
<td id="MainContent_rtgTD2" onmouseover="hoverStar('Rating_2.png', 'Fair - 2');">
</td>
<td id="MainContent_rtgTD3" onmouseover="hoverStar('Rating_3.png', 'Average - 3');">
</td>
<td id="MainContent_rtgTD4" onmouseover="hoverStar('Rating_4.png', 'Good - 4');">
</td>
<td id="MainContent_rtgTD5" onmouseover="hoverStar('Rating_5.png', 'Excellent - 5');">
</td>
</tr>
</table>
<tr>
<td id="MainContent_rtgTD1" onmouseover="hoverStar('Rating_1.png', 'Poor - 1');">
</td>
<td id="MainContent_rtgTD2" onmouseover="hoverStar('Rating_2.png', 'Fair - 2');">
</td>
<td id="MainContent_rtgTD3" onmouseover="hoverStar('Rating_3.png', 'Average - 3');">
</td>
<td id="MainContent_rtgTD4" onmouseover="hoverStar('Rating_4.png', 'Good - 4');">
</td>
<td id="MainContent_rtgTD5" onmouseover="hoverStar('Rating_5.png', 'Excellent - 5');">
</td>
</tr>
</table>
- <table id="MainContent_Rating" class="Rating_2" onmouseover="showDiv()" onmouseout="resetRating('Rating_2.png');" align="right">
- <tr>
- <td id="MainContent_rtgTD1" onmouseover="hoverStar('Rating_1.png', 'Poor - 1');">
- </td>
- <td id="MainContent_rtgTD2" onmouseover="hoverStar('Rating_2.png', 'Fair - 2');">
- </td>
- <td id="MainContent_rtgTD3" onmouseover="hoverStar('Rating_3.png', 'Average - 3');">
- </td>
- <td id="MainContent_rtgTD4" onmouseover="hoverStar('Rating_4.png', 'Good - 4');">
- </td>
- <td id="MainContent_rtgTD5" onmouseover="hoverStar('Rating_5.png', 'Excellent - 5');">
- </td>
- </tr>
- </table>
- Anonymous
- Bot


- Registrado: 25 Feb 2008
- Mensajes: ?
- Loc: Ozzuland
- Status: Online
Agosto 28th, 2011, 4:10 pm
- Bigwebmaster
- Site Admin


- Registrado: Dic 20, 2002
- Mensajes: 8926
- Loc: Seattle, WA & Phoenix, AZ
- Status: Offline
¿Por casualidad tener esto en línea en algún lugar? Es difícil para duplicar la configuración con el código han proporcionado como aparece muchos elementos faltan todavía, incluyendo imágenes, hojas de estilo, etc.. Creo que si veo exactamente lo que se refiere a que puedo ser capaz de brindar cierta información.
Ozzu Hosting - Want your website on a fast server like Ozzu?
- WritingBadCode
- Graduate


- Registrado: Abr 28, 2011
- Mensajes: 214
- Loc: Sweden
- Status: Offline
En las tablas el evento onmouseout es un poco complicado y puede comer un poco como se siente.
Por ejemplo:
Si intenta el siguiente código se tenga en cuenta que la onmouseout se activa cada vez mueva el ratón entre un <td> y un <td> de Otero (pero siguen dentro de la tabla).
Sospecho que esto es lo que almuerzos/desencadenadores el evento mientras que "celebrar" el ratón dentro de la tabla.
Sin embargo como bigweb dijo: es difícil duplicar la configuración con el código proporcionado así un vínculo/no herir más código.
Por ejemplo:
Código: [ Select ]
<html>
<head>
</head>
<body bgcolor="red">
<table border="1" cellspacing="20" onmouseout="alert('hello');">
<tr>
<td>Rate 1
</td>
<td>Rate 2
</td>
<td>Rate 3
</td>
<td>Rate 4
</td>
<td>Rate 5
</td>
</tr>
</table>
</body>
</html>
<head>
</head>
<body bgcolor="red">
<table border="1" cellspacing="20" onmouseout="alert('hello');">
<tr>
<td>Rate 1
</td>
<td>Rate 2
</td>
<td>Rate 3
</td>
<td>Rate 4
</td>
<td>Rate 5
</td>
</tr>
</table>
</body>
</html>
- <html>
- <head>
- </head>
- <body bgcolor="red">
- <table border="1" cellspacing="20" onmouseout="alert('hello');">
- <tr>
- <td>Rate 1
- </td>
- <td>Rate 2
- </td>
- <td>Rate 3
- </td>
- <td>Rate 4
- </td>
- <td>Rate 5
- </td>
- </tr>
- </table>
- </body>
- </html>
Si intenta el siguiente código se tenga en cuenta que la onmouseout se activa cada vez mueva el ratón entre un <td> y un <td> de Otero (pero siguen dentro de la tabla).
Sospecho que esto es lo que almuerzos/desencadenadores el evento mientras que "celebrar" el ratón dentro de la tabla.
Sin embargo como bigweb dijo: es difícil duplicar la configuración con el código proporcionado así un vínculo/no herir más código.
Página 1 de 1
Para responder a este tema que necesita para ingresar o registrarse. Es gratis.
Publicar Información
- Total de mensajes en este tema: 3 mensajes
- Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 169 invitados
- No puede abrir nuevos temas en este Foro
- No puede responder a temas en este Foro
- No puede editar sus mensajes en este Foro
- No puede borrar sus mensajes en este Foro
- No puede enviar adjuntos en este Foro
