Wait for Show to show

[wongadob]

I have an issue that I am really struggling to resolve. I have a mobile product that displays various pages by showing and hiding divs. Each page need to be generated when a page change happens, so I have a 'blank page' that contains a spinner. The header of the page is on show all the time and the pages appear below the header. All pages are hidden. The spinner page is set at highest z-index so it will always show above all other pages. so the process goes as follows messages pagespinnerconversation page<back is pressed>spinnerMessages page etc. That is a huge simplictication but is one of the paths. What actually happens is like this, going from conversation page back to list of message headers page The spinner is show (this is immediate)The page underneath is hidden and the new page show.All data is loaded via Ajax callThe data is formattedand the new HTML for the page created.the spinner is hidden and a nice shiney new page is displayed. The problem is that the spinner is not appearing before all the page changes happen.so in effect you start to see the page getting cleared and drawn for a while before the spinner is shown. infact sometimes it completes the entire operation before the spinner is shown and it gets hidden again before you ever see it, but you have witnessed the re-draw, I cannot do it as a call back in the show funtion of the spinner as each page has its own initialisation function and display function and I could be going from any one of 10 pages to any one of 10 other pages. If I put an alert immediately after the show spinner. Then it works fine I do not see any re-draw (as it has never got there) and the spinner shows perfectly. Is there any way to delay the code until the spinner is shown Thanks Here is my back function to give you an indication of what I am trying to do (bare in mind it is not normal 'back' as the system does not change HTML pages it all happens on one page so the back is in effect just storing a sequence of pages and poping them when back is pressed.

  showSpinner();  alert ("here");   if($('#contactpopup').is(':visible'))  {	  closeContactPopup();  }  backStack.pop();   i = backStack.length;  console.log ("Backstack length ", i)  if (i != 1)  {   x = backStack.pop();  }  else  {   x = backStack[0];  }  console.log ("page popped ", x)  switch (x['page'])  {   case 'grouplist':	initGrouplist();	break;   case "memberprofile" :	initMemberProfile(x['params']);	break;   case "companyfeed" :	initThreadHeaders();	break;   case "conversation" :	initConversation(x['params'], x['reply'], x['type'], x['sender'], x['returnFocus']);	break;   case "notifications" :	initNotifications();	break;     case "pmFromUser":	initPrivateMessageFromUserProfile(x['params']);	break;     case "groupfeed" :	initGroupFeed(x['params'],x['name']);	break;   case "privatemessages" :	initPrivateMessages();	break;     case "options" :	initOptions();   case "index" :	backStack.push(	{	 page : "companyfeed",	 params : 0	});	hideSpinner(lastFeedHeader);	break;   default:	break;  }}return true;}

The show spinner and hide spinner functions are as follows

function showSpinner(){var t = (($(window).height() - 50)/2)-16;var l = (($(window).width() - 50)/2)-16; var h = (screen.height-88);$('#spinloaderPage').css({'height' : h});$('#spinLoader').css({'left' : l,'top' : t});$('#spinloaderPage').show(); stopScroll();  console.log("spinner on");}function hideSpinner(id){var el = document.getElementById(id);startScroll();$('#spinloaderPage').hide();// setScrollTop(id);newSetFocus(el);setScrollTop(id); console.log("spinner off and focus should be set to ",id);}

Any help apprecatied Thanks

[justsomeguy]

I don't see why you can't use a callback. Make all of that code a callback.

  showSpinner(function(){    alert ("here");      if($('#contactpopup').is(':visible'))    {		    closeContactPopup();    }    backStack.pop();      i = backStack.length;    console.log ("Backstack length ", i)    if (i != 1)    {	 x = backStack.pop();    }    else    {	 x = backStack[0];    }    console.log ("page popped ", x)    switch (x['page'])    {	 case 'grouplist':		  initGrouplist();		  break;	 case "memberprofile" :		  initMemberProfile(x['params']);		  break;	 case "companyfeed" :		  initThreadHeaders();		  break;	 case "conversation" :		  initConversation(x['params'], x['reply'], x['type'], x['sender'], x['returnFocus']);		  break;	 case "notifications" :		  initNotifications();		  break;   	 case "pmFromUser":		  initPrivateMessageFromUserProfile(x['params']);		  break;   	 case "groupfeed" :		  initGroupFeed(x['params'],x['name']);		  break;	 case "privatemessages" :		  initPrivateMessages();		  break;   	 case "options" :		  initOptions();	 case "index" :		  backStack.push(		  {		   page : "companyfeed",		   params : 0		  });		  hideSpinner(lastFeedHeader);		  break;	 default:		  break;    }  });

function showSpinner(callback){  ...  callback();}

[wongadob]

I tried putting all the other code in a callback and it still did not display the spinner first. So I have tried using the visibility flag. The thing is I need to know when it has been actually rendered to the screen. For some reason it does not render to the screen (i.e. it actually is shown) before the callback happens. Or does not appear to. As I say if I put an alert straight after the show. if does alert and the correct screen is shown. If I dont have the alert it often never even shows the spinner. I believe because it is thinking its visible (because JQuery has told the system to render it, but the system has not got round to it yet) and so it marches on and makes other changes which must get rendered quicker (god knows how). Interestingly if I put something like this $("spinnerPage").show(200,function(){rest of the code}. It does a slow fade up of the spinner page. i.e. no way its 200ms more like about 2 seconds! and you can visibly see the screen updating.(and it has jumped to the top (ScrollTop zero) before the fade starts). If it is any help this is under blackberry webworks also using KnockoutJS for DOM manipulation. It is wrecking my head, I must have tried about 50 combinations of options. Currently I am using the visibility flag as I read somewhere that display: none can cause issues. But obvioulsy with visiblity I cannot use the show function and hence there is no callback solution on that one. That does not work either tho' Again if I put an alart in immediately after the ('#spinloaderPage').css("visibility","visible"); like so

  $('#spinloaderPage').css("visibility","visible");   Alert("here");     console.log("spinner on in back function");   if($('#contactpopup').is(':visible'))   {	   closeContactPopup();   }

** The closing the contact thing is there just to show where it exists in the code above. ** Result is it shows the spinner page fine and does not go to the top first and does the transition behind the spinner. If I remove this alert line then it does go to the top first, never shows the spinner and the whole transition mess is visible rather than hidden behind the spinner. agghhhh!

Edited October 4, 2012 by wongadob

[dsonesuk]

Have you looked to, tried jquery .queue() ?

[wongadob]

I have found a way around it. Mainly by delaying the calling of the next function by putting that on a timeout.

[es131245]

sometime settimeout doent worklike in slidetogglein this case you canslideToggle(500,function(){//done after finish