AntiMath » jQuery

Check if page scroll is at bottom

mihai — Wed, 23 Oct 2013 20:36:12 +0000

May seem odd to check if the page scroll is at bottom, but can be useful if you need to hide something or show something else, as in a back to top button for example.

$('#back-to-top').hide();
$(window).scroll(function(){
    if ( document.body.scrollHeight - $(this).scrollTop()  <= $(this).height() ){
        $('#back-to-top').show();
    } else {
        $('#back-to-top').hide();
    }
});

jQuery toggle functions

mihai — Sun, 24 Mar 2013 13:53:07 +0000

The toggle() method was deprecated in jQuery 1.8 and removed in 1.9.
In jQuery 1.9 the toggle() method does not toggle between two or more functions on a click event, it just toggles the visibility of an element.

Here is a quick way of replacing it:

var x = 0;
$('#toggle-btn').click(function(e){
	if( x == 1 ){
		//console.log('even');
		$(this).removeClass('clicked');
		x = 0;
	} else {
		//console.log('odd');
		$(this).addClass('clicked');
		x = 1;
	}
	e.preventDefault();
});

See demo here.

Add repeating CSS selectors

mihai — Fri, 11 Nov 2011 16:19:15 +0000

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:


     first
     lorem ipsum ...
     second
     third
     forth
     lorem ipsum ...
     fifth
     
     first
     second
     lorem ipsum ...
     third
     lorem ipsum ...
     forth
     fifth

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:


     first
     lorem ipsum ...
     second
     third
     forth
     lorem ipsum ...
     fifth
     
     first
     second
     lorem ipsum ...
     third
     lorem ipsum ...
     forth
     fifth

jQuery title tooltip

mihai — Fri, 08 Oct 2010 10:33:24 +0000

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

The script adds a html

at the end of the tag, and as you hover the specified elements it get’s the title attribute and include it in the

, 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.



 
   One
 
 
   Two
 
 
   Three
 
 
   Four
 
 
   Five


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


(function($){
	$('body').append('');
	$('#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