Log in   Register a New Account

Accessify Forum - Discuss Website Accessibility

New to the forum?

Only an email address is required.

Register Here

Already registered? Log In

Currently Online

No registered users are online.

Validating Scripts in XHTML Transitional?

  • Reply to topic
  • Post new topic

Home / XStandard Accessibility Forum / Validating Scripts in XHTML Transitional?

18 Oct 2005 02:32 am

newseed

P: 31

Reply with quote I am having trouble getting this script to validate in XHTML Transitional but it will validate just fine in HTML 4.01 Transitional.

The code:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Sanford Naval Academy - Class of 1965</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="Abstract" content="" />
<meta name="Author" content="" />
<meta name="Copyright" content="Contents are copyrighted to" />
<meta name="Distribution" content="Global" />
<meta name="Revisit-After" content="30 Days" />
<meta http-equiv="Content-Language" content="en-us" />

<link rel="stylesheet" type="text/css" href="sna-style.css" />

<script language="JavaScript" type="text/javascript">

//really not important (the first two should be small for Opera's sake)
PositionX = 10;
PositionY = 10;
defaultWidth  = 600;
defaultHeight = 400;

//kinda important
var AutoClose = true;

//don't touch
function popImage(imageURL,imageTitle){
   var imgWin = window.open('','_blank','scrollbars=no,resizable=1,width='+defaultWidth+',height='+defaultHeight+',left='+PositionX+',top='+PositionY);
   if( !imgWin ) { return true; } //popup blockers should not cause errors
   imgWin.document.write('<html><head><title>'+imageTitle+'<\/title><script type="text\/javascript">\n'+
      'function resizeWinTo() {\n'+
      'if( !document.images.length ) { document.images[0] = document.layers[0].images[0]; }'+
      'var oH = document.images[0].height, oW = document.images[0].width;\n'+
      'if( !oH || window.doneAlready ) { return; }\n'+ //in case images are disabled
      'window.doneAlready = true;\n'+ //for Safari and Opera
      'var x = window; x.resizeTo( oW + 200, oH + 200 );\n'+
      'var myW = 0, myH = 0, d = x.document.documentElement, b = x.document.body;\n'+
      'if( x.innerWidth ) { myW = x.innerWidth; myH = x.innerHeight; }\n'+
      'else if( d && d.clientWidth ) { myW = d.clientWidth; myH = d.clientHeight; }\n'+
      'else if( b && b.clientWidth ) { myW = b.clientWidth; myH = b.clientHeight; }\n'+
      'if( window.opera && !document.childNodes ) { myW += 16; }\n'+
      'x.resizeTo( oW = oW + ( ( oW + 200 ) - myW ), oH = oH + ( (oH + 200 ) - myH ) );\n'+
      'var scW = screen.availWidth ? screen.availWidth : screen.width;\n'+
      'var scH = screen.availHeight ? screen.availHeight : screen.height;\n'+
      'if( !window.opera ) { x.moveTo(Math.round((scW-oW)/2),Math.round((scH-oH)/2)); }\n'+
      '}\n'+
      '<\/script>'+
      '<\/head><body onload="resizeWinTo();"'+(AutoClose?' onblur="self.close();"':'')+'>'+
      (document.layers?('<layer left="0" top="0">'):('<div style="position:absolute;left:0px;top:0px;display:table;">'))+
      '<img src='+imageURL+' alt="Loading image ..." title="" onload="resizeWinTo();">'+
      (document.layers?'<\/layer>':'<\/div>')+'<\/body><\/html>');
   imgWin.document.close();
   if( imgWin.focus ) { imgWin.focus(); }
   return false;
}
</script>
</head>

<body>

<div id="container">
  <div id="banner">
    <div id="seal-left">
    </div>
    <div id="seal-right">
    </div>
  </div>
  <div id="middle">
    <div id="left-menu">
&nbsp; <!--webbot bot="Include" u-include="_include-pages/left-col.htm" tag="BODY" --></div>
    <div id="right-col">
&nbsp; <!--webbot bot="Include" u-include="_include-pages/right-col.htm" tag="BODY" --></div>
    <div id="centre">
      <h1 class="smallh1">Class of 1965</h1>
      <p class="center">Click on thumbnail for larger image.</p>
      <div class="center">
        <a href="images/class-of-65-large.jpg" onclick="return popImage(this.href,'Sanford Naval Academy');">
        <img src="images/class-of-65-large_small.jpg" alt="Class of 65" /></a>
      </div>
    </div>
    <div class="clearer">
    </div>
  </div>
  <div id="footer">
    <div class="footer">
      <!--webbot bot="Include" u-include="_include-pages/footer.htm" tag="BODY" --></div>
  </div>
