Problems with Modalbox, Firefox and Internet Explorer 9

[MaKuMo]

Hi Guys...

I've postet before in Italian but nobody answered, so I rePost here in
english hoping in some help this time.

I'm doing a website with Flash. This site loads content from a XML
file. In a section I have a list of links that should open a modalbox.
So there's a Textbox in flash, that renders text as HTML. In this
textbox there are links like:

<a href="javascript:someFunction();">Click here</a>

In the page where's loaded this flash object there is (obviously) the
Javascript function someFunction() that open up my Modalbox with this
code

function someFunction(){
Modalbox.show("promozioni/25aprile.html", {title: this.title, width:
900, height: 800});
return false;
}

Everything works just FINE on Google Chrome. When I tried with other
Browsers I had big problems...
Firefox 3.6.13 and Internet Explorer 9 wont open the modalbox, but
instead show a blank page with "false" in it. The URL shown in the
address bar is "javascript:someFunction();"

Then I Tried removing return false; from the function and something
started to move. But still got problems.
Without return false; with IE9 I got my Modalbox to show, but
immediatly close. With Firefox it shows up very very slowly and the
whole browser becames slow and sloppy. After a bunch of seconds the
modal is fully opened, but don't have any content.

Somebody help me out please! Gotta public that site very soon and I'm
stuck! pleeease!

[Justinas Urbanavicius]

Hi,

the return false is there for a reason, to prevent the default anchor click action. When you click on a link, browser executes onclick event javascript and navigates to the href tag URL. If you return false in the onclick event you force be browser to stop the navigation and just run the javascript code.

Your implementation of modalbox differs from the examples in the modalbox site. although javascriipt:somefunction() might work, browsers don't like that very much in their href tag. and on the other hand you have to return false to the browser so it wouldn't try to open the javascript:somefunction() as an URL like you noticed in FireFox and IE.
The problem is you need to return the result of the somefunction() to the browser ergo
javascript:return somefunction(); or javascript:somefunction(); return false;

Frankly i would advise you to use onclick tag, or even better unobtrusive event binding that prototype library provides.
example:
<a  id="myModalboxLink" href="javascript:someFunction();">Click here</a>

$('myModalboxLink').observe('click', someFunction);

And take a look closer to what parameters you provide to Modalbox:

{title: this.title, width:900, height: 800}

you should notice this object. because you call Modalbox in a function and not on the html element this in this scope is the function, and so it does not have the title property, so you should see modalbox open with no title.

if you call modalbox as in examples in the element onclick tag this is the html element itself and if you set the title tag on the anchor this.title will be that titles value.

Good luck, and i hope this read won't be very boring :)

--
You received this message because you are subscribed to the Google Groups "ModalBox" group.
To post to this group, send email to moda...@googlegroups.com.
To unsubscribe from this group, send email to modalbox+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/modalbox?hl=en.

[MaKuMo]

Hi
Thanks for all your explanations.. But still didn't solve my issue...
Since the <a> tag is in the flash object I can't use the onClick
event... It doesn't work even on Chrome...
I tried javascript: return someFunction(); and got always the same
problem... Works great on Chrome but IE and FF does nothing...
So with javascript: someFunction(); return false;

I've even checked the z-index of the modalbox layer to see if it was
popping under the flash object but it is set to 99999 or something...
so I don't think it's the problem...

There is a way to get this work on IE and FF? Can I provide a link to
this site so you can see what's happening?

On 29 Mar, 21:47, Justinas Urbanavicius <justin...@gmail.com> wrote:
> Hi,
>
> the return false is there for a reason, to prevent the default anchor click
> action. When you click on a link, browser executes onclick event javascript
> and navigates to the href tag URL. If you return false in the onclick event
> you force be browser to stop the navigation and just run the javascript
> code.
>
> Your implementation of modalbox differs from the examples in the modalbox
> site. although javascriipt:somefunction() might work, browsers don't like
> that very much in their href tag. and on the other hand you have to return
> false to the browser so it wouldn't try to open the
> javascript:somefunction() as an URL like you noticed in FireFox and IE.
> The problem is you need to return the result of the somefunction() to the
> browser ergo
> javascript:return somefunction(); or javascript:somefunction(); return
> false;
>
> Frankly i would advise you to use onclick tag, or even better unobtrusive event

> binding <http://www.prototypejs.org/api/event/observe> that prototype

> library provides.
> example:
> <a  id="myModalboxLink" href="javascript:someFunction();">Click here</a>
>
> $('myModalboxLink').observe('click', someFunction);
>
> And take a look closer to what parameters you provide to Modalbox:

> {title: *this*.title, width:900, height: 800}
> you should notice *this* object. because you call Modalbox in a function and
> not on the html element *this *in this scope is the function, and so it does

> not have the title property, so you should see modalbox open with no title.
>

> if you call modalbox as in examples in the element onclick tag *this* is the

[Justinas Urbanavicius]

what do yo mean :

Since the <a> tag is in the flash object

if you mean that an anchor which is supposed to trigger the modalbox is in somekind flash WYSIWYG editor, then it is most likely that it won't work. 

[MaKuMo]

It's in a textbox in flash that load content from an XML file...
Now I changed a little bit the code...
Instead of calling a function to open the modalbox I've put
Modalbox.show directly in the href.
Now it works on all three browsers but still need something...

Chrome OK as always
Firefox Opens the Modalbox BUT it's choppy, really slows down. But
after 1 minutes of "lagginess" it opens the modalbox with the content
ok
IE9 Opens the Modalbox BUT it closes immediately...

[Justinas Urbanavicius]

install firebug extensions for firefox and check for javascript errors

[MaKuMo]

No errors...

The whole browser seems to be like freezed... Very unusable...
If you want to see it go to

http://www.eventimovida.it/tempo

Click on "Eventi" in the bottom menù and then click on a link listed
in the page...
I can't figure it out :( Just going crazy!

[MaKuMo]

Updated to Firefox 4. It works Great...
Now it's turn of Internet Explorer... Any Idea?
Tried both on IE8 and IE9. Had the same issue.
The modalbox opens and closes instantly

[Justinas Urbanavicius]

works fine for me on IE9, try Ctrl+F5 reload or clear browsers cache sometimes IE likes to cache more than it should. Try upating flash version, maybe that will help.