Consulta sobre activar y desactivar solapas

[Dalvenjha]

Puedes usar ajax, claro está dentro del div que vaya a actualizarse con ajax, no podrás usar javascript, me parece la mejor solución el ajax de hecho. Disculpa que no pueda responder como antes, pero en estos momentos estoy un poco atareado.

En cuanto a lo dicho por Mikel, gracias tío. Lo tuyo es genial, y sabes mucho de CSS, probablemente más que yo. Me saco el sombrero!!

Saludos!!

[Mikmoro]

Iniciado por locoxchacho

Yo tengo un ifram donde se abre el link que apretamos en el menu. Cuando hago clic, queda como activo el link, pero una vez que hago clic en el iframe, se desactiva. Hay alguna forma de solucionar eso? O una alternativa al iframe, que no sea la de motools, pq debo cargar muchas secciones con flash, y la pagina se tornaria muy pesada de cargar??

Si los flash son pesados sí. En ese caso yo usaría AJAX sin duda, ademá de que es fácil hacer que la clase activa sea persistente.

Mira este ejemplo
http://www.dynamicdrive.com/dynamici...axtabscontent/
a ver si lo puedes adaptar.

Si no quieres usar AJAX, el ejemplo del javascript que puse es exactamente para que el activo sea persistente. ¿Lo has probado?

[locoxchacho]

mikmoro, gracias por tu respuesta...

he probado tu javascript, pero no con el nuevo codigo... lo que sucede es que, de la forma que lo hice yo, con una clase por li, no se si podre usar el javascript, ya que lo que hace es asignar la clase currente al a, no es cierto?? se pueden usar dos clases, juntas??

por ejemplo:

.nosotros a.current {background-image...}... no, no??

si no se puede, entonces, tratare con el ajax... pasa que no tengo mucha "cancha" con el ajax...

nuevamente, gracias!!

[Dalvenjha]

Casi nadie tiene cancha con esa nota xD, pero lo que quieres es bien básico, lo malo de usar solo javascript, es el peso de tu página, y que para que uses tus efectos de javascript, por lo general tendrás que esperar como mínimo que se cumpla el evento "onload", en cambio con ajax no tendrás esos problemas.

Quisiera ser más útil ahora mismo, pero salgo a reunión, más tarde vemos mejor todo el asunto.

saludos!!

[locoxchacho]

ok, espero tu ayuda entoces!!

y con respecto a la "doble clase".. eso no existe, no es cierto??

saludos.

[Mikmoro]

Iniciado por locoxchacho

he probado tu javascript, pero no con el nuevo codigo... lo que sucede es que, de la forma que lo hice yo, con una clase por li, no se si podre usar el javascript, ya que lo que hace es asignar la clase currente al a, no es cierto??

¿Qué nuevo código? te estoy hablando del último mensaje, el último ejemplo, no hay nuevo código, porque es el primero que pongo en este hilo, pero como tienes 3 con la misma cuestión ya es imposible

Iniciado por locoxchacho

se pueden usar dos clases, juntas??

Bueno, lo siento pero yo abandono: las disculpas no sirven de nada si no hay propósito de enmienda, y tú parece que no te quieres enmendar. Hace 4 o 5 mensajes puse esto:

Iniciado por Mikmoro

Si en el ejemplo no lo he hecho con dos clases en lugar de ID, es porque el maldito IE6 no funciona con dos clases.

Si no lees lo que te ponemos y vuelves a preguntar lo mismo es la forma más fácil de acabar con mi paciencia.

Hasta la vista.

[locoxchacho]

mikmoro, me referia a mi nuevo codigo.... no al tuyo.

quize decir que lo habia probado con el viejo codigo mio, y no con el de una clase por item.

Por otro lado, no se por que te enojas tanto.... si la misma solucion de Ajax que me da, viendo el codigo, usa doble clase!! Si esa es la unica solucion, entonces, que hago??

En serio.... El dia que sea experto como tu, estaré encantado de ayudar a los inexpertos como yo, no se porque te enojas tanto!

De todas formas, te agradezco por toda la ayuda... auqnque no quieras aceptar ese agradecimiento.

