3 Replies Latest reply on Apr 8, 2010 1:33 PM by Zabeth69

    Why is my drop down spry menu not working in any browsers?

    MeeraJason

       

       

      Created a template and saved as index.dwt as follows:

       

      The whole page looks like this:

      Screen shot 2010-04-05 at 21.20.02.png

       

      Here is the code for the above page:

       


      <!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=UTF-8" />
      <!-- TemplateBeginEditable name="doctitle" -->
      <title>STUDENTS HUB HOME PAGE</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <link rel="stylesheet" href="file:///m33r4/Documents/templates/Templates/mm_spa.css" type="text/css" />
      <meta name="keywords" content="Studentshub, STUDENTSHUB, Students Hub, students hub, student accommodation, student houseshare, student work, student volunteer, student rent,derbyshire, nottinghashire, leicestershire, estate agents, nhs direct, GUM, GUM clinic, students, derbyshire, nottinghamshire, leicestershire, study, universities, colleges, part time, full time, derby work, nottinghamshire work, derbyshire work, leicester work, leicestershire work, book exchange, used books, studying in derbyshire, studying in nottinghamshire, studying in leicestership, student loans, student travel, work abroad, meera lynn, meera shahisa, krishna, yoga, language classes, charities, hall hire, weddings, hanuman, geeta bhawan, geeta, bhawan, meera shah, meera, shah" />
      <meta name="description" content="Welcome to the Students Hub, UK" />
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <!-- TemplateEndEditable -->
      <!-- TemplateBeginEditable name="head" -->
      <!-- TemplateEndEditable -->
      <style type="text/css">
      <!--
      #apDiv1 {
          position:absolute;
          width:853px;
          height:93px;
          z-index:1;
          background-color: #93B3F6;
          left: 2px;
          top: 1260px;
          font-size: 9px;
      }
      #apDiv2 {
          position:absolute;
          width:205px;
          height:101px;
          z-index:2;
          left: 10px;
          top: 232px;
      }
      #apDiv3 {
          position:absolute;
          width:200px;
          height:109px;
          z-index:3;
          left: 675px;
          top: 223px;
          text-align: right;
      }
      #apDiv4 {
          position:absolute;
          width:441px;
          height:115px;
          z-index:4;
          left: 225px;
          top: 231px;
      }
      -->
      </style>
      <script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
      <link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
      <style type="text/css">
      <!--
      #apDiv5 {
          position:absolute;
          width:219px;
          height:136px;
          z-index:1;
          left: 644px;
          top: 8px;
          font-style: normal;
          font-family: "Comic Sans MS", cursive;
          font-size: 12px;
          color: #666;
      }
      #apDiv6 {
          position:absolute;
          width:656px;
          height:77px;
          z-index:2;
          left: 14px;
          top: 694px;
      }
      #apDiv7 {
          position:absolute;
          width:200px;
          height:115px;
          z-index:3;
          left: 17px;
          top: 592px;
      }
      #apDiv8 {
          position:absolute;
          left:auto;
          top:1200px;
          width:850px;
          height:64px;
          z-index:3;
          font-size: 10px;
          text-decoration: none;
      }
      #apDiv9 {
          position:absolute;
          width:200px;
          height:115px;
          z-index:4;
          left: 453px;
          top: 35px;

       

      }
      a:link {
          color: #D0D9F3;
      }
      a:hover {
          color: #FFF;
      }
      #apDiv10 {
          position:absolute;
          width:200px;
          height:115px;
          z-index:4;
      }
      body {
          margin-bottom: 0px;
          margin-top: 0px;
      }
      #apDiv11 {
          position:absolute;
          width:200px;
          height:115px;
          z-index:4;
          left: 102px;
          top: 85px;
      }
      -->
      </style>
      </head>

       

      <body>
      <div id="apDiv8">
        <table width="867" border="1">
          <tr>
            <td width="150"><img src="../logo2.jpg" width="150" height="58" /></td>
            <td width="566" valign="top">Disclaimer: <br />
            Studentshub is a platform for listing services as advertised/promoted by the Companies and individuals concerned. Studentshub does not endorse any of the contents on this site. Studentshub accepts no responsibility for any arrangements, purchase, contracts, agreements, refunds, failure to deliver services etc between individuals, landlords, clubs, organisations, companies etc. This does not affect your statutory rights (2009)</td>
            <td width="129" align="right" bgcolor="#C3D0F1"><p><strong>Contact<a href="../contactform.html"> <img src="../bluebutton.gif" width="10" height="10" alt="Blue button" /></a><br />
            </strong><strong>Sitemap <a href="../sitemap.html"><img src="../bluebutton.gif" width="10" height="10" alt="Blue button" /></a></strong><strong><br />
            &copy; www.studentshub.co.uk </strong><strong><img src="../bluebutton.gif" width="10" height="10" alt="Blue button" /></strong></p></td>
          </tr>
        </table>
      </div>
      <p><img src="file:///24Skynet/Users/mer4/Desktop/cooltext454549176.png" width="631" height="170" />
      <div id="apDiv11"><img src="file:///24Skynet/Users/mer4/Desktop/cooltext454549388.png" width="700" height="138" /></div>
      <p>
      <p>
      <ul id="MenuBar1" class="MenuBarHorizontal">
        <li><a href="#">HOME</a>  </li>
        <li><a href="#" class="MenuBarItemSubmenu">STUDY</a>
          <ul>
            <li><a href="#" class="MenuBarItemSubmenu">UNIVERSITIES</a>
              <ul>
                <li><a href="#">DERBYSHIRE</a></li>
                <li><a href="#">NOTTINGHAMSHIRE</a></li>
                <li><a href="#">LEICESTERSHIRE</a></li>
              </ul>
            </li>
            <li><a href="#" class="MenuBarItemSubmenu">COLLEGES</a>
              <ul>
                <li><a href="#">DERBYSHIRE</a></li>
                <li><a href="#">NOTTINGHAMSHIRE</a></li>
                <li><a href="#">LEICESTERSHIRE</a></li>
              </ul>
            </li>
            <li><a href="#" class="MenuBarItemSubmenu">FULL TIME</a>
              <ul>
                <li><a href="#">DERBYSHIRE</a></li>
                <li><a href="#">NOTTINGHAMSHIRE</a></li>
                <li><a href="#">LEICESTERSHIRE</a></li>
              </ul>
            </li>
            <li><a href="#" class="MenuBarItemSubmenu">PART TIME</a>
              <ul>
                <li><a href="#">DERBYSHIRE</a></li>
                <li><a href="#">NOTTINGHAMSHIRE</a></li>
                <li><a href="#">LEICESTERSHIRE</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a class="MenuBarItemSubmenu" href="#">LIVE</a>
          <ul>
            <li><a href="#">CAMPUS</a>      </li>
            <li><a href="#">HOUSE SHARE</a></li>
            <li><a href="#">RENT</a></li>
            <li><a href="#">BUY</a></li>
          </ul>
        </li>
        <li><a href="#" class="MenuBarItemSubmenu">WORK</a>
          <ul>
            <li><a href="#">EMPLOYMENT AGENCIES</a></li>
            <li><a href="#">PART TIME</a></li>
            <li><a href="#">VOLUNTEERING</a></li>
            <li><a href="#">WORK ABROAD</a></li>
          </ul>
        </li>
        <li><a href="#" class="MenuBarItemSubmenu">TRAVEL</a>
          <ul>
      <li><a href="#">BUS</a></li>
            <li><a href="#">TRAIN</a></li>
            <li><a href="#">COACH</a></li>
            <li><a href="#">FLIGHTS</a></li>
            <li><a href="#">CYCLE</a></li>
          </ul>
        </li>
        <li><a href="#" class="MenuBarItemSubmenu">FUN</a>
          <ul>
            <li><a href="#" class="MenuBarItemSubmenu">NIGHTS OUT</a>
              <ul>
                <li><a href="#">PUBS</a></li>
                <li><a href="#">CLUBS</a></li>
                <li><a href="#">SHOWS</a></li>
                <li><a href="#">CINEMAS</a></li>
                <li><a href="#">OTHER</a></li>
              </ul>
            </li>
            <li><a href="#" class="MenuBarItemSubmenu">DAYS OUT</a>
              <ul>
                <li><a href="#">EATING OUT</a></li>
                <li><a href="#">LEISURE</a></li>
                <li><a href="#">SHOWS</a></li>
                <li><a href="#">CINEMAS</a></li>
                <li><a href="#">OTHER</a></li>
              </ul>
            </li>
            <li><a href="#">GROUP OUTINGS</a>      </li>
            <li><a href="#" class="MenuBarItemSubmenu">HOLIDAYS</a>
              <ul>
                <li><a href="#">UK </a></li>
                <li><a href="#">ABROAD</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#" class="MenuBarItemSubmenu">SHOPPING</a>
          <ul>
            <li><a href="#">DERBYSHIRE</a></li>
            <li><a href="#">NOTTINGHAMSHIRE</a></li>
            <li><a href="#">LEICESTERSHIRE</a></li>
          </ul>
        </li>
        <li><a href="#" class="MenuBarItemSubmenu">BOOKS</a>
          <ul>
            <li><a href="#">BOOKSHOPS</a></li>
            <li><a href="#">USED BOOKS</a></li>
          </ul>
        </li>
        <li><a href="#" class="MenuBarItemSubmenu">HEALTH</a>
          <ul>
            <li><a href="#">NHS DIRECT</a></li>
            <li><a href="#" class="MenuBarItemSubmenu">HOSPITALS</a>
              <ul>
                <li><a href="#">DERBYSHIRE</a></li>
                <li><a href="#">NOTTINGHAMSHIRE</a></li>
                <li><a href="#">LEICESTERSHIRE</a></li>
              </ul>
            </li>
            <li><a href="#" class="MenuBarItemSubmenu">WALK IN CLINICS</a>
              <ul>
                <li><a href="#">DERBYSHIRE</a></li>
                <li><a href="#">NOTTINGHASHIRE</a></li>
                <li><a href="#">LEICESTERSHIRE</a></li>
              </ul>
            </li>
            <li><a href="#" class="MenuBarItemSubmenu">GUM CLINICS</a>
              <ul>
                <li><a href="#">DERBYSHIRE</a></li>
                <li><a href="#">NOTTINGHAMSHIRE</a></li>
                <li><a href="#">LEICESTERSHIRE</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
      <p>  <br />
      </p>
      <!-- TemplateBeginEditable name="table" -->
      <table width="705" border="0">
        <tr>
          <td width="730" height="90"> </td></tr><tr>
        </tr>
      </table>
      </table>
      <?php
      if($action==login){
      //check
      if (!$email || !$pass) {
      print "Please fill out all fields.";

       

      exit;
      }
      $logres = mysql_num_rows(mysql_query("select * from table where user='$email' and pass='$pass'"));
      if ($logres <= 0) {
      print "Login failed. If you have not already, please signup. Otherwise, check your spelling and login again.";

       

      exit;
      } else {
      //logged in, register the session..
      session_register("email");
      session_register("pass");
      print "You are now logged in..";
      }
      }
      ?>

       

      <table width="953" height="91" border="0"><tr>
          <td width="783" height="600"> </td>
          <td width="160"><img src="file:///24Skynet/Users/mer4/Desktop/youradhere600high.gif" width="160" height="600" /></td>
        </tr>
      </table>
      <p> </p>
      <p> </p>

       

      <!-- TemplateEndEditable -->
      <p>  </p>
      <p>  </p>
      <script type="text/javascript">
      <!--
      var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
      //-->
      </script>
      </body>
      </html>

      --------------------------------------

      MY PROBLEM IS:

      1. When this template is previewed/tested in browsers locally (ie from my MAC) the drop menu does not work - the whole nagivation bar is static.
      2. When a page/child page is created from this template and saved as an .html and tested locally - there is the same problem as above.

       

      I have in the past created a spry drop down horizontal menu that worked well as follows:

      http://www.studentshub.co.uk/

       

      I don't know where I am going wrong this time and your expertise would be much much valued.

       

      Many thanks.

        • 1. Re: Why is my drop down spry menu not working in any browsers?
          Zabeth69 Level 5

          I see two CSS-related problems: your principal CSS file link and your image links are pointing to your hard drive; and you should move the styles that are now in the head of your document into an external style sheet. I see that you are liberally using Absolutely Positioned Divs; be careful with them...they are sometimes tricky to control.

           

          I note that you are using PHP in the middle of your page. I am not certain of this, but shouldn't you be using the .php file extension on your child pages?

           

          I wonder if you are having trouble testing locally because of the PHP...you need to have a testing server set up, either locally or online, so that there is a server to process your PHP before serving your page.

           

          Perhaps someone with more experience with php will check in...you might change the title of your thread to reflect that you need php assistance.

           

          Beth

          • 2. Re: Why is my drop down spry menu not working in any browsers?
            MeeraJason Level 1

            Thank you Zabeth for taking the time to look at my spry menu problem.

             

            Under your guidance, I did the following:

            1. I corrected the image links
            2. I removed the PHP box as I did not really need it and don't remember why I put it in there in the first place!

             

            However, my spry menu was still neither working when tested locally nor after being uploaded onto my server.

             

            So:

            I went back to your advice and noted what you said about the AP Divs and noted there was one containing the 2nd logo at the top of the page very close to the spry menu bar.  Bearing in mind about what you said about AP Divs being tricky, I decided to move my spry menu away from the AP Div.  To do this, I created a 1 row 1 column table and cut my spry menu and pasted it into this new table.  This for some reason, made the spry menu work again! I have tested this locally as well as on the server and it seems to be working as follows: http://www.studentshub.co.uk/

             

            Many thanks for your advice Zabeth.

             

            You will note that mouse over the spry menu seems to trigger the drop down behaviour a little slow though.

            • 3. Re: Why is my drop down spry menu not working in any browsers?
              Zabeth69 Level 5

              Good work!

               

              Regarding the sluggish drop downs: there may be a timing setting in the javascript file. Be careful when you go in there. I am not skilled in javascript, but "there be dragons," as the old map says! Take note of anything you change and you can change it back if it doesn't work>

               

              Beth