Neregistrovaný Přihlásit Registrovat

Přidat otázku mezi oblíbenéZasílat nové odpovědi e-mailem Jak rozbalit div pomocí js/jquery?

Zdravím,
když se podíváte na claire.eessencia.cz a poklikáte tam >>> Zobrazit LIVESTREAM a vedle >>> Zobrazit LIVECHAT
Zobrazí a nebo zmizí Vám 2 divy, které obsahují to co obsahují.

Chtěl bych ale ten efekt doplnit spíš o rozbalovací efekt směrem dolů.
Bohužel mé znalosti JS a jQuery jsou malé.
Nedokázal by mi tu někdo jednoduše doplnit do kódu to co je k tomu třeba?

JS pro dosavadní bliknutí je toto:

  <script language="JavaScript">
    function toggle(id){
      var state = document.getElementById(id).style.display;
      if (state == 'block'){
        document.getElementById(id).style.display = 'none';
      } else {
        document.getElementById(id).style.display = 'block';
      }
    }
  </script>

Děkuji mnohokrát.

Jsou zobrazeny jen nové odpovědi. Zobrazit všechny
Předmět Autor Datum
3MB obrázek na pozadí a celková velikost stránky přes 6.5 MB? To si děláš srandu ne?
Wikan 14.08.2012 07:45
 Wikan
Za prvé, ten web není dodělaný, první hledím na kód, na konec až optimalizuji rychlost. Za druhé, mě…
Eessencia 14.08.2012 10:35
 Eessencia
Za prvé, dělat web tak, že "není zoptimalizovaný" je naprostá blbost. Není třeba něco "optimalizovat…
Kráťa 14.08.2012 11:05
 Kráťa
Ne opravdu to nedělám proto, abych si tam mohl plesknout "optimalizováno pro...". Jsem prostě zvyklí…
Eessencia 14.08.2012 11:10
 Eessencia
Možná ti to přijde divné, ale Wikan profík je (a kalibru dost velkého). nový
Kráťa 14.08.2012 11:39
 Kráťa
Na té samé stránce se mi líbí víc tohle od Freda (i jsem vyzkoušel a uložil si "na někdy". <div id=… poslední
Kráťa 14.08.2012 12:08
 Kráťa

Za prvé, dělat web tak, že "není zoptimalizovaný" je naprostá blbost. Není třeba něco "optimalizovat", když to děláš normálně. Ale to bys pak nemohl mít dole nápis "Optimalizováno pro Internet Explorer 8, 2500 x 1680, 5 GByte/s".
Za druhé. Na rady ohledně velikosti ses sice neptal, ale dal jsi sem link, že mi zamrzl mobil, když jsem tam vlezl.
Nicméně našel jsem ti to (zadal jsem v Google "vysouvací div"). Podle mě se to dá udělat vícero způsoby i bez načítání knihoven a jánevímčeho (není to však animované).

<html>
  <head>
    <script src="jquery.js"></script>
    <script>
      $(function() {
        $("#test").click(function() {
          $(this).animate({width: 1000}, 500);
        });
      });
    </script>
    <style>
      #test {
        width: 100px;
        height: 100px;
        border: 1px solid #000000;
      }
    </style>
  </head>
  <body>
    <div id="test"></div>
  </body>
</html>

74455-vysouvaci-div

Ne opravdu to nedělám proto, abych si tam mohl plesknout "optimalizováno pro...".
Jsem prostě zvyklí a naučený, že velikost obrázků řeším až na konec. Pokud se to někomu zdá podivné, či až srandovní, tak mě je to vcelku jedno a budu dělat to, co mi vyhovuje.
Chápu, že jsem na to byl upozorněn, ale chtělo by to lekce slušného chování a ne hned, "no to si snad děláš srandu ne?". To pak vypadá jak kdyby pán, položejíc tuto otázku byl profík největšího kalibru a kdokoliv se tu na cokoliv zeptá je naprostej trotl.

Edit -> Každopádně díky.

Na té samé stránce se mi líbí víc tohle od Freda (i jsem vyzkoušel a uložil si "na někdy".

<div id="message" style="background:blue;"><a id="rsdv"  style="color:white" title="+" href="#">+</a></div> 
<div style="background:yellow">bla bla</div>

<script>
var d=document;
function sh(id1,id2){
ele=document.getElementById(id2);
ele.style.height='20px';

d.getElementById(id1).onclick=function(){
if(this.title=='-'){h();this.removeAttribute('rel');this.title='+';return false;}
else{s();this.setAttribute('rel','on');this.title='-';return false;}};
d.getElementById(id1).onkeypress=function(){return this.onclick;};
}
function h(){
var end=20;if(parseInt(ele.style.height,10)>end){
ele.style.height=parseInt(ele.style.height,10)-20+"px";setTimeout(h,1);
}
}
function s(){var end=400;if(parseInt(ele.style.height,10)<end){
ele.style.height=parseInt(ele.style.height,10)+20+"px";setTimeout(s,1);
}
}


sh('rsdv','message');
</script>

74455-vysouvaci-div

Zpět do poradny Odpovědět na původní otázku Nahoru