Back To Website Design Forum

Internet Explorer 8 and 9 locks up while resizing window

  • ScottG
  • Proficient
  • Proficient
  • No Avatar
  • Joined: Jul 06, 2010
  • Posts: 260
  • Status: Offline

Post February 22nd, 2012, 1:48 pm

Due to the nature of the project I CANNOT show the site to the public nor have people access it.
With that said I'd like to add I LOVE FIREFOX!! so to anyone who post just use Firefox I wish I could but it is mandatory that this site work in IE8 or higher.

This of far has happened on two machines one running IE8 and mine running IE9 both system are powerful machines. The issue I am having is once the page fully loads and you grab the edges or corners of the window and scale it it will scale the first time ans usually very slow about doing so but when you try to scale again it will lockup IE to the point where you have to wait about 5 to 10 minutes for IE to recover and that is on my machine.

I get no Javascript errors and i have debugging on and get nothing from that. If anyone has any ideas on what could be causing this please let me know
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post February 22nd, 2012, 1:48 pm

  • ScottG
  • Proficient
  • Proficient
  • No Avatar
  • Joined: Jul 06, 2010
  • Posts: 260
  • Status: Offline

Post February 23rd, 2012, 1:47 pm

I just spent all of today so far trying to debug the code to see what may be causing the issue and what I've come across so far is in one of my AJAX calls. The AJAX call gets a rather large Unordered List from a php file. PHP file was used because to the complex nature of the List. The reason behind this is too make a folder tree with a right click menu.

Now normally I would NOT have used AJAX for this type of operation but this is what the client wanted And i tried to talk them out of it but they insisted.

What the PHP file spits out .... I shortened it A LOT
Code: [ Select ]
new Array("none", "<ul id=\"tree\" class=\"tree\"><li menu=\"tree_menu_1\" item=\"folder\" image=\"../../images/fam/folder.png\" id=\"node1\" filename=\"Root\" link_href=\"Javascript: load_folder(\'1\')\"><a id=\"\" href=\"Javascript: void(0)\" filename=\"Root\"><b>Root</b></a><ul id=\"tree\" class=\"tree\"><li menu=\"tree_menu_1\" item=\"folder\" image=\"../../images/fam/folder.png\" id=\"node29\" filename=\"Agency Content\" link_href=\"Javascript: load_folder(\'29\')\"><a id=\"\" href=\"Javascript: load_folder(\'29\')\" filename=\"Agency Content\">Agency Content</a><ul id=\"tree\" class=\"tree\"><li menu=\"tree_menu_1\" item=\"folder\" image=\"../../images/fam/folder.png\" id=\"node1306\" filename=\"Addison-Clark\" link_href=\"Javascript: load_folder(\'1306\')\"><a id=\"\" href=\"Javascript: load_folder(\'1306\')\" filename=\"Addison-Clark\">Addison-Clark</a></li><li menu=\"tree_menu_1\" item=\"folder\" image=\"../../images/fam/folder.png\" id=\"node559\" filename=\"Brodeur\" link_href=\"Javascript: load_folder(\'559\')\"><a id=\"\" href=\"Javascript: load_folder(\'559\')\" filename=\"Brodeur\">Brodeur</a></li></ul></li></ul></li></ul>", new Array("14", "1"), setTimeout('context_menu.set_multiple("tree_menu_1", "tree_menu_1")', 1000), setTimeout('context_menu.set_multiple("tree_menu_2", "tree_menu_2")', 1500))


I know its hard to see but it spits out a javascript array I'll explain the array
Code: [ Select ]
new Array("Errors", "HTML CODE", a javascript array for what folders need to open, function call to setup the first right click menu, function call to setup the second right click menu)


The AJAX call and return functions
JAVASCRIPT Code: [ Select ]
function load_tree() {
   
   // Set the loader ball
   document.getElementById('loader_text').innerHTML = 'Loading Folder Tree';
   document.getElementById('folders_container').innerHTML = document.getElementById('loader_ball_container').innerHTML;
   
   // Send the request
   ajax_request(ajax_connect(), 'process_load_tree.php', 'ajax_load_tree_return');
   
}
 
