[Javascript CSS] Flashbox

Flashbox [Javascript CSS] - HTML/CSS - Programmation

Marsh Posté le 14-03-2006 à 01:09:22    

Salut,
j essaye de faire une flash box, meme chose que la lightbox mais avec du flash dedans :)
 
J ai donc un layer qui fait 100% qui apparait et disparait.
 
Mon doc doit absolument etre en XHTML. Je sais que si je le passe en HTML ca fonctionne, par contre en XHTML sous ie le layer ne fait plus 100% de la hauteur ...
 
Un coup de main plz :'(
 
La page :
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>Untitled Document</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  8. <link href="style.css" rel="stylesheet" type="text/css">
  10. <script language=javascript type='text/javascript'>
  11. function hideDiv(pass) {
  12. var divs = document.getElementsByTagName('div');
  13. for(i=0;i<divs.length;i++){
  14. if(divs[i].id.match(pass)){//if they are 'see' divs
  15. if (document.getElementById) // DOM3 = IE5, NS6
  16. divs[i].style.visibility="hidden";// show/hide
  17. else
  18. if (document.layers) // Netscape 4
  19. document.layers[divs[i]].display = 'hidden';
  20. else // IE 4
  21. document.all.hideShow.divs[i].visibility = 'hidden';
  22. }
  23. }
  24. }
  26. function showDiv(pass) {
  27. var divs = document.getElementsByTagName('div');
  28. for(i=0;i<divs.length;i++){
  29. if(divs[i].id.match(pass)){
  30. if (document.getElementById)
  31. divs[i].style.visibility="visible";
  32. else
  33. if (document.layers) // Netscape 4
  34. document.layers[divs[i]].display = 'visible';
  35. else // IE 4
  36. document.all.hideShow.divs[i].visibility = 'visible'
  37. ;
  38. }
  39. }
  40. }
  41. </script>
  42. <script language="JavaScript" type="text/JavaScript">
  43. <!--
  44. function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  45.   if (init==true) with (navigator) {if ((appName=="Netscape" )&&(parseInt(appVersion)==4)) {
  46.     document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  47.   else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
  48. }
  49. MM_reloadPage(true);
  50. //-->
  51. </script>
  53. </head>
  55. <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
  58. <div id="layer1"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"><tr><td><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="middle"><td><div align="center"><table width="500" border="0" cellspacing="0" cellpadding="0"><tr><td width="500" height="11"><a href="javascript:hideDiv('flash1')"></a><a href="javascript:hideDiv('layer1')"><img src="img/flash_close.jpg" alt="close" width="500" height="11" class="thumb" /></a></td></tr><tr><td width="500" height="438"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" id="lambo" width="500" height="438" align="middle"><param name="movie" value="swf/lambo.swf" /><param name="quality" value="high" /><embed src="swf/lambo.swf" quality="high" width="500" height="438" id="lambo" name="lambo" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></object></td></tr></table></div></td></tr></table></td></tr></table></div>
  61. <a href="javascript:showDiv('layer1')">Show Div 256</a>
  62. </body>
  63. </html>


 
Le CSS attacher :
 
 

Code :
  1. #layer1{
  2. position:absolute;
  3. left:0;
  4. top:0;
  5. width:100%;
  6. height:100%;
  7. z-index:1;
  8. background-color:#333;
  9. -moz-opacity: 0.8;
  10. opacity:.80;
  11. filter: alpha(opacity=80);
  12. visibility:hidden;
  13. }


 
Vous pouvez aller le tester a :
 
http://cbolavie.free.fr/flashbox/test.htm
 

Reply

Marsh Posté le 14-03-2006 à 01:09:22   

Reply

Marsh Posté le 14-03-2006 à 08:54:06    

Vu les pietres connaissances que tu as en développement Web je te déconseille fortement de passer au xHTML surtout pour faire un bouzin totalement stupide et incompatible avec du xHTML standard.
 
De plus dans ton code Javascript il y a pleins de choses qui ne sont pas aux normes, et tu peux virer les lignes qui relatent de documents.layer et document.all
maintenant c'est document.getElementById("" ) pour attaquer un objet en JS.
 
Sinon tu pourrais nous montrer le doctype que tu utilisais avant ? tu as du passer du mode quirk au mode strict sans y faire attention.
 
Doit y avoir un problème de Modele de boite W3C dans les parages, mais désolé je n'ai pas le temps de corriger tout cela

Reply

Marsh Posté le 14-03-2006 à 09:16:26    

