SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    Non-Member hyperimage's Avatar
    Join Date
    Dec 2003
    Location
    Croatia
    Posts
    259
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    hide/show script question

    hi!
    ive sent you the main file of my site if u can check out where is my fault in the script for hide show navbar!
    the functions r in headers and the div started at line 123!
    please if u can give me an advice of how to make work this script!
    thanx in advance!
    Attached Files Attached Files

  2. #2
    Non-Member hyperimage's Avatar
    Join Date
    Dec 2003
    Location
    Croatia
    Posts
    259
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    main file

    <?php
    function draw_header()
    {
    global $cfg;
    ?>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <? draw_header_tag(); ?>
    <SCRIPT LANGUAGE="JavaScript">
    function hideMe(){
    xHide('col1');
    var col2 = xGetElementById('col2');
    col2.style.margin = "0px 20% 0px 0px";
    col2.style.background = "url(/themes/img/menu/book.gif) repeat-y";
    }

    function showMe(){
    xShow('col1');
    var col2 = xGetElementById('col2');
    col2.style.margin = "0px 20% 0px 20%";
    col2.style.background = "url(/themes/img/menu/book.gif) repeat-y";
    }

    function toggle() {
    var expiry = new Date();
    expiry.setFullYear(expiry.getFullYear()+1);
    var xmt = xPageX('maintab');
    if (xmt > 50) {
    hideMe();
    adjustlayout();
    document.cookie = "hidenav=1; expires= " + expiry.toGMTString() + "; path=/; domain=.on-lineportal.com";
    }
    else {
    showMe();
    adjustlayout();
    document.cookie = "hidenav=0; expires= " + expiry.toGMTString() + "; path=/; domain=.on-lineportal.com";
    }
    }

    function collapseSidebarPreference() {
    var hidenav = readCookie("hidenav");
    //debugStatus("hidenav=" + hidenav);
    if (hidenav == 1 && xGetElementById('maintab'))
    {
    hideMe();
    adjustlayout();
    }
    }
    </script>

    <body>
    <table align="center" width="800" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
    <tr>
    <td width="40" height="40" background="themes/ultimate/img/1ljevo.gif">
    </td>
    <td background="themes/ultimate/img/1centar.gif" align="left">
    <table width="100%" height="40" border="0" cellspacing="0" cellpadding="0" align="left"><tr><td width="11" height="40" align="left"><img src="themes/ultimate/img/menu/1centar.gif" width="11" height="40" border="0"></td>
    <td height="40" align="left"><?php theme_draw_simple_menu(); ?></td><td height="40" width="150" align="left"><img src="themes/ultimate/img/menu/3centar.gif" width="11" height="40" border="0"></td>
    <td width="150" align="right" valign="bottom"><span id=tick2>
    </span>
    <SCRIPT LANGUAGE="JavaScript">

    <!-- Begin
    function show2() {
    var today = new Date();
    var year = today.getYear();
    if (year < 2000) // Y2K Fix, Isaac Powell
    year = year + 1900; // http://onyx.idbsu.edu/~ipowell
    var month = today.getMonth() + 1;
    var day = today.getDate();
    var hour = today.getHours();
    var hourUTC = today.getUTCHours();
    var diff = hour - hourUTC;
    var hourdifference = Math.abs(diff);
    var minute = today.getMinutes();
    var minuteUTC = today.getUTCMinutes();
    var minutedifference;
    var second = today.getSeconds();
    var timezone;
    if (minute != minuteUTC && minuteUTC < 30 && diff < 0) { hourdifference--; }
    if (minute != minuteUTC && minuteUTC > 30 && diff > 0) { hourdifference--; }
    if (minute != minuteUTC) {
    minutedifference = ":30";
    }
    else {
    minutedifference = ":00";
    }
    if (hourdifference < 10) {
    timezone = "0" + hourdifference + minutedifference;
    }
    else {
    timezone = "" + hourdifference + minutedifference;
    }
    if (diff < 0) {
    timezone = "-" + timezone;
    }
    else {
    timezone = "+" + timezone;
    }
    if (month <= 9) month = "0" + month;
    if (day <= 9) day = "0" + day;
    if (hour <= 9) hour = "0" + hour;
    if (minute <= 9) minute = "0" + minute;
    if (second <= 9) second = "0" + second;
    var ctime = hour + ":" + minute + ":" + second + " " + day + "/" + month + "/" + year + " "+ timezone;
    tick2.innerHTML="<b style='font-size:10;color:white;'>"+ctime+"</b>"
    setTimeout("show2()",1000)
    }

    window.onload=show2
    //-->
    </script></td></tr></table></td>
    <td width="40" height="40" background="themes/ultimate/img/1desno.gif"></td>
    </tr>
    <tr><td background="themes/ultimate/img/2ljevo.gif" valign="top">

    </td>
    <td align="center" valign="top"><table border=0 cellspacing="0" cellpadding="0" width="100%">
    <tr><td width="720" height="150" align="center" background="themes/ultimate/img/title.gif">
    <?php if( check_module("banners")) draw_banner(); ?></td></tr>
    <tr><td align="center" valign="top" colspan="2">
    <table border=0 cellspacing="0" cellpadding="0" width="100%">
    <div id="col1"><tr><td align="center" valign="top"><?php
    draw_sideboxes("left");
    ?></td></div><div id="col2" onclick="toggle()">
    <td width="100%" valign=top align="center" style="border-top:1px dotted #999999;">
    <?php
    }
    function draw_footer()
    {
    ?>
    </td></div>
    <td width="130" valign="top" bgcolor="#ffffff" style="border-left:1px dotted #999999;"><?php
    draw_sideboxes("right");
    ?>
    </td></tr>
    </table>
    </td></tr>
    </table>
    </td>
    <td background="themes/ultimate/img/2desno.gif"></td>
    </tr>
    <tr>
    <td width="40" height="40" background="themes/ultimate/img/3ljevo.gif"></td>
    <td background="themes/ultimate/img/3centar.gif">
    <table width="720" height="40" border="0" cellspacing="0" cellpadding="0" align="right"><tr><td width="434" height="40" align="right"><img src="themes/ultimate/img/menu/1dole.gif" width="11" height="40" border="0"></td>
    <td height="40" align="center" valign="middle" background="themes/ultimate/img/menu/2dole.gif"><?php draw_copyright(); ?></td><td height="40" width="16" align="left"><img src="themes/ultimate/img/menu/3dole.gif" width="11" height="40" border="0"></td></tr></table>
    </td>
    <td width="40" height="40" background="themes/ultimate/img/3desno.gif"></td>
    </tr>
    </table>
    </body>
    </html>
    <?php
    }

    // functions that draw the boxes

    function theme_draw_leftbox_open( $title )
    {
    ?>
    <table width=125 border=0 cellspacing=0 cellpadding=2>
    <tr>
    <td class="sideboxtitle" align="center" colspan=2>&nbsp;<?php echo $title; ?></td>
    </tr>
    <tr>
    <td class="sideboxtext">
    <?php
    }

    function theme_draw_leftbox_close()
    {
    ?>
    </td>
    </tr>
    </table>
    <?php
    }

    function theme_draw_rightbox_open( $title )
    {
    ?>
    <table width=130 border=0 cellspacing=0 cellpadding=2 style="border-top:1px dotted #999999;" style="border-bottom:1px dotted #999999;">
    <tr>
    <td height="30" class="sideboxtitle_right" align="center" colspan=2><?php echo $title; ?>&nbsp;</td>
    </tr>
    <tr>
    <td class="sideboxtext">
    <?php
    }

    function theme_draw_rightbox_close()
    {
    ?>
    </td>
    </tr>
    </table><br>
    <?php
    }

    function theme_draw_centerbox_open( $title )
    {
    ?>
    <table width="100%" border="0" cellspacing="0" cellpadding="2" align="center">
    <tr>
    <td class="centerboxtitle" align=center><?php echo $title; ?></td>
    </tr>
    <tr>
    <td class="centerboxtext">
    <?php
    }

    function theme_draw_centerbox_close()
    {
    ?>
    </td>
    </tr>
    </table>
    <?php
    }

    function theme_draw_menu_item( $text, $link, $newwindow )
    {
    $target = ($newwindow == "Y")?"target=\"_blank\"":"";
    return "<a href=\"$link\" $target>&nbsp;$text</a><br>\n";
    }
    ?>

  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is this page online? Show us the CSS for the div with id="col1".

    One possible problem I see: the div is a direct child of a table element, that is:
    Code:
    <table>
      <div>
        <tr>
    I don't think that will validate - and that should tell you that it will probably cause problems. Always use a validator

  4. #4
    Non-Member hyperimage's Avatar
    Join Date
    Dec 2003
    Location
    Croatia
    Posts
    259
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    regards Mike Foster!

    i have a pleasure to have your response on my questions!!!
    your library is great and that means only one thing, that u r great master in matemathics and java!!!
    i downloaded your library and there are 4 css files!
    which one i have to put for hide\show navbar?
    ps: the main file is on-line at www-on-lineportal.com
    i send u here the css file of my site in hope that u show me the right way (as u cetrainly will do) to make this script work!
    thanx again!
    another question: if u have any banner ( no matter which size) to give me and ill put it on my site immediately!!!!!!!


    the css file:

    /* general classes */
    BODY {
    font-family : Arial, Helvetica, sans-serif;
    font-size : 10px;
    color : #333333;
    background-image : url(http://www.on-lineportal.com/ultimat...ate/img/bg.gif);
    scrollbar-arrow-color:#f2f2f2;
    scrollbar-track-color:#cccccc;
    scrollbar-shadow-color:#6699ff;
    scrollbar-face-color:#6699ff;
    scrollbar-highlight-color:#6699ff;
    scrollbar-darkshadow-color:#333333;
    scrollbar-3dlight-color:#333333;
    scrollbar-base-color:#6699ff;
    }

    A {
    font-family : Arial, Helvetica, sans-serif;
    font-size : 10px;
    text-decoration : none;
    color : #333333;
    }

    A:HOVER {
    text-decoration : underline;
    color : #ff0000;
    }

    TH,TD {
    font-family : Arial, Helvetica, sans-serif;
    font-size : 10px;
    }

    HR {
    border : 1px solid #ffffff;
    }

    .error {
    font-family : Arial, Helvetica, sans-serif;
    font-size : 10px;
    color : Red;
    }

    .info {
    font-family : Arial, Helvetica, sans-serif;
    font-size : 10px;
    color : Blue;
    }

    /* these are used by modules and core to render text inside tables */
    .centerboxtext {
    font-family : Arial, Helvetica, sans-serif;
    font-size : 10px;
    background : White;
    color : #333333;
    }

    .sideboxtext {
    font-family : Arial, Helvetica, sans-serif;
    font-size : 10px;
    background : #6699ff;
    color : #333333;
    }

    .plainboxtitle {
    font-family : Arial, Helvetica, sans-serif;
    font-size : 10px;
    font-weight : normal;
    background : #ccffff;
    border-top : 0px solid #666666;
    border-bottom : 0px solid #666666;
    color : #333333;

    }

    .plainboxtext {
    font-family : Arial, Helvetica, sans-serif;
    font-size : 10px;
    background : #ccffff;
    color : #333333;
    }

    /* these are used by the theme only - do not use outside theme!*/
    .sideboxtitle {
    background : #6699ff;
    border-bottom : 0px solid #333333;
    font-family : Arial, Helvetica, sans-serif;
    font-size : 10px;
    font-weight : bold;
    color : #ffffff;
    }

    .centerboxtitle {
    background : #6699ff;
    border-bottom : 0px solid #333333;
    font-family : Arial, Helvetica, sans-serif;
    font-size : 10px;
    font-weight : normal;
    color : #ffffff;
    }

    .pgprocessed {
    color: #333333;
    font-family : Arial, Helvetica, sans-serif;
    font-size: 9px;
    }

    /* user card */
    .userexttable {
    font-family : Arial, Helvetica, sans-serif;
    font-size : 10px;
    color : #333333;
    background : #ffffcc;
    }

    .usertoppanel {
    font-family : Arial, Helvetica, sans-serif;
    font-size : 10px;
    background : #ccffff;
    color : #333333;
    }

    .userbottompanel {
    font-family : Arial, Helvetica, sans-serif;
    font-size : 10px;
    background : #ccffff;
    color : #333333;
    }

    .myaccount1 {
    font-family : Arial, Helvetica, sans-serif;
    font-size : 10px;
    background : #ccffff;
    color : #333333;
    }

    .myaccount2 {
    font-family : Arial, Helvetica, sans-serif;
    font-size : 10px;
    background : #ccffff;
    color : #333333;
    }

  5. #5
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks !

    Did you use a validator?

    Please describe what is not working and how it is supposed to work. I'm not getting any errors when I go to the page. What should I do to see the problem?

    I still don't think a div can be a direct child of a table element (reference). Perhaps you should hide/show a table row or column instead of wrapping the row in a div.

    Also, I would put all script elements in the head - unless you have a good reason to nest them in the table.

    BTW, I don't have a good banner (I do need one) - but if you would like to provide a text link to cross-browser.com that would be great - thanks!

  6. #6
    Non-Member hyperimage's Avatar
    Join Date
    Dec 2003
    Location
    Croatia
    Posts
    259
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    hi mike!

    i thought that u know about im talking couse ive posted my question in previously message! my fault!
    i asked the script for hide show the navbar like this site have on articles page!
    the gentle guy gave me the script but i dont know how to put it inside so i put the script in head section and ive named the divs as col1 and col2!
    and the navbar wont hide or show at my main page!
    im a novice in java really and i dont know how to make it work!!!
    i just need the right way to make work this hide show navbar script!
    the validation s ok!
    thanx
    ps: ill made an animated gif banner for u in 3 sizes!
    468x60 standard, 125x125 box, 88x31 button, obviously that will be a gift for you!

  7. #7
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hyperimage,

    A validator is a 'syntax checker' for html. You should utilize this free tool. Go to this link and give it a URL to your page - it will be very helpful.

    It was very nice of mmj to provide you with the code SitePoint uses. However, it is not a copy and paste solution. SitePoint and the article you read are not using tables for layout - you are using tables for layout. I've tried to explain that you cannot simply wrap a TD in a DIV. You should download Mozilla and load your page into the 'DOM Inspector'. It shows plainly that the DIVs are invalid.

    Actually, there is a very simple technique you can use for this effect - which does not require the X library. First get rid of the DIVs. Then copy the following function into a script element in the head.
    Code:
    function toggleCol1()
    {
      if (document.getElementById) {
        var c1 = document.getElementById('col1');
        if (c1 && c1.style) {
          if (c1.style.display == 'none') {
            c1.style.display = 'block';
          }
          else {
            c1.style.display = 'none';
          }
        }
      }
    }
    Now, it appears that you want the navigation column to toggle when the user clicks on the center column (is that right?). I notice that there are three TDs in a nested table - these TDs are the three 'content' columns. For column #1 give the TD an id as follows:
    Code:
    <td id='col1' align="center" valign="top" style="border-right:1px dotted #999999;" bgcolor="#cccccc">
    Now for column #2 give the TD an onclick handler as follows:
    Code:
    <td onclick='toggleCol1()' width="100%" valign=top align="center"  style="border-top:1px dotted #999999;">
    That's it! You don't even need the X library.

    Please note: I put this together quickly as an example for you. I am not suggesting that this is a 'finished solution' for your client's site. However, I tested it quickly in Opera7, Mozilla1.5, and IE6 (all on Win2K) and it worked.

    Thanks for the offer to make me some banners - I appreciate that very much. However, if you don't have time for that then a text link would be just fine.

    Thanks, and good luck.

  8. #8
    Non-Member hyperimage's Avatar
    Join Date
    Dec 2003
    Location
    Croatia
    Posts
    259
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    u r a genious!!!!

    thanx mike!!!!
    the script work perfectly!!!
    check it out at www.on-lineportal.com
    ive put a text link to your cross-browser website for now till i finish the animated gif banner!!!!!
    thanx again and happy new year man!!!!!!!!!!!!!!!!!!!!!!!!!!!!


Bookmarks

Posting Permissions

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