Member Avatar for ansari.wajid

I am facing a unique bug on a website I am developing, Its occurring only for IE(I am using IE8) that too only on the online version of the site, On my local machine its working perfectly and on all other browsers(firefox, safari, and chrome) its working perfectly both on online version and on local version.
The problem is on this page: , After navigating to the given link please selcect "season 1" from "choose your season" links, from there please select "Images" button on the right side of the flash video, Now you can see images in the box where flash was running previously. I am using jquery colorbox when images are clicked to show large images, Here is the bug, If you check on other browsers colorbox will work but on IE8 it will not work.
One other thing I am facing on this site and it is also related to only online version of the site on IE8 as said above, Please navigate to this link: , Select "2" from the pager at the bottom, After loading the page main flash banner is disappearing.
Hope I am clear in explaing the issue, Please Let me know for anything to be cleared..
Appreciate your quick help..


Thanks

  • 1 Contributor
  • 2 Replies
  • 236 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by ansari.wajid

Dani AI

Generated

As ultimately found, this was a timing/binding issue: the Colorbox handlers were being attached at DOM ready to elements that didn’t exist (or were being replaced) later, so the bindings never applied in IE8. Other browsers can be forgiving, but IE8 will stop running later scripts if an early error occurs, which makes timing issues show up only there. Deferring the initialization until after the image panel is created (or calling the init function from the "Images" click handler) is a correct short fix.

Practical checks that often catch IE-only problems:

  • Open IE’s Developer Tools (F12) and look for JavaScript errors — an uncaught error will stop execution.
  • Remove or guard any console.log calls (in IE8 console is undefined unless DevTools is open).
  • Search for trailing commas in object/array literals (IE8 throws on those).
  • Check Document Mode / Compatibility View in F12 (intranet/headers or missing DOCTYPE can force older rendering).
  • If scripts are concatenated/minified on the live server, test the unminified versions to spot errors introduced during build.

Two robust approaches to avoid the problem long-term: re-initialize Colorbox after you inject/show the images, or use event delegation to handle clicks on dynamically added anchors. Example patterns:

/* re-init after inserting or revealing the image links */
$('.episode-images a.colorbox').colorbox({ rel: 'episode', maxWidth: '90%' });

/* delegated handler (jQuery 1.7+) */
$(document).on('click', '.episode-images a.colorbox', function(e){
  e.preventDefault();
  $.colorbox({ href: $(this).attr('href'), rel: 'episode' });
});

/* delegated handler (jQuery < 1.7) */
$(document).delegate('.episode-images a.colorbox', 'click', function(e){
  e.preventDefault();
  $.colorbox({ href: $(this).attr('href'), rel: 'episode' });
});

Summary: ’s solution (defer init / call after reveal) is correct. For a more resilient fix across browsers and future changes, either re-run plugin initialization when the DOM is updated or use delegated handlers so dynamically-added links always open Colorbox.

Member Avatar for ansari.wajid

Is anybody there who can help me, still waiting for help..Thanks in advance.

Member Avatar for ansari.wajid

Hi Guys

At last I figured it out, The problem is with ready method in jquery. It is behaving differently on different browsers.
Actually I wrote a code snippet under document.ready but now I wrote a function under document.ready and calling that function on onclick event and thats it..it solved the problem..

Thanks

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.