login  Naam:   Wachtwoord: 
Registreer je!
 Forum

suckerfish en forms...

Offline Thomas - 26/09/2005 15:42
Avatar van ThomasModerator Hey, heeft iemand ervaring met het CSS/JavaScriptje "suckerfish" (voor het bouwen van dropdownmenu's), met name oplossingen voor de situatie waarin een menu uitklapt OVER formulier-items (want dat doet de standaard versie niet volgens mij)?

Bestaat hier een oplossing voor?

9 antwoorden

Gesponsorde links
Offline haytjes - 26/09/2005 22:19
Avatar van haytjes Gouden medailleGouden medaille

JS gevorderde		 werkt dit niet
[css]
position:absolute;
[/css]
of zoiets
Offline Thomas - 26/09/2005 23:56 (laatste wijziging 27/09/2005 07:33)
Avatar van Thomas Moderator *zucht*
Nee, en ik heb ook al ff zitten kijken naar zaken als z-index, maar ook dat schijnt niet echt te werken.

Iemand?
Offline Gml - 27/09/2005 13:54 (laatste wijziging 27/09/2005 13:57)
Avatar van Gml HTML beginner Het probleem is alleen in IE of niet?? In IE kan een div niet over een aantal form objecten vallen, een dropdown lijstje bijv.

Ik ken suckerfish verder niet maar hier is een workaround:
In het divje (wat over de items moet vallen) moet je eerst een iframe zetten en daarin zet je vervolgens je inhoud.
IE zal namelijk wel een iframe over de form objecten zetten. Het wordt allemaal wel ietsje trager, maar dat is niet echt merkbaar.

Je hoeft eigenlijk niet eens een pagina aan te roepen vanuit de iframe, bevordert ook de snelheid, want over je iframe prak je weer een div (ja dat gaat weer wel) en daar zet je je inhoud in.



Offline xSc - 28/09/2005 13:03
Avatar van xSc Onbekend Ik heb niet alles goed gelezen, maar wordt het niet opgelost wanneer je een background-color meegeeft aan je menu?
Offline Thomas - 28/09/2005 13:19
Avatar van Thomas Moderator Dat maakt niet zoveel uit, als het form-element (waarover je menu zou moeten vallen) over je menu valt eh?

Het probleem speelt zich af in IE:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title></title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <meta name="description" content="" />
  7. <meta name="keywords" content="" />
  8. <meta name="robots" content="all" />
  9.  
  10. <style type="text/css" rel="stylesheet">
  11. #nav, #nav ul {
  12.   padding: 0;
  13.   margin: 0;
  14.   list-style: none;
  15. }
  16.  
  17. #nav li {
  18.   float: left;
  19.   position: relative;
  20. }
  21.  
  22. #nav li ul {
  23.   display: none;
  24.   position: absolute;
  25.   top: 20px;
  26.   left: 0;
  27. }
  28.  
  29. /* IE fix - gecomment laten? */
  30. /*
  31. li > ul {
  32.   top: auto;
  33.   left: auto;
  34. }
  35. */
  36.  
  37. #nav li:hover ul, #nav li.over ul {
  38.   display: block;
  39.   clear: left;
  40. }
  41.  
  42. /* eigen styles */
  43. .menu_home {
  44.   font-family: Verdana;
  45.   font-size: 9pt;
  46.   font-weight: bold;
  47.   color: #ffffff;
  48.  
  49.   width: 50px;
  50.   height: 25px;
  51.   padding-top: 5px;
  52.   padding-bottom: 5px;
  53. }
  54.  
  55. .menu_top {
  56.   font-family: Verdana;
  57.   font-size: 9pt;
  58.   font-weight: bold;
  59.   color: #000000;
  60.   border: 1px solid #000000;
  61.  
  62.   height: 20px;
  63.   width: 150px;
  64. }
  65.  
  66. .menu_item {
  67.   font-family: Verdana;
  68.   font-size: 9pt;
  69.   color: #ffffff;
  70.  
  71.   background-color: #ffffff;
  72.   border: 1px solid #ef1216;
  73.   height: 25px;
  74.   width: 200px;
  75. }
  76.  
  77. #nav li li a {
  78.   display: block;
  79.   padding-top: 5px;
  80.   padding-bottom: 5px;
  81. }
  82.  
  83. /*
  84. li li a:hover {
  85.   background-color: #f0f0f0;
  86. }
  87. */
  88.  
  89. a {
  90.   color: #000000;
  91.   font-weight: bold;
  92.   text-decoration: none;
  93. }
  94. </style>
  95. <!--
  96. http://www.alistapart.com/articles/dropdowns
  97. -->
  98. <script language="JavaScript" type="text/javascript">
  99. startList = function() {
  100.   if(document.all&&document.getElementById) {
  101.     navRoot = document.getElementById("nav");
  102.     for(i=0; i<navRoot.childNodes.length; i++) {
  103.       node = navRoot.childNodes[i];
  104.       if(node.nodeName=="LI") {
  105.         node.onmouseover=function() {
  106.         this.className+=" over";
  107.       }
  108.       node.onmouseout=function() {
  109.         this.className=this.className.replace(" over", "");
  110.       }
  111.     }
  112.   }
  113.   }
  114. }
  115. window.onload = startList;
  116. </script>
  117. </head>
  118.  
  119. <body>
  120. <br /><br /><br /><br /><br /><br />
  121. <ul id="nav">
  122. <li class="menu_home">&nbsp;&nbsp;Home</li>
  123.  
  124. <li class="menu_top">&nbsp;&nbsp;Menu 1
  125.   <ul>
  126.   <li class="menu_item"><a href="">&nbsp;Submenu 1</a></li>
  127.   <li class="menu_item"><a href="">&nbsp;Submenu 1</a></li>
  128.   <li class="menu_item"><a href="">&nbsp;Submenu 1</a></li>
  129.   <li class="menu_item"><a href="">&nbsp;Submenu 1</a></li>
  130.   <li class="menu_item"><a href="">&nbsp;Submenu 1</a></li>
  131.   </li>
  132.   </ul>
  133. </li>
  134.  
  135. <li class="menu_top">&nbsp;&nbsp;Menu 2
  136.   <ul>
  137.   <li class="menu_item"><a href="">&nbsp;Submenu 2</a></li>
  138.   <li class="menu_item"><a href="">&nbsp;Submenu 2</a></li>
  139.   <li class="menu_item"><a href="">&nbsp;Submenu 2</a></li>
  140.   <li class="menu_item"><a href="">&nbsp;Submenu 2</a></li>
  141.   <li class="menu_item"><a href="">&nbsp;Submenu 2</a></li>
  142.   </ul>
  143. </li>
  144.  
  145. <li class="menu_top">&nbsp;&nbspMenu 3
  146.   <ul>
  147.   <li class="menu_item"><a href="">&nbsp;Submenu 3</a></li>
  148.   <li class="menu_item"><a href="">&nbsp;Submenu 3</a></li>
  149.   <li class="menu_item"><a href="">&nbsp;Submenu 3</a></li>
  150.   <li class="menu_item"><a href="">&nbsp;Submenu 3</a></li>
  151.   <li class="menu_item"><a href="">&nbsp;Submenu 3</a></li>
  152.   </ul>
  153. </li>
  154.  
  155. <li class="menu_top">&nbsp;&nbsp;Menu 4
  156.   <ul>
  157.   <li class="menu_item"><a href="">&nbsp;Submenu 4</a></li>
  158.   <li class="menu_item"><a href="">&nbsp;Submenu 4e</a></li>
  159.   <li class="menu_item"><a href="">&nbsp;Submenu 4</a></li>
  160.   <li class="menu_item"><a href="">&nbsp;Submenu 4</a></li>
  161.   </ul>
  162. </li>
  163.  
  164. <li class="menu_top">&nbsp;&nbsp;Menu 5
  165.   <ul>
  166.   <li class="menu_item"><a href="">&nbsp;Submenu 5</a></li>
  167.   <li class="menu_item"><a href="">&nbsp;Submenu 5</a></li>
  168.   <li class="menu_item"><a href="">&nbsp;Submenu 5</a></li>
  169.   <li class="menu_item"><a href="">&nbsp;Submenu 5</a></li>
  170.   <li class="menu_item"><a href="">&nbsp;Submenu 5</a></li>
  171.   <li class="menu_item"><a href="">&nbsp;Submenu 5</a></li>
  172.   <li class="menu_item"><a href="">&nbsp;Submenu 5</a></li>
  173.   </ul>
  174. </li>
  175. </ul><br /><br />
  176. <form>
  177. <select>
  178. <option>whatever</option>
  179. <option>whatever</option>
  180. <option>whatever</option>
  181. </select>
  182. </form>
  183. </body>
  184. </html>
