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

Vimeo Instant Search using Jquery and PHP

by

I have found this article from Speckyboy.com. Instant Search is very popular among developers now a days. Web developers and Internet enthusiasts alike are very fond of online video services. One social video website Vimeo is a great example of how HD content can be stored and streamed across the planet. I love … 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

MYSQL 5.6 New features

by
mysql 5.6

At a glance, 5.6 is simply a better MySQL with across the board improvements that hit every functional area of the database kernel, bringing benefits whether you deploy on-premise or in the cloud, including: Better Performance and Scalability Improved InnoDB for better transactional throughput and developer agility Improved Optimizer for … Read more

Convert Plain Text into Clickable HyperLink – PHP

by

preg_replace – Searches $subject for matches to $pattern and replaces them with $replacement. By using the above preg_replace function I have created a simple function which will first find urls inside text and convert all into clickable links Please check my Top 10 code snippets in PHP  PHP Code : Usage … 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

Elegant CSS Pricing Table Design

by

Hi guys, Here I am sharing pricing tables with lots of colors using css to you.

Check out my earlier pricing table using CSS3 and Jquery  –

You can customize the pricing table color by adding css class to the div

  • Lime Green
  • Golden Color
  • Pink
  • Forest Green
  • Cherry
  • Violet
  • Cool Blue, Royal Blue, Navy Blue etc
&lt;div class=&quot;price_table limegreen_table&quot;&gt;

&lt;div class=&quot;price_table royalblue_table&quot;&gt;

&lt;div class=&quot;price_table coolblue_table&quot;&gt;

&lt;div class=&quot;price_table golden_table&quot;&gt;

&lt;div class=&quot;price_table forestgreen_table&quot;&gt;

&lt;div class=&quot;price_table pink_table&quot;&gt;

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/pricing-table-design-css” color=”orange” align=”after”]View Demo[/button]

Buy & Download Pricing Tables Bundle @ 1$


PayPal — The safer, easier way to pay online.

Support

After your payment successful, you will get an email with pricingtables.zip attached sent by itzurkarthi@gmail.com within 1 hour. If you are not seeing it, check the spam folder. If you still don’t see it, send me an email and I’ll resend you again.

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]