pop up windows Page 89

Jacky Kenna · June 10th, 2005, 08:07 AM

Hi All

It is not possible to attach a pop up as shown on page 89 to a text button. I have made text buttons so they will reduce with page sizes.

How can I achieve my objective. I have not completed the book so it may be covered later on.

Looking forward in the hope it can be done.

All the Best

Jacky Kenna

Imar · June 11th, 2005, 06:39 AM

What kind of text button are you referring to? An <input type="button"> ?

I don't think that's possible directly, but maybe you can add one to an image, and then cut and paste the code on te button.

Personally, I'd stay far and far away from the pop up menus. They don't work very well, are hard to maintain, and lately there have been a lot of good CSS alternatives......

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

Jacky Kenna · June 13th, 2005, 06:44 AM

The reason I had thought of using pop ups is because of the control of Navigation. Possibly pop up is the incorrect name. I see them on loads of sites. In the Cooking Place they are used to advantage for Regions/Italian/Sitalian. One mouse click rather than 3.

This time code attached.
You will see I have done what I think is called a text buttons. I am using these because my colleagues who are doing the more difficult PHP want this style saying it is faster and more flexible. The page reduces in width for one.

On the other hand I am not that concerned at the reducing ability. As long as I can make it reduce a little then I will be happy. Companies in the business I am aiming at have a minimum of 17â flat screens with 1024 x 768 res. My project is not for the public consumption.

Looking at your own site you have the mouse over and images etc. I also see that DM preloads the images so that there is no time delay at all. Control seems much easier also.
I assume that the images and the behaviours are made in FW. Or there could be CSS files as you were recommending the other day.

Jacky

Imar · June 13th, 2005, 06:59 AM

Didn't see any code, but I assume you *are* using the pop-up menus provided by Dreamweaver. Again, it's better not to use them on any serious site because they come with a lot of problems.

Check out the SuckerFish menus: http://www.alistapart.com/articles/dropdowns/
Nice, clean, standards based XHTML and CSS together can do wonderful tricks, as demonstrated on our corporate site: http://www.designit.nl The menus on that site are based on the SuckerFish examples with a lot of tweaking......

Not sure what you mean with "my site" but if you're referring to imar.spaanjaars.com I do indeed use simple images. No preloading though. The images are so small they load very fast. I created them with Photoshop and Fireworks. All other navigation is done with a submenu placed below the main menu. Easy to setup, but a bit inflexible as it is hard to add more items than the screen width allows.

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

Jacky Kenna · June 13th, 2005, 01:44 PM

Hi Imar

I have taken on board the advice re navigation and used the system recommended on pages 238 onwards. I attach the code this time. All is satisfactory save that the link for the page I am on does not alter in size to identify itself to the user. In BGDW on page 248 you refer to the JavaScript code making the current page link appear larger as we had asked out code to do. I have gone through your instructions and directions but I can not see where the reference to the increased size for the open page. Maybe I am missing something or because I have set the page to PHP/MYSQL although JavaScript is separate.

Hopefully my assumptions are correct and that I have just made a simple mistake.

Again All the best

Jacky Kenna
I have also looked at http://www.alistapart.com/articles/dropdowns/ . Thanks.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>Mrns Main Template 1st level</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

</style>
<link href="../stylesheets/mrnsStyles.css" rel="stylesheet" type="text/css">

<style type="text/css">

</style>
</head>

<body>
    <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#B7E8FF">
          <tr bgcolor="#B7E8FF" >
                <td width="24"> </td>
                <td width="80%" rowspan="3"><img src="../images/logo.png" width="241" height="73"></td>
                <td width="10"> </td>
                <td width="13"> </td>
                <td width="248">
                <a href="../logOn.php" class="label">Customer Log on</a></td>
                <td width="24"> </td>
          </tr>
          <tr bgcolor="#B7E8FF" >
            <td width="24"> </td>
            <td> </td>
            <td> </td>
            <td width="248"><a href="../yrAcc.php">Your Account</a> </td>
            <td width="24"> </td>
        <tr bgcolor="#B7E8FF" >
            <td width="24"> </td>
            <td> </td>
            <td> </td>
            <td width="248"><span class="labelLeft">Logged on as: </span>
            <td class="label"> </td>
               <td width="24"> </td>
          </tr>
