Mais je suis bloqué car je ne sais pas comment faire une liste défilante dans un popupUne liste Déroulante dans un popup...se fait de la même manière que dans une page HTML. => avec des Balises SELECT.
<html xmlns="[http://www.w3.org/1999/xhtml]"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ouvrir une pop-up et la centrer en javascript</title> <script src="[https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js]"></script> <script type="text/javascript"> function PopupTableau(titre) { w=open("",'image','width=400,height=400,menubar=no,toolbar=no,scrollbars=no,resizable=no'); w.document.write("<HTML>"); w.document.write("<HEAD>"); w.document.write("<TITLE>\"+titre+\"</TITLE>"); w.document.write("<style type=\"text/stylesheet\">"); w.document.write("body{font-size: 100%;}"); w.document.write("a{text-decoration: none;}"); w.document.write("#content{width: 220px;margin: 100px auto;font-size: 0.8125em;}"); w.document.write(".menu{width: auto;height: auto;-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);-moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);}"); w.document.write(".menu > li > a{background-color: #616975;background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(114, 122, 134)),to(rgb(80, 88, 100)));background-image: -webkit-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));background-image: -moz-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));background-image: -o-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));background-image: -ms-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));background-image: linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#727a86', EndColorStr='#505864');border-bottom: 1px solid #33373d;-webkit-box-shadow: inset 0px 1px 0px 0px #878e98;-moz-box-shadow: inset 0px 1px 0px 0px #878e98; box-shadow: inset 0px 1px 0px 0px #878e98;width: 300px;height: 2.75em;line-height: 2.75em;text-indent: 2.75em;display: block;position: relative;font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;font-weight: 600;color:#858585;text-shadow: 0px 1px 0px rgba(0,0,0,.5);}"); w.document.write(".menu ul li a{background: #fff; border-bottom: 1px solid #efeff0;width: 200px; height: 2.75em; line-height: 2.75em; text-indent: 2.75em; display: block; position: relative; font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif; font-size: 0.923em;font-weight: 400;color: #878d95;}"); w.document.write(".menu > li > a:hover, .menu > li > a.active{ background-color: #35afe3;background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(69, 199, 235)),to(rgb(38, 152, 219)));background-image: -webkit-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));background-image: -moz-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219)); background-image: -o-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));background-image: -ms-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));background-image: linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#45c7eb', EndColorStr='#2698db'); border-bottom: 1px solid #103c56;-webkit-box-shadow: inset 0px 1px 0px 0px #6ad2ef; -moz-box-shadow: inset 0px 1px 0px 0px #6ad2ef; box-shadow: inset 0px 1px 0px 0px #6ad2ef;}"); w.document.write(".menu > li > a.active{ border-bottom: 1px solid #1a638f;}"); w.document.write(".item1 > a:before{ background-position: 0 0;}"); w.document.write(".item6 > a:before{background-position: -10 10;}"); w.document.write(".menu > li > a:before { content: ''; font-size: 36px; height: 1em; width: 1em; position: absolute; left: 0; top: 50%; margin: -.5em 0 0 0;}"); w.document.write(".sousMenu{width:400px;-webkit-box-shadow: 0px 1px 3px 0px #1286f5, 0px 0px 18px 0px #1286f5;-moz-box-shadow: 0px 1px 3px 0px #1286f5, 0px 0px 18px 0px #1286f5;box-shadow: 0px 1px 3px 0px #1286f5, 0px 0px 18px 0px #1286f5;}"); w.document.write(".sousMenu ul li a{background: #fff; border-bottom: 1px solid #efeff0;width: 200px;height: 2.75em;line-height: 2.75em;text-indent: 2.75em;display: block;position: relative;font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;font-size: 0.923em;font-weight: 400;color: #878d95;}"); w.document.write(".sousMenu > li > a:hover, .menu > li > a.active{background-color: #35afe3;background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(69, 199, 235)),to(rgb(38, 152, 219)));background-image: -webkit-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));background-image: -moz-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));background-image: -o-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));background-image: -ms-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));background-image: linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#45c7eb', EndColorStr='#2698db');border-bottom: 1px solid #85808c;-webkit-box-shadow: inset 0px 1px 0px 0px #6ad2ef;-moz-box-shadow: inset 0px 1px 0px 0px #6ad2ef;box-shadow: inset 0px 1px 0px 0px #6ad2ef;}"); w.document.write(".sousMenu > li > a.active{border-bottom: 1px solid #1a638f;}"); w.document.write(".sousMenu > li > a:before { content: '';font-size: 36px;height: 1em;width: 1em; position: absolute; left: 0;top: 50%;margin: -.5em 0 0 0;}"); w.document.write("</style>"); //w.document.write("<script src=\"https:/ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"> <'/'script>"); w.document.write("</HEAD>"); w.document.write("<BODY bgcolor='#fff' leftMargin=0 topMargin=0 marginwidth=0 marginheight=0>"); w.document.write("<div id=\"content\">"); w.document.write("<ul class=\"menu\">"); w.document.write(" <li class=\"item1\"><a href=\"#\">Burkina</a>"); w.document.write(" <ul class=\"sousMenu\">"); w.document.write("<li class=\"item6\">"); w.document.write("<a href=\"#\">Kadiogo</a>"); w.document.write("<ul>"); w.document.write("<li><a href=\"#\"> Ouagadougou </a></li>"); w.document.write("<li><a href=\"#\"> Saaba </a></li>"); w.document.write("<li><a href=\"#\"> Komki-Ipala </a></li>"); w.document.write("</ul>"); w.document.write("</li>"); w.document.write("<li class=\"subitem2\">"); w.document.write("<a href=\"#\"> Houet </a>"); w.document.write("<ul>"); w.document.write(" <li><a> Bama </a></li>"); w.document.write(" <li><a> Bobo-Dioulasso </a></li>"); w.document.write("<li><a> Dandé </a></li>"); w.document.write("<li><a>Faramanaadéma </a></li>"); w.document.write("</ul>"); w.document.write("</li>"); w.document.write("<li class=\"subitem3\">"); w.document.write("<a href=\"#\">Balé</a>"); w.document.write("<ul>"); w.document.write("<li> <a> Bagassi </a></li>"); w.document.write("<li> <a> Boromo </a></li>"); w.document.write("<li> <a> Poura </a> </li>"); w.document.write("</ul>"); w.document.write("</li>"); w.document.write("</ul>"); w.document.write("</li>"); w.document.write("<li class=\"item2\"><a href=\"#\">Togo </a>"); w.document.write("<ul>"); w.document.write("<li class=\"subitem1\"><a href=\"#\">Lome </a></li>"); w.document.write("</ul>"); w.document.write("</li>"); w.document.write("<li class=\"item3\"><a href=\"#\">Ghana</a>"); w.document.write("<ul>"); w.document.write("<li class=\"subitem1\"><a href=\"#\"> Accra </a></li>"); w.document.write("<li class=\"subitem2\"><a href=\"#\">Tema</a></li>"); w.document.write("<li class=\"subitem3\"><a href=\"#\">Takoradi</a></li>"); w.document.write("</ul>"); w.document.write("</li>"); w.document.write("<li class=\"item4\"><a href=\"#\">Blog</a>"); w.document.write("<ul>"); w.document.write("<li class=\"subitem1\"><a href=\"#\">Santé</a></li>"); w.document.write("<li class=\"subitem2\"><a href=\"#\">Nutrition</a></li>"); w.document.write("</ul>"); w.document.write("</li>"); w.document.write("</ul>"); w.document.write("</div>"); w.document.write("</BODY></HTML>"); w.document.close(); } </script> </head> <body> <script type="text/javascript"> //Fonction de gestion du menu $(function() { var menu_ul = $('.menu > li > ul'),menu_a = $('.menu > li > a'); //var sousMenu_ul = $('.sousMenu > li > ul'), sousMenuenu_a = $('.sousMenu > li > a'); menu_ul.hide(); //sousMenu.hide(); menu_a.click(function(e) { e.preventDefault(); if(!$(this).hasClass('active')) { menu_a.removeClass('active'); menu_ul.filter(':visible').slideUp('normal'); $(this).addClass('active').next().stop(true,true).slideDown('normal'); } else { $(this).removeClass('active'); $(this).next().stop(true,true).slideUp('normal'); } }); /*sousMenu_a.click(function(e) { e.preventDefault(); if(!$(this).hasClass('active')) { menu_a.removeClass('active'); menu_ul.filter(':visible').slideUp('normal'); $(this).addClass('active').next().stop(true,true).slideDown('normal'); } else { $(this).removeClass('active'); $(this).next().stop(true,true).slideUp('normal'); } });*/ }); </script> <a href="#null" onclick="PopupTableau('TEST');">Ouvrir et centrer la Pop-Up</a> </body> </html>
la liste déroulante s'affiche entièrement sans que je clique sur un élément donnéTu veux dire quoi.. que ta liste CONTIENT Toutes les données et pas seulement celles correspondantes à ton choix ?
<html> <head> <title> TEST </title> </head> <body> <select id="s1" onchange="Alimenter_sel2(this.value)";> <option value="1"> choix 1 </option> <option value="2"> choix 2 </option> </select> <select id="s2" onchange="alert(getSelectedText(this.id))"> </select> <script type="text/javascript"> function Alimenter_sel2(sel1Value){ // ALimente la secode liste en fonction du choix de la premiere var opt=""; var s2 = document.getElementById('s2'); switch(sel1Value){ case "1": opt = '<option value="1">test choix1</option><option value="2">test2 choix1</option>'; break; case "2": opt ='<option value="10">test choix2</option><option value="20">test2 choix2</option>'; break; } s2.innerHTML = opt; } function getSelectedText(elementId) { // Recupere le texte selectionné dans le SELECT var elt = document.getElementById(elementId); if (elt.selectedIndex == -1) return null; return elt.options[elt.selectedIndex].text; } </script> </body> </html>
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Vertical Navigation Menu: CSS3 Coded</title> <script src="[https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js]"></script> </head> <body> <div id="content"> <ul class="menu"> <li class="item1"><a href="#">Burkina</a> <ul class="menu"> <li class="toggleSubMenu"> <a href="#">Kadiogo</a> <ul class="navigation"> <li class="toggleSubMenu"><a href="#"> Ouagadougou </a> <ul class="subMenu"> <li><a href="#" title="Aller au secteur 1">secteur 1</a></li> <li><a href="#" title="Aller au secteur 2">secteur 2</a></li> <li><a href="#" title="Aller au secteur 2">secteur 3</a></li> </ul> </li> <li><a href="#"> Saaba </a></li> <li><a href="#"> Komki-Ipala </a></li> </ul> </li> <li class="subitem2"> <a href="#"> Houet </a> <ul> <li><a> Bama </a></li> <li><a> Bobo-Dioulasso </a></li> <li><a> Dandé </a></li> <li><a>Faramanaadéma </a></li> </ul> </li> <li class="subitem3"> <a href="#">Balé</a> <ul> <li> <a> Bagassi </a></li> <li> <a> Boromo </a></li> <li> <a> Poura </a> </li> </ul> </li> </ul> </li> <li class="item2"><a href="#">Togo <span>147</span></a> <ul> <li class="subitem1"><a href="#">Lome </a></li> </ul> </li> <li class="item3"><a href="#">Ghana<span>340</span></a> <ul> <li class="subitem1"><a href="#"> Accra<span>14</span></a></li> <li class="subitem2"><a href="#">Tema<span>6</span></a></li> <li class="subitem3"><a href="#">Takoradi<span>2</span></a></li> </ul> </li> <li class="item4"><a href="#">Blog<span>222</span></a> <ul> <li class="subitem1"><a href="#">Santé<span>14</span></a></li> <li class="subitem2"><a href="#">Nutrition<span>6</span></a></li> </ul> </li> </ul> </div> <!--initiate accordion--> <script type="text/javascript"> $(document).ready( function () { // On cache les sous-menus : $(".navigation ul.subMenu").hide(); // On sélectionne tous les items de liste portant la classe "toggleSubMenu" // et on remplace l'élément span qu'ils contiennent par un lien : $(".navigation li.toggleSubMenu span").each( function () { var TexteSpan = $(this).text(); $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ; } ) ; // On modifie l'évènement "click" sur les liens dans les items de liste // qui portent la classe "toggleSubMenu" : $(".navigation li.toggleSubMenu > a").click( function () { // Si le sous-menu était déjà ouvert, on le referme : if ($(this).next("ul.subMenu:visible").length != 0) { $(this).next("ul.subMenu").slideUp("normal"); $(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") }); } // Si le sous-menu est caché, on ferme les autres et on l'affiche : else { // $(".navigation ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") }); $(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") }); } // On empêche le navigateur de suivre le lien : return false; }); }) ; $(function() { var menu_ul = $('.menu > li > ul'),menu_a = $('.menu > li > a'); menu_ul.hide(); menu_a.click(function(e) { e.preventDefault(); if(!$(this).hasClass('active')) { $(this).next("ul.menu").slideUp("normal"); $(this).addClass('active').next().stop(true,true).slideDown('normal'); } else { $(this).removeClass('active'); $(this).next().stop(true,true).slideUp('normal'); } }); }); </script> </body> </html>
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Vertical Navigation Menu: CSS3 Coded</title> <link rel="stylesheet" href="css/styles.css"> <script src="[https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js]"></script> </head> <body> <div id="content"> <ul class="menu"> <li class="item1"><a href="#">Burkina</a> <ul class="menu"> <li class="toggleSubMenu"> <a href="#">Kadiogo</a> <ul class="navigation"> <li class="toggleSubMenu"><a href="#"> Ouagadougou </a> <ul class="subMenu"> <li><a href="#" title="Aller au secteur 1">secteur 1</a></li> <li><a href="#" title="Aller au secteur 2">secteur 2</a></li> <li><a href="#" title="Aller au secteur 2">secteur 3</a></li> </ul> </li> <li><a href="#"> Saaba </a></li> <li><a href="#"> Komki-Ipala </a></li> </ul> </li> <li class="subitem2"> <a href="#"> Houet </a> <ul> <li><a> Bama </a></li> <li><a> Bobo-Dioulasso </a></li> <li><a> Dandé </a></li> <li><a>Faramanaadéma </a></li> </ul> </li> <li class="subitem3"> <a href="#">Balé</a> <ul> <li> <a> Bagassi </a></li> <li> <a> Boromo </a></li> <li> <a> Poura </a> </li> </ul> </li> </ul> </li> <li class="item2"><a href="#">Togo <span>147</span></a> <ul> <li class="subitem1"><a href="#">Lome </a></li> </ul> </li> <li class="item3"><a href="#">Ghana<span>340</span></a> <ul> <li class="subitem1"><a href="#"> Accra<span>14</span></a></li> <li class="subitem2"><a href="#">Tema<span>6</span></a></li> <li class="subitem3"><a href="#">Takoradi<span>2</span></a></li> </ul> </li> <li class="item4"><a href="#">Blog<span>222</span></a> <ul> <li class="subitem1"><a href="#">Santé<span>14</span></a></li> <li class="subitem2"><a href="#">Nutrition<span>6</span></a></li> </ul> </li> </ul> </div> <!--initiate accordion--> <script type="text/javascript"> $(document).ready( function () { // On cache les sous-menus : $(".navigation ul.subMenu").hide(); // On sélectionne tous les items de liste portant la classe "toggleSubMenu" // et on remplace l'élément span qu'ils contiennent par un lien : $(".navigation li.toggleSubMenu span").each( function () { var TexteSpan = $(this).text(); $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ; } ) ; // On modifie l'évènement "click" sur les liens dans les items de liste // qui portent la classe "toggleSubMenu" : $(".navigation li.toggleSubMenu > a").click( function () { // Si le sous-menu était déjà ouvert, on le referme : if ($(this).next("ul.subMenu:visible").length != 0) { $(this).next("ul.subMenu").slideUp("normal"); $(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") }); } // Si le sous-menu est caché, on ferme les autres et on l'affiche : else { // $(".navigation ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") }); $(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") }); } // On empêche le navigateur de suivre le lien : return false; }); }) ; $(function() { var menu_ul = $('.menu > li > ul'),menu_a = $('.menu > li > a'); menu_ul.hide(); menu_a.click(function(e) { e.preventDefault(); if(!$(this).hasClass('active')) { $(this).next("ul.menu").slideUp("normal"); $(this).addClass('active').next().stop(true,true).slideDown('normal'); } else { $(this).removeClass('active'); $(this).next().stop(true,true).slideUp('normal'); } }); }); </script> </body> </html>
<html xmlns="[http://www.w3.org/1999/xhtml]"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ouvrir une pop-up et la centrer en javascript</title> <script type="text/javascript"> function PopupTableau() { //w=open("test.html",'','width=400,height=400,menubar=no,toolbar=no,scrollbars=no,resizable=no'); width = 450; height = 400; var left=0; var top=0; left = (screen.width-width)/2; top = (screen.height-height)/2; window.open("test.html","PopUp","width="+width+",height="+height+",location=yes,status=no,toolbar=no,scrollbars=no, top="+top+", left="+left); } </script> <style> .boutonInput { width: 750px; border: 1px solid #000; margin: 3px; padding: 3px; height: 32px; } .resultatPopup { float: left; margin: 5px; color: #555; font-size:15px; } </style> </head> <body> <div>Adresse:</div> <div class="boutonInput"><div class="resultatPopup"> </div><div style="float:right;"><button href="" onclick="PopupTableau();">choix</button></div></div> </body> </html>