What are the up-to-date equivelents for this code?

[jeddiki]

Hi,

I am using some javascript to produce a new window for my
account info. It is designed to be opened looked at and then closed again.

But apparently the code is a bit old fashioned
(somebody made that remark but did not suggest how to
update it :( )

So this is my bit of code:

<script language="javascript" type="text/javascript">
<!--
var win=null;
function NewWindow(mypage,myname,w,h,scroll){
LeftPosition=300;
TopPosition=150;
settings='width='+w+',height='+h+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',location=yes,directories=no,status=no,menubar=no,toolbar=no,resizable=yes';
win=window.open(mypage,myname,settings);
if(win.focus){win.focus();}}

function hidestatus(){
window.status=''
return true
}

if (document.layers)
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT)
document.onmouseover=hidestatus
document.onmouseout=hidestatus

// -->
</script>

And the HTML that calls it:

<!-- // SF-Code Affiliate Marketing ##ak18d54kt** // --> 
<a href="http://www.support-focus.com/check.php?key=SFM64912" 
onclick="NewWindow(this.href,'','860','700','yes','default'); 
 return false" onfocus="this.blur()" >  
 <img src="http://www.support-focus.com/image_load.php?id=SFM64912" 
 alt="Support-Focus Membership Click to Verify - Before you Buy" border="0" ></a>

Apparently,
<script language="javas cript" type="text/javascript">
and
document.layers
and
<!-- // comment // -->

are all long deprecated and obsolete.

It was also suggested that I place semi colns at the end of lines and
use more { and }

BuT I am not sure where to use them.

Any suggestions and help much appreciated.

Thanks

[Dormilich]

Apparently,
<script language="javas cript" type="text/javascript">
and
document.layers
and
<!-- // comment // -->

are all long deprecated and obsolete.

more or less.
the correct script tag is now: <script type="text/javascript">
document.layers is only supported by Netscape 4 (which I doubt someone still uses)
javascript need not be wrapped in comment tags any more (except for XHTML, where you require CDATA tags)

the standard way of using events is via Element.addEven tListener() (not supported by IE, but there are lots of cross-browser solutions available)

[jeddiki]

Thanks for that.

So the comment tags the guy was talking about is just the ones in my javascript, not the ones in the HTML ?

As I already have the function,
function hidestatus() does that mean that I may as well
simply delete the if (document.layer s) block ?

So my code becomes:

<script type="text/javascript">
var win=null;
function NewWindow(mypage,myname,w,h,scroll){
 LeftPosition=300;
 TopPosition=150;
settings='width='+w+',height='+h+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',location=yes,directories=no,status=no,menubar=no,toolbar=no,resizable=yes';
win=window.open(mypage,myname,settings);

 if(win.focus){
    win.focus();
 }
} 
  function hidestatus(){
    window.status=''
    return true
  }
 </script>

Anything else I need to do ?


One more question.

If I want to put the code on my server and just include the
js file with this:

<script type="text/javascript" src="http://www.example.com/code.js">
</script>

Does the code.js file also need to have the

script tags ( which would double them up ) or
shoul the file just contain the code without the
surrounding script tags ?

[Dormilich]

does that mean that I may as well simply delete the if (document.layer s) block ?

yepp.

So the comment tags the guy was talking about is just the ones in my javascript, not the ones in the HTML ?

yes, although you should use comments, to document your code (be it HTML, JavaScript, CSS or anything else)

Anything else I need to do ?

move the events to the JavaScript.

ex.

// instead of 
<a href="…"  onclick="NewWindow(this.href,'','860','700','yes','default');  return false" onfocus="this.blur()" > 

// you can do
<a id="test" href="…">

// [I]addEvent()[/I] is one of the mentioned cross-browser solutions
// note that newWindow requires some rewriting
document.getElementById("test").addEvent("click", function() { newWindow(…)}, false);
// another note: the object oriented approach may come in handy here

what object oriented may look like:

function NewWindow(name, w, h, elem)
{
    // some tests to prevent invalid values …
    // width of new window
    this.width = w;
    // height of new window
    this.height = h;
    // name of new window
    this.name = name;
    // some window properties always delivered
    this.defaultProps = "…";
    this.prepareFor(elem);
}

