aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes my overlay box works in Firefox, but fails in IE8 Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Spring in Action this week in the Spring forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "my overlay box works in Firefox, but fails in IE8" Watch "my overlay box works in Firefox, but fails in IE8" New topic
Author

my overlay box works in Firefox, but fails in IE8

Jason Carol
Greenhorn

Joined: Mar 13, 2011
Posts: 13
Getting error in IE 8, but works ok in Firefox.

The page should show an overlay box with text in it, but this only works in Firefox but not IE can anyone see why this may be?

The error I get is...

Message: Object doesn't support this property or method
Line: 26
Char: 29
Code: 0

line 26 is..
helpContent = document.getElementById('helpContent');




Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61434
    
  67

Welcome to the Ranch.

The rather odd indentation of your code makes it unreadable. You might want to attend to that.

However, I always advise that using a library such as jQuery eliminates the vast majority of cross-browser issues such as this.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Jason Carol
Greenhorn

Joined: Mar 13, 2011
Posts: 13
OK point taken on the spaced out code.

I have previously tried Jquery but found it messed up the rest of my site due to Jquery javascript function being the same name as what I called my own! did not like the task of changing all of my own to new names and opted to remove Jquery. I have managed to get this far but I need to do is find out what the correct way to make the call that is failing and the code will be fixed.

Does anyone know the correct way to make the call that is failing?



Bear Bibeault wrote:Welcome to the Ranch.

The rather odd indentation of your code makes it unreadable. You might want to attend to that.

However, I always advise that using a library such as jQuery eliminates the vast majority of cross-browser issues such as this.
Jason Carol
Greenhorn

Joined: Mar 13, 2011
Posts: 13
looking at other javascript code i think i have worked out what is wrong with my code.




missed the var at the start of the line.

Now it is showing the box in IE it is not in the same place as in Firefox. But again I do not wish to use Jquery.

How I find this info out for IE like I have with Firefox
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61434
    
  67

Jason Carol wrote:I have previously tried Jquery but found it messed up the rest of my site due to Jquery javascript function being the same name as what I called my own!

That is impossible, unless you used the name jQuery or the name $. The $ and jQuery are the only global variables that are introduced by jQuery. All other functions and variables are either methods or properties of these names or name-spaced by these names.

Are you perhaps confusing jQuery with some other library?
Jason Carol
Greenhorn

Joined: Mar 13, 2011
Posts: 13
Ok having made a complete backup of all my files and triplicated them! How do I download Jquery? I went to their website http://docs.jquery.com/Downloading_jQuery#Current_Release but the link just shows my a text file ?
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61434
    
  67

Jason Carol wrote:Now it is showing the box in IE it is not in the same place as in Firefox.

Most likely due to the differing ways that the box model is interpreted.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61434
    
  67

Jason Carol wrote:but the link just shows my a text file ?

That's the library. Just right-click on the link and save the file to wherever you want. Or you can copy/paste the text into a file of your choosing.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61434
    
  67

P.S. If you are creating overlays, there are tons of plugins that you can use if one suits your needs. There's jQuery UI's dialog, jQuery Tools, and Facebox to name a few. (I personally hate re-inventing the wheel if someone else has already create a nicer wheel.)
Jason Carol
Greenhorn

Joined: Mar 13, 2011
Posts: 13
true about reinventing the wheel, thats why i really wanted to use other means.

But worked out that the text was the jquery code !

so now i have the code and uploaded it with the same name and added it to my head tag to load with the page ,.....

how do i use it ?!!!
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61434
    
  67

Well, you obviously need to learn the library. It handles the browser differences that are vexing you.

The online docs are good, and there are tutorials on the net. And there's always my book on jQuery f you are so inclined.

A few hints: for loading HTML fragments into an element using Ajax, the .load() method will be your best friend! And you can create HTML elements on the fly by passing HTML fragments to the $() function; e.g. create a new div with $('<div></div>').

The plugins I mentioned are easy to use once you know basic jQuery.
Jason Carol
Greenhorn

Joined: Mar 13, 2011
Posts: 13
ok my first script using Jquery...

and guess what i can not figure out how to get the overlay box to show ?!?! lol

Jason Carol
Greenhorn

Joined: Mar 13, 2011
Posts: 13
basically what i am trying to do is have many help icons on my site, on many pages, and i had created an ajax method to grab all the help text from another file that got placed in the text box that opened up.

