1. Szövegformázás
  2. JavaScript stílusok
  3. jQuery stílusok
  4. Window-ablak 
Monitor méretei:
Szélesség: 0
Magasság: 0

Böngészőablak méretei:
Szélesség: 0
Magasság: 0

body szélesség: 

Egér pozíciója:
0
0

Görgetősáv pozíció:
Left (Balról.) = 0
Top (Fentről.) = 0

Abalak átméretezés:
Ablak mérete = 0
Változások = 0
BF poz.
BF poz.
BF poz.
BF poz.

Meghatározások és function


Emlékeztető példák:

Stílus meghatározás, számok és karakterek kombinációjakor: 
Meghatározás számokkal:  id.style.marginLeft="1116px";     vagy     id.style.left="1116px";
Meghatározás változóval:
         var y = 1116;
         var x = y +"px";
         id.style.left=x;
Időzítés: setInterval
Meghatározott idő elteltével, végrehajtódnak a függvényben meghatározottak. 
var start=800;                     // (1000=1 másodperc)
function Idozitett()
    {   Meghatározás 1;
        Meghatározás 2;
        Meghatározás stb.;
    }
setInterval("Idozitett()", start)
JavaScript.
Végrehajtás az oldal betöltését követően: window.onload 
function Betoltodeskor()
    {   Meghatározás 1;
        Meghatározás 2;
        Meghatározás stb.;
    }
window.onload = Betoltodeskor;
jQuery.
Végrehajtás az oldal betöltését követően:
 $(document).ready(function(){ 
          Meghatározás 1;
          Meghatározás 2;
          Meghatározás stb.;
 });

JavaScript bővebben. Katt ide!

jQuery bővebben. Katt ide!



JavaScript
Adott objektum szélesség, magasság. 
	// Objektum azonosító: id="Objektum"
var Objekt = document.getElementById("Objektum");
ObjektSz=(Objekt.offsetWidth);
ObjektM =(Objekt.offsetHeight);
      // Szélasség kiíratás ide.
        OBsz = document.getElementById ("OBszelesseg");
        OBsz.innerHTML +=ObjektSz;
      // Magasság kiíratás ide.
        OBm = document.getElementById ("OBmagassag");
        OBm.innerHTML +=ObjektM;
jQuery
Adott objektum szélesség, magasság. 
var Cobjekt = document.getElementById("container");
var CobjektSz=(Cobjekt.offsetWidth);  
var CobjektM =(Cobjekt.offsetHeight);
      $("#Cwidth").html(CobjektSz);
      $("#Cheight").html(CobjektM);

<p>container méretei: 
Szélesség: <span id="Cwidth">0</span> 
Magasság: <span id="Cheight">0</span>
</p>
Felhasználó monitorjának méretei. 
var Mszelesseg="Szélessége: "+screen.availWidth;
var Mmagassaga="Magassága: "+screen.availHeight;
			$("#FMwidth").html(Mszelesseg);
			$("#FMheight").html(Mmagassaga);

<p>Monitor méretei:<br />
<span id="FMwidth">0</span><br />
<span id="FMheight">0</span>
</p>
Egér pozíciója a monitoron.
  $(window).scroll(function() {
     var Toppozicio=$(document).scrollTop();
     var Leftpozicio=$(document).scrollLeft();
         $("#dokumentTop").html(Toppozicio);
         $("#dokumentLeft").html(Leftpozicio);
  });
Felhasználó böngészőablakának méretei belépéskor: 
	var Fbx=$(window).width();    // Belépéskor, ablak szélessége.
	var Fby=$(window).height();   // Belépéskor, ablak magassága.
		$( "#WindowAblakX" ).html(Fbx);
		$( "#WindowAblakY" ).html(Fby);

Böngészők window ablakáról bővebben. Katt ide!

 Böngészőablak átméretezésének figyelése, és
átméretezett ablak méretei:
 var x=0;   
   $(window).resize(function() { 
     $('#span01').text(x += 1);                                // Átméretezések száma.
     $( "#WindowAblakX" ).html( $( window ).width() );   // Ablak szélessége.
     $( "#WindowAblakY" ).html( $( window ).height() );   // Ablak magassága.
   });
Felhasználó böngészőablakának méretei, belépéskor és átméretezéskor:
(Teszteléshez, a böngészőablak négy sarkában elhelyezünk egy-egy 20x20px piros objektumot.)

