problemas con una caja deslizante flotante

ricky0123456 · #1 (**permalink**) 20/09/2012, 12:15

Hola amigos

he hecho una caja deslizante que esta flotante al lado derecho y todo va bien hasta que le pongo el mouse encima, pues en ese momento se abre bien pero una vez retiro el mouse, se desliza hacia la derecha y me desaparece totalmente del mismo margen derecho ..

les dejo el código por si son tan amables de ayudarme

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>

<script type="text/javascript" src="http://disemuchonet.blogcindario.com/ficheros/jquery-1-4-2-min.js">
</script>
<script src="jQuery/includes/jquery-1.4.2.js" type="text/javascript"></script>
<script src="jQuery/includes/jquery.ui.core.min.js" type="text/javascript"></script>
<script src="jQuery/includes/jquery.ui.widget.min.js" type="text/javascript"></script>
<script src="jQuery/includes/jquery.ui.tabs.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var j = jQuery.noConflict();
j(function (){
j(".esthela").hover(function(){
j(".esthela").stop(true, false).animate({right:"0"},"medium");
},function(){
j(".esthela").stop(true, false).animate({right:"-400"},"medium");
},500);
return false;
});
//]]>
</script>

<style type="text/css">
/*<![CDATA[*/
.esthela {
float:right;
width:340px;
height:250px;
background: url(images/contacto_deslizante.png) no-repeat !important;
display:block;
right: -400px;
padding:0;
position:fixed;
top: 56px;
z-index:1002;
}
/*]]>*/
</style>
<link href="jQuery/css/jquery.ui.core.css" rel="stylesheet" type="text/css" />
<link href="jQuery/css/jquery.ui.tabs.css" rel="stylesheet" type="text/css" />
<link href="jQuery/css/jquery.ui.theme.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* BeginOAWidget_Instance_2140022: #jQueryTabs */

#jQueryTabs.ui-tabs .ui-tabs-panel {
display: block;
border: 0px solid #aaaaaa;
padding: 1ex 1.4em;
background: #ffffff;
font-family: inherit;
font-size: 0.8em/*{fsDefault}*/;
}

/* Component containers
----------------------------------*/
#jQueryTabs .ui-widget {

}
#jQueryTabs .ui-widget-content {
border: 1px solid #aaaaaa/*{borderColorContent}*/;
background: #ffffff/*{bgColorContent}*/ url(jQuery/css/images/ui-bg_flat_75_ffffff_40x100.png)/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/;
color: #222222/*{fcContent}*/;
}
#jQueryTabs .ui-widget-content a {
color: #0000ff/*{fcContent}*/;
}
#jQueryTabs .ui-widget-header {
border: 1px solid #aaaaaa/*{borderColorHeader}*/;
background: #cccccc/*{bgColorHeader}*/ url(jQuery/css/images/ui-bg_highlight-soft_75_cccccc_1x100.png)/*{bgImgUrlHeader}*/ 50%/*{bgHeaderXPos}*/ 50%/*{bgHeaderYPos}*/ repeat-x/*{bgHeaderRepeat}*/;
color: #222222/*{fcHeader}*/;
font-weight: bold;
font-family: inherit;
font-size: 0.8em/*{fsDefault}*/;
}

/* Interaction states
----------------------------------*/
#jQueryTabs .ui-state-default, .ui-widget-content .ui-state-default {
border: 1px solid #d3d3d3/*{borderColorDefault}*/;
background: #e6e6e6/*{bgColorDefault}*/ url(jQuery/css/images/ui-bg_glass_75_e6e6e6_1x400.png)/*{bgImgUrlDefault}*/ 50%/*{bgDefaultXPos}*/ 50%/*{bgDefaultYPos}*/ repeat-x/*{bgDefaultRepeat}*/;
font-weight: normal/*{fwDefault}*/;
color: #555555 /*{fcDefault}*/;

}
#jQueryTabs .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
color: #555555/*{fcDefault}*/;
text-decoration: none;
}
#jQueryTabs .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus {
border: 1px solid #999999/*{borderColorHover}*/;
background: #dadada/*{bgColorHover}*/ url(jQuery/css/images/ui-bg_glass_75_dadada_1x400.png)/*{bgImgUrlHover}*/ 50%/*{bgHoverXPos}*/ 50%/*{bgHoverYPos}*/ repeat-x/*{bgHoverRepeat}*/;
font-weight: normal/*{fwDefault}*/;
color: #212121 /*{fcHover} #212121*/;
font-family: inherit;
font-size: inherit/*{fsHover}*/;
}
#jQueryTabs .ui-state-hover a, .ui-state-hover a:hover {
color: #212121/*{fcHover}*/;
text-decoration: none;
}
#jQueryTabs .ui-state-active, .ui-widget-content .ui-state-active {
border: 1px solid #aaaaaa/*{borderColorActive}*/;
background: #ffffff/*{bgColorActive}*/ url(jQuery/css/images/ui-bg_glass_65_ffffff_1x400.png)/*{bgImgUrlActive}*/ 50%/*{bgActiveXPos}*/ 50%/*{bgActiveYPos}*/ repeat-x/*{bgActiveRepeat}*/;
font-weight: normal/*{fwDefault}*/;
color: #212121/*{fcActive}*/;
font-family: inherit;
font-size: inherit/*{fsSelected}*/;
}
#jQueryTabs .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
color: #212121/*{fcActive}*/;
text-decoration: none;
}

