jQuery Forum

Hi All,

Recently I was working on one mobile web application at client place. and had requirement to show data in metro/WP7 style layout.
Here is the link to the demo page. check out on your mobile device.

thanks.
Project9

Hello,

Recently I was working on jQueryMobile and had one requirement where I want to use the data-dom-cache="true" attribute for jQueryMobile page. I need the DOM to be cached but at the same time I wat the DOM to be expired in some time. for example 2 hours.

I end up creating the new attribute dom-cache-expires="120" and Here is the function to handle this scenario.

-> if the page is visited and time exceeds the dom-cache-expires minutes, it will make server request. or simply reloads the page.
-> if there is no attribute on page do nothing and behave normally.
-> if page is visited under the defined schedule (after first visit) , it will not make server request and cached DOM is referred.


HTML for page having this attribute.

1. <div data-role="page" id="recent" data-dom-cache="true" dom-cache-expires="120">

JS.  should be loaded after jQueryMobile js , globally.

1. $("div:jqmData(role='page')").live('pageshow', function () {
2.     if ($(this).attr('dom-cache-expires')) {
3.         var dt = new Date();
4.         if ($(this).attr('dom-cache-at')) {
5.             var domdt = new Date($(this).attr('dom-cache-at'));
6.             var min_diff = (dt.getTime() - domdt.getTime()) / 60000;
7.             if (min_diff > $(this).attr('dom-cache-expires')) {
8.                 $(this).attr('dom-cache-at', dt.toString());
9.                 window.location.reload(true); //OR
   
10.                 console.log('***make server request***');
    
11.             }
12.             else {
13.                 console.log('***no request***' + min_diff);
    
14.             }
15.         }
16.         else {
17.             $(this).attr('dom-cache-at', dt.toString());
18.         }
19.     }
20.     else {
21.         console.log('***no expired attribute***');
22.     }
23. });

Hope this helps.
Project9

Hi All,

I have developed a web using jQuery mobile a4.1 which has following things to notice:
1. Passing Querystring Parameter
2. Dynamic content
3. Leveraging jQuery Mobile Ajax Navigation framework
4. URL can be bookmarked and DOM is generated how it should be.

I have seen lot of people asking question about above topics ( I am one of them)

So I wrote the article explaining above things with code example.

click here to visit Live Demo Site

click here to read the article

thanks
Project9

Hi All,

I have created one page having two image sliders horizontally.
its tested on iPhone and iPad , works well. though browser fallback needs to be developed.

I checked different posts in this forum about image carousal, but when i test it on mobile devices, its very slow and animation/sliding is not as smooth as desired.

I also tried creating one as explained here in my previous post.

this particular approach does not have animation but sliding is easy.
this kind of image slider can be found on Bing App and weather channel app on iPad.

check Demo page at URL below , (just a POC , but works well.)

Demo Link

thanks
Project9
"jQuery is addictive"

Hi,

I was working with jQuery mobile and had thought in my mind to create some sort of UI to make server request.
the UI looks like(i tried!!) Twitter app or facebook app refresh style.

I have demo running, which uses the jQuery UI drag to accomplish this.
Note that this is only proof of concept, UI is working but there is no server call.

try it on mobile device. I have tested it on iphone , ipad.

click here to see Demo

screen shots:





Let me know what you think.
thanks
Project9

Hi,

Recently I was working on jQuery mobile and thought of creating a control that looks similar to the one on iphone while you go to app store.

since jquery moblie supports touch events, I optimized slider script to support swipe left-right events.

Test swipe left and swipe right events on following URL. it works grate on mobile devices.
However sliding easing is not smooth. I'm sure any jQuery master will modify script and make it work properly.

Here is the test link
Demo : jQuery Mobile - Slider control

ScreenShots from my iPhone 4:





thanks
Project9