Mantener Botón Seleccionado al Presionarlo...

MasterXNicoX · #1 (**permalink**) 27/12/2010, 02:02

Hola gente,

Estoy a punto de terminar una web, pero lo único que me falta es lo del título...

Les explico como es la cosa...

El sitio tiene un menú con 5 enlaces.

Al presionar cada enlace, en un Iframe, se carga cierto archivo HTML correspondiente al enlace clickeado...

Mi problema es que no sé como hacer para que el enlace que fué presionado recientemente, tome un estilo diferente a los demás, ya sea agregándole un fondo o algo por el estilo...

Y que éste estilo se mantenga mientras nos encontramos en dicha sección y que sólo cambie cuando Clickemos en otro enlace del sitio...

Es más que nada para hacerles saber a los usuarios en que sección del sitio se encuentran...

La web, al entrar, inmediatamente carga un HTML en el Iframe, el cual pertenece al enlace de INICIO, éste último de por si, al entrar en la web, tendría que aparecer seleccionado...

Espero haberme explicado correctamente...

Daré Karma Positivo a los que me ayuden,
Es lo único que me falta... Desde ya, Muchísimas Gracias...

------

Si no han entendido algo del tema, háganmelo saber para ver si me puedo expresar mejor...

PD: He leido algo sobre "THIS" de JavaScript, pero no se como se aplica, de todas formas acepto cualquier solución posible...

Sé también que con JQuery se puede hacer, pero no he encontrado ninguna guia o tutorial que pueda comprender correctamente...

Estaba buscando más que nada alguna solución que sólo utilice HTML y CSS preferentemente, pero si no hay forma alguna de lograrlo con estos dos, acepto cualquier ayuda...

Saludos y Felices Fiestas!!!!!!!!

invixion · #2 (**permalink**) 27/12/2010, 04:21

Hola!
Son muy extensos los html de los iframes?
Porque quizás esto te seviría http://www.ndoherty.biz/demos/coda-slider/1.1.1/
Obviamente vos le darías los colores y dimensiones que quisieras.
Como vos decís esto esta hecho con jquery.
Si te gusta y querés ayuda, volvé a preguntar :)
Espero que te sirva
Guada

MasterXNicoX · #3 (**permalink**) 27/12/2010, 08:57

Gracias invixion, voy a probarlo.

Lo que si, sólo necesitaría el menú de colores de arriba y el cuadro de contenido solamente, porque no me gustan las flechas que cambian el contenido ni los enlaces inferiores que también lo hacen...

Voy a ver si me sale editarlo a mi gusto, Muchas Gracias nuevamente Colega!!

Un abrazo, de todas formas si alguien sabe de alguna otra forma, será bienvenido!!

Karma Para Ti invixion!!

invixion · #4 (**permalink**) 27/12/2010, 09:35

De nada!
Otra de las formas en las que se me ocurre es hacerlo con php, una vez lo hice de esa manera, pero ir hasta el serv no se si vale la pena.
Excepto que tus html incluyan php por lo cual costaría lo mismo ;)

emprear · #5 (**permalink**) 27/12/2010, 11:11

La solución a tu problema es usar JavaScript, sólo con CSS no se puede
Te dejo una demo funcionando en

http://foros.emprear.com/css/link-ac...nk-activo.html

es bastante más liviano que el CodaSlider

saludos

MasterXNicoX · #6 (**permalink**) 27/12/2010, 12:14

Bien invixion, podrias comentarme más acerca de la opción en PHP?? Porque seguramente estaré usando dicho lenguaje al final del proyecto jeje!!!!

Muchisimas Gracias emprear, estaré probando la demo que me dejaste!!! KARMA PARA TI TAMBIEN COLEGA

walterdevel · #7 (**permalink**) 27/12/2010, 13:01

MasterXNicoX, vas a necesitar usar tanto php como js/jquery.

Lo que tenés que hacer es declarar tus secciones ( creo dijiste que son 5 ).