JavaScript 
$(document).ready(function(){
function WinAblak(){
  var Fbx=$(window).width();           // Felhasználó böngészőablakának szélessége.
  var Fby=$(window).height();         // Felhasználó böngészőablakának magassága.
  var FMleft=Fbx-20+"px";                // Elhelyezendő 20x20px méretű objektum, left értéke.
  var FMaTop=Fby-20+"px";            // Elhelyezendő 20x20px méretű objektum, alsó top értéke.

  var MonitorFJobb = document.getElementById("FM_Fjobb");    // Felső-jobb
	MonitorFJobb.style.left=FMleft;
  var MonitorAJobb = document.getElementById("FM_Ajobb");     // Alsó-jobb
	MonitorAJobb.style.top=FMaTop;
	MonitorAJobb.style.left=FMleft;
  var MonitorABal = document.getElementById("FM_Abal");           // Alasó-bal
	MonitorABal.style.top=FMaTop;
}
WinAblak();  // Belépéskor, function WinAblak() függvény meghívása.

           // Böngészőablak átméretezésének ellenőrzése.
$(window).resize(function(){	
		WinAblak();  // Átméretezéskor is, meghívjuk a function WinAblak() függvényt.
	});
});
CSS stílus. 
#FM_Fbal, #FM_Fjobb, #FM_Ajobb, #FM_Abal{position:fixed; top:0px; left:0px; width:20px; height:20px; background-color: red;}
XHTML fájl. 
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link href="stilus.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="windowablak.js"></script>
</head>
<body>
    <!-- Monitor sarokpozícióiba 20x20px divek elhelyezése: -->
    <div id="FM_Fbal">.</div>
    <div id="FM_Fjobb">.</div>
    <div id="FM_Ajobb">.</div>
    <div id="FM_Abal">.</div>
</body>

jQuery event, azaz, egér események.

Aktiválódnak, azaz bekövetkeznek szelektorral kiválasztott elemen, melynek egyedi id azonosítóval kell rendelkeznie.
Aktiválódást követően, a function() { meghatározások } függvényben meghatározottak, végrehajtódnak.

Egérbillentyű lenyomását követően,
billentyűt felengedték. 
  $("#elem-id").click(function() {
    $("#id").toggleClass("class-stílus");
  });
Egérbillentyűvel egymásután,
kétszer kattintottak. 
$("#btn02").dblclick(function() { 
		$("#ev01").css("background-color", "red") ;
});
Egérbillentyűt lenyomják
// mousedown() 
$("#btn03").mousedown(function() {
		// Kiválasztott elem, háttérszínének meghatározása. 
		$("#ev01").css("background-color", "yellow") ;
});
Elem területére mozgatjuk, az egérkurzort.
$("#btn04").mouseenter(function() { 
		// Kiválasztott elem, háttérszínének meghatározása. 
		$("#ev01").css("background-color", "peru") ;
});
Elem területét elhagyja, az egérkurzor.
// mouseleave()
$("#btn05").mouseleave(function() {
		// Kiválasztott elem, háttérszínének meghatározása. 
		$("#ev01").css("background-color", "orangered") ;
});
Elem területére mozgatjuk az egérkurzort.
// mousemove()
$("#btn06").mousemove(function() {
		// Kiválasztott elem, háttérszínének meghatározása. 
		$("#ev01").css("background-color", "bisque") ;
});
Elem területét elhagyja az egérkurzor.
// mouseout()
$("#btn07").mouseout(function() {
		// Kiválasztott elem, háttérszínének meghatározása. 
		$("#ev01").css("background-color", "purple") ;
});
Elem területére mozgatjuk az egérkurzort.
$("#btn08").mouseover(function() {
		// Kiválasztott elem, háttérszínének meghatározása. 
		$("#ev01").css("background-color", "green") ;
});
Egérbillentyűt felengedték.
// mouseup()
$("#btn09").mouseup(function() {
		// Kiválasztott elem, háttérszínének meghatározása. 
		$("#ev01").css("background-color", "gray") ;
});
Egérkurzor belép, vagy elhagyja az elem területét.
// hover
// Így a button gomb háttérszíne módosul:
/*
$("#btn10").hover(function() {
    $(this).css("background-color", "darkkhaki");
    }, function(){
    $(this).css("background-color", "goldenrod");
});	
*/
// Így a div háttérszíne módosul:
$("#btn10").hover(function(){
    $("#ev01").css("background-color", "khaki");
    }, function(){
    $("#ev01").css("background-color", "goldenrod");
});	

$('#egerkat').mousedown(function(event) {
       switch (event.which) { 
	   case 1: alert(' Left-balos \n Mouse billentyűt \n lenyomtad.'); break; 
	   case 2: alert('Middle-Középső \n Mouse billentyűt \n lenyomtad.'); break; 
	   case 3: alert(' Right-jobbos \n Mouse billentyűt \n lenyomtad.'); break; 
	   default: alert('Van egy furcsa egér!'); } 
 });
