Solved

DIV tag placement

Posted on 2004-04-04
7
996 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
  • 4
  • 2
7 Comments
 
LVL 12

Expert Comment

by:lil_puffball
Comment Utility
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
Comment Utility
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
Comment Utility
Great! That fixed it! Although, would you care to roughly explain what that code actually does?

Many Thanks!
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 25

Expert Comment

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

Expert Comment

by:lil_puffball
Comment Utility
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
Comment Utility
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
Comment Utility
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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
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…
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…

772 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now