Solved

DIV tag placement

Posted on 2004-04-04
7
1,000 Views
Last Modified: 2008-02-01
I have written a function to show a DIV tag and place it to the middle of the screen. The DIV tag is 750px wide - so lines 2 and 3 work out how wide the window is, and the value of the DIV tag's left property.

This all works fine in FireFox, but not in internet explorer! This bit is in a seperate .js file:

function showdivtag (tagname) {
      var screenwidth = window.innerWidth / 2;
      var leftside = screenwidth - 375;
      var obj = document.getElementById(tagname);
            obj.style.left = leftside;
            obj.style.visibility = "visible";
}

and it is called (after being linked with <script SRC="page.js" etc etc>) with this:

<a onMouseDown="showdivtag('history')"><img src="history.gif"></a>

The problem is that line 5 (obj.style.left = total;) doesn't work in Internet Explorer! It comes up with an error saying "Invalid Argument". Although, the script works fine in FireFox.

Please help me with this! Many Thanks!
0
Comment
Question by:mrtjacobs
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
7 Comments
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10753754
In ie I believe you need:

screen.width

so your code would be:

function showdivtag (tagname) {
     var screenwidth = ie?screen.width/2:window.innerWidth / 2;
     var leftside = screenwidth - 375;
     var obj = document.getElementById(tagname);
          obj.style.left = leftside;
          obj.style.visibility = "visible";
}
0
 
LVL 12

Accepted Solution

by:
lil_puffball earned 125 total points
ID: 10753757
oops, forgot a line:

unction showdivtag (tagname) {
     ie=document.all;
     var screenwidth = ie?screen.width/2:window.innerWidth / 2;
     var leftside = screenwidth - 375;
     var obj = document.getElementById(tagname);
          obj.style.left = leftside;
          obj.style.visibility = "visible";
}
0
 

Author Comment

by:mrtjacobs
ID: 10753761
Great! That fixed it! Although, would you care to roughly explain what that code actually does?

Many Thanks!
0
Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

 
LVL 25

Expert Comment

by:devic
ID: 10753762
var screenwidth = window.innerWidth? window.innerWidth/2:document.body.clientWidth/2;
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10753780
Thanks for the points and the A. :)

Basically, screenwidth is half the width of the screen. I guess the popup is 750 px width (375*2) so you subtract 375 from half the screen width. And that's the left position of the div. So you effectively centre it...
It's hard to tell without the html, but I think that's what it basically does. :)
0
 

Author Comment

by:mrtjacobs
ID: 10756182
Ah, i knew that... I wrote the whole code from scratch!

Just the bit you added, where you put

     ie=document.all;
     var screenwidth = ie?screen.width/2:window.innerWidth / 2;

in place of

     var screenwidth = window.innerWidth / 2;

... i guess it just uses screen.width if the browser is IE, else it uses window.innerWidth?

No problem with the A and the points, you gave me a working answer within 10 minutes so you deserved it!
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10761237
Oops. x_x
In that case, you're absolutely correct. document.all is an IE only thing, and IE only uses screen.width, so it's safe to check for IE with document.all...though you might know that too... :P
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
ASP sending two datas 2 23
javascript form submition 2 22
Html date format 9 20
Put POST values into cookies. 14 35
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

730 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