in Development

Very Useful Code Snippets For Web Developers

I love code snippets because they make my work a lot easier. If you don’t know what a snippet is, well this kind of code is a programming term for a small region of re-usable source code, machine code or text.  Ordinarily, these are formally defined operative units to incorporate into larger programming modules. In this article you can find some very useful code snippets which can be used in html, css and jQuery.

HTML Snippets

1. How to embed a flash movie into html.

<object type="application/x-shockwave-flash"
        data="your-flash-file.swf"
        width="0" height="0">
        <param name="movie" value="your-flash-file.swf" />
        <param name="quality" value="high"/>
</object>

 

2. How to use Google Maps in order to get directions, using HTML.

<form action="http://maps.google.com/maps" method="get" target="_blank">
   <label for="saddr">Enter your location</label>
   <input type="text" name="saddr" />
   <input type="hidden" name="daddr" value="350 5th Ave New York, NY 10018 (Empire State Building)" />
   <input type="submit" value="Get directions" />
</form>
<!--saddr = blank input field for entering START address-->
<!--daddr = hard-coded END address-->

Click here for the example and for the reference article.

 

3. How to select multiple files.

<form method="post" action="upload.php" enctype="multipart/form-data">
  <input name='uploads[]' type="file" multiple>
  <input type="submit" value="Send">
</form>

The PHP file(you can then loop through the data as an array):

foreach ($_FILES['uploads']['name'] as $filename) {
    echo '<li>' . $filename . '</li>';
}

 

4. Build a test page which has a basic css, loads jquery from google and sets up DOM-ready block for jQuery.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
     <title>Test Page</title>
 
     <style type="text/css">
        * { margin: 0; padding: 0;}
     </style>
 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
 
     <script type="text/javascript">
        $(function(){
            // Do stuff.
        });
     </script>
</head>
 
<body>
 
</body>
 
</html>

Click here for the original article.

 

CSS Snippets

1. Absolute Center (Vertical & Horizontal) an Image.

/*CSS background-image Technique*/
html {
   width:100%;
   height:100%;
   background:url(logo.png) center center no-repeat;
}
/*CSS + Inline Image Technique*/
img {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 500px;
   height: 500px;
   margin-top: -250px; /* Half the height */
   margin-left: -250px; /* Half the width */
}

Click here to see an example.

 

2. How to create a stitched look.

.stitched {
   padding: 5px 10px;
   margin: 10px;
   background: #ff0030;
   color: #fff;
   font-size: 21px;
   font-weight: bold;
   line-height: 1.3em;
   border: 2px dashed #fff;
   border-top-left-radius: 3px;
   -moz-border-radius-topleft: 3px;
   -webkit-border-top-left-radius: 3px;
   border-bottom-right-radius: 3px;
   -moz-border-radius-bottomright: 3px;
   -webkit-border-bottom-right-radius: 3px;
   border-top-right-radius: 3px;
   -moz-border-radius-topright: 3px;
   -webkit-border-top-right-radius: 3px;
   -moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
   -webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
   box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);
   text-shadow: -1px -1px #aa3030;
   font-weight: normal;
}

Click here to see an example + source.

 

3. How to create a blurry text.