how can Jquery help me with this ? and what comment (if thats what they are called) should i use to show an overlay with the text and a close button or click out of overlay to close. ?
Jason Carol
Greenhorn

Joined: Mar 13, 2011
Posts: 13
i have found this one that looks the type of overlay i am after but do not know how i can have more than one link on the page as there are no examples with multiple link only the one link method.

http://opensource.steffenhollstein.de/static/projects/modalbox/download/jquery.modalbox-1.2.0.zip

a complete beginner and seriously need some help to get a help feature that allows multiple links on the page.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61434
    
  67

Just glancing at the example code (I'll not have the time to read the docs) it looks as if adding a class (openmodalbox) to the link is what triggers the behavior (verify this in the docs). You can add a class to as many links as you like.
Jason Carol
Greenhorn

Joined: Mar 13, 2011
Posts: 13
i uploaded the files as it in the zip and for some reason it wants me to download the html file itself ?

tried it in firefox and i get all the page content and the text that should be going in the overlay showing as default on loading the page.

i have checked the pc filetypes and all seems ok and shows that it will open in firefox.

i opened the file from the extracted zip folder on my pc and it opens in firefox normall and the overlay worked

but not when i upload the same files to my site ! it wants me to download the html file
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61434
    
  67

The zip file is simply for distribution. Unpack it and within the file you will find the script files, image files, and stylesheets necessary to use the plugin (which I have never used, by the way).
Jason Carol
Greenhorn

Joined: Mar 13, 2011
Posts: 13
yep i unziped it on my pc and double clicked the index.html so it would open on my pc and the page worked as it should. but when i upload the files in the zip to a folder on my server it does not work?

it is showing the download dialog box in IE and it opens a new browser in Firefox but loads it all in text not as html.

here is a test page i am working on

http://realistichostings.com/Jquery-multibuttons/index.html
Jason Carol
Greenhorn

Joined: Mar 13, 2011
Posts: 13
as expected the site is trashed! lol glad i done a back up first !!!

i have altered the header section so you can see both versions of the site with the two different DOCTYPE's

http://www.realistichostings.com/new_2011_with_jquery/booking.php?header=old
the menu shows correctly

http://www.realistichostings.com/new_2011_with_jquery/booking.php?header=new
the menu is messed up

also now the 'airplane' and 'boat' icons do not work correctly now i have added Jquery. these shopuld show an ajax drop down of airports and seaports. these worked before i added Jquery.

also the calendar does not work anymore.

why ?
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61434
    
  67

Looks like something messed up the CSS. What's the modalbox CSS file do? (Note, that that's not an official plugin, so it's only going to be as good as the developer who published it.)

Just including jQuery itself will never affect your CSS.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61434
    
  67

As with diagnosing any other type of problem. Add things gradually and test at each juncture until you find out what's actually causing an issue.

And, yes, always keep your files in source control so that you can always back up to previous versions.
Jason Carol
Greenhorn

Joined: Mar 13, 2011
Posts: 13
oh yes this is what i do at every stage, all was working until i added Jquery, like before it messed up the site and now it still messes it up.

After adding Jquery AJAX does not work, now shows an alert box instead of overlay select window.

Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61434
    
  67

So, just adding the jQuery JavaScript library to the site without doing anything else messes things up? I find that hard to fathom.
Jason Carol
Greenhorn

Joined: Mar 13, 2011
Posts: 13
yep, nothing worked so i looked at the site i took the working overlay from and found they were using a different DOCTYPE so used the same as them and wow the overlay worked but the site was trashed, the AJAX does not work, i get statndard alert boxes instead of the overlay AJAX drop down effect, loads of errors in the html code that stops it validating.

i was using
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

but changed to the Jquery working, but everything else on my site trashed.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

just can not understand it either?!

Can I PM you and let you see the site ?
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61434
    
  67

You must use the DOCTYPE that matches your HTML. Are you using XHTML or HTML? You can't just exchange them willy-nilly.

Once again, without making ANY changes to the code, you are saying that just the act of adding the jQuery script statement to the page "ruins" the page? Yes or no? I'm finding it harder and harder to help you as you are not answering the questions that I am asking but appear to be going off and making lots of changes rather than taking things one step at a time as I have advised.
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: my overlay box works in Firefox, but fails in IE8