Hidden Features: Live Project , PD Classess, Resume Making Training, How to find Good Job in Web Developement , Project Analysis, Experience Certificates.

Both techniques have their advantages and disadvantages as you will see during this presentation
Access the raw Excel Binary File – 1

There is a php library written that can access a raw Excel binary file. Benefits include that it is easy and straight forward to use, has plenty of documentation and examples, and only has one include file of approximately 800 lines. No need for special php compile flags etc, and can be used straight from the download.
Access the raw Excel Binary File – 2

sample code
<?php
require_once ‘Excel/reader.php’;

// ExcelFile($filename, $encoding);
$data = new Spreadsheet_Excel_Reader();

// Set output Encoding.
$data->setOutputEncoding(‘CP1251′);

$data->read(‘filename.xls’);

//display cell in row 3, column 4 (D)
echo $data->sheets[0]['cells'][3][4];
?>
Access the raw Excel Binary File – 3

The $data->sheets[0]['cells'] array has other elements that can be used instead of cells (otherwise it wouldn’t be an array). You can also use numRows or numCols which returns the number or rows or columns respectivily. cellsinfo contains an array itself in which you can retrieve cell information i.e. background color, formating, cell type (number, character etc), column or rowspan etc…
Access the raw Excel Binary File – 4

Important The Excel Reader library can be used on any platform, not just Windows. Some aspects DO NOT work, e.g. Lookup Tables, and there maybe more. You will need to be comfortable with arrays, and understand the alphabet sequence, i.e. D => 4.

Links
php excel reader
php excel writer

There is a link at openoffice.org for the excel file specification, but I forgot to put that link in. Sorry.
Use the Excel API – 1

Microsoft have provided an API to access it’s popular products such as Word, Excel, PowerPoint etc. The language commonly refered to is VBA, and this can be accessed via a COM object. Benefits: The major benefit is that it is provided by the product vendor! Another aspect is that it is fairly intuitive, and the techniques can be ported to other Microsoft products
Use the Excel API – 2

Sample Code
<?php
$excel_app = new COM(“Excel.application”) or Die (“Did not connect”);
$Workbook = $excel_app->Workbooks->Open(‘filename’) or Die(‘Did not open filename’);
$Worksheet = $Workbook->Worksheets(’sheet1′);
$Worksheet->activate;

$excel_cell = $Worksheet->Range(‘D3′);
$excel_cell->activate;

echo $excel_cell->value;
…

Use the Excel API – 3

Sample Code – closing off
$Workbook->Save();
$Workbook->Saved = true;
$Workbook->Close;

unset($Worksheet);
unset($Workbook);

$excel_app->Workbooks->Close();
$excel_app->Quit();

unset($excel_app);
?>
Use the Excel API – 4

There are plenty of API functions available and the documentation is pretty crappy, but with good examples and notes. Anything that you can do in Excel can also be done via the API. This includes lookup tables, formulas, protected sheets etc…

You will also notice from the example code that you can refer to cell coordinates the same way that you view them in Excel, i.e. D3.

Links
VBA reference – Excel
Conclusion – 1

Two methods of accessing an Excel file have been presented tonight. One method was directly accesssing the raw binary, the other was via the API. Accessing the raw binary is a bit of a hack. Microsoft do not provide the file format, but instead you must rely on a third party to provide the information.

Classes that have been written work for simple cases, however more complex situations can not be resolved. The benefit however is that this method can be used on any platform and does not require Excel to be installed.
Conclusion – 2

Using the Excel API is by far the preferred technique. The API was written by the product vendors, and anything you can do in Excel can be replicated with the API. The Microsoft documentation is pretty crappy, but I’m sure there are good books in the market that can fill the gap. Understanding the object model means that the techniques can be ported to other office applications.

Using VBA does require Excel to be installed on the server, and if my knowledge is correct this also means you must have a Windows Server.

View Demo of Sexy Drop Down Menu

Step1. HTML