.blur {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

Click here to see an example + original source.

 

4. Expanding Boxes Navigation

nav {
    background: #444;
    border-bottom: 8px solid #E6E2DF;
    overflow: hidden;
    position: relative;
    width: 100%;
}
nav:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: white;
}
nav ul {
    background: -moz-linear-gradient(left,
                #444 0%,
                #444 50%,
                #41d05f 100%);
    background: -webkit-gradient(linear, left top, right top,
                color-stop(0%,#444),
                color-stop(50%,#444),
                color-stop(50%,#41d05f),
                color-stop(100%,#41d05f));
    list-style: none;
    overflow: hidden;
    padding: 0 0 0 20px;
    width: 810px;
}
nav li {
    display: inline;
}
nav a {
    color: white;
    display: block;
    float: left;
    font-family: "myriad-pro-1","myriad-pro-2", HelveticaNeue, Helvetica, Arial, Sans-Serif;
    font-size: 22px;
    padding: 12px 0;
    text-decoration: none;
    text-align: center;
    width: 19%;
    -webkit-transition: width 0.12s ease;
       -moz-transition: width 0.12s ease;
         -o-transition: width 0.12s ease;
            transition: width 0.12s ease;
}
nav a:hover {
    color: white;
}
nav a:hover span {
    border-bottom: 2px solid white;
}
nav .a-home {
    background: #ff8400;
    z-index: 100;
    position: relative;
}
nav .a-forums {
    background: #e42b2b;
}
nav .a-videos {
    background: #a800ff;
}
nav .a-downloads {
    background: #49a7f3;
}
nav .a-snippets {
    background: #41d05f;
}
.home nav {
    border-bottom-color: #ff8400;
}
.forums nav {
    border-bottom-color: #e42b2b;
}
.videos nav {
    border-bottom-color: #a800ff;
}
.downloads nav {
    border-bottom-color: #49a7f3;
}
.snippets nav {
    border-bottom-color: #41d05f;
}
nav li:hover a {
    width: 24%;
}
nav ul:hover .active {
    width: 19%;
}
nav ul:hover .active:hover {
    width: 24%;
}
nav li a.active {
    width: 24%;
}

Click here for an example plus the original article.

 

5. Create a CSS ribbon

.ribbon {
 font-size: 16px !important;
 /* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the ribbon elements */
 
 width: 50%;
 
 position: relative;
 background: #ba89b6;
 color: #fff;
 text-align: center;
 padding: 1em 2em; /* Adjust to suit */
 margin: 2em auto 3em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */
}
.ribbon:before, .ribbon:after {
 content: "";
 position: absolute;
 display: block;
 bottom: -1em;
 border: 1.5em solid #986794;
 z-index: -1;
}
.ribbon:before {
 left: -2em;
 border-right-width: 1.5em;
 border-left-color: transparent;
}
.ribbon:after {
 right: -2em;
 border-left-width: 1.5em;
 border-right-color: transparent;
}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
 content: "";
 position: absolute;
 display: block;
 border-style: solid;
 border-color: #804f7c transparent transparent transparent;
 bottom: -1em;
}
.ribbon .ribbon-content:before {
 left: 0;
 border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
 right: 0;
 border-width: 1em 1em 0 0;
}

Click here for an example and for the reference article.

 

6. How to reate slide in image boxes.

footer {
    clear:both;
    overflow:hidden;
    font-size:16px;
    line-height:1.3;
}
#footer-boxes {
    -moz-column-count:2;
    -moz-column-gap:10px;
    -webkit-column-count:2;
    -webkit-column-gap:10px;
    column-count:4;
    column-gap:10px;
}
.footer-box {
    margin:0 0 10px 0;
    display:inline-block;
    width:262px;
    height:140px;
    padding:15px;
    background:#e6e2df;
    color:#b2aaa4;
    -webkit-transition:all 0.2s ease;
    -moz-transition:all 0.2s ease;
    background-position:320px 50%;
    background-repeat:no-repeat;
    text-decoration: none;
}
.footer-box h5 {
    font: bold 24px Sans-Serif !important;
    text-transform:uppercase;
    font-size:38px;
    line-height:1;
    padding:0 0 10px 0;
}
.footer-box:hover h5 {
    text-shadow:0 0 4px rgba(0,0,0,0.4);
    color:white;
}
.footer-box:hover p {
    color:white;
}
.footer-box p {
    font-size:12px;
    width:175px;
    line-height:1.5;
}
.footer-box:hover {
    background-position:200px 50%;
}
#f-diw {
    background-image:url(http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-8/images/css-tricks.png);
    background-position:290px -1288px;
}
#f-diw:hover {
    background-color:#237abe;
    background-position:186px -1288px;
}
#f-qod {
    background-image:url(http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-8/images/css-tricks.png);
    background-position:290px -1448px;
}
#f-qod:hover {
    background-color:#37597a;
    background-position:186px -1448px;
}
#f-htmlipsum {
    background-image:url(http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-8/images/css-tricks.png);
    background-position:290px -1608px;
}
#f-htmlipsum:hover {
    background-color:#333333;
    background-position:186px -1608px;
}
#f-qod:hover p {
    color:#adbde3;
}
#f-bookshelf {
    background-image:url(http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-8/images/css-tricks.png);
    background-position:290px -1768px;
}
#f-bookshelf:hover {
    background-color:#ff8400;
    background-position:186px -1768px;
}
#f-html-ipsum:hover p {
    color:#fff8da;
}
#f-twitter {
    background-image:url(http://css-tricks.com/images/css-tricks.png);
    background-position:290px -1928px;
}
#f-twitter:hover {
    background-color:#4ed2fe;
    background-position:186px -1928px;
}
#f-forrst {
    background-image:url(http://css-tricks.com/images/css-tricks.png);
    background-position:290px -2088px;
}
#f-forrst:hover {
    background-color:#203f16;
    background-position:186px -2088px;
}
#f-forrst:hover p {
    color: #92c59c;
}