</table>
          </tr>
          <tr><table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
    <table width="100%" border="0" cellpadding="0" cellspacing="0" background="../images/btnBgCol.png" bgcolor="#C1CBD7">
      <tr>
        <td> </td>
        <td><table width="100%" border="0" align="right" cellpadding="0" cellspacing="0">
                  <tr>
                    <td><a href="../Indexmrnswebsite2.php">Home</a></td>
                    <td>   </td>
                    <td><a href="../aboutUs.php">About us</a></td>
                    <td>   </td>
                    <td><a href="../proSel.php">Project Selector</a></td>
                    <td>   </td>
                        <td><a href="../recruit.php">Recruitment</a></td>
                    <td>   </td>
                    <td><a href="../mgmtRpt.php">Management Reports</a></td>
                    <td>   </td>
                    <td><a href="../controler.php">Controler</a></td>
                    <td>   </td>
                    <td><a href="../contact.php">Contact us</a></td>
                    <td>   </td>
                    <td><a href="../help.php">Help</a></td>

                  </tr>
            </table>
        </td>
      </tr>
    </table>
            <br>
            <br>
            <script language="JavaScript" type="text/javascript">
       Var sPageName = '<%=Request.ServerVariables("SCRIPT_NAME")%>';
       sPageName = sPageName.substr(sPageName.lastIndexOf('/')
                                   + 1) .toLowercase();
        sPageName = sPageName.substr (0, sPageName.lastIndexOf('.'));
       if (document.getElementById(sPageName))
    {
        document.getElementById(sPageName) .style.fontweight = 'Bold';
        document.getElementById(sPageName) .style.fontsize = '14pt';
    }</script></td>
  </tr>
</table>
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="24"><img src="../images/spacerRht.png" width="20" height="400"></td>
    <td valign="top">
      <p>Content </p>
      <p>Over type in code view and enter whatever cose we have elsewhere as though this were a normal page </p>
    </td>
    <td width="24"> </td>
  </tr>
</table>

        <table width="100%" border="0" cellpadding="0" cellspacing="0" background="../images/btnBgCol.png" bgcolor="#C1CBD7">
          <tr>
            <td width="24"> </td>
            <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td class="labelLeft">© All rights Reserved 2005 </td>
                  <td><a href="../aboutUs.php">About us </a></td>
                  <td><a href="../sales.php">Sales </a></td>
                  <td><a href="../help.php">Help </a></td>
                  <td><a href="../contact.php">Contact Us</a></td>
                  <br>
                  <script language="JavaScript" type="text/javascript">
       Var sPageName = '<%=Request.ServerVariables("SCRIPT_NAME")%>';
       sPageName = sPageName.substr(sPageName.lastIndexOf('/')
                                   + 1) .toLowercase();
        sPageName = sPageName.substr (0, sPageName.lastIndexOf('.'));
       if (document.getElementById(sPageName))
    {
        document.getElementById(sPageName) .style.fontweight = 'Bold';
        document.getElementById(sPageName) .style.fontsize = '14pt';
    }</script>
                </tr>
            </table></td>
            <td width="24"> </td>
          </tr>
        </table>

        <tr bgcolor="#C1CBD7" background="../images/btnBgCol.png">
                <td> </td>
                <td>    </td>
</tr>
</body>
</html>

Style Steets

.labelRight {
    font-family: Arial, Helvetica, sans-serif;
    font-size: x-small;
    font-style: normal;
    font-weight: normal;
    color: #000000;
    text-align: right;
    border: thin;
}
a:link {
    font-family: Arial, Helvetica, sans-serif;
    font-size: x-small;
    text-transform: none;
    color: #000000;
    text-decoration: underline;
    background-repeat: no-repeat;
    background-position: center 25px;
    text-align: center;
}
a:visited {
    font-family: Arial, Helvetica, sans-serif;
    font-size: x-small;
    color: #000000;
}
a:hover {
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    color: #FF0000;
}

a:active {
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    color: #0000FF;
    font-weight: bold;
}

h5 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: x-small;
    color: #000000;
    text-align: left;
    text-transform: none;
    font-style: normal;
    line-height: normal;
    font-weight: lighter;
    font-variant: normal;
}

.button {
    font-family: Arial, Helvetica, sans-serif;
    font-size: x-small;
    font-weight: normal;
    text-transform: capitalize;
    color: #000000;
}
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
h4 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    font-style: italic;
    font-weight: lighter;
    text-transform: none;
    color: #FF0000;
    text-align: center;
}
h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: medium;
    font-weight: lighter;
    text-transform: none;
    color: #FF0000;
    text-align: center;
}
.labelLeft {

    font-family: Arial, Helvetica, sans-serif;
    font-size: x-small;
    font-style: normal;
    font-weight: normal;
    color: #000000;
    text-align: left;
    border: thin;
}
.labelCentre {

    font-family: Arial, Helvetica, sans-serif;
    font-size: x-small;
    font-style: normal;
    font-weight: normal;
    color: #000000;
    text-align: center;
    border: thin;
}

Imar · June 13th, 2005, 01:53 PM

I think this is a known issue with the book. The sheet of paper simply isn't wide enough to hold this text:

sPageName = sPageName.substr(sPageName.lastIndexOf('/')
+ 1) .toLowercase();

It should in fact be:

sPageName = sPageName.substr(sPageName.lastIndexOf('/') + 1) .toLowercase();

all on one line.

Does that work?

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
While typing this post, I was listening to: Group Four by Massive Attack (Track 10 from the album: Mezzanine) What's This?