One of the clients tested the article viewing concept and had a few suggestions:

The first suggestion was only having a fixed footer and removing the header as well as the previous and next buttons above the article. This was implemented with relative ease, the only issue was the footer which would disappear whenever a function was called that did animation. I learned that this is a default setting for jQuery mobile when you make the footer fixed.
Here is the code for the footer div so that it didn’t move when an animation or click was executed:

<div data-role=”footer” data-position=”fixed” data-mini=”false” data-tap-toggle=”false” class=”ui-footer ui-bar-a ui-footer-fixed slideup” id=”footer” role=”contentinfo”>
</div>

Then i just added the home button, the previous button and the next button. In place of the old buttons I placed the title of the current chapter in a header tag.

The second suggestion which was a solution to a problem in the design of the scroll to switch focus concepts. If there is no where to scroll the user can’t change focus and therefor can’t view the other images. This suggestion was a touch the paragraph to execute the animation and focus changes. This was a very simple and elegant solution; all I added was an if statement that was essentially if the page is not scrolling implement a click function on the p tag to execute the same focus change functions. However in the else statement I also added a function that would allow the clicking on the p tag but it was implemented by scrolling the page, not directly changing the focus. 
In essence: If(no scolling){ p.click -> execute focus change functions} else{ keep scroll functions p.click -> scroll to the proper section}

This worked without any issues and I was a relaly big fan of the touch to change focus solution!
Here is a screen shot of the new setup!

Until next time!
-Joe

From the blog itsJoe&#039;s Blog » cs-wsu by itsjoeyoung and used with permission of the author. All other rights reserved by the author.

The content viewer is referred to the article viewer now, there have been some additions and removals since the last update!
Here is an outline:
A link to the next article or chapter at  the top of the paragraphs.
New focus on paragraph div that is behind the paragraphs.
Scroll to change focus on image and paragraph.

Here is a screenshot of the final 0.1 product:

Linking was as simple as creating simple jQuery mobile buttons buttons.

Creating a “focus” on the current div per request of the client was a little more interesting.
So I didn’t want to create a simple function that would change the background color of the current paragraph tag because that isn’t elegant and just didn’t seem appropriate! So I created a stand alone div that would move and change height based on the height of the paragraph it was supposed to be highlighting! I also places this div behind the paragraphs so it wouldn’t interfere with the font settings. All of this was accomplished with the animate function and basic CSS selectors and attribute functions for jQuery. Here is a screenshot showing the function in action!

Here is the function that accomplishes the animation:

function animateActive(){

$(‘#active’).stop().animate({‘top’ : $(‘#article-display p:eq(‘+currentRow+’)’).position().top+10+’px’,

‘height’ : ($(‘#article-display p:eq(‘+currentRow+’)’).height()+20)+’px’}, animationTime);

}

The #active div is an absolutely positioned element that gets it height and width from the p attributes. it is completely dynamic with regard to sizing and position.

The other interesting part of this version is the trigger for that function; the function is activated by scrolling! the initial proff of concept for this was not a viable option because I created the function to animate based on when the top of the page passed the top of the P tag, this doesn’t work for sections that are  a the bottom of the page so I created the following function:

$(window).scroll(function(){

if($(window).scrollTop() == $(‘.ui-page’).height()-window.innerHeight){ //potential null value if numRow does not divide nicely into the page height-windowInnerView

currentRow = numRow-1;

Uncaught ReferenceError: numRow is not defined (repeated 2 times)

animateActive();

slideY($(‘#row-wrapper’), -currentRow*imageHeight, animationTime);

}

else if(currentRow != Math.floor(($(window).scrollTop())/scrollSwap)){

currentRow = Math.floor($(window).scrollTop()/scrollSwap);

animateActive();

slideY($(‘#row-wrapper’), -currentRow*imageHeight, animationTime);

}

});

From the blog itsJoe&#039;s Blog » cs-wsu by itsjoeyoung and used with permission of the author. All other rights reserved by the author.

There was a minor issue with animation speed which we attempted to remove, the new page viewer also implements 2 new functions for specific pages.

Attempting to improve performance in only kiosk pro’s browser consisted of removing opacity from the animations. This made a very minor difference with regard to sluggish animation. The animation speed works fine in other browsers on the iPad which leads me to believe this is indicative of an issue with kiosk pro. However removing the opacity will remain in the application even with the negligible performance enhancement.

the two new functions added were from the main page and chapter viewing page:

Main Page:
The primary addition here was the combining of the screensaver function with the main page, it is not sure yet if this will make it to release.

Chapter Viewer:
per request of the Worcester Art Museum we implemented a menu for the chapters. This was done using jQuery Mobile’s built in grouped buttons. These buttons now animate the page viewer to the respective preview. Example: if chapter 2 is clicked the application will animate to the chapter 2 instantly for quick access.
Here is a screenshot:

That wraps up the additions and modifications to the page viewer, until next time!
-Joe

From the blog itsJoe&#039;s Blog » cs-wsu by itsjoeyoung and used with permission of the author. All other rights reserved by the author.

So the page view has made it into the final production! The goal with the page viewer is to have it function as the main menu for the user to access the content.
With this acceptance into the final product and detailed requests from the art museum we tailored 0.2 to fit the requirements.
First off the project will consist of a main menu and sub-menus:
The main menu will consist of 3 links to sub-menus:

1. “Story of the Orantes”
2. Photo Galley
3. Activities

Story of the Orantes Sub Menu:

1 ARCHAEOLOGY
2 WHAT ARE ORANTES?
3 ORANTES IN THIS EXHIBITION
4 HISTORY OF ORANTES AT THE MUSEUM
5 MATERIALS AND CONSTRUCTION
6 CONSERVATION
7 TECHNICAL AND SCIENTIFIC ANALYSIS OF THE WORCESTER ORANTES
8 WHY IS THE HEAD MISSING?

Photo Gallery is a direct link

Activities sub menu:

1 COLORING
2 PUZZLE

The sub-menu links will go directly to other groups applications.
With the new specifications for the application we removed all dynamic content and buttons for the menus and replaced the with images.

Here is a screenshot of the “main menu”

Until next time!
-Joe

From the blog itsJoe&#039;s Blog » cs-wsu by itsjoeyoung and used with permission of the author. All other rights reserved by the author.