Bienvenue sur les forums conseil & création · S'enregistrer

Se connecter automatiquement

Forums » Javascript » menu pop-up · Envoyer le lien

Par Paraman, le 06 Nov 2004, 15:36 Revenir en haut de page Répondre en citant

slt

j'ai bien avancé sur mon site mais impossible de modifier mon menu pour qu'il n'ouvre plus les pages en pop-up
Par Cédric, le 07 Nov 2004, 13:10 Revenir en haut de page Répondre en citant

Salut,

Apparemment tu as enlevé le menu de ton site donc je ne peux pas voir...

En fait ce qu'il faut savoir, c'est qu'un lien normal n'utilise que le HTML :

Code:
<a href="ton-lien.htm">texte du lien</a>


... alors que les popup sont ouvertes par du javascript :

Code:
// soit en utilisant l'évènement onClick :
<a href="#" onClick="window.open('URL','nom_de_la_fenetre','options_de_la_fenetre')">texte du lien</a>

// Soit en intégrant le code dans le paramètre href (dans ce cas, il faut préciser javascript: pour que le navigateur interprète le code comme du javascript)
<a href="javascript:window.open('URL','nom_de_la_fenetre','options_de_la_fenetre')">texte du lien</a>


Avantages des popup (javascript) :
- le principal avantage est que les fenêtres sont totalement paramétrables : on peut activer ou désactiver certains élémens (menus, barre de défilement...), déterminer la taille de la fenêtre, autoriser ou non le redimentionnement de la fenêtre...
- il est possible d'ouvrir ces fenêtres à tout moment : à la fin du chargement de la page, au simple passage du curseur sur un élément de la page (texte, image...), à la fermeture de la page...

Inconvénients des popup (javascript) :
- c'est un code "client" donc exécuté sur l'ordi du visiteur. Il peut donc être désactivé... et la popup ne s'ouvrira pas !
- même si javascript est activé, les anti-popup peuvent bloquer les fenêtres. C'est utile pour bloquer les publicités, mais ca réduit les possibilités puisque maintenant, je pense que ça n'est plus trop conseillé de les utiliser...

Conclusion : si c'est pour de simples liens (comme ton menu), mieux vaut utiliser la méthode HTML.


Maintenant comment tu dois faire ?!

Ton problème (si je me souviens bien de ta page), c'est que tu as utilisé un script "générateur" qui a créé le code pour toi. Tu ne sais donc pas comment fonctionne ton menu ! (la preuve, sinon tu serais où se trouvent les liens en popup).

Il faut donc que tu les repère dans le code généré (celui que je t'avais conseillé d'exporter dans une page php) où se trouvent les pages ouvertes en popup.

Par exemple si un de tes liens en popup ouvre la page "parachutisme.php", cherches "parachutisme.php" dans la page et tu devrais trouver ce lien et il ne te reste plus " qu'à " supprimer le lien javascript et l'ajouter en html.

Voilà, essaie de le rechercher et dis nous quoi... Wink
Par Paraman, le 07 Nov 2004, 15:52 Revenir en haut de page Répondre en citant

ok je vais regarder sa

voici les liens si tu veut regarder

http://sportsetloisirs.free.fr/acceuil.php

http://sportsetloisirs.free.fr/fichier.zip la ce son ma page acceuil et ma page menu j'ais fait comme tu ma dit crées un lien php ds l'acceuil pour le menu et ds la page menu il y a que le menu

voilla
Par Paraman, le 09 Nov 2004, 23:43 Revenir en haut de page Répondre en citant

ta vu ??
Par Cédric, le 10 Nov 2004, 00:42 Revenir en haut de page Répondre en citant

Citation:
ok je vais regarder sa


Je pensais que tu allais voir ?! ;)

Si tu ne vois pas par toi même, c'est normal puisque je viens de regarder, et tes pages ne s'ouvrent pas en popup !

Il s'agit seulement d'une ouverture dans une autre frame. Donc si je comprends bien, tu veux que les pages s'ouvrent dans la même fenêtre ?

Si c'est ça, sachant maintenant que c'est à cause de la frame cible, tu ne vois vraiment pas d'où ça vient ? Wink
Par Paraman, le 10 Nov 2004, 21:18 Revenir en haut de page Répondre en citant

oh tes dur lol Very Happy

euh je croyer que c'etait en pop up donc je vais voir sa mais franchement sa va etre dur car j'ais verifier les lien ces comme un lien normal enfin je pence je vais voir sa tout de suite :ph34r:
Par Paraman, le 10 Nov 2004, 21:35 Revenir en haut de page Répondre en citant

SUPER j'ais trouver sa marche

le lien avant :

