jQuery tabs on content have become a stylish addition to Web 2.0 websites, but it’s not always obvious just how to make them work, and many people have been writing up tutorials on how to write your own tab scripts using jQuery. Thankfully, however, there’s an addition to jQuery called jQueryUI that includes tab support and pre-built tab functions so you don’t have to roll your own every time you write a website. Here’s a quick tutorial on how to get them up and running on your website! Method A: The Conventional Way jQueryUI now supports tabs as part of its integrated… View full post »
Posts Tagged ‘jquery’
jQuery Tutorial: Scrolling Effects With Anchor Links
December 20th, 2012 Leave a commentSometimes you’ll want to use anchor text in a page, but you don’t want any old boring anchor scroll. The instant click-through to anchor links is devoid of any interesting flair, and that’s no longer a viable option in today’s Web landscape. Web 2.0 is all about having smooth effects to go with your buttons and bevels, and so maybe you want a cool scrolling effect for your anchor links on your site. Here’s a quick and easy way to get that on your page! Step 1: Create The Anchor Link You’re going to want this in the part you want to… View full post »
Is jQuery Right For Your App?
December 17th, 2012 Leave a commentjQuery has taken over in the application-building world, and people have been using it left and right to build new applications, from hobbyist projects to large-scale, enterprise-level applications. There are, however, other toolkits like dojo out there that offer alternatives to jQuery: should you always use jQuery, or is there a reason to switch to one of those other toolkits when the need arises? First off, it’s always a safe bet to use what you know. If you’re familiar with the jQuery library, it’s almost certain that you’re going to do faster, better work with jQuery than you would with another… View full post »
Creating a Simple Drop-Down Menu with jQuery
October 10th, 2012 Leave a comment 1 commentIf you have learned anything about JavaScript, it is most likely that you have heard about jQuery. jQuery is a powerful tool for creating dynamic effects with JavaScript and can be used with CSS to create many different kinds of navigation systems on your Web sites. In this article, I will show you how to create a drop-down menu using jQuery and CSS. Creating the HTML First, we create the HTML for the menu structure. We will use <div> tags with the HTML list tag <li> to create the top level and submenu items. <div class="menu"> <a class="links" >My… View full post »
Using the jQuery Animate Function
August 31st, 2012 Leave a commentWhen making interactive or interesting Web pages, it is helpful to have a way to create animations that do not require special plug-ins or add-ons. The JQuery animate() function is a powerful tool that you can use on HTML elements that is supported by most major browsers without having to have extra pieces to install. Using the animate() function is easy to learn even if you are new to JQuery. To begin, let’s look at the syntax for the animate() function. There are two different ways it can be called: .animate(properties, [duration], [easing], [callback] ) Here is a breakdown of… View full post »
Create an Accordion Menu with jQuery
August 27th, 2012 Leave a commentjQuery is an open-source library that you can use to create animations, advanced effects and dynamic web pages. It is also a great way to add items such as menus to your site that incorporate some of these effects. In this article I will show youhow to use jQuery effects with your HTML interface and then how you can use those effects to create an accordion menu with animation that toggles to open sub-menu options. This is an excellent addition to your site that is easily within the grasp of someone new to jQuery. Using Visual Effects with… View full post »
A Sliding Navigation Menu with jQuery
August 1st, 2012 Leave a commentAs you probably know, jQuery allows us to create different navigation effects that can make our pages look polished and professional. In this article, I will show you how to create a bottom sliding navigation bar that uses some CSS3 and jQuery effects. If you would like to use this code in your own pages, you can follow this tutorial or download the zipped code files to have a starting point that you can use on your own site. The Markup In the HTML we simply need to set up the structure of our menu, creating headings and sub-menu items…. View full post »
Detecting Ad Blockers: jQuery Tutorial
April 10th, 2012 Leave a comment 1 commentIf you are a website owner you most likely have advertising of some type to help you pay the bills for the site. If your site is really popular you most likely use with money for your financial “bread and butter” that supplements your income and keeps things running smoothly. Most site owners see this as compensation for their hard work and dedication to the site. However, most people that browse the web dislike ads for a variety of reasons. They are normally bright and flashy to catch the attention of the browser, they detract from the style… View full post »
jQuery Data Method – How To
March 19th, 2012 Leave a commentWhen using jQuery we often find ourselves storing data inside the DOM and misrepresenting the alt or rel attributes to achieve our own ends. However, there is a better way of achieving this. We can store data with meaningful names with any element on the page. Hopefully after reading this article on how to use jQuery’s Data method you will no longer feel compelled to break the rules of the DOM and you will know how to store your critical pieces of data in a better way. Here is an example of some of the strange things we… View full post »
jQuery HTML5 Drag-and-Drop File Upload
March 8th, 2012 Leave a comment 3 commentsOften we have a situation on our site where we want users to be able to upload a file. Whether this is for a profile, pictures of any item or other scenario, creating a file upload doesn’t have to be tricky. With some of the nice tricks in HTML5 and jQuery we can even add the nice touch of being able to drag and drop files directly into the uploader, making your site feel extra-special. In this tutorial we will discuss the techniques of both of these techniques that make this trick possible as well as create… View full post »
5 Helpful jQuery Tricks
February 21st, 2012 Leave a comment 1 commentIt doesn’t matter if you are just starting out with jQuery or have been working with it for a while; you probably have some magic in your bag that you reuse in your projects. If you are a total jQuery novice, you might want to check out our jQuery Quick Tutorial first. This article continues our jQuery Optimization series with five fresh jQuery tips to help you have a few more tricks up your sleeve. If you need more than just tips, check out our jQuery training courses! 1. Resize Fonts on the Fly There are many benefits to letting your… View full post »
jQuery Mobile – Beginner Tutorial
February 8th, 2012 Leave a comment 1 commentBeing able to reach your audience via a mobile page is becoming almost as important as having a page at all but getting started in mobile site development can be frustrating. The jQuery library provides many handy mobile features that you can use to get started making great mobile-friendly web sites. In this article I will discuss the jQuery mobile framework features and give you a little demo on how it works. What is jQuery Mobile? jQuery Mobile is a unified framework that is designed to work on all major mobile platforms. This allows us to save a lot… View full post »
Optimizing jQuery – 10 Ways to Write Better Code
December 29th, 2011 Leave a commentMost of us that began writing jQuery started because we heard how awesome it was and we were frustrated at JavaScript. jQuery is awesome, but like any programming language, there can be problems and pitfalls we want to try to avoid. This article talks about ten common better uses of jQuery that will help you get your job done right. They won’t make you a jQuery expert, but they will show you some best practices and better ways of using the library. 1. Make Sure Your Version is Up-to-date Why: jQuery is constantly changing and updating. Improvements to the… View full post »
jQuery Quick Tutorial
November 14th, 2011 Leave a comment 1 commentWhether you are new to JavaScript or have been developing for the Web for a while, learning jQuery can seem like a daunting task. If you have been wanting to give it a try, here is a quick primer to give you the facts and help you get started along with some examples for you to try out. If you want to play with the examples from this tutorial, feel free to download them from here. What is it? jQuery was originally developed by John Resig of the Mozilla Software Foundation in 2006 with the motto of “Write less, do more”…. View full post »
jQuery Lightbox Plugins: Top 5
March 21st, 2011 Leave a commentEverybody loves the good ol’ Lightbox image plugin. It has great utilities that spruce up a boring photo gallery with some awesome effects, and they’re generally very easy to install and customize. The only catch is Lightbox is based on the Prototype Framework and Scriptaculous Effects, a duo that hasn’t been as popular as the jQuery library. Most sites today do use jQuery, and adding two additional Javascript frameworks to the mix is both risky (there is a potential for construct conflict) and expensive (requires additional bandwidth on the page), especially if their sole purpose is to serve the… View full post »




