Forum:

HTML Pages with CSS and JavaScript

my overlay box works in Firefox, but fails in IE8

Greenhorn

Posts: 13

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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');

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Overlay test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	#helpOverlay { background-color: #ccffcc; display: none; margin-left: 40px; position: absolute; width: 400px; height: 200px; visibility: visible }
	#helpContainer{ color: black; background-color: #0ff; text-align: center; position: absolute; width: 100%; overflow: visible; visibility: visible; display: block }
	</style>
	<script type="text/javascript">//<![CDATA[
	function hideHelpContent() {
		document.getElementById('helpOverlay').style.display = 'none';
		var helpContent = document.getElementById('helpContent');
		helpContent.innerHTML = '';
	}

// Get the left and the top of the element.
	function ds_getleft(el) {
		var tmp = el.offsetLeft;
		el = el.offsetParent
		while(el) {
			tmp += el.offsetLeft;
			el = el.offsetParent;
		}
		return tmp;
	}
	function ds_gettop(el) {
		var tmp = el.offsetTop;
		el = el.offsetParent
		while(el) {
			tmp += el.offsetTop;
			el = el.offsetParent;
		}
		return tmp;
	}

//]]></script>
</head>
<body>

<div id="helpContainer"><div id="helpOverlay"><a href="#" onclick="hideHelpContent();" style="float: right;">close</a><div id="helpContent"></div></div></div>
<br />
<br />
<br />
<br />
<br />
<br />
<img id="helpA" alt="" onclick="showHelpContent('helpA')" src="../images/newsimage39.gif">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<img id="helpB" alt="" onclick="showHelpContent('helpB')" src="../images/newsimage39.gif">

</body>
</html>

Bear Bibeault

Sheriff

Posts: 67754

173

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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] [About Bear] [Books by Bear]

HTML 5 (verified skill)
Skill verified by Jeanne Boyarsky

CSS 3 (verified skill)
Skill verified by Jeanne Boyarsky

JavaScript (verified skill)
Skill verified by Jeanne Boyarsky

Jason Carol

Greenhorn

Posts: 13

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

Posts: 13

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

Sheriff

Posts: 67754

173

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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?

[Asking smart questions] [About Bear] [Books by Bear]

Jason Carol

Greenhorn

Posts: 13

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

Sheriff

Posts: 67754

173

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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.

[Asking smart questions] [About Bear] [Books by Bear]

Bear Bibeault

Sheriff

Posts: 67754

173

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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.

[Asking smart questions] [About Bear] [Books by Bear]

Bear Bibeault

Sheriff

Posts: 67754

173

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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.)

[Asking smart questions] [About Bear] [Books by Bear]

Jason Carol

Greenhorn

Posts: 13

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

Sheriff

Posts: 67754

173

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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.

[Asking smart questions] [About Bear] [Books by Bear]

Jason Carol

Greenhorn

Posts: 13

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

Posts: 13

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

Posts: 13

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

Sheriff

Posts: 67754

173

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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.

[Asking smart questions] [About Bear] [Books by Bear]

Jason Carol

Greenhorn

Posts: 13

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

Sheriff

Posts: 67754

173

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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).

[Asking smart questions] [About Bear] [Books by Bear]

Bear Bibeault

Sheriff

Posts: 67754

173

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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.

[Asking smart questions] [About Bear] [Books by Bear]

Bear Bibeault

Sheriff

Posts: 67754

173

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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.

[Asking smart questions] [About Bear] [Books by Bear]

Jason Carol

Greenhorn

Posts: 13

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

Sheriff

Posts: 67754

173

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

[Asking smart questions] [About Bear] [Books by Bear]

Jason Carol

Greenhorn

Posts: 13

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

Sheriff

Posts: 67754

173

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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.

[Asking smart questions] [About Bear] [Books by Bear]