SELFHTML

Forum SELFHTML: Archives:
javasript dans CSS

Page d'information: vue d'ensemble
vers le bas 

(JAVASCRIPT) javasript dans CSS

Le message suivant est de: emmanuel, Adresse électronique tijan@nomade.fr, 19. 04. 2004, 18:03

ciao tutti,

Sur l'une des pages d'un site dont je m'occupe, tous les liens utilisent un script
<a href="http://www.bibi.fr/" onclick="NewWindow(this.href,'','750','550','yes','center');return false" onfocus="this.blur()">
j'ai esayé d'intégrer ça au style de la page mais ça marche pas (je pensais pas vraiment que ça marcherais mais c'est amusant d'essayer)

<style type="text/css">
<!--
a.onclick { NewWindow(this.href,'','750','550','yes','center'); return false; }
a.onfocus { this.blur() }
-->
</style>
existe-t-il quelques chose dans le genre qui pourrais marcher.
Je ne sais pas si ma question est absurde ne connaissant CSS et Javasrcipt que très imparfaitement, je ne fait que bidouiller.

merci de me répondre, même pour m'insulter.

Emmanuel


 
vers le hautvers le bas 

(JAVASCRIPT) javasript dans CSS

Le message suivant est de: emmanuel, Adresse électronique tijan@nomade.fr, 19. 04. 2004, 19:19

»» <style type="text/css">
»» <!--
»» a:click { NewWindow(this.href,'','750','550','yes','center'); return false; }
»» a:focus { this.blur() }
»» -->
»» </style>

je veux dire

»» Emmanuel


 
vers le hautvers le bas 

(JAVASCRIPT) javasript dans CSS

Le message suivant est de: Bartouille, Adresse électronique bertrand.wattel@free.fr, 20. 04. 2004, 23:05
http://mythes.foret.free.fr

»» ciao tutti,
Bijour,

»» Sur l'une des pages d'un site dont je m'occupe, tous les liens utilisent un script
»» <a href="http://www.bibi.fr/" onclick="NewWindow(this.href,'','750','550','yes','center');return false" onfocus="this.blur()">

Dis-moi si je me trompe, mais ne chercherais-tu pas un moyen d'éviter moults copier-coller et un code plutôt lourd ?
Malheureusement, les feuilles de style sont là pour le style et pas pour les comportements. Je peux me tromper, mais à ma connaissance, il n'y a pas moyen d'intégrer du code javascript dans des CSS (ou alors inventer les javaCSScript ;-)

Par contre pour t'économiser la peinture des touches de ton clavier, je vois 2 solutions :
1/Comme finalement, le seul paramètre qui change dans ton exemple, c'est le nom de la page, il te suffit de les inclure dans la :
function NewWindow(url) {
  open('tut_tut',url,....);
}
Ou alors, encore plus fort, tu redéfinit directement le comportement onclick des balises A !

2/ Tu te contentes d'un target="_blank" dans les liens et dans les pages devant s'afficher en petites fenêtres, tu modifies dynamiquement la taille de la fenêtre et sa position sur l'écran (self.width, ...). La méthode a du bon, car si pour raison x ou y, javascript ne fonctionne pas chez l'internaute, il verra quand même une nouvelle fenêtre s'afficher, certes avec les mauvaises dimensions (à moins qu'il n'utilise Lynx, mais y'en a plus beaucoup lol)

Par contre, y'a qque chose que je pige pas. A quoi sert le blur sur l'évènement focus ?

Bartouille


 
vers le hautvers le bas 

(JAVASCRIPT) javasript dans CSS

Le message suivant est de: Patrick Andrieu, Adresse électronique nospam@nospam.no, 20. 04. 2004, 23:19
http://www.selfhtml.com.fr/equipe/patrick.htm

Salut Bartouille!



»» Par contre, y'a qque chose que je pige pas. A quoi sert le blur sur l'évènement focus ?


À éliminer la ligne ponctuée fournie par Internet Explorer lorsqu'on clique un lien. Certains utilisent onfocus="this.blur()", mais ceci  tue par la même occasion toute possibilité de naviguer de lien à lien par touche tab, laquelle est-utilisée par exemple par les aveugles munies d'un programme audio "de lecture".

MS de Francfort sur le Main,
Patrick


 

vers le hautvers le bas 

(JAVASCRIPT) javasript dans CSS

