How to : jQuery UI Autocomplete - Combobox ( dropdown )

Convert your <select> into beautiful jQuery UI Combobox. Its been fun with jQuery and UI is really cool. This is what i got when finished. ( final output )

You can customize the widget as you want. for this you need jQuery UI , I downloaded my own jQueryUI Theme using Theamroller. You can download default theme or customize it as per your project need, just download it from here.  To do this cool widget i follow following steps.

Step 1:Add Javascripts and CSS to your page

Here i have downloaded 1.8.20 version and using same for this tutorial. For this widget i added few scripts and css style in header section of HTML page.

Javascript to get URL of page

In my project, today i need to get the URL of the page, i used a small Javascript to implement it. In Javascript location object contains information about the current URL. It is supported by all the major browsers.
The location object is part of the window object and is accessed through the window.location property. Quite simple script to do this is :


<script language="javascript" type="text/javascript">
    document.write (document.location.href);
</script>

Properties of Location Object

hash	Returns the anchor portion of a URL
host	Returns the hostname and port of a URL
hostname	Returns the hostname of a URL
href	Returns the entire URL
pathname	Returns the path name of a URL
port	Returns the port number the server uses for a URL
protocol	Returns the protocol of a URL
search	Returns the query portion of a URL

Note : Please note that this won't work if you are using frames in your page.

CSS: Word Wrap

It is possible to force long continuous text to wrap in a new line by specifying break-word with the word-wrap  property. Word-wrap is supported in IE 5.5+, Firefox 3.5+, and WebKit browsers.

Word-Wrap has basically two values normal or break-word value with the word-wrap property.

• Normal means the text will extend the boundaries of the box. 
• Break-word means the text will wrap to next line.

In your style-sheet :

.wrapwords { 

   word-wrap: break-word; 

}

Note : Please remember that if parent div has a property called white-space: nowrap; then this doesnt work.

Static Twitter Follow Me Badge For Any Web In 5 Easy Steps

Twitter is large social networking site and has a million's of users. Many Bloggers/Webmasters are using twitter to promote their blogs. So here i'm sharing how to include Twitter follow me badge in easy 5 steps for blogger user, but it doesn't mean this post is not useful for other webmasters , even for them its very easy ( Please follow only 4,5 step). 

Steps are

1. Login into your account first.
2. After successful login you are at Dashboard, now select Design 
3. Now select tab Edit HTML.
4. Find (Ctrl + F) "</head>" tag.
5. Paste the code Just before it, Now in place of "UID" ( second line of code )write your twitter User Name ( ie webgeektutorial ) let others be same and save your work,  its Done !

CODE: 

<!-- HTML Codes by http://webgeektutorials.blogspot.com -->
<a href='http://www.twitter.com/UID' rel='nofollow' style='display:scroll;position:fixed;top:250px;right:5px;z-index:10' target='_blank' title='Follow Us On Twitter'>
<img alt='by http://webgeektutorials.blogspot.com' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl38NVMDrq1uBbLJVpzIOIwYBaVRI2bWVFKBfu0BMTF4dY5gLj5ampvKm3UCCEdTOwghN1uRRQU29QfSGEmR-VHCOGKipR_W8QArGuNQMGNIo8xUlRaajjZDXXIoFxJ143KNsEqU6Iddg/s104/twitter_fm.jpg'/>
</a>

If you like my post. Please do not remove Html comment line.  

Sharing is Caring :) So keep sharing.

HTML5 Canvas Cheat Sheet

The HTML5 canvas element uses JavaScript to draw graphics on a web page. A canvas is a rectangular area, and you control every pixel of it.The canvas element has several methods for drawing paths, boxes, circles, characters, and adding images.

<canvas> was first introduced by Apple for the Mac OS X Dashboard and later implemented in Safari. Gecko 1.8-based browsers, such as Firefox 1.5, also support this element. The <canvas> element is part of the WhatWG Web applications 1.0 specification also known as HTML 5.

There are cheat sheets for just about anything out there but I couldn't find one for the HTML5 canvas element, so I decided to do something about that, mostly for my own sake but if other people find it useful that's just all the better. 

Part 1 ( Click on image to enlarge)

HTML5 Visual Cheat Sheet

HTML5 is the new language of the web. This reference lists the various tags available to the web designer, as well as a selection of useful character entities, attributes and events.

The HTML5 cheat sheet is a printable document, designed to provide a quick reference for HTML5. A description of what is on the cheat sheet follows, or if you are impatient, you can go straight to the full size HTML5 cheat sheet.

PART 1  ( Click on image to Enlarge )

HTML5 With New Logo and Features

HTML5 is still a draft version, but good thing here is we can use some of features.

W3C specification defines the 5th major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML). In this version, new features are introduced to help Web application authors, new elements are introduced based on research into prevailing authoring practices, and special attention has been given to defining clear conformance criteria for user agents in an effort to improve interoperability.

The Worldwide Web Consortium (W3C), has unveiled a visual identity for the HTML5 technology to “encourage early adopters to use HTML5”.

The logo was designed by boutique agency Ocupop, and has been released by the W3C as badges, stickers, even t-shirts (see below)—all to promote the technology. here its the logo.

There are some good website shows when you can use HTML5 (CSS3 and more). And also you can find html5 demos. These websites show you which browsers support which html5 features and useful links.

HTML Cheat Sheet

HTML is the language of the web. It is the semantic support on which websites depend. This A4 reference lists the various tags available to the web designer, as well as a selection of useful character entities, attributes and events.
The HTML cheat sheet is a one-page A4 printable document, designed to provide a quick reference for HTML. A description of what is on the cheat sheet follows, or if you are impatient, you can go straight to the full size HTML cheat sheet.

Which Web Language?

When choosing web design languages, make sure you take some time to research your options to ensure you're making the best choice for your project.

When you think about the language you are using to design your website keep in your mind “what is important about web design language, and what part of web design efforts can you take or leave?”.

If you like to create and publish your own web or blog, your first step should be to decide what type of web you would like to create and what web design language you would like to use.

 

Hypertext Markup Language (HTML)

HTML, which stands for HyperText Markup Language, is the predominant markup language for web pages. A markup language is a set of markup tags, and HTML uses markup tags to describe web pages.
This language is so simple you can type the syntax into a text editor, such as Notepad, save it with an .html extension and instantly have a web page. HTML can also be used to include Cascading Style Sheets (CSS) to define the appearance and layout of text and other material. The W3C, maintainer of both HTML and CSS standards, encourages the use of CSS over explicit presentational markup

Technologies for web design

This might be a common interview question in front of you, while hunting a job, some points i would like to discuss about this question.

• HTML provides the basis for creation of web pages.
• Photoshop is software which is used for image editing.
• Flash for creating presentation.
• CSS helps creates uniformity across the entire web site.
• Javascript provides certain user interface controls.
• MySQL and Oracle are well-known database management technologies.

After stagnating for quite some time, Web powering technologies are now experiencing rapid development. CSS (Cascading Style Sheets) is just the first wave, and it's already giving way to more robust technologies like DHTML, LAMP, XML (read An Introduction to the Extensible Markup Language for more information on this technology), and AJAX. Attempting to stay current on these technologies can be both time consuming and expensive, which raises the question: should you stick with what you have, or take the plunge and incorporate these advanced techniques?