tips & tricks

Free Online Tool for Front-end Web Testing

by

Simply Testable is a free web-based tool that will save you pleanty of time and will take the pain out of routine front-end web testing. It will validate your HTML and give you a detailed overview report of your entire site’s successes and failures. Homepage: http://simplytestable.com/

CSS3 Tags Design

by
CSS3 Tags

I am going to share tags design using pure CSS3. This is used to highlight your blog tags. Blog Tags are used to highlight keywords or search words in a blog or site content. These tags have been designed with pure CSS3 and additional fallback for older browsers. CSS3 Code … Read more

Facebook like Live Notification Message using jQuery

by
facebook-live-notification

Everyone knows that facebook has a live notification messages that pop ups bottom-left corner.  Today I am going to share same kind of facebook like live notification message system using jquery and css.

facebook-live-notification
facebook like live notification jquery

Jquery Code

$(document).ready(function() {

	 $.sticky('The page has loaded!');

 });

Html Usage

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="script.js"></script>

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

Notification position can also be customizable. By default it is top-right. Other options are bottom-right, bottom-left, top-left.

Autoclose option is also there.

Please don’t forget to share and subscribe to latest updates of the blog. Also any comments and feedback are all welcome!

Thanks!

View Live Demo

Timezone conversion in PHP

by

Today I am going to share some useful tip to convert country wise timezone in php You can have time zone set for India as ‘Asia/Kolkata‘ this will add +5.30 to GMT time. You will get proper time of your time zone. Php code for Setting India Time Zone List … Read more

Disable Enter Key using Jquery

by
Disable Enter Key using jQuery

People dont want to submit forms when typing enter keys. So I am sharing a simple jquery code to disable enter key using JQuery while typing in forms.  Those who want to disable enter key in their form to prevent form submission, they can use this code Jquery Code to … Read more

Creating Drop Caps using CSS3 & HTML

by

Hi guys, I am going to share some simple css3 code to display the first character from your paragraph as large fonts. CSS3 Drop Caps – simply used to style a paragraph with more attractive. It will increase the readability for a webpage. Css3 Code Html Code & Usage Please … Read more

Search Box with Select Option using CSS

by

Hi guys, Today I am going to share simple search box with select box option using css

Searchbox with selectbox option
Search Box with Select Option

CSS Code

#search-form { margin:70px 0 100px 170px; width:690px; overflow:hidden; }

#search-page-border { border:1px solid #dbdbdb; border-radius:4px; padding:7px; float:left; }

.search-terms { font-size:26px; border:none; }

#search-which { margin:0 10px; padding-left:8px; border-left:1px solid #dbdbdb; }

#search-which, select option { font-size:26px; }

#search-submit { padding:12px 30px; margin-left:20px; font-size:20px; float:left; color:#ffffff; background:#F00; border:none; border-radius: 3px; }

.accessibly-hidden {left: -999em;position: absolute;}

Html Code

[php]

&lt;form action=&quot;#&quot; method=&quot;post&quot; id=&quot;search-form&quot;&gt;
&lt;span id=&quot;search-page-border&quot;&gt;
&lt;label class=&quot;accessibly-hidden&quot;&gt;Search for:&lt;/label&gt;
&lt;input type=&quot;text&quot; class=&quot;search-terms&quot; name=&quot;search-terms&quot; onfocus=&quot;if(this.value == ‘Search…’) { this.value = ”; }&quot; onblur=&quot;if(this.value == ”) { this.value = ‘Search…’; }&quot; value=&quot;Search…&quot; /&gt;
&lt;label for=&quot;search-which&quot; class=&quot;accessibly-hidden&quot;&gt;Search these:&lt;/label&gt;&lt;select name=&quot;search-which&quot; id=&quot;search-which&quot; style=&quot;width: auto&quot;&gt;&lt;option value=&quot;members&quot;&gt;Members&lt;/option&gt;&lt;option value=&quot;groups&quot;&gt;Groups&lt;/option&gt;&lt;option value=&quot;forums&quot;&gt;Forums&lt;/option&gt;&lt;option value=&quot;posts&quot;&gt;Posts&lt;/option&gt;&lt;/select&gt; &lt;/span&gt;
&lt;input type=&quot;submit&quot; name=&quot;search-submit&quot; id=&quot;search-submit&quot; value=&quot;Search&quot; /&gt;
&lt;/form&gt;[/php]

Please don’t forget to share and subscribe to latest updates of the blog. Also any comments and feedback are all welcome!

Thanks!

[button type=”anchor” url=”http://w3lessons.info/demo/searchbox_with_select/” color=”red” align=”after”]View Demo[/button]

Images with rounded, circle and polaroid styles using CSS3

by
rounded circle polaroid style image

Hi guys, Today I am going to share some amazing css code to turn your profile picture into circle, rounded and polaroid styles. Image : CSS code : Usage :  Download [button type=”anchor” url=”http://w3lessons.info/demo/rounded-circle-polaroid/rounded-circle-polaroid.html” color=”orange” align=”after”]View Demo[/button] [button type=”download” url=”https://www.box.com/s/vud0bi8jy1fz1ezebcyp” color=”red” align=”after”]Download[/button] Please don’t forget to share and subscribe to … Read more

Image Hover Effect using Jquery

by
Image hover effect using jquery

Hi guys, I’m going to share some interesting tip to add a nice hover effect on images with simple jquery code. Jquery Code Usage [sourcecode language=”html”]&lt;img src=&quot;65.gif.&quot; class=&quot;hover-item&quot; /&gt; [/sourcecode] [button type=”download” url=”http://w3lessons.info/demo/jquery-image-hover-effect.html” color=”orange” align=”after”]View Demo[/button] Please don’t forget to share and subscribe to latest updates of the blog. Thanks!