A Simple Css Only Hover Dropdown Menu


A purely CSS drop-down menu has long been the goal of many webmasters and web designers. Their appeal most probably comes more from the search engine optimization benefits than from the visual appeal. Regardless of the motivation CSS menus are a popular choice. Therefore here is our guide to creating a CSS only drop-down menu.

The HTML

The basic principal of a drop-down menu is actually very simple, so lets take a look at the code. In terms of the HTML the first thing to do is to divide each of your navigational elements into unordered lists. One of these lists should be made up of your main navigation elements the other lists will be the drop down options for each of the main menu headings.

These sub-menu lists should be nested within the primary navigation list so that each sub-menu occurs within the parent list item to which it relates, as shown below.

<ul id="menu">

<li><a href="#">About Us</a>
<ul>
<li><a href="#">The Team</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Vision</a></li>
</ul>
</li>

</ul>

The CSS

<style>

li ul {

display: none;

}

li:hover ul {

display: block;

}</style>

Your required minimal form of dropdown menu can be found bellow for download.

  • Thats it, a drop-down menu created with HTML and CSS alone. Feel free to use the above code as it is or as a starting point for creating a far more advanced CSS menu.
  • In terms of browser compatibility the above menu will display correctly in all the modern browsers as far as I am aware.
  • The drop down menu is fast, simple and effective
  • A drop down menu could never be so simple to design and using CSS alone.
  • The menu is designed purely using CSS and avoids any jQuery or Javascript library which makes it much more faster and simple.

A more advance version ready to use and good looking can be found bellow.

A nice vertical scrolling news ticker plugin using jQuery


Are you looking for Facebook style vertical scrolling news ticker application which shows updates from friends? It creates a smooth vertical scrolling effect which consequently attracts visitors to any news update because of its animation effect. This is a tutorial, which is very suitable for beginers. Even people having less knowledge in jQuery / Javascript can also implement this into their website.

Almost all modern web browsers supports this plugin. Hence you won’t have to worry about compatibility.

The tutorial contains one one html file and one js files including  jQuery plugin.

– index.htm
– newsticker.js (Small javascript file to create the news ticker)

   

Continue reading

Top 10 Collection of jQuery Tutorials Inspired from Facebook


Top 10 Collection of jQuery Tutorials Inspired from Facebook at itswadesh.wordpress.com

  1. Facebook type vertical navigation menu created with jquery
  2. How to create a facebook style activity notification plugin using jQuery and PHP – facebook beeper
  3. Free gmail, facebook type chat application using CSS, jQuery and PHP
  4. Facebook Style CSS JQuery drop down menus
  5. Create A Vertical Scrolling News Ticker With jQuery and jCarousel Lite
  6. Facebook Style Alert Confirm Box with jQuery and CSS
  7. How to track online status of a user in my website like facebook
  8. Creating a Simple Photo Album with jQuery Similar to Facebook
  9. Facebook like red notification simple css technique
  10. Facebook Style Footer Admin Panel

How to Display Author Info Box of a Guest Post in Blogger


Sometimes bloggers accept guest post due to lack of time. In return they provide the author with some quality backlinks and advertisement. Hence it becomes necessary to display some information about the author in a polite and attractive manner. This further encourage more and more people to write quality articles for us.

The tutorial bellow explains how to create and add it into the blogger template. I’ve used only HTML and CSS to implement this.

So Lets jump straight to the tutorial part!

How To Create a Customized Author Info Box in Blogger?

 

1. Go To Blogger > Template > Backup > Download Full Template


 

2. Click On Edit HTML

 

 

3. Search for ]]></b:skin>

 

 

4. Just above it paste the code below

 

