Ver Mensaje Individual
  #1 (permalink)  
Antiguo 20/09/2012, 12:15
Avatar de ricky0123456
ricky0123456
 
Fecha de Ingreso: septiembre-2012
Ubicación: Caracas
Mensajes: 25
Antigüedad: 11 años, 8 meses
Puntos: 0
Pregunta problemas con una caja deslizante flotante

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">
<!--
<oa:widgets>
<oa:widget wid="2140022" binding="#jQueryTabs" />
</oa:widgets>
-->
</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