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

Clearfix

CategoriesCSS, Development, Front End

A clearfix is a way for an element to automatically clear its child elements, so that you don’t need to add additional markup. It’s generally used in float layouts where elements are floated to be stacked horizontally.

The clearfix is a way to combat the zero-height container problem for floated elements.

A clearfix is performed as follows:

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

Or, if you don’t require IE<8 support, the following is fine too:

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

Read about it in this article – by Chris Coyer @ CSS-Tricks

The problem happens when a floated element is within a container box, that element does not automatically force the container’s height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow. You can use 2 methods to fix it:

    {clear: both;}
    clearfix

Once you understand what is happening, use the method below to “clearfix” it.

.clearfix:after {	
    content: ".";	
    display: block;	
    clear: both;	
    isibility: hidden;	
    line-height: 0;	
    height: 0;
} 

.clearfix {	
    display: inline-block;
} 

html[xmlns] .clearfix {	
    display: block;
} 

* html .clearfix {	
    height: 1%;
}
Posted on

Retina Display Media Query

CategoriesCSS, Development, Front End

Using cross browser retina/high resolution media queries for icons (on hover, focus, before/after pseudo elements):

// Retina
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {

   .spritesheet,
    #faqs-accordion button.accordion h3::after {
        content: '' !important;
	background-image: url(../images/yorkregion_spritesheet@2x.png) !important;
	background-size: 800px !important;
    }
    #faqs-accordion button.button-bg:after {
        content: '' !important;
        background: url(../images/menu-items-bg@2x.png) no-repeat !important;
        background-size: 50px 52px !important;
        width: 50px !important;
        height: 52px !important;        
    }
    #faqs-accordion button.accordion:hover:after,
    #faqs-accordion button.accordion:focus:after {
        content: '' !important;
        background: url(../images/menu-items-bg-dark@2x.png) no-repeat !important;
        background-size: 50px 52px !important;
        width: 50px !important;
        height: 52px !important;
    }    
}