Jump to content

Znojmo

Membre
  • Content Count

    5
  • Joined

  • Last visited

Community Reputation

0 Neutre
  1. Finalement j'ai réglé ça, voici mon code : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- saved from url=(0014)about:internet --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Mon site</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <script type="text/javascript" language="Javascript"> function chk(){ my_div=document.getElementById("textecentre") my_div.style.height=document.documentElement.clientHeight-236 + "px" } onresize=chk </script> <style type="text/css"> html {height:100%;} body {text-align:center; height:100%;} #overall {margin:auto; width:990px; position:relative; height:100%; background-color:#6699CC;} #textecentre {position:absolute; top:210px; right:260px; width:450px; height:auto; margin:1% auto 0; background-color:#99CCFF; overflow:auto;} #footer {width:990px; height:68px; margin:auto; background-color:#006699;} </style> </head> <body onload="chk();"> <div id="overall"> <div id="textecentre"> <div id="IDpres"><pre> présentation présentation présentation présentation présentation présentation présentation présentation présentation présentation présentation présentation présentation présentation présentation présentation présentation présentation présentation présentation présentation présentation présentation </pre></div> </div> </div> <div id="footer"> </div> </body> </html> Et en prime, une programmeuse me donne sur un autre forum une solution sans JavaScript! : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- saved from url=(0014)about:internet --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Mon site</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <style type="text/css"> html,body {height:100%;margin:0;padding:0;} #overall {margin:auto; width:990px; position:relative; height:100%; background-color:#6699CC;} #textecentre {position:absolute; top:210px; bottom:0px; right:260px; width:450px; background-color:#99CCFF; overflow:auto;} #footer {width:990px; height:68px; margin:auto; background-color:#006699;} </style> </head> <body> <div id="overall"> <div id="textecentre"> <div id="IDpres"><pre> présentation présentation présentation présentation présentation présentation présentation présentation présentation présentation présentation présentation présentation présentation présentation présentation présentation présentation présentation présentation présentation présentation présentation </pre></div> </div> </div> <div id="footer"> </div> </body> </html> Ça fait des jours que j'essayais de régler ma fonction JavaScript...
  2. Mise à jour : Il y a pas mal de problèmes postés sur des forums concernant le document.body.clientHeight qui ne fonctionne pas sous IE. Mais contrairement à moi, tout le monde semble avoir merveilleusement réglé le problème en remplaçant ça par document.documentElement.clientHeight... je poursuis donc mes recherches et je voudrais bien le remplacer dans mon code, pour que si quelqu'un trouve la solution ça soit susceptible de marcher, mais je crois que je ne peux plus éditer mon message parce que je l'ai édité une fois.
  3. Bonjour à tous, J'essaie de faire un site avec une superbe function que j'ai trouvée et qui me permet de faire la mise en forme que je veux... J'ai énormément cherché pour obtenir cette fonction, parce que ma mise en forme est impossible sans! Regardez dans mon site, c'est la fonction chk Mais quand je mets un DOCTYPE à mon site, n'importe lequel, ça annule cette fonction! Quelqu'un peut m'aider? <!-- saved from url=(0014)about:internet --><HTML><HEAD><TITLE>Mon site</TITLE><script type="text/javascript">function chk(){my_div=document.getElementById("textecentre")top_space=document.getElementById("textecentre").offsetTopbottom_space=4my_div.style.height=document.body.clientHeight-top_space-bottom_space}onresize=chk</script><style type="text/css">html {height:100%;}body {text-align:center; height:100%;}#overall {margin:auto; width:990px; position:relative; height:100%; background-color:#6699CC;}#textecentre {position:absolute; top:10px; right:260px; width:450px; height:auto; background-color:#99CCFF; overflow:auto;}#footer {width:990px; height:68px; margin:auto; background-color:#006699;}</style></HEAD><BODY onload="chk();"><div id="overall"><div id="textecentre"><div id="IDpres"><pre>présentationprésentationprésentationprésentationprésentationprésentationprésentationprésentationprésentationprésentationprésentationprésentationprésentationprésentationprésentationprésentationprésentationprésentationprésentationprésentationprésentationprésentationprésentation</pre></div></div></div><div id="footer"></div></BODY></HTML>
  4. Bonjour, J'ai trouvé cette superbe méthode pour faire apparaître et disparaître des trucs en jQuery, qui va m'être d'une grande aide : <!DOCTYPE html> <head> <script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script> <script> head.js("http://code.jquery.com/jquery-2.0.0.min.js", function(){ $( function(){ $("button", "#boutons").on("click", function(){ $( "div[id^='ID']" ).hide(); <!--Cacher toutes les DIV qui contiennent ID--> $( "#ID" + $( this ).text() ).show(); <!--Montrer la DIV qui s'appelle ID plus (le texte dans le bouton)--> }); }); } ); </script> </head>   <body> <div id="boutons"> <button>111</button> <button>112</button> <button>113</button> </div> <div id="texte"> <div id="ID111"> <p>1.1.1</p> </div> <div id="ID112"> <p>1.1.2</p> </div> <div id="ID113"> <p>1.1.3</p> </div> </div> </body> </html> Le problème : mes boutons seront des images. Je ne peux donc pas utiliser la partie ''$( "#ID" + $( this ).text() ).show();''. Ma question : est-il possible d'utiliser une autre manière de faire référence à ces boutons, comme par exemple avec l'attribut Name ou l'attribut Id (qui, d'après mes essais, ne fonctionnent pas)? J'ai essayé en appliquant des names à mes boutons et en changant la ligne : $( "#ID" + $( this ).text() ).show(); pour : $( "#ID" + $( this ).name() ).show(); mais ça ne fonctionnait pas. Une idée?
  5. Bonjour, J'essaie de faire un superbe menu-accordéon. Je suis très bien parti, il n'y a plus qu'un seul problème : je dois cliquer deux fois sur les "headers" (désolé pour l'anglicisme) pour que les sections s'ouvrent, le deuxième coup (le premier coup ça marche parfaitement). Quelqu'un a une idée du problème? Je joins mon code. Il n'y a aucune image et le code jQuery est en lien sur le web, alors un seul copier-coller suffit à l'expérimenter! <html> <head> <script src="[url="http://code.jquery.com/jquery-1.4.2.min.js%22></script>"]http://code.jquery.c...n.js"></script>[/url] <script> $(document).ready(function(){ $(".menu_head").toggle( function(){ //le problème des 2 clics est apparu quand j'ai ajouté les 2 lignes suivantes, qui servent à enrouler les sections inutilisées du menu $(".menu_head").find('span').html('+'); $(this).siblings("div.menu_body").slideUp("slow"); $(this).next().slideDown(); $(this).find('span').html('-'); }, function(){ $(this).next().slideUp(); $(this).find('span').html('+'); }) }); </script> <style> #firstpane p span {padding:1px 9px 2px 9px; position:relative; float:right; font-weight:bold;} body { margin: 10px auto; font: 75%/120% Verdana,Arial, Helvetica, sans-serif; background-color: #6699CC; } #haut { border-top-right-radius: 20px; border-top-left-radius: 20px; border-right: 6px groove; border-left: 6px groove; border-top: 6px groove; border-color: #0052CC; padding: 5px; margin: 0px; background-color: #C2EBFF; } #bas { border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; border-right: 6px groove; border-left: 6px groove; border-bottom: 6px groove; border-color: #0052CC; padding: 5px; margin: 0px; background-color: #C2EBFF; background-size:0px 0px; } .menu_list { width: 150px; } .menu_head { border-right: 6px groove; border-left: 6px groove; border-color: #0052CC; color:#336680; padding: 8px; cursor: pointer; position: relative; margin:0px; font-weight:bold; background-color: #C2EBFF; } .menu_body { display:none; border-right: 6px groove; border-left: 6px groove; border-color: #006699; } .menu_body a{ display:block; color:#66ccff; background-color:#194775; padding-left:10px; font-weight:bold; text-decoration:none; } .menu_body a:hover{ display:block; color:#A3E0FF; background-color:#4D7094; padding-left:10px; font-weight:bold; text-decoration:none; } </style> </head> <body> <div style="float:left" > <div id="firstpane" class="menu_list"> <p id="haut"></p> <p class="menu_head">Header-1<span>+</span></p> <div class="menu_body"> <a href="#">Link-1</a> <a href="#">Link-2</a> <a href="#">Link-3</a> </div> <p class="menu_head">Header-2<span>+</span></p> <div class="menu_body"> <a href="#">Link-1</a> <a href="#">Link-2</a> <a href="#">Link-3</a> </div> <p class="menu_head">Header-3<span>+</span></p> <div class="menu_body"> <a href="#">Link-1</a> <a href="#">Link-2</a> <a href="#">Link-3</a> </div> <p id="bas"></p> </div> </div> </body> </html> Merci de tout coeur pour votre attention!
×
×
  • Create New...