Subbu in Design
CSS /*Language-specific*/ :lang(af) { quotes:’\201E’ ‘\201D’ ‘\201A’ ‘\2019′; } :lang(ak) { font-family:Lucida, “DejaVu Sans”, inherit; } :lang(ar) { font-family:Tahoma 12, Nazli, KacstOne, “DejaVu Sans”, inherit; } :lang(bg) { quotes:’\201E’ ‘\201C’ ‘\201A’ ‘\2018′; } :lang(bn)...
The .load() function fires when the element it’s called upon is fully loaded. It is commonly used on images, which may not be fully loaded when the JavaScript originally runs, and thus would return incorrect...
Firefox 2 html>/**/body .selector, x:-moz-any-link { color:lime; } Firefox 3 html>/**/body .selector, x:-moz-any-link, x:default { color:lime; } Any Firefox @-moz-document url-prefix() { .selector { color:lime; } }
WordPress has a built in function, the_meta(), for outputting all custom fields. But this function is limited in that it doesn’t always output all of them. For example, it misses custom fields added by...
One big reason to use image preloading is if you want to use an image for the background-image of an element on a mouseOver or :hover event. If you only apply that background-image in...
Right before the closing of the The Loop, insert this code: <?php if (($wp_query->current_post + 1) < ($wp_query->post_count)) { echo ‘<div>Post Divider</div>’; } ?> This will create a <div> you can style as a post divider....
I was playing with my new Nexus 7 (I really wanted to own a real Android device) and I noticed a neat little effect in the Google+ app that comes with it. As you...
From over 16,000 people surveyed, more than half (54%) say they “do some” when it comes toalt text for images that are important to content. The example provided did provide insight into the content and...
HTML <!– Yo, edit me! –> <!– This SVG will be encoded as a base64 –> <!– image for cross-browser compatibility –> <svg xmlns=’http://www.w3.org/2000/svg’ width=’70’ height=’70’> <rect width=’70’ height=’70’ fill=’#bbd817’/> <g transform=’rotate(45)’> <rect width=’99’...
POP has these cool hovers in the boxes that make up their homepage. The boxes have a white background by default, and as you hover over them a dark background slides up behind, the text...
It does look rather confusing at first. You can’t do bizarro inside-y rounded-ness like with CSS, that’s crazy talk. But then, if you just look at it as a normal rounded corner element sitting...
Whether you’re a beginner or a seasoned web professional, creating responsive designs can be confusing at first, mostly because of the radical change in thinking that’s required. As time goes on, responsive web design...
The popular responsive websites has been going on for several months now, and a lot of websites are already responsive, or underway. You know what that means? Today I will teach you how to create...
$(“#s”) .val(“Search…”) .css(“color”, “#ccc”) .focus(function(){ $(this).css(“color”, “black”); if ($(this).val() == “Search…”) { $(this).val(“”); } }) .blur(function(){ $(this).css(“color”, “#ccc”); if ($(this).val() == “”) { $(this).val(“Search…”); } }); Set value of field to “Search…” When field...
Cross-browser way (extra markup) Just wrap the first character of the paragraph in a span, then target the span with CSS and style away. <p> <span class=”firstcharacter”>L</span> orem ipsum dolor sit amet, consectetur adipiscing...
You can just clone it and replace it with itself, with all events still attached. var input = $(“#control”); function something_happens() { input.replaceWith(input.val(”).clone(true)); };
HTML You can make them with a single div. It’s nice to have classes for each direction possibility. <div class=”arrow-up”></div> <div class=”arrow-down”></div> <div class=”arrow-left”></div> <div class=”arrow-right”></div> CSS The idea is a box with zero...
<!DOCTYPE HTML> <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ /> <title>Your Website</title> </head> <body> <header> <nav> <ul> <li>Your menu</li> </ul> </nav> </header> <section> <article> <header> <h2>Article title</h2> <p>Posted on <time datetime=”2009-09-04T16:31:24+02:00″>September 4th 2009</time> by <a...
Hides iframe until fully loaded. <iframe style=”visibility:hidden;” onload=”this.style.visibility = ‘visible’;” src=”../examples/inlineframes1.html” > </iframe>
* { margin: 0; padding: 0; } #page{display:table;overflow:hidden;margin:0px auto;} *:first-child+html #page {position:relative;}/*ie7*/ * html #page{position:relative;}/*ie6*/ #content_container{display:table-cell;vertical-align: middle;} *:first-child+html #content_container{position:absolute;top:50%;}/*ie7*/ * html #content_container{position:absolute;top:50%;}/*ie6*/ *:first-child+html #content{position:relative;top:-50%;}/*ie7*/ * html #content{position:relative;top:-50%;}/*ie6*/ html,body{height:100%;} #page{height:100%;width:465px;} HTML: <div id=”page”> <div id=”content_container”>...
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies...
function concatenate($elements, $delimiter = ‘, ‘, $finalDelimiter = ‘ and ‘) { $lastElement = array_pop($elements); return join($delimiter, $elements) . $finalDelimiter . $lastElement; } Usage $array = array(‘John’, ‘Mary’, ‘Ishmal’); echo concatenate($array); // outputs “John,...
hr { border : 0; height : 15px; background : url(hr.gif) 50% 0 no-repeat; margin : 1em 0; } For IE < 8 (use conditional stylesheets) hr { display : list-item; list-style : url(hr.gif)...
.transparent_class { /* IE 8 */ -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; /* IE 5-7 */ filter: alpha(opacity=50); /* Netscape */ -moz-opacity: 0.5; /* Safari 1.x */ -khtml-opacity: 0.5; /* Good browsers */ opacity: 0.5; }
li { width: 200px; min-height: 250px; border: 1px solid #000; display: -moz-inline-stack; display: inline-block; vertical-align: top; margin: 5px; zoom: 1; *display: inline; _height: 250px; }
/** * Gets or sets cookies * @param name * @param value (null to delete or undefined to get) * @param options (domain, expire (in days)) * @return value or true */ _.cookie =...
<div class=”wrapper”> <div class=”ribbon-wrapper-green”><div class=”ribbon-green”>NEWS</div></div> </div> .wrapper { margin: 50px auto; width: 280px; height: 370px; background: white; border-radius: 10px; -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); box-shadow: 0px 0px 8px rgba(0,0,0,0.3);...
This code assumes you are connected to a MySQL database which has a table with Names and Emails. The idea is that it will output a table of every single value from that table,...
function getZeroPaddedNumber($value, $padding) { return str_pad($value, $padding, “0”, STR_PAD_LEFT); } Usage echo getZeroPaddedNumber(123, 4); // outputs “0123”