Been working on this site for a few days: http://dev.diazcooper.com/AFX/product-comparison/chart Just wanted to get some feedback on it, the rest of the site is still a WIP, but I consider that one page to be "done". I've got a few jQuery-powered scripts, clicking on either of the "50 Point Search" links will dropdown a content box under the page. The one in the first column is a darkish blue, and the second column is a light blue. Then there's a modal window that'll open if you click on any of the "View Sample" buttons and also another modal if you click on the "Platinum Bonus" button.
You don't need jQuery to do the drop down, and a simple exposure of the containing div would work. You could even do that using just CSS but the whole concept itself is awful. No one would know the drop down occured since it happens below the screen display but since this is only a practice for you learning jQuery, baby steps. The lightbox second thing was very slow on my slow box. Don't get so enamored with explosions and pretty blinking lights.
Not to be super harsh, but you should really rethink your use of jQuery. Most of your content is below the fold on a std screen resolution, yes you slide down the jQuery content even further below the fold. jQuery would be better served launching a popup modal in this case, or have a CODA slider effect that makes your jQuery POP. From a technical standpoint, 976 lines of code is TOO much for relatively simple the site is. I understand that this is a WIP, however your backend seems pretty inflated. hth
I do agree that the slideout pushes content even further down the screen, unfortunately, client insisted that the layout be the way it is. I originally wanted to have it as an individual page, or as a modal, but then they wanted to also have the View Sample links be a modal, and having modal windows opening new modal windows sounded like a worse idea than the slideout they agreed on. They wanted the modals to load PDF documents actually in the beginning but ended up agreeing on loading (ridiculously large) images of the PDFs instead. If I were to make it pure CSS, I'm guessing you mean to just have it pop open instantly right? Also, second lightbox is slow on purpose, I can speed it up. The template file and JS for that page is actually only 250 lines, the rest is what Drupal adds in and generates. Basically I'm kind of stuck with the current way the content is displayed as that is the client's desire (and we all know client always knows best ). Any recommendation on improvements I could do to the setup (with changing the way it works not being an option)? I'll make the modals open faster and make the screen re-focus downward so that the user knows that the slider opened. Thanks for the feedback, I appreciate it
It's not the worst layout actually. I don't know whether you've changed that since getting the first feedback -- but at least Chrome jumps to the 50 points search text once it has unfolded... that seems to work for me. Perhaps you could use a small image to indicate that the link does not lead to a new page, but instead contains inline content... what about a small arrow? I don't think it's too flashy/blinky... but maybe you'd like to change the text color for the third product to the same used for the other two? Anyway, looks like a good start for now. Marcus
I changed the modal speeds and made it scroll down to the top of the slideout yea. The layout was entirely done by the design team and unfortunately I cannot really change anything, my requirements are to meet the design as closely as possible since it's the one that was approved by client. I like the arrow idea, I'll have to talk to the art director about it, thanks Thanks for the continued feedback guys, it's helping a lot