// This function will process our driectory tree
function ajax_load_tree_return(return_object) {
   
   // Get the return array
   return_array = eval(unescape(return_object));
   
   // Check for errors
   if(return_array[0] != 'none') {
     
      // Trigger the error
      error(return_array[0]);
     
   } else {
     
      // Add the folders in the folder div
      document.getElementById('folders_container').innerHTML = return_array[1];
     
      // Set the folder tree
      set_folder_tree(return_array[2]);
     
   }
   
   
}
 
  1. function load_tree() {
  2.    
  3.    // Set the loader ball
  4.    document.getElementById('loader_text').innerHTML = 'Loading Folder Tree';
  5.    document.getElementById('folders_container').innerHTML = document.getElementById('loader_ball_container').innerHTML;
  6.    
  7.    // Send the request
  8.    ajax_request(ajax_connect(), 'process_load_tree.php', 'ajax_load_tree_return');
  9.    
  10. }
  11.  
  12. // This function will process our driectory tree
  13. function ajax_load_tree_return(return_object) {
  14.    
  15.    // Get the return array
  16.    return_array = eval(unescape(return_object));
  17.    
  18.    // Check for errors
  19.    if(return_array[0] != 'none') {
  20.      
  21.       // Trigger the error
  22.       error(return_array[0]);
  23.      
  24.    } else {
  25.      
  26.       // Add the folders in the folder div
  27.       document.getElementById('folders_container').innerHTML = return_array[1];
  28.      
  29.       // Set the folder tree
  30.       set_folder_tree(return_array[2]);
  31.      
  32.    }
  33.    
  34.    
  35. }
  36.  


So when the AJAX comes back I unescape it since i had to escape it going into the array and then EVAL it to make it an actual array and not a string. Now I thought it may have been due to the evil eval and IE so i tried something along the lines of this http://ajaxian.com/archives/evaling-with-ies-windowexecscript and got the same results

Anyone have any thoughts?, Questions .... Apples?

I may have one solution that I'll be testing out today or tomorrow if it works I may go that route but that means changing the entire site as it is to fix one IE :evil: issue that only happens when someone stretches their screen.
  • ScottG
  • Proficient
  • Proficient
  • No Avatar
  • Joined: Jul 06, 2010
  • Posts: 260
  • Status: Offline

Post February 24th, 2012, 10:11 am

After more testing my original idea on doing this works fine and has convinced my client to let me do it my way. I will need to change a good majority of the site but oh well. Most of the infrastructure I already put into place.

I have also deemed the issue of this IE blunder to be the EVIL EVAL function.

Thank you to the people who helped me on this issue (Me, Myself, and I) and to this forum to allow me to textually workout my bigger coding issues. :wink:

So far all alternative to eval have failed if anyone knows any that may work let me know and I'll put them to the test.
  • ScottG
  • Proficient
  • Proficient
  • No Avatar
  • Joined: Jul 06, 2010
  • Posts: 260
  • Status: Offline

Post February 28th, 2012, 12:09 pm

OK? so my original idea works fine if the files are local on my computer but as soon as their uploaded to the server even without the eval function there is still a crashing issue. Not as bad as before but still an issue. IE your killing me. So?? Now I think it may be the use of innerHTML. or IE memory blocks. something is happening i just not completely sure of what.
  • ScottG
  • Proficient
  • Proficient
  • No Avatar
  • Joined: Jul 06, 2010
  • Posts: 260
  • Status: Offline

Post March 6th, 2012, 10:58 am

OK!!!! ISSUE Solved. All of my original thoughts were wrong about the issue and the issue was actually this dumb piece of code.

library.add_event(window,"resize",context_menu.init);

I don't really need it so it has been eliminated for the site
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Joined: Dec 20, 2002
  • Posts: 8922
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Online

Post March 6th, 2012, 11:36 am

Quote:
Thank you to the people who helped me on this issue (Me, Myself, and I) and to this forum to allow me to textually workout my bigger coding issues.


I am really glad all three of you were able to figure that out! I am glad you were able to figure out the issue, I occasionally run into goofy problems like this that only affect one browser, it becomes very frustrating. I am glad you were able to narrow it down to that one event:

Code: [ Select ]
library.add_event(window,"resize",context_menu.init);


I think it would have been hard for any of us to narrow that down due to the limited nature of the amount of code you were able to provide to us. So from the sounds of it, it had nothing to do with the AJAX call and instead had to do with an event listening for any resizing of the window? Did you ever figure out why that piece of code caused problems, maybe it was too slow to compute? or maybe while you resized a window it was called hundreds of times for each change as your mouse slowly changed the window size which called that event each time? My first guess is that may have been then problem and maybe only executing that event as long as no mouse buttons are currently clicked could fix that issue because the event would only execute once versus numerous times. I understand your problem is resolved which I am happy to hear, I just always like to learn in case something like this were to happen to me at a later time or if someone down the road stumbled across a similar problem as you.

Wish we could have been more help for you, thank you for posting so many details though. Maybe we can help you better next time.
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Joined: Dec 20, 2002
  • Posts: 8922
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Online

Post March 6th, 2012, 11:43 am

A few interesting links I found related to this are:

http://snook.ca/archives/javascript/ie6_fires_onresize

http://stackoverflow.com/questions/1852751/window-resize-event-firing-in-internet-explorer
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • ScottG
  • Proficient
  • Proficient
  • No Avatar
  • Joined: Jul 06, 2010
  • Posts: 260
  • Status: Offline

Post March 6th, 2012, 11:53 am