Code:
zlien[5][0] = '<A HREF="http://sportsetloisirs.free.fr/mesfavoris.php" CLASS=ejsmenu TARGET="framegauche">Mes favoris</A>';


le lien apres :

Code:
zlien[5][0] = '<A HREF="http://sportsetloisirs.free.fr/mesfavoris.php" CLASS=ejsmenu TARGET="_top">Mes favoris</A>';


bas un grand merci a conseil-creation (cedric)

trop cool ton forum ces de la bal

a++
Par Cédric, le 10 Nov 2004, 22:26 Revenir en haut de page Répondre en citant

En effet...

Il fallait modifier la cible (Target en Anglais pour les anglophobes Wink ).

Dans un lien (balise " " ) les paramètres principaux sont :

* href : l'URL du lien à ouvrir

* target : la frame ou la page dans laquelle s'ouvre le lien. 5 solutions :
- _top
- _parent : la frame "parent" de la frame en cours (en cas d'utilisation des frames)
- _self : la frame en cours (dans laquelle se trouve le lien)
- _blank : ouvre une nouvelle fenêtre à chaque clic
- enfin dernière solution : donner un nom à la frame.

==> Si tu donnes un nom à la frame cible :
- si le frameset de ta page (composition de toutes les frames composant ta page) contient une frame avec ce nom, le lien s'ouvrira dans cette frame,
- si aucune frame dans ta page ne porte ce nom, le lien s'ouvrira dans une nouvelle page, comme le paramètre _blank... mais la différence (avec _blank ) est que la frame de la nouvelle page portera ce nom. Donc à chaque nouveau clic sur un lien avec ce nom comme cible, le lien s'ouvrira dans cette page.

Je suis clair :unsure: Very Happy ?
Par Paraman, le 10 Nov 2004, 23:18 Revenir en haut de page Répondre en citant

euh OUI B)
Par Paraman, le 17 Mai 2008, 19:04 Revenir en haut de page Répondre en citant

coucou me revoilà avec mon menu

je voulais savoir si je peu, lui donner une balise ou je ne sais quoi pour qu'il soit toujours en bas de page, peu importe la longueur de ma page

merci A +
Par Cédric, le 17 Mai 2008, 21:10 Revenir en haut de page Répondre en citant

Pas très courant ce que tu veux faire... pour faire ça, je vois quatre solutions possibles:
  • soit avec un frameset: c'est assez simple à faire, mais ce n'est plus trop "à la mode"... d'autant que le menu sort du contexte des pages et que si je me souviens bien, lorsqu'un visiteur arrive sur ton site depuis un moteur de recherche, il tombe directement sur la page référencée et non sur le frameset complet (donc la page sans le menu). Ca oblige donc à insérer du code JavaScript pour être sûr que les pages sont bien ouvertes dans le frameset. Bref, pas très "propre".

  • soit avec JavaScript: en gros tu utilises la méthode onscroll (qui est générée quand on fait défiler la page) pour à chaque fois repositionner le menu à la bonne position (top = hauteur de la page - hauteur du menu). Bien sûr il faut dans ce cas être certain de la hauteur du menu.

  • soit avec CSS : certainement la méthode la plus actuelle et aux normes, même si conserver un élément en bas de l'écran n'est pas très courant. Par contre avec cette méthode, le menu ne sera pas réellement en bas de page. Il sera fixe, toujours à l'écran, mais pas "collé" au bas de la fenêtre. Juste un exemple de code à améliorer et à tester sur les différents navigateurs:

    Code:
    <html>
    <style type="text/css">
    #header, #footer, #centre { background:gray; }
    #header, #footer { border:1px solid black; }
    #center { border:1px dotted black; height:90%; overflow:scroll; }
    </style>
    <body>
    <div id="header">En tête</div>
    <div id="center"><p>centre</p></div>
    <div id="footer">Bas de page</div>
    </body>
    </html>


  • Enfin la méthode la plus fiable, mais qui n'est pas réellement autorisée d'un point de vue du standard W3C (si ça te préoccupe Wink ): utiliser les tableaux. si on s'en tiend aux standards, les tableaux ne doivent servir qu'à ordonner des données, pas à la mise en page. Mais les tableaux ont été utilisés pendant longtemps (et sont encore utilisés!) pour
    des raisons pratiques, puisque parfaitement modulables. Voici un bout de code à essayer aussi:
    Code:
    <html>
    <style type="text/css">
    body { margin:0; padding:0; }
    #page { height:100%; width:100%; }
    #header, #footer { background:gray; }
    #header, #footer { border:1px solid black; height:50px; }
    #center { border:1px dotted black; overflow:scroll; }
    #contenu { width:100%; height:100%; overflow:scroll; }
    </style>
    <body>
    <table id="page">
    <tr><td id="header">header</td></tr>
    <tr><td id="center"><div id="contenu">
    <script>for (i = 1; i < 50; i++) {
    document.write('<p>test, ligne ' + i + '</p>');
    }</script>
    </div>
    </td></tr>
    <tr><td id="footer">footer</td></tr>
    </body>
    </html>