Encore une chose, quand je vois 3  tableaux imbriqués je trouve que il y a un sérieux problème non ?

Reply

Marsh Posté le 14-03-2006 à 10:14:24    

desoler, je suis en effet completement debutant en developpement javascript ... il faut bien debuter un jour ....
 
Merci de m avoir juste conseiller d abandonner sans me donner la moindre solution !
 
Ca c du coup de main !

Reply

Marsh Posté le 14-03-2006 à 10:34:38    

Tiens mon brave
ton appel au secours m'a fait suscité un élan de générosité de ma part :o

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <title>Untitled Document</title> 
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
  6. <link href="style.css" rel="stylesheet" type="text/css"> 
  7. <script  type="text/javascript"> 
  8.     function ShowHide(objectId, Action) { 
  9.         var myObject = document.getElementById(objectId); 
  10.         var result=""; 
  11.         switch(Action) { 
  12.             case "auto": result=(myObject.style.display=="block" ) ? "none" : "block"; break; 
  13.             case "hide" : result="none"; break; 
  14.             case "show" : result="block"; break; 
  15.             default: result="none"; 
  16.         } 
  17.         myObject.style.display=result; 
  18.     } 
  19. </script>  
  20. <style type="text/css"> 
  21.     body{ 
  22.         background:black; 
  23.     } 
  24.     #Movie{ 
  25.         width:500px; 
  26.         margin:0 auto; 
  27.     } 
  28.     #Movie a img{ 
  29.         border:none; 
  30.     } 
  31.     #Movie a{ 
  32.         display:block; 
  33.     } 
  34. </style> 
  35.  
  36. </head> 
  37. <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> 
  38. <a href="#" onclick="ShowHide('Movie','show')">Show The Movie</a> 
  39. <div id="Movie"> 
  40.     <a href="#" onclick="ShowHide('Movie','hide')"> 
  41.         <img src="img/flash_close.jpg" alt="close" width="500" height="11" class="thumb"/> 
  42.     </a> 
  43.     <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" id="lambo" width="500" height="438" align="middle"> 
  44.         <param name="movie" value="swf/lambo.swf" /> 
  45.         <param name="quality" value="high" /> 
  46.         <embed src="swf/lambo.swf" quality="high" width="500" height="438" id="lambo" name="lambo" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> 
  47. </object> 
  48. </div> 
  49. </body> 
  50. </html>

Reply

Marsh Posté le 14-03-2006 à 18:13:05    

merci bcp :)
 
je vais essayer d etudier un peu ca.
 
 

Reply

Marsh Posté le 15-03-2006 à 08:11:03    

Merci Gatsu.
 
Cependant il reste 2 problemes.
 
Le premier, je voudrais que la boite soit invisible par defaut. Ca ca doit pas etre bien compliquer.
 
Le deuxieme, je voudrais qu il y ai l effet de gris transparent qui se met au premier plan comme sur mon exemple.
 

Reply

Marsh Posté le 15-03-2006 à 08:45:25    

J ai essayer de modifier un peu le CSS pour obtenir ce que je cherche ....
 
 

Code :
  1. <style type="text/css">
  2. #Movie{
  3. display:none;
  4. position:absolute;
  5. top:0;
  6. left:0;
  7. width:100%;
  8. height:100%;
  9. z-index:5000;
  10. background-color:#000;
  11. -moz-opacity: 0.8;
  12. opacity:.80;
  13. filter: alpha(opacity=80);
  14. text-align: center;
  15. margin:0 auto;
  16. }
  18. #Movie a img{
  19. border:none;
  20. }
  22. #Movie a{
  23. display:block;
  24. }
  25. </style>


 
Avec ca sous firefox le griser apparait sur toute la page. Cependant le flash est pas centrer en hauteur. (Je sais pas comment faire ca ... )
 
Sous IE le griser n apparait que sur la hauteur du fichier flash et n occupe donc pas toute la hauteur de la page.
 

Reply

Marsh Posté le 15-03-2006 à 08:46:46    

