HTML/Javascript Snippets 1


An arbitrary mass posting of various HTML/JavaScript (and CSS) snippets that were useful over the past few weeks. More to follow, no doubt.

To blur text with HTML

Given text in a particular tag, etc h1, that needs to be blurred:

h1 {
    color:rgba(0,0,0,0);  /* Old browsers don't go transparent. */
    text-shadow:   0 0 10px #000000
}

References: Sitepointstatic and JSFiddle example. More complex

Appending a child to body tag using JavaScript

document.body.appendChild(htmlid);

Vertically centre text in a set area with CSS

#fixedarea{
    height: 100px;
    width: 100px;
    display:block;
}

#text {
    height: 100px;
    width: 100px;
    display:table-cell;
    vertical-align:middle;    
}​

Reference: StackOverflow

Some other options from John Mein reproduced here:

Version 1: Parent div with display as table-cell

If you do not mind using the display:table-cell on your parent div, you can use of the following options:

.area{
    height: 100px;
    width: 100px;
    background: red;
    margin:10px;
    text-align: center;
    display:table-cell;
    vertical-align:middle;
}​

Live DEMO

Version 2: Parent div with display block and content display table-cell

.area{
    height: 100px;
    width: 100px;
    background: red;
    margin:10px;
    text-align: center;
    display:block;
}

.content {
    height: 100px;
    width: 100px;
    display:table-cell;
    vertical-align:middle;    
}​

Live DEMO

Version 3: Parent div floating and content div as display table-cell

.area{
    background: red;
    margin:10px;
    text-align: center;
    display:block;
    float: left;
}

.content {
    display:table-cell;
    vertical-align:middle;
    height: 100px;
    width: 100px;
}​

Live DEMO

Version 4: Parent div position relative with content position absolute

The only problem that I have had with this version is that it seems you will have to create the css for every specific implementation. The reason for this is the content div needs to have the set height that your text will fill and the margin-top will be figured off of that. This issue can be seen in the demo. You can get it to work for every scenario manually by changing the height % of your content div and multiplying it by -.5 to get your margin-top value.

.area{
    position:relative; 
    display:block;
    height:100px;
    width:100px;
    border:1px solid black;
    background:red;
    margin:10px;
}

.content { 
    position:absolute;
    top:50%; 
    height:50%; 
    width:100px;
    margin-top:-25%;
    text-align:center;
}​

Live DEMO

Adding and Removing classes with JavaScript

element.classList.add("class");
element.classList.remove("class");

Reference: callmenick

Innocuous, but useful to look back at.