Solved

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

Posted on 2014-04-02
13
480 Views
Last Modified: 2014-05-27
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
0
Comment
Question by:Rowby Goren
  • 7
  • 4
13 Comments
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39972211
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
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39972993
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
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39973023
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
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39973129
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
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39973243
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
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39973300
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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
LVL 9

Author Comment

by:Rowby Goren
ID: 39973339
Thanks for that, Scott!

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

Rowby
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39976935
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
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39976958
I just like to take away all possibilities.
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39976960
Yes, I will  definately do the validation adjustments.  Once I catch my breath! :)

Rowby
0
 
LVL 58

Expert Comment

by:Gary
ID: 40094552
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
 
LVL 9

Author Closing Comment

by:Rowby Goren
ID: 40094553
Sorry for the delay in awarding points.  And thanks for helping troubleshoot the issue.

Rowby
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

These days socially coordinated efforts have turned into a critical requirement for enterprises.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now