Offline NCube - 28/09/2005 14:08
Avatar van NCube HTML beginner Ik heb een kleine workaround bedacht
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script language="JavaScript" type="text/javascript">
  2. startList = function() {
  3.   if(document.all&&document.getElementById) {
  4.     navRoot = document.getElementById("nav");
  5.     for(i=0; i<navRoot.childNodes.length; i++) {
  6.       node = navRoot.childNodes[i];
  7.       if(node.nodeName=="LI") {
  8.         node.onmouseover=function() {
  9.         this.className+=" over";
  10. 		for( i=0 ; i < document.forms.length ; i++){
  11. 			document.forms[i].style.visibility = 'hidden';
  12. 		}
  13.       }
  14.       node.onmouseout=function() {
  15.         this.className=this.className.replace(" over", "");
  16. 		for( i=0 ; i < document.forms.length ; i++){
  17. 			document.forms[i].style.visibility = 'visible';
  18. 		}
  19.       }
  20.     }
  21.   }
  22.   }
  23. }
  24. window.onload = startList;
  25. </script>

Met dit als de javascript code, wordt elke form verborgen zodra je met de muis over het menu gaat, en alle forms worden weer zichtbaar als de muis weer uit het menu gaat. Je kan het waarschijlijk ook wel zo aanpassen dat het bijvoorbeeld alleen de select hide.
Offline prorsoft - 28/09/2005 16:18
Avatar van prorsoft PHP gevorderde Ik zet mijn menuscriptje altijd helemaal onderaan de pagina, en dan geef ik 'm een position: absolute enzo, zodatie toch nog op zijn plaats komt.
Doordat ie onderaan de pagina staat wordt deze ook helemaal over de andere items gezet.