Le message suivant est de: emmanuel, Adresse électronique tijan@nomade.fr, 21. 04. 2004, 13:08




»» À éliminer la ligne ponctuée fournie par Internet Explorer lorsqu'on clique un lien. Certains utilisent onfocus="this.blur()", mais ceci  tue par la même occasion toute possibilité de naviguer de lien à lien par touche tab, laquelle est-utilisée par exemple par les aveugles munies d'un programme audio "de lecture".

Ok j'ai compris je vire onfocus="this.blur()". Je ne connaissais pas cette "navigation de lien à lien par touche tab".

Emmanuel


 
vers le hautvers le bas 

(JAVASCRIPT) javasript dans CSS

Le message suivant est de: Bartouille, Adresse électronique bertrand.wattel@free.fr, 21. 04. 2004, 15:19
http://mythes.foret.free.fr

»» À éliminer la ligne ponctuée fournie par Internet Explorer lorsqu'on clique un lien. Certains utilisent onfocus="this.blur()", mais ceci  tue par la même occasion toute possibilité de naviguer de lien à lien par touche tab, laquelle est-utilisée par exemple par les aveugles munies d'un programme audio "de lecture".

Merci Patrick !


 
vers le hautvers le bas 

(JAVASCRIPT) javasript dans CSS

Le message suivant est de: emmanuel, Adresse électronique tijan@nomade.fr, 21. 04. 2004, 13:16



»» Dis-moi si je me trompe, mais ne chercherais-tu pas un moyen d'éviter moults copier-coller et un code plutôt lourd ?

C'est exactement ça!!

»» Par contre pour t'économiser la peinture des touches de ton clavier, je vois 2 solutions :
»» 1/Comme finalement, le seul paramètre qui change dans ton exemple, c'est le nom de la page, il te suffit de les inclure dans la :
»» function NewWindow(url) {
»»   open('tut_tut',url,....);
»» }

je vois pas le gain mais c'est peut-être plus jolie

»» Ou alors, encore plus fort, tu redéfinit directement le comportement onclick des balises A !

????moi pas comprendre???

»» 2/ Tu te contentes d'un target="_blank" dans les liens et dans les pages devant s'afficher en petites fenêtres, tu modifies dynamiquement la taille de la fenêtre et sa position sur l'écran (self.width, ...). La méthode a du bon, car si pour raison x ou y, javascript ne fonctionne pas chez l'internaute, il verra quand même une nouvelle fenêtre s'afficher, certes avec les mauvaises dimensions (à moins qu'il n'utilise Lynx, mais y'en a plus beaucoup lol)

j'ai jamais fais ça mais je vais étudier la question. Ca me semble en effet la solution la plus élégante.

merci :-)

Emmanuel


 
vers le hautvers le bas 

(JAVASCRIPT) javasript dans CSS

Le message suivant est de: Bartouille, Adresse électronique bertrand.wattel@free.fr, 21. 04. 2004, 15:18
http://mythes.foret.free.fr

»» »» 1/Comme finalement, le seul paramètre qui change dans ton exemple, c'est le nom de la page, il te suffit de les inclure dans la :
»» »» function NewWindow(url) {
»» »»   open('tut_tut',url,....);
»» »» }

»» je vois pas le gain mais c'est peut-être plus jolie
Le gain est direct : au lieu de noter 5 ou 10 fois les paramètres de la fonction (taille de la fenêtre, position, ...) à chaque balise de lien, tu ne les notes qu'une fois dans le corps de la fonction. Economie de clavier, et économie de taille de page.
Cela dit, si les autres paramètres évoluent selon les balises, la solution ne fonctionne pas.

»» »» Ou alors, encore plus fort, tu redéfinit directement le comportement onclick des balises A !

»» ????moi pas comprendre???
Aïe, je me suis peut-être rapidement avancé. Autant, il est facile de redéfinir un évènement onkeypress, autant je n'arrive pas à accéder à la valeur href du lien. Pour l'instant, ça ne fonctionne pas.


 
vers le hautvers le bas 

(JAVASCRIPT) javasript dans CSS

Le message suivant est de: emmanuel, Adresse électronique tijan@nomade.fr, 21. 04. 2004, 15:51

»» Le gain est direct : au lieu de noter 5 ou 10 fois les paramètres de la fonction (taille de la fenêtre, position, ...) à chaque balise de lien, tu ne les notes qu'une fois dans le corps de la fonction. Economie de clavier, et économie de taille de page.
»» Cela dit, si les autres paramètres évoluent selon les balises, la solution ne fonctionne pas.

