JQuery

jQuery is something that I write about a lot on this blog. Sometimes people confuse jQuery with JavaScript, mostly newcomers to the field of Web Development and in this article today, I’ll help you understand what jQuery is exactly and in what way can jQuery assist you. Let’s get the basics clear first in the first section and then move on to how to use it in your Website Development process to be able to take full advantage of what jQuery has to offer. ...

A Countdown Timer is a feature that you can install on your website to know users about an upcoming event, and counting down the time left for that event. A countdown timer can be built using various languages, but here I am going to discuss with you how to create a countdown timer using jQuery as the primary language to code. Obviously you will need to use HTML to display the countdown timer and style it using CSS. Apart from that, the tutorial is going to be a very simple and easy to follow one. ...

URL Parameters are something that you see in the URLs a lot these days. They look like “http://www.example.com/?category=xyz”, where “category” is the parameter name and “xyz” is the parameter value. These typically appear in the URL of a page when we submit a form on the previous page, and it sends the data to the action page via a GET method. ...

I can bet that you have seen a tooltip on almost every page that you visit. Web developers may know this by the name of a** _title attribute _for an element**. The value for the title is displayed as a tooltip on HTML browsers. For instance, if you hover on any image on Slash Coding, you will see what the image is in the form of a simple tooltip. But today, I will provide you a simple guide which will help you create a customized, stylish jQuery tooltip using a jQuery plugin. You may hover on this image, and you will get a simple HTML tooltip showing you the title of that image. ...

I bet you have seen quite a few websites where in when you scroll the webpage, the menu bar of that webpage gets fixed or stuck at the top to allow you to easily navigate the website. In technical terms, it is called a Sticky Menu Bar. A sticky item is something that just sticks to any given position on the webpage, and it can be anywhere that you want. ...

jQuery is something that helps web developers and designers achieve a lot of difficult tasks easily. Today, in this tutorial, I am going to teach you how to create a custom content scroller on your webpage. Have you ever faced a problem when you need to set a maximum height or width for an element on your webpage, but you are cautious that it may hide the actual content? Well, in such a scenario, a custom content scroller can be used, which enables the user to scroll through the content of an element in case it does not fit the screen. It will not scroll the entire webpage, but will just scroll that specific element. Before we begin, have a look at the demo and download the source code if you want. ...

Heavy websites take a lot of time to load and this can be annoying for the user browsing the website. It seems better to let the user know that the website is loading and to have patience, rather than having the user see half-loaded or the still loading website. There are numerous ways to do that, but in today’s tutorial, I am going to show you a way to show a simple coloured screen with a loading animation on the enter of the page. Once the page loads, this animation will fade out to the completely loaded website. For this tutorial, I am going to use the jQuery background Image slideshow that we created in the last tutorial. In case you missed it, feel free to check it out first. ...

Full page background slideshows are something that are getting pretty common these days for various websites. These websites include various portfolio websites for Artists or Photographers. They like to show off their skills straight on their home page by showcasing their work as a slideshow on the background of the page. I had to do a full page background slideshow for one of my client’s website and that’s when I thought of sharing it with everyone out there. Performing this task can be done in two ways, one is to create it using CSS and write the entire code yourself or the other one is to use a jQuery plugin out there to make your work easier. ...

Web developers at times need to display some information to the users via a means of a popup. Clearly, the regular popups don’t look professional at all. Thus, to create professional looking stylish popups was a demand for the web developers. Hence, jQuery popups came into being. These popups don’t open any new window or tab in the users browser. It just creates a popup, which is displayed on the same page and does not look annoying. ...

Creating Fast and quick loading web pages are the things a client wants these days. Moreover, the developer themselves want to create such pages. There are various ways to boost up your page loading time, one of them being optimizing your images for a quick page load. Now, to optimize your images, there are two things you can do, either decrease the quality of your image and reduce its size or you can Lazy load your images with this trick to decrease your page loading time greatly. ...