Script & iFrame within CSS?

chevy_ls_6 · 12-20-2010, 03:37 PM

The validator is hating the scripts & iframe within the body of my code...what's the correct way to fix this? Is there a way to call them within a div and move them to the css or elsewhere?? Do I simply need to drop the script into the header, and call them from the html, or...???

I'm new to this, so be gentle...

http://www.yenko.net/R4/index.html

coothead · 12-20-2010, 05:30 PM

Hi there chevy_ls_6,

the iframe element requires a transitional dtd rather than a a strict dtd.

Here is your corrected and validated 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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="altonR4.css" type="text/css" />
<link rel="stylesheet" href="cssverticalmenu.css" type="text/css" />
<script type="text/javascript" src="scripts/cssverticalmenu.js">
</script>
<title>Alton R-IV Public School</title>
<script type="text/javascript" src="scripts/jquery-1.4.4.js"></script>
<script type="text/javascript">
     function slideSwitch() {
    var $active = $('#slideshow IMG.active');
    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');
    $active.addClass('last-active');
    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}
$(function() {
    setInterval( "slideSwitch()", 2500 );
});
</script>
<script type="text/javascript">
//<![CDATA[
function mydate(){
/*Current date script credit: JavaScript Kit (www.javascriptkit.com)*/
 var mydate=new Date()
 var year=mydate.getYear()
if (year < 1000)
year+=1900
 var day=mydate.getDay()
 var month=mydate.getMonth()
 var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
 var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
 var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")

 document.getElementById('date').innerHTML='Today\'s Date Is: '+dayarray[day]+", "+montharray[month]+" "+daym+", "+year;
 }
 window.addEventListener?
 window.addEventListener('load',mydate,false):
 window.attachEvent('onload',mydate);
//]]>
</script>
<style type="text/css">
html, body {
    background-repeat:repeat-x;
 }
#slideshow {
    position: inherit;
    right: 0;
    height: 164px;
   width: 480px;
 }
#slideshow IMG {
    position:absolute;
    top: 0;
    right: 0;
    z-index: 197;
    opacity:0.0;
 }
#slideshow IMG.active {
    z-index: 199;
    opacity:1.0;
 }
#slideshow IMG.last-active {
    z-index: 198;
 }
.over {
    height: 164px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
 }
</style>
</head>
<body>
<div id="page-container">
<div id="header"> 
<img src="images/header_left.png" alt="" height="164" id="lCorner" /><img src="images/r4comet.png" alt="Alton R-IV" height="164" id="far-left" /><img src="images/header_right.png" alt="Alton R-IV" height="164" id="under1" /> 
<div id="slideshow">
<img src="images/slideshow/slide_pic1.PNG" alt="" width="480" height="164" id="over" class="active" />
<img src="images/slideshow/slide_pic2.PNG" alt="" width="480" height="164" class="over" />
<img src="images/slideshow/slide_pic3.PNG" alt="" width="480" height="164" class="over" />
<!--end slideshow--></div> 
<!--end header--></div>

