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 9 of 9

Thread: css blues

  1. #1
    New Coder
    Join Date
    Sep 2002
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts

    css blues

    CSS blues
    I bought a wonderful book that makes css look like a breeze. I followed one of the examples in the book to get what I wanted and I can't get it to work. All I want is to have a layer that is hidden to become visible after the click of a button. Here's the code:
    -The specs of the layer named loginWin

    <style type="text/css">

    #loginWin
    {
    position: absolute;
    left: 150;
    top: 100;
    visibility: hidden;
    width: 250;
    height: 337;
    }

    </style>
    <script language="javascript">

    -browser checking to work in all DOMS

    browser = navigator.appName;
    browserNum = parseInt(navigator.appVersion);

    if ((browser == "Netscape") && (browserNum < 5))
    {
    //Netscape 4.x
    layerRef = "document.layers['";
    endLayerRef = "']";
    styleRef = "";
    }
    else if ((browser == "Netscape") && (browserNum >= 5))
    {
    //Netscape 6
    layerRef = "document.getElementById('";
    styleRef = ".style";
    endLayerRef = "')";
    }
    else
    {
    //Internet Explorer
    layerRef = "document.all['";
    endLayerRef = "']";
    styleRef = ".style";
    }

    function showLayer(layerName)
    {
    eval(layerRef + layerName + endLayerRef + styleRef + "visibility = 'visible'");
    }

    </script>
    </head>
    <BODY BGCOLOR=#c0bfbf topmargin="0" ONLOAD="preloadImages();">

    -This is the actual layer

    <!-- Beginning of Layers-->

    <div id="loginWin">
    ---stuff---
    </div>

    <!-- End of layer -->

    -This is a button that activates the above

    <a href="java script:showLayer('loginWin');" onMouseOver="changeImages('login2', 'images/login2-over.jpg'); return true;" onMouseOut="changeImages('login2', 'images/login2.jpg'); return true;">
    <img name="login2" src="images/login2.jpg" width=222 height=45 border="0">
    </a>




    Any ways something is wrong there. It's funny that I pretty well copied it from the book. So it's either a spelling mistake or something or a wrong use of code. The book is called "Essential CSS & DHTML fro Web Professionals" by Dan Livingston. I hope someone can help me. Thanks.

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    Depends on the time of year
    Posts
    478
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, here's an error.

    For your line:

    -browser checking to work in all DOMS

    add a "//" (minus the quotations)

    in the body tag, you're calling in a function called preloadimages();

    In your javascript, its no where to be found, that's a problem.

    Duniyadnd

  • #3
    New Coder
    Join Date
    Sep 2002
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts

    thanks but, no thanks

    lol, I put that in there. it's not in the real code. I just wanted to label the different sections! But nice try. I think I know how to comment code! lol. Does anybody else have a suggestion worth hearing?

  • #4
    New Coder
    Join Date
    Sep 2002
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts

    oh yeah

    the preloadimages function I omitted from what I was showing everyone. Namely because it works. I could have given you all my code but you would have gone crazy because it's long. I gave you what you needed to see. The specs, the browser compatibility code, the actual layer, and the button that triggers the layer. I left a lot out! You don't need to see my rollovers and stuff though!

  • #5
    New Coder
    Join Date
    Sep 2002
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts

    to avoid confusion

    Here's the full code:


    <html>
    <head>
    <title>CSS Help</title>
    <style type="text/css">

    #loginWin
    {
    position: absolute;
    left: 150;
    top: 100;
    visibility: hidden;
    width: 250;
    height: 337;
    }

    </style>
    <script language="javascript">

    browser = navigator.appName;
    browserNum = parseInt(navigator.appVersion);

    if ((browser == "Netscape") && (browserNum < 5))
    {
    //Netscape 4.x
    layerRef = "document.layers['";
    endLayerRef = "']";
    styleRef = "";
    }
    else if ((browser == "Netscape") && (browserNum >= 5))
    {
    //Netscape 6
    layerRef = "document.getElementById('";
    styleRef = ".style";
    endLayerRef = "')";
    }
    else
    {
    //Internet Explorer
    layerRef = "document.all['";
    endLayerRef = "']";
    styleRef = ".style";
    }

    function showLayer(layerName)
    {
    eval(layerRef + layerName + endLayerRef + styleRef + "visibility = 'visible'");
    }

    function newImage(arg)
    {
    if (document.images)
    {
    rslt = new Image();
    rslt.src = arg;
    return rslt;
    }
    }

    function changeImages()
    {
    if (document.images && (preloadFlag == true))
    {
    for (var i=0; i<changeImages.arguments.length; i+=2)
    {
    document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
    }
    }
    }

    var preloadFlag = false;

    function preloadImages()
    {
    if (document.images)
    {
    home_over = newImage("images/home-over.jpg");
    mission2_over = newImage("images/mission2-over.jpg");
    shabangAdv_over = newImage("images/shabangAdv-over.jpg");
    services_over = newImage("images/services-over.jpg");
    portfolio_over = newImage("images/portfolio-over.jpg");
    recentClients_over = newImage("images/recentClients-over.jpg");
    login2_over = newImage("images/login2-over.jpg");
    preloadFlag = true;
    }
    }

    </script>
    </head>
    <BODY BGCOLOR=#c0bfbf topmargin="0" ONLOAD="preloadImages();">

    <!-- Beginning of Layers-->
    <div id="loginWin">
    <TABLE WIDTH=250 height="337" BORDER=0 CELLPADDING=0 CELLSPACING=0>
    <TR>
    <TD COLSPAN=3 width="250" height="44"><IMG SRC="images/login_01.jpg" WIDTH=250 HEIGHT=44></TD>
    </TR>
    <TR>
    <TD WIDTH="43" HEIGHT="293" ROWSPAN=2><IMG SRC="images/login_02.jpg" WIDTH="43" HEIGHT="293"></TD>
    <TD width="163" height="248" valign="top" bgcolor="#cec59b">
    <form action="" method="post" name="login" id="login">
    <p>
    <font color="#504c42" size="2" face="Arial, Helvetica, sans-serif">
    <strong><br>Username: </strong>
    </font>
    <input name="userID" type="text" id="userID" size="22">
    <br><br>
    <strong>
    <font color="#504c42" size="2" face="Arial, Helvetica, sans-serif">Password:</font>
    </strong>
    <input name="passWord" type="password" id="passWord" size="22">
    </p>
    <p align="center">
    <input type="submit" name="Submit" value="Submit">
    &nbsp;
    <input type="reset" name="Submit2" value="Reset">
    </p>
    </form>
    <p align="center"><br><br>
    <img src="images/closeWindow.jpg" width="70" height="17" border="0" usemap="#close">
    </p>
    </TD>
    <TD ROWSPAN=2 WIDTH=44 HEIGHT=293><IMG SRC="images/login_04.jpg" WIDTH=44 HEIGHT=293></TD>
    </TR>
    <TR>
    <TD WIDTH=163 HEIGHT=45><IMG SRC="images/login_05.jpg" WIDTH=163 HEIGHT=45></TD>
    </TR>
    </TABLE>
    <map name="close" id="close">
    <area shape="rect" coords="-1,0,70,18" href="#">
    </map>
    </div>
    <!-- End of layer -->

    <TABLE WIDTH=800 height="100%" BORDER=0 align="center" CELLPADDING=0 CELLSPACING=0>
    <TR>

    <TD height="137" COLSPAN=2> <IMG SRC="images/topBanner2.jpg" WIDTH=800 HEIGHT=137 border="0" usemap="#Map"></TD>
    </TR>
    <TR>
    <TD width="222" height="315" valign="top" background="images/greenSpacer.jpg">
    <A HREF="index.html" ONMOUSEOVER="changeImages('home', 'images/home-over.jpg');
    return true;" ONMOUSEOUT="changeImages('home', 'images/home.jpg'); return true;">
    <IMG NAME="home" SRC="images/home.jpg" WIDTH=222 HEIGHT=45 BORDER=0>
    </A>
    <a href="mission.html" onMouseOver="changeImages('mission2', 'images/mission2-over.jpg');
    return true;" onMouseOut="changeImages('mission2', 'images/mission2.jpg'); return true;">
    <img name="mission2" src="images/mission2.jpg" width=222 height=45 border="0">
    </a>
    <a href="advantage.html" onMouseOver="changeImages('shabangAdv', 'images/shabangAdv-over.jpg');
    return true;" onMouseOut="changeImages('shabangAdv', 'images/shabangAdv.jpg'); return true;">
    <img name="shabangAdv" src="images/shabangAdv.jpg" width=222 height=45 border=0>
    </a>
    <a href="services.html" onMouseOver="changeImages('services', 'images/services-over.jpg');
    return true;" onMouseOut="changeImages('services', 'images/services.jpg'); return true;">
    <img name="services" src="images/services.jpg" width=222 height=45 border=0>
    </a>
    <a href="portfolio.html" onMouseOver="changeImages('portfolio', 'images/portfolio-over.jpg');
    return true;" onMouseOut="changeImages('portfolio', 'images/portfolio.jpg'); return true;">
    <img name="portfolio" src="images/portfolio.jpg" width=222 height=45 border=0>
    </a>
    <a href="recClients.html" onMouseOver="changeImages('recentClients', 'images/recentClients-over.jpg'); return true;" onMouseOut="changeImages('recentClients', 'images/recentClients.jpg'); return true;">
    <img name="recentClients" src="images/recentClients.jpg" width=222 height=45 border=0>
    </a>
    <a href="javaScript:showLayer('loginWin');" onMouseOver="changeImages('login2', 'images/login2-over.jpg'); return true;" onMouseOut="changeImages('login2', 'images/login2.jpg'); return true;">
    <img name="login2" src="images/login2.jpg" width=222 height=45 border="0">
    </a>
    </TD>
    <TD width="578" height="463" ROWSPAN=2 valign="top" background="images/keyboardKeys.jpg">
    <table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
    <td>
    <img src="images/advTitle.jpg" width="393" height="54">
    <p>
    <font size="2" face="Arial, Helvetica, sans-serif">
    <strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Shabang Web Solutions </strong>
    offers you the latest in website development for<br><br>
    <img src="images/peopleComp.jpg" width="333" height="168" align="right">
    individuals to mid-sized <br><br>
    companies. We enjoy what <br><br>
    we do, and staying on top <br><br>
    of the field. We offer great <br><br>
    prices and will work with <br><br>
    you long-term to keep your <br><br>
    site up to date every day of the year.
    We'll work closely with you
    to bring you exactly <br><br>
    what you want. We offer information
    and advice on how your company
    can be a leader <br><br>
    among your competitors.
    </font>
    </p>
    <p>
    <font size="2" face="Arial, Helvetica, sans-serif">
    <strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Shabang Web Solutions</strong>
    is new, but it's owner
    <strong>Reuben Dykes</strong>
    has been in the<br><br>
    industry for three years, has graduated from a top notch school
    in B.C. (
    <a href="http://www.artschool.com">
    The Center For<br><br>Digital Imaging and Sound
    </a>
    ), and knows how to bring things together.
    </font>
    </p>
    <p>
    <font size="2" face="Arial, Helvetica, sans-serif">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Can
    <strong>Shabang Web Solutions</strong>
    build you the site you need? Will
    <strong>Shabang Web <br><br> Solutions</strong>
    offer a price that you can afford? The answer is
    <font size="3"><strong>YES!!!</strong></font>
    </font>
    </p>
    <p>&nbsp; </p>
    </td>
    </tr>
    </table>
    </TD>
    </TR>
    <TR>
    <TD width="222" background="images/greenSpacer.jpg">&nbsp; </TD>
    </TR>
    </TABLE>
    <!-- End ImageReady Slices -->
    <map name="Map">
    <area shape="rect" coords="5,5,121,114" href="index.html" target="_self" alt="Shabang Web Solutions">
    </map>
    </BODY>
    </html>

    I hope that makes it easier to give me a hand. It works but I just can't get the layer to change from hidden to visible. When I set it as visible it shows up fine. Must be the showLayer function or something.

  • #6
    New to the CF scene
    Join Date
    Sep 2002
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Do you really have a space between the words java and script as it shows here:

    <a href="java script:showLayer('loginWin');"

    Try it as one word: javascript

    moonkitten

  • #7
    New Coder
    Join Date
    Sep 2002
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts

    nope

    It says "javaScript:" and I guess the forum seperates it.

  • #8
    New to the CF scene
    Join Date
    Sep 2002
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, I used an alert to print the line that calls the javascript function and discovered that there is no 'dot' between style and visibility. so try this:

    eval(layerRef + layerName + endLayerRef + styleRef + ".visibility = 'visible'");

    moonkitten

  • #9
    New Coder
    Join Date
    Sep 2002
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile thanks a lot!!!

    You got it! I knew it was so simple!

    reub77


  •  

    Posting Permissions

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