[xhtm][css][jquery] Wysuwany Panel Opcje

[styryl]

Witam

Mam pytanie odnośnie jak przypuszczam css

Chciałem zrobić wysyuwany panel - po kliknięciu w obrazek wysuwa się pod nim panel - tak samo w każdej przeglądarce.

Zrobiłem tak:

JS

[PHP] pobierz, plaintext 
  <script type="text/javascript">
 
 $(document).ready(
 
 function()
 {
 $("div.ListShow").attr('style', 'display: none;');
 $("span.ListClick").attr('style', 'cursor:pointer;');
 
 $("span.OptionList").children("span.ListClick").click(
 function()
 {
 
 $(this).next(".ListShow").toggle();
 
 }
 );
 }
 );
 </script>
[PHP] pobierz, plaintext 

[HTML] pobierz, plaintext 
<table> 
 <tr> 
  <td id="tableIt">
   <img class="infoTool" src="template/img/ikonki/zobacz.png" title="Podgląd" border="0"> | 
   <span class="OptionList">
    <span class="ListClick"><img class="infoTool" src="template/acp/img/ikony/edycja.png" title="Edytuj" border="0"></span>
    <div class="ListShow">statystyki<br>abonament</div>
   </span>
  </td>
 </tr>
</table> 
[HTML] pobierz, plaintext 

No i css

[PHP] pobierz, plaintext 
.ListShow{
border:1px solid #B3B3B3;
background:#ffffff;
position:absolute;
}
[PHP] pobierz, plaintext 

wszystko działa panel się pokazuje po kliknięciu a po ponownym znika. Jednak nie potrafię go ustawić w jednym miejscu tak aby we wszsytki przeglądarkach było ok.

proszę o pomoc.

Pzdr

[pedro84]

Kod

.ListShow{
border:1px solid #B3B3B3;
background:#ffffff;
position:absolute;
}

A gdzieś go w ogóle pozycjonujesz? Bo ja nie widzę...

[styryl]

No usunąłem ten kod gdyż mija się on z celem ponieważ w ff jest inaczej i w IE jest inaczej i w Operze też. Przeszukując sieć znalazłem jeszcze że można "zresetować" położenie left i top ale co dalej?

[woodzu]

swojemu "ListClick" daj

[HTML] pobierz, plaintext 
id="ListClick"
[HTML] pobierz, plaintext 

a swojemu "ListShow" daj

[HTML] pobierz, plaintext 
 id="ListShow" style="position: absolute; display: none;"
[HTML] pobierz, plaintext 

potrzebny kod:

[HTML] pobierz, plaintext 
$("#ListClick").mouseover(showIt);
$("#ListShow").mouseout(hideIt);
 
var showIt = function(ev) {
  //znajdź pozycję #ListClick
  var pos = $("#ListClick").offset();  
  var width = $("#ListClick").width();
  //pokaż #ListShow bezpośrednio pod #ListClick
  $("#ListShow").css( { "left": (pos.left + width) + "px", "top":pos.top + "px" } );
  $("#ListShow").show();
}
 
var hideIt = function(ev) {
  $("#ListShow").hide();
}
[HTML] pobierz, plaintext 

Ten post edytował woodzu 18.03.2010, 01:27:35