<div id="topnav">
<div class="menu bubplastic horizontal gray">
<ul>
<li><span class="menu_r"><a href="index.html"><span class="menu_ar"><img src="images/h_nav_home.png" alt="Home"/>Home</span></a></span></li>
<li><span class="menu_r"><a href="elementary.html"><span class="menu_ar"><img src="images/h_nav_elementary.png" alt="Elementary"/>Elementary</span></a></span></li>
<li><span class="menu_r"><a href="high.html"><span class="menu_ar"><img src="images/h_nav_high.png" alt="Jr. and Sr. High"/>Jr. &amp; Sr. High</span></a></span></li>
<li><span class="menu_r"><a href="foundation.html"><span class="menu_ar"><img src="images/h_nav_foundation.png" alt="Foundation"/>Foundation</span></a></span></li>
<li><span class="menu_r"><a href="contact.html"><span class="menu_ar"><img src="images/h_nav_contact.png" alt="Contact"/>Contact Us</span></a></span></li>
</ul>
<br class="clearit" />
<!--end menu bubplastic horizontal gray--></div>
<!--end topnav--></div>
<div id="body-container">
<div id="sidenav">
<div id="date">Today's Date Is:
<!--end date--></div>
<ul id="verticalmenu" class="glossymenu">
<li><a href="http://oneschoolstreet.com/calendar.php?school_id=164&amp;yearID=2010&amp;monthID=12">Events Calendar</a></li>
<li><a href="http://partnerpage.google.com/alton.k12.mo.us">Staff Email Login</a></li>
<li><a href=" " >Plans and Policies</a>
<ul>
<li><a href="http://policy.msbanet.org/alton/">School Board Policies</a></li>
<li><a href="http://alton.k12.mo.us/school%20choice.pdf">Public School Choice</a></li>
<li><a href="http://alton.k12.mo.us/SES.pdf">Supplemental Educational Services</a></li>
<li><a href="http://alton.k12.mo.us/4th%20Cycle%20CSIP%2007.doc">Comprehensive School Improvement Plan</a></li>
<li><a href="http://alton.k12.mo.us/4th%20Cycle%20CSIP%20Goals%20and%20Objectives.doc">Comprehensive School Improvement Goals</a></li>
<li><a href="http://alton.k12.mo.us/techplan06-09.doc">Technology Plan</a></li>
</ul></li>
<li><a href=" ">Directories</a>
<ul>
<li><a href="http://alton.k12.mo.us/elemfaculty.htm">Elementary Administration and Faculty</a></li>
<li><a href="http://alton.k12.mo.us/hsfaculty.htm">High School Administration and Faculty</a></li>
</ul></li>
<li><a href="#">Handbooks</a>
<ul>
<li><a href="http://alton.k12.mo.us/elmhandbook.pdf">Elementary Handbook</a></li>
<li><a href="http://alton.k12.mo.us/hshandbook.pdf">Jr. &amp; Sr. High Handbook</a></li>
</ul></li>
<li><a href="#" >Calendars and Menus</a>
<ul>
<li><a href="http://alton.k12.mo.us/calendar 2010-11.pdf">2010-2011 School Calendar</a></li>
<li><a href="http://alton.k12.mo.us/Elementary/elem_menu.html">Elementary Menu</a></li>
<li><a href="http://alton.k12.mo.us/Jr.Sr.High/hs_menu.html">Jr. &amp; Sr. High Menu</a></li>
</ul></li>
<li><a href="#" >Resources</a>
<ul>
<li><a href="http://alton.k12.mo.us/teacher%20pages.htm">Teacher's Web Pages</a></li>
<li><a href="http://alton.k12.mo.us/Teacher%20Resources.html">Teacher Resources</a></li>
</ul></li>
<li><a href="#" >Applications</a>
<ul>
<li><a href="http://alton.k12.mo.us/cert.pdf">Certified Staff</a></li>
<li><a href="http://alton.k12.mo.us/noncert.pdf">Non-Certifed Staff</a></li>
</ul></li>
<li><a href="http://oneschoolstreet.com/calendar.php?school_id=164&amp;yearID=2010&amp;monthID=12">Community Tornado Shelter</a>
<ul>
<li><a href="http://alton.k12.mo.us/communityletter.pdf">Comunity Letter</a></li>
<li><a href="http://alton.k12.mo.us/specialneeds.pdf">Special Needs Form</a></li>
</ul></li>
<li><a href="http://dese.mo.gov/planning/profile/075087.html">District Report Card</a></li>
<li><a href="http://eatonline.missouri.edu/Userlogin.aspx?ReturnUrl=/default.aspx">EAT Online</a></li>
</ul>
<div id="events1">Upcoming Events:</div>
<div id="events">
<iframe src="http://www.oneschoolstreet.com/upcoming_events.php?school_id=164&amp;events=all&amp;numevents=4&amp;auto_scroll=0" width="200" height="460"></iframe>
<!--end events--></div>
<!--end sidenav--></div>
<div id="content">
<h1>Story1</h1>
<div id="story1">
"Story1" box: Content will go hereContent will go hereContent will go hereContent 
will go hereContent will go hereContent will go herevContent will go hereContent will go 
hereContent will go hereContent will go hereContent will go hereContent will go hereContent 
will go hereContent will go hereContent will go hereContent will go hereContent will go 
hereContent will go hereContent will go hereContent will go hereContent will go hereContent 
will go hereContent will go hereContent will go hereContent will go here
</div>
<h1>Story2</h1>
<div id="story2">
"Story2" box: Content will go hereContent will go hereContent will go hereContent 
will go hereContent will go hereContent will go herevContent will go hereContent will go 
hereContent will go hereContent will go hereContent will go hereContent will go hereContent 
will go hereContent will go hereContent will go hereContent will go hereContent will go 
hereContent will go hereContent will go hereContent will go hereContent will go hereContent 
will go hereContent will go hereContent will go hereContent will go here
</div>
<h1>Story3</h1>
<div id="story3">
"Story3" box: Content will go hereContent will go hereContent will go hereContent 
will go hereContent will go hereContent will go herevContent will go hereContent will go 
hereContent will go hereContent will go hereContent will go hereContent will go hereContent 
will go hereContent will go hereContent will go hereContent will go hereContent will go 
hereContent will go hereContent will go hereContent will go hereContent will go hereContent 
will go hereContent will go hereContent will go hereContent will go here
</div>
<h1>Story4</h1>
<div id="story4">
"Story4" box: Content will go hereContent will go hereContent will go hereContent 
will go hereContent will go hereContent will go herevContent will go hereContent will go 
hereContent will go hereContent will go hereContent will go hereContent will go hereContent 
will go hereContent will go hereContent will go hereContent will go hereContent will go 
hereContent will go hereContent will go hereContent will go hereContent will go hereContent 
will go hereContent will go hereContent will go hereContent will go here
</div>
<!--end content--></div>
<!--end body-container--></div>
<div id="footer"><span class="float"><img src="images/letter.png" alt="image" /></span>
<div id="footer-author">Content maintained by the <a href="http://alton.k12.mo.us/hreese/" style="text-decoration:none">Elementary Computer Lab</a>
</div>
<div id="motto">"All Students Can Learn and Be Successful"
</div>
<div id="author">XHTML/CSS by RTC
</div>
<div id="copy">Copyright &copy; 2010 - Alton R-IV
</div>
<!--end footer--></div>
<!--end page-container--></div>
</body>
</html>

