Foros del Web » Programando para Internet » Javascript »

Dos acciones en una pagina

Estas en el tema de Dos acciones en una pagina en el foro de Javascript en Foros del Web. Hola, soy nuevo en este foro, pero espero que sean tan buenos como en los de CSS y PHP, donde me han ayudado muchisimo para ...
  #1 (permalink)  
Antiguo 04/02/2009, 13:44
 
Fecha de Ingreso: septiembre-2008
Ubicación: Nuñez, Capital Federal
Mensajes: 423
Antigüedad: 15 años, 8 meses
Puntos: 1
Dos acciones en una pagina

Hola, soy nuevo en este foro, pero espero que sean tan buenos como en los de CSS y PHP, donde me han ayudado muchisimo para la realizacion de sitios webs.

Obviamente, hoy en dia un buen sitio web funciona con JS. Pero, lamentablemente no tengo un gran conocimiento de JS. De hecho, es casi nulo. Por eso acudo a ustedes para que puedan ayudarme.

El caso es el siguiente: yo tengo un script que lo que hace es agregar una clase ("current") al vinculo que presionamos. Esto se hace para que, al apretar en otra parte de la web, el vinculo no se desmarque (se tacha cuando apretamos en el).

Por otro lado, tengo un script del jquery que lo que hace es abrir y cerrar un submenu. Ahora, por separado, estos dos codigos funcionan a la perefeccion. Pero juntos, no hay caso!... asique, eso es en lo que espero que me puedan ayudar... aca va el codigo html, que supongo que es todo lo que necesitan, pues en este caso el CSS no es necesario:

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<title>:: Sophian | Graphic Design ::</title>

<link href="estilo.css" rel="stylesheet" type="text/css" />
<link href="menu.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
	function aggEvento(){
		var links = document.getElementById('menu').getElementsByTagName('a');
		for(i=0; links[i]; i++){
			links[i].onclick = function(){
				var links = document.getElementById('menu').getElementsByTagName('a');
				for(j=0; links[j]; j++){
					links[j].className = "";
				}
				this.className = 'current';
			}
		}
	}
</script>

</head>

<body onLoad="aggEvento()">
<div id="wrap">
	<div id="contacto"><img src="http://www.forosdelweb.com/images/botonera_sup_1.gif"/><img src="http://www.forosdelweb.com/images/botonera_sup_2.gif"/></div>
	<div id="logo"></div>
	<div id="contenido">
		<div id="menu">
			<ul class="nav">
				<li id="nosotros"><a href="nosotros.html" target="frame"  onclick="$('#oculto').slideUp('slow');$('#ocimpresos').slideUp('slow')"></a></li>
				<li class="portfolio"><a href="javascript:void(0)" onclick="$('#oculto').slideDown('slow')"></a></li>
			</ul>
					<div id="oculto">
						<ul class="nav">
							<li class="logos"><a href="nosotros.html" target="frame" onclick="$('#oclogos').slideDown('slow');$('#ocimpresos').slideUp('slow');$('#ocweb').slideUp('slow');$('#ocilustraciones').slideUp('slow')"></a></li>
						</ul>
						<div id="oclogos">
							<ul class="nav" name="menu_logos">
							</ul>
						</div>
						<ul class="nav"> 
							<li class="impresos"><a href="javascript:void(0)" onclick="$('#ocimpresos').slideDown('slow');$('#oclogos').slideUp('slow');$('#ocweb').slideUp('slow');$('#ocilustraciones').slideUp('slow')"></a></li>
						</ul>
						<div id="ocimpresos">
							<ul class="nav" name="menu_impresos">
								<li class="impresos1"><a href="nosotros.html" target="frame"></a></li>
								<li class="impresos2"><a href="nosotros.html" target="frame"></a></li>
								<li class="impresos3"><a href="nosotros.html" target="frame"></a></li>
								<li class="impresos4"><a href="nosotros.html" target="frame"></a></li>
								<li class="impresos5"><a href="nosotros.html" target="frame"></a></li>
								<li class="impresos6"><a href="nosotros.html" target="frame"></a></li>
								<li class="impresos7"><a href="nosotros.html" target="frame"></a></li>
								<li class="impresos8"><a href="nosotros.html" target="frame"></a></li>
								<li class="impresos9"><a href="nosotros.html" target="frame"></a></li>
								<li class="impresos10"><a href="nosotros.html" target="frame"></a></li>
							</ul>
						</div>
						<ul class="nav">
							<li class="web"><a href="nosotros.html" target="frame" onclick="$('#ocweb').slideDown('slow');$('#ocimpresos').slideUp('slow');$('#oclogos').slideUp('slow');$('#ocilustraciones').slideUp('slow')"></a></li>
						</ul>
						<div id="ocweb">
							<ul class="nav" name="menu_web">
							</ul>
						</div>
						<ul class="nav">
							<li class="ilustraciones"><a href="nosotros.html" target="frame" onclick="$('#ocilustraciones').slideDown('slow');$('#ocimpresos').slideUp('slow');$('#ocweb').slideUp('slow');$('#oclogos').slideUp('slow')"></a></li>
						</ul>
						<div id="ocilustraciones">
							<ul class="nav" name="menu_ilustraciones">
							</ul>
						</div>
					</div>
			<ul class="nav">
				<li class="experimental"><a href="nosotros.html" target="frame" onclick="$('#oculto').slideUp('slow');$('#ocimpresos').slideUp('slow')"></a></li>
				<li class="contacto"><a href="nosotros.html" target="frame" onclick="$('#oculto').slideUp('slow');$('#ocimpresos').slideUp('slow')"></a></li>
			</ul>
		</div>
		<div id="frame">
		<iframe marginheight="0" frameborder="0" height="414px" width="468px" name="frame" scrolling="no"></iframe>
		</div>
	</div>
