CODE BASE

Wednesday, April 10, 2013

Nodejs - HTTP Server

var http = require("http");

http.createServer(function(request, response) {
response.writeHead(200, {"Content-Type": "text/plain"});
response.write("Hello World");
response.end();

}).listen(8888);

Tuesday, April 9, 2013

var foo = require('module-name')
var parser = require('node-markdown);

Under your project > node-modules > package.json

...
},
"dependencies" : {
"markdown": "0.1.0",
"module": "*",
},
...

loading local modules > data_module

//search for npm modules

$npm search | grep some-string
$npm search

//install a module

$cd folder
$npm install node-markdown

//setup project with npm

$cd Desktop/html
$npm init

//fill in and enter on each of the queries

//edit the package.json with all your modules info and run:

$npm install

$npm update //update the modules
$sudo npm update -g //run as sudo since global

$npm prune //remove modules in your project

Monday, April 8, 2013

Homebrew Install and npm for Node

install homebrew

>ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go)"

// uninstall MacPorts if installed before installing node

>sudo port -fp uninstall installed
>sudo rm -rf \
/opt/local \
/Applications/DarwinPorts \
/Applications/MacPorts \
/Library/LaunchDaemons/org.macports.* \
/Library/Receipts/DarwinPorts*.pkg \
/Library/Receipts/MacPorts*.pkg \
/Library/StartupItems/DarwinPortsStartup \
/Library/Tcl/darwinports1.0 \
/Library/Tcl/macports1.0 \
~/.macports

> brew install node

// to uninstall npm

> sudo npm uninstall npm -g

Node Package Manager - NPM

>npm search

>npm ls

>npm install module-name

>npm init

// module packages created after running npm init

Footer Fixes - Another Way by Matthew Taylor



<body>


 <div id="wrapper">


  <div id="header"></div>


  <div id="content"></div>


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


 </div>


</body>

====================

CSS

html,
body {
margin:0;
padding:0;
height:100%;
}

#wrapper {
min-height:100%;
position:relative;
}

#header {
padding:10px;
background:#5ee;
}

#content {
padding:10px;
padding-bottom:80px; /* Height of the footer element */
}

#footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
background:#ee5;
}

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

Sticky Footer by Steve Hatcher - CSS

/*  
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: 180px;}  /* must be same height as the footer */

#footer {position: relative;
 margin-top: -180px; /* negative value of footer height */
 height: 180px;
 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

<div id="wrap">

 <div id="main">

 </div>

</div>

<div id="footer">

</div>

Background Position

selector {

background-position: left top;

//other options

left center
left bottom
right top
right center
right bottom
center top
center center
center bottom

}

Background Sizes

#selector {

//change values to:

background-size:400px 300px;
background-size:50%;
background-size:100% 100%;
background-size:cover;
background-size:contain;

}

JSON Object Array

var employees = [

{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName": "Jones" }

];

Saturday, March 30, 2013

Carousel Markup

<div id="this-carousel-id" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
</div>

<a class="carousel-control left" href="#this-carousel-id" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#this-carousel-id" data-slide="next">&rsaquo;</a>
</div>

Thursday, March 14, 2013

jQuery Append

#Select an element in the DOM

$("#id"), $("<element>") or $(".class")

#Append to element

$("#foo").append("<div>hello world</div>")

Wednesday, March 13, 2013

Basics If-Then Syntax for JS/JQuery

# standard syntax on JS

$(document).ready(function(){

var n = $("#example div").length;

if (n < 2) {
$("body").css("background", "green");
}
else {
$("body").css("background", "orange");
}

});

# this is the shorthand version

var n = $("#example div").length;

$("body").css("background", (n < 2) ? "green" : "orange");

# Checking if selector exists. When you use a selector, jQuery will always return an object. Therefore the if statement will always be true and never be false. So change it to this:

if ($("#mydiv").length > 0) {

// do something here

}

Tuesday, March 12, 2013

Navigation Bar CSS

#navigation {

position: fixed;
top: 0;
width: 100%;
color: #ffffff;
height: 35px;
text-align: center;
padding-top: 15px;
/* Adds shadow to the bottom of the bar */

-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;

/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);
}

#navigation a {
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
color: white;
text-decoration: none;
}

#navigation a:hover {
color: grey;
}

HTML5 Template

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Untitled</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

</body>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/webfont/1.1.2/webfont.js"></script>
</html>

Monday, March 11, 2013

jQuery CDN and CSS Linking

# CDN - place after body tag

<script src="//ajax.googleapis.com/ajax/libs/webfont/1.1.2/webfont.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

# CSS Linking

<link href="styles.css" rel="stylesheet" type="text/css">

Saturday, March 9, 2013

Toggle Text Options

$("options-button").click(function() {

var txt = $("#extra-options").is(':visible') ? 'more options' : 'less options';
$("#options-button").text(txt);
$("#extra-options").slideToggle();

});

Image Preloader

Check if element exists

if ($('#myElement').length > 0) {

// it exists

}

Chaining Events

$('#code1').css(
{
"background-color" : "white",
"color" : "#grey"
}
)
.slideUp(1000).slideDown(1000)
.animate({ width: '80%' , fontSize: "20px" } , 1800);

Animate Scrolling on Page

$("#id").click(function() {

$("html, body").animate({ scrollTop: $('#title').offset().top }, 1000);

});

Tuesday, March 5, 2013

Drop Cap

p:first-letter{

display:block;
margin:5px 0 0 5px;
float:left;
color:#FF3366;
font-size:60px;
font-family:Georgia;

}

Passing Events to jQuery Function

$("document").ready(function( ) {

#bind events with chaining

$('#id').bind('mousemove', findMouseCoords)
.click(event, getEvent);

});

