Solved

DIV tag placement

Posted on 2004-04-04
7
998 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
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
Comprehensive Backup Solutions for Microsoft

Acronis protects the complete Microsoft technology stack: Windows Server, Windows PC, laptop and Surface data; Microsoft business applications; Microsoft Hyper-V; Azure VMs; Microsoft Windows Server 2016; Microsoft Exchange 2016 and SQL Server 2016.

 
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

Ransomware-A Revenue Bonanza for Service Providers

Ransomware – malware that gets on your customers’ computers, encrypts their data, and extorts a hefty ransom for the decryption keys – is a surging new threat.  The purpose of this eBook is to educate the reader about ransomware attacks.

Question has a verified solution.

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

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…
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…
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…

821 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