Develop Reference

How do I prioritize which part of a page should load 1st?

Okay guys I have a website that has a lights off for videos source code: http://www.megaptery.com/allofthelights/
An organic tabs for videos using Jquery
and a 2buttons which onclick it changes the CSS of the whole page you know it's kinda like a theme for the page
Here is an example of one of my page:
http://myanimesekai.com/Watch/Noucome-Episode-9
okay all of them works perfectly fine on my laptop all of them IE, Mozilla and the OLD Google Chrome.
But Then I tried it on my Brothers Laptop BUT his Google Chrome is the latest Google Chrome the Google Chrome where the scrollbar changed. The problem is that the Lights off feature is malfunctioning it doesn't turn off the video only. But the Organic Tabs and The 2buttons works perfectly fine. So I tried it on an internet Cafe and this is where I was really frustrated their Google Chrome is also updated and then both 3 of them were malfunctioning then after a while I tried them on Mozilla and all of them worked perfectly fine and so I have an Idea maybe it's becaused it took time for the Jquery and my Javascript to load which is why all 3 of them were malfunctioning.
so my question is is there a way for me to make my page load the jquery and javascript 1st? or am I missing something that the new Google Chrome requires? this is really frustrating me
oh BTW the 2buttons that changes the CSS are the B and M squares Below the facebook page