por ejemplo:

Código PHP:

Ver original$secciones = array('seccion1', 'seccion2','seccion3','seccion4','seccion5');

Suponiendo siempre que sabés que estás en la sección 1, 2, etc.

Código PHP:

  $seccion_actual = 1; //sección "seccion1"

 
$indice = $seccion_actual-1;

Luego en el body, si usaras jquery y el menú fueran tags <a>:

Código Javascript:

Ver original$(document).ready(function(){
   $("a.<?php echo $secciones[$indice]?>").css('color', 'red');
});

Es solo un ejemplo hecho "al vuelo", pero es más o menos la idea.

Saludos!

Adler · #8 (**permalink**) 27/12/2010, 13:52

Hola

No es necesario usar php, es simple js y css.

Un ejemplo

Código Javascript:

Ver original<html>
<head>
<style type="text/css">
dt{display:none; color:#000000;}
.ocultar {display:none;}
.mostrar{display:block;}
.sel {color:#FF0000;}
.nosel {color:#000000;}
</style>
<script type="text/javascript">
var opciones = null;
window.onload = function() {
contenedorMenu = document.getElementById('elmenu');
for(var i = 0, elementos = contenedorMenu.getElementsByTagName('dl'); i < elementos.length; i++) {
elementos[i].onclick = function() {
obj = this.getElementsByTagName('dt');
 
    for (var j = 0; j < obj.length; j++) {
 
        obj[j].className = (obj[j]==opciones) ? 'ocultar' : 'mostrar';
 
    }
 
 
    if (opciones!= null) {
 
        for (var n = 0, recoger = opciones.getElementsByTagName('dt'); n < recoger.length; n++) {
 
            recoger[n].className = 'ocultar';
            opciones.className = 'nosel';
        }
    
    }
 
opciones = (this==opciones) ? null : this;
this.className = (this==opciones) ? 'sel' : 'nosel';
}
}
}
</script>
<head>
</head>
<body>
<div id="elmenu">
<dl>Opciones 1
<dt>Opcion 1</dt>
<dt>Opcion 2</dt>
</dl>
 
 
<dl>Opciones 2
<dt>Opcion 1</dt>
<dt>Opcion 2</dt>
<dt>Opcion 3</dt>
</dl>
 
 
<dl>Opciones 3
<dt>Opcion 1</dt>
<dt>Opcion 2</dt>
</dl>
 
 
<dl>Opciones 4
<dt>Opcion 1</dt>
</dl>
 
</div>
</body>
</html>

Suerte

MasterXNicoX · #9 (**permalink**) 28/12/2010, 01:01

Muchisimas Gracias Gente, mañana voy a probarlos y les cuento que tal me ha ido...

walterdevel y Adler, va Karma para ustedes también!! Un abrazo!!!

MasterXNicoX · #10 (**permalink**) 29/12/2010, 01:53

Bueno gente,

Después de Intentar hacer algo con la Info que me han dado,

He tenido los siguientes problemas:

-------------------------------------------------------------------

invixion, lo que me haz pasado no me convence del todo, no quiero animaciones ni nada de eso, sólo que la sección que se cargue en el iframe; aparezca seleccionada en el Menu de dicho Iframe, no se nada de jQuery y no se como quitarles las animaciones que tiene...

-------------------------------------------------------------------

emprear, tu solución ES JUSTO LO QUE ANDO BUSCANDO, pero cuando descargo los archivos en mi pc, el menu no funciona de la misma manera que cita la web, sino que sólo deja marcada una opción y aunque haga click en otro enlace; sigue marcando el que estaba y no el que clickee a lo último... no se por qué... Si saber como solucionarlo sería de gran ayuda!!...

-------------------------------------------------------------------

walterdevel, me ha parecido interesante tu solución, pero no he entendido como emplear los códigos que me haz dejado en mi sitio... el código que uso en mi menú es simple y lo cito a continuación...

Código:

<div id="menu">
<ul>
<li><a href="n/enlace1.htm" target="contenido">Enlace1</a></li>
<li><a href="n/enlace2.htm" target="contenido">Enlace2</a></li>
<li><a href="n/enlace3.htm" target="contenido">Enlace3</a></li>
<li><a href="n/enlace4.htm" target="contenido">Enlace4</a></li>
<li><a href="n/enlace5.htm" target="contenido">Enlace5</a></li>
</ul>
</div>

<div id="cuerpo">
<iframe frameborder="0" name="contenido" src="n/intro.htm" width="660px" height="280px" scrolling="auto"></iframe>
</div>

Me podrías orientar un poco más en cuanto a como insertar tus códigos con los mios...???

-------------------------------------------------------------------

Alder, tu código también es interesante, pero lo he probado de mil formas sin éxito... Con el código que he dejado para walterdevel, que es el del menú que estoy usando; podrías darme una mano en como aplicarlo??

-------------------------------------------------------------------

Saludos chicos, espero que disculpen mi ignorancia, pero esto me tiene loco, eh estado investigando pero no consigo avanzar y es lo último que me queda hacer...

Un abrazo y espero su ayuda colegas!!

Si alguien más sabe como puedo hacerlo, por favor comente en el tema,

Seguiré dando Karma a quienes me ayuden, Desde ya Muchas Gracias Gente!!!

emprear · #11 (**permalink**) 29/12/2010, 05:38

MasterxNicoX:

me baje el rar, y asi como lo baje funcionó correctamente. como habrás visto el Código es bastante sencillo, y la demo es completamente funcional.

te dejo abierto el indide de carpetas en
http://foros.emprear.com/css/link-activo-iframe/

prueba de bajar individualmente los frames de prueba, la script y el index principal.

Saludos

MasterXNicoX · #12 (**permalink**) 29/12/2010, 16:23

Bien, Gracias Amigo, ahora lo intento y te comento!!!

MasterXNicoX · #13 (**permalink**) 29/12/2010, 16:56

emprear, aun nada...

Baje archivo por archivo desde el indice de carpetas y no funciona, se queda seleccionado un solo enlace...
Y cuando hago click en otro enlace; se cambia el Iframe, pero el enlace que estaba seleccionado se queda inmovil, y no cambia a la última opción que clickee...

Baje tambien el RAR del indice de carpetas y sigue sin funcionar...

Pero cuando lo veo directamente del sitio si funciona, que cosa rara...
No toco absolutamente nada de ninguno de los códigos, no sé por que pasa esto... :S

Alguna idea??

Saludos!!

emprear · #14 (**permalink**) 29/12/2010, 17:29

MasterXNicoX:

no sé bien que decirte, yo lo bajo tal cual está, y se me ejecuta lo más bien..... como se dice..... paren las rotativas....

Antes de continuar diciendote que no encontraba motivo, se me ocurrió hacer una prueba....

Por casualidad estás navegando con Chrome? y estás ejecuntando desde el explorador de Windows ?

porque tras una detallada investigación descubrí que en
Opera, Firefox, Safari y IE 7/8 se ejecuta con normalidad desde la PC local y tambien montado en el Servidor local (Xampp), en Cambio con Chrome NO, sólo se ejecuta si está corriendo en el servidor (o en internet como la demo que te pasé al igual que en el http://localhost )

No me fijé, pero por ahi el Chrome tiene una limitación para correr scripts desde la PC Local (te recuerdo que IE también tiene dicha limitación y te muestra una advertencia, pero si le decís que si te lo ejecuta)

Asi que si es esto, entonces cuando lo subas al server no vas a tener problemas)

Ah, otra cosa, cuando te dije de dejar el index visible era para que bajes individualmente cada cosa... click derecho ... "guardar enlace como" por las dudas el rar se encuentr corrupto. pero no creo que ese sea el caso, me inclino por lo anterior.

Saludos y Feliz año si no nos cruzamos antes

MasterXNicoX · #15 (**permalink**) 29/12/2010, 19:04

Vaya, pues es verdad, estoy usando Google Chrome 8.0.552.224...

Lo raro es que tengo otros JavaScript en la web y Chrome me los ejecuta bien en LocalHost, intentaré con otros navegadores para ver si es lo que dices...

En el caso de que lo sea, ¿¿como puedo probar que se va a ver bien en Google Chrome una vez subido a un servidor??

Podría hacerlo usando XAMPP o algo por el estilo??

Saludos!!!

emprear · #16 (**permalink**) 29/12/2010, 19:24

Porque todas mis conclusiones las saque despues de probar la script en todos los navegadores tanto desde el disco como desde el server.

Por eso cuando la ves en interrnet se ve bien

Y para no confundirnos

Cuando digo local, desde el disco NO me refiero al http://localhost (el Xampp)
me refiero a que si abris desde el exploardopr de windows en, por ejemplo

C:\descargas\link-activo-iframes\index.html .... es ahi dónde el chrome no me lo muestra

saludos

MasterXNicoX · #17 (**permalink**) 29/12/2010, 20:18

Vale, pero con Xampp; debería funcionar bien aunque lo abra con Chrome??

emprear · #18 (**permalink**) 29/12/2010, 20:37

Amigo:
Pongamonos de acuerdo Xampp == http://localhost

Yo ahi la veo bien, tambien en mi subdominio de los foros, en el unico lugar que no se ve, y con Chrome, es abriendola directamente desde mi PC.

Y no te lo digo por definición, sino que hice las pruebas correspondientes.

Como comentario final...
Cuando la pudiste ver funcionando normalmente, con que navegador lo Hiciste?

es más investigué un poco mas alla, hace lo siguiente

Abri el index.html con crhome desde MiPC (es decir, dónde no funciona)
Presioná Ctrl+Shft+J

abajo en la consola de error vas a leer algo como lo que sigue
Unsafe JavaScript attempt to access frame with URL file:///C:/Users/kiow7/Desktop/link-activo-iframes(3)/link-activo.html from frame with URL file:///C:/Users/kiow7/Desktop/link-activo-iframes(3)/frame1.html. Domains, protocols and ports must match.

No es que la Script sea insegura, es que ahi te indica que dominio protocolo y puerto deben coincidir (sobre todo por el hecho de que estas llamando una función en la página principal desde los frames) por lo tanto al no haber ni dominio, ni puerto al llamar desde el protocolo file:// , se produce el fallo

Despues proba la consola en la web y vas a ver que dicho error no aparece

Saludos

MasterXNicoX · #19 (**permalink**) 29/12/2010, 21:36

Mira, siento que te haga responder tantas cosas emprear, quiero que sepas que agradezco infinitamente tu ayuda colega jeje...

--------------------------------

En cuanto a los errores que aparecen en la consola de Chrome tienes toda la razón...

--------------------------------

Cuando no me funciona es cuando lo abro desde MI PC con Google Chrome...

Con FireFox Funciona bien, con IE también...
Abriendolo desde MI PC...

Abriéndolo desde tu página se ve bien con todos los navegadores...

Pero abriéndolo desde el localhost con Xampp, deja de funcionar en Chrome...

Como puedo hacer para ver que funcione bien Mi Sitio, con Mis Colores e Imágenes en Chrome antes de subir la web a un servidor??
Porque al parecer ni siquiera puedo con Xampp...

Un abrazo!!!

emprear · #20 (**permalink**) 29/12/2010, 21:56

Lo probe en el mio y funcionó. Lo dejamos para mañana, porque aqui me temo que el problema es otro.

saludos

MasterXNicoX · #21 (**permalink**) 29/12/2010, 22:28

Bien, gracias emprear, espero tu ayuda mañana, un abrazo!!