Ayuda con mi menu y su comportamiento onclick !!

Sugey · #1 (**permalink**) 13/04/2007, 16:56

Hola tengo un menu de botones, en los que necesito que por cada click en el boton, se refresque y se ponga el numero de boton en la url, pero tambien quiero que si presione el boton 5, la url se cambie y el boton se quede de otro color, y asi para cuando clickee otro boton. Que se distinga q boton esta seleccionado, segun el numero q esta en la url.

Me explico?, este es mi codigo, pero no me keda :(

<html>
<head>
<link href="css/style.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Probando menu</title>
</head>
<script type="text/javascript">
var activo = null;
function marcar(obj) {
obj.style.background = 'green';
if (activo) activo.style.background = 'red';
activo = obj;
}
</script>
<body>
<form name="form1" method="post" action="">
<div id ="menu" border="none">

 
<br>
<dl> <dt>
<input type="button" name="1" onclick="marcar(this); location='menuhtml.php?senales=1&centrales=4&centr al=1'" value="27 DE SEPTIEMBRE"/>
</dt></dl>
<dl> <dt>
<input type="button" name="2" onclick="marcar(this); location='menuhtml.php?senales=1&centrales=4&centr al=2'" value="CH. LUIS DONALDO COLOSIO MURIETA"/>
</dt></dl>
<dl> <dt>
<input type="button" name="3" onClick="marcar(this); location='menuhtml.php?senales=1&centrales=4&centr al=3'" value="CH. PRESIDENTE PLUTARCO ELÍAS CALLES"/>
</dt></dl>
<dl><dt>
<input type="button" name="4" onclick="marcar(this); location='menuhtml.php?senales=1&centrales=4&centr al=4'" value="CH. OVIÁCHIC"/>
</dt></dl>
<dl><dt>
<input type="button" name="5" onClick="marcar(this); location='menuhtml.php?senales=1&centrales=4&centr al=5'" value="CH. MOCÚZARI"/>
</dt></dl>
<dl><dt>
<input type="button" name="6" onClick="marcar(this); location='menuhtml.php?senales=1&centrales=4&centr al=6'" value="CH. BACURATO"/>
</dt></dl>
<dl><dt>
<input type="button" name="7" onclick="marcar(this); location='menuhtml.php?senales=1&centrales=4&centr al=7'" value="CH. HUMAYA"/>
</dt></dl>
<dl><dt>
<input type="button" name="8" onclick="marcar(this); location='menuhtml.php?senales=1&centrales=4&centr al=8'" value="CH. GRAL. SALVADOR ALVARADO"/>
</dt></dl>
<dl> <dt>
<input type="button" name="9" onclick="marcar(this); location='menuhtml.php?senales=1&centrales=4&centr al=9'" value="CH. PROF. RAUL J. MARSAL"/>
</dt></dl>
</div>
<br><br>
</body>
</html>

El Patrón. · #2 (**permalink**) 13/04/2007, 20:20

Hola, no se si habra otra manera pero yo le puse a todos tus botones un id que es igual al name y cree otra función que se carga en el on load del body que le da el estilo de color rojo.

Código HTML:

<html>
<head>
<link href="css/style.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Probando menu</title>
</head>
<script type="text/javascript">
var activo = null;
function marcar(obj) {
obj.style.background = 'green';
}
function a()
{
var getURL= document.URL;
var cuenta = getURL.length;
var a = getURL.substr(cuenta-1);
document.getElementById(a).style.background='red';
}
</script>
<body onload="a()">
<form name="form1" method="post" action="">
<div id ="menu" border="none">

<!-- <br> --> <!--Es el espacio que se le da entrelos botones y la imagen...-->
<br>
<dl> <dt>
<input type="button" id="1" name="1" onblur="marcar(this)" onclick="marcar(this); location='menuhtml.php?senales=1&centrales=4&centr al=1'" value="27 DE SEPTIEMBRE"/>
</dt></dl>
<dl> <dt>
<input type="button" id="2" name="2" onclick="marcar(this); location='menuhtml.php?senales=1&centrales=4&centr al=2'" value="CH. LUIS DONALDO COLOSIO MURIETA"/>
</dt></dl>
<dl> <dt>
<input type="button" id="3" name="3" onClick="marcar(this); location='menuhtml.php?senales=1&centrales=4&centr al=3'" value="CH. PRESIDENTE PLUTARCO EL’AS CALLES"/>
</dt></dl>
<dl><dt>
<input type="button" id="4" name="4" onclick="marcar(this); location='menuhtml.php?senales=1&centrales=4&centr al=4'" value="CH. OVI°CHIC"/>
</dt></dl>
<dl><dt>
<input type="button" id="5" name="5" onClick="marcar(this); location='menuhtml.php?senales=1&centrales=4&centr al=5'" value="CH. MOC DZARI"/>
</dt></dl>
<dl><dt>
<input type="button" id="6" name="6" onClick="marcar(this); location='menuhtml.php?senales=1&centrales=4&centr al=6'" value="CH. BACURATO"/>
</dt></dl>
<dl><dt>
<input type="button" id="7" name="7" onclick="marcar(this); location='menuhtml.php?senales=1&centrales=4&centr al=7'" value="CH. HUMAYA"/>
</dt></dl>
<dl><dt>
<input type="button" id="8" name="8" onclick="marcar(this); location='menuhtml.php?senales=1&centrales=4&centr al=8'" value="CH. GRAL. SALVADOR ALVARADO"/>
</dt></dl>
<dl> <dt>
<input type="button" id="9" name="9" onclick="marcar(this); location='menuhtml.php?senales=1&centrales=4&centr al=9'" value="CH. PROF. RAUL J. MARSAL"/>
</dt></dl>
</div>
<br><br>
</body>
</html>

Espero esto sea lo que necesitabas, o te sirva al menos

Sugey · #3 (**permalink**) 16/04/2007, 10:01

Oye patron, gracias por el codigo, esta muy bueno, nada mas que no respeta el color de estilo verde, creo que es porque se carga e inmediatamente llama la funcion a, que pone en rojo a los botones, bueno poco a poco lograremos el script que necesito, ahora tengo una duda.

Mira, esta muy bien lo de la url, con la funcion a:
var getURL= document.URL;
var cuenta = getURL.length;
var a = getURL.substr(cuenta-1);
document.getElementById(a).style.background='red';

con esta funcion si la url es:
http://localhost/test/menuhtml.php?s...es=4&central=2
obtengo el numero 2, y de esa forma se pinta de rojo el boton 2.
Ok, pues ahora necesito que si son mas numeros esos botones se pinten:
http://localhost/test/menuhtml.php?s...entral=2,7,9,1
y necesito que se pinten de rojo los botones 2,7,9,1
Sabes como podria hacer eso??

Algun tip ?
:D gracias

JavierB · #4 (**permalink**) 16/04/2007, 10:39

Hola Sugey

Puedes usar este código:

Código:

loc=location.search.split('=')[1];
loc=loc.split(',');

Ahora en loc tienes un array con los números que has pasado en la URL, sólo tienes que recorrer el array e ir pintado los botones.

Saludos,

Sugey · #5 (**permalink**) 16/04/2007, 11:33

Oye, estoy tratando de ver lo que tiene loc
loc=location.search.split('=')[1];
loc=loc.split(',');
document.write(loc)

y no funciona

, puedo verlo con un for?
o como?

Sugey · #6 (**permalink**) 16/04/2007, 11:42

quiero ver el contenido de la variable loc
Me manda esto:
ralesundefinedundefinedundefinedundefinedundefined undefine

JavierB · #7 (**permalink**) 16/04/2007, 11:58

Hola de nuevo.

Pensaba que sólo mandabas una variable. A ver si esto te funciona:

Código:

loc=location.search.split('&')[2];
loc=loc.split('=')[1].split(',');
for (i=0; ele=loc[i]; i++)
  document.write(ele+'<br />');

Saludos,

Sugey · #8 (**permalink**) 16/04/2007, 12:06

Mira JavierB, tambien quedaria asi vdd...
porke la url, tiene por ejemplo, senales=1&centrales=1,2,3, y esto ultimo es lo q me interesa, entonces podria ser al segundo "="

loc=location.search.split('=')[2];
loc=loc.split(',');
n=loc.length;
for (var i=0; i<=n-1; i++)
alert((loc[i]));

y ya me imprime solo los numeros de botones:
1
2
3

Oye, ahora mmm, los botones se llaman asi igual, ke los numeros, "1,2,3"
hago una funcion que los ponga a otro color dependiendo de los numeros ke esten en la url.
creo que se manipulan con esto:
document.getElementById(a).style.background='red';

donde a, sera los elementos del arreglo.

mm voy a probar, y les digo ke paso :)

