ugrás a tartalomhoz

Oldal töltését jelző "ablak"

attiss94 · 2011. Nov. 16. (Sze), 17.54
Szép napot mindenkinek!
Mozt kezdtem foglalkozni a Javascript-ekkel, de fogalmam sincs arról, hogy hogyan lehetne megoldani a következő problémát: Amíg az oldal be nem tölt jelenjen meg egy ablak, mely jelzi a kliensnek, hogy az oldal tölt, de a hátteret sötétítse le és ne lehessen használni addik az oldalt. Próbáltam sokmindent, de mindig muszáj volt visszatérnem az eredetihez, mert nem működött...

Most így néz ki a kód:
  1. function betolt()  
  2.                 {  
  3.                     if (document.getElementById)  
  4.                         {  
  5.                             document.getElementById('betolto').style.visibility='hidden';  
  6.                         }  
  7.                         else  
  8.                             {  
  9.                                 if (document.layers)  
  10.                                     {  
  11.                                         document.betolto.visibility = 'hidden';  
  12.                                     }  
  13.                                     else  
  14.                                         {  
  15.                                             document.all.betolto.style.visibility = 'hidden';  
  16.                                         }  
  17.                             }  
  18.                 }  
Erre nincs valami egyszerű megoldás?
A válaszokat előre is köszönöm!
‹ JSON via jQuery Már a DIV sem jó? ›
 ■
1

Tanulgatok Java-zniElső

kuka · 2011. Nov. 16. (Sze), 18.12
Tanulgatok Java-zni
Első lecke: Java != JavaScript. Amit te ott összeírtál annak semmi köze Javahoz. Az JavaScript. Tehát a témát a HTML, CSS, JavaScript, Ajax fórumban kellett volna indítanod.

Második lecke: Ahonnan eddig tanultál/másoltál azt felejtsd el. document.layers és document.all a Netscape 4 illetve Explorer 4 idejében volt.

Harmadik lecke: Ha egy pucér függvényt idemásolsz anélkül, hogy a függvényhívásról és a kapcsolódó HTML-ről is szót ejtenél, azzal mi nincs mit kezdjünk a segítésed érdekében.
2

Köszönöm a választ,

attiss94 · 2011. Nov. 16. (Sze), 18.31
Köszönöm a választ, áthelyeztem a megfelelő fórumba. Nincs valakinek egy kész programja, ami működik? (Nem maga a program kell, áttanulmányozni szeretném.)
8

Tanulgatok Java-zni

Pepita · 2011. Nov. 20. (V), 18.58
Én nem látom, hogy ezt írta volna. Emiatt az 1. lecke nem ok.
9

Én nem látom, hogy ezt írta

kuka · 2011. Nov. 20. (V), 19.13
Én nem látom, hogy ezt írta volna. Emiatt az 1. lecke nem ok.
Az, hogy az idézett szövegrész eltűnt, azt jelenti, hogy az 1. lecke nemcsak, hogy Ok, de a kérdező pedig már meg is tanulta.

Hogy mennyire tesz jót a szakmai eszmecseréknek a korábban leírtak szerkesztése, az jó kérdés. De azt inkább a Weblabor 2012 - upgrade-ben kell felvetni.

Részemről pont azért idézetem a hozzászólásomban a kifogásolt részt, hogy a későn jövők is értsék miről volt szó.
10

Akkor bocs.

Pepita · 2011. Nov. 20. (V), 19.19
Elnézést kérek. Én nem szoktam átszerkeszteni, amit már leírtam...
Úgy látom "az óra meg rosszul jár".
3

Mi értelme?

Poetro · 2011. Nov. 16. (Sze), 19.03
Egyébként ennek mi az értelme? Mert hogy a felhasználót zavarni fogja, az biztos.
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <title>Page Title</title>  
  5.   <style type="text/css">  
  6.     #overlay {  
  7.       display: none;  
  8.       position: fixed;  
  9.       width: 100%;  
  10.       height: 100%;  
  11.       background: rgba(0, 0, 0, .8);  
  12.       color: white;  
  13.       text-align: center;  
  14.       top: 0;  
  15.       line-height: 10em;  
  16.     }  
  17.     .js #overlay {  
  18.       display: block;  
  19.     }  
  20.   
  21.     body {  
  22.       margin: 0;  
  23.       padding: 0;  
  24.     }  
  25.     .slow img {  
  26.       width: 100px;  
  27.     }  
  28.   </style>  
  29. </head>  
  30. <body>  
  31.   <script type="text/javascript">document.body.className = 'js'; // Van JS támogatás</script>  
  32.   <div id="overlay">Loading...</div>  
  33.   <ul class="slow">  
  34.     <li><img src="http://www.galawallpapers.net/download.php?id=74118&resolution=2560x1600" alt="" /></li>  
  35.     <li><img src="http://www.galawallpapers.net/download.php?id=70642&resolution=2560x1920" alt="" /></li>  
  36.   </ul>  
  37.   <script type="text/javascript">  
  38.     window.onload = function () {  
  39.       // Kikeressük az elemet.  
  40.       var overlay = document.getElementById('overlay');  
  41.       if (overlay) {  
  42.         // Ha megvan, eltávolítjuk.  
  43.         overlay.parentNode.removeChild(overlay);  
  44.       }  
  45.     }  
  46.   </script>  
  47. </body>  
  48. </html>  
Egyáltalán tudod mit jelent a visibility hidden?
4

Köszönöm a választ. Igen,

attiss94 · 2011. Nov. 16. (Sze), 19.27
Köszönöm a választ. Igen, elrejti az adott elemet (mint a display:none), nem?
5

Igen, elrejti az adott elemet

kuka · 2011. Nov. 16. (Sze), 19.41
Igen, elrejti az adott elemet (mint a display:none), nem?
Kipróbáltad?
6

Próbál ezt

mahoo · 2011. Nov. 16. (Sze), 21.25
Próbál ezt jquery-vel:
$(window).load(function() { $('#toltes').hide(); $('#tartalom').show(); });

css:
#toltes{display: block;} // bar ez nem szukseges
#tartalom{display: none;}
7

Felesleges

Poetro · 2011. Nov. 16. (Sze), 22.05
A fenti feladatra teljesen felesleges a jQuery, valamint azzal nem fogja megtanulni a JavaScript-et, se a DOM-ot. Mivel látható a fenti kódban, hogy mindössze pár sor JavaScript kell, betölteni hozzá több tíz kilobyte-nyi kódot szükségtelen.

De ha már jQuery, akkor kerüljük a show és hide függvények használatát, mert lassúak. Helyette inkább használjunk CSS osztályokat.