SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry asyncronous style.display change

    Strange as it seems, I always thought A would be called before B (see below.)

    Code:
      a: document.getElementById('somediv').style.display = 'block';
      b: doSomething();
    I have built a calendar object, which generates a small month calendar for date selection, and in the first instance it creates a day view in another area.

    Now I have links which tell my calendar object to switch between Day, Week and Month view.

    Because of a noticable and obvious lag between clearing all elements from the parent containers, and then re-writing the new data, I decided to create a loading notification.

    So, thinking logically, I put some code that set the style.display to block of an div when ever an action occurs that requires the calendar object to render.

    At the very top of any code that can/will take some time to load, I put my code above, and it seems that line a is actually called when b is complete.

    The following code will explain better:

    HTML Code:
    <li><a href="javascript:void(0);" onclick="switchViews(this);">Day</a></li>
      <li><a href="javascript:void(0);" onclick="switchViews(this);">Week</a></li>
      <li><a href="javascript:void(0);" onclick="switchViews(this);">Month</a></li>
      <li><a href="javascript:void(0);" onclick="switchViews(this);">Summary</a></li>
    Code:
      function switchViews(item)
      {
      	cal.toggleLoader(true);
      	cal.CalendarEventType = item.innerHTML;
      	
      	switch(item.innerHTML)
      	{
      		case 'Day' :
      		
      			cal.selectWeek = false;
      			cal.selectMonth = false;
      		
      		break;
      		case 'Week' :
      		
      			cal.selectWeek = true;
      			cal.selectMonth = false;
      			
      			var tempDate = new Date(cal.selectedDate);
      			while(tempDate.getDay() != 0)
      				tempDate.setDate(tempDate.getDate()+1);
      			var weekNo = cal.getWeek(tempDate.getFullYear(), tempDate.getMonth(), tempDate.getDate());
      						
      			cal.selectedWeekNumber = weekNo;
      			cal.selectedWeekDate = tempDate.setDate(tempDate.getDate()-6);
      					
      		break;
      		case 'Month' :
      
      			cal.selectWeek = false;
      			cal.selectMonth = true;		
      		
      		break;
      	}
      	
      	cal.render();
      }
    As you can see, cal.toggleLoader(true) is called before anything else in that block, yet it seems that it is only called when it reaches the end of cal.render where for testing purposes I have put a setTimeout to run cal.toggleLoader(false).

    Am I missing something?

    if I remove the setTimeout, it get a delay and then new information displays and many users would find this extremely annoying if they don't know whats going on.

    TIA

    Gav


  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry bttt.

    Anyone?


  3. #3
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That behavior seems really strange but it's hard to give a response without more of the big picture, sorry Gav.

  4. #4
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    in the code above, you can see the code that does the work.

    cal.toggleLoader(true);

    this is basically doing

    document.getElementById('foo').style.display = 'block';

    then I have some stuff going on afterwards, and then cal.render() is called which has more time consuming work going on and finally at the very end of cal.render()

    cal.toggleLoader(false) is called which is

    document.getElementById('foo').style.display = 'none';

    I would provide code but unfortunately as I stated in another post, I can't due to it being internal material (my contract unfortunately).



Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •