E-JAMBON bio photo

E-JAMBON

Ce qui se conçoit bien s'exprime clairement.

Email Twitter Github

The following examples are actually implemented in this very page. Here is the html content I’ll be playing with :

<div class='character'>  
	<p class='name'>Sneakypop</p>
	<p class='job' data-job='Thief'>--</p>
	<span class='stats'>
		<p>STR : 15</p>
		<p>STA : 9</p>
		<p>WIS : 10</p>
		<p>INT : 12</p>			 	
		<p>AGI : 17</p>
	</span>
</div>
<div class='character'>  
	<p class='name'>Woolfy</p>
	<p class='job' data-job='Warrior'>--</p>
	<span class='stats'>
		<p>STR : 19</p>
		<p>STA : 17</p>
		<p>WIS : 8</p>
		<p>INT : 9</p>			 	
		<p>AGI : 12</p>
	</span>
</div>
<div class='character'>  
	<p class='name'>Belfiado</p>
	<p class='job' data-job='Wizzard'>--</p>
	<span class='stats'>
		<p>STR : 8</p>
		<p>STA : 7</p>
		<p>WIS : 18</p>
		<p>INT : 21</p>			 	
		<p>AGI : 11</p>
	</span>
</div>

Sneakypop

--

STR : 15

STA : 9

WIS : 10

INT : 12

AGI : 17

Woolfy

--

STR : 19

STA : 17

WIS : 8

INT : 9

AGI : 12

Belfiado

--

STR : 8

STA : 7

WIS : 18

INT : 21

AGI : 11

Use the data attribute

HTML5 has a data attribute one can set on an element. Here is an example as how to use it :

$(document).ready(function(){
	$("#databtn").on('click',function(){
		$(this).toggleClass("mylight");
		var job =$('.job');
		job.each(function(){
			$(this).text($(this).data('job'));
		});
	});
});

Press this button to execute the above javascript :

Filter

I want a filter on classes. I’ll have 3 buttons, each has an id equal to the button’s name displayed here.

$(document).ready(function(){
	/*  filters */
	$("#Warrior").on('click',function(){
		$(this).toggleClass("mylight");
		$(".job").filter(function(){
			return ($(this).data('job') === "Warrior"); 	
		}).closest(".character").toggleClass("mylight");
	});

	$("#Thief").on('click',function(){
		$(this).toggleClass("mylight");
		$(".job").filter(function(){
			return ($(this).data('job') === "Thief"); 	
		}).closest(".character").toggleClass("mylight");		
	});
	$("#Wizzard").on('click',function(){
		$(this).toggleClass("mylight");
		$(".job").filter(function(){
			return ($(this).data('job') === "Wizzard"); 	
		}).closest(".character").toggleClass("mylight");	
	});
});

Playing with css

To play with the page css, we can use the following methods :

  • addCss()
  • removeCss
  • addClass( ‘classname’ ) – wich must therefore be defined in the loaded css
  • removeClass ( ‘classname’) – wich must be defined in the loaded css / and used.
  • toggleClass ( ‘classname’) – adds / removes a class.

Examples of that is used to highlight the buttons above.

Animation

jquery offers many way to play with animations. Just mentioning it here.

  • animate({‘property’:’change’},speed) For example, you could modify the top for -10px. Speed is in ms. Default is 400ms.