#ipi_profile{width:500px;height:100px;border:1px solid #dcdcdc;background-color:#f9f9f9;font:bold 12px "Trebuchet MS",Verdana,Arial}
.ipi_pic{float:left;margin:6px}
.ipi_pic img{border:4px solid #fff}
.ipi_details{float:left;border-right:1px solid #dcdcdc;padding:0 15px 10px 10px;margin-top:10px}
.ipi_contact{float:left;margin-top:10px;padding:0 0 0 15px}
.ipi_facebook,.ipi_facebook:hover{color:#3c5a98;font-weight:700;font-size:16px;text-decoration:none;margin-top:5px}
.ipi_twitter,.ipi_twitter:hover{color:#29c9ff;font-weight:700;font-size:16px;text-decoration:none;margin-top:5px}
.ipi_mailto,.ipi_mailto:hover{color:#000}

 

5.    Now Save your template and write the html code to display the author info

Whenever you write a guest post, switch to HTML mode of the editor and at the end add the code below


<!------------ Author Info Box Start ------------>
<b>Writer</b><br />
<div id="ipi_profile">
<div>
<img alt="Ipsita Sahoo" src="http://4.bp.blogspot.com/-KWqHBYbwJOI/T6EVr4BxgAI/AAAAAAAAAAs/oADS2-J3Yzs/s220/ipi.JPG" width="80px" />
</div>

<div><span style="color: #3292dc; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: bold; line-height: normal;">Ipsita Sahoo</span><br />
Manager<br />
Odisha, INDIA
</div>
<div><span style="color: #666666; font-size: 10px;">&nbsp;</span> <br />
<span style="color: #666666; font-size: 10px;">Email&nbsp; :</span> <a href="mailto:ipsita@gmail.com">ipsita[at]gmail.com</a><br />
<div style="float: left; margin-top: 10px;"><div style="background-color: #1a4485; color: white; float: left; font: bold 14px arial; padding: 2px 4px;"><a href="http://www.facebook.com/ipi" rel="nofollow" style="color: white; text-decoration: none;" target="_blank">facebook</a></div><div style="background-color: #6fdbff; color: white; float: left; font: bold 14px arial; margin-left: 5px; padding: 2px 4px;"><a href="http://www.twitter.com/duskycode" rel="nofollow" style="color: white; text-decoration: none;" target="_blank">twitter</a></div></div>
</div>
</div>

I hope the above tutorial was useful. Keep commenting.

How to create a facebook style activity notification plugin using jQuery and PHP – facebook beeper


Facebook’s new beeper alert notification system looks so handy.

I believe that this is the most effective way of notifying anything live like a friends update or a friends request or when someone comes online.

But the technology behind is just so simple. It contains only a bit of javascript code using jQuery and some simple CSS.

In this tutorial we are going to learn how to create such a update notification plugin, which facebook developers call it as a beeper.

The Basic Setup

1. Include the jQuery and notification javascript libraries into your document

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="facebookNotification.js" type="text/javascript"></script>

2. Include the notification CSS into your document

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

3. Create a div to display the notification message and name it “tips”

<div id="tips"></div>

Features

  • In Facebook Whenever there is a update entry in the updates table, it triggers the alert notification plugin using jQuery. In our case we will trigger it manually.
  • Automatically hides the facebook beeper after five seconds.
  • Onmouseover, the script prevents the hiding of facebook beeper.
  • Again after 5 seconds of mouseout, the facebook beeper hides automatically.
  • There is a close button at the top-right corner to close a particular facebook beeper.
  • It almost simulates the facebook beeper (Update notification system).

How to Add Syntax Highlighter to Blogger or Blogspot Blog


I run a web programming blog with tutorials. Where programming code has got the most importance. Hence i needed my code in any tutorial to be highlighted with colors. I searched throughout. I landed into the SyntaxHighlighter plugin for WordPress. Which easily integrates into WordPress.

But my requirement was to embed SyntaxHighlighter into Bloggeras i run my blog on Blogger.com. The following steps may help.

Step 1: Backup your blogger template

 

In your left side navigation menu click on Template. Then at the very top-right corner you can find a button to “Backup/Restore” your blogger template design.

 

Step 2:  Edit Blogger Template in New Blogger Interface

 

 

Navigate to Blogger dashboard > Layout > Edit HTML  and Expand Widget Templates. Search for <head> and replace it with the below code

<head>

<link href='https://sites.google.com/site/itswadesh/codehighlighter/shCore.css' rel='stylesheet' type='text/css'/>

<link href='http://sites.google.com/site/itswadesh/codehighlighter/shThemeDefault.css' rel='stylesheet' type='text/css'/>

<script src='http://sites.google.com/site/itswadesh/codehighlighter/shCore.js' type='text/javascript'/>

<script src='http://sites.google.com/site/itswadesh/codehighlighter/shBrushCss.js' type='text/javascript'/>

<script src='http://sites.google.com/site/itswadesh/codehighlighter/shBrushJScript.js' type='text/javascript'/>

<script src='http://sites.google.com/site/itswadesh/codehighlighter/shBrushXml.js' type='text/javascript'/>

<script type='text/javascript'>

SyntaxHighlighter.all()

</script>

Step 3: Write Your Programming Code inside <pre> Tag

 

Whenever you publish a post with Programming Code, include the code within the <pre> section

<pre class=”brush: js”>
Your script here
</pre>

Example:

<pre class="brush: js">
$(document).bind('click', function(e) {

            var $clicked = $(e.target);
            if (! $clicked.parents().hasClass("staticMenu")){
                $(".staticMenu dd ul").hide();
                $(".staticMenu dt a").removeClass("selected");
            }        });

</pre>

top 13 collection of jquery digital clock with demo and downloads


No 1. A Colorful jquery digital clock – By tutorialzine.com

A nicely thought and designed digital clock using jQuery and CSS. The circles are inspired from Google Plus. The whole design makes it a nice looking clock. Specially helpful to create your countdown timer.

No 2. jquery css3 digital clock – By css-tricks.com

Very finly designed analog clock created using jQuery and CSS. It makes us remember those school day clocks.  It is created using the new feature of CSS3 which lets us scale, skew and translate (move) objects in our web page.

No 3. jquery sliding digital clock – By comcast.net

No 4. jquery vonholdt digital clock – By comcast.net

No 5. Super Simple CSS3 Pendulum Digital Clock Using Pure CSS ( without Jquery or Javascript)

The power of CSS3 allows us to even animate some HTML elements without using jQuery or Javascript.

The following pendulum clock is a cool example of the above nice feature.

No 6. jQuery Digital World Clock – By Dan Ott

A very innovative clock where the digits are represented using words.

No 7. jQuery Analogue Clock – By Paul Hayes

Simple CSS3 Roman clock created by using -webkit-transition and -webkit-transform  properties.

 

 

No 8. jQuery / CSS3 Digital Clock – By Alessio Atzeni

 

A simple, easy to use jquery + CSS3 digital clock with nice animation which includes both date and time.

 

 

No 9. jQuery Colour Clock – By joelpeterson.com

The HTML color clock is a brilliant idea which represents HTML colors as hexadecimal values as time passes. It has been built using jQuery and CSS.

 

 

No 10.  coolclock – a jQuery Clock Written using CSS – By randomibis.com

 

CoolClock is a customisable javascript analog clock

 

 

No 11. jQuery digital clock with calendar and weather

jDigiClock is a jQuery plugin inspired from HTC Hero Clock Widget. Where as such a complex looking plugin it is surprisingly easy to install

 

 

No 12. A simple goodlooking jQuery Digital Clock – By tutorialpot.com

Here simply a clock image in photoshop has been created and different images are provided for each hand. A jQuery script will update the rotate position every 1000 millisecond, therefore it creates a rotating effect on each of the three hands.

 

 

No13. A big analog clock using jquery

 

A JQuery and a plugin named jQueryRotate has been used to create the big analogue clock. The main idea behind making this watch is to rotate the three images according to the actual time tt/mm/ss.