Solved

DIV tag placement

Posted on 2004-04-04
7
1,001 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
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 
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

Transaction Monitoring Vs. Real User Monitoring

Synthetic Transaction Monitoring Vs. Real User Monitoring: When To Use Each Approach? In this article, we will discuss two major monitoring approaches: Synthetic Transaction and Real User Monitoring.

Question has a verified solution.

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

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…

717 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