<p id="egerkat">Itt kattints, valamelyik egérbillentyűvel.</p>

Itt kattints, valamelyik egérbillentyűvel.

function(event)
event.pageX - Visszaadja egér pozícióját, dokumentum bal szélétől.
event.pageY - Visszaadja egér pozícióját, dokumentum felső szélétől.
Egér pozíciója, dokumentum területén. 
$(document).mousemove( function(event) {
    $("#egerposition01").html("X = "+ event.pageX + ", Y = " + event.pageY );
});
<p id="egerposition01">0,0</p>

Eredményt lásd baloldalt, a navigációs sávban.

 Egér pozíciója, kiválasztott elemnél.

$("#Elempozicio").mousemove( function(event) {
   $("#egerposition02").html("Vízszintes= "
     + event.pageX + ", Függőleges= " + event.pageY );
});
<button id="Elempozicio">Button gomb pozíciója.<br />
Mozgasd ide az egeret.</button>
<p id="egerposition02">0,0</p>

0,0

Dokument, meghatározott függőleges pozicióba mozgatása.
$("#Fuggolegespoz01").mousemove( function(event) {
	var Ypoz= (event.pageY)-50; 
	$(document).scrollTop(Ypoz);
});

<button id="Fpozicioba">Button mozgatása F pozicioba.<br />
Mozgasd ide, az egeret.</button>
  




bind() 	- Eseménykezelőket csatol az elemekhez.
                        Kiválasztott elemhez egy vagy több eseménykezelőt tulajdonít (csatol). Esemény bekövetkezik, meghatározza a függvény lefutást. 
						
unbind() 	- Eltávolítja az elemekhez csatolt eseménykezelőket.
Kiválasztott elemhez, kettő eseményt társítunk. 
$(document).ready(function(){
    $("#bind02").bind("mouseover mouseout", function(){
        $("#bindp02").toggleClass("sargah");
    });
});

<button id="bind02">Mozgasd ide, majd mozgasd el,
 az egeret.</button>
<p id="bindp02">Kiválasztott p elem.</p>

Kiválasztott p elem.

 Kiválasztott elemhez, három eseményt társítunk. 
$(document).ready(function(){
    $("#bin03").bind({
      click:function(){$("#bindp03").slideToggle();},
      mouseover:function(){$("#bindp03").css("background-color", "goldenrod");},  
      mouseout:function(){$("#bindp03").css("background-color", "#CCCCCC");}  
    });
});
<button id="bind03">Egeret mozgasd ide, mozgasd el,<br />
kattints egyszer, mégegyszer.</button>
<p id="bindp03">Kiválasztott p elem.</p>

Kiválasztott p elem.

Hatástalanítunk minden p elemhez rendelt, eseményt. 
$(document).ready(function(){
	$("#unbind01").click(function(){
		$("p").unbind();
	});
});




Billentyűzet

keydown: Billentyű lenyomására aktíválódik.

$("#input01").keydown(function(){
   $("#input01").css("background-color", "yellow");
});
----------------------------------------

keyup: Billentyű felengedésekor aktíválódik.

$("#input02").keyup(function(){
   $("#input02").css("background-color", "pink");
});
-----------------------------------------------
5. A keyup event.which, leütött billentyű kódja.
Billentyű felengedésekor aktíválódik.


keypress: Mennyiszer nyomtuk le, a billentyűt.
event.which: Leütött billentyű kódja. 
<body onKeyPress="LeutottKarakter(event);">
<p>Leütött billentyű kódja: <span id="keydownKod02"></span></p>

function LeutottKarakter(e) {
    // Melyik billentyűt nyomták le.
  if (e.keyCode) keycode=e.keyCode;
  else keycode=e.which;
  karakterkod=String (keycode);    // A leütött billentyű ASCII kódja.
  $("#keydownKod02").html(karakterkod); // Karakterkód kiíratása.
}
$(document).ready(function(){

});

Leütött billentyű kódja:

keydown:
Aktív: Billentyű lenyomására,
és annak nyomvatartásáig. 		keyup:
Aktív: Billentyű felengedésekor.

 keypress:
Aktív: Billentyű lenyomására,
és annak nyomvatartásáig.
Leütés előtt, kattints ide az ablakba:

Leütött billentyű kódja:
Leütések száma: 

Kisbetű  = Nagybetű kóddal
Nagybetű - Van
Ékezetes betű - Problémás.