</div>

</body>
</html>
En rojo, el codigo que activa la clase. En azul, el que hace que se despliegue y repliegue el submenu.

cualquier cosa, este es el sitio web funcionando sin el script de la clase: http://www.proyectoshuerto.com.ar/nu...dad/index.html

Desde ya, muchas gracias por su ayuda!!!
  #2 (permalink)  
Antiguo 04/02/2009, 15:44
Avatar de SPAWN3000  
Fecha de Ingreso: marzo-2008
Ubicación: Bogota
Mensajes: 858
Antigüedad: 16 años, 2 meses
Puntos: 15
Pregunta Respuesta: Dos acciones en una pagina

NOTA: 1. La dirección no abre. 2.Imagino que tu código se debe ver muy bonito si no pasaste los fuentes CSS...jeje.

Bueno, No entendí muy bien....

Lo que quieres es que el link presionado mantenga un color una vez el usuario efectué clic sobre el?
Si lo haces por javaScript el problema estaría si al hacer click la pagina se recarga, ya que todo se pierde si lo haces en memoria, ó tendrías que leer la propiedad 'visited', que al fin de cuentas saldría mejor hacerlo con CSS... No te entiendo muy bien por que ninguna de estas propiedades te es útil?

a:link
a:visited
a:active
a:hover

Si todo ese codigo es tan solo para mostrar un menú y luego tachar las opciones seleccionadas previamente, creo que deberías pasarle una ojeada a los menús de Mikel morote(ya que estuviste en los foros de CSS...). Es muy obvio que tu Css esta interfiriendo con las propiedades adicionadas dinámicamente por el javascript.

Última edición por SPAWN3000; 04/02/2009 a las 15:54
  #3 (permalink)  
Antiguo 04/02/2009, 16:59
 
Fecha de Ingreso: septiembre-2008
Ubicación: Nuñez, Capital Federal
Mensajes: 423
Antigüedad: 15 años, 8 meses
Puntos: 1
Respuesta: Dos acciones en una pagina

Estaba seguro que lo habia escrito en el primer post, pero no fue asi. Entonces, aclaro para que no oscurezca. La cosa es asi:

Tengo una index.html que es la página que SIEMPRE se va a visualizar. En ella, tengo un menu compuesto de imagenes ya que la tipografía utilizada no es soportada por los navegadores. Al hacer clic en un link del menu, el contenido se abra en un iframe que esta situado en el centro de la pagina, por lo que nunca se recarga la pagina.

Ahora, el problema que tenia yo es que utilizando

a:link
a:visited
a:active
a:hover
a:focus

al hacer clic sobre el frame luego de hacer un clic, la clase active y focus se desactivaban, por lo tanto el link no quedaba marcado como "Activo", en mi caso, tachado. Esto lo arreglaria utilizando una clase que se agregaria automaticamente a cada li del menu al hacer clic.

La cosa es que ambos scripts, el del menu y el de la clase, no funcionan juntos. Ese es el problema.

Ahora se entiende?? Como puedo hacer que funcionen ambos al mismo tiempo?? Son los que estan en color en el primer mensaje...

Desde ya, muchas gracias... un saludo y cuento con tu ayuda!!

Pablo
  #4 (permalink)  
Antiguo 04/02/2009, 20:10
 
Fecha de Ingreso: septiembre-2008
Ubicación: Nuñez, Capital Federal
Mensajes: 423
Antigüedad: 15 años, 8 meses
Puntos: 1
Respuesta: Dos acciones en una pagina

por favor, si alguien me puede ayudar con este tema... les agradeceria muchisimo!! saludos!
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:42.