Demo HTML5 Placeholder

Download Demo Zip

Old School Javascript Way

Before we had the placeholder attribute, we relied on Javascript to fake the placeholder text. Below is an example. The text is inserted in the value attribute. On focus, it checks if the value is “search” and returns empty to clear the field. If the value is empty, it returns “search.” As you can see, this way is not an efficient way because each field has to be checked.

<input type="text" value="Search" onfocus="if (this.value == 'Search') {this.value = '';}"
onblur="if (this.value == '') {this.value = 'Search';}">

jQuery Placeholder Text (Demo)

Now with HTML5 placeholder, it is more semantic to use placeholder than value attribute. However, placeholder text is not supported by all browsers. To make it cross-browser, Modernizr and jQuery come in handy here.

Modernizr is used here to check if placeholder is supported. If placeholder is not supported, the jQuery code will run. It finds all elements with placeholder attribute and stores in a variable. It then compares the input value with the placeholder attribute. If the input value is empty, it will display the placeholder text and add a “placeholder” class to the input field. View Demo.

To use this on your site, download a copy of Modernizr and jQuery and paste the following code any where in your html page (be sure the jquery.js and modernizr.js file is in correct path).

<script src="jquery.js"></script>
<script src="modernizr.js"></script>

$(document).ready(function(){

if(!Modernizr.input.placeholder){

	$('[placeholder]').focus(function() {
	  var input = $(this);
	  if (input.val() == input.attr('placeholder')) {
		input.val('');
		input.removeClass('placeholder');
	  }
	}).blur(function() {
	  var input = $(this);
	  if (input.val() == '' || input.val() == input.attr('placeholder')) {
		input.addClass('placeholder');
		input.val(input.attr('placeholder'));
	  }
	}).blur();
	$('[placeholder]').parents('form').submit(function() {
	  $(this).find('[placeholder]').each(function() {
		var input = $(this);
		if (input.val() == input.attr('placeholder')) {
		  input.val('');
		}
	  })
	});

}

</script>

Remove Webkit Search Input Styles

Webkit browsers add extra styling to the search input field. To remove them, add the following CSS code:

input[type=search] {
	-webkit-appearance: none;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
	display: none;
}

Credit

The jQuery code is found at Nico Hagenburger.

From: http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text

It is informed that Windows Internet Explorer 8 provides users innovative new features that make browsing faster, easier, and safer than ever. Currently the Release Candidate 1 of IE 8 is offered to be evaluated by users while it undergoes final testing. It’s no doubt that the final release of IE 8 will spread over the Internet. So ensuing your navigation menus (either DHTML menus or Javascript menus) are compatible with IE 8 becomes quite important to each Webmaster or Web designer. That’s why the minor updates of Sothink DHTML Menu, Tree Menu and JavaScript Web Scroller are decided to published in order to add the compatibility of IE 8 RC1.

Wanna have a try immediately? Here goes the download links of the latest versions of three products:

Install DHTML Menu 9.1 now!
Create drop down menus visible in IE 8 RC 1!

Install Tree Menu 2.8 now!
Build JavaScript tree menus compatible with IE 8 RC 1!

Install JavaScript Web Scroller 2.1 now!
Let your image slideshows or news scrollers work well with IE 8 RC 1!

Once upgrade to the latest version, just publish the existing menus or image scrollers from the program, replace all JS files or codes used on your Web site with the new files, and then users can experience the compatibility issues with websites in IE 8 RC 1 while browsing.

Enter “Preview > Preview Setup” to configure the preview setting.

Web designers can set Background color and Page margin to configure the menu so it can suit the HTML web page better.

• Background color
  Set the background color for preview window. You can set the background color the same with your web page, so you will get the matchable menu color and style.
  
• Page margin
  Input value to set menu’s left and right margin in the preview window.
  

After the menu creating, you can preview the menu in a certain HTML page and preview its effect! This function is for those advanced users of Sothink DHTML Menu.

• Preview in Pages
  To preview the menu in an HTML page, you can set this option to get it.
  Choose the button “Add” and pick up the page which the menu is inserted into, put the cursor in the place where the menu is shown in the page, so the menu can locate in the proper position in the HTML page. You can choose the button “Edit” to change the position of the cursor, so does the menu’s position.
  

There’re some other options；

• Auto-refresh preview window:
  Checking this option, the program will refresh the menu result in preview window automatically when you make any modification.
• Prompt to refresh if the menu is modified:
  This option is available with the option “Auto-refresh preview window” unchecked. Checking this option, the program will prompt you to refresh the menu result by clicking the prompt.
• Display the HTML page in program’s preview window
  Checking this option, you can see the exact position of the DHTML menu within built-in preview window of the program.
• Display the HTML page in external preview window
  Checking this option, you can preview the exact position of DHTML menu just in external preview window.

This function can layout your menu perfectly, which makes the whole menu and each menu item get the precise size. So it is convenient for you to configure the background image of menu item; the position of menu and its popup items can also be set separately as well.

You can also set the “Page Margin” in Preview Setup to position the menu in your webpage more precisely.

The current coordinates of the mouse show as X 132 and Y 2 in the right bottom of the state bar.

F.A.Q:

1. How to show ruler?
– There are two ways to show ruler, one is to click “View > Ruler” on the menu bar; the other is to press shortcut key Ctrl+R.

2. Can I change the measurement units?
– Yes. Just right-click anywhere within the ruler and the ruler settings will popup. The available units are pixel, inch, or centimeter. And the default measurement unit is pixel.

3. How to change the coordinate origin (in order to calculate the size value of the whole menu and each menu item)
– You can change coordinate origin to help you calculate the size value easily. Just press down the mouse in intersection area of horizontal ruler and vertical ruler, and then drag the crossing down to the position where you want the coordinate’s origin locates. When dragging the crossing, a horizontal and a vertical line will appear to guide you. The new coordinate origin is the intersection of horizontal guide and vertical guide line.

Intersection area

Take above image for example: new 0 in the top ruler moves 300 pixels right; and new 0 in the left ruler moves 200 pixels down, the crossing is the new coordinate origin. To restore the ruler coordinate origin, you can right-click anywhere within the ruler and choose “Reset”.

Click here for more info about Sothink DHTML Menu>>

Below is a sample of rounded corner menu, which is produced by Sothink DHTML Menu. It totally imitates the old menu style of Amazon.com.

To create a rounded menu, we should choose “Menu Item – Background” in the tasks panel. In the property panel, you can set the background of the menu item as rounded corner image in the Background Library.

You can also custom the rounded corner image in the Custom dialog. The custom image is made up of three graphics, which are the left corner, the middle graphic and the right corner. You can define each as you like.

Following the steps above, you can create a cool menu with rounded menu style.
Design your special rounded corner menu to welcome this Christmas day in 2008!
Download Sothink DHTML Menu and you can use it for FREE in 30 days!

Download For Free | More Info | Samples

Visual Tutorial: How to Create a Tab Menu by Sothink DHTML Menu>>

Sothink DHTML Menu 9

File size: 5.94 MB
Build number: 81111
Release date: 12th November, 2008

Donwload Now | Samples | More Info

For those who are longing for the new version of Sothink DHTML Menu for a long time, here is a GOOD NEWS:  Sothink DHTML Menu 9 is finally released today! Let’s take a look at some of its new features:

• Tab Menu is supported. It is a menu type which displays main menu items as tabs. The sub menu items are displayed on a line below when moving the mouse over or clicking a main menu item



• Support setting background with rounded corner. Users can choose background images in Background Library or custom the background images as they like

• Add new templates and modify the present style in the built-in template
• Sort the images by the use frequency in all image libraries and the Style panel of Menu Item
• Simplify the surround function by dividing “Popup Menu > Surround” into normal panel and advanced panel. Users can adjust the color, tint & brightness to edit the surround image or choose corners and edges separately.

  

• Modifing the present styles of menu item

More new functions and features>>

No coding acknowledge, no JavaScript experience, do you still want to create your own DHTML menu? It is very simple to get drop down menu if you have Sothink DHTML Menu. The above tutorial is show you how to do to build your JavaScript menu. 

Know about Sothink DHTML Menu. It is the most popular JavaScript drop down menu maker currently found on the web. It covers all your DHTML web menu system needs and more. With our brand-new intuitive user interface, it easily creates fully featured cross-browser drop down menus in a visual edit mode. You can generate stylish DHTML menus in minutes with our frequently updated templates. Resource Folder settings and publishing guide you to add a drop down menu to your pages in a fast and easy way without any hand coding, working both locally and on the web. Free Dreamweaver, FrontPage, Expression Web and GoLive add-ins help you quickly design your menu and integrate it with your existing web site. Sothink DHTML Menu Builder also generates search-engine-friendly drop down web menus, which therefore can be properly indexed by search engines, such as Google.

All licenses allow you to create menus for unlimited web sites.

Download and try Sothink DHTML Menu >>

Order the lite version of Sothink DHTML Menu >>

Order the professional version of Sothink DHTML Menu >>

Sothink dhtml menu was updated to the new version 8.6 last month, have you tried it yet?

For the users who have aready tried or bought it ,you might exactly benefit from the convenience that the optimization brought to you, but for some users-to-be who do know not so much about it , here I will give you a brief introduction.

Optimization

• Brand-new interface has improved the fashionable skin, the reasonable layout and handy editing
• Full Edit Mode enables to edit and preview menu in the preview window directly;
• Set Resource Folder for resources files to make the same menu display exactly in multi-page of different folders; and preview the menu locally or on the web
• Simplifies Publishing to insert the menu into the page easier; Add new templates, modify the present style in the built-in templates and re-arrange the existing templates

More New Features

• custom resources in image library.
• Keyboard Navigation
• Disable certain items and separators function
• Multi-column Menu
• Copy and Paste directly
• New special effect – Rectangle
• Tips of the Day

Know more at: www.sothink.com/product/dhtmlmenu/index.htm