Zväčšovanie a zmenšovanie webu

rob1k · Napísal **rob1k**: 03.07.2010 10:16

Dobrý deň,

chcel by som sa spýtať, či náhodou nemáte k dispozícii script na postupné zväčšovanie a zmenšovanie webu.

Príklad:
Máme web. Obsah indexu má približne 20 riadkov, čo je zhruba 12cm. Keď si otvorím nejakú inu položku v menu, ktorá ma 50 riadkov, tak ako to spravím aby sa mi to zväčšil obsah webu postupne napr. po dobu 1 sekundy?

Ďakujem za odpovede.

PS: Dúfam že som to vysvetlil tak, že sa to dá pochopiť čo mám na mysli

coldak · Napísal **coldak**: 03.07.2010 10:59

asi myslis animovanie ? no najjednoduchsie je vlozit polozku v menu ktora ma 50 riadkov do DIV ktoremu nastavis overflow na hidden a cez timmer mu budes postupne zvacsovat velkost az na potrebnu uroven.

rob1k · Napísal autor témy **rob1k**: 03.07.2010 11:20

hej hej animovanie. ze to proste bude sa pomali zvacsovat a zmensovat. a ako mu nastavim timer? lebo v tomto fakt skusenost nemam

coldak · Napísal **coldak**: 03.07.2010 11:35

nastuduj si javascript settimeout a setinterval

rob1k · Napísal autor témy **rob1k**: 03.07.2010 11:53

ok dik

camo · Napísal **camo**: 03.07.2010 12:03

Coldak:
No dobre, ale ako vieš, aká je veľkosť toho DIVU? čo sa bude diať, keď bude napr. zväčšené písmo?
Možno sa len pýtam na nejakú fciu, alebo atribút, ktorý to vie vyhodnotiť, ja neviem.....

coldak · Napísal **coldak**: 03.07.2010 15:14

camo:
takto nejak som to myslel

Kód:

<html>
<head>
   <style>
      
      #div2{
         border: solid 1px blue;
         width: 10px;
         height: 0px;
         overflow-y:hidden;
         }   
      #ul1{
         border: solid 1px red;
         width: 10px;
         margin: 0px 0px 0px 0px; 
         }   
   </style>
</head>
<bod>
   <div id=div2>
      <UL id=ul1>
            <li>polozka1</li>
            <li>polozka2</li>
            <li>polozka3</li>
            <li>polozka4</li>
            <li>polozka5</li>
            <li>polozka6</li>
            <li>polozka7</li>
            <li>polozka8</li>
            <li>polozka9</li>
            <li>polozka10</li>
            <li>polozka11</li>   
        </UL>   
        
  </div>   
  <script>
  var counter = 1;

  var divv2 = document.getElementById("div2");
  var ull1 = document.getElementById("ul1");
  function zvacsi() {
    divv2.style.height = counter;
    counter++;
    if (divv2.clientHeight < ull1.clientHeight+2) 
    setTimeout(function(){zvacsi();},10);   
  }   

   zvacsi();     
 </script>   
</body>
</html>   

funguje mi to vsak spravne iba na IE, problem bude urcite v nespravnom CSS, ale tu sa urcite najde niekto kto ho dokaze opravit aby to spravne islo aj na firefoxe a opere

camo · Napísal **camo**: 03.07.2010 19:56

Skús dať miesto clientHeight - offsetHeight, či to neni v tom.

coldak · Napísal **coldak**: 03.07.2010 19:59

nejde o height ale o width lebo div sa nenatiahne na sirku zoznamu UL

camo · Napísal **camo**: 03.07.2010 20:01

No na tom neni nič divné, keď že má explicitne zadanú šírku 10px. Ja mám práveže problém s tým, že to nezväčšuje výšku....

coldak · Napísal **coldak**: 03.07.2010 20:05

nacom to skusas ? mne to spravne ide v IE a v opere a firefoxe sice nastavuje vysku no ma to zlu sirku , iba taky uzky pasik

camo · Napísal **camo**: 03.07.2010 20:07

No tak som to obohatil o - divv2.style.height = counter+"px"; a funguje to aj vo FF a Opere.

Edit:
Nechápem, ako ti to môže vo FF fungovať. U mńa sa to nehýbalo....
No a neviem, čo sa ti nevidí na tej explicitnej šírke 10px?!?!

coldak · Napísal **coldak**: 03.07.2010 20:29

ano, mal som to aj podla tvojho prikladu ale islo mi to aj bez neho a firefox je verzia 3.6.6 a opera je 10.53

camo · Napísal **camo**: 03.07.2010 20:30

A ako sa má ten tvoj ,,iba taky uzky pasik,,?

EDIT:
No ako sa tak na to pozerám, tak sa nám to začína pekne zamotávať. Keď totiž vymažem šírku zoznamu, tak to prestane v IE7 fungovať.
Nechápem prečo?!

Zväčšovanie a zmenšovanie webu

Podobné témy