saludos

[marx-pola]

Iniciado por Mikmoro

En fin, bueno, aunque para mi que en el hilo hay un lío tremendo, aquí te pongo una forma bastante sencilla de resolverlo.

A ver si las ves clara.

Aaaah!!! Justo estaba viendo data sobre esto... muy bien hecho Mikmoro !!!!!!!!

Es realmente sencillo, pero me surgió un problema al acoplarlo donde necesitaba que funcione. Me sale un error de javascript y no me carga la solapa de FOTOS.

Mira: SOLAPAS FINALES

No pude encontrar donde está el conflicto y no me deja cargar el contenido de la solapa fotos.

Gracias master... has dado en el clavo :)

Saludos.

[Mikmoro]

Iniciado por locoxchacho

Por otro lado, no se por que te enojas tanto.... si la misma solucion de Ajax que me da, viendo el codigo, usa doble clase!! Si esa es la unica solucion, entonces, que hago??

No, como he dicho no me enojo tanto; simplemente me has roto los nervios. ¿Dónde ves dos clases simultáneas en el ejemplo con AJAX que te he puesto? ¿en serio habías leído lo que había dicho sobre la doble clase e IE6 antes de preguntar? ¿no habías probado mi solución y todavía seguías preguntando en lugar de probar?

De verdad: ¿qué esperas? ¿no ves que todos hacemos esto por gusto, porque nos da la gana? Si yo me esfuerzo en buscar una solución a tu problema y tú no te esfuerzas en leerla y probarla antes de volver a preguntar, me estás faltando al respeto considerablemente, ¿no te parece?
Demuestra que te esfuerzas y recibirás ayuda de todo el mundo.

No me enojo tanto; prefiero dejarlo y que otro te ayude antes de enfadarme de verdad.

[Mikmoro]

Iniciado por marx-pola

Es realmente sencillo, pero me surgió un problema al acoplarlo donde necesitaba que funcione. Me sale un error de javascript y no me carga la solapa de FOTOS.

En Firefox te está marcando un error aquí:

divcual.className = estilo;

¿Esa clase no debería ir entrecomillada? no obstante, este no es mi fuerte, y creo que esto ya no es asunto de la consulta inicial. Igual te ayudan mejor en el foro de javascript.

[Dalvenjha]

O_o, han sacado de sus casillas a Mikel, pero es que en serio, uno ya no sabe donde atenderte man, osea, te explica y no atiendes, y luego vas a otro hilo y preguntas lo mismo. A mi sinceramente me descuadras como ya te dije. Vamos que poner un poco de orden te ayudará.

Saludos!!

De regreso (H).

[locoxchacho]

Bueno, o sinceramente no se nada de CSS, o estamos hablando de distintos ejemplos. Yo hablaba del ultimo, el de AJAX Tabs, donde para que se marquen las tabs utiliza este CSS:

.shadetabs li a.selected:hover{ /*selected main tab style */
text-decoration: none;
}

NO SON DOS CLASES ESO??? una shadetabs y la otra selected???