tu sais que t'es pas bête (contrairement à moi), mais je suis tellement nul en programation que ça m'étais pas venu à l'esprit.
J'ai tout simplement pris un script tout fait que j'ai à peine adapter.
Je teste ça tout de suite. enfin des que j'ai le temps.
comme tu peux le noter, j'avais pas compris la première fois.

merci vieux

je vais tout de même voir si je comprend le truc en dynamique aussi, comme ça je pourrais comparer.

NB : Je n'ai aucune idée de la difficulté de la chose mais il me semble que cette idée de "style javascript" est une évolution logique (et je m'étonne que ça existe pas déjà).


 
vers le hautvers le bas 

(JAVASCRIPT) javasript dans CSS

Le message suivant est de: Celelibi, Adresse électronique sysygogo86@msn.com, 22. 04. 2004, 20:58
http://www.espionet.com

Bonjour

malheureusement pour le moment CSS et JavaScript sont pas très copain.
par exemple on ne peut pas récupérer un style d'un objet si il n'est pas défini explicitement.

à la limite tu peut faire un une boucle sur un getElementsByTagName('a') pour assigner le même évènement onclick à tous les liens.

il me semble qu'il est aussi possible d'intervenir directement sur la structure par défaut de la balise 'a', mais je ne me rappel plus comment faire.

en tout cas c'est pas avec Node.prototype , parceque sinon c'est toutes les balises qui prendront le même attribut :P


sur ce...
ps : si je retrouve je revient vous en faire part.


 

vers le hautvers le bas 

(JAVASCRIPT) javasript dans CSS

Le message suivant est de: emmanuel, Adresse électronique tijan@nomade.fr, 23. 04. 2004, 14:37



»» à la limite tu peut faire un une boucle sur un getElementsByTagName('a') pour assigner le même évènement onclick à tous les liens.

jamais vue ça!!

»» il me semble qu'il est aussi possible d'intervenir directement sur la structure par défaut de la balise 'a', mais je ne me rappel plus comment faire.

jamais vue ça, non plus.

j'ai l'impression que le niveau de ce forum me dépasse quelque peux.
je vais travailler.

:-(
Emmanuel
(pirkinra)


 
vers le hautvers le bas 

(JAVASCRIPT) javasript dans CSS

Le message suivant est de: Celelibi, Adresse électronique sysygogo86@msn.com, 25. 04. 2004, 01:50
http://www.espionet.com:7080/

[...]
»» jamais vue ça!!
pour getElementsByTagName cf http://selfhtml.selfhtml.com.fr/javascript/objets/document.htm#get_elements_by_tag_name

»» j'ai l'impression que le niveau de ce forum me dépasse quelque peux.
»» je vais travailler.
c'est peut-être juste mon niveau qui est un peu élevé ^^
il faut dire que je code en javascript depuis quelques années déjà (et je continu à apprendre des trucs).


voilà
@+


 

vers le hautvers le bas 

(JAVASCRIPT) javasript dans CSS

Le message suivant est de: emmanuel, Adresse électronique tijan@nomade.fr, 27. 04. 2004, 17:01


»» pour getElementsByTagName cf http://selfhtml.selfhtml.com.fr/javascript/objets/document.htm#get_elements_by_tag_name

Je vais aller regarder ça. pour le moment je me suis contempté de récrire le script comme le suggérais Bartouille.
dès que j'ai le temps je regarde si je comprend.

merci
:-)
Emmanuel


 
vers le hautvers le bas 

(JAVASCRIPT) javasript dans CSS

Le message suivant est de: Bartouille, Adresse électronique bertrand.wattel@free.fr, 23. 04. 2004, 23:52
http://mythes.foret.free.fr

»» Bonjour

»» malheureusement pour le moment CSS et JavaScript sont pas très copain. Par exemple on ne peut pas récupérer un style d'un objet si il n'est pas défini explicitement.
Si un style n'est pas défini explicitement, c'est que le texte est soumis aux règles génériques de la page. On peut y accéder en javascript pour l'objet document.body.currentStyle, au moins sous IE. Toutes les informations de style y sont mentionnées. ET si on veut se balader plus finement dans la structure du document, on peut utiliser document.documentElement.currentStyle, toujours sous IE. Je ne sais si Netscape a implémenté ces objets.

