Findnerd: March 2015

Tuesday 31 March 2015

Autocomplete using Jquery.

Below is the code for autocomplete using Jquery .

> <head> <meta charset="utf-8">
> <title>Autocomplete using
> jQuery</title> <link rel="stylesheet"

Contains style classes for AUTOCOMPLETE

> href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
><script src="http://code.jquery.com/jquery-1.9.1.js"></script>

Contains functions for AUTOCOMPLETE :

><script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
><script>

'Autocomplete' provides suggestions when you type into the textbox, here which are stored

in a JavaScript array.

<p>$(function() {<br>

BELOW ARRAY CONTAINS ALL THE NAMES TO DISPLAY ON AUTOCOMPLETE 'EMP NAME' TEXT BOX

copytext

var empNames = [
"Amit",
"Aman",
"Raman",
"Brijesh",
"Rakesh",
"Akshay",
"Arohi",
"Sita",
"Saumya",
"Deepak",
"Shailesh",
"Arpit"];
$( "#names" ).autocomplete({
source: empNames
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="names">Emp Names: </label>
<input id="names">
</div>
</body>
</html>

For such more blogs kindly visit http://findnerd.com/NerdDigest

Monday 30 March 2015

How to Create a Responsive newsletter ?

Hello Users,

In the today world you can create a responsive newsletter with help fo simple CSS.

You just follow 3 steps:-

1:- No Fixed Width

Generally we create f wrapper for a frame with fixed width. In this we can not use any fixed

width. For example:-

<table style=”width: 600px;”>

one would write

<table style=”width: 100%;”>

Make sure to add these styles to each table cell that contains content:

<td style=”max-width: 600px; display: block; clear: both;”>

For images, it’s important to not set a width within the image tag, otherwise Android will

stretch out the container of the image to that given width. It’s required to include a maximum

width style to the image:

”"

2:- Table Setup

In order to make the collapsing of content blocks work, you can use a table within a table

setup like this:

<body>
<table width="100%">
<tr>
<td></td>
<td style="max-width: 600px; display: block; clear: both;">
<table style="width: 100%;">
<tr>
<td>Content Block 1</td>
</tr>
</table>
</td>
<td ></td>
</tr>
</table>
<table width="100%">
<tr>
<td></td>
<td style="max-width: 600px; display: block; clear: both;">
<table style="width:100%;">
<tr>
<td>Content Block 2</td>
</tr>
</table>
</td>
<td></td>
</tr>
</table>
</body>

3:- Viewport

Most Important check viewport like this:-

copytext

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1?>

Now your template behave like responsive Newsletter.

For such more Blogs you can just visit to http://findnerd.com/NerdDigest

Thursday 26 March 2015

HTML5 Apps Goes Offline

Offline app capability in HTML5 bought all the power to store data offline .When we talks about offline people ask offline means without internet ? First take the term ONLINE . online and Web are kind of synonyms. So why the term Offline is getting use for web technology . The ofline here means run the webpage from file:// uri. But hang on it does not mean the web page will never get connected to server.The term offline will make more sense if we will take it like the web page could survive at the server downtime.There are various apps who connects the cloud server and survives at downtime. Gmail Mobile app and gmail offline are examples . In the Older time devs used the technique like cookies,Plugin Based Storage for storing data to client side. But the era of HTML5 bought more power to the client side for storage.You can check the application for online/offline using

navigator.onLine(). And it works everywhere in latest browser even in IE also.You can also listen the events for it using.

-> document.body.addEventListener("online", function () {console.log("Now you are online !!!")}

-> document.body.addEventListener("offline", function () {console.log("Now you are offline !!!!")}

HTML5 bought many features to make application offline .Few Technique to make app offline

ApplicationCache

Web Storage

Web SQL Database

Indexed database

For such more Blogs yo can visit to http://findnerd.com/NerdDigest

Wednesday 25 March 2015

Creating logo using SVG in HTML 5

<!doctype>
<html>
<head>
</head>
<body>
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Evon_Text" xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="296.086px" height="132.092px" viewBox="0 0 296.086 132.092" enable-

background="new 0 0 296.086 132.092"
xml:space="preserve">
<path d="M-0.166,93.833l66.749,0.417L66.333,83H12C12,83,3.002,84.082-0.166,93.833z"/>
<path d="M67,114v10l-51.25-0.167c0,0-18.75,1.167-14.417-23.833H66v8l-47.917,0.334c0,0

-6.749-0.334-6.707,2.416
c0.035,2.333,2.146,2.917,7.313,2.917S67,114,67,114z"/>
<polygon points="72.917,83.542 102.084,123.521 113.042,124.01 140.084,84 128,84

107.168,113.084 85.334,83.459 "/>
<path d="M229.625,82.188l-0.313,41.655L241,124.125V95h32c0,0,12-

0.563,12.125,9.938c0.125,10.5-0.25,19.062-0.25,19.062H295V96
c0,0,0.5-11.5-10.75-13.5L229.625,82.188L229.625,82.188z"/>
<g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="858.7485"

y1="4.7109" x2="890.6646" y2="4.7109" gradientTransform="matrix(-4.371139e-008 1 1 4.371139e-

008 223.9977 -857.7482)">
<stop offset="0" style="stop-color:#BFE5FF"/>
<stop offset="1" style="stop-color:#002655"/>
</linearGradient>
<circle fill="url(#SVGID_1_)" cx="228.708" cy="16.958" r="15.958"/>
</g>
<g>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="925.7485"

y1="-41.6221" x2="984.9985" y2="-41.6221" gradientTransform="matrix(-4.371139e-008 1 1

4.371139e-008 223.9977 -857.7482)">
<stop offset="0" style="stop-color:#BFE5FF"/>
<stop offset="1" style="stop-color:#002655"/>
</linearGradient>
<circle fill="url(#SVGID_2_)" cx="182.375" cy="97.625" r="29.625"/>
</g>
<g>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="883.0825"

y1="-27.4551" x2="921.9985" y2="-27.4551" gradientTransform="matrix(-4.371139e-008 1 1

4.371139e-008 223.9977 -857.7482)">
<stop offset="0" style="stop-color:#BFE5FF"/>
<stop offset="1" style="stop-color:#002655"/>
</linearGradient>
<circle fill="url(#SVGID_3_)" cx="196.542" cy="44.792" r="19.458"/>
</g>
<g>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="883.7485"

y1="32.7109" x2="909.6646" y2="32.7109" gradientTransform="matrix(-4.371139e-008 1 1

4.371139e-008 223.9977 -857.7482)">
<stop offset="0" style="stop-color:#BFE5FF"/>
<stop offset="1" style="stop-color:#002655"/>
</linearGradient>
<circle fill="url(#SVGID_4_)" cx="256.708" cy="38.958" r="12.958"/>
</g>
<g>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="918.7485"

y1="29.8779" x2="938.9985" y2="29.8779" gradientTransform="matrix(-4.371139e-008 1 1

4.371139e-008 223.9977 -857.7482)">
<stop offset="0" style="stop-color:#BFE5FF"/>
<stop offset="1" style="stop-color:#002655"/>
</linearGradient>
<circle fill="url(#SVGID_5_)" cx="253.875" cy="71.125" r="10.125"/>
</g>
</svg>
</body>
</html>

For such more Blogs you can visit to http://findnerd.com/NerdDigest/Html/

Tuesday 24 March 2015

How to make iframe responsive

Hello reader !

How to make responsive iframe. We all are face this problem normally so there is an

example and i hope it will helps you.

CSS :-

.wrapper {
width: 50%;
}
.container {
height: 0;
width: 100%;
padding-bottom: 50%;
overflow: hidden;
position: relative;
}
.container iframe {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
}

HTML :-

<div class="wrapper">
<div class="container">
<iframe src="there is path of your iframe"></iframe>
</div>
</div>

You can also use media queries. I hope It will helps you.

Thanx you !
For such more blogs you can visit to http://findnerd.com/NerdDigest/Html/

Monday 23 March 2015

Enhancing HTML Content by Pseudo Elements

Pseudo Elements play important role while designing some web based stuff. With pseudo elements

we can add content after or before any element in our web page. Below is very simple

demonstration.

<h1>Use of Before</h1>
<h2>Use of After</h2>
h1:before {content:url(twit.png);}
h2:after {content:url(twit.png);}

Here we have appended an image before H1 tag selector and after H2 tag selector as well.

Output.

For such more Blogs you can visit to http://findnerd.com/NerdDigest/Html/

Sunday 22 March 2015

Wobble Effect by HTML 5 animation

<!DOCTYPE html>
<html>
<head>
<title>wobble effect</title>
<style>
body {
background-color: tomato;
}
.container {
position: absolute;
top: 40px;
left: 140px;
}
.slices {
position: absolute;
width: 600px;
height: 23px;
background: url

("http://farm3.staticflickr.com/2879/12096787325_ee42f6589d_z.jpg");
animation: wobble 5s infinite ease-in-out alternate;
}
.slice1 {
top: 15px;
background-position: 0 -15px;
animation-delay: 340ms;
}
.slice2 {
top: 30px;
background-position: 0 -30px;
animation-delay: 430ms;
}
.slice3 {
top: 45px;
background-position: 0 -45px;
animation-delay: 520ms;
}
.slice4 {
top: 60px;
background-position: 0 -60px;
animation-delay: 610ms;
}
.slice5 {
top: 75px;
background-position: 0 -75px;
animation-delay: 700ms;
}
.slice6 {
top: 90px;
background-position: 0 -90px;
animation-delay: 790ms;
}
.slice7 {
top: 105px;
background-position: 0 -105px;
animation-delay: 880ms;
}
.slice8 {
top: 120px;
background-position: 0 -120px;
animation-delay: 970ms;
}
.slice9 {
top: 135px;
background-position: 0 -135px;
animation-delay: 1060ms;
}
.slice10 {
top: 150px;
background-position: 0 -150px;
animation-delay: 1150ms;
}
.slice11 {
top: 165px;
background-position: 0 -165px;
animation-delay: 1240ms;
}
.slice12 {
top: 180px;
background-position: 0 -180px;
animation-delay: 1330ms;
}
.slice13 {
top: 195px;
background-position: 0 -195px;
animation-delay: 1420ms;
}
.slice14 {
top: 210px;
background-position: 0 -210px;
animation-delay: 1510ms;
}
.slice15 {
top: 225px;
background-position: 0 -225px;
animation-delay: 1600ms;
}
.slice16 {
top: 240px;
background-position: 0 -240px;
animation-delay: 1690ms;
}
.slice17 {
top: 255px;
background-position: 0 -255px;
animation-delay: 1780ms;
}
.slice18 {
top: 270px;
background-position: 0 -270px;
animation-delay: 1870ms;
}
.slice19 {
top: 285px;
background-position: 0 -285px;
animation-delay: 1960ms;
}
.slice20 {
top: 300px;
background-position: 0 -300px;
animation-delay: 2050ms;
}
.slice21 {
top: 315px;
background-position: 0 -315px;
animation-delay: 2140ms;
}
.slice22 {
top: 330px;
background-position: 0 -330px;
animation-delay: 2230ms;
}
.slice23 {
top: 345px;
background-position: 0 -345px;
animation-delay: 2320ms;
}
.slice24 {
top: 360px;
background-position: 0 -360px;
animation-delay: 2410ms;
}
@keyframes wobble {
25% {
transform: translateY(-8px);
}
50% {
transform: translateY(8px);
}
75% {
transform: translateY(-8px);
}
100% {
transform: translateY(8px);
}
}
</style>
</head>
<body>
<div class='container'>
<div class='slice1 slices'></div>
<div class='slice2 slices'></div>
<div class='slice3 slices'></div>
<div class='slice4 slices'></div>
<div class='slice5 slices'></div>
<div class='slice6 slices'></div>
<div class='slice7 slices'></div>
<div class='slice8 slices'></div>
<div class='slice9 slices'></div>
<div class='slice10 slices'></div>
<div class='slice11 slices'></div>
<div class='slice12 slices'></div>
<div class='slice13 slices'></div>
<div class='slice14 slices'></div>
<div class='slice15 slices'></div>
<div class='slice16 slices'></div>
<div class='slice17 slices'></div>
<div class='slice18 slices'></div>
<div class='slice19 slices'></div>
<div class='slice20 slices'></div>
<div class='slice21 slices'></div>
<div class='slice22 slices'></div>
<div class='slice23 slices'></div>
<div class='slice24 slices'></div>
</div>
</body>
</html>

For such more Blogs kindly visit to http://findnerd.com/NerdDigest/Html

Thursday 19 March 2015

How can use Regular Expressions in HTML?

We can use a Regular Expressions width the help of HTML 5. You can use this with "textarea" and "Input" tags.

<form action="" method="post">
<label for="username">Create a Username: </label>
<input type="text" name="username" id="username" placeholder="4 <> 10" pattern="[A-Za-z]{4,10}" autofocus required> <button type="submit">Go </button> </form>

You’ll be aware that this pattern: [A-Za-z]{4,10} accepts only upper and lowercase letters. This string must also have a minimum of four characters, and a maximum of ten.

For more blogs just visit http://findnerd.com/NerdDigest/Html/

Wednesday 18 March 2015

Fade-in effect using CSS3 @keyframes Rule

With CSS3 @keyframes rules, we can make a fade-in effect for any HTML element we want. In

following code, we are just changing the opacity of an element on two different @keyframes

states. We can increase the fade-in time by animation-duration property.

HTML Code

<div class="col1 effect one"> </div>
<div class="col2 effect two"> </div>
<div class="col3 effect three"> </div>

CSS Code

copytext

.col1 ,.col2 ,.col3 {border-radius:15px;float: left;padding: 0px 10px;background:

#f9fde4;border: 1px solid #009c65;box-shadow:-8px 10px 0px #adc4d2;}
.effect {
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.effect, .one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}
.effect, .two {
-webkit-animation-delay: 1.2s;
-moz-animation-delay:1.2s;
animation-delay: 1.2s;
}
.effect, .three {
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
animation-delay: 1.6s;
}

For such more blogs kindly visit http://findnerd.com/NerdDigest

Tuesday 17 March 2015

How to create a Sticky Menu bar with CSS and Jquery

In this example, we will create a simple webpage that consists of the header, the

navigation and the content.

<div class="wrapper">
<div class="header">
Header
</div>
<div class="nav">
Navigation
</div>
<div class="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown

printer took a galley of type and scrambled it to make a type specimen book. It has survived

not only five centuries, but also the leap into electronic typesetting, remaining essentially

unchanged. It was popularised in the 1960s with the release of Letraset sheets containing

Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker

including versions of Lorem Ipsum <br><br></p>
</div>
</div>

And, we will apply the sticky position to the navigation.

But first, we will define the styles in the stylesheet, like so.

body {
margin: 45px 0 0;
padding: 0;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
.header, .nav {
color: #FFFFFF;
text-align: center;
}
.header {
background-color: #333333;
padding: 50px 0;
}
.content {
margin: 10px auto 100px;
width: 600px;
}
.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
}

Then, we will apply that class to the navigation conditionally with jQuery.

copytext

$(document).ready(function() {
var stickyNavTop = $('.nav').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});

For such more blogs kindly visit to http://findnerd.com/NerdDigest

Monday 16 March 2015

How to Make A Simple DropDown in HTML With The Help of Jquery and CSS

You Can Use Below Code to Make A Simple Drop Down In HTML With The Help Of Jquery And CSS

***Jquery***
<script>
$(function(){
$('.DropDown > ul > li').on('click', function(){
$('.DropDown ul ul').slideUp();
$(this).children('ul').slideDown();
});
});
</script>
![<html>
<div class="DropDown">
<ul>
<li><a href="javascript:void(0);">ONE</a>
<ul class="First">
<li><a href="javascript:void(0);">1</a></li>
<li><a href="javascript:void(0);">2</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">TWO</a>
<ul class="Second">
<li><a href="javascript:void(0);">3</a></li>
<li><a href="javascript:void(0);">4</a></li>
</ul>
<div class="clr"></div>
</li>
<li><a href="javascript:void(0);">THREE</a>
<ul class="Second">
<li><a href="javascript:void(0);">3</a></li>
<li><a href="javascript:void(0);">4</a></li>
</ul>
<div class="clr"></div>
</li>
</ul>
</div>
</html>][1]

For such more Blogs visit http://findnerd.com/NerdDigest

How to make use of corcdoc API

Below is a sample code base to convert PDF files to HTML5 template making use of well known

tool Crocdoc :

$_product = $observer->getProduct();
$productid=$_product->getId();
$read = Mage::getSingleton('core/resource')->getConnection('core_read');
$query = 'SELECT link_file,link_url from downloadable_link where product_id='.

$productid;
$results = $read->fetchAll($query);
if($results[0]['link_file']||$results[0]['link_url']){
if($results[0]['link_file']) {
$l1=$results[0]['link_file'];
$link=Mage::getBaseUrl

(Mage_Core_Model_Store::URL_TYPE_MEDIA).'downloadable/files/links'.$l1;
} else {
$l1=end(explode('/',$results[0]['link_url']));
$link=Mage::getBaseUrl

(Mage_Core_Model_Store::URL_TYPE_MEDIA).'downloadable/files/'.$l1;
}
Mage::log($link);
error_reporting(E_ALL);
$exampleApiToken = 'AXa5RgV6MDQzm9tbKZJYepqI';
if (php_sapi_name() != 'cli') {
header('Content-Type: text/plain');
}
$ExternalLibPath=Mage::getModuleDir('', 'Pack_Book') . DS . 'lib' . DS

.'Crocodoc.php';
require_once ($ExternalLibPath);
$que = 'SELECT * from catalog_product_response where product_id='.$productid;
$results1 = $read->fetchAll($que);
$update=0;
if($results1[0]['product_id'])
$update=1;
//Mage::log($results1[0]['uuid']);
Crocodoc::setApiToken($exampleApiToken);
$uuid = null;
try {
$uuid = CrocodocDocument::upload($link);
$write = Mage::getSingleton("core/resource")->getConnection("core_write");
if($update==0)
$query1 = 'INSERT INTO catalog_product_response VALUES ('.

$productid.',"'.$uuid.'")';
else
$query1 = 'update catalog_product_response set uuid = "'.$uuid.'"

where product_id='.$productid;
$write->query($query1);
return ;
} catch (CrocodocException $e) {
return ;
}
return ;

For such more Blogs visit to http://findnerd.com/NerdDigest

Tuesday 10 March 2015

Smoke Font Animation

Hello Friends, The following codes below is an animation effect of css3 by implementing

this code the fonts will comes in smoke style.

HTML

<h1><span>C</span><span>S</span><span>S</span><span> </span><span>S</span><span>m</span><

span>o</span><span>k</span><span>y</span><span> </span><span>T</span><span>e</span><span>

x</span><span>t</span><span> </span><span>E</span><span>f</span><span>f</span><span>e</sp

an><span>c</span><span>t</span></h1>

CSS

copytext

@import url(http://fonts.googleapis.com/css?family=Finger+Paint);
body { background: black; overflow: hidden; }
h1 {
font: 5vw/100vh "Finger Paint";
text-align: center;
color: transparent;
backface-visibility: hidden;
}
span {
display: inline-block;
text-shadow: 0 0 0 whitesmoke;
-webkit-animation: smoky 5s both;
animation: smoky 5s both;
}
span:nth-child(even){
animation-name: smoky-mirror;
}
@keyframes smoky {
60% {
text-shadow: 0 0 40px whitesmoke;
}
to {
transform:
translate3d(15rem,-8rem,0)
rotate(-40deg)
skewX(70deg)
scale(1.5);
text-shadow: 0 0 20px whitesmoke;
opacity: 0;
}
}
@keyframes smoky-mirror {
60% {
text-shadow: 0 0 40px whitesmoke; }
to {
transform:
translate3d(18rem,-8rem,0)
rotate(-40deg)
skewX(-70deg)
scale(2);
text-shadow: 0 0 20px whitesmoke;
opacity: 0;
}
}
@for $item from 1 through 21 {
span:nth-of-type(#{$item}){
animation-delay: #{($item/10)}s;
}

}

For more kindly visit http://findnerd.com/NerdDigest

Sunday 8 March 2015

Make a Div Align Center Using J-query

Hello Readers !

Here is an example, how to make a div always center align using jquery. You can do this using

css but this method will work with positions (absolute, fixed etc) and it is also compatible

with internet explorer.

<script>
$(document).ready(function(){
var windowWidth = $(window).width();
var divWidth = $("div").width();
$("div").css({"margin-left":(windowWidth-divWidth)/2});
});
</script>

For more kindly visit http://findnerd.com/NerdDigest/Html

Sunday 1 March 2015

Example of parallax

Hello Readers !
Here is an example of parallax with simple script and it is also compatible with internet

explorer.
Script :-

copytext

<script type="text/javascript">
$(document).ready(function() {
$(window).bind('scroll',function(){
parallax();
})
})
function parallax(){
var scrollposition=$(window).scrollTop();
$('.ground').css('top',(0 - (scrollposition * .1))+'px')
$('.box').css('top',(0 + (scrollposition * 1.2))+'px')
}
</script>

html

<div class="main">
<div class="ground" id="base"></div>
<div class="box"></div>
</div>

Tags
JQuery html parallax

For More Kindly visit to http://findnerd.com/NerdDigest