So this week I took a step back from jQuery Mobile to create a spike for the project. Sompop and I were tasked to create a starting point for the content frames or what I will refer to as the Article Viewer for the app.
We received some guidance with regard to concept from the WAM project leader, so our goal was to bring the concept to life. Since this wasn’t a jQuery Mobile specific task it does not include the mobile library.
The first step was a basic CSS and HTML template that was static and looked like the concept with no functionality. Here is a basic layout sketch, his example was obviously much more attractive however the core concepts are there.
So that was relatively easy to create in HTML/CSS, the only task was keeping the images in a static location (this was done with the CSS attribute “position: fixed”.
The next step was to add some functionality, how can we bring this to life! the first issue was having the ability to display many images in the image container. There are multiple ways that this can be done, one of which would be dynamically loading the images based on what link was clicked. This solution however would have potential for slow response time while the used was trying to view the images. Another solution i thought of was to have all the images displayed in a frame, but experience has taught me that use of frames is not a good thing. So my goal was to simulate a frame without actually using a frame! to accomplish this I essentially used the Image container as a window to underlying divs. here is the concept drawn out:
This was accomplished by simply nesting the divs inside of the image container div and applying the “Overflow:Hidden” CSS attribute. I found this to be a nice solution because it essentially loads all the images in advance creating a seamless transition. The next step was how to make these transitions, which is surprisingly easy with the jQuery animate function.
The transition is ended up deciding on was a slide, i accomplished this by animating a change in the margin. Essentially multiplying the image index in its respective row with the width of the images, the code looks like “$(this).animate({ “marginLeft” : -i*imageWidth+”px”}, 1000) ” what that does is animates a CSS change of the margin over the course of 1000ms or 1 second. this worked flawlessly, regardless of what image the user selects the animation always takes 1 second and is smooth based on the jQuery animate function. the same concept was used for rows except the CSS attribute modified was the marginTop.
Upon use it became noticeable and relatively irritating that when you switched rows it remained on the last viewed image, which i felt was an annoyance. To fix this I added a line of code that reset all rows margin-left to 0 except the one being view. This was a challenge since the rows programmed dynamically, however after looking into jQuery selectors this didn’t take long at all. I had issues with the :not selector working so I came up with an alternative method which was to modify all rows with and index greater than or less than that of the selected row. The code looks like this “$(imageRow:gt(rowIndex),imageRow:lt(rowIndex)).animate(…);” this also worked seamlessly and in conjunction with the other animation. It actually created an interesting effect showing the rows resetting and the newly selected row being show and moving depending on the image selected.
Regardless of whether or not this is used in the final stage of production I had quiet a few take away’s. That wraps up my recent spike contribution to the git under “master/Spike/contentViewerConcept“
From the blog itsJoe's Blog » cs-wsu by itsjoeyoung and used with permission of the author. All other rights reserved by the author.
