javascript - Colorbox not loading properly in IE

I have found a solution but it is not the best so I am still looking for a solution. See my answer for what I have done.

UPDATE - My error persists as describe below BUT if I open IE's Developer Tools the error goes away! If I close the browser and re-open the error re-appears!

UPDATE 2 - I have tried to insert the following code into my JS to see if that would solve the issue and it did not:

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 scanned through my JS files and never came across a console.log function that would be causing the error.

This is a convoluted issue and I will do my best to explain. I am setting cookies in a page that will show a lightbox on the first visit. It works great in FF, Chrome, etc. but does not in IE.

What happens in IE is the script for calling my lightbox (colorbox) fires but all I see is the AJAX Loader spinning and the content never loads. I figured out that the script was firing too soon. I was using $j(document).ready(function() I switched to: $j(window).load(function() and all seemed to be fine and it worked properly until I start from another page and e to the page mentioned above.

If I start on any other page and click a link I have the same issue! The cookie works properly and does not fire the box a second time.

In other words if I clear cookies and start at the page with an issue then no issue. BUT if I start from any other page (with cookies cleared) and go to the above page the colorbox does not load properly.

From what I can tell the $j(window).load(function() is not working correctly.

I receive no errors from IE. I am using IE 8 for testing and cannot test 9 as I am using Windows XP. (I have been told it works fine in IE 9 but have not confirmed this) The script is in the <head> of my document. (If I move the script into the <body> it pletely breaks the page.)

I have read of issues of DOCTYPE not being correct or shortend and colorbox issues in IE. My DOCTYPE is as follow which should be correct:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
".dtd">
<html xmlns="">

Any thoughts or ideas are greatly appreciated!

Here is my code I am using:

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 other note: I am using jAlbum on the page and I do not see any conflicts but could there be an issue? I cannot post that code here as it would exceed the post limit for SO.

To trigger this error start at this page, a lightbox will appear. Click Message Examples (lower left hand corner of lightbox or first item in menu without lightbox).

Here is a direct link to the page if needed. (Going to the page directly will not trigger the error.)

I attempted to use window.onload = function() and the same issue happened.

I attempted to use the event handler to trigger the script once the div was loaded, that did not even fire the script at all. here was that 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: '/'
    });
  }
});

I have found a solution but it is not the best so I am still looking for a solution. See my answer for what I have done.

UPDATE - My error persists as describe below BUT if I open IE's Developer Tools the error goes away! If I close the browser and re-open the error re-appears!

UPDATE 2 - I have tried to insert the following code into my JS to see if that would solve the issue and it did not:

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 scanned through my JS files and never came across a console.log function that would be causing the error.

This is a convoluted issue and I will do my best to explain. I am setting cookies in a page that will show a lightbox on the first visit. It works great in FF, Chrome, etc. but does not in IE.

If I start on any other page and click a link I have the same issue! The cookie works properly and does not fire the box a second time.

From what I can tell the $j(window).load(function() is not working correctly.

I have read of issues of DOCTYPE not being correct or shortend and colorbox issues in IE. My DOCTYPE is as follow which should be correct:

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

Any thoughts or ideas are greatly appreciated!

Here is my code I am using:

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 other note: I am using jAlbum on the page and I do not see any conflicts but could there be an issue? I cannot post that code here as it would exceed the post limit for SO.

To trigger this error start at this page, a lightbox will appear. Click Message Examples (lower left hand corner of lightbox or first item in menu without lightbox).

Here is a direct link to the page if needed. (Going to the page directly will not trigger the error.)

I attempted to use window.onload = function() and the same issue happened.

I attempted to use the event handler to trigger the script once the div was loaded, that did not even fire the script at all. here was that 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: '/'
    });
  }
});

Share Improve this question edited Nov 25, 2011 at 23:15 asked Nov 14, 2011 at 1:02 L84 46.3k59 gold badges181 silver badges259 bronze badges

I opened the page in IE8 and it seemed to work fine. Colorbox opened on the first visit, and not on the second. – Gummy Commented Nov 14, 2011 at 19:08
If you link directly to the page then it does not trigger the error. I edited my question to reflect how to trigger the error. – L84 Commented Nov 15, 2011 at 1:24
can you re-create this example on jsfiddle, including jAlbum code? I have several test environments and quite some experience with colorbox. It would be nice to solve this problem if I can have it. – melihcelik Commented Nov 21, 2011 at 0:11
@melihcelik - I created a Fiddle but the Album does not load at all and I have no idea why. Here is the link for the fiddle - jsfiddle/Lynda333/DurGt/8 - I do not see the error in IE but the gallery does not load so that could be why the error does not trigger? – L84 Commented Nov 21, 2011 at 2:50
I've checked both the fiddle example and also downloaded all the files and recreated a local example but could not reproduce the error. I am using Windows 7 with IE9 installed, I ran the example using patibility mode. Did you have the error on original IE7 and IE8 installations? I have WinXP with IE7 on my laptop, I will try on that as well. – melihcelik Commented Nov 25, 2011 at 21:20

| Show 5 more ments

4 Answers 4

Sorted by: Reset to default 7 +100

The reason it goes away when you open developer tools is that IE does not play nice with any console.log statements, until you open the developer tools. There has to be a console.log somewhere. It could be in any plugin file or javascript file you're using. It kills javascript that runs after it for some reason. Opening developer tools recognizes the console.log as a javascript function (my best guess) and so it suddenly works.

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

My version of colorbox, ColorBox v1.3.19.2, seems to return some kind of console object. This is probably why the issue goes away once you've opened the developers toolbar.

My solution was to alter the last statement in the colorbox script (can be used for both development as minified version). The script ends with

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

which I have replaced with

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

and now everything works for me.

I have seemed to solved this issue though I am still a bit confused as to why the error was happening. I will explain what I have done:

First I use Dreamweaver Teamplates to create my webpage. So my code ends up looking 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 head section, if I put them right before the closing body tag it broke the page. What I have done is changed the placement of the code. I put the Lightbox HTML at the very top of the <body> section and then the script to call the lightbox right below it but above the page content in the body section and it worked! If anyone can to explain why that worked and can help me understand why it did not work in the head please tell.

I started writing this as a ment to the question but it got very long, so I decided writing it as an answer. I don't know if that will solve the problem but I think it is worth trying.

Create a new function, setCookieAfterFirstView and call the $j.cookie call inside that function
Call setCookieAfterFirstView function on onComplete callback of colorbox.

This way, you can make sure that no other calls will conflict with colorbox opening. Maybe there is an issue of jQuery about different plugin's conflicting with each other, I'm just guessing now..

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 ment to this answer, whether it solved the problem or not?

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Colorbox not loading properly in IE - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)