.indentmenu ul li a.selected{ (dos clases??)
.modernbricksmenu2 a.selected{

todo eso esta en el css del Ajax tabs...

y por si interesa, aunque seguro que no... lo hice similar, pero en vez de clases con un id y luego le aplico la clase current correspondiente a cada id... es lo mas logico que se me ocurrio. Lo que no logro hacer es que me funcionen los dos scripts juntos, el de agregar la clases, y el de desplegar el menu. Pero bueno, supongo que eso ya es tema de otro foro, y para que no me reten mas, la hare alli la pregunta. Pero ahora si no puedes decir que pregunto sin probar: lo he hecho.

Vamos, mikmoro, que nunca quize faltarte el respeto! Si te admiro, por que haria eso...??..

Solo, lo acepto, soy un poco impaciente.. y por eso he pedido miles de veces MIL DISCULPAS.

gracias nuevamente.

[Mikmoro]

Iniciado por locoxchacho

NO SON DOS CLASES ESO??? una shadetabs y la otra selected???

.indentmenu ul li a.selected{ (dos clases??)
.modernbricksmenu2 a.selected{

todo eso esta en el css del Ajax tabs...

Lo siento, no hay problema. Por mi parte no pasa nada.

Y no, eso no son dos clases: simplemente es un elemento con clase "indentmenu" que tiene dentro un UL, dentro de este un LI, de este un A con clase selected:

<div class="indentmenu">
<ul>
<li>
<a href="#" class="selected">...</a>
</li>
</ul>
</div>

Dos clases serían:
.indentmenu.selected {...

con el elemento:

<a href="#" class="indentmenu selected">...</a>

que es lo que no puede funcionar en IE6.

[locoxchacho]

o sea, que si tengo un un li con clase "nosotros" y un elemento con clase "current", de esta forma

<li class="nosotros"><a herf="#" class="current"></a></li>...

.nosotros a.current...

eso se puede definir?? o solo se aplica a los divs y sus contenidos??

gracias mikmoro por la ayuda!!

y te aclaro que, a pesar de el lio que arme, y de que a veces soy impaciente, que repito preguntas (causa y consecuencia)... ASI Y TODO... tu me sigues respondiendo...

en el foro de JS me tienen olvidado, je!! Asique, para que no pienses que te falto el respeto ni que no aprecio tu colaboracion, mikmoro!!

saludos!

[Mikmoro]

Iniciado por locoxchacho

o sea, que si tengo un un li con clase "nosotros" y un elemento con clase "current", de esta forma

<li class="nosotros"><a herf="#" class="current"></a></li>...

.nosotros a.current...

eso se puede definir??

Si, sin ningún problema. Son elementos diferentes, cada uno de ellos con su clase, y ademas anidados (A dentro de LI). Eso ofrece muchísimas posibildades.

[locoxchacho]

mik, se que nuevamente estoy preguntando otra cosa que no tiene que ver con el hilo, pero no obtengo respuesta en el foro de JS.

La cosa es que no logro que los dos scripts funcionen al mismo tiempo, sera pq los dos tienen eventos onclick?? (agregar la clase y abrir los menu, o cerrarlos?).. se puede hacer que funcioen al mismo tiempo??... no quiero explayarme mas asi no lo lio mas, solo saber si se puede que los dos funcionen al mismo tiempo.

gracias!!

pablo

[marx-pola]

Mikel: no sabes lo que me pasó.... buaaaaaaaaaaaaaa!!!!!!!!

FUNCIONAR FUNCIONA PERFECTO... PERO SOLO EN FIREFOX. En el IE la segunda solapa no queda ACTIVADA.

Logré que al seleccionar cada una de las solapas me muestre su correspondiente contenido pero solo se ACTIVA y DESACTIVA la primer solapa, la otra NO se queda activada.

La verdad no sé si es un tema de scripts o de CSS, pero casi casi estamos por lograrlo, gracias a tí amigo :) y a todos los q colaboran siempre.

Acá está la web donde aparece todo lo expuesto:
http://www.newgym.com.ar/x/demo6.html

Espero no sea nada complicado.

Gracias y mis cordiales saludos.

Marx.

[Mikmoro]

Pues estoy casi completamente seguro que es lo mismo que contesté en el mensaje nº #40:
tienes una línea que no tengo ni idea de dónde sale:
divcual.className = estilo;

que si cambias por:
divcual.className = 'current';

funciona en IE y FF perfectamente.

[locoxchacho]

Bueno, he venido aqui a revindicarme. A dar MI solucion al problema, y a aportarlo para todos los que quieran usarlo. Espero que sea lo suficiente como para que mik me perdone, ja! Bueno, aqui vamos...

Imaginemos que tenemos un menu <ul> con 4 items <li>, cada uno de ellos con 1 id distinto. En el CSS, definimos un clase current para cada li. Imagenemos que los elementos del menu son Nosotros, Portfolio, Experimental, Contacto. El CSS seria algo asi:

Código:

#nosotros.current {...}
#portfolio.current {...}
#experimental.current {...}
#contacto.current {...}

Aparte del resto de las propiedades que le querramos dar a los <li>, pero aca estoy hablando solamente de la clase current de cada uno.

Ahora, aqui viene la parte novedosa del codigo, y es el JS. Seguramente, no es lo más facil, ni lo mas corto (se lia si tienes muchos items en el menu, o muchos submenus, etc... pero en mi experiencia personal, prefiero escribir un par de lineas mas de codigo, que seguir buscando inutilmente algo que se adecue PERFECTAMENTE a mi necesidad), ni lo mas prolijo, pero bueno, es una solucion que funciona en todos los navegadores.

Lo que haremos es crear una funcion de JS para CADA UNA de los <li>. Por lo tanto, si tenemos 4 items <li>, crearemos 4 funciones. En cada una de ella, lo que haremos sera asignar la clase current al item que hemos clickeado, y quitarle la clase current a los otros 3 items (por mas que no la tuviera, pero como nuca sabemos cual de los 4 va a estar pulseado, lo hacemo por las dudas). Las dos primeras funciones seria algo asi...

Código:

function nosotros(){

document.getElementById('nosotros').className = 'current';
document.getElementById('portfolio').className = '';
document.getElementById('experimental').className = '';
document.getElementById('contacto').className = '';

}

function portfolio(){
document.getElementById('portfolio').className = 'current';
document.getElementById('nosotros').className = '';
document.getElementById('experimental').className = '';
document.getElementById('contacto').className = '';
}

Las otras dos son iguales, solo que cambiando el id del li en cuestion,y el nombre de la funcion...

Y ahora, lo unico que falta es aplicarlo al html, de esta forma:

Código HTML:

<ul>
<li id="portfolio"><a href="#" onclick="portfolio()">Portfolio</a></li>
<li id="nosotros"><a href="#" onclick="nosotros()">Nosotros</a></li>
...
</ul> 

Y asi con cuantos elementos de menu tengamos.

Repito, no será la solucion más logica, ni mas corta, pero funciona. Y como dijo mikmoro algun mensaje atras, si funciona, esta bien.

Por las dudas, marx... su tienes otro enveto onclick en el <a>, basta con separarlo con un ";", y eso hara que funcionen tranquilamente.

Aca esta mi ejemplo en funcionamiento, en los dos primeros links.

Espero que les sirva, un saludo grande!!

Pablo.

[marx-pola]

Iniciado por Mikmoro

Pues estoy casi completamente seguro que es lo mismo que contesté en el mensaje nº #40:
tienes una línea que no tengo ni idea de dónde sale:
divcual.className = estilo;

que si cambias por:
divcual.className = 'current';

funciona en IE y FF perfectamente.

Mikel: primero, debo pedirte DISCULPAS por no haber leído tu mensaje anterior, donde ya me mostrabas la solución. A veces los nervios y presiones enceguesen... y mucho.
Segundo, debo decirte GRACIASSSSSSSSSSSS !!!!!!!!!!!!!!!!!!! multiplicado por 1000 !!!!!! Ahora sí funciona en ambos navegadores y es la solución PERFECTA que necesitaba. Además de esto, aprendí mucho de CSS que antes no sabía. Eres un GENIO por tu simpleza.

locoxchacho: Vi este ejemplo de lo que estás aplicando en la net y esta bueno tambien, pero creo que hay un item que no se te desactiva cuando presionas en los otros y es el de porfolio.

Saludosa todos.

Marx,.

[locoxchacho]

marx,

no se desactiva porque el codigo esta a medias.. eran las 4 de la mañana y seguia escribiendo codigo, y me levante a las 7.. asique por eso nomas, pero en cuanto lo termine lo posteo, pero no funciona porque no esta completo...

un saludo!! gracias por todo mikmoro tambien!!

pablo

[Dalvenjha]

Ciertamente voy a llegar a pensar que no leen lo que se les dice. La solución que propones locoxcacho ya la he propuesto antes, pero con menos código, y que te servirá para todos los elementos de tu lista que desees, incluso para los de otro tipo de elementos, es cosa de jugar un poco con el dom. Veamos repito el post.

Muy buena propuesta la de Mikel en el uso de sprites para solucionar el problema "que no tenía solución en internet". Te has anotado un punto más hombre.

Con javascript y DOM podríamos hacer más corto y sin uso de clases lo que estamos haciendo ahora mismo, claro usando sprites. Por lo menos es lo que pienso, dejame pensar un poco más para pulir mi idea. Pero te voy poniendo la idea básica.

Digamos que tu lista tenga por ID "listaimágenes" lo que haríamos sería lo siguiente:

Código:

<!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>
<script type="text/javascript">
var imagen = 0;
var suma = 1;
function backchange(){
this.style.backgroundPosition = "left bottom";
}
function backchanger(){
this.style.backgroundPosition = "left top";
}
function sprites(){
var listaimas = document.getElementById('listaimagenes').getElementsByTagName('a');
imagen+=suma;
for(var i=0; i<listaimas.length; i++) {
  var listele = listaimas[i];
  listele.style.background = "url("+imagen+".jpg)";
  listele.onblur = backchanger;
  listele.onfocus = backchange;
      }
}


</script>
<style type="text/css">
#listaimagenes{
margin:0;
padding:0;
width:300px;
height:33px;
background:black;
}
#listaimagenes li{
display:block;
float:left;
width:124px;
height:33px;
overflow:hidden;
}
#listaimagenes li a{
display:block;
width:100%;
height:100%;
}

#listaimagenes li a#cambio{
background-position: bottom left;
}


