I finished the IntroPage and it currently looks like this,

There are 3 buttons at the bottom for navigation: “previous”, “next”, and “skip to home.”

You can also swipe left and right to change the page. I initially wanted the slide up and down, since that is the style that Tim likes, but jquery mobile does not support slide up + down.

Also, I decided to make this with jquery mobile, and not just jquery, like the previous version, because this would make it more tablet compatible (and I won’t have to worry about the sizing and this also has multi-touch support, e.g. “swipe” motion).

From the blog ssuksawat » cs-wsu by ssuksawat and used with permission of the author. All other rights reserved by the author.

I finished the IntroPage and it currently looks like this,

There are 3 buttons at the bottom for navigation: “previous”, “next”, and “skip to home.”

You can also swipe left and right to change the page. I initially wanted the slide up and down, since that is the style that Tim likes, but jquery mobile does not support slide up + down.

Also, I decided to make this with jquery mobile, and not just jquery, like the previous version, because this would make it more tablet compatible (and I won’t have to worry about the sizing and this also has multi-touch support, e.g. “swipe” motion).

From the blog ssuksawat » cs-wsu by ssuksawat and used with permission of the author. All other rights reserved by the author.

I am now working on making the introduction page for our Orantes Project.

I had done two versions of the IntroPage (as I call it) and showed it to Tim, to see which one he prefers.

First one is the basic jQuery Mobile page with left, right, and home buttons to navigate between pages, like this:

The second one is the slide up-down one, like this

Tim said he prefers the sliding one, and he gave me a website that he likes, http://bttls.com/, which has button you can press to slide down or up to the previous or next page, respectively.

So I am now working more on the sliding version IntroPage. And a few days ago Tim also sent out the photos for both the Screensaver and the IntroPage. Unfortunately there have been so many events going on last week so I have not had the chance to continue to work on this much, but I will definitely have more stuff to show Tim tomorrow in class and I will update the blog again very soon.

From the blog ssuksawat » cs-wsu by ssuksawat and used with permission of the author. All other rights reserved by the author.

I am now working on making the introduction page for our Orantes Project.

I had done two versions of the IntroPage (as I call it) and showed it to Tim, to see which one he prefers.

First one is the basic jQuery Mobile page with left, right, and home buttons to navigate between pages, like this:

The second one is the slide up-down one, like this

Tim said he prefers the sliding one, and he gave me a website that he likes, http://bttls.com/, which has button you can press to slide down or up to the previous or next page, respectively.

So I am now working more on the sliding version IntroPage. And a few days ago Tim also sent out the photos for both the Screensaver and the IntroPage. Unfortunately there have been so many events going on last week so I have not had the chance to continue to work on this much, but I will definitely have more stuff to show Tim tomorrow in class and I will update the blog again very soon.

From the blog ssuksawat » cs-wsu by ssuksawat and used with permission of the author. All other rights reserved by the author.

I now have the working screensaver (a slideshow with art images).

So I have this little script that we would have to put in all of our pages so that after some idle time (now set to 15 sec just for testing), it would go to the screensaver

$(document).ready(function(){
    var timeout;
    $(document).on(“mousemove keydown click”, function() {
        clearTimeout(timeout);
        timeout = setTimeout(function() {
             window.location = “./screensaver/screensaver.html”;
        },  1 * 15 * 1000);
    }).click();
});

I’ve only put this script in the “homepage” for now just to test that it works. And in my screensaver.html, I have this script,

$(document).ready(function(){
    $(document).on(“mousemove keydown click”, function() {
             window.location = “../index.html”;
    });
});

which will take us back to the homepage if there’s movement.

When I showed it to Tim, he said he likes how it looks. There’s also the possibility of putting videos as the screensaver too. After some reading i found that to put video in the slideshow, all I have to do is download jquery video plug-in and just put it as element of the slideshow (just like images). But I also want to do something like this, if we have really nice videos to show http://tympanus.net/Tutorials/BigVideoSlideshow/

But this is how the slideshow look right now,

Tim also gave me another feature to work on. So instead of “movement” would send us back from screensaver to homescreen, it would go into some kind of “introduction presentation” slideshow(?). So basically,

[idle] -> ScreenSaver -> [movement] -> IntroPage (user can skip) -> HomeScreen

I actually had some free time this afternoon, so I was working on this IntroPage and I think I got a lot done. I found a plug-in that will make it look similar to the Nike website. So far I got the background and textbox of each slide working, but I have problem positioning the second image on top of the background.

Will update again when I get this IntroPage fully functioning…

From the blog ssuksawat » cs-wsu by ssuksawat and used with permission of the author. All other rights reserved by the author.

I now have the working screensaver (a slideshow with art images).

So I have this little script that we would have to put in all of our pages so that after some idle time (now set to 15 sec just for testing), it would go to the screensaver

$(document).ready(function(){
    var timeout;
    $(document).on(“mousemove keydown click”, function() {
        clearTimeout(timeout);
        timeout = setTimeout(function() {
             window.location = “./screensaver/screensaver.html”;
        },  1 * 15 * 1000);
    }).click();
});

I’ve only put this script in the “homepage” for now just to test that it works. And in my screensaver.html, I have this script,

$(document).ready(function(){
    $(document).on(“mousemove keydown click”, function() {
             window.location = “../index.html”;
    });
});

which will take us back to the homepage if there’s movement.

When I showed it to Tim, he said he likes how it looks. There’s also the possibility of putting videos as the screensaver too. After some reading i found that to put video in the slideshow, all I have to do is download jquery video plug-in and just put it as element of the slideshow (just like images). But I also want to do something like this, if we have really nice videos to show http://tympanus.net/Tutorials/BigVideoSlideshow/

But this is how the slideshow look right now,

Tim also gave me another feature to work on. So instead of “movement” would send us back from screensaver to homescreen, it would go into some kind of “introduction presentation” slideshow(?). So basically,

[idle] -> ScreenSaver -> [movement] -> IntroPage (user can skip) -> HomeScreen

I actually had some free time this afternoon, so I was working on this IntroPage and I think I got a lot done. I found a plug-in that will make it look similar to the Nike website. So far I got the background and textbox of each slide working, but I have problem positioning the second image on top of the background.

Will update again when I get this IntroPage fully functioning…

From the blog ssuksawat » cs-wsu by ssuksawat and used with permission of the author. All other rights reserved by the author.