In partnership with design agency Firebox Create, we recently launched our latest ecommerce-powered website for NAAS Ltd here in Leicester. NAAS provide a number of services from training and installation through to actual sale of units and components and wanted a site that covered all areas. Our ecommerce package was the ideal solution as it includes not only a complete end-to-end online retail system but also a flexible content management system (CMS) for the non-ecommerce aspects of the site. All of this is skinned by a completely bespoke design created by Firebox Create.

The new site is now up and running and taking orders and we are assisting NAAS with a number of online marketing features including data feeds to Google Products and email newsletters.

Visit the NAAS site here

We have been wrestling with a problem for a while now and coming up with lots of creative solutions.  But it has always nagged at me that there must be a simple solution, there's always a simple solution right!!!

The Problem...
As we all know ASP.NET has one form per page.  This is fine except when you have a number of different actions that can happen on a page.  For instance we have one for that has a login section at the top, a signup for our newsletter in a side menu and could easily have registration or email forms in the main content.  We have users that enter in their login details hit enter and find they are take to the newsletter signup page!  This is because the first button that is in page gets the event. 

So how to get the right event triggered when the user presses the enter button?

The Solution
Having tried sorting this using javascript, jQuery and any other number of creative solutions the answer finally came via a post on forums.asp.net - use a panel!  Panels are usually used for grouping controls together so they can be shown or hidden en mass, but they also provide within that grouping some default behaviours in particular DefaultButton.  By setting the default button the behaviour of the enter key for input boxes can be set to a particular button or link button.  Tada

<asp:Panel ID="Panel1" DefaultButton ="LinkButton1" runat="server">
   <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
   <asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
</asp:Panel>

Just one final adendum....  I found that in some cases hitting enter would not submit the form.  This is down to browser behaviour and what type of button and how many form fields you have in the form.  To get a particular input box to submit a button you may need to add the following code into the page_load code behind

TextBox1.Attributes.Add("onkeydown", "if(event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('"+Button1.UniqueID+"').click();return false;}} else {return true}; ")

While putting together (cutting up into XHTML/CSS) the new design for the Goldsmiths website, which we are currently building, I decided to use jCarousel Lite for a product gallery. This light-weight version of the well known jQuery plugin jCarousel, allows for the base functionality of the full blown plugin without the additional overhead which allows you to do almost anything with the full version.
Although the difference in size could be considered negligible with jCarousel minified being 13.8kb and jCarousel minified being 2.32kb, with the advent of Google Caffeine those precious kb could be vital in gaining that extra spot in the rankings.

So, I set about using jCarousel Lite and found it very simple to install in the website and within minutes I had my carousel rolling with it's auto scrolling, it was great. I continued to play with it whilst styling the elements and noticed a few things which might not be considered a big deal but irked me all the same which were that:

1. While having the auto scroll active and manually scrolling through elements using my next and previous buttons the auto scroll would just kick in (the timeout would trigger it) and move me on another element, or back one.
2. When increasing the amount of elements which scroll, using the scroll variable to 3+ with circular motion being set, upon getting to the first or last item it would suddenly jump (pop) along an item or two, thus making the circular motion un-smooth.
3. Similar to the above when scrolling 3+ elements per scroll with circular motion it would sometimes scroll through to the incorrect item (depending on the amount of items I had in place).

Upon finding these issues I decided to go about fixing them, so into the plugin I went, with high hopes and a fist full of jQuery knowledge to help me on my way.

The first issue was a piece of cake to fix, so the timer was clearly not resetting when I chose to manually scroll, so I simply told it to do just that by storing the timeoutID and clearing it when go is called to scroll and setting it again when the scroll has completed.

Upon fixing the first issue I moved onto the others, quickly pinpointing the problem to be when the carousel loops back on itself with the circular functionality. Looking into this section of code (the go function) it was clear that there was something wrong with the math involved as the current element was not taken into account when choosing the position it should jump to in order to prepare for the next scroll (issue 2). So I had a play with this and after a few tries I got it working, and upon testing it with several variations of scroll count (1-5) I concluded that it was issue 2 was now fixed.

I finally moved onto issue 3 which was contained besides issue 2 (as the jump position and element to scroll to are setup at the same time), which again was a case of altering the math in order to take into account several other elements, which again included the current element. So i made some changes and tested out again on several variations of scroll and concluded that issue 3 is now also fixed.

Below is the difference in code for issues 2&3.

jCarousel Lite Original:

jCarousel Lite Fixed:

So if like me you get irked by little annoying bugs as are demonstrated in jCarousel Lite, then you can download jCarousel Lite-Fixed from below, which includes the fixes above. And if you fix it in a better way or find that my changes don't 100% fix the bugs/create new ones then let us know.

JCarousel Lite 1.0.1 Fixed - uncompressed - minified - packed


POSTED BY: Henry Ruhl