javascript no intrusivo

[Null_]

Bueno, en un tema anterior queria crear un efecto solo con CSS, por veo que no se pudo (si hay alguien que puede porfavor postear en dicho tema).
Pero recibi una recomendación para mejorar la accesibilidad de mi código javascript por parte de los usuarios rb3m y Mikmoro llamandome a utilizar el javascript no intrusivo.

Bueno busque información en google, di con arta información pero ninguna con ejemplos concretos, pues casi todos estos estaban repetidos y lo peor de todo, es que los probe y ninguno me funcionaba.

El que mas encontraba era el siguiente:

javascript intrusivo (si me funciona)

Código:

<a href="#" onclick="window.open('popup.html','nombre','width=400,height=450,resizable=yes')">
Abrir popup
</a>

javascript no intrusivo (no me funciona ¬¬)

Código:

<a href="#" id="mypopup">Abrir popup</a>

<script type="text/javascript">
   var x = getElementByID('mypopup');
   x.onclick = function() {
    window.open('popup.html','nombre','width=400,height=450,resizable=yes')
   }
</script>

Mi idea es utilizar algo parecido a este código para asginar una funcion onclick a un id de una imagen con CSS para que abra un enlace y asi no irrumpir la accesibilidad del código.

Bueno si alguien sabe de un ejemplo que de verdad funciones o que haga funcionar el ejemplo no intrusivo anterior se los agradeceria...

[venkman]

Mal: getElementByID
Bien: getElementById

[Null_]

Iniciado por venkman

Mal: getElementByID
Bien: getElementById

vale, lo probe, pero aun no funciona :(

[buzu]

document.getElementById()

Ahora, usar Javascript no obtruisvo es casi inútil si no se usa graceful degradation. En tu caso deberías poner una dirección en el href para que si js no está disponible, el usuario aun pueda ir a la pagina que se abre con la función.

[buzu]

te falta el document.

getElementById es un método perteneciente a un nodo del DOM o al objeto del documento documento (document) no puedes hacer referencia a ese método sin hacer antes referencia a un objeto (un nodo) del documento o al documento mismo.

edito:
(Responde al mensaje numero 3 que no estava cuando escribí mi mensaje anterior.)

[Null_]

Iniciado por buzu

document.getElementById()

Ahora, usar Javascript no obtruisvo es casi inútil si no se usa graceful degradation. En tu caso deberías poner una dirección en el href para que si js no está disponible, el usuario aun pueda ir a la pagina que se abre con la función.

perfecto, pero ese es el ejemplo que quiero hacer funcionar,
lo que realmente quiero hacer esta escrito unas lineas mas abajo

Mi idea es utilizar algo parecido a este código para asginar una funcion onclick a un id de una imagen con CSS para que abra un enlace y asi no irrumpir la accesibilidad del código.

creo que me exprese mal...
lo que quiero hacer lo puedes ver aqui.
la idea es mejorar ese código para que sea mas accesible. Lo botones funcionales no deben contener un enlace, pero si un onclick mediante javascript para asignarle la funcion que yo deseo...

[buzu]

Y te sirvió lo que te dije para resolver el problema?

[Null_]

yeah!
ahi solucione lo de abrir el popup, solo faltaba escribir document.
muchas gracias!

bueno ahora estoy adaptandolo a la imagen
lo que debe hacer la imagen es que al hacerle click, cambie una propiedad CSS de otro elemento por medio de su ID (en el ejemplo fondo rojo a verde)
lo estoy haciendo de la siguiente manera pero no me resulta...

Código HTML:

<div id="holachao" style="background-color:red;">Hola!</div>

<img src="/img/boton_minimizar.gif" style="cursor:pointer;" id="minimizarejemplo" alt="Minimizar Ejemplo" />

<script type="text/javascript">

   var x = document.getElementById('minimizarejemplo');
   x.onclick = function() {
	document.getElementById('holachao').style.background-color='green';
   	}

</script> 

no funciona, en que fallo esta ves?
despues eso lo pasare al archivo .js :D

[buzu]

document.getElementById('holachao').style.backgrou ndColor = "#color"

[buzu]

Sin el espacio entre la u y la n. Ese espacio lo pone el foro

[Null_]

aahah ya encontre lo que queria,
el background-color no funciona en javascript, me funciono con .style.width='150px' que es lo que yo queria...

jaja gracias buzu me sirvio lo anterior, ahora voy a aplicar todo en mi ejemplo con javascript no intrusivo (L)

Bye!

[Null_]

Hola de nuevo, bueno revivo el tema despues de 2 dias...
la caja no intrusiva quedo perfecta, incluso surgió otro botón funcional!
jaja

El ejemplo, parece que no es perfecto despues de todo, pues como comento Mikmoro en el tema anterior, a mi también me surgió la de idea de que aquel usuario que no disponga de javascript, no carge ni vea los botones funcionales, pues le serian inútiles. Y si pudiera realizar eso, aumentaría otro punto mas de la accesibilidad del ejemplo degrandando completamente al javascript

Alguna idea que pueda realizar esto?
se me ocurre que puede ser algo como insertar las imagenes mediante javascript (que no lo creo) o podría llegar a ser con php (aun tengo dudas)...

agradesco toda su ayuda

[buzu]

no, con php no serviría de nada, a menos que hicieras un complejo sistema de detección de js y envío de variables al servidor y registro de cookies. Lo más fácil es incluir lo botones mediante javascript así no hay problema pues si no hay js no se incluyen las imágenes.

Yo estoy trabajando en un CMS en el que tengo unos menúes tipo acordeón y estoy haciendo todo mis botones del acordeón de una forma similar. Aun que yo lo único que hago es agregar clases a unos items de una lista desordenada.

Saludos.

[Null_]

Hola de nuevo a todos,
Gracias por su ayuda en especial a Buzu que me ayudo bastante...
bueno pude degradr completamente el javascript y quedo totalmente accesible =D
aqui pueden ver el ejemplo si es que les sirve de algo

bye