need advice on layering a php loader page

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
m1e1w1
Forum Newbie
Posts: 2
Joined: Sun Apr 25, 2010 5:25 pm

need advice on layering a php loader page

Post by m1e1w1 »

hello all,

i have a page written with php and java script working to produce a scroller. now, the scroller works just fine. however the problem with it is that where it needs to be located is right under a dropdown menu of page links. and if you ever seen this happen, the loaded .php scroller file text shows up over the dropdown menu. is there a way to ensure the text stays behind the dropdown menu at all times? it looks bad when the text scrolls over the rest of the links.

Code: Select all

<?php
require_once './php/config.php';
$Page = new Page( 'home', 'Home' );
?>
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'
    <title><?php echo $Page->PAGE['name'];?></title>
    <link rel='stylesheet' type='text/css' href='./style/main.css'>
    <style type='text/css'>
      div#scrollDiv {
        width: 200px;
        height: 330px;
        overflow: hidden;
      }
    </style>
    <script type='text/javascript' src='./scripts/drop.js'></script>
    <script type='text/javascript'>
      var scrollSpeed = 50; /* decrease value to increase speed */
      
      var scrollDiv = false;
      var scrollHTML = false;
      var scrollHeight;
      var htmlHeight;  
      
      var theScrollers = new Array();
      var origScrollSpeed = false;
      
      function initScroll ( containerId ) {
        var topPos = theScrollers[containerId]['objRef'].style.top.replace( /[^\-0-9]/g, '' );
        topPos = topPos - theScrollers[containerId]['scrollSpeed'];
        if ( topPos / 1 + theScrollers[containerId]['htmlHeight'] / 1 < 0 )
          topPos = theScrollers[containerId]['scrollHeight'];
        theScrollers[containerId]['objRef'].style.top = topPos + 'px';
        setTimeout( 'initScroll("' + containerId + '")', scrollSpeed );
      }
      
      function stopScrolling ( ) {
        var containerId = this.id;
        theScrollers[containerId]['scrollSpeed'] = 0;  
      }
      
      function startScrolling ( ) {
        var containerId = this.id;
        theScrollers[containerId]['scrollSpeed'] = theScrollers[containerId]['originalSpeed'];
      }
      
      function initScrollingContent ( containerId, scrollSpeed ) {
        scrollDiv = document.getElementById( containerId );
        scrollHTML = scrollDiv.getElementsByTagName( 'DIV' )[0];
        
        scrollDiv.style.position = 'relative';
        scrollDiv.style.overflow = 'hidden';
        scrollHTML.style.position = 'relative';
        scrollHTML.style.top = '0px';
        scrollDiv.onmouseout = startScrolling;
        scrollDiv.onmouseover = stopScrolling;
        origScrollSpeed = scrollSpeed;
        
        theScrollers[containerId] = new Array();
        theScrollers[containerId]['objRef'] = scrollHTML;
        theScrollers[containerId]['htmlHeight'] = scrollHTML.offsetHeight;
        theScrollers[containerId]['scrollHeight'] = scrollDiv.clientHeight;
        theScrollers[containerId]['scrollSpeed'] = scrollSpeed;
        theScrollers[containerId]['originalSpeed'] = scrollSpeed;
        
        initScroll( containerId ); 
      }
    </script>
  </head>
  <body>
    <div id='wrapper'>
      <div id='topper'>
        <div id='bar_1'>
          **area where link bar loads images**
        </div>

        <div id='search'>
          **site search function**
        </div>

         <ul id='bar_2'>
            <li>
              <a href='./' class='home'><span>Home</span></a>
              <ul>
                <li><a href='./sitemap.php'>Site Map</a></li>
              </ul>
            </li>

            <li>
              <a href='./news/' class='news'><span>News</span></a>
                <ul>
                  <li><a href='./news/'>News</a></li>
                  <li><a href='./news/announcements.php'>News</a></li>
                  <li><a href='./programs/'>Program1</a></li>
                  <li><a href='./programs/page.php'>Page</a></li>
                </ul>
            </li>

            <li>
              <a href='./hr/' class='c'><span>Center</span></a>
                <ul>
                  <li><a href='./c/'>Resources</a></li>
                  <li><a href='file:\\filedirectory' target='_blank'>Forms</a></li>
                  <li><a href='./c/page1.php'>page1</a></li>
                  <li><a href='./c/page2.php'>page2</a></li>
                  <li><a href='./c/page3.php'>page3</a></li>
                  <li><a href='./c/page4.php'>page4</a></li>
                  <li><a href='./c/page5.php'>page5</a></li>
                </ul>
            </li>
            
        </ul>

      </div>

      <div id='main'>

        <div class='holder news'>
<?php
require("./php/siteupdates.php");
?>

this shows the sections of my page where the script for the scroller is placed and then the dropdown menu followed by the php loader for the scroller called siteupdates
non relevent code has been removed.
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: need advice on layering a php loader page

Post by Christopher »

Moved to HTML forum.

You may want to set the z-index of the elements to specify what displays in front of what.
(#10850)
Post Reply