// copy the object instance to the element, otherwise you’re out of scope later
NewWindow.prototype.prepareFor = function(elem)
{
    // test if [I]elem[/I] is really an html element …
    elem.newWindow = this;
}

// method to make a new window
NewWindow.prototype.open = function()
{
    var href = this.href;
    // prevent normal href execution
    this.href = "";
    // open new window
    window.open(href, this.newWindow.name, this.newWindow.properties());
}

// some more methods …

// how to use:

// create object
var link = document.getElementById("test");
var win = new NewWindow("boogle", 800, 600, link);
// add some properties …

// attach event
link.addEvent("click", win.open, false);

[jeddiki]

Thanks for spending the time to
write that oop but for this little bit of
code it seems a bit ott.

Your idea to move code out of the HTML and into the js
code is great. That is what I want to do but I did not follow what you
wrote :(

Does this bit of code go in the top (js portion)
or is it meant to stay in the HTML ?

document.getElementById("test").addEvent("click", function() { newWindow(…)}, false);

You said I need to rewrite the newWindow ???

[Dormilich]

but for this little bit of code it seems a bit odd.

that’s the only way, if you don’t want to use anonymous functions. besides, JavaScript is all about objects. objects are way more flexible than a simple function call, in the end, you don’t have that much more code.

Does this bit of code go in the top (js portion) or is it meant to stay in the HTML ?

despite the HTML code it is meant to stay in the JavaScript (resp. it is meant to stay out of the HTML)

You said I need to rewrite the newWindow ???

if you use elem.addEventLi stener("event", fn_callback, capture) then the event handler functions change the scope of the function fn_callback() (the meaning of "this" changes), which I use in the OOP approach.

you could even do something like

document.getElementById("test").setupWindow({name: "boogle", width: 800, height: 600, scrollbars: "yes" });

[Dormilich]

I ended up with an implementation of Element.setupWi ndow() that barely takes up 40 lines…

[acoder]

One more question.

If I want to put the code on my server and just include the
js file with this:

<script type="text/javascript" src="http://www.example.com/code.js">
</script>

Does the code.js file also need to have the

script tags ( which would double them up ) or
shoul the file just contain the code without the
surrounding script tags ?

Just the code without the tags because it's a JavaScript file and doesn't need HTML script tags.

Two quick points:
1. If you're going to delete the "document.layer s block", note that that meant just the one (or two lines) because the if statement only applied to the line below it. So, you would keep the following two lines:

document.onmouseover=hidestatus;
document.onmouseout=hidestatus;

However, if you're replacing this with the advanced event registration (addEventListen er or equivalent), then that's not a problem.
2. You should also look at your indenting. If you indent properly, it makes the code a lot easier to follow.

[jeddiki]

Thanks for your input.

I have ended up with 5 lines of code in my script
and I have stripped down my HTML as well.

var win=null;
function NewWindow(mypage,myname){
settings='width=850,height=500,top=200,left=50,scrollbars=yes,location=yes,directories=no,status=no,menubar=no,toolbar=no,resizable=yes';
win=window.open(mypage,myname,settings);
if(win.focus){win.focus();}}

HTML:

<a href=\"http://www.example.com/index.php?key=$sup_cd2\" 
onclick=\"NewWindow(this.href,''); return false\" onfocus=\"this.blur()\" >  
<img src=\"http://www.example.com/image_load.php?id=$sup_cd2\" 
alt=\"Click to Verify - Before you Buy\" border=\"0\" ></a>

This appears to be working fine..

Unless you see a problem with it, I think I'll use this as my default code but
if some clients want to be able to change the window position and size then I could supply a second version that allows the passing of those parameters.

It has been a useful excercise - I know a bit more now :)

Thanks for the OOP example, I am using some OOP in my php scripts, but in this case it just seems a bit unnecessary to create those objects and call them etc etc. when I can do what I need in 5 lines. But - thanks because working through it helped me a bit more with OOP.

If I have made a mistake with the code please let me know. thanks :)

[acoder]

One other suggestion: you can avoid opening new windows by using DHTML (a window-like container within the page).