</style>
</head>
<body onload="sprites();">
<ul id="listaimagenes">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</body>
</html>

Esto funcionaría para el cambio entre enfocado y desenfocado. aún estoy viendo el caso del hover. Es una alternativa pero sin definir clases o ids a cada uno de los elementos.

=D.

Saludos!!

PD.- porsupesto tus imágenes tendrían que ser tantas como elementos de lista tengas, y tendrías que ponerles de nombres, números, del 1 hasta donde llegues xD.

[locoxchacho]

es que, te voy a ser sincero, asi nomas el codigo, no lo entiendo... sera por eso que no lo vi como una posible solucion! :S

pero ahora que mas o menos se que es lo que hice, ver si le puedo encontrar la vuelta de rosca... un saludo!!

pablo.

[Dalvenjha]

Has cambiado las clases con javascript, convirtiendo en la clase dominante al que quieras marcar, pero eso es largo, te paso a explicar el código que escribí:

Código:

var imagen = 0;
var suma = 1;

<!-- aqui estamos estableciendo dos variables globales que usaremos-->

function backchange(){
this.style.backgroundPosition = "left bottom";
}

<!--Esta es la primera función, que cambiará el CSS de el elemento al que se aplique
cambiará la posición del background que por defecto es left top a left bottom-->

function backchanger(){
this.style.backgroundPosition = "left top";
}