Sugey · #9 (**permalink**) 16/04/2007, 12:29

Oigan, tengo un problemita, es ke todo esto lo estoy haciendo, para lograr que un menu de enlaces, se active y desactive (color) cada vez que un usuario haga click, pero bueno estoy yendo por partes, mmmm saben si a un enlace, le puedo poner id?
es decir algo asi:
<a id="5" href="destino">contenido</a>
<input type="button" id="5" name="5" onClick="marcar(this); location='menuhtml.php?senales=1&centrales=5'" value="CH. MOCUZARI"/>

es posible?

El Patrón. · #10 (**permalink**) 16/04/2007, 13:51

HOla

Si, los <a href > tambien tienen id como no, no hay problema con eso.

asi por ej

<a href="google" id="hola" onclick="alert(this.id)">sadf</a>

en el alert te saldria la palabra hola, espero te sirva

Sugey · #11 (**permalink**) 07/05/2007, 17:10

Hola, amigos, gracias por su ayuda, hasta hoy retome este pendiente ke tenia. Y quiero comentarles que ya funciona....

muy bien, quedo de la siguiente forma:
function colorea_botones()
{
loc=location.search.split('=')[2].split(',');
for (i=0;ele=loc[i]; i++)
// document.write(ele+'<br />');
//alert(ele);
document.getElementById(ele).style.background='blu e';
}

onLoad="colorea_botones()"