coothead

chevy_ls_6 · 12-20-2010, 06:40 PM

Thanks for the help, but it's a bit depressing...I was *hoping* to adhere to the strict standard, but I'm saddled with the iframe bit until the supplier goes a different route, so unless I can figure out a workaround for that I guess I'm stuck @ transitional..blah.

chevy_ls_6 · 12-20-2010, 06:52 PM

Stupid question time, so bear with me...(!)

1) how does the date script know *where* to place itself, being as it's thrown into the header and my "date" div is empty? It works, but I'm not getting the "how" part...??

2) why must some of the css be called out in the header of the html itself, instead of referencing it all from the linked css? That one has puzzled me for a bit...

chevy_ls_6 · 12-20-2010, 07:41 PM

Nevermind on the 1st question, I see it now...

Code:

document.getElementById('date').innerHTML='Today\'s Date Is: '+dayarray[day]+", "+montharray[month]+" "+daym+", "+year;
 }

coothead · 12-20-2010, 08:11 PM

Hi there chevy_ls_6,

I corrected and validated your page for you.

Is there any reason why you decided not to use it in it's entirety?

Your page now shows 14 errors and 21 warnings....

http://validator.w3.org/check?verbos...4%2Findex.html

coothead

chevy_ls_6 · 12-20-2010, 08:20 PM

Hmmm...I thought I did, but it's quite possible I accidently reverted back to an older copy somehow? I had a couple windows open for a while, and had to stop and leave for a minute.

It appears golden now, though, thanks!