Posted on

jQuery – detect click event on pseudo-element

CategoriesDevelopment, Front End, jQuery / JavaScript

How it works:

It grabs the height, width, top, and left positions(based on the position away from the edge of the window) of the parent element and grabs the height, width, top, and left positions(based on the edge of the parent container) and compares those values to determine where the pseudo-element is on the screen.

It then compares where the mouse is. As long as the mouse is in the newly created variable range then it returns true.

Note:

It is wise to make the parent element RELATIVE positioned. If you have an absolute positioned pseudo-element, this function will only work if it is positioned based on the parent’s dimensions(so the parent has to be relative…maybe sticky or fixed would work too….).

Code:

function pseudoClick(parentElem) {

    var beforeClicked,
      afterClicked;

  var parentLeft = parseInt(parentElem.getBoundingClientRect().left, 10),
      parentTop = parseInt(parentElem.getBoundingClientRect().top, 10);

  var parentWidth = parseInt(window.getComputedStyle(parentElem).width, 10),
      parentHeight = parseInt(window.getComputedStyle(parentElem).height, 10);

  var before = window.getComputedStyle(parentElem, ':before');

  var beforeStart = parentLeft + (parseInt(before.getPropertyValue("left"), 10)),
      beforeEnd = beforeStart + parseInt(before.width, 10);

  var beforeYStart = parentTop + (parseInt(before.getPropertyValue("top"), 10)),
      beforeYEnd = beforeYStart + parseInt(before.height, 10);

  var after = window.getComputedStyle(parentElem, ':after');

  var afterStart = parentLeft + (parseInt(after.getPropertyValue("left"), 10)),
      afterEnd = afterStart + parseInt(after.width, 10);

  var afterYStart = parentTop + (parseInt(after.getPropertyValue("top"), 10)),
      afterYEnd = afterYStart + parseInt(after.height, 10);

  var mouseX = event.clientX,
      mouseY = event.clientY;

  beforeClicked = (mouseX >= beforeStart && mouseX <= beforeEnd && mouseY >= beforeYStart && mouseY <= beforeYEnd ? true : false); afterClicked = (mouseX >= afterStart && mouseX <= afterEnd && mouseY >= afterYStart && mouseY <= afterYEnd ? true : false);

  return {
    "before" : beforeClicked,
    "after"  : afterClicked

  };      

}

Usage:

$('.user-details-expand').click(function (e) {
  // console.log("Logging the object..." + JSON.stringify(pseudoClick(this)));
  // console.log("Before has been click..." + pseudoClick(this).before);
  // console.log("After has been clicked..." + pseudoClick(this).after);
  if ( pseudoClick(this).after==true) {
    $(this).hide();
  }
});

Support:

IT SEEMS TO WORK WELL IN ALL BROWSERS IF DIMENSIONS ARE SET IN CSS. So…set your height and width on your pseudo-elements and only move them with top and left. I recommend using it on things that you are okay with it not working on. Like an animation or something. Chrome works…as usual.

Posted on

Set the same boxes height on page

CategoriesCSS, Development, Front End

Set the same boxes height on a page on load and on resize. Check the maximum bucket height and set all buckets the same max height.

var $window = jQuery(window);
function bucket_boxed_height() {
        var bucket_boxed = $('.bucket-box');
        var Max_bucket_height = 0;
        var windowsize = $window.width();
        if (windowsize > 991) {
            bucket_boxed.each(function( index ) {
                $( this ).removeAttr('style');
                if (Max_bucket_height < $( this ).innerHeight()) {
                    Max_bucket_height = $( this ).innerHeight();
                }
                console.log('innerHeight = ' + innerHeight);
            });
            bucket_boxed.each(function( index ) {
                $( this ).innerHeight(Max_bucket_height);
            });
        }
        else {
            bucket_boxed.each(function( index ) {
                $( this ).removeAttr('style');
            });
        }
}

bucket_boxed_height();

// Bind event listener
jQuery(window).bind('resize', bucket_boxed_height);
Posted on

jQuery Window Resize

CategoriesDevelopment, Front End, jQuery / JavaScript
    var $window = jQuery(window);

    function checkWidth() {
        var windowsize = $window.width();
        if (windowsize > 1400) {            
            jQuery("#first-tab").click(function() {
           	//do something
            });
        } else {
            jQuery("#first-tab").click(function() {
		//do something
            });
        }
    }

    // Execute on load
    checkWidth();

    // Bind event listener
    jQuery(window).bind('resize', checkWidth);
Posted on

Fixed Menu On Scroll (with Desktop only Logic) jQuery

CategoriesDevelopment, Front End, jQuery / JavaScript
	$(window).scroll( function() {
		var scroll_count = 0;
		if ( $(this).scrollTop() > 250 && $(this).width() > 768  ) {
			 $(".nav-menu").addClass("positionfixed");
			 if ( scroll_count < 1 ) {
			 		$(".nav-menu").hide();
					$(".positionfixed").fadeIn();
				}
			 scroll_count = 1;
		 } else {
			 $(".nav-menu").show();
			 $(".nav-menu").removeClass("positionfixed");
			  scroll_count = 0;
		 }
	 
 });