Click here for an example and for the reference article.

 

7. How to create a sticky footer.

/*
Sticky Footer Solution
by Steve Hatcher
http://stever.ca
http://www.cssstickyfooter.com
*/
 
* {margin:0;padding:0;} 
 
/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
 
html, body {height: 100%;}
 
#wrap {min-height: 100%;}
 
#main {overflow:auto;
	padding-bottom: 150px;}  /* must be same height as the footer */
 
#footer {position: relative;
	margin-top: -150px; /* negative value of footer height */
	height: 150px;
	clear:both;} 
 
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
 
/* IMPORTANT
 
You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.
 
<!--[if !IE 7]>
	<style type="text/css">
		#wrap {display:table;height:100%}
	</style>
<![endif]-->
 
*/

Html for this snippet:

<div id="wrap">
 
	<div id="main">
 
	</div>
 
</div>
 
<div id="footer">
 
</div>

Click here for the original reference.

 

jQuery Snippets

1. How to calculate distance between mouse and an element

(function() {
 
    var mX, mY, distance,
        $distance = $('#distance span'),
        $element  = $('#element');
 
    function calculateDistance(elem, mouseX, mouseY) {
        return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2)));
    }
 
    $(document).mousemove(function(e) {
        mX = e.pageX;
        mY = e.pageY;
        distance = calculateDistance($element, mX, mY);
        $distance.text(distance);
    });
 
})();

Click here for demo.

 

2. How to display the most recent tweet.

$.getJSON("http://twitter.com/statuses/user_timeline/username.json?callback=?", function(data) {
     $("#twitter").html(data[0].text);
});

 

3. How to display the most recent FeedBurner feeds.

$(document).ready(function(){
       $.ajax({
               type: "GET",
               url: "http://feeds.feedburner.com/examplefeed",
               success: function(data){
                       $("#date").text($(data).find("item:first>pubDate:first").text());
                       $("#title").html("<a href='"+$(data).find("item:first>link:first").text()+"'>"+$(data).find("item:first>title:first").text()+"</a>");
                       $("#description").html($(data).find("item:first>description:first").text());
               }
       });
});

 

4. How to scroll page horizontally using the mouse wheel

– Load jQuery and the Mouse Wheel plugin(from here):

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>

– Attach mousewheel event to body. The “30” represents speed. preventDefault ensures the page won’t scroll down.

$(function() {
 
   $("body").mousewheel(function(event, delta) {
 
      this.scrollLeft -= (delta * 30);
 
      event.preventDefault();
 
   });
 
});

Original article, here. You can see a demo, here.

Ad: Comindware Tracker is one of the best solutions amongst many types of issue tracking software and is suitable for any industry.

Bogdan

Bogdan is the founder of Top Design Magazine. You can find him in Bucharest-Romania so next time you want to drink a beer there and talk about web and stuff, give him a message.

Leave a Reply