javascript

JS Trap focus

containerElement = document.getElementById('id');

focusableElements = [
    ...containerElement.querySelectorAll('a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])')
  ].filter(
    el => (el.offsetParent != null) && el => !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden')
);

firstFocusableEl = focusableElements[0];
lastFocusableEl = focusableElements[focusableElements.length - 1];

lastFocusableEl.addEventListener('keydown', function(event) {
  if (event.shiftKey === false && event.key === 'Tab') {
    event.preventDefault();
    firstFocusableEl.focus();
  }
});

firstFocusableEl.addEventListener('keydown', function(event) {
  if (event.shiftKey === true && event.key === 'Tab') {
    event.preventDefault();
    lastFocusableEl.focus();
  }
});

Prevent inner elements trigger an event on the parent

Method 1
Stop propagation on inner elements before attaching an event on the parent.

$('#parent a').on('click', function(event){
  //stop the event bubbling up to the parent
  event.stopPropagation();
});

$('#parent').on('click', function(event){
  //attach event on the parent
  alert('Parent element clicked!');	
});

Method 2
Check if the event target matches the designated target.

$('#parent').on('click', function(event) {
  if(event.target == event.currentTarget) {
    alert('Parent element clicked!');
  } else {
    alert('Child element clicked!');
  }
});

Method 2.1
Check if the tag name of the event target matches a certain element.

$('#parent').on('click', function(event){
  if(event.target.tagName.toLowerCase() === 'a'){
    alert('Child anchor element clicked!');
  } else {
    alert('Parent element clicked!');
  }
});

Add repeating CSS selectors

Have you ever needed a way to style the elements of a set ( lets say 5 ) individually, but the same rules to be applied to other set ( of 5 ) ?

For example:

<div>
     <h4>first</h4>
     <p>lorem ipsum ...</p>
     <h4>second</h4>
     <h4>third</h4>
     <h4>forth</h4>
     <div>lorem ipsum ...</div>
     <h4>fifth</h4>
     <!-- here end our first set -->
     <h4>first</h4>
     <h4>second</h4>
     <h2>lorem ipsum ...</h2>
     <h4>third</h4>
     <span>lorem ipsum ...</span>
     <h4>forth</h4>
     <h4>fifth</h4>
     <!-- here end our 2nd set -->
</div>

and we want that the first h4 in the first set have same styles as the first h4 in the second and so on, of course our h4’s are not grouped, but they are scattered between other elements, and other h4’s can be added in the future.

If we have a way to distinguish our elements from the other then we can make a short script with jQuery to add classes.

For a group of five css classes that will repeat after a number ( for this example we took, n = 5 ), this means that our h4’s from 1 to 5 will have same classes with the h4’s from 6 to 10, and so on; for this we will use something that in math is called ‘modulo’, basically gives us the remaining of the division of two numbers, and as we can get the index of our element we can see which position has in our set ( in this case of 5 ).

$('div h4').each(function(index) {

	if(index%5 == 0){
		$(this).addClass('first');
	} else if(index%5 == 1){
		$(this).addClass('second');
	} else if(index%5 == 2){
		$(this).addClass('third');
	} else if(index%5 == 3){
		$(this).addClass('forth');
	} else if(index%5 == 4){
		$(this).addClass('fifth');
	}
});

the result would be:

<div>
     <h4 class="first">first</h4>
     <p>lorem ipsum ...</p>
     <h4 class="second">second</h4>
     <h4 class="third">third</h4>
     <h4 class="forth">forth</h4>
     <div>lorem ipsum ...</div>
     <h4 class="fifth">fifth</h4>
     <!-- here end our first set -->
     <h4 class="first">first</h4>
     <h4 class="second">second</h4>
     <h2>lorem ipsum ...</h2>
     <h4 class="third">third</h4>
     <span>lorem ipsum ...</span>
     <h4 class="forth">forth</h4>
     <h4 class="fifth">fifth</h4>
     <!-- here end our 2nd set -->
</div>

Simple confirm password or email validation

If you have a form with a ‘confirm password’ field or ‘confirm email’, and you don’t want to use a heavy validation plugin just for a simple confirmation like this, you can always use some simple ‘old school’ javascript and the onblur event, so when the field loses focus triggers the validation function.

<script type="text/javascript">
	function confirmPass() {
		var pass = document.getElementById("pass").value
		var confPass = document.getElementById("c_pass").value
		if(pass != confPass) {
			alert('Wrong confirm password !');
		}
	}
</script>
<form id="form" action="" method="post">
    <label for="pass">Password</label>
    <input type="password" id="pass" class="text" name="your_pass" value=""/>
    <label for="c_pass">Confirm Password</label>
    <input type="password" id="c_pass" class="text" name="your_c_pass" value="" onblur="confirmPass()"/>
</form>

See a demo.

jQuery title tooltip

If you need a simple way to replace the anchor’s ( <a href=”” ></a> ), title=”” attribute with a nice customizable tooltip, below is the code and a demo.

The script adds a html <div> at the end of the <body> tag, and as you hover the specified elements it get’s the title attribute and include it in the <div id=”tooltip”>, the last part of the script is what makes the tooltip move along with mouse cursor.

The nice part is that you can make your tooltip look however you want with CSS.


<ul id="links">
 <li>
   <a href="#" title="This is one">One</a>
 </li>
 <li>
   <a href="#" title="This is two">Two</a>
 </li>
 <li>
   <a href="#" title="This is three">Three</a>
 </li>
 <li>
   <a href="#" title="This is four">Four</a>
 </li>
 <li>
   <a href="#" title="This is five">Five</a>
 </li>
</ul>


#tooltip {
 padding: 10px 15px;
 position: absolute;
 font-size: 14px;
 color: #4E4E4E;
 background: #C4E424;
 z-index: 10;
}


(function($){
	$('body').append('<div id="tooltip"></div>');
	$('#tooltip').hide();
	var $tooltip = $('#tooltip');
    $('ul#links a').each(function(){
        var $this = $(this),
			$title = this.title;
			
        $this.hover(function(){
			this.title = '';
			$tooltip.text($title).show();
        }, function(){
			this.title = $title;
			$tooltip.text('').hide();
        });
		
		$this.mousemove(function(e){
			$tooltip.css({
				top: e.pageY - 10,
				left: e.pageX + 20
			});
		});
    });
})(jQuery);

Here is a demo