Evitar javascript
6 seguidores
Se que lo que voy a preguntar es una burrada, pero estaría muy bien si se pudiera hacer, ¿saben de alguna manera de manejar el evento onclick en css?, es decir que cuando el usuario pulse un enlace pueda darle visibilidad a una capa que tengo por ahi
cbp
a eso me apunto yo, que tengo que hacer lo mismo y lo he hecho con javascript, pero si se pudiera hacer con css... :)
meddle
como no combines a:active con un span que esté dentro del a lo veo negro.
otra opcion seria el a:active combinado con behaviours dhtml, que se pueden hacer crossbrowser, pero quizas lo mas logico es usar javascript o el DOM directamente.
dirarck
Mi intención es hacer un menu parecido al de helenp en su dia:
<code>
<ul id="navList"><li><a href="#">Inicio</a></li>
<li><a href="#" onclick="setVisible('presentation'); return false;">Informaci&oacute;n</a>
<div class="subNav"><ul id="subNavInformation"><li><a href="#" onclick="setVisible('services'); return false;">Servicios a empresas</a></li>
<li><a href="#" onclick="setVisible('information'); return false;">Localización y contacto</a></li>
<li><a href="#" onclick="setVisible('map'); return false;">Situación</a></li></ul>
</div></li></code>
Como ves en cada item le digo k le de visibilidad a cada capa, pero claro a k no sabes kien es el k lo jode todo cuando metes el submenu dentro del a? mmmmm bieeennnn si señor es IE, tonces decidí ocultarle el submenu al navegador est... cab.... de IE, y bueno no cedirte lo que hace konqueror porque me rio
meddle
en ese caso, te aconsejo js
dirarck
otey ya te la enseñaré cuando te terminada
CarlosJ
¿Por qué no utilizar javascript o DOM? Es lo correcto para mejorar la funcionabilidad o modificar dinámicamente lo que se vea en la pantalla.
Otra cosa, pienso yo, creo que es reinventar la rueda o complicarse la vida en exceso de una manera no necesaria ni correcta.
dirarck
Carlos ese punto de vista lo veo muy bien y lógico, pero casi siempre que uses javascript para algo que tenga que ver el contenido debes hacer dhtml nonobstrusive, y es comerse muxo el coco para una cosa que si estuviera en css sería una regla nada más
CarlosJ
Sí, se puede mantener perfectamente la usabilidad y accesibilidad, para ello sencillamente hay que escribir el código en el orden lógico de lectura que tendría en un navegador de texto.
A partir de ahí, ya tenemos la acesibilidad solucionada. Todo lo demás es externo, y sólo "visible" para los navegadores que lo soporten. Creo que cualquier navegador que soporte CSS de manera adecuada, soportará DOM.
Una función que tenga como fin mostrar o no contenido dinámicamente son 2 líneas (y porque me gusta tener el código ordenadito), y todo seguirá siendo XHTML y aprobado por la W3C e incluso por el tribunal de la Haya :) .
meddle
CarlosJ
Sí, se puede mantener perfectamente la usabilidad y accesibilidad, para ello sencillamente hay que escribir el código en el orden lógico de lectura que tendría en un navegador de texto.
¿puedes explicarte un poco mejor? gracias.
CarlosJ
A partir de ahí, ya tenemos la acesibilidad solucionada. Todo lo demás es externo, y sólo "visible" para los navegadores que lo soporten. Creo que cualquier navegador que soporte CSS de manera adecuada, soportará DOM.
no necesariamente. vease konkeror o safari, por ejemplo. aunque el % de implementacion es alto, en algunas cosas basicas la cagan.
CarlosJ
ea,.,.,.a ver si explico la metodología que me gusta utilizar (y no siempre se puede) para un proyecto grande.
En primer lugar, defino la estructura de los contenidos, XHTML plano, de manera que si viéramos la página en las peores condiciones posibles, todo sea legible y ningún contenido útil permanezca oculto, o fuera de lugar. Con este paso, ya tenemos una web accesible para todos los navegadores.
A partir de este momento, añadimos capas de programación, que son externas al propio XHTML, por lo que este se mantiene totalmente válido. Hojas de estilo y js externos, cada navegador se degradará dependiendo de sus posibilidades, o de lo que exija el cliente claro.
Todo tipo de interactividad con la página se puede aplicar perfectamente sin quebrantar ningun estándar. De hecho si queremos podemos incluso utilizar los "escuchadores de eventos", sin necesidad de poner eventos dentro del propio código. Aunque los eventos son perfectamente aceptados por XHTML.
En cuanto a los navegadores que acepten parcialmente unas cosas u otras. Pues que le vamos a hacer.,,.., se programa para lo que te exija el cliente, y como valor añadido trato de que la web siga todos los estándares, si tengo que quedarme calvo para que algo se vea bien en iCab o Ice Storm porque lo utilizan 3 personas en el mundo. Pues lo degrado directamente y que vean la web aunque sea en modo texto.
Espero haberme explicado, de cualquier manera, todo es variable, precisamente la dificultad de programar radica en ir salvando los obstáculos que te surjen en los proyectos.
meddle
vale ahora se te ha entendido. a mi tb me gusta tener el dhtml como un añadido no intrusivo. es lo que trato de divulgar en este foro :)
y prefiero meter los eventos con js, para no mezclarlos en el html. pero eso ya es muy personal.
iboff
No me quiero meter en discusiones,.,.,
lo mejor,.,.,a mi aprecer de programador Javascript.
Haces un js general, donde alojas las funciones que quieras dependiendo del enlace, y en los enlaces vas poniendo las funciones en el <code>onclik="enlauno()"</code>
Habria que empezar a diferenciar entre CSS y JS.
Usuario desconocido
vale.,.,.,.,.,creo que te entiendo.,.,,.no hacer con css lo que se hace con js.,.,,explicate mejor jejeje.,.,,.,.,
CarlosJ
el invitado era yo.,.,.,., que se me olvida.
iboff
A ver.,.,
La pregunta inicial de este topic me demuestra que los CSS estan bien, pero cuando empiezas a utilizarlos llega un momento en el que te das cuenta de que ellos por si solos no sirven para desarrollar un proyecto un poco mas dinamico (no me refiero a javascript en si).
Siempre que me enseñan un proyecto y me preguntan si hay que hacerlo en CSS, en capas, en tablas, en flash en javascript, siempre digo lo mismo,,,.,.un poco de todo depende de lo que quieras.
Cada funcion (accion que quiere el cliente, cuentas o diseñador que suceda) necesitara de un css que lo decore, un js que lo arranque y un html que lo sostenga......
,.,.,yo que se____
A mi me gusta la hamburguesa con queso, pan y ketchup. lo demas es un aditivo pero si me quitas algo de estas tres cosas no me gusta......
CarlosJ
juas.,,.,.tus metáforas valen más que mil palabras.,.,.,:D
meddle
iboff
Haces un js general, donde alojas las funciones que quieras dependiendo del enlace, y en los enlaces vas poniendo las funciones en el <code>onclik="enlauno()"</code>
bueno, pues personalemtne no estoy de acuerdo. teniendo en cuenta que el dhtml se va a añadir como una mejora y no como un requisito, cuantos menos eventos se añadan al html, mejor. los eventos los añades mas tarde usando javascript, pues van a ser parte del comportamiento, no estructura, y por tanto no deberia ir en el html.
no se si me he explicado.
iboff
entonces veo que la hamburguesa la prefieres solo con pan.,.,,,
meddle
creo que no me has entendido, me gusta completa, pero cada ingrediente se debe añadir donde y cuando le toca. el queso va encima, para que se derrita perfectamente y el ketchup al final.
el javascript es un añadido, una mejora a la navegacion. el documento debe ser navegable sin javascript, y por tanto no veo por que razon deberia haber eventos javascript en el html. se pueden añadir despues con js si el navegador lo soporta.
CarlosJ
más o menos es lo mismo.,.,,. es el enfoque inicial a la hora de comenzar el proyecto el que varía, más general..,.,pero el resultado es el mismo.
Lo cierto es que cuando un cuentas te viene y te comenta el proyecto, hay que estar al loro de todo, y sobre todo tener en cuenta que a los dos días, te va cambiar cosas fundamentales.
Es dinámica de trabajo. Por eso señalaba yo en mi laaaaaaaaaargo comentario, que unas cosa es la metodología que me gusta tener, y otra la que las circunstancias me "dejan" tener..,.,.,jejejej
dirarck
Entiendo tu punto de vista y lo comparto, primero la estructura (que sea la misma para todos), luego le añado estilo, y sino me queda más remedio le añado js, eso era lo que quería evitar si se podia, tener que poner js para darle visibilidad a una capa oculta previamente, una cosa queria preguntarles, ya que lo están comentando, como podría hacer para tener un manejador de eventos (onclick por ejemplo), pero no como atributo de una etiqueta sino como lo dices tu CarlosJ?
dirarck
me dicen k me expreso como el culo (estoy de acuerdo), como podría evitar tener un manejador de evento como atributo de una etiqueta html, es decir, he visto en un diseño(meddle) que puedo hacer que un enlace escuche el click: <code><a href="#" onclick="">s</a></code>, pero cuando edité el código resulta que el onclick no estaba, y me imagino que estaría dentro del fichero js, como??
Me vuelvo a expresar pésimo :(
meddle
depende de cada caso, de si es un conjunto uniforme de elementos, etc etc. normalmente recogerias los elementos usando el DOM, ya sea los que tengan una clase determinada o los que precedan a un elemento clave, los que tengan un title que incluya una palabra especifica, los que tengan un enlace tal o cual, etc etc. Las posibilidades son ilimitadas.
Sea como fuere, una vez tengas la coleccion de elementos en un array, lo parseas y vas añadiendo un evento a cada uno. Este paso puedes hacerlo añadiendo un evento tipo DOM (añadiendo un listener) o un evento html directamente (añadiendo una propiedad onclick al elemento). Yo prefiero lo primero porque asi puedes añadir mas de un evento por cada elemento, y uso para ello el codigo de Scott Andrew (aunque modificado para que encaje en mi namespace). Ahi va el codigo original:
<code>
function addEvent(obj, evType, fn, useCapture){
if (obj.addEventListener){
obj.addEventListener(evType, fn, useCapture);
return true;
} else if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;
} else {
alert("Handler could not be attached");
}
}
function removeEvent(obj, evType, fn, useCapture){
if (obj.removeEventListener){
obj.removeEventListener(evType, fn, useCapture);
return true;
} else if (obj.detachEvent){
var r = obj.detachEvent("on"+evType, fn);
return r;
} else {
alert("Handler could not be removed");
}
}</code>
Te recomiendo la traduccion de su articulo original
dirarck
acias, esta noxe me lo estudio, y ya comentaré los resultados :P
nickoolas
no se si el tema esta ya resuelto y si esto tiene algo que ver realmente, pero me parecio que si?
esta aqui:
http://www.meyerweb.com/eric/css/edge/popups/demo.html
por si vale