Esc - 27        Tab - 9              CapsLock - 20
Shift - 16      Ctrl - 17            Win - 91
Alt - 18         Space - 32         Alt Gr - 18
Enter - 13     BackSpace - 8    Menü - 93
Print - No     Scroll - 145       Pause - 19
Insert - 45      Home - 36        Page Up - 33
Delete - 46     End - 35           Page Down - 34
F1:112;   F2:113;   F3:114;   F4:115;
F5:116;   F6:117;   F7:118;   F8:119;
F9:120;  F10:121;  F11:122;  F12:123;
Leütés előtt, kattints ide az ablakba:

Leütött billentyű kódja:
Leütések száma: 

Kisbetű  = Nagybetű kóddal
Nagybetű = Van
Ékezetes betű = Problémás.

Esc - 27        Tab - 9              CapsLock - 20
Shift - 16      Ctrl - 17            Win - 91
Alt - 18         Space - 32         Alt Gr - 17
Enter - 13     BackSpace - 8    Menü - 93
Print - 44     Scroll - 145       Pause - 19
Insert - 45      Home - 36        Page Up - 33
Delete - 46     End - 35           Page Down - 34



Leütés előtt, kattints ide az ablakba:

Leütött billentyű kódja:
Leütések száma: 

Kisbetű = Van
Nagybetű = Van
Ékezetes betű = Van

Esc - 0        Tab - 0              CapsLock - No
Shift - No      Ctrl - No            Win - No
Alt - No         Space - 32         Alt Gr - No
Enter - 13     BackSpace - 8    Menü - No
Print - No     Scroll - 145       Pause - 0
Insert - 0      Home - 0        Page Up - 0
Delete - 0     End - 0           Page Down - 0



keydown:
<body>
Leütés előtt, kattints ide az ablakba: 
<input type="text" id="keydownInput"/>
<p>Leütött billentyű kódja: 
<span id="keydownKod"></span>
Leütések száma:
<span id="keydownKeyszam"></span>
</p>
</body>

JavaScript:
$(document).ready(function(){
 var keydSz=0;
   $("#keydownInput").keydown(function(event){
      $(this).css("background-color", "pink");
      $("#keydownKod").html(event.which+" ");
      $("#keydownKeyszam").text(keydSz+=1);
   });
});
keyup:
<body>
Leütés előtt, kattints ide az ablakba: 
<input type="text" id="keyupInput"/>
<p>Leütött billentyű kódja: 
<span id="keyupKod"></span><br />
Leütések száma: 
<span id="keyupKeyszam"></span>
</p>
</body>

JavaScript:
$(document).ready(function(){
  var keyupSz=0;
   $("#keyupInput").keyup(function(event){
     $("#keyupKod").html(event.which+" ");
     $("#keyupKeyszam").text(keyupSz+=1);
     $(this).css("background-color", "pink");
   });
});
keypress:
<body>
Leütés előtt, kattints ide az ablakba: 
<input type="text" name="keypressInput" id="keypressInput"/>
<p>Leütött billentyű kódja:
<span id="keypressKod"></span>
Leütések száma:
<span id="keypressKeyszam"></span>
</p>
</body>

JavaScript:
$(document).ready(function(){
  var keypSz=0;
   $("#keypressInput").keypress(function(event){
     $(this).css("background-color", "pink");
     $("#keypressKod").html(event.which+" ");
     $("#keypressKeyszam").text(keypSz+=1);
  });
});





2. Az event objektum néhány tulajdonsága.
Esemény, azaz event
Tulajdonság
Explorer Mozilla
Lenyomott egérgombevent.button
Bal gomb = 1
Jobb gomb = 2		event.button
Bal gomb = 0
Jobb gomb = 2
Esemény bekövetkeztének X koordinátájaevent.clientXevent.pageX
Esemény bekövetkeztének Y koordinátájaevent.clientYevent.pageY
Esemény során az ALT billentyűt, lenyomták vagy sem event.altkey  
Esemény során az Ctrl billentyűt, lenyomták vagy sem event.ctrlkey  
Esemény során az Shift billentyűt, lenyomták vagy sem event.shiftkey  
Esemény során, melyik módosító billentyűt nyomták le
(Alt, Ctrl, Shift) 		  event.modifiers
Lenyomott billentyű kódja (Unicode)event.keyCodeevent.which
Terület, azaz objektum, ahol az esemény bekövetkezett event.srcElement event.target

Az event objektum tulajdonságairól bővebben. Katt ide!

 

 

Vissza a lap elejére

 

 

 

A scrollLeft, alsó görgetősáv elmozdulásának tesztelésére elhelyezett szövegfolyam. A scrollLeft, alsó görgetősáv elmozdulásának tesztelésére elhelyezett szövegfolyam. A scrollLeft, alsó görgetősáv elmozdulásának tesztelésére elhelyezett szövegfolyam.