First create an unordered list for your base top navigation. Then simply nest another unordered list for your sub navigation.
view plaincopy to clipboardprint?
<ul>
<li><a href=”#”>Home</a></li>
<li>
<a href=”#”>Tutorials</a>
<ul>
<li><a href=”#”>Sub Nav Link</a></li>
<li><a href=”#”>Sub Nav Link</a></li>
</ul>
</li>
<li>
<a href=”#”>Resources</a>
<ul>
<li><a href=”#”>Sub Nav Link</a></li>
<li><a href=”#”>Sub Nav Link</a></li>
</ul>
</li>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Advertise</a></li>
<li><a href=”#”>Submit</a></li>
<li><a href=”#”>Contact Us</a></li>
</ul>
Step2. CSS

Next, it’s time to style the navigation wireframe with CSS.
view plaincopy to clipboardprint?
ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
float: left;
width: 920px;
background: #222;
font-size: 1.2em;
background: url(topnav_bg.gif) repeat-x;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative; /*–Declare X and Y axis base for sub navigation–*/
}
ul.topnav li a{
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.topnav li a:hover{
background: url(topnav_hover.gif) no-repeat center top;
}
ul.topnav li span { /*–Drop down trigger styles–*/
width: 17px;
height: 35px;
float: left;
background: url(subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottombottom; cursor: pointer;} /*–Hover effect for trigger–*/
ul.topnav li ul.subnav {
list-style: none;
position: absolute; /*–Important – Keeps subnav from affecting main navigation flow–*/
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
border: 1px solid #111;
}
ul.topnav li ul.subnav li{
margin: 0; padding: 0;
border-top: 1px solid #252525; /*–Create bevel effect–*/
border-bottom: 1px solid #444; /*–Create bevel effect–*/
clear: both;
width: 170px;
}
html ul.topnav li ul.subnav li a {
float: left;
width: 145px;
background: #333 url(dropdown_linkbg.gif) no-repeat 10px center;
padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*–Hover effect for subnav links–*/
background: #222 url(dropdown_linkbg.gif) no-repeat 10px center;
}
Step3. jQuery

For those who are new to jQuery, you can learn about it here.

The following script contains comments explaining which jQuery actions are being performed.
view plaincopy to clipboardprint?
$(document).ready(function(){

$(“ul.subnav”).parent().append(“<span></span>”); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)

$(“ul.topnav li span”).click(function() { //When trigger is clicked…

//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find(“ul.subnav”).slideDown(‘fast’).show(); //Drop down the subnav on click

$(this).parent().hover(function() {
}, function(){
$(this).parent().find(“ul.subnav”).slideUp(’slow’); //When the mouse hovers out of the subnav, move it back up
});

//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass(“subhover”); //On hover over, add class “subhover”
}, function(){ //On Hover Out
$(this).removeClass(“subhover”); //On hover out, remove class “subhover”
});

});

*To degrade gracefully, we only show the drop down menu trigger to those who have javascript enabled.

This is what it looks like when javascript is disabled:

A few days ago, Jeffrey posted about a potential “outside the box” competition on ThemeForest to encourage authors to put on their creativity hats and design usable templates with “outside the box” creative designs. In this tutorial I’ll cover a few ways to do just that with OS X style docks and stacks navigation.
Sources and Credits

Before we get started, I want to give a shout out to a couple guys who came to the rescue when they heard my call for help on Twitter. Steve updated the stacks script by Harley from using jQuery 1.2.6 to use the current 1.3.2 release and Rey Bango from the jQuery team helped me fix a bug. They both jumped to the task within a couple minutes of my cry for help via Twitter. Thanks a ton guys! *Round of applause*

Original Sources
“Adding to Our Leopard Desktop with jQuery” by Harley via Net.tutsplus.com
Interface: Fisheye Menu
jqDock v1.2
Example template (Internet Encyclopedia) by Luka Cvrk
Quick Notes

These scripts rely on jQuery 1.3.2. The examples shown are compatible with all major browsers including IE6 and are easy to ensure graceful degrading if JavaScript is off or disabled.
jQuery OS X Dock #1 (Horizontal)

The first dock we’ll build uses the jQuery Fisheye Menu plugin mentioned above. It’s pretty lightweight (~7kb with dependencies) but the main reason I wanted to use this one was because it’s incredibly smooth, no stuttering. View Demo.

As you can see in the demo, it’s incredibly smooth and responsive. The downside is that you can’t use fixed positioning with it if the page needs to scroll as it will break. If you don’t need it fixed within the browser window then it works great.

This is a great example of “outside the box” concepts in websites and provides an interactive and fun interface.

Required files (I’ve combined the Fisheye plugin and iutil.js in the demo files).
jQuery 1.3.2
Interface: Fisheye Menu plugin
Interface: iutil.js (dependency)
The HTML

We’ll wrap our images and titles in links and place them within a containing div. Then we’ll wrap it all in another containing div for it to function properly.
view plaincopy to clipboardprint?

Notice that I’ve placed the titles in span tags so we can style them as well as allow the plugin to hide/show them as necessary.
The CSS

With CSS we’ll position the dock where we want it on the page. We can’t use fixed positioning with this plugin or it won’t function properly.
.dock-container { position: relative; top: -8px; height: 50px; padding-left: 20px; }
a.dock-item { display: block; width: 50px; position: absolute; bottom: 0; text-align: center; text-decoration: none; color: #333; }
.dock-item span { display: none; padding-left: 20px; }
.dock-item img { border: 0; margin: 5px 10px 0px; width: 100%; }

I’ve also placed a little extra CSS in the head of the page below the CSS included above. I wrapped it in noscript tags in case a visitor doesn’t have JavaScript enabled or available, it will still be a usable navigation. I should point out that this will not validate because the noscript tag isn’t valid in the head section, even though it works in all the current browsers.
#dock { top: -32px; }
a.dock-item { position: relative; float: left; margin-right: 10px; }
.dock-item span { display: block; }
The JavaScript

We’ll bring in our JavaScript files now starting with jQuery 1.3.2. The fisheye-iutil.min.js file is the combination of the Fisheye plugin and its dependent iutil.js file. We’ll create the last file and put our JavaScript necessary to initialize the dock in it.
view plaincopy to clipboardprint?

Now we’ll initialize the dock once the page loads. You can use several plugin options to customize the dock as you need for positioning and functionality. You can view the documentation by visiting the site listed under sources for the Fisheye plugin.
view plaincopy to clipboardprint?
$(function () {
// Dock initialize
$(‘#dock’).Fisheye(
{
maxWidth: 30,
items: ‘a’,
itemsText: ’span’,
container: ‘.dock-container’,
itemWidth: 50,
proximity: 60,
alignment : ‘left’,
valign: ‘bottom’,
halign : ‘center’
}
);
});

That’s all there is to it!

jQuery OS X Dock #2 (Vertical)

The horizontal dock was easy and definitely a neat idea to use on websites. They’re probably the most common type used across the web currently so let’s try something different. We could get a little more “outside the box” if we did a vertical dock navigation.

This dock relies on the jqDock jQuery plugin. It’s approximately 10kb in size, so it’s a few kb larger than the previous version but that’s not much. The disadvantage to this plugin is that it’s not quite as smooth as the Fisheye plugin dock, although it’s still very fluid and certainly usable. This plugin also doesn’t have issues with fixed positioning. View Demo.
The HTML

We’ll put our images in an unordered list and wrap them in links. As with the last plugin, we’ll wrap everything within a containing div. When we initialize the plugin we’ll use the “ul” here.
view plaincopy to clipboardprint?

You’ll notice on this dock we don’t have titles wrapped in span tags. Instead, this plugin will look at the “title” tag set for each image and create the titles that way (if enabled in the plugin options). This makes the markup a little simpler but it also makes the titles a little less customizable.

The CSS

We position the dock on the left side (can be either side) using fixed positioning. We’ll give it a little space between itself and the top of the browser window for aesthetics and so the icons don’t disappear when enlarged.
#dockContainer { position: fixed; top: 60px; left: 6px; }
#jqDock { position: relative; bottom: 48px; }
.jqDockLabel { background: #333; color: #fff; padding: 3px 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; }

To style the titles we can use the “.jqDockLabel” class. We also won’t need to include any extra styles for it to still be usable with JavaScript disabled. It may not be very pretty but it’s functional.
The JavaScript

We’ll bring in the jQuery library just like the previous dock as well as the plugin.
view plaincopy to clipboardprint?

We initialize the dock and set a few options to customize it. You can read the documentation on these settings by visiting the site listed under sources at the beginning of the tutorial for jqDock. What I want to point out here though is the duration option. This is the time for magnification animation in milliseconds. It’s nice to be able to change the duration speed but it seems to get a little stuttery, which is something I hate.
view plaincopy to clipboardprint?
$(function(){
var jqDockOpts = {align: ‘left’, duration: 200, labels: ‘tc’, size: 48, distance: 85};
$(‘#jqDock’).jqDock(jqDockOpts);
});

You can easily change the positioning of the dock and labels as well as the initial size of the icons and a few other options. What I didn’t like about this plugin is that it magnifies to the full size of the icon. The previous plugin gives you the ability to change the size it magnifies to. That’s all there is to it!

jQuery OS X Stack and Drop Stack

This is probably my favorite navigation style out of the three shown in this tutorial. It’s super lightweight (~1kb) and is a really creative “outside the box” method of navigation for a website. It might be a little awkward having the navigation in the bottom right or left of the browser window but it would certainly be creative and save lots of space. View Demo.

While writing this, I realized there are probably many people that won’t like their navigation at the bottom of the page so I took a couple extra minutes and added a drop-down stack to the example files. This way the navigation springs out from top to bottom so it can now be used at the top of pages.
View Demo.
The HTML

The HTML is just as simple as the two dock examples. We’ll place everything in a containing div and place all our images and titles, which are wrapped in links, within an unordered list.
view plaincopy to clipboardprint?

Notice that I’ve placed an image before the unordered list. This is the basket image that the rest of the icons will be stacked behind.
The CSS

We’ll position the main container and make sure the basket image has a higher z-index than the unordered list so everything stacks behind it. Also notice that I’ve given the basket image 35px of padding. This prevents the icons behind the basket from being clicked since the basket image is shorter than the icons. If you change the basket icon to something taller then you’ll need to also change the padding.
view plaincopy to clipboardprint?
.stack { position: fixed; bottom: 28px; right: 40px; }
.stack > img { position: relative; cursor: pointer; padding-top: 35px; z-index: 2; }
.stack ul { list-style: none; position: absolute; top: 5px; cursor: pointer; z-index: 1; }
.stack ul li { position: absolute; }
.stack ul li img { border: 0; }
.stack ul li span { display: none; }
.stack .openStack li span {
font-family: “Lucida Grande”, Lucida, Verdana, sans-serif;
display:block;
height: 14px;
position:absolute;
top: 17px;
right:60px;
line-height: 14px;
border: 0;
background-color:#000;
padding: 3px 10px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
color: #fcfcfc;
text-align: center;
text-shadow: #000 1px 1px 1px;
opacity: .85;
filter: alpha(opacity = 85);
}

/* IE Fixes */
.stack { _position: absolute; }
.stack ul { _z-index:-1; _top:-15px; }
.stack ul li { *right:5px; }

The titles wrapped in span tags are set to display:none so they’ll be hidden when the page loads.
The JavaScript

We’ll place the JavaScript in its own file since it’s more than a couple lines. When the image outside the unordered list (the basket) is clicked, it uses jQuery’s toggle function to animate the the list items and set their position based on the horizontal starting point + .75px then multiplied by 2. This gives us the nice curved spring action of the list items.

You could change the .75px or the multiplier (2) to customize how much it curves.
view plaincopy to clipboardprint?
$(function () {
// Stack initialize
var openspeed = 300;
var closespeed = 300;
$(‘.stack>img’).toggle(function(){
var vertical = 0;
var horizontal = 0;
var $el=$(this);
$el.next().children().each(function(){
$(this).animate({top: ‘-’ + vertical + ‘px’, left: horizontal + ‘px’}, openspeed);
vertical = vertical + 55;
horizontal = (horizontal+.75)*2;
});
$el.next().animate({top: ‘-50px’, left: ‘10px’}, openspeed).addClass(‘openStack’)
.find(‘li a>img’).animate({width: ‘50px’, marginLeft: ‘9px’}, openspeed);
$el.animate({paddingTop: ‘0′});
}, function(){
//reverse above
var $el=$(this);
$el.next().removeClass(‘openStack’).children(‘li’).animate({top: ‘55px’, left: ‘-10px’}, closespeed);
$el.next().find(‘li a>img’).animate({width: ‘79px’, marginLeft: ‘0′}, closespeed);
$el.animate({paddingTop: ‘35′});
});

// Stacks additional animation
$(‘.stack li a’).hover(function(){
$(“img”,this).animate({width: ‘56px’}, 100);
$(“span”,this).animate({marginRight: ‘30px’});
},function(){
$(“img”,this).animate({width: ‘50px’}, 100);
$(“span”,this).animate({marginRight: ‘0′});
});
});

Then when the user clicks the basket image again it runs the next function which reverses what we just did. I then added some additional animation to the list items and their titles to give them a little more user feedback, which of course can easily be removed.

And there you have it! A simple and flexible OS X style stack navigation for your website. This script is also in the process of being converted into an easier to use plugin so keep an eye out for that.
Final Thoughts

Hopefully these examples will give you some ideas to be creative and break out of the mold when designing your next website or template. As you can see, jQuery is a powerful library that makes it easy to make our ideas a reality. With a potential upcoming competition based on “outside the box” designs, you might get started on some ideas to submit to ThemeForest. If you haven’t submitted files before, it’s very easy and can definitely be well worth your time!

I want to thank Rey (from the jQuery team) and Steve for answering my call for help on Twitter so quickly. This is a prime example of how useful Twitter can be for designers and developers. If you aren’t following Theme Forest or Nettuts on Twitter yet, now is a good time to do that. They’re both websites with a ton of fantastic information. You can also follow me on Twitter if you’d like.
Follow us on Twitter, or subscribe to the bagesh singh RSS Feed for more daily web development tuts and articles.

This tutorial will cover a few ways to do just that with OS X style docks and stacks navigation.

2. Sexy Drop Down Menu w/ jQuery & CSS

In this tutorial you will learn how to create a sexy drop down menu that can also degrade gracefully.

3. Designing the Digg Header: How To & Download

Navigation is compacted with the use of simple drop-down menus.

4. Create The Fanciest Dropdown Menu You Ever Saw

5. A circular menu with sub menus

A follow on from the simple single level circular menu, this one adds a sub menu level of smaller icons in a circular pattern within the top level circle. There is also the facility to add a simple description of each icon.

6. A Different Top Navigation

In this tutorial you will use jQuery to create a different multi-layered horizontal navigation system that is still intuitive enough for anyone to use for the first time.

Preview Demo
7. Perfect signin dropdown box likes Twitter with jQuery

Nice tutorial showing you how to create a login drop down with Twitter style using jQuery.

8. Sliding Jquery Menu Tutorial

This tutorial will show you how to create a sliding menu button using jquery. You can see the effect in action over on the PSDtuts webpage in the top right hand corner.

9.Fancy Sliding Menu for Mootools

10. Create Vimeo-like top navigation

I’ve featured this Janko’s tutorial some time ago, but sometimes I will repeat myself, since this article is completely dedicated to showcase advanced drop down menus. Very detailed and well written tutorial, with drop-down search options narrowing and targeting search by checking options. Menu is done completely using just CSS, structure is visually describet in the image below:

Preview Demo
11. Dynamic PHP/CSS menu

12. Creating an Outlook Navigation Bar using the ListView and Accordion Controls

Preview Demo
13. Animated Drop Down Menu with jQuery

14. jQuery UI Potato Menu

Preview Demo
15. Make a Mega Drop-Down Menu with jQuery

Preview Demo
16. A cross-browser drop-down cascading validating menu

Just simple CSS menu.

Preview Demo
17. Drop-Down Menus, Horizontal Style

Very old drop-down tutorial from year 2004, but if you are starting out – very useful tutorial and example.

Preview Demo
18. Superfish v1.4.8 – jQuery menu plugin by Joel Birch

Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript) and more features.

Preview Demo
19. JavaScript Dropdown Menu with Multi Levels

This multi-level drop down menu script weighs in at only 1.2 KB. It features animation, active header persistence, easy implementation and multiple instance support.

Preview Demo
20. jQuery (mb)Menu 2.7

This is a powerful jQuery component to build easily a multilevel tree menu or a contextual menu (right click) in an intuitive way!

Preview Demo
21. Menumatic

MenuMatic is a MooTools 1.2 class that takes a sematic ordered or unordered list of links and turns it into a dynamic drop down menu system. For users without javascript, it falls back on a CSS menu

Preview Demo
22. Smooth Navigational Menu (v1.31)

Smooth Navigation Menu is a multi level, CSS list based menu powered using jQuery that makes website navigation a smooth affair.

Preview Demo
23. jQuery File Tree

jQuery File Tree is a configurable, AJAX file browser plugin for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code.

Preview Demo
24. Longed-For Multi-Level Drop-Down Menu Script

Preview Demo
25. jQuery & CSS Example – Dropdown Menu

This article is intended to describe an extremely basic, yet extremely powerful, technique for adding dropdown menus in your application user interface or website design.

Preview Demo
26. Reinventing a Drop Down with CSS and jQuery

Preview Demo
27. Simple jQuery Dropdowns

Very stripped down code and minimal styling, yet still dropdown menu has all the functionality typically needed.

Preview Demo
28. Styling Drop Down Boxes with jQuery

One problem with HTML forms is it is hard to style the elements to fit into your design. The tutorial will show you how to style the hardest of them all, the select box.

Preview Demo
29. jQuery iPod-style Drilldown Menu

Preview Demo
30. jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready

Newer version of previous iPod style menu.

Preview Demo
31. mcDropdown jQuery Plug-in v1.2.07

Preview Demo
32. jQuery Drop Line Tabs

This menu turns a nested UL list into a horizontal drop line tabs menu. The top level tabs are rounded on each side thanks to the use of two transparent background images, while the sub ULs each appear as a single row of links that drop down when the mouse rolls over its parent LI.

Preview Demo

33. Cut & Paste jQuery Mega Menu

Mega Menus refer to drop down menus that contain multiple columns of links. This jQuery script lets you add a mega menu to any anchor link on your page, with each menu revealed using a sleek expanding animation. Customize the animation duration plus delay before menu disappears when the mouse rolls out of the anchor. Mega cool!

Preview Demo
34. Professional dropdown #2

Preview Demo
35. Drop down menu with nested submenus

Create your own drop down menu with nested submenus using CSS and a little JavaScript.

Preview Demo
36. jdMenu Hierarchical Menu Plugin

The jdMenu plugin for jQuery provides a clean, simple and elegant solution for creating hierarchical drop down menus for websites to web applications.

Preview Demo
37. Dynamic Drive – Multiple Level Menus

A lot of free advanced CSS and Javascript drop down menus are available here. There are also instructions and advices how do use and modify them.

38. IzzyMenu – Menu Builder – Build your pro CSS/DHTML Menu

Choose from dozens ready styles or create your own menu style. They are low in file size, so won’t consume a lot of bandwidth from your hosting. IzzyMenu, online menu generator is the best solution for amateurs and professionals!

Before starting with any jQuery, we’ve got to build a quick menu structure with XHTML and load in the required project files. Make new XHTML, CSS, and javascript documents. I’ve chosen to name each of mine “animated-menu”. Make two folders in the root directory for images and javascript. I’ve attached a screenshot of my folder structure to clarify:
Nothing out of the ordinary here. Start by loading in the necessary libraries and external files in the head. I have chosen to load jQuery from the Google code archive online, while the easing plugin from above is placed into the “js” folder. The order of loading is important!
view plaincopy to clipboardprint?
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
<title>Smooth Animated jQuery Menu</title>

<link rel=”stylesheet” href=”animated-menu.css”/>

<script src=”http://jqueryjs.googlecode.com/files/jquery-1.3.js” type=”text/javascript”></script>
<script src=”js/jquery.easing.1.3.js” type=”text/javascript”></script>
<script src=”animated-menu.js” type=”text/javascript”></script>
</head>

Then copy in this menu structure into the body:
view plaincopy to clipboardprint?
<body>
<p>Rollover a menu item to expand it.</p>
<ul>
<li>
<p><a href=”#”>Home</a></p>
<p>The front page</p>
</li>
<li>
<p><a href=”#”>About</a></p>
<p>More info</p>
</li>
<li>
<p><a href=”#”>Contact</a></p>
<p>Get in touch</p>
</li>
<li>
<p><a href=”#”>Submit</a></p>
<p>Send us your stuff!</p>
</li>
<li>
<p><a href=”#”>Terms</a></p>
<p>Legal things</p>
</li>
</ul>
</body>
</html>

Menu items have a class assigned to it that will designate the color of the block. Within each menu block is a title and subtitle that will be hidden by default.

Step 3 – Style with CSS

Now that the menu structure is in place we’ll add some basic styles to neaten up and arrange the menu horizontally. Overflow must be set to overflow for each list item. This will ensure that the subtitle for each item will not display until the height expands to fit.
view plaincopy to clipboardprint?
body{
font-family:”Lucida Grande”, arial, sans-serif;
background:#F3F3F3;
}

ul{
margin:0;
padding:0;
}

li{
width:100px;
height:50px;
float:left;
color:#191919;
text-align:center;
overflow:hidden;
}

a{
color:#FFF;
text-decoration:none;
}

p{
padding:0px 5px;
}

.subtext{
padding-top:15px;
}

/*Menu Color Classes*/
.green{background:#6AA63B;}
.yellow{background:#FBC700;}
.red{background:#D52100;}
.purple{background:#5122B4;}
.blue{background:#0292C0;}
Step 4 – Animate with jQuery

All of our jQuery code will go into the javascript file created earlier. It will be called “animated-menu.js” if you’ve been following my model.
view plaincopy to clipboardprint?
$(document).ready(function(){

//When mouse rolls over
$(“li”).mouseover(function(){
$(this).stop().animate({height:’150px’},{queue:false, duration:600, easing: ‘easeOutBounce’})
});

//When mouse is removed
$(“li”).mouseout(function(){
$(this).stop().animate({height:’50px’},{queue:false, duration:600, easing: ‘easeOutBounce’})
});

});

There are two actions in the code above. When the mouse moves over a menu item, that item starts an animation where it expands to 150px tall over 0.6 seconds. The easing applied through the plugin is ‘easeOutBounce’ which causes the box to “bounce” a little as it reaches the end of the animation (“out”). When the mouse is moved off the animation to the starting size is triggered.

If you are using this within the context of a larger site, simply substitute the element selected (currently “li”) for the mouse events to the necessary selector.

The stop() method is chained before the animate in order to prevent a buffer from building where the animation will loop repeatedly if the mouse is moved around quickly over it. An article on Learning jQuery covers this solution in greater depth.
Step 5- Add Some Flair

I’ve added background images to each of the menu items in the live version and source files to illustrate some design possibilities. There are plenty of other creative ways to add some personality to the menu. Go on and experiment. If you come up with anything remarkable, be sure to share it with us in the comments.

download code

A good trick, I thought while doing this, using class name to restrict the Ajax cal

I successfully used the same “behavior” of tabbed navigation in “front-end”, was easy at the end (always with Magento, when you get it), but I was struggling at the start. So, like my other posts, to share here’s how I used the same type of tab in Magento’s Front-end.

First thing is add the Tab’s Java-script file. You can either include by layout or in PHTML file. If you want to do from layout then,1 <reference name=”head”>
2 <action method=”addJs”><script>mage/adminhtml/tabs.js</script></action>
3 </reference>

Next thing is to create Tab’s Menu inside UL & LI. Here’s the structure. (Self Explanatory)01 <!– TAB MENU STRUCTURE –>
02
03 <ul id=”page_tabs”>
04 <!– NORMAL TAB –>
05 <li>
06 <a id=”normaltab” name=”normaltab” href=”#”> NORMAL TAB </a>
07 <!– NOTE: class has to be tab-item-link–>
08
09 <div id=”normaltab_content”> Normal Tab HTML</div>
10 <!– NOTE: See the id of this div content it has id equal to its anchor’s (<a>) id + Underscore + content –>
11 </li>
12 <!– NORMAL TAB END–>
13
14 <!– AJAX LOADED TAB –>
15 <li>
16 <a id=”ajaxtab” name=”ajaxtab” href=”http://example.com/magento/module/controller/action”> AJAX TAB </a>
17 <!– NOTE 1: class has to be tab-item-link ajax notloaded –>
18 <!– NOTE 2: Since this is Ajax Loaded Tab its Anchor should have href value = SOME URL –>
19
20 <div id=”ajaxtab_content”></div>
21 <!– NOTE 1: See the id of this div content it has id equal to its anchor’s (<a>) id + Underscore + content –>
22 <!– NOTE 2: Since its innerHTML will be loaded by by Ajax you can set its innerHTML “blank” –>
23
24 </li>
25 <!– AJAX LOADED TAB END –>
26 </ul>
27 <!– TAB MENU STRUCTURE END –>
28
29 <!– TAB CONTENT CONTAINER DIV–>
30 <div id=”tabcontainer”></div>
31 <!– TAB CONTENT CONTAINER DIV–>

Now its the time to use the Tabs JS included, like below.01 <script>
02 // Form Key Required for POST AJAX Method
03 var FORM_KEY=”<?php echo Mage::getSingleton(‘core/session’)->getFormKey() ?>”;
04
05 // Set this to false, Guess used for some other purpose in backend, not really required in frontend.
06 var varienGlobalEvents=false;
07
08 // Initiallizing Varien Tabs
09 /**
10 * @param 1 : UL Menu ID
11 * @param 2 : Target Tab Content ID
12 * @param 3 : Initially Loading Tab’s Id
13 * @param 4 : Don’t know yet, just use as it is (LOL)
14 */
15
16 frontend_tabsJsTabs = new varienTabs(‘page_tabs’, ‘tabcontainer’, ‘normaltab’,[]);
17
18 </script>

Done! You must now have a functioning Tab loading by Ajax and Normal, but yes tab would look good if you add CSS to your Tabs. Here is how it works.
On load it first copies the tab_content div inside the Target Tab Content ID div.
On tabbed menu clicked it checks its class name and if it class name does not have “ajax” it simply shows the its_content div.
If the menu clicked has “ajax” then it checks for another class name “notloaded”. So if its ajax and notloaded it then makes an Ajax request and updates the responseText to itsid_content div and then removes the “notloaded” class name for the menu. After that it then displays the itsid_content div, hiding previous ones.
If you re-click the “Ajax” typed menu, it will not find “notloaded” class in its menu, then it just shows its_content div.

Sooner or later it might become necessary to write an application that tracks site visitor browser types. Here’s some code to use:

This will output something that looks like one of the following:

Reference
A more complete list of USER AGENT strings (tab delimited)

Next, we’ll build a simple browser checker to check for Internet Explorer (IE), Firefox, Opera and Safari:

Now let’s parse out a simple Operating System (OS) checker using the strstr function:

What is XSS?

Refer folowing url

< src=”" text=”< script”>alert(document.cookie)< / script>”> < / iframe>

Other XSS attacks

How to prevent such attacks ?

Clensing the Query String variables is the only way you can prevent such attackers.

Clensing the Query String – PHP :
string strip_tags ( string $str [, string $allowable_tags ] )
This function tries to return a string with all HTML and PHP tags stripped from a given str.

string htmlentities ( string $string [, int $quote_style [, string $charset [, bool $double_encode ]]] )

use above functions or you can write your own function which combines all such stripping functionlities.