Using JQuery Photo Border, Scrolling and more plugins
By Ryan Doom @ 8:08 AM
3289 Views :: 0 Comments ::

JQuery Plugins

What is JQuery?  JQuery is a Javascript library that makes writing JavaScript a lot easier.  Once you learn JQuery you will be able to program the JavaScript you need to make functions on a webpage work in a fraction of the time it would take to write them in standard JavaScript.  It works as a ‘wrapper’ of the standard JavaScript language and exposes methods that do behaviors such as selecting elements on a page, hiding and showing elements, sliding or animated effects, even AJAX.  Sure you could code these methods by hand, but JQuery also handles the necessary browser sniffing and makes your scripts work across browsers (Internet Explorer, Mozilla Firefox, Safari, etc.) with ease.
Let’s take a look at one of the websites Web Ascender developed to see how we used JQuery

Visit Century 21 Looking Glass

Rotating Items the Recent Listings

On the Century 21 Looking Glass homepage we used JQuery to rotate the “Recently Listed” homes.  When the page loads an Asynchronous JavaScript method is called to a web service that returns the necessary HTML for the home listings.  Each home listing is a DIV that has a surrounding DIV with the class “slideshow” on it.  We then utilized a JQuery plugin that would rotate any DIVs that were inside a DIV of class “slideshow.”  It made this feature a cinch, even the Asynchronous JavaScript methods were provided by JQuery.

Our Photo Borders

  On majority of the inner pages are photos that have a nice border that looks like a stack of photos.  Normally we would have to make the images in a program like Photoshop and add the borders on the images and upload them. Or, we would have to surround the photo with a lot of complicated HTML code to make the borders.  Both the previous options were far too complicated for the users of the website.  Since we build every website with our Content Management System we had to have it setup in such a way that our client could upload a normal photo and easily get that border.  All the user of the website has to do is use SiteCTO and when adding the photo add a class called “Photo” to it.  JQuery automatically scans each page after it is rendered and wraps any IMG with a class of Photo with the cool looking Photo Border!  So adding the nice effects is easy for us and our users.

Linking to other websites

One of the coolest ways we used JQuery was to automatically do a pop-up window if a website editor linked to a website outside of the Century 21 Looking Glass website.  We wanted the web masters to be able to link to other Real Estate resources but we wanted to make sure the page opened a new window, and also had a header on the new window that told the user they left Century 21 Looking Glass.  One option would be to train users to add the necessary code when linking to a website outside of theirs but we are programmers! We could solve it with a little JavaScript kung fu.  We wrote a JQuery script that analyzes all the links on a page once it is rendered, if the page doesn’t link to something on c21lookingglass.com it injects a target=”_blank” as well as inserts a webpage to do the redirection that adds the header bar.  This problem would have been difficult to solve without the convenience of JQuery. 

The Search Bar

When search results are returned they are also added to a convenient to use side pane.  This would have been difficult to do without JQuery, because we also automatically slide the scrollbar down to the property you are looking at.  The ‘scrolling’ of a window is very different between browsers, using JQuery alleviated that pain.  Even the tabs in the search bar area were done with JQuery!

Saved Properties

Users can save properties to what is essentially a cart.  When a user clicks on save, without doing a post back the item is added to their cart, the saved button turns dim, a visual indicator is fired to let them know the item has been added, and an AJAX call is made to write the property to the database.  All – with easy to use JQuery. 

Photo Slide Shows

The photo slide shows are extremely slick, and easy to do.  We used a free JQuery plugin called ‘thickbox’ and modified it to automatically rotate the photos.  It has great effects, and uses a DIV layer rather than a pop-up window that the pop-up blockers will not stop.

Schedule A Viewing and other forms

We also used Thickbox to load up contact forms that did not pop-up or take them to another page.  It’s a great effect that allows the users to still see the page they are on and fill out the form.  After they submit or close it the page goes back to how it was.  Thickbox is great because it can do off page content, as well as on page content.

Sign up form

Because our content management system is based on an open source system called DotNetNuke we had some trouble modifying our signup forms that the users need to fill out to make an account.  For one, DNN wants users to make a Username and add their email.  We wanted the email to be their username, and only wanted to have them add it once.  Also the questions were not ordered as we liked them and the tab ordering did not work right.  You guessed it, we fixed each of these issues with JQuery!  We never had to change any of the content management system source code.