Menu
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 come 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 completely 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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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> </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> </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: '/'
});
}
});
916
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.
103
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.
3
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.
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With