Dynamic Mobile Swipe Content

See more:

CSS

HTML

Mobile

jQuery

Hello all I am designing a mobile website and am pretty inexperienced in mobile jQuery, so if you can all be kind enough to help me out. If I could get his part of the page to refresh when you swipe. This div contains a product catalog code within so that the products change when ever you refresh the page. What I would like to be able to do is have one specific div tag in my page to refresh upon making a swiping motion.

<div data-role="content" id="colorme">

<!-- Start:Here is where the product come up-->
<!--START: ITEM_TEMPLATE_0-->
<div style="padding: 1em .5em 1.5em .5em; text-align:center;" id="bg" >
    <div style="background-color:#ffffff; margin-removed .5em;"> <a href="product.asp?itemid=[catalogid]"><img src= "/thumbnail.asp?file=[THUMBNAIL]&maxx=200&maxy=0" width="200" alt="[name]" border="0"></a>
    </div>
    <div style="padding-removed.5em;" class="name"> [name]
    </div>
    <div>
    <a href="product.asp?itemid=[catalogid]"><img src="images/btn-more-details.png"></a>
    </div>
</div>
<!--END: ITEM_TEMPLATE_0-->
<!-- END: stop products-->


  </div>

  <div data-role="footer">
    <h1>My Footer</h1>
  </div>
</div> 

Thanks a bunch!

You can view the website here:

kitchenova.com/mobile