y ya cada link, tiene un id. que es un numero, y de esa forma, pasar ese parametro a la funcion que colorea, ya funciona bien.

Yo me baso principalmente en la url, para saber que enlaces estan seleccionados. Esto lo hice, porque de otra forma no sabria cuando el usurio volvioa dar click sobre un enlace, no se como manejar ese evento. , no es doble click, ni onclick, es como despues d haber dado un click, volver a dar otro.
Pero ahora tengo otra duda, por ejemplo, cuando no hay nada seleccionado, es decir en el location no hay ningun numero, por lo tanto no se encuentra el signo "=" ,
error: location.search.split(..)2 es nulo o no es un objeto
http://localhost/SMRP_Test/menu/menu.php?senales=1
Es porque
en esta linea
loc=location.search.split('=')[2].split(',');, no encuentra nada.
Como puedo manejar este error ????, ayuda...

El Patrón. · #12 (**permalink**) 07/05/2007, 20:49

Hola

Bueno, porque no pruebas poniendo un if que revise si la variable loc esta vacia, y de ser asi que le asigne un valor, y asi creeria yo que el error ya no deberia mostrarse, obviamente le tienes que dar un valor que no sea ninguno de los id para que no coloree ninguno cuando no se ha escogido alguno de ellos, espero te sirva

Sugey · #13 (**permalink**) 08/05/2007, 15:20

Hola Patron, hice lo que me comentas, pero me marca error, y no ya no colorea nada.., sabes cual es el error??

function colorea_botones()
{
loc=location.search.split('=')[2].split(',');
if loc=" " {
loc=0
}
else {
for (i=0;ele=loc[i]; i++)
// document.write(ele+'<br />');
//alert(ele);
document.getElementById(ele).style.background='#66 99FF';
}
}

Sugey · #14 (**permalink**) 08/05/2007, 17:21

Hola, les tengo otra pregunta, el codigo funciona bien, cuando la url es la siguiente:
http://localhost/SMRP/menu/menu.php?...trales=4,1,6,2
y la funcion javascript, es la siguiente:
function a()
{
loc=location.search.split('=')[2].split(',');;
for (i=0;ele=loc[i]; i++)
document.getElementById(ele).style.background='red ';
}

Busca donde hay un segundo signo "=" y entonces extrae los numeros que le siguen.Y despues colorea los elementos del formulario.

Pero no me habia dado cuenta, que en el mismo sitio, a veces al andar clickeando en otros menus, la url cambia a la siguiente forma por ejemplo:

http://localhost/SMRP/menu/menu.php?...=&ff=&Fallas=1

Y en esta url, centrales que es de donde obtengo los numeros, esta antes de algun signo "=", No habria la forma, de no basarme en signos, si no extraer, los numeros que vengan despues de la palabra especificamente de "centrales"

Alguna sugerencia ????

Gracias, por todo...

El Patrón. · #15 (**permalink**) 08/05/2007, 17:32

Hola

Bueno, creo que tu if

if loc=" "

debe ir if(loc=="")

y en cuanto a lo de los numeros luego de la palabra seria capturar toda la cadena, y hacer la busqueda de la palabra cadena y luego recortar lo que este despues de ella, bueno, es una idea, tal vez haya otra manera de resolverlo, saludos

Sugey · #16 (**permalink**) 09/05/2007, 10:27

Hola patro, que amable, mira no entiendo que pasa, estoy probando con un if, pero no termina de funcionar, mira.

function a()
{
loc=location.search.split('=')[2].split(',');
alert (loc[0])
if (loc[0]==" ")
alert ("loc no tiene nada")
else {
for (i=0;ele=loc[i]; i++)
document.getElementById(ele).style.background='red ';
}
}

No me queda, me sigue marcando error en este if que agregue, por fa, ayudenme.

Gracias

JavierB · #17 (**permalink**) 09/05/2007, 11:01

Hola Sugey

¿Qué error te marca y en qué línea?

Saludos,

Sugey · #18 (**permalink**) 09/05/2007, 15:20

Hola amigos, me da gusto decirles, que despues de trabajr con esto casi todo el dia, por fin ya me quedo...... :D

Miren lo hice de la siguiente forma, debido a que la url, cambia constantemente dependiendo de lo que el usuario iba eligiendo en la pagina.

Pero mis botoncitos, permanecen de otro color, aunke el usuario clickee por todas partes. Soy novata, asi que no se como vean mi codigo, si tienen alguna sugerencia la acepto con mucho gusto.

function colorea_botones_recargado()
{
var getURL= document.URL;
var arreglo = new Array();
arreglo= getURL.split("&");
for(i=0;i<arreglo.length;i++)
{
pos_cent= (arreglo[i].indexOf("centrales"))
if (pos_cent!= -1)
{
ini=arreglo[i].indexOf ("=");
fin=arreglo[i].length-1;
numeros = arreglo[i].substr(ini+1,fin).split(",");
for (j=0;ele=numeros[j]; j++)
document.getElementById(ele).style.background='#66 99FF';
}
}
}

<body background="./img/bg.gif" onLoad="colorea_botones_recargado();" >

Y ya se iluminan, asi cambie la url...