</div>

</body>

</html>


Thanks for your time.
http://www.thekaspergroup.com

Top of Page

18 Oct 2005 07:30 am

Bill Posters

P: 991

Reply with quote It's only an issue because you've got it in the markup document.
Put all the javascript into an external javascript file and associate it to the markup document using a sourced script element.

i.e.

sna-script.js
Code:
//really not important (the first two should be small for Opera's sake)
PositionX = 10;
PositionY = 10;
defaultWidth  = 600;
defaultHeight = 400;

//kinda important
var AutoClose = true;

//don't touch
function popImage(imageURL,imageTitle){
   var imgWin = window.open('','_blank','scrollbars=no,resizable=1,width='+defaultWidth+',height='+defaultHeight+',left='+PositionX+',top='+PositionY);
   if( !imgWin ) { return true; } //popup blockers should not cause errors
   imgWin.document.write('<html><head><title>'+imageTitle+'<\/title><script type="text\/javascript">\n'+
      'function resizeWinTo() {\n'+
      'if( !document.images.length ) { document.images[0] = document.layers[0].images[0]; }'+
      'var oH = document.images[0].height, oW = document.images[0].width;\n'+
      'if( !oH || window.doneAlready ) { return; }\n'+ //in case images are disabled
      'window.doneAlready = true;\n'+ //for Safari and Opera
      'var x = window; x.resizeTo( oW + 200, oH + 200 );\n'+
      'var myW = 0, myH = 0, d = x.document.documentElement, b = x.document.body;\n'+
      'if( x.innerWidth ) { myW = x.innerWidth; myH = x.innerHeight; }\n'+
      'else if( d && d.clientWidth ) { myW = d.clientWidth; myH = d.clientHeight; }\n'+
      'else if( b && b.clientWidth ) { myW = b.clientWidth; myH = b.clientHeight; }\n'+
      'if( window.opera && !document.childNodes ) { myW += 16; }\n'+
      'x.resizeTo( oW = oW + ( ( oW + 200 ) - myW ), oH = oH + ( (oH + 200 ) - myH ) );\n'+
      'var scW = screen.availWidth ? screen.availWidth : screen.width;\n'+
      'var scH = screen.availHeight ? screen.availHeight : screen.height;\n'+
      'if( !window.opera ) { x.moveTo(Math.round((scW-oW)/2),Math.round((scH-oH)/2)); }\n'+
      '}\n'+
      '<\/script>'+
      '<\/head><body onload="resizeWinTo();"'+(AutoClose?' onblur="self.close();"':'')+'>'+
      (document.layers?('<layer left="0" top="0">'):('<div style="position:absolute;left:0px;top:0px;display:table;">'))+
      '<img src='+imageURL+' alt="Loading image ..." title="" onload="resizeWinTo();">'+
      (document.layers?'<\/layer>':'<\/div>')+'<\/body><\/html>');
   imgWin.document.close();
   if( imgWin.focus ) { imgWin.focus(); }
   return false;
}


markup
Code:
...
<link rel="stylesheet" type="text/css" href="sna-style.css" />
<script type="text/javascript" src="sna-script.js"></script>
</head>


That's how you should ideally be doing it anyway.

Top of Page

18 Oct 2005 10:46 am

dotjay
Moderator

P: 1937
L: North Devon, UK

Reply with quote You might also like to add that onclick functionality using JavaScript as well.

Something like:
Code:
<a href="image.jpg" class="popimage">Blah</a>


and:
Code:
window.onload = function () {

// check DOM method support
if (!document.getElementsByTagName) return true;

// get links in the page
myLinks = document.getElementsByTagName('a');

// go through each link
for (var i=0;i<myLinks.length;i++) {
   // check class attribute
   if (myLinks[i].className.match('popimage')) {
      // add onclick function
      myLinks[i].onclick = function () {
         popImage(this.href,'Sanford Naval Academy');
      }
      if (myLinks[i].captureEvents) myLinks[i].captureEvents(Event.CLICK);
   }
}


Also, if you're not posting about XStandard, your post shouldn't be in this forum. In future, please consider posting this sort of help (general HTML help) in the Coffee Break forum.
Jon Gibbins, dotjay.co.uk, accessibility.co.uk wiki.

Top of Page

18 Oct 2005 02:14 pm

newseed

P: 31

Reply with quote I will be more aware next time to post my questions in the appropiate topics.

Thanks for you help.
http://www.thekaspergroup.com

Top of Page

Display posts from previous:   

All times are GMT
  • Reply to topic
  • Post new topic