Par Paraman, le 17 Mai 2008, 21:39 Revenir en haut de page Répondre en citant

j'ai tester sur une page voila ce que sa donne

http://sportsetloisirs.free.fr/2/page%20model.php

mais bon je me pose la question, si je vais pas abandonner mon menu est faire autrement Rolling Eyes

car voici un exemple sur une page de mon nouveau site en construction

http://sportsetloisirs.free.fr/2/moto.php

et tu va voir tout de suite que mon menu ne va plus

par contre le petit souci que j'ai, c'est quand l'onglet horizontale est trop grand, l'affichage se met au milieu au lieu d'être au début, je sais pas si tu va comprendre se que je veut dire

merci pour ta réponse toujours aussi rapide est claire Wink
Par Cédric, le 17 Mai 2008, 22:28 Revenir en haut de page Répondre en citant

Citation:
j'ai testé sur une page voilà ce que ça donne

Normal... ce que je t'ai donné, c'est la page complète, donc si tu veux y intégrer tes éléments il faut mettre le contenu de la page dans le <div id="contenu"> et le menu dans la cellule du tableau id="footer". En mettant le tableau à la suite de ton code, ça ne pourra pas fonctionner. As-tu essayé de coller le code sur une page vide (juste ce code) ?

Citation:
mais bon je me pose la question, si je ne vais pas abandonner mon menu et faire autrement

Ce serait mieux oui, d'abandonner le menu entièrement créé avec javascript et d'utiliser (x)HTML et CSS à la place... tout en sachant que tu peux toujours utiliser JS pour rendre ton menu plus interactif.

Citation:
et tu va voir tout de suite que mon menu ne va plus

Le menu fonctionne, mais il n'est pas très bien placé Rolling Eyes . Tu n'aurais pas ce problème s'il n'était pas positionné en absolu :

Code:
document.write('#topgauche { position:absolute; top:'+posYmenu+'px; left:'+posXmenu+'px; z-index:10; }')


...mais si tu modifies ce paramètre, tout le reste doit être modifié aussi (positionnement des sous-menu).

Juste un conseil au passage, il existe beaucoup de bibliothèques JavaScript très utiles et qui règlent la majeure partie des bugs/incompatibilités des navigateurs. Prototype, scriptaculous... c'est très utile et c'est une bonne habitude à prendre de se baser sur ce type d'outils (d'autant qu'une fois qu'on a compris leur fonctionnement, ça allège et simplifie énormément le code).

Citation:
par contre le petit souci que j'ai, c'est quand l'onglet horizontal est trop grand, l'affichage se met au milieu au lieu d'être au début, je ne sais pas si tu vas comprendre ce que je veux dire

Non, je ne comprends pas désolé Confused ... qu'est-ce que tu appelles onglet, qu'est-ce qui se met au milieu et c'est quoi "le début" (le bord gauche de la page?) ?

Ah et en passant: le script JS (du menu accordéon) ne fonctionne pas dans IE6. Il fonctionne dans FireFox (le PC avec IE7 est éteint donc je ne sais pas ce que ça rend) mais sous IE tout reste visible. Une démonstration en live de l'intérêt de scripts comme scriptaculous Wink . Et le contenu n'est pas centré comme dans FF.
Par Paraman, le 18 Mai 2008, 08:01 Revenir en haut de page Répondre en citant

arf Sad

j'ai pas essayer sous IE, je vais voir Wink

et je vais voir le reste aussi, mais tu sais moi je suis vite dépasser et après j'avance plus Crying or Very sad

pour tes liens c'est bien, mais c'est en anglais donc moi pas comprendre et pas rester longtemps dessus

edit: a oui effectivement sur IE c'est a chier, donc je suis bloquer la

et j'ai les boules d'avoir fait tout sa pour rien Sad
Par Cédric, le 18 Mai 2008, 08:16 Revenir en haut de page Répondre en citant

Quand tu fais des modifications (que ce soit HTML, CSS ou JavaScript), c'est important de tester le code sur différents navigateurs, surtout les plus importants (IE6, IE7 et FireFox).

J'essaierai de faire un tutoriel sur l'utilisation de Prototype et Scriptaculous... en français Wink

Forums » Javascript » menu pop-up · Envoyer le lien