Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Aug 2009
    Posts
    160
    Thanks
    42
    Thanked 2 Times in 2 Posts

    Script & iFrame within CSS?

    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

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    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

  • Users who have thanked coothead for this post:

    chevy_ls_6 (01-24-2011)

  • #3
    Regular Coder
    Join Date
    Aug 2009
    Posts
    160
    Thanks
    42
    Thanked 2 Times in 2 Posts
    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.

  • #4
    Regular Coder
    Join Date
    Aug 2009
    Posts
    160
    Thanks
    42
    Thanked 2 Times in 2 Posts
    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...

  • #5
    Regular Coder
    Join Date
    Aug 2009
    Posts
    160
    Thanks
    42
    Thanked 2 Times in 2 Posts
    Nevermind on the 1st question, I see it now...

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

  • #6
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    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....

    coothead

  • Users who have thanked coothead for this post:

    chevy_ls_6 (01-24-2011)

  • #7
    Regular Coder
    Join Date
    Aug 2009
    Posts
    160
    Thanks
    42
    Thanked 2 Times in 2 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •