Geek Answers Handbook

Colorbox not loading properly in IE

I found a solution, but this is not the best, so I'm still looking for a solution. See my answer for what I did.

UPDATE . My error persists as described below, but if I open IE Developer Tools, the error will disappear! If I close the browser and open the error again, it will appear again!

UPDATE 2 . I tried pasting the following code into my JS to make sure this solves the problem, and it doesn’t:

if (!("console" in window) || !("firebug" in console)) { var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml", "group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"]; window.console = {}; for (var i = 0, len = names.length; i < len; ++i) { window.console[names[i]] = function(){}; } }

And then this:

 var console = {}; console.log = function(){};

I also looked through my JS files and never came across a console.log function that would throw an error.

This is a difficult problem and I will do my best to explain. I set cookies on the page that will show the lightbox on the first visit. It works fine in FF, Chrome, etc., but not in IE.

What happens in IE is a script to call my lightboxes (colorbox), but all I see is an AJAX Loader hang, and the content never loads. I realized that the script shot too early. I used $j(document).ready(function() , I switched to: $j(window).load(function() , and everything seemed to be all right, and it worked correctly until I started with another page and did not go to the above page.

If I start from any other page and click on the link, I will have the same problem! The cookie works correctly and does not start the box a second time.

In other words, if I delete cookies and start from the problem page, then no problem. BUT, if I start from any other page (with cleared cookies) and go to the page above, the color package will not load properly.

From what I can say, $j(window).load(function() is not working properly.

I do not get errors from IE. I am using IE 8 for testing and cannot test 9 since I am using Windows XP. (I was told that it works fine in IE 9, but did not confirm this) the script is in the <head> my document. (If I moved the script to <body> , it completely broke the page.)

I read about DOCTYPE issues that aren't right or short term, and color issues in IE. My DOCTYPE is as follows:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

Any thoughts or ideas are welcome!

Here is my code that I use:

Javascript

 var $j = jQuery.noConflict(); $j(window).load(function() { //window.onload = function() does not function properly either... if(!$j.cookie('gallerycookie')){ $j.colorbox({ inline:true, href:"#gallery-nav-instruct" }); $j.cookie("gallerycookie", 1, { expires: 30, path: '/' }); } });

HTML

 <div style="display:none"> <div id="gallery-nav-instruct"> <h2>Gallery Navigation Instructions - Step 1</h2><h2 style="text-align:right"> <a style="text-align:right;" class="inline cw" href=" #gallery-enlarge-instruct">Step 2</a></h2> <p>&nbsp;</p> <p class="white"><img src="/Images/Pages/gallery-navigation.jpg" width="890" height="450" alt="Gallery Navigation Instructions" /></p> </div> </div> <div style="display:none"> <div id="gallery-enlarge-instruct"> <h2>Gallery Navigation Instructions - Step 2</h2> <p>&nbsp;</p> <h2><a class="inline cw" href="#gallery-nav-instruct">Step 1</a> </h2> <p class="white"><img src="/Images/Pages/gallery-enlarge.jpg" width="890" height="510" alt="Gallery -Enlarged View Instructions" /></p> </div> </div>

One more note: I am using jAlbum on the page and I do not see conflicts, but may be the problem? I cannot post this code here, since it will exceed the post-limit for SO.

To run this error from this page , a lightbox will appear. Click Message Examples (lower left corner of the light box or the first item in the menu without a light box).

Below is a direct link to the page. (Going to the page directly will not result in an error.)

I tried using window.onload = function() and this problem arose.

I tried using an event handler to run the script after loading the div, which did not run the script at all. here is this code:

 var $j = jQuery.noConflict(); $j('#gallery-nav-instruct').load(function() { if(!$j.cookie('gallerycookie')){ $j.colorbox({ inline:true, href:"#gallery-nav-instruct" }); $j.cookie("gallerycookie", 1, { expires: 30, path: '/' }); } });
+8
javascript jquery internet-explorer jquery-plugins colorbox
source share
4 answers

The reason it disappears when you open the developer tools is because IE does not play well with any console.log statements until you open the developer tools. Somewhere should be console.log. It can be in any plugin file or in the javascript file that you use. It kills the javascript that runs after it for some reason. Opening developer tools recognizes console.log as a javascript function (my best guess), and therefore it works unexpectedly.

+7
source share

I just ran into this problem, and although this question is very old, I still wanted to answer her for future visitors ...

My version of colorbox, ColorBox v1.3.19.2, seems to be returning some kind of console object. This is probably why the problem disappeared as soon as you opened the developer toolbar.

My solution was to change the last statement in the colorbox script (can be used both for development and for the mini version). script ends with

}(jQuery, document, this, console));

which I replaced with

}(jQuery, document, this, null));

and now everything works for me.

+3
source share

I seem to have solved this problem, although I'm still a little confused about why the error occurred. I will explain what I did:

First, I use Dreamweaver Teamplates to create my web page. So my code looks like this:

 <head> Template Content for head section then <!-- TemplateBeginEditable name="head" --> Content outside of template that goes in head section. <!-- TemplateEndEditable --> </head> <body> Template Content for Body <!-- TemplateBeginEditable name="ContentArea" --> Page or body content not inside template. <!-- TemplateEndEditable --> More Template Content for Body </body>

Originally my scripts, where inside the chapter section, if I put them right before the closing tag, it broke the page. What I did changed the placement of the code. I put the Lightbox HTML code at the very top of the <body> section, and then the script to call the lightbox right below it, but above the contents of the page in the body section, and it worked! If anyone can explain why this worked and can help me understand why this did not work in my head, please let me know.

+1
source share

I started writing this as a comment on the question, but it took a very long time, so I decided to write it as an answer. I don’t know if this will solve the problem, but I think it’s worth a try.

  • Create a new setCookieAfterFirstView function and call $j.cookie inside this function
  • Call the setCookieAfterFirstView function on the onComplete colorbox callback.

Thus, you can make sure that no other calls will conflict with the opening of the columns. Perhaps there is a problem with jQuery that different plugins conflict with each other, I just guess.

 var $j = jQuery.noConflict(); var setCookieAfterFirstView: function() { $j.cookie("gallerycookie", 1, { expires: 30, path: '/' }); }; $j(window).load(function() { //window.onload = function() does not function properly either... if (!$j.cookie('gallerycookie')) { $j.colorbox({ inline: true, href: "#gallery-nav-instruct", onComplete:function() { setCookieAfterFirstView(); } }); } });

Can you try this and write a comment on this answer, will it solve the problem or not?

0
source share

More articles:


All Articles