CodeHQ

Archive for February, 2019

|

@Supports CSS function

Friday, February 22nd, 2019

In this example .article-grid will be block unless the browser has support for display: grid, at which case, the styles within the @supports block will kick in and override the previous display declaration.

.article-grid {
    display: block;
}

@supports (display: grid) {
    .article-grid {
        display: grid;
    }
}

Tags: , , , , ,
Posted in CSS | No Comments »

Create your own social share buttons

Friday, February 22nd, 2019

Add this HTML for the buttons:
(Download HTML here)

Add this javascript for the button popup function:

function newPopup(url) {
	popupWindow = window.open(
url,'popUpWindow','height=450,width=600,left=100,top=100,resizable=no,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no,status=yes')
}

Tags: , , , , , , , , ,
Posted in HTML, jQuery | No Comments »

Find elements on page by their CSS Properties

Tuesday, February 12th, 2019

Drop this in to your console in dev tools and all elements with position: absolute will render with a border.

var absElements = [];
$("*").css("position", function(i, pos){
   if(pos==="absolute") absElements.push(this);
});

$(absElements).css({border:"5px solid red"});

Tags: , , , , , , ,
Posted in CSS, jQuery | No Comments »