Skip to main content

Posts

Showing posts with the label JQuery

Simple Drop Down Menu with Jquery and CSS

his post is very basic level Jquery and CSS implementation. I want to explain how to design simple drop down menu  with CSS, HTML and Jquery. This system helps you to minimise the menus list. Just take a quick look at this post very few lines of code, use it and enrich your web projects.  Download Script       Live Demo HTML Code Simple HTML code <div class=" dropdown "> <a class=" account " > My Account </a> <div class=" submenu "> <ul class=" root "> <li > <a href=" #Dashboard " > Dashboard </a> </li> <li > <a href=" #Profile " > Profile </a> </li> <li > <a href=" #settings "> Settings </a> </li> <li > <a href=" #feedback "> Send Feedback </a> </li> </ul> </div> </div> JavaScript Contains javascipt code.  $(".account").click(function(){} -  ac
Post a Comment
Read more

Making accordion menu using jquery

Last time, I’ve shown how to create  accordion using jquery . But, In this post I’ll show you how can you create fancy accordion menu using jQuery. In this post, you’ll see two examples of accordion. First menu’s visibility get’s toggled on clicking on the header while the another menu’s visibility get’s toogled when mouse is moved over it. Live Demo of accordion menu using jQuery HTML structure for accordion menu using jQuery <div id = "firstpane" class = "menu_list" >   <p class = "menu_head" > Header-1 </p>     <div class = "menu_body" >         <a href = "#" > Link-1 </a>     </div>   <p class = "menu_head" > Header-2 </p>     <div class = "menu_body" >         <a href = "#" > Link-1 </a>     </div>   <p class = "menu_head" > Header-3 </p>     <div class = "menu_body" &
Post a Comment
Read more

Expand & colabs

Here is the first part without cookies... <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Example</title> <script type="text/javascript"> //<![CDATA[ function change(id, newClass) { identity=document.getElementById(id); identity.className=newClass; } //]]> </script> <style type="text/css"> div.toggle { display: none; } div.toggleshow { background: #fff; border: #000 solid 1px; color: #000; display: block; } </style> </head><body> <div> <a href="#" onclick="change('toggle1', 'toggleshow');">Show toggle1</a> <br /> <a href="#" onclick="change('toggle2', 'togglesho
Post a Comment
Read more

Expand-collapse toggle panel (div) using jquery

In this post, I’ll show you how easy it is to show expandable and collapsible toggle panel using jQuery. When you click on the heading, the content gets displayed by sliding and when you again click on the heading again, it gets collapsed. View LIVE DEMO Now let’s look at the html code, <div class="msg_list"> <p class="msg_head">Header-1 </p> <div class="msg_body"> orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit </div> <p class="msg_head">Header-2</p> <div class="msg_body"> orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit </div> <p class="msg_head">Header-3</p> <div class="msg_body"> orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit </div> </di
Post a Comment
Read more

25 Amazing & Free Flash Based Image Galleries

There’s no doubt that with those nifty javascript frameworks like jQuery, creating a nice image gallery or slideshow has become quite easier but still they are far behind the way interface can be built using Flash. Here are 25 really amazing flash based image gallery scripts that provide not only nice user interface but are free and easy to adapt into your website. 1.  Polaroid Gallery Polaroid is an amazing gallery for displaying your photos in an unusual way. It places images as if they are actually lying on table such that you can drag and change their position. To view image in full, double click any image. And it stores the data about images in XML file. 2.  Flash Gallery Flash gallery is a lightweight and easy to deploy flash photo gallery. It uses XML file to store information about images to be displayed. 3.  dfgallery This amazing flash image gallery is not only good for its interface but also for its customization options. It has an amazing theme engine built to support c
Post a Comment
Read more