Modal darkening of background works fine in IE and Firefox -- but delayed in Chrome

Hello

I am working on a page that has a javascript popup.  

The background of the page turns dark when the popup appears, and it works fine in Firefox and IE.

In Chrome however there is a delay before the darkens.

Is there a workaround that can fix this.

Attached is the javascript file.  I think that controls it all.  However if you want to see the css let me know.

The Js file works with a plugin that embeds the relevant javascript in the head of the page.  Here is the resulting head of the page:  (I *think* I copied and pasted it all)

var modal_class = 'modal_link'; var modal_defaults = { opacity: '0.8',width: '298',height: '300',initialWidth: '298',maxWidth: '95%',maxHeight: '95%',fixed: 'true',current: '{current} / {total}',previous: 'previous',next: 'next',close: 'close',xhrError: 'This content failed to load.',imgError: 'This image failed to load.' };
Mediabox.scanPage = function() {
                        var links = document.getElements("a").filter(function(el) {
                            return el.rel && el.rel.test(/^lightbox/i);
                        });
                        links.mediabox({
                        overlayOpacity : 	0.8,
						resizeOpening : 	0,
						resizeDuration : 	0,
						resizeTransition : 	0,
						initialWidth : 		320,
						initialHeight : 	180,
						defaultWidth : 		311,
						defaultHeight : 	390,
						vertioffset : 		10,
						horizoffset : 		0,
						showCaption : 		0,
						showCounter : 		0,
						attribType :		'rel',
                        playerpath: '/plugins/system/mediabox_ck/mediabox_ck/NonverBlaster.swf'
                        }, null, function(el) {
                            var rel0 = this.rel.replace(/[[]|]/gi," ");
                            var relsize = rel0.split(" ");
                            return (this == el) || ((this.rel.length > 8) && el.rel.match(relsize[1]));
                        });
                    };
                    window.addEvent("domready", Mediabox.scanPage);

Open in new window


Again it looks fine in IE and Firefox.  But delayed in Chrome.

In my follow up comment I will include the URL of the test site.

Thanks!

Rowby
mediaboxAdv-experts-exchange-re-.js
LVL 9
Rowby GorenAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
It works the the same. I do get the dark background but still in the same browser session.  There must be an ajax call somewhere because I can see it keeps calling for GET http://www.drivehubber.com/Images/image3.png%20usemap

Try and recreate the site on your own and fix the error to test if that is the issue. Every browser handles errors differently.  

Failed to load resource: the server responded with a status of 404 (Not Found) https://list.drivehubber.com/hubber/Styles/proximanova-regular-webfont.woff
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
Failed to load resource: the server responded with a status of 404 (Not Found) http://www.drivehubber.com/Images/image2.png%20usemap=
Failed to load resource: the server responded with a status of 404 (Not Found) http://www.drivehubber.com/Images/Image1_2.png%20usemap=
GET http://www.drivehubber.com/Images/image3.png%20usemap= 404 (Not Found) jquery-1.9.0.min.js:3
GET http://www.drivehubber.com/Images/image2.png%20usemap= 404 (Not Found) jquery-1.9.0.min.js:3
GET http://www.drivehubber.com/Images/Image1_2.png%20usemap= 404 (Not Found) jquery-1.9.0.min.js:3
GET http://www.drivehubber.com/Images/image3.png%20usemap= 404 (Not Found) jquery-1.9.0.min.js:3

Open in new window

0
 
Rowby GorenAuthor Commented:
Hi

Here's a link to the test page  Link to test page

Check it out in Firefox or IE and you will see the background darkens right away.

In IE there is a noticeable delay before the page suddenly darkens.  If it can't be fixed in Chrome, can the background darkening be disabled in Chrome.  That would be better than a delay and the sudden darkening.

Rowby
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Once it works, it works fast in chrome over and over even after page refresh.

Using the console, it looks like there are references to a font file that is not there.  Try removing the reference or uploading it and see if that helps.

Failed to load resource: the server responded with a status of 404 (Not Found) https://list.drivehubber.com/hubber/Styles/proximanova-regular-webfont.woff
Failed to load resource: the server responded with a status of 404 (Not Found) https://list.drivehubber.com/hubber/Styles/proximanova-regular-webfont.woff
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
Rowby GorenAuthor Commented:
Hi Scott,

Thanks for helping once again :)

Hmmm...
 
I looked at the console too.  

Apparently that font not loading is happening on an external server that I don't have easy access to.  (very limited tech support to that external site.)

Is there a way just for in Chrome to disable the background darkening completely.

I notice on their live site (which is using a different modal program) they have apparently disabled the background color change for the modal in CHROME:  Live site

Rowby
0
 
Rowby GorenAuthor Commented:
Okay.  WIll dig in.

(Note the live site is using a completely different modal system, which I don't want to use in the "new" site.)

It was built traditionally so for the most part the 'new.drivehubber.com" was rebuilt much from scratch in joomla.  

The new site would not be calling anything from http://www.drivehubber.com/ -- but I assume you know that.

I may have to completely disable the darkening of the background for all browsers, if necessary.  

Rowby

Rowby
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
See what happens when you pull out the references to the missing file.  Also just a few validation items to clean up.  http://validator.w3.org/check?uri=http%3A%2F%2Fnew.drivehubber.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
0
 
Rowby GorenAuthor Commented:
Thanks for that, Scott!

I will fix those -- a little later this afternoon -- and see if that helps.

Rowby
0
 
Rowby GorenAuthor Commented:
Hi Scott,

I have not fixedhe validator issues yet.  However I noticed in chrome the "trigger" for the darkening came from the slide show "behind it'.

So as a work around I just extended the time between slide transitions -- knowing that someone logging in would take no more than 40 seconds or so to do the log in process.  The live site, as I may have mentioned, does not attempt the darkening in Chrome anyway.

That might be a good enough solution.  I will still do the validator.  

There is also a joomla plugin that manages jquery, that might help.

Or I might just leave things as is!

I will do some tweaking over the next day or so.

Rowby
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I just like to take away all possibilities.
0
 
Rowby GorenAuthor Commented:
Yes, I will  definately do the validation adjustments.  Once I catch my breath! :)

Rowby
0
 
GaryCommented:
I've requested that this question be deleted for the following reason:

The question has either no comments or not enough useful information to be called an "answer".
0
 
Rowby GorenAuthor Commented:
Sorry for the delay in awarding points.  And thanks for helping troubleshoot the issue.

Rowby
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.