There are so many errors on this page (http://myanimesekai.com/Watch/Noucome-Episode-9) that any one error can cause the page not to work.
You need to clean up your code quite a bit:
<script src="http://myanimesekai.com/javascript.js"></script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="http://myanimesekai.com/organictabs.jquery.js"></script>
You are calling jQuery in your javascript.js file. The jQuery library has not been declared before your scripts. You need to restructure your code to (you only need one version of jQuery):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="http://myanimesekai.com/javascript.js"></script>
<script src="http://myanimesekai.com/organictabs.jquery.js"></script>
This will fix some errors. I suggest that you look at the console for further errors and fix them.

debugging jQuery snippet

I was trying to take a working jQuery snippet (it's an example to another SO answer) and improve it.
The original snippet can show a good and a bad way of doing something, by having to comment/un-comment some code. I tried to modify the HTML and the JS so that both examples can be run independently, without modifying JS code (by basically cloning sample HTML into a copy with different IDs).
Original JSFiddle worked fine: http://jsfiddle.net/thangchung/LVAaV/
My "improved" version doesn't seem to work at all: http://jsfiddle.net/dvkdvk/C2YBE/19/
(doesn't work means that when you push any button, nothing happens).
I don't know how to debug it with jQuery (with regular JS I would just sprinkle alert() everywhere). I ran "JSHint" on JSFiddle and it was OK.

Your new fiddle did not select a library. Select it from the left side of the form and click Run.
I found this by using Firebug's script debugger in Firefox. Turn on script debugging with the developer tools in your browser of choice. Otherwise, Javascript fails silently. You can then set breakpoints, look at variables, etc. That is much more efficient than using Alerts and console logs (although they do have their place).

Your main problem is with your JSFIDDLE setup. On the left hand side of the page, make sure you include the jQuery library and select onDomReady from the frameworks and extensions panel.

I tried running this script in FireFox, Firebug. The scrips runs fine here with me. Kindly see the environment in which you are trying to run this script.

Why is IE9 not printing anything?

I have a javascript print feature that uses jqprint (though I've made some minor adjustments to the code).
This print feature works on IE8 and Chrome without a problem. On IE9 though, it shows no JS errors and the browser print dialogue shows up as expected, but once I click print, nothing happens. Eventually all applications on my computer start lagging and I have to reboot though.
If I open the developer tool kit (F12) and set the document mode to IE8 standards, it prints fine in IE9.
What's going on? I'm honestly baffled...
Edit:
My computer is not hooked up to a printer so I am using the built in "Microsoft XPS Document Writer" for testing. I have tested the code on an actual printer in IE8 and Chrome though, and it does work.
Update:
This stopped working today for some reason, anyone have any ideas?

I have no idea why, but I got it to work.
When it was calling the print function, it was calling it on a jquery object it had just created (the iframe). I changed the jqprint code so it re-grabs the object every time.
Original jqprint code:
$iframe[0].contentWindow.document.close();
....
Modified jqprint code:
$('iframe')[0].contentWindow.document.close();
$('iframe')[0].contentWindow.focus();
$('iframe')[0].contentWindow.print();
$('iframe')[0].contentWindow.close();

Javascript document.write in IE 8

This is doing my head in, been chasing it all day. We have an ad server that calls a script on our site which then inserts code.
E.g.
Adserver page called in an iframe:
<html>
<head><title></title></head>
<body>
<script src="http://adserver/ad?s=728x90"></script>
</body>
</html>
The javascript returned by the script call above:
document.write('<script type=\'text/javascript\' src=\'http://partner.googleadservices.com/gampad/google_service.js\'>\n');
document.write('</script>\n');
document.write('<script type=\'text/javascript\'>\n');
document.write('GS_googleAddAdSenseService("ca-pub-xxxxxxxxxxxxxxxxxxx");\n');
document.write('GS_googleEnableAllServices();\n');
document.write('</script>\n');
document.write('<script type=\'text/javascript\'>\n');
document.write('GA_googleUseIframeRendering();\n');
document.write('</script>\n');
document.write('\n');
document.write('<script type=\'text/javascript\'>\n');
document.write('GA_googleFillSlotWithSize("ca-pub-xxxxxxxxxxxxxxxxxx", "Global_728x90", 728, 90);\n');
document.write('</script>\n');
This inserts Google Ad Manager ads onto our page. Problem is that the code doesn't work in IE 7 and 8, but works fine in Chrome, Firefox, Safari etc.
The "error" returned by IE is "Object Expected" and running it through IE's "Developer tools" doesn't help either.
I've tried a ton of things to get it working, splitting up the
It seems the error is happening whenever a GS_ or GA_ function is run, so I suspect IE is trying to stop external scripts from writing to the page?
Can anyone shed some light why the error is happening or a solution?
Thanks

I think it's simply because Chrome, Firefox, Safari etc., are faster browsers. They're downloading the file http://partner.googleadservices.com/gampad/google_service.js before executing the script that depends on it, whereas IE is still pulling the file at that point.
Perhaps you can include the contents of that js file in your own js somewhere?

I've seen this a lot since posting this question. As far as I understand it, it's a race condition problem that only exists in IE. Unfortunately there is no way around it.

$(document).ready doesn't work in IE

In my page there is two links, register and login.
The important one now is register. When I click it, it loads a .tpl file using jquery load function. In this tpl file I include a new js file with <script> ofcourse, and it works perfectly in safari, ff, opera and chrome, but of course, Why should it be working in IE?
So my question is, what should I do to make it working in IE? I think if I put the js in the .tpl file that would solve my problem, but if there is a better solution, I'd like to hear it. No this didn't help, so I guess there is no solution : D
Now I tried it with a simple alert, it worked perfectly.
My problem has changed. If there is a $(document).ready in the JS file the IE "ignores" the whole script, but if there isn't it works perfectly. The thing is that i need that document ready. : D
Thanks.

If the script is "ignored" if there's a $(document)ready then there may be an error in that block of the script and your IE is set to stop running scripts on error.
Try to simplify your issue a bit to try to pin point it. For example, copy the following code into a brand new html file and try it out (NOTE: you'll need to change the src path to the jquery.js file.)
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert('test');
}
</script>
</head>
<body>
</body>
</html>
Does the above work in IE for you or does it get ignored as well (again, after you update the path to the jquery.js file)?
If this works but it doesn't in your scenario, check your page's source in IE for how everything is loaded. The only time I've seen $(document).ready() throw an error is when the jquery.js file is not loaded prior to it or there's a conflict with the $() function...in which case you'll need the noConflict() function.

Make sure that the script tag is not in this form:
<script ... />
IE only accepts:
<script>...</script>

IE considers injection of script tags as a security issue. Change the script tag to:
document.write("<scri" + "pt src=...></scri" + "pt>");

Are you sure that your loaded javascript executes properly in IE. Perhaps it have a javascript quirk that is throwing an error and is making it appear as if it's not loading?
To test this out, non-dynamically including the javascript (include it in the page or similar) and set up a break-point in the script code and step through ot make sure it executes all the way through. Firebug would be an excellent tool for this.
I realise this is grasping at straws, but give it a try perhaps?