Página 1 de 1
DockMenu con JQuery en phpBB3
Publicado: 06 Ene 2010, 16:08
por Dr0gNan
URL:
http://elbardealktodostemen.net/foro/
Versión phpBB: phpBB3 (3.06)
MODs Instalados: links-opening-new-windows
Prime Quick Reply
eD2k links processing with availability statistics
Activity Stats
Simple Hide
Genders
PhpBBPortal
mChat
Radio
FAQ Manager
Plantilla(s) usada(s): eTech, eTech Red
Servidor: Linux, de pago
Actualización desde otra versión: No
Conversión desde otro sistema de foros: No
De nuevo me paso por este foro tan bueno de soporte para preguntaros algo, llevo unas horas cambiando valores y parametros y no doy con lo que esta mal.
Estoy intentando implementar un DockMenu con botones a los que al pasar el raton se hacen mas grandes y se muestra un texto a modo de leyenda. Todo esto lo he conseguido implementar a la perfeccion salvo un detalle y es que me los carga en una zona del foro como superpuestos con el foro en si, aparecen como flotantes y por mas que miro los estilos y el codigo no doy con que puede ser.
La forma de hacerlo lo he sacado de: http://craftyman.net/dock-menu-con-jquery/
Y las pruebas y el estado actual esta aqui, en el foro de pruebas: http://testing.elbardealktodostemen.net/index.php
Gracias, un saludo
Re: DockMenu con JQuery en phpBB3
Publicado: 07 Ene 2010, 05:55
por Makoto
te recomiendo q trabajes en un html aparte no eh probado mod quisas trabaje haci pero cheka bin facil q no cierra una tabla
Re: DockMenu con JQuery en phpBB3
Publicado: 07 Ene 2010, 10:34
por HuanManwe
en la parte de arriba aparece trozos de codigo, como si lo hubieras puesto mal:
Código: Seleccionar todo
$(document).ready( function() { $('#dock2').Fisheye( { maxWidth: 60, //m�ximo de expansi�n items: 'a', //etiqueta de Items itemsText: 'span', //etiqueta del texto del Item container: '.dock-container2', //contenedor del dockmenu itemWidth: 40, //tama�o inicial del Item proximity: 80, //aproximaci�n del mouse para la expansi�n alignment : 'left', //alineaci�n de item valign: 'bottom', //alineaci�n vertical del item halign : 'center' //alineaci�n del dockmenu } ) } );
Revisa la instalacion de ese mod.
Re: DockMenu con JQuery en phpBB3
Publicado: 07 Ene 2010, 12:31
por Dr0gNan
Makoto, junto con el MOD de esa pagina vienen unas paginas de ejemplos del codigo en HTML y no aparece flotando.
Perdona HuanManwe, un compañero habia estado toqueteando y lo habia dejado como el rosario de la aurora.
Ya lo he puesto bien y no aparecen trozos de codigo ni nada por el estilo. El Dock sale bien pero se carga flotando en una posicion fija de la pagina. He mirado con la extension "Firebug" de Firefox pero no veo porque se carga ahi. Ademas he editado el archivo de estilos indicandole en los valores "height" que sea 0 en vez de 50 (que es lo que pone por defecto) pero tampoco es eso.
A continuacion os comento en que pagina y la parte del codigo donde he colocado el MOD. en rojo pongo el codigo que he añadido sacado de la pagina:
http://craftyman.net/dock-menu-con-jquery/
Archivo
overall_header.html de la plantilla:
</script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/ca_scripts.js"></script>
<link rel="stylesheet" href="{ROOT_PATH}mchat/mchat_prosilver.css" type="text/css" />
<script type="text/javascript" src="{ROOT_PATH}jquery_core_mini.js"></script>
<script type="text/javascript" src="{ROOT_PATH}jquery_cookie_mini.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>
<!--[if lt IE 7]>
<style type="text/css">
div, img { behavior: url(iepngfix.htc) }
</style>
<![endif]-->
<link href="js/style.css" rel="stylesheet" type="text/css" />
</head>
<body class="{S_CONTENT_DIRECTION}">
Archivo
index_body.html de la plantilla:
<!-- INCLUDE overall_header.html -->
<div class="dock" id="dock2">
<div class="dock-container2">
<a class="dock-item2" href="#">
<span>Home</span><img src="images/home.png" alt="home" />
</a>
<a class="dock-item2" href="#">
<span>RSS</span><img src="images/rss.png" alt="rss" />
</a>
</div>
</div>
<!-- IF U_MCP -->
<div id="pageheader">
<p class="linkmcp">[ <a href="{U_MCP}">{L_MCP}</a> ]</p>
</div>
y
<script type="text/javascript">
$(document).ready(
function()
{
$('#dock2').Fisheye(
{
maxWidth: 60, //máximo de expansión
items: 'a', //etiqueta de Items
itemsText: 'span', //etiqueta del texto del Item
container: '.dock-container2', //contenedor del dockmenu
itemWidth: 40, //tamaño inicial del Item
proximity: 80, //aproximación del mouse para la expansión
alignment : 'left', //alineación de item
valign: 'bottom', //alineación vertical del item
halign : 'center' //alineación del dockmenu
}
)
}
);
</script>
<!-- INCLUDE overall_footer.html -->
Os pongo ademas el codigo de la hoja de estilos que viene en el comprimido de esa pagina (como he comentado arriba cambie los height de 50 a 0 para ver si era eso pero parece que no es):
Código: Seleccionar todo
/* dock - top */
.dock {
position: relative;
height: 50px;
text-align: center;
}
.dock-container {
position: absolute;
height: 50px;
background: url(images/dock-bg2.gif);
padding-left: 20px;
}
a.dock-item {
display: block;
width: 40px;
color: #000;
position: absolute;
top: 0px;
text-align: center;
text-decoration: none;
font: bold 12px Arial, Helvetica, sans-serif;
}
.dock-item img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}
.dock-item span {
display: none;
padding-left: 20px;
}
/* dock2 - bottom */
#dock2 {
width: 100%;
bottom: 0px;
position: absolute;
left: 0px;
}
.dock-container2 {
position: absolute;
height: 50px;
background: url(images/dock-bg.gif);
padding-left: 20px;
}
a.dock-item2 {
display: block;
font: bold 12px Arial, Helvetica, sans-serif;
width: 40px;
color: #000;
bottom: 0px;
position: absolute;
text-align: center;
text-decoration: none;
}
.dock-item2 span {
display: none;
padding-left: 20px;
}
.dock-item2 img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}
Me gustaria que apareciese debajo del menu de navegacion (x mensajes privados · FAQ · Chat · Desconectarse ·)
Muchas gracias por vuestra ayuda, un abrazo
Re: DockMenu con JQuery en phpBB3
Publicado: 07 Ene 2010, 17:35
por HuanManwe
Re: DockMenu con JQuery en phpBB3
Publicado: 07 Ene 2010, 18:13
por MR.PABLO
HuanManwe, ese código se pondría en en el header?
Re: DockMenu con JQuery en phpBB3
Publicado: 07 Ene 2010, 18:35
por Dr0gNan
Probare a ver, pero tiene toda la pinta de que me va a hacer algo parecido.
Gracias
Re: DockMenu con JQuery en phpBB3
Publicado: 07 Ene 2010, 23:54
por Dr0gNan
Bien, arrglado, ya se porque era. Estaba poniendo el que estaba destinado al footer y por eso salia mas abajo. Al final en vez de meter codigo en el overall_header he codigo y he creado un archivo nuevo y he hecho un include desde el header y ha kedado resalao
Gracias por la ayuda.
Re: DockMenu con JQuery en phpBB3
Publicado: 08 Ene 2010, 16:55
por alktodostemen
Yo soy su compañero
estropealotodo 
, gracias por la ayuda a tod@s y rechulo te quedo si señor