I did find that is wasn't AJAX or anything that I thought it was it seemed that way because the function to start the context menu came through the AJAX It wasn't until i started to strip the code down to the bare minimum that the issue revealed it self.

I do believe that the reason that the code was crashing IE was due to it calling it several hundred times the full function looks like this

JAVASCRIPT Code: [ Select ]
// Initialize
"init":function() {
   
   // Get the body element
   var body = document.getElementsByTagName("body")[0];
   
   // Set the max width/max height to be the windows size
   context_menu.max_width  = body.clientWidth  || body.offsetWidth;
   context_menu.max_height = body.clientHeight || body.offsetHeight;
   
   /* THIS CAUSES IE TO CRASH NEED TO LOOK INTO ANOTHER WAY
   
   // Add an event to redo the max with/height on resizing the window
   library.add_event(window,"resize",context_menu.init);
   
   //*/
},
 
  1. // Initialize
  2. "init":function() {
  3.    
  4.    // Get the body element
  5.    var body = document.getElementsByTagName("body")[0];
  6.    
  7.    // Set the max width/max height to be the windows size
  8.    context_menu.max_width  = body.clientWidth  || body.offsetWidth;
  9.    context_menu.max_height = body.clientHeight || body.offsetHeight;
  10.    
  11.    /* THIS CAUSES IE TO CRASH NEED TO LOOK INTO ANOTHER WAY
  12.    
  13.    // Add an event to redo the max with/height on resizing the window
  14.    library.add_event(window,"resize",context_menu.init);
  15.    
  16.    //*/
  17. },
  18.  


The strange part about this was the fact that it only happened when it was uploaded to a server I tried two different server and got the same result however launching it from my localhost on my comp posed no issue.
  • ScottG
  • Proficient
  • Proficient
  • No Avatar
  • Joined: Jul 06, 2010
  • Posts: 260
  • Status: Offline

Post March 6th, 2012, 12:05 pm

Thank you for those articles. Confirms my thoughts on the code.
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Joined: Dec 20, 2002
  • Posts: 8922
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Online

Post March 6th, 2012, 12:21 pm

I do find that odd that locally you don't have the problem when loading everything in your browser, but once uploaded to a server and accessing the files that way you have the problem. My only thought to that behavior is that when you load it locally, are you sure all of the JavaScript files are actually being loaded? Sometimes IE prevents scripts from being loaded locally (you might need to adjust your browser settings if you want to enable that), or its also possible that your path to the script is wrong and is not loading. That would be really my only guesses to why locally you are not noticing the problem. If that is the problem and the script simply is not executing, then the problem may still exist in both places.
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • ScottG
  • Proficient
  • Proficient
  • No Avatar
  • Joined: Jul 06, 2010
  • Posts: 260
  • Status: Offline

Post March 6th, 2012, 12:50 pm

I run it though the Apache server I have installed on my system. My only thoughts are that the comp I use is a gaming system so processing power is not an issue? I'm not sure the specs on the other servers are. I haven't had Javascript not run in the past on my testing server. I know that when the url is file:\\blah IE pops open the box to allow the javascript. I access the file be going to http://localhost/blah

It is something I'll look into to see if all the Javascript is running. All the paths to the Javascript files are correct and the files exist.

My guess would be the processing power on the server isn't enough to put the resize code function fast enough
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Joined: Dec 20, 2002
  • Posts: 8922
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Online

Post March 6th, 2012, 5:56 pm

All JavaScript is run on the client side, never on the server side. While the actual Javascript code may be downloaded from the server, it is still actually run on your computer that you are browsing with. So in both cases your computer is actually the one executing the JavaScript.

A simple test you could do to make sure it is running both ways, is to call an alert. If you don't get a popup box for both, then something isn't right. So for instance:

JAVASCRIPT Code: [ Select ]
alert("This is a test message");
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • ScottG
  • Proficient
  • Proficient
  • No Avatar
  • Joined: Jul 06, 2010
  • Posts: 260
  • Status: Offline

Post March 7th, 2012, 9:37 am

That makes sense but then I have no idea why it worked that way but what ever. Both my test server and the live server are running javascript. One of the other strange things i came across with dealing with this issue is web standards are trying to weed out the use of Iframes and in there place they want you to use the object tag in this type of way
HTML Code: [ Select ]
<object id="foo" name="foo" type="text/html" data="http://www.w3schools.com/"></object>
 
  1. <object id="foo" name="foo" type="text/html" data="http://www.w3schools.com/"></object>
  2.  


The reason I'd use this would be to process forms with out having to use AJAX to send info, popup window or a page refresh. you just simply submit to the object.

IE will work locally if you click the box that pops up allow active x / javascript box as well as on my testing server but when it is on a live server the object will not talk to the parent window at all and you get a security issue popup. IE won't allow it to work like an iframe would.

Page 1 of 1

Post Information

  • Total Posts in this topic: 13 posts
  • Users browsing this forum: No registered users and 155 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.