jQuery Forum

1. $(function() {
2.     $('#sample').slider({orientation:'vertical'});
3. });​

1. .ui-slider {
2.     position: relative;
3.     height: 300px;
4.     width: 20px;
5.     line-height: 20px;
6.     border-radius: 2em;
7.     background: #CCC;
8.     margin-left:50px;
9. }
10. .ui-slider-handle.ui-state-default {
11.     display: block;
12.     cursor: move;
13.     height:100px;
14.     margin-left:4px;
15.     margin-top:0.2em;
16.     background: #333
17. }​

<a class="challengeBtn changePage" data-load="task-1.html#task1-page" href="#">Take the xxxx Challenge</a>//end of html

var pageNavigator = function(link){
 var pageLink = link,
 newpage = pageLink.attr('data-load');

 pageLink.on('click', function() {
 $.mobile.changePage(newpage, {
 reverse:false,
 changeHash:false,
 showLoadMsg: false
 }) 
 } )

}

//custom events
$("div[data-role='page']").on('pageshow',function(){
 pageNavigator($('a.changePage'));
})
//overrides
$(document).on("mobileinit", function(){
 $.mobile.linkBindingEnabled = false;
 $.mobile.ajaxEnabled = false;
 $.mobile.autoInitialize = false;
});
using this function i am getting big issues,
 
 
when i click on the first link on index page, it loading it self,
 not loading the "task-1.html#task1-page"
 
once the same page loads, if i click again it takes me the send 
page ('task-1.html#task1-page')
 
as well clicking on the link(index page), i can see the 
second page as flickering view and go for hidden! 
when the index page loads(this is no need)
 
 
any one advice me the right way to make index page and 
click on further link to load appropriate pages without any 
flickering and pre-fetchings? so let me app became lightweight?
 
thanks in advance.