function findMouseCoords( event )
{

$("#first-id").html(event.screenX);
$("#second-id").html(event.screenY);

}

function getEvent( event )
{

$("#third-id").html(event.target.nodeName);
$("#fourth-id").html(event.timeStamp);

}

Binding Events with jQuery

$("document").ready ( function( ) {

# binding events (eventname, function-name)

     $('#id').bind('blur', myBlurEvent)
                .bind('focus', myFocusEvent);

});

function myBlurEvent( )
{

       $("#second").html("some comment");

}

Monday, March 4, 2013

Placing image inline with text

<li><a class='active' ><img src='../../Content/Icons/home.png' />Home</a></li>

img {
    margin-right: 4px;
    position: relative;
    top: 6px
}

FontFace & Font Awesome in CSS

# Use Font-face to incorport the font before using this:

.element {
    position: relative;
}

/*replace the content value with the
corresponding value from the list below: \f002 - icon; search \f004 -icon-heart

.element:before {
    content: "\f000";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--adjust as necessary--*/
    color: #000;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: 10px;
    left: 0;
}

Find content code here: http://astronautweb.co/snippet/font-awesome/

FontAwesome in Background Image

#Markup

<div class='input-container'>
<div class="icon-ph"><i class="icon-envelope"></i></div>
<input class="custom-text" type="text" placeholder="Email address">
</div>

#CSS

.icon-ph {
display: inline-block;
width: auto;
height: auto;
min-width: 16px;
padding: 4px 5px;
font-size: 14px;
font-weight: normal;
line-height: 20px;
text-align: center;
text-shadow: 0 1px 0 #ffffff;
background-color: #eeeeee;
position:absolute;
left:3px;
top:3px;
bottom:3px;
z-index:3;
}

.custom-text {
padding:6px 6px 6px 30px ;
}

.input-container {
position:relative;
}

Images as Backgrounds on Headlines

#headline1 {
background-image: url(images/icon.png);
background-repeat: no-repeat;
background-position: left top;
padding-top:68px;
margin-bottom:50px;
}

#headline2 {
background-image: url(images/like.png);
background-repeat: no-repeat;
background-position: left top;
padding-top:68px;
}

Multiple vs Single Method Calls

$("#foo").css("background-color", "red");
$("#foo").css("font-weight", "bold");

// becomes:

$("#foo").css({
"background-color": "red",
"font-weight": "bold"
});

Document Ready Method

$(document).ready(function() {

    // everything in here will be run when the DOM is
    // ready to be interacted with
    $(".bar").css("color", "blue").appendTo("#baz");

});

Image Background Using Position

#bg {

position: fixed;
top: 0;
left: 0;

/* Preserve aspect ratio */
min-width: 100%;
min-height: 100%;

}

Background Image Size

html {

background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

}

@media queries for iPad

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

Hide Show Toggle

$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});

Sunday, February 24, 2013

Positioning Container

#container
{
position: relative
}

#navigation
{
position: absolute;
left: 20px;
top: 10px
}

Vertically Align Text

element
{
line-height: 2em;
}

/* If the box is 2em high, so we would insert line-height: 2em */

Image Replacement

h1
{
background: url(widget-image.gif) no-repeat;
height: image height
text-indent: -2000px
}

Use this technique vs image alt text, h1 helps with search quality, make the text off-screen.

Define Print CSS

Using Multiple Classes

<div class="first second third">Lorem ipsum</div>

.first .second .third { ... }

.first {...}
.second { ... }
.third { ... }

Font Shorthand

font: { bold 1.5em verdana,sans-serif; }
font: { bold italic small-caps 1em/1.5em verdana,sans-serif; }

font-weight: bold;
font-style: italic;
font-variant: small-caps;
*font-size: 1em;
line-height: 1.5em;
*font-family: Helvetica Neue, sans-serif

*required, rest default to normal

Friday, February 22, 2013

Adding Ellipsis to Long Text

.truncate {

    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}

CSS Columns without Grid

.three-col {
       -moz-column-count: 3;
       -moz-column-gap: 20px;
       -webkit-column-count: 3;
       -webkit-column-gap: 20px;
}

<p class="three-col">Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna.</p>

Simple Sprite Rollover

a {
       display: block;
       background: url(sprite.png) no-repeat;
       height: 30px;
       width: 250px;
       text-indent: -9000px;
}

a:hover {

       background-position: 0 -30px;
}

HTAccess Redirect

Redirect 301 / http://newsite.com/

* / Redirect single page */
Redirect 301 /oldpage.html http://www.yoursite.com/newpage.html
Redirect 301 /oldpage2.html http://www.yoursite.com/folder/

HTAccess iPad Detection

RewriteCond %{HTTP_USER_AGENT} ^.*iPad.*$
RewriteRule ^(.*)$ http://ipad.yourdomain.com [R=301]

Text Shadow & Blur

.blurry-text {

color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);

}

Opacity Values

img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}

img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

Thursday, February 21, 2013

Gradient Background

.gradient-bg {
   /* fallback/image non-cover color */
   background-color: #1a82f7; 

   /* fallback image */
   background-image: url(images/fallback-gradient.png); 

   /* Safari 4+, Chrome 1-9 */
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2F2727), to(#1a82f7));

   /* Safari 5.1+, Mobile Safari, Chrome 10+ */
   background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7); 

   /* Firefox 3.6+ */
   background-image: -moz-linear-gradient(top, #2F2727, #1a82f7);

   /* IE 10+ */
   background-image: -ms-linear-gradient(top, #2F2727, #1a82f7);

   /* Opera 11.10+ */
   background-image: -o-linear-gradient(top, #2F2727, #1a82f7);
}