Elemek újraméretezés az ablakméret változásakor

Írta: | 2008. május 04. | kategóriák: (X)HTML, CSS, JavaScript, Web

Biztos vagyok benne, hogy már többetek fejében megfordult a gondolat, hogy bizonyos elemeknek új méretet kellene adni az ablak újraméretezése esetén. Nem nagy szó, CSS. Igen ám, de mi van abban az esetben, hogyha egyes elemek, mint például egy űrlap elemei dinamikusan fix egy százalékban kifejezett értékből kivont képpontokban meghatározott mérték szélességű.

Példa

Az oldal dinamikusan váltja a szélességét az ablakmérettől függően. Ráadásként, az oldal tartalmi része dinamikus szélességű, míg az oldaléc fix értékkel rendelkezik. A tartalmi részben van egy űrlap, ami dinamikusan kell változtassa a méretét a tartalmi rész szélességétől függően.

Megoldás

A megoldáshoz szükségvan egy minimális CSS és HTML tudáshoz, illetve egy kevés JavaScriptet is jó, ha tudunk.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

<html>
  <head>
    <title>Teszt</title>
    <style type="text/css" media="screen">
      #wrapper{ /* az ablak kitöltése */
        width: 100%;
      }
      #wrapper #sidebar{ /* az oldalléc szélességének meghatározása */
        width: 200px;
        border: 1px solid lime;
        float: right;
      }
      #wrapper #content{ /* a tartalmi rész az ablak szélességével egyenlő, alap esetben */
        width: 100%;
        border: 1px solid red;
        float: left;
      }
      #wrapper #content input{ /* a szövegmezok formázása */
        width: 80%;
      }
    </style>
 
    <script type="text/javascript">
      window.onload = setContentSize; /* a betöltés befejezésének eseményén meghívódik az újraméretezés */
      window.onresize = setContentSize; /* az ablak méretváltozásán meghívódik az újraméretezést végző függvény */
 
      function setContentSize(){
        var wWidth; /* a változók, amiben az ablak szélességét tároljuk */
 
        if( typeof( window.innerWidth ) == 'number' ){
          /* ha nem IErol van szó */
          wWidth = window.innerWidth;
        }else if(document.documentElement && document.documentElement.clientWidth){
          /* IE 6 */
          wWidth = document.documentElement.clientWidth;
        }else if(document.body && document.body.clientWidth){
          /* IE 4 összférhető lekérés */
          wWidth = document.body.clientWidth;
        }
 
        document.getElementById('content').style.width = (myWidth - 220) + 'px'; /* az új érték meghatározása */
      }
    </script>
  </head>
  <body>
    <div id="wrapper">
      <div id="content">
        <p>A fő tartalmi egység.</p>
        <form method="post" action="" id="test" name="test">
          <input type="text" name="text1" value="value" />
          <button name="sbmt" type="submit" value="val">Küldés</button>
        </form>
      </div>
 
      <div id="sidebar">
       <p>Az oldalsáv tartalma.</p>
      </div>
 
    </div>
  </body>
</html>
0


Értékeld a bejegyzést!

Loading ... Loading ...

A bejegyzésre érkező kommenteket elérheted RSS 2.0 formájában vagy emailben is:

A bejegyzéshez tartozó trackback cím, illetve a permalink.

A megjegyzéseket kérlek, tedd fel érthető és illendő módon, ne fikázz le másokat, mert nem tudnak valamit, amit te már igen. A kommentár lehetőleg függjön a bejegyzéshez :)

kötelező
kötelező, titok marad
ha nincs, maradjon üres



Szia Tupacko!Nagyon jó az oldalad, nekem tetszik.Lenne 2 kérdésem:
1. A domain nevet hogyan csináltad, vagyis http://www.webpillango.org
2. A wordpress motort ismerem de nem tudom megcsinlni, hogyan kell?

Előre is köszönöm : Legenda9

Legenda9 2008. május 5. - 17:46

Köszönöm a témába vágó kérdésed :) A választ itt találod meg: http://forum.webpillango.org/index.php/topic,15.msg1030.html#msg1030

Avatar Tupacko
2008. május 5.
19:07

Kösziu :-D

Legenda9 2008. május 5. - 20:38

Szia Tupacko!

Az lenne kérdésem (megint :-D ), hogy te tudnál nekem regisztrálni WordPresst?

A domaint már megtudom oldani, valószínüleg lesz is domain nevem.

Várom válaszodat

Legenda9 2008. május 8. - 19:37

Ilyen nem létezik, hogy regisztrálni WordPresst. A további nem témához függő hozzászólásokat nem fogom szépszemmel nézni. Átalános kérdéseknek ott van a fórum. Ott mindenki szívesen van látva a fórumozó közösség által !

Köszönöm.

Avatar Tupacko
2008. május 8.
21:10

Bocsi.A fóromrol nem tudtam :-( .

Legenda9 2008. május 8. - 21:24

Azért írtam, ha nem láttad volna az oldallécben, a főmenöben vagy az idézetben :)

Avatar Tupacko
2008. május 8.
21:50

szia
régóta keresek egy ilyen kódot, mint ez, és tényleg nagyon hasznos, de szeretnék egy kicsit tovább lépni.
Sajnos nem vagyok egy guru, úgyhogy a segítségedet kérem.
pont ilyen átméretezésre lenne szükségem, azonban fotoblogot készítek magamnak, és azt szeretném, hogy felbontáshoz igazodjon a képnek a mérete is.
http://www.chromasia.com/iblog/
ennél a blognál láttam eddig csak ilyet, de nagyon tetszik, tudsz nekem segíteni, hogy mi a a titka?
előre is köszi a segítséget

pötyi 2008. július 7. - 08:38

Nem latom, hol valt meretet :-S Nekem ugyanugy jelenik meg, ha kis, ha nagy felbontassal nezem, annyi kulonbseggel, hogy kis felbontasnal kell gorgetni.

Avatar Tupacko
2008. július 7.
09:18

http://www.chromasia.com/iblog/archives/0807052101.php
nézd meg ezt a bejegyzést,
ha felbontást váltasz, és frissited az oldalt a kép átméreteződik, és megmarad az arány, akár még 800×600-ban is nézhető, meg 1280×1024-ben, és mindig a böngésző kb 80%át tölti ki a kép.

pötyi 2008. július 8. - 10:21

Ahogy látom az alap szkript hasonló arra, amit a bejegyzésben is látsz. A különbség annyi, hogy nem csak egy DIVet méretez át, hanem a képeket is átméretezi. Valójában (ha jól látom), ugyan arról a képről van szó, szóval igazából a böngésződ az, aki a méretezést végzi. Ezt egyszerüen megteheted, ha a méretezni kívánt kép width és height értékeit megváltoztatod, hasonlóan a DIV átméretezéséhez.
Remélem tudtam segíteni.

Avatar Tupacko
2008. július 8.
20:27

köszönöm azt hiszem most értem,
ha nem elolvasom még egy párszor :-) )

pötyi 2008. július 10. - 14:29

Nagyon szívesen :)

Avatar Tupacko
2008. július 12.
20:19