Skip navigation
Asif Farid
Currently Being Moderated

Spry submenu not being displayed when opened from the computer (website not uploaded)

Nov 29, 2013 5:08 PM

Tags: #cs4 #cs5 #help #not #internet #files #html #template #dreamweaver #spry #dreamweaver_cs5

Hey,

 

I am trying to design a website for my A levels ICT coursework and i am currently using CS6. The submenu wont show up in live view or in the browser. And hover wont work on the 1st and the 3rd spry buttons And when i open the webspage on a browser, then the currently functioning hover turns white then to the assigned image, And I was also wondering how i can centralize the whole webpage including the background image.

 

I would highly appreciate any solutions to these issues.

 

P.S- this is just the basic template and that is why  i have so many blank cells.

 

WEBSITE HTML CODING:-

 

 

 

<!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" />

<title>Untitled Document</title>

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

<style type="text/css">

body {

          background-image: url(Assets/Images/Untitled-66.jpg);

          background-repeat: no-repeat;

}

</style>

</head>

 

 

<body>

<table width="1010" border="0" align="left">

  <tr>

    <td width="1004" align="center"><table width="1000" border="0" align="left">

      <tr>

        <td width="208" height="90"> </td>

        <td width="763"> </td>

        <td width="15"> </td>

      </tr>

      <tr>

        <td height="102"> </td>

        <td align="left" valign="bottom"><ul id="MenuBar1" class="MenuBarHorizontal">

          <li><a href="#" class="MenuBarItemSubmenu">Item 1</a>

            <ul>

              <li><a href="#">Untitled Item</a></li>

              <li><a href="#">Untitled Item</a></li>

</ul>

          </li>

          <li><a href="#">Item 2</a></li>

          <li><a href="#" class="MenuBarItemSubmenu">Item 3</a>

            <ul>

              <li><a href="#">Untitled Item</a></li>

              <li><a href="#">Untitled Item</a></li>

            </ul>

          </li>

          <li><a href="#">Item 4</a></li>

        </ul></td>

        <td> </td>

      </tr>

      <tr>

        <td> </td>

        <td> </td>

        <td> </td>

      </tr>

      <tr>

        <td> </td>

        <td> </td>

        <td> </td>

      </tr>

      <tr>

        <td> </td>

        <td> </td>

        <td> </td>

      </tr>

      <tr>

        <td> </td>

        <td> </td>

        <td> </td>

      </tr>

      <tr>

        <td> </td>

        <td> </td>

        <td> </td>

      </tr>

      <tr>

        <td> </td>

        <td> </td>

        <td> </td>

      </tr>

      <tr>

        <td> </td>

        <td> </td>

        <td> </td>

      </tr>

      <tr>

        <td> </td>

        <td> </td>

        <td> </td>

      </tr>

      <tr>

        <td> </td>

        <td> </td>

        <td> </td>

      </tr>

      <tr>

        <td> </td>

        <td> </td>

        <td> </td>

      </tr>

    </table></td>

  </tr>

</table>

<script type="text/javascript">

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

</script>

</body>

</html>

 

 

 

 

Regards,

Asif Farid

 
Replies
  • Currently Being Moderated
    Nov 30, 2013 1:03 AM   in reply to Asif Farid

    try this code. for spry menu. Change align="left" to center.

    weblink

     

     

     

     

    <body>

    <table width="1010" border="0" align="center">

      <tr>

        <td width="1004" align="center"><table width="1000" border="0" align="center">

          <tr>

            <td width="208" height="90"> </td>

            <td width="763"> </td>

            <td width="15"> </td>

          </tr>

         

     

     

     

     

     

    Regards,

    Asif Farid

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 30, 2013 2:09 AM   in reply to Asif Farid

    Hello Asif,

     

    using your source code into MY DW (Live Ansicht = Live View) with MY SPRY settings it looks fine (see screenshot):

     

    drSpry.jpg

     

    what means the "culprit" must be in your "SpryMenuBarHorizontal.css". You better load up your website in question - no matter how it looks like - to your server and send us the link.

     

    On the other hand and I quote from different contributions of the forum:

     

    "Spry has been deprecated and is no longer officially supported by Adobe", “Adobe abandoned Spry late last year after CS6 came out. Future products will probably not contain any Spry so learning to use jQuery is a valuable skill to have for the future.”

     

    So I/we recommend you to switch to a jQuery library for your further requirements. Here some links:

     

    If you have a budget to work with, look at PVII's Pop-Menu Magic3.

    http://www.projectseven.com/products/menusystems/pmm3/index.htm

    jQuery Superfish (free): http://users.tpg.com.au/j_birch/plugins/superfish/ aso.

     

    Hans-Günter

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 30, 2013 10:46 AM   in reply to Asif Farid

    Spry menus are dead.  Adobe abandoned them last year.  You can keep using Spry but most people have switched to better menu systems.  Hans already posted 2 good links.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 13, 2013 7:06 AM   in reply to Asif Farid

    Hello Asif,

     

    sorry, couldn't answer earlier.

     

    It's a pity, that you can't send us the link to your website in question. I'm sure we could better find the culprit.

     

    On the first glance I think your script needs some additions:

     

    <script>

    jQuery(function($){

      $.backstretch("Assets/Images/Untitled-6%20v2.jpg");

    });

    </script>

     

    and you should delete the spaces "%" in the names of your images and use underscores or dashes if you want to separate the terms.

     

    I see you used "p7PMM" files. So you could ask your questions - if we can't help you - in Al's  p7PMM forum too.

     

    Hans-Günter

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 13, 2013 6:49 AM   in reply to Asif Farid

    Hello Asif,

     

    after a while I found this in my library now, where the " jQuery-Plugin Backstretch" is replaced by a CSS attribute called "background-size:cover", please see: http://jsfiddle.net/gerritvanaaken/gFJs9/2/.

     

    Hans-Günter

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 13, 2013 11:43 AM   in reply to hans-g.

    This will work in all browsers (except pre-IE9).

    http://alt-web.com/TEST/Resizable-BG.shtml

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 17, 2013 11:00 AM   in reply to Asif Farid

    This discussion has gone off the original topic which was Spry sub-menus.

     

    I suggest starting a new discussion on this new topic and provide a link to your web page.  Upload your page and supporting files to a public web space you control and post the URL to your site  (http://yourdomain.com).

     

    Screenshots don't tell us much and DW Design View is not reliable because it isn't a browser.  What matters is how your page performs in real browsers like Firefox, Chrome, IE, iPad, iPhone, etc...

     

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points