»» à la limite tu peut faire un une boucle sur un getElementsByTagName('a') pour assigner le même évènement onclick à tous les liens.
»» il me semble qu'il est aussi possible d'intervenir directement sur la structure par défaut de la balise 'a', mais je ne me rappel plus comment faire. en tout cas c'est pas avec Node.prototype , parceque sinon c'est toutes les balises qui prendront le même attribut :P

Voilà un code qui redéfinit (testé que sous IE6) le comportement onclick de balises HREF avec la propriété ID="menu" :

<HTML>
<HEAD>
<SCRIPT>
<!--
function changeClick()
{
 alert('Vous vouliez aller ici : '+this.href+', mais pas question !');
 return false;
}
-->
</SCRIPT>
</HEAD>
<BODY>
<A ID="menu" HREF="f.htm"><B>test</B></A>
<A ID="menu" HREF="g.htm"><B>test2</B></A>
</BODY>
<SCRIPT>
<!--
for (i=0;i<document.links.length;i++)
{
 if (document.links[i].id == 'menu')
 {
  document.links[i].onclick=changeClick;
 }
}
-->
</SCRIPT>
</HTML>

Il faut que le script venant redéfinir la méthode onclick soit à la fin, sinon la collection des liens est vide car pas encore initialisée.

Je serais assez curieux de savoir la compatibilité d'un tel script (je pense qu'il devrait tourner sans problème à partir de IE3 et NS4)

Dans le cas de notre ami Emmanuel, on peut imaginer de le paramétrer en modifiant systématiquement la méthode onclick des balises de liens puis en effectuant un test sur la propriété href. Si celle-ci contient un code donné, par exemple _bl_nomfic.html, on ouvre une nouvelle fenêtre sinon, on laisse la procédure se dérouler. La fonction changeClick pourrait ressembler à ceci :

function changeClick()
{
 var reFiltreFichier = /_bl_/;

 if(reFiltreFichier.test(this.href))
 {
  open('this.href','newWindow','width=100');
  return false;
 }
 else return true;
}
Pour le coup, plus besoin de toucher aux onclick, ni même de modifier une propriété de la balise <A>, javascript va détecter automatiquement par le nom du fichier si une nouvelle fenêtre doit être ouverte. Par contre si l'on souhaite paramétrer les propriétés de la nouvelle fenêtre, il faut :
1/ soit les inclure sous forme de propriété dans la balise <A>, exemple <A HREF="_bl_toto.html" W_WIDTH="100">, et les analyser dans la fonction changeClick
2/ Soit dans le fichier _bl_toto.html on paramètre une fonction sur l'évènement ONLOAD du BODY pour modifier l'aspect de la fenêtre.

Evidemment, on peut se faire des variantes, en veux-tu, en voilà !

Bartouille


 
vers le hautvers le bas 

(JAVASCRIPT) javasript dans CSS

Le message suivant est de: emmanuel, Adresse électronique tijan@nomade.fr, 27. 04. 2004, 16:57

»» Par contre pour t'économiser la peinture des touches de ton clavier, je vois 2 solutions :
»» 1/Comme finalement, le seul paramètre qui change dans ton exemple, c'est le nom de la page, il te suffit de les inclure dans la :
»» function NewWindow(url) {
»»   open('tut_tut',url,....);
»» }

cette solution donne:
<script type="text/javascript">
<!--
function NewWindow(mypage,myname){
  var Left=(screen.width)?(screen.width-640)/2:100;
  var Top=(screen.height)?(screen.height-480)/2:100;
  var Configuration="'toolbar=no, menubar=yes, location=yes, directories=no, status=yes, resizable=yes, width=640, height=480, left=" + Left + ", top=" + Top;
  window.open(mypage,myname,Configuration);
}
// -->
</script>

et dans le corps

<A HREF="toto.htm" ONCLICK="NewWindow(this.href,'');return false">

J'ai compilé deux scripts pour ça (dont un de Eric King Url: http://redrival.com/eak/index.shtml, l'autre je me souvient plus)
il y a un truc que je comprend pas c'est la syntax:
top=" + Top;
pourquoi ne faut-il pas refermer avec :
top=" + Top + ";
??? ce qui me semble plus logique

c'est mieux qu'au départ mais pas encore parfait. je me penche sur les autres propositions proposées.


 
vers le haut

© 1998-2004 Adresse électronique selfhtml@fr.selfhtml.org