/* EndOAWidget_Instance_2140022 */
</style>
<script type="text/xml">

</script>
</head>
<div class="esthela" style="right: -300px;">
<div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;">
<div class="disemucho.jimdo.com"> /* inseta texto cabecera */ </div>
</div>
</div>

gracias de antemano
saludos cordiales

NSD · #2 (**permalink**) 20/09/2012, 12:35

1 - Esto no tiene NADA que ver con php.
2 - Revisa de donde sacaste el codigo.
3 - ¿No usas la etiqueta body nunca?
4 - No uses hotlink, es una mala practica.
5 - Prueba esto:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin titulo</title>
<script type="text/javascript" src="http://disemuchonet.blogcindario.com/ficheros/jquery-1-4-2-min.js">
</script>
 
<script type="text/javascript">
//<![CDATA[
var j = jQuery.noConflict();
j(function (){
j(".esthela").hover(function(){
j(".esthela").stop(true, false).animate({right:"0"},"medium");
},function(){
j(".esthela").stop(true, false).animate({right:"-400"},"medium");
},500);
return false;
});
//]]>
</script>
 
<style type="text/css">
/*<![CDATA[*/
.esthela {
float:right;
width:450px;
height:350px;
background: url(http://u.jimdo.com/www21/o/s4e9df44a0ad8ccd8/img/i89f1a63f61ac63da/1340075377/std/image.png) no-repeat !important;
display:block;
right: -400px;
padding:0;
position:fixed;
top: 56px;
z-index:1002;
}
/*]]>*/
</style>
</head>
<body>
<div class="esthela" style="right: -400px;">
    <div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;">
            Aqui el contenido
    </div>
</div>
</body>
</html>

Saludos.

PD: la proxima intenta postear en el foro correcto ;)

ricky0123456 · #3 (**permalink**) 20/09/2012, 12:51

ok muchas gracias y disculpa mi torpeza..

lo que pasa es que realmente el que me has enviado es el que yo he modificado con mi imagen y mis medidas..

lo que no se es como puedo arreglar lo de que no se vaya para atras del todo..

me puedes ayudar por favor

gracias ;)

NSD · #4 (**permalink**) 20/09/2012, 13:04

ahora mismo estoy saliendo para la universidad, cuando regrese a la noche le hecho un ojo. si logras resolverlo antes avisa comentando aqui saludos.

ricky0123456 · #5 (**permalink**) 20/09/2012, 13:43

Cita:

Iniciado por NSD

ahora mismo estoy saliendo para la universidad, cuando regrese a la noche le hecho un ojo. si logras resolverlo antes avisa comentando aqui saludos.

muchas gracias estare en ello

Saludos

ricky0123456 · #6 (**permalink**) 20/09/2012, 14:00

Cita:

Iniciado por ricky0123456

muchas gracias estare en ello

Saludos

Cita:

Amigo lo saque, estaba aquí

j(".esthela").stop(true, false).animate({right:"-300"},"medium");

en {right:"-300"} estaba 400.. y como ahora es mas pequeño el modelo que yo he hecho solo había que bajarle el tamaño...

Mil gracias y disculpa las molestias..

Pd. ; si necesitas algo de diseño yo soy diseñador gráfico, como puedes ver en webs ni pajotera.. jejej