<!--Esta es la segunda función que regresa las cosas a la normalidad-->

<!--aqui se viene a función importante-->
function sprites(){
var listaimas = document.getElementById('listaimagenes').getElementsByTagName('a');

<!--primero formo un array o listado con todos los links del div "listaimagenes"
¿Como hago esto?, simple, ya has usado el "getElementById" entonces, ahora usamos algo
distinto más, el "getElementsByTagName" lo que hace es buscaro todos los elementos que
sean del tag que tu elijas, dentro del lugar que le indiques, por lo tanto lo que he hecho es 
decir: coge todos los links ('a') que estén dentro del div "listaimagenes" esta lista se maneja
por números que van del 0 hasta el número de elementos que haya menos 1. Es decir, si
tienes 10 links, pues creará una lista que irá del 0 al 9 con cada uno de tus links. 
-->

imagen+=suma;

<!--aqui le digo que nuestra variable imagen, que vale 0, aumente en 1 cada vez que se
ejecute la función, como es una variable global, se mantendrá el valor aunque la función
haya termido-->


for(var i=0; i<listaimas.length; i++) {

<!--aqui aplicamos un for, que es un controlador, que hará cumplir la función mientras
se cumpla un requisito osea para recorrer nuestra lista le decimos, vaya desde 0 hasta el 
número final, como nosotros nos abemos cual es ese número final, usamos la expresión
"listaimas.length" recordemos que nuestro array se llama "listaimas" asi que lo que hace es
decir, dame el tamaño del array o lista, y el último parámetro, nos dice que i avanzarrá de
uno en uno.-->

  var listele = listaimas[i];

<!--aqui creamos una nueva variable, llamada "listele" esta variable contendrá el elemento
"i" de nuestro array o lista, es decir, si i = 0, como será en el primer renglón entonces
cogeremos el elemento "0" de nuestro array, y como sabemos, el elemento 0 de un array
es el primer elemento. Y asi irá avanzando, cada valor que tome "i" será el número en el
array de nuestto elemento-->

  listele.style.background = "url("+imagen+".jpg)";

<!-- Ahora le diremos que a nuestra variable "listele" le vamos a dar un background, aqui 
es donde interviene nuestra variable imagen, tu crearás las imágenes desde el 1 hasta el número de elementos que tengas, por ejemplo si tienes 10 elementos y le quieres dar 
background a cada uno, pues creas diez imágenes y les pones nombres del 1 al 10. Bueno
sigamos, como la variable imágen crece también, entonces lo que estamos diciendo es lo 
siguiente:  a nuestro elemento listaimas[i] dale de background, nuestra imagen. Si el caso
es el del primer elemento diremos algo asi tacitamente. al elemento "listaimas[0]" dale de
background la imagen "1.jpg", como sabemos "listaimas[0]" no es otra cosa que el primer
link. Y asi irá avanzando-->

  listele.onfocus = backchange;

<!--Aqui le damos evento a nuestro elemento, le decimos lo siguiente a nuestro elemento
"listaimas[0]" "onfocus" osea cuando esté enfocado, osea al darle click y hasta que le des
click a otra cosa, le aplicas la primera función, que cambia la posición del background.-->

  listele.onblur = backchanger;
<!--Aqui le aplicamos eventos, le decimos, cuando a nuestro elemento "listaimas[i]" 
"onblur" osea cuando lo desenfoques, le aplicamos la segunda función, que hace
regresar a la normalidad el background.-->

  


      }
}

