Web Design Blog | Web Design Fan | Resources for Web Designers and Graphic Designers

Gone are the days when we have to write code, manually from scratch, to create a Website in an editor, mostly it was Notepad. Nowadays, we are using tools like Adobe Dreamweaver, Zend Studio, Microsoft Visual Studio Express and existing code libraries to simplify our work and get it done with fewer efforts in less time.

Today, we will discuss about one such code library named jQuery. It is an open source, is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. In this write up, we will show how you can create a Datepicker using this jQuery library.

You can download the source files used in the end of the article.

Many websites today feature a small news ticker that provides text links to pages with recent news or other features. It’s a great way to highlight important links without using much space. In this tutorial, I’ll show you how to easily build one of these news tickers using jQuery. We’ll start with a HTML list of links, then use jQuery to make them automatically cycle, fading in and out. When the user hovers over a link, the ticker will pause so they can click the link to learn more.

Today, Doug Feder will be guiding you through the steps to integrate jQuery with PHP while using a MySQL database to count clicks on links. This tutorial will help beginning coders see how to get started using MySQL with PHP and see cool jQuery tricks to improve the look and functionality of designs. We also have a live demo and source files for download below so that you can work along with the video.

This is a tutorial for what is the most complicated jQuery program I have written to date. It is a beautiful script with a simple output that has many potential uses. Undoubtedly, it caused me more stress than it should have, as I debated the most efficient method of displaying a cropped image. Should I use background position or image clipping, scaling or thumbnailing? Which of the many options between methods and styles are cross-browser compatible? After days of debate and testing, I found the perfect combination for a code that supports all high-request browsers (including Internet Explorer 6).

The graphical news slider: something used so often in so many places for so many different purposes. I had made one ages ago as one of my first jQuery projects. I figured I could write a tutorial to share that code with WebDesignFan’s readers, but was taken aback when I reviewed the code I had made so long ago. It was not bad formatting or compatibility or any such thing, as I would never allow such problems to be a part of my programs. However, it wasn’t very extensible as I feel all public code should be. It was merely designed to support the features I needed at the time. Having spent the last few days revising the code, namely to allow custom image dimensions, I am happy to share with you the revised code.

This tutorial will teach you how to use JavaScript to open links in a new tab or window and remain standards compliant.

Using JavaScript to append a target tag does work. It works for the same reason it works to simply put the target attribute in the markup; the browser ignores your document type declaration, regardless of what you set it to be.

Setting target in JavaScript is not using JavaScript to open the window. It is the browser’s interpretation of the target attribute, as defined by non-standard HTML, that opens the window. If the browser were to use actual XHTML standards, it wouldn’t know what to do with a target attribute, whether it was set by the markup or set by JavaScript.

In our last article, we discussed how to use Firebug to troubleshoot CSS issues. This time, we’re going to be tackling an entirely different beast: JavaScript. Historically, JavaScript debugging has been a task left largely to the developer to figure out. Before Firebug, there were few if any viable JavaScript debugging tools available. The Firebug JavaScript console provides us with debugging tools, but it also allows direct interaction with the DOM through a command-line.

If you’re serious about web standards, there’s no good reason to stick with the XHTML 1.0 transitional doctype declaration.

As development of web standards has progressed, there has been an increasing push to abstract all of the layout and functionality of a web page from the content. The theory goes that XHTML should only be used to define the content of the page, while layout is left to CSS and functionality is handled by JavaScript.

This has led to the depreciation of the target attribute in XHTML 1.0 transitional, while it was dropped altogether from the XHTML 1.0 strict specification. What this means is that if you want to take advantage of the benefits of using the XHTML 1.0 strict specification, you shouldn’t be using the target attribute in any of your links.

Content sliders are a great way to show large amount of content or images on a smaller area in a website or blog. They are commonly used in portfolio sites, corporate sites or blogs. You may probably heard that jQuery isn’t very hard to learn. If you are interested in implementing a content slider in your website please check our jQuery tutorials and plugins collection.

One of the most important website element without content or design is navigation. You have to make site navigation intuitive, engaging and useful. jQuery is an excellent choice for achieving this. Check out these 26 incredible jQuery plugins for creating excellent website navigation. Download the pre-built scripts and add the code along with the jQuery framework to quickly and easily enhance your web designs. In this useful list for every webdesigner and developer you’ll find 26 tutorials that will show you how to create amazing navigation with jQuery and CSS.