PS. z-index zou ook moeten werken hoor...
Offline Gml - 28/09/2005 18:04
Avatar van Gml HTML beginner Dit werkt en is voor zover ik weet de enige manier:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title></title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <meta name="description" content="" />
  7. <meta name="keywords" content="" />
  8. <meta name="robots" content="all" />
  9.  
  10. <style type="text/css" rel="stylesheet">
  11. #nav, #nav ul {
  12.   padding: 0;
  13.   margin: 0;
  14.   list-style: none;
  15. }
  16.  
  17. #nav li {
  18.   float: left;
  19.   position: relative;
  20. }
  21.  
  22. #nav li ul {
  23.   display: none;
  24.   position: absolute;
  25.   top: 20px;
  26.   left: 0;
  27. }
  28.  
  29. /* IE fix - gecomment laten? */
  30. /*
  31. li > ul {
  32.   top: auto;
  33.   left: auto;
  34. }
  35. */
  36.  
  37. #nav li:hover ul, #nav li.over ul {
  38.   display: block;
  39.   clear: left;
  40. }
  41.  
  42. /* eigen styles */
  43. .menu_home {
  44.   font-family: Verdana;
  45.   font-size: 9pt;
  46.   font-weight: bold;
  47.   color: #ffffff;
  48.  
  49.   width: 50px;
  50.   height: 25px;
  51.   padding-top: 5px;
  52.   padding-bottom: 5px;
  53. }
  54.  
  55. .menu_top {
  56.   font-family: Verdana;
  57.   font-size: 9pt;
  58.   font-weight: bold;
  59.   color: #000000;
  60.   border: 1px solid #000000;
  61.  
  62.   height: 20px;
  63.   width: 150px;
  64. }
  65.  
  66. .menu_item {
  67.   font-family: Verdana;
  68.   font-size: 9pt;
  69.   color: #ffffff;
  70.  
  71.   background-color: #ffffff;
  72.   border: 1px solid #ef1216;
  73.   height: 25px;
  74.   width: 200px;
  75. }
  76.  
  77. #nav li li a {
  78.   display: block;
  79.   padding-top: 5px;
  80.   padding-bottom: 5px;
  81. }
  82.  
  83. /*
  84. li li a:hover {
  85.   background-color: #f0f0f0;
  86. }
  87. */
  88.  
  89. a {
  90.   color: #000000;
  91.   font-weight: bold;
  92.   text-decoration: none;
  93. }
  94. </style>
  95. <!--
  96. http://www.alistapart.com/articles/dropdowns
  97. -->
  98. <script language="JavaScript" type="text/javascript">
  99. startList = function() {
  100.   if(document.all&&document.getElementById) {
  101.     navRoot = document.getElementById("nav");
  102.     for(i=0; i<navRoot.childNodes.length; i++) {
  103.       node = navRoot.childNodes[i];
  104.       if(node.nodeName=="LI") {
  105.         node.onmouseover=function() {
  106.         this.className+=" over";
  107.       }
  108.       node.onmouseout=function() {
  109.         this.className=this.className.replace(" over", "");
  110.       }
  111.     }
  112.   }
  113.   }
  114. }
  115. window.onload = startList;
  116. </script>
  117. </head>
  118.  
  119. <body>
  120. <br /><br /><br /><br /><br /><br />
  121. <ul id="nav">
  122. <li class="menu_home">&nbsp;&nbsp;Home</li>
  123.  
  124. <li class="menu_top">&nbsp;&nbsp;Menu 1
  125. 	<ul>
  126. 		<iframe style="width:200px; height:100px;" ></iframe>
  127. 		<div style="width:200px; height:100px; margin-top:-100px; background-color:#FFFFFF; border:1px solid #F00;">
  128. 			Inhoud or whatever...		
  129. 		</div>
  130.   </ul>
  131. </li>
  132.  
  133.  
  134. </ul><br /><br />
  135.  
  136.  
  137. <form>
  138. <select>
  139. <option>whatever</option>
  140. <option>whatever</option>
  141. <option>whatever</option>
  142. </select>
  143. </form>
  144. </body>
  145. </html>
Offline Fenrir - 28/09/2005 20:00
Avatar van Fenrir PHP expert
Citaat:
Overlaping Form Controls and Plug-ins
IE 5.5 Screenshot

Some elements cause display problems when overlapped by positioned elements. An example of this is shown in the image at right, taken from IE version 5.5. This can occur when elements overlap form controls, applets or plug-in displays like Flash.

It happens because browsers may let other programs handle the display of these elements, like a plug-in or the operating system. Even setting the z-index will not help. These other programs control that space and will simply draw on top of whatever the browser renders.
Which elements "bleed through" depends on the browser. Netscape 6 and IE 5.5 manage all form controls themselves, except for SELECT elements. With IE, these will display on top of any other content. With Netscape, the select box itself works as expected but the scroll bar will bleed through if the SIZE attribute is greater than one. Opera 5.0 has this problem with all form elements.

This cannot be fixed. Your only recourse is to try to avoid overlapping such elements. In some cases, you might know or be able to dynamically detect an overlap and hide the offending element from view by setting its style via scripting using settings like visibility:hidden or display:none.

http://www.brai...fault5.asp

En hier staat een goed script voor suckerfish:

http://www.htmldog.com/articles/suckerfish/shoal/
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.213s