tiens mendiant, je suis généreux aujourd'hui :o
Mais apprend un peu à faire de toi même c'est pourtant simple :o
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>Untitled Document</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <link href="style.css" rel="stylesheet" type="text/css">
  7. <script  type="text/javascript">
  8.     function ShowHide(objectId, Action) {
  9.         var myObject = document.getElementById(objectId);
  10.         var result="";
  11.         switch(Action) {
  12.             case "auto": result=(myObject.style.display=="block" ) ? "none" : "block"; break;
  13.             case "hide" : result="none"; break;
  14.             case "show" : result="block"; break;
  15.             default: result="none";
  16.         }
  17.         myObject.style.display=result;
  18.     }
  19. </script>  <style type="text/css">
  20.     body{ background:white;  }
  21.  #Movie{
  22.   background-color: #333;
  23.  display:none;
  24.  }
  25.     #Movie div{
  26.         width:500px;
  27.         margin:0 auto;
  28.     }
  29.     #Movie a img{ border:none;}
  30.  #Movie a{display:block; }
  31. </style>
  32. </head>
  33. <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
  34. <a href="#" onclick="ShowHide('Movie','show')">Show The Movie</a>
  35. <div id="Movie">
  36.  <div>
  37.     <a href="#" onclick="ShowHide('Movie','hide')">
  38.         <img src="img/flash_close.jpg" alt="close" width="500" height="11" class="thumb"/>
  39.     </a>
  40.     <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" id="lambo" width="500" height="438" align="middle">
  41.         <param name="movie" value="swf/lambo.swf" />
  42.         <param name="quality" value="high" />
  43.         <embed src="swf/lambo.swf" quality="high" width="500" height="438" id="lambo" name="lambo" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
  44.   </object>
  45.  </div>
  46. </div>
  47. </body>
  48. </html>

Reply

Marsh Posté le 15-03-2006 à 08:59:00    

Tiens j'ai modifié ton bordel, en prenant en compte que ton truc se centre dans ta page :o

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>Untitled Document</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <link href="style.css" rel="stylesheet" type="text/css">
  7. <script  type="text/javascript">
  8.     function ShowHide(objectId, Action) {
  9.         var myObject = document.getElementById(objectId);
  10.         var result="";
  11.         switch(Action) {
  12.             case "auto": result=(myObject.style.display=="block" ) ? "none" : "block"; break;
  13.             case "hide" : result="none"; break;
  14.             case "show" : result="block"; break;
  15.             default: result="none";
  16.         }
  17.         myObject.style.display=result;
  18.     }
  19. </script>  <style type="text/css">
  20. body, html {
  21.  height:100%;
  22. }
  23.     body{ background:white;  }
  24.  #Movie{
  25.  position:absolute;
  26.  top:0;
  27.  left:0;
  28.  bottom:0;
  29.  right:O;
  30.  height:100%;
  31.  width:100%;
  32.  -moz-opacity: 0.8;
  33.  opacity:.80;
  34.  filter: alpha(opacity=80);
  35.   background-color: #000;
  36.  display:none;
  37.  }
  38.     #Movie div{
  39.       width:500px;
  40.  position:absolute; /*positionnement absolu*/
  41.  top:50%; /*On met l'objet à la moitié de la page en hauteur*/
  42.  left:50%; /*Idem mais en largeur*/
  43.  margin-top:-220px; /*On retire la marge top en mettant la moitié de la hauteur du bloc placé (ton film en gros)*/
  44.  margin-left:-251px; /*Idem mais en largeur*/
  45.     }
  46.     #Movie a img{ border:none;}
  47.  #Movie a{display:block; }
  48. </style>
  49. </head>
  50. <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
  51. <a href="#" onclick="ShowHide('Movie','show')">Show The Movie</a>
  52. <div id="Movie">
  53.  <div>
  54.     <a href="#" onclick="ShowHide('Movie','hide')">
  55.         <img src="img/flash_close.jpg" alt="close" width="500" height="11" class="thumb"/>
  56.     </a>
  57.     <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" id="lambo" width="500" height="438" align="middle">
  58.         <param name="movie" value="swf/lambo.swf" />
  59.         <param name="quality" value="high" />
  60.         <embed src="swf/lambo.swf" quality="high" width="500" height="438" id="lambo" name="lambo" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
  61.   </object>
  62.  </div>
  63. </div>
  64. </body>
  65. </html>


Message édité par gatsu35 le 15-03-2006 à 09:15:31
Reply

Marsh Posté le 15-03-2006 à 08:59:00   

Reply

Marsh Posté le 15-03-2006 à 09:47:59    

Yes ca marche !
 
Merci bcp Gatsu35, je te dois une biere sur ce coup la ! :D
 
Bon j ai recoder une grosse partie de mon site aussi, et a priori c bcp plus propre.  
 
Encore merci milles fois en tout cas ;)

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed