Trouble implementing modalbox into my project

[Owz]

Hi, I have a website I want to add a modal box to.

I want the modal box to appear when the user clicks on the contact tab
so that it loads a contact form.

I have referenced the javascript files in my html file and I have
included the link:

<a onclick="Modalbox.show($('fouter'), {title: this.title, width:
650}); return false;" title="Contact us" href="#">Contact</a>

Fouter is the main wrapper div which holds my contact form. the code
for this page is:

<div id="fouter" style="display:none;">

<div id="floating_contact_box" >

<div id="floatingbox_header">
<h1>Get a Quote</h1>
<br />
<p>For help an assitance or to simply get a quote</p>

<img src="img/contact_mail_envelope.png" alt="Con tact us - Mail
envelope" />

<div id="close">X</div>

</div>

<div id="floatingbox_content">
<p>Some text is in here</p>

<form enctype="multipart/form-data" action="#" method="post">
<label>Your Name</label>
<input type="text" name="firstname" value=""/>
<span>(required)</span> <br />
<label><span>Your Email</span></label>
<input type="text" name="email" value=""/>
<span>(valid email required)</span> <br />
<label><span>Company Name</span></label>
<input type="text" name="company" value=""/>
<span>(required)</span> <br />
<label><span>Phone Number</span></label>
<input type="text" name="phone" value=""/>
<br />
<label><span>Product ref</span></label>
<input type="text" name="product" value=""/>
<br />
<label><span>Message</span></label>
<textarea cols="30" rows="8" name="comment"></textarea>
<br />


</form>


</div><!-- END OF FLOATINGBOX_CONTENT-->

<div id="floatingbox_footer">

<p>Some text</p>

<input type="submit" name="sendbutton2" value="Submit"
onclick="return contactforms_validate('2', false)"/>

</div>

I have set the main wrapper div "fouter" to display none, is this
correct?

my understanding is this div holding the contact form will then .show
when the user clicks the link and sets off the modal box holding the
contact form?

I have run it with firebug and I get 2 errors:

1st error: object.extend is not a function (modalbox.js)

2nd error: modalbox.show is not a function.

As far as I can see I have referenced the files correctly.. yet there
still seems to be some problems..

The site is on a test site at: www.swaray.co.uk/Casenote/index.html

I have only set up the modal box on the index.html page...

[Justinas Urbanavicius]

check your js library include order, prototype and scriptaculous should be included prior to modalbox.js

[Owz]

I have made sure that this is the case but I now get the following
error:

modalbox is not defined...

and it points to the following section of code:

function onclick(event) {

[Justinas Urbanavicius]

That means that modalbox.js is not included.

the correct including sequence should be prototype.js, scriptacuous.js, modalbox.js.

[Owz]

I have put them in the right order but yet Im still getting an error
in my firebug console: modal box not defined: and points to this line
of code Modalbox.show($("fouter"), {title: this.title, width: 650});

Another side question: Am I supposed to hide the div I want to appear
in the modal box using inline styling so that when the modal box
script is fired it unhides itself?

the page can be viewed at: www.swaray.co.uk/Casenote in case anyone
can help.. You'l notice the contact form at the bottom of the page is
the one I want to appear in the modal box.. I have yet to hide it...

On May 29, 6:56 pm, Justinas Urbanavicius <justin...@gmail.com> wrote:
> That means that modalbox.js is not included.
>
> the correct including sequence should be prototype.js, scriptacuous.js,
> modalbox.js.
>

[Justinas Urbanavicius]

yea, I can now see what is the problem, if you would just click the NET tab in the firebug you would see it for yourself.

[Owz]

When I click on the net tab I just get a blank window??

On Jun 3, 11:42 am, Justinas Urbanavicius <justin...@gmail.com> wrote:
> yea, I can now see what is the problem, if you would just click the NET tab
> in the firebug you would see it for yourself.
>

> On Wed, Jun 3, 2009 at 1:34 PM, Owz <willow...@hotmail.com> wrote:
>
> > I have put them in the right order but yet Im still getting an error
> > in my firebug console: modal box not defined: and points to this line
> > of code Modalbox.show($("fouter"), {title: this.title, width: 650});
>
> > Another side question: Am I supposed to hide the div I want to appear
> > in the modal box using inline styling so that when the modal box
> > script is fired it unhides itself?
>

> > the page can be viewed at:www.swaray.co.uk/Casenotein case anyone

[Justinas Urbanavicius]

refreesh the page, and look for red messages.

[Justinas Urbanavicius]

net has to be enabled.

[Gareth McCumskey]

Let me answer that more explicitly. The Firebug Net window shows that
your prototype.js, scriptaculous.js and modlabox.js cannot be found,
i.e. your paths are incorrect

--
Gareth McCumskey
http://garethmccumskey.blogspot.com
twitter: @garethmcc

[Justinas Urbanavicius]

let the man figure it out by himself :)

the harder the lesson, the better it is learned.

[Owz]

Thank you.. both, Im still getting an issue.. the new error i have is
coming from the prototype.js file

element.dispatchEvent is not a function and when I click on the
contact link tag to set off the modal box another error pops up: $
(element).update is not a function

arrrghhh.. The documentation seemed easy yet I keep running into
errors.. :(

On Jun 3, 3:20 pm, Justinas Urbanavicius <justin...@gmail.com> wrote:
> let the man figure it out by himself :)
>
> the harder the lesson, the better it is learned.
>

> On Wed, Jun 3, 2009 at 4:50 PM, Gareth McCumskey <gmccums...@gmail.com>wrote:
>
>
>
> > Let me answer that more explicitly. The Firebug Net window shows that
> > your prototype.js, scriptaculous.js and modlabox.js cannot be found,
> > i.e. your paths are incorrect
>

> > On Wed, Jun 3, 2009 at 1:21 PM, Owz <willow...@hotmail.com> wrote:
>
> > > When I click on the net tab I just get a blank window??
>
> > > On Jun 3, 11:42 am, Justinas Urbanavicius <justin...@gmail.com> wrote:
> > >> yea, I can now see what is the problem, if you would just click the NET
> > tab
> > >> in the firebug you would see it for yourself.
>
> > >> On Wed, Jun 3, 2009 at 1:34 PM, Owz <willow...@hotmail.com> wrote:
>
> > >> > I have put them in the right order but yet Im still getting an error
> > >> > in my firebug console: modal box not defined: and points to this line
> > >> > of code Modalbox.show($("fouter"), {title: this.title, width: 650});
>
> > >> > Another side question: Am I supposed to hide the div I want to appear
> > >> > in the modal box using inline styling so that when the modal box
> > >> > script is fired it unhides itself?
>

> > >> > the page can be viewed at:www.swaray.co.uk/Casenoteincase anyone

[Justinas Urbanavicius]

it might be because you are using jquery framework with prototype, there should be somewhere mentioned how to make them compatible.

[Owz]

I managed to test the modal box without the jquery libarary and your
right it works when they are not together.. So there is obviously a
conflict...

I've also noticed that with the modal box working the overlay window
opens but with no content in it.. I cannot of referenced the div
correctly..

The link for the modalbox is:

<a onclick="Modalbox.show($('fouter'), {title: this.title, width:

650}); return false;" title="Contact us" href="#">Contact</a>

"fouter" is the div which holds my form as previsouly mentioned
above... How do I reference the div properly so that it pulls the
content into the window overlay?

Currently fouter has an inline style display:none;

On Jun 3, 5:01 pm, Justinas Urbanavicius <justin...@gmail.com> wrote:
> it might be because you are using jquery framework with prototype, there
> should be somewhere mentioned how to make them compatible.
>

[Gareth McCumskey]

Try without the protoype function $ and just the element name 'fouter' as such:

<a onclick="Modalbox.show('

fouter', {title: this.title, width:

650}); return false;" title="Contact us" href="#">Contact</a>

[Owz]

I did that and now the modal box has a loading image going round and
around but nothing loads.. it just remains in that state...

hmmmmm :(

[Justinas Urbanavicius]

it should be like you wrote the first time $('fouter'), the div id="fouter" should be set on the element you hold your text.

allso read this http://docs.jquery.com/Core/jQuery.noConflict it should help you resolve your problems with jquery and prototype.

[Owz]

the link to the page is www.swaray.co.uk/Casenote

if you want to look at the latest version..

I have taken out the jcarasoul scripts so the page will have the
content sliders going down the page.. ( I have yet to figure out how
to use the jquery.noconflict script to get these two libraries to
work..)

The link calling the modal box is the contact tab top right..

[Justinas Urbanavicius]

well now your content don't fit to the modalbox because you specified a fixed height of 90px, and your content is obviously bigger so it leaps out.
if you don't specify the height modalbox will try to guess the value automatically.

[Justinas Urbanavicius]

sorry my bad,just my firebug miss-shaped the document:)

[Owz]

Justinas, Gareth... you are legends!!!... this works... just need to
figure out how I get the prototype and modal box to play together
nicely now...

On Jun 8, 12:18 pm, Justinas Urbanavicius <justin...@gmail.com> wrote:
> well now your content don't fit to the modalbox because you specified a
> fixed height of 90px, and your content is obviously bigger so it leaps out.
> if you don't specify the height modalbox will try to guess the value
> automatically.
>