Development Blog by Professionals
HTML – XHTML
Mega Drop Down Menus w/ CSS & jQuery
Jun 28th
While in the process of redesigning 4wheelparts.com, I decided to explore new methods of working with our huge number of inventory and categories. I did some research and noticed a new trend for ecommerce sites in having what they call “mega drop down menus”.
According to usability expert Jakob Nielson, mega drop down menus tested to be more efficient for large scale websites.I decided to experiment with different ways of implementing this technique and would like to share how I achieved this method.
more visit http://www.sohtanaka.com/web-design/mega-drop-downs-w-css-jquery/
HTML 5 Audio Tag
Jun 28th
<!DOCTYPE HTML>
<html>
<body><audio src=”horse.ogg” autoplay=”autoplay” loop=”loop” controls=”controls” >
Your browser does not support the audio element.
</audio></body>
</html>
http://www.w3schools.com/html5/tag_audio.asp
HTML5 Video Player
May 27th
http://jilion.com/sublime/video
Current features
- HTML5 video goodness:
- no browser plugin, no Flash dependencies
- jump anywhere in the video and it’ll start buffering from that point
- Uniform UI across all browsers
- Standalone pure JavaScript library
- Full-window mode:
- Sleek zoom-in/out transitions
- Live-resizing (when resizing the browser window)
- More advanced controls on a draggable pane
- Double-click video to enter full-window
- Press spacebar to play/pause and Esc to exit full-window
- Full-screen mode hold down Command (Mac) or Ctrl (Windows/Linux) while entering full-window. Currently only supported in latest WebKit Nightly Builds and in the Flash version of the player.
- iPhone & iPad support
SEO meta tags
Nov 12th
What Does This Meta Tag Look Like?
This meta tag is usually placed beneath the title and meta description tags in the
<HEAD></HEAD> section of your pages’ HTML code, like this:<HEAD>
<TITLE>your DESCRIPTIVE KEYWORDS title goes here</TITLE>
<META NAME=”DESCRIPTION” CONTENT=”Your keyword rich marketing sales-pitch meta description goes here”>
<META NAME=”KEYWORDS” CONTENT=”your keywords,go here,separated by a comma,but not a space”>
</HEAD>
Execute Lightbox Scripts From Flash
Jun 3rd
Execute Lightbox Scripts From Flash: Part Deux
Since the first thread showing you how to execute Lightbox scripts from Flash was such a big hit, I decided to write another showing you how to gain even more functionality in this regard. Tonight I will be showing you how to initiate a Lightbox containing a Flash movie from a Flash movie, and how to initiate Lightbox groups containing images as well as Flash movies. All of the following scripts can be used in the same page if you wish, you just need to include all of the following delegates into your project. More >
TinyMCE: Configuration/valid elements
May 19th
Option: valid_elements
The valid_elements option defines which elements will remain in the edited text when the editor saves. You can use this to limit the returned HTML to a subset.
This option contains a comma separated list of element conversion chunks. Each chunk contains information about how one element and its attributes should be treated. The default rule set for this option is specified below. More >
Absolute CSS Boxes
Apr 2nd
Quite some time ago, I had an argument with a friend who is a big fan of Microsoft products. While I’m no Xbox hater, I am not very fond of some of their more shoddy products such as Internet Explorer. He was justifying the shortcomings of IE6, saying that absolute positioning is rarely used in web pages, and that :hover pseudo class is not really that useful.
For the most part, he was right. Very few websites I have seen actually make extensive use of absolute positioning. By default, if you do not specify a mode, web browsers will use static positioning. This is what I used in nearly all the sites I have done. For most real-world scenarios, extra features are not needed. Still, good browsers adhere to standards as much as possible. There is even the Acid2 Test to determine how well various browsers measure up.
In that same vein of relatively useless, but somewhat amusing CSS implimentation, I have whipped up this little demo. It works in Firefox, Opera and Safari, but fails in the big blue E. Those who are proned to seizures might not want to move the mouse around too quickly. Use at your own risk:
Demo: Absolute CSS Boxes
There you have it folks, an impractically enjoyable use of CSS! By the way, these effects do not use images or JavaScript. It uses only a single file, containing valid XHTML 1.0 Strict and CSS. Feel free to take the code and do what you want with it. Don’t forget to check it out in Internet Explorer, and show all of your friends why they need to switch to a different browser. 
Tinymce pagebreak button
Jan 27th
<script language=”javascript” type=”text/javascript” src=”Scripts/tiny_mce/tiny_mce.js”></script>
<script language=”javascript” type=”text/javascript”>
// Notice: The simple theme does not use all options some of them are limited to the advanced theme
tinyMCE.init({
mode : “textareas”,
height : “380″,
width : “380″,
theme : “advanced”,
valid_elements : “img[src|border|alt=|title|width|height|align|class],a[href|target=_blank],b/strong,div[align],br,ol,li,ul,p,blockquote”,
entity_encoding : “utf-8″,
plugins :”pagebreak”,
theme_advanced_buttons3 : “pagebreak”,
pagebreak_separator : “<!– my page break –>”
});
</script>
