Content Marketing

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="/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.

Douglas Karr

Douglas Karr is CMO of OpenINSIGHTS and the founder of the Martech Zone. Douglas has helped dozens of successful MarTech startups, has assisted in the due diligence of over $5 bil in Martech acquisitions and investments, and continues to assist companies in implementing and automating their sales and marketing strategies. Douglas is an internationally recognized digital transformation and MarTech expert and speaker. Douglas is also a published author of a Dummie's guide and a business leadership book.

Related Articles

Back to top button
Close

Adblock Detected

Martech Zone is able to provide you this content at no cost because we monetize our site through ad revenue, affiliate links, and sponsorships. We would appreciate if you would remove your ad blocker as you view our site.