Using jQuery to Juice Up an Ordinary Web Page

JavaScript isn’t the easiest of languages to learn. Many web developers who understand standard HTML are fairly intimidated by it. A new breed of JavaScript frameworks have been around for a while now and are beginning to hit the web in stride.

All modern browsers are able to run JavaScript efficiently (some recent modifications to Firefox have really sped up their engine, though). I’d highly recommend downloading and using Firefox – the plugins alone make it invaluable.

jQuery is a JavaScript framework I’ve been experimenting more and more with recently. When I put up a placeholder for a new startup, we didn’t have enough content for a full site but we did want to set up a nice page that described what was coming. And we wanted to do it in a few minutes!

jQuery did just the trick.

Do a search for jQuery+virtually anything, and you’ll also find that developers have built solutions, called plugins, that are ready to go! In this case, I did a search for “jQuery carousel” and found a fantastic, comprehensive jQuery carousel solution on Dynamic Drive.

Another nice thing about jQuery is that it’s code is now hosted by Google. As a result, you don’t need to upload jQuery to your own server, nor do your website’s readers have to download it each time. If they’ve been to one site with the reference to jQuery, it’s automatically cached for use with your site!

Simply add the code within your head tag and you’re off and running with jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

To run the carousel, I did have to upload and reference the stepcarousel script:

<script type="text/javascript" src="https://cdn.martech.zone/stepcarousel.js"></script>

After that, modifying the page was simple! I put my carousel within a div called mygallery and the strip of panels within a div called belt. I then added a small chunk of settings code within my body tag.

You can customize the action quite a bit. In this case I modified the script to run automatically when the page loads. I customized the speed and the duration that each panel is displayed, as well as the buttons to manually rotate the panels left and right. Another cool feature of this plugin – when you get to the last panel, it rewinds back to the first!

If you’re afraid of programming or JavaScript is intimidating, jQuery may be the solution for you. Most of the time, you simply need to copy and paste the file references, edit a few settings, structure the page correctly… and you’re off and running.