Főoldalra

jQuery scroll() és resize() események.


Görgessük lefelé az oldalt. Görgetés eléri a felső top=50px értéket, adja hozzá ehhez az elemhez, a következő stílust:
.teszt01{background-color: yellow; border: 4px solid red;}
Görgessük felfelé az oldalt. Görgetés kisebb mint top=50px, vonja vissza a .teszt01 stílust.
Görgetés vízszintesen, érték left=50px, adja hozzá a következő stílust: .teszt02{background-color: #cfc; border: 4px solid blue;}

Top = 0
Left = 0







sroll()           Esemény figyelő. Függőleges és vízszintes görgetésnél aktiválódik.

scrollLeft()   Beállítja vagy visszaadja kiválasztott elem vagy elemek, vízszintes görgetősáv pozícióját.

scrollTop()    Beállítja vagy visszaadja kiválasztott elem vagy elemek függőleges görgetősáv pozícióját.

resize()         Esemény figyelő. Ablak átméretezésekor aktiválódik.

position()     Kiválasztott elemnél, visszaadja a pozíciót. (Top - Left, relatív a szülő elem.)

offset()         Kiválasztott elemnél, beállítja vagy visszaadja az eltolási koordinátákat. (A dokumentumhoz viszonyítva. )


resize()

Esemény figyelő. (Böngészőnk ablakának méretváltozását figyeli.)
Teszteléshez:
Tartsuk lenyomva a Ctrl billentyűt, és üssük le a mínusz (-) majd a plusz (+) billenytyűt.
Vagy, menjünk a jobb felső sarokba. Válasszuk az ablak átméretezése négyzeteket, és kattintsunk rá. Böngésző ablaka kisebb lesz, ekkor kattintsunk rá, még egyszer.

Ennyiszer méreteztük át, a böngészőnk ablakát = 0

Átméretezett böngészőnk ablakának mérete, body =


<div class="resizediv">

Megváltoztatjuk az ablak, azaz, a böngészőnk méretét, megváltozik ennek a
<div class="resizediv"> elemnek a stílusa is.

</div>






scroll()resize()
$(document).ready(function(){

	$(window).scroll(function() {
			var Toppozicio=$(document).scrollTop();
			var Leftpozicio=$(document).scrollLeft();
			$("#dokumentTop").html(Toppozicio);
			$("#dokumentLeft").html(Leftpozicio);
			
		if ($(document).scrollTop() > 50) {
			$("#fixedelem").addClass("teszt01");
		} 
		else {
				$("#fixedelem").removeClass("teszt01");
			}
			
		if (Leftpozicio > 50) {
			$("#fixedelem").addClass("teszt02");
		} 
		else {
				$("#fixedelem").removeClass("teszt02");
			}
			
	});
});

$(document).ready(function(){

           
   $(window).resize(function(){ 
   
       var x=0;
   
        // A <div class="resizediv"> új stílusa, ez lesz.   
             $(".resizediv").addClass("ujresizediv");
	 
        // Kiírja változások értékét, <span id="span01"></span> területén:
             $('#span01').text(x += 1);
	 
        // Kiírja ablakméretet, <span id="ablakmeret"></span> területén: 
             $( "#ablakmeret" ).html( $( window ).width() );
			
   });
   
});











position( ) és az offset( )

<p class="tesztp"> Stílusa .tesztp{margin-left:200px; background-color: aqua;}

<div id="div01"> elem
stílusa: #div01{background-color: orange; border: 3px solid red;}





position()offset()
    // #div01 elem pozíciójának lekérdezése.
	$("#btn01").click(function(){
		var x = $("#div01").position();
		alert("#div01 elem:\n Top:"
		+ x.top + "\n Left:" + x.left);
	});
	
    // #div01 elem új pozíciójának  meghatározása.
	$("#btn02").click(function(){
		var x = $("#div01").position();
		var ujleft=(x.left)+200;
		$("#div01").css("marginLeft ",ujleft);
	});

	
    // #div01 elem, offset eltolási koordinátáinak lekérdezése.
	$("#offset").click(function(){
		var x = $("#div01").offset();
		alert("#div01 elem:\n Top:" 
		+ x.top + "\n Left: " + x.left);
	});

    // #div01 elem, offset eltolás koordinátáinak meghatározása.
	$("#offset02").click(function(){
		$("#div01").offset({top: 1500 ,left: 10 })
	});

Oldal frissítése, újboli betöltődése.

		$(".of5").click(function(){ 
				window.location.reload();     // Oldal frissítése.
		});






HTML és CSS meghatározások.

<div id="fixedelem">
<div class="fix01">
<p><b>Görgessük lefelé az oldalt.</b> Görgetés eléri a felső top=50px értéket, adja hozzá ehhez az elemhez, a következő stílust:<br /> .teszt01{background-color: yellow; border: 4px solid red;}<br /><b>Görgessük felfelé az oldalt.</b> Görgetés kisebb mint top=50px, vonja vissza a .teszt01 stílust.<br /> Görgetés vízszintesen, érték left=50px, adja hozzá a következő stílust: .teszt02{background-color: #cfc; border: 4px solid blue;} </p>
</div>
<div class="fix02"><b>Top =</b> <span id="dokumentTop">0</span> <br /><b>Left =</b> <span id="dokumentLeft">0</span>
</div>
</div>

Stílusok:

<style>
#fixedelem{position:fixed; width: 900px; margin-left: 20px; padding: 2px;}
.teszt01{top: 10px; background-color: yellow; border: 4px solid red;}
.teszt02{background-color: #cfc; border: 4px solid blue;}
.fix01{float:left; width: 750px; border:none}
.fix01 p{ margin:0.1px;}
.fix02{float:right; width: 130px; padding-left: 5px; border-left: 2px solid black;}
#dokumentTop, #dokumentLeft, #span01, #ablakmeret{ font-size: 20px;}

#div01{width: 550px; background-color: orange; border: 3px solid red;}
#resize{background-color: yellow; border: 3px solid red;  padding: 5px;}
.resizediv{width: 180px; height:180px; border: 3px solid red;}
.ujresizediv{width: 600px; height:200px; background-color: orange;}
</style>

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
pppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp