jQuery Circular Image Gallery

There are a lot of great jQuery galleries to choose from, but the “ROUNDRR” plugin stands out as a circular gallery. If you’re looking for great circular plugin, this one of the better ones. This particular plugin has several different customizations, as well. In the provided link below, it has examples of each customization and how it works.

It has demos included such as pick mode, standard mode, tweets gallery, and autoplay.

The setup itself is very basic. It uses jQuery files, CSS and HTML provided in the examples.

See the demo and code on how it works here.

Zedric Myers
Zedric Myers is a Web Designer for Beacon Technologies. After earning his degree in Advertising and Graphic Design, he spent 11 years with an advertising agency in Greensboro, NC where he was initially hired as a designer and transitioned to being a Web Developer.
By | 2016-11-18T14:24:41+00:00 December 3rd, 2012|Cascade CMS|Comments Off on jQuery Circular Image Gallery

A jQuery Plugin to Validate Checkbox or Radio Button Sets

There are many form validations available to use and each has their own unique features. If you have ever needed to validate checkbox or radio button sets this jQuery validation plugin can do just that. For instance, it can verify that at least two checkboxes must be checked.

This jQuery plugin goes beyond that option with more features and is easy to implement. See the demos and option to download the plugin here.

Zedric Myers
Zedric Myers is a Web Designer for Beacon Technologies. After earning his degree in Advertising and Graphic Design, he spent 11 years with an advertising agency in Greensboro, NC where he was initially hired as a designer and transitioned to being a Web Developer.
By | 2016-11-18T14:24:44+00:00 May 16th, 2012|Cascade CMS|Comments Off on A jQuery Plugin to Validate Checkbox or Radio Button Sets

DataTables with ListNav Integration

DataTables is a great jQuery plug-in if your site needs table integration with options. Once you have your data ready for this functionality, you can setup the integration fairly quick. For more advanced options it just takes a little more time to get what you are looking to achieve. There are configurable options such as filtering, pagination, sorting, jQuery ThemeRoller support and many more.

You can take it a step further with ListNav integration that allows a navigation bar to be added. This works great for a directory listing.

Click here to see the complete integrated example and code.

Zedric Myers
Zedric Myers is a Web Designer for Beacon Technologies. After earning his degree in Advertising and Graphic Design, he spent 11 years with an advertising agency in Greensboro, NC where he was initially hired as a designer and transitioned to being a Web Developer.
By | 2016-11-18T14:24:45+00:00 May 1st, 2012|Cascade CMS|Comments Off on DataTables with ListNav Integration

The Redesign Bug

We recently launched the Beacon site with a new design which included a handful of jQuery animation, many of which had replaced the the previous design’s Flash-intensive content. We have recently come across an issue with the jQuery library with some builds of IE7 and IE8 that resulted in an extensive trail of debugging. We concluded that it was a browser issue (even in different OS environments) that was only fixed by re-installing IE. Here I will outline the issue and the debug trail–and hopefully maybe even think up some potential fixes that weren’t explored when testing was originally performed.

The Issue

In IE7 and IE8 we found that refreshing the homepage would crash IE and sometimes handle restoring the tab, other times not.  Microsoft has acknowledged this error in an KB article.

Error Screenshots

Initial view of most common error displayed.

Error message that would periodically show right before the tab recovers.

Details of error.

Advanced error detail screen.

When tab is not recovered, this screen is shown. Had to repeatedly refresh until this error occurs.

Just-In-Time Debugger error found from a different machine.

The Debug Trail

  • Initial replication of issue in IE 8.0.6012 on one of the test machines using a Windows XP environment.
  • Attempted browser-configuration changes that might’ve caused issues including:
    • Privacy Settings
    • Security Settings
    • PrivateBrowsing
    • Add-Ons disabled
    • Just-In-Time Debugging (picked up from a slightly different error that was sent to me as a screenshot from Mark Dirks — last one on right shown above) Unfortunately not of these seemed to be the culprit.
  • Disabled JavaScript in IE altogether–which of course fixes it but not what we we’re aiming for. This confirms it is a JavaScript/jQuery related issue
  • Attempted using different versions from currently used (1.6.1) to most recently published version from jQuery site (1.6.4) – tried both compressed/uncompressed versions without any success.
  • Checked a  changelog of jQuery since version 1.6.1 onward for IE7/8 errors. *Anything related to these browsers I had checked out scripts for any instances of (CSS background-image in jQuery and other function calls)
  • One Google search led me to a site that reported changing the jQuery file name had corrected their similar mshtml.dll error—-not the case here)
  • Double checked the in-line JavaScript as well as .JS file functions dependent on the jQuery library contained no redirects or any instance of the window.location method Since the IE8 error that comes up sometimes on the test machine says the browser attempted to load more than twice) – the only instance of this I found is a comparison checking if ‘#beacon-video’ is in the URL and if so, it runs a function to scroll the Beacon video into view and sets the tabs display(css) values. The window.location value is never assigned anywhere.
  • Checked that there weren’t multiple instances of window.onload or jQuery(document).ready()
  • Ran the jQuery library file through a beautifier to get a better look at the pin-pointed trouble spot you found and checked for any obvious issues. Justin Klingman found that in the compressed library he could comment out the last half of the code which removed the crash so before ‘beautifying’ the code I had marked this position with a comment and looked in the region after the code was cleaned up.
  • Removed all other scripts from the page to see if those dependencies may have had an impact on the crash, but removing them all (including the JavaScript function calls in the body,) except for the jQuery Library. No difference, same crashing effect.
  • The only change that did successfully fixed the crashing tab to load was removing jQuery from the page, however, when the content of another root level page (the SEM pages) into the root default document, that loads/refreshes fine without crashing. The only difference between interior/homepage in terms of JavaScript is the presence of the homeScripts.js file and the inline function calls on the homepage. After further testing this, removing only homeScripts.js still crashed the tab on the homepage (unless jQuery was also removed) — All internal pages use the same copy of the jQuery Library and they don’t crash, so the exact source of what’s crashing the page/tab is still not clear to me.
By | 2016-11-22T18:07:35+00:00 October 13th, 2011|Web Development, Creative Design|10 Comments

The Benefits of Using jQuery

Recently I have had the opportunity to make really exciting and interactive web pages using jQuery. Before working on these projects I had very little understanding of jQuery and what all it could be used for. So I decided to do some research on what the benefits are of using jQuery over other applications such as conventional JavaScript and wanted to see what all I can build using it. Basically you can do almost anything with jQuery to make effects and animation on your site and still be SEO friendly and cross browser compliant.  But those aren’t the only benefits….

What is jQuery?

“jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.” http://jquery.com/

Benefits of using jQuery:

  • Search Engine Optimized – While search engines are getting better at being able to read content within some Flash, everything within jQuery is setup as text. This means it is completely readable to all the search engines, exposing all your keyword rich content.
  • Save Time – Five lines of jQuery are equivalent to 25 lines of conventional JavaScript code. This means smaller files and faster loading web pages.
  • Plug-ins – There are an abundance of plug-ins on the web that make creating special effects simple and fast for web developers.
  • Help? – With an abundance of plug-ins comes with an abundance of help. There is a large helpful support community on the web to help you quickly remedy any bug issues.
  • That was easy! – jQuery has easy implementation for web developers in comparison to other applications.
  • Cross Browser Friendly – jQuery is currently the most popular JavaScript library and works in all browsers.
  • FREE! – free, open source software.
  • Mobile Devices – jQuery is supported by any mobile device whose web browser supports JavaScript. A lot of mobile devices like iPads and iPhones don’t run Flash at all.
  • Simplifies AJAX
  • Wow Factor – Web developers use jQuery to make web pages more exciting, interactive, cleaner, and more user friendly. Make your users go WOW!

jQuery in action! A few examples of jQuery Usage

Keana Lynch
Keana Lynch is the Director of UX Design & Development at Beacon where she has provided leadership and consultation for over 35 Higher Education projects. She specializes in the analysis, design, and implementation of websites. Keana is very passionate about design and development strategies focused on user experience, accessibility, multi-device interactions, and technical best practices. Outside of work Keana enjoys spending time with her three dogs, hiking, kayaking and volunteering with local animal rescue groups.
By | 2016-11-22T10:57:29+00:00 May 24th, 2011|Web Development, Creative Design|Comments Off on The Benefits of Using jQuery
Load More Posts