Archive for January, 2013
Empty and non empty attribute selectors in CSS
This note is about empty and non empty attribute CSS selectors.
To select some elements in CSS by attribute value we should use attribute selectors. There’s an attribute selector that matches elements when their attribute exactly equals to a specified value in the selector.
1 2 3 |
[attribute='value'] { } |
So, to select elements with an empty attribute we should use the following CSS:
1 2 3 |
div[data-attr=''] { } |
Unfortunately, there isn’t “not empty” attribute selector but we can get the same effect using :not() selector: Here’s an example:
1 2 3 |
:not([data-attr='']) { } |
You can try it here http://codepen.io/starikovs/pen/tngqH.
How to disable default drag and drop behaviour
There’s a feature of browsers that allows to drag and drop elements such as links, images, etc. Sometimes this behaviour may be undesirable, for example, when you’re implementing your own special drag and drop. In this short note I’ll provide a small JavaScript code snippets that prevent a default drag and drop behaviour.
The following code snippet will disable a default drag and drop behaviour for all the elements:
$(document).bind("dragstart", function(event) { event.preventDefault(); }); |
This code snippet prevents default drag and drop behaviour only for hyperlinks:
$(document).bind("dragstart", function(event) { if (event.target.tagName.toLowerCase() === "a") { event.preventDefault(); } }); |
You can try it here http://jsfiddle.net/v5E6n/1/.
How to stretch background image with CSS
There’re some jQuery plugins that help to stretch background image on the body or other HTML elements. It’s not a hard task to make background image covering HTML element with help of JavaScript by adding a resizable img tag. But what about CSS? Is it possible to make that stretching using just CSS? Fortunately, it’s possible!
To stretch background image on the HTML element you should use background-size CSS property with cover value.
1 2 3 4 5 6 7 |
body { background: url(image.jpg) fixed no-repeat; -webkit-background-size: cover; -o-background-size: cover; -moz-background-size: cover; background-size: cover; } |
Here’s the example:
Try it here http://codepen.io/starikovs/pen/aDyGI.
Remove all children in jQuery
It’s a very frequent task to remove all the children from HTML node. I’ve been confused recently and the reason is a jQuery function empty(). I haven’t used it before! And it’s because I haven’t known about it yet) All I do to remove all the children from the element is callinga method .html("") passing an empty string as an argument. But there’s a more elegant way! Yes, it’s by using .empty() method!
1 2 3 4 5 6 7 |
<div id="test"> <h1>Header</h1> <div class="content"> <p>Lorem ipsum dolor sit amet.</p> <div class="meta">21.01.2013 12:17</div> </div> </div> |
1 2 |
// remove all the contents of the #test div $("#test").empty(); |
MySQL Update from Select
I’ve just wanted to update the table’s field from the SELECT based on the other table including grouping and aggregate function. In my case, I need to update a TIMESTAMP field in tableA based on selected TIMESTAMP field from the tableB.
1 2 3 4 5 |
UPDATE tableA SET timestampFieldA = (SELECT MAX(timestampFieldB) FROM tableB WHERE tableA.id=tableB.tableAId GROUP BY tableB.tableAId) |