<body onload="sprites();">

<!--aqui llamamos a nuestra función, para que todo esto se cumpla cuando la página 
cargue-->

Espero no habver sido engorroso, y haber sido explicito. No soy bueno explicando, por eso lo he puesto con cucharita creo...

Saludos!!

[locoxchacho]

wow.... con razon no la entendia!! Es tan complicado.. Por mas que tengo conocimientos de PHP y algo de variables se, era muy complicado que asi como estaba, lo entendiese...

asique, muchisimas gracias por la explicación!!!

trataré de ver si puedo aplicarla, y sino, me quedare con el mio, que basicamente es lo mismo, pero de otra forma, o no??? mas larga...

saludos!!! y gracias!!!

pablo.

[kaze_chan]

vale, creo que tengo la misma cuestion, pero me he perdido y el actual estado de mi cerebro (inexistente) me impide poder concentrarme para intentar entenderlo, asi que os agradeceria si pudierais ayudarme a saber lo que necesito para mi menu

tengo un menu, "menu_gal", con 6 botones
cada boton tiene un submenu, "submenu_gal_'introduce nombre del boton'"

lo que yo quiero es que cuando le des a un boton del menu llame a la misma pagina al submenu adecuado

tengo todo (menu y submenus) en una misma pagina y a los submenus los tengo con "display: none;"

lo que necesito saber es que le tengo que poner al boton para que deshabilite la funcion "display" del CSS del submenu correspondiente a ese boton y habilite los del resto

o en su defecto una mejor forma de hacerlo

gracias por la ayuda que podais darme

=^^= =^^= =^^=

he intentado adaptar lo que ha puesto Dalvenjha en estos ultimos post y me desaparece el menu en vez de aparecer el submenu, pero bueno ya es un avance
pero creo que necesitare ayuda para saber que debo cambiar para que afecte al submenu en lugar del menu u.u