The secure CMS.

Welcome to Geeklog, Anonymous Friday, November 29 2024 @ 04:01 am EST

Geeklog Forums

Collapsable Left Block? Possible?

 New Topic  Post Reply

Page navigation

 03/19/04 02:32pm (Read 11,024 times)  
Status: offline

destr0yr

Forum User
Full Member
Registered: 07/06/02
Posts: 324
Just something I've seen on various other websites... At the top of the left block an option that reads "Collapse Menu" which will add/remove the left block. Could this be done with COM_SiteHeader('none') and SiteHeader() Question Would it be possible? Any suggestions/hints on how I could impliment this?
-- destr0yr
"I love deadlines. I like the whooshing sound they make as they fly by." -- Douglas Adams
 Quote
 03/19/04 05:09pm  
Status: offline

Turias

Forum User
Full Member
Registered: 10/20/03
Posts: 807
Hmmm, there are a number of ways you could do this

I think the best would be to useJavascript to collapse the left blocks. This could be done by writing out the script in siteHeader or siteFooter. This script would find the element with "leftblocks" as the id, and set the 'display' attribute to none. Make sure that the leftblocks are surrounded by an element with the correct id in your appropriate theme file. To get this working, have the link or button run this script.

This should be simple to implement, as it would only require editing a couple files. It would be nice to have the script change the button so that you could redisplay the blocks by pushing it again.

Ideally you would like to store this in a cookie so that new pages can have the blocks collapsed if that was the way they were before.

Sounds like a really cool idea. Let me know how it goes!
 Quote
 03/19/04 05:17pm  
Status: offline

Turias

Forum User
Full Member
Registered: 10/20/03
Posts: 807
Actually, I'm going insane. Don't edit COM_siteFooter or COM_siteHeader. Write the script directly in your footer.thtml theme file.
 Quote
 03/19/04 07:14pm  
Status: offline

destr0yr

Forum User
Full Member
Registered: 07/06/02
Posts: 324
sooo uhm... i start a javascript with "script language= ..." right? Wink

Thanks. Mr. Green
-- destr0yr
"I love deadlines. I like the whooshing sound they make as they fly by." -- Douglas Adams
 Quote
 03/20/04 03:17pm  
Status: offline

Turias

Forum User
Full Member
Registered: 10/20/03
Posts: 807
I'll tell ya what... you create some cool button images that go well in the SmoothBlue and Axonz themes to collapse/expand the block, and I'll write the JavaScript (and maybe the cookie). Mr. Green
 Quote
 03/26/04 06:57am  
Status: offline

Dazzy

Forum User
Full Member
Registered: 07/19/03
Posts: 200
Location:N. Ireland
Sounds like a cool idea!, hows this coming on?
Dazzy
 Quote
 04/13/04 06:22pm  
Status: offline

Turias

Forum User
Full Member
Registered: 10/20/03
Posts: 807
All right, I've done it. Unfortunately, destr0yr didn't make me any cool images, so I made a crappy 12x12 image of an arrow. Cry

Anyway, you can see what I have done on the following site that I threw together:
http://s93499194.onlinehome.us/playground/index.php

I know it's a horrible URL, but I don't have a domain that would be appropriate. Now, if Dirk wanted to give me a user and some space on the project site... Wink
 Quote
 04/13/04 08:04pm  
Status: offline

ScurvyDawg

Forum User
Full Member
Registered: 11/06/02
Posts: 523
Turias

That rocks very cool theme hack there man.

 Quote
 04/13/04 09:29pm  
Status: offline

Turias

Forum User
Full Member
Registered: 10/20/03
Posts: 807
Quote by ScurvyDawg: Turias

That rocks very cool theme hack there man.



Thanks. Big Grin
 Quote
 04/13/04 09:35pm  
Status: offline

geKow

Forum User
Full Member
Registered: 01/12/03
Posts: 445
WOW! .......I'm missing a thumbs up smily...... Blaine.? Wink

He good work...looks verry cool and your icon ain't that bad.

geKow
 Quote
 04/14/04 01:50am  
Status: offline

destr0yr

Forum User
Full Member
Registered: 07/06/02
Posts: 324
Quote by Turias: All right, I've done it. Unfortunately, destr0yr didn't make me any cool images, so I made a crappy 12x12 image of an arrow. Cry

I'm sorry Frown

I've implimented this at my page (www.okanagangirlz.com) and its uber-secksay. I love it, thanks Turias for making my dream come true!! Smile (that was lame, but seriously, no BS.)

IMHO, this should be included into GL!!
-- destr0yr
"I love deadlines. I like the whooshing sound they make as they fly by." -- Douglas Adams
 Quote
 04/14/04 08:03am  
Status: offline

Turias

Forum User
Full Member
Registered: 10/20/03
Posts: 807
Quote by destr0yr:
I'm sorry Frown


Don't worry about it. I was just giving you a hard time. Mr. Green It didn't take me long at all to throw that arrow image together.

I'm glad you liked the hack! It's nice to know that someone out there is using it. Big Grin
 Quote
 04/14/04 08:10am  
Status: offline

Kybla

Forum User
Newbie
Registered: 05/15/02
Posts: 9
This hack is simply superb! Thanks!
 Quote
 04/14/04 10:30am  
Status: offline

Dazzy

Forum User
Full Member
Registered: 07/19/03
Posts: 200
Location:N. Ireland
Works well but I'm having trouble chagning the XSilver theme to incorporate it.

It keeps throwing up the blank.gif image as if there were no blocks dispalyed!

Has anyone added this to Xsilver yet? and if so could I see your header, leftblocks, and rightblocks.thtml files?

Thanks
Dazzy
 Quote
 04/14/04 10:40am  
Status: offline

Turias

Forum User
Full Member
Registered: 10/20/03
Posts: 807
If you post those files here in codeblocks I'll take a look at 'em.
 Quote
 04/14/04 11:46am  
Status: offline

destr0yr

Forum User
Full Member
Registered: 07/06/02
Posts: 324
Working XSilver: www.destr0yr.com

header.thtml:
Text Formatted Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset={charset}">
<title>{page_title}</title>
<META NAME="ROBOTS" CONTENT="INDEX,FOLLOW">
<LINK REL="SHORTCUT ICON" href="{site_url}/favicon.ico">
<!--
<meta http-equiv="Pragma" content="no-cache">
-->
<link rel="stylesheet" type="text/css" href="{css_url}" title="{theme}">

<!-- Needed JavaScript Code -->
<script type="text/javascript" language="JavaScript1.2">
    var cleared = 0;

    function clearField(field)
    {
        if (cleared != 1) {
            field.value = ""
            cleared = 1
        } else {
            cleared = 0
        }
    }
</script>

<!-- COLLAPSABLE BLOCK CHANGE -->
<!-- Needed Javascript includes for collapsable functionality.  These great javascipt libraries
     can be downloaded at http://www.cross-browser.com/  Look for The X Library. -->
<script src="{site_url}/include/x/x_core.js" type="text/javascript"></script>
<script src="{site_url}/include/x/x_cook.js" type="text/javascript"></script>
<script type="text/javascript">
   
    // This function, when called with 'left' or 'right' as a parameter, will toggle the
    // left or right blocks, respectively.  It will also set a cookie so that your browser
    // remembers which blocks the user has collapsed.
    function toggleBlocks(side)
    {
        // There are two variables here since the SmoothBlue theme uses two elements to display
        // the blocks on each side.  You may need more or less depending on your theme.
        var blocks1;
        var blocks2;
       
        var arrowImg;
        var cookieName = 'displaySideBlocks';
        var cookieVal = xGetCookie(cookieName);
        var sideArrowSrc;
        var show = false;

        if (side == 'left')
        {
            blocks1 = xGetElementById("leftBlocksContent1");
            blocks2 = xGetElementById("leftBlocksContent2");
            arrowImg = xGetElementById("leftBlocksArrow");
            sideArrowSrc = "{layout_url}/interface/rightarrow.gif";
        }
        else
        {
            blocks1 = xGetElementById("rightBlocksContent1");
            blocks2 = xGetElementById("rightBlocksContent2");
            arrowImg = xGetElementById("rightBlocksArrow");
            sideArrowSrc = "{layout_url}/interface/leftarrow.gif";
        }

        // Check to see if these blocks are hidden.  If so, we want to 'show' them.
        if (blocks1.style.display == 'none')
        {
            show = true;
        }
        if (show)
        {
            blocks1.style.display = '';
            blocks2.style.display = '';
            arrowImg.src = "{layout_url}/interface/downarrow.gif";

            if (cookieVal == 'none')
            {
                cookieVal = side;
            }
            else
            {
                cookieVal = 'both';
            }
        }
        else
        {
            blocks1.style.display = 'none';
            blocks2.style.display = 'none';
            arrowImg.src = sideArrowSrc;

            if (cookieVal == 'both')
            {
                if (side == 'right')
                {
                    cookieVal = 'left';
                }
                else
                {
                    cookieVal = 'right';
                }
            }
            else
            {
                cookieVal = 'none';
            }
        }

        var expireDate = new Date();
        expireDate.setTime(expireDate.getTime() + 30 * 24 * 3600 * 1000);  // Set the cookie to expire in 30 days
        xSetCookie(cookieName, cookieVal, expireDate, '/');
    }
</script>

<!-- Code for imageswaps, do not remove -->
<script type="text/javascript" language="JavaScript1.2">
d290=new Image(125,22)
d290.src="{layout_url}/images/stats.gif"
d854=new Image(125,22)
d854.src="{layout_url}/images/stats-2.gif"

e721=new Image(125,22)
e721.src="{layout_url}/images/calendar.gif"
e38=new Image(125,22)
e38.src="{layout_url}/images/calendar-2.gif"

c742=new Image(125,22)
c742.src="{layout_url}/images/links.gif"
c831=new Image(125,22)
c831.src="{layout_url}/images/links-2.gif"

e806=new Image(125,22)
e806.src="{layout_url}/images/submit.gif"
e388=new Image(125,22)
e388.src="{layout_url}/images/submit-2.gif"

c418=new Image(125,22)
c418.src="{layout_url}/images/polls.gif"
c830=new Image(125,22)
c830.src="{layout_url}/images/polls-2.gif"

c446=new Image(125,22)
c446.src="{layout_url}/images/personalize.gif"
c233=new Image(125,22)
c233.src="{layout_url}/images/personalize-2.gif"

function filter(imagename,objectsrc){
if (document.images)
document.images[imagename].src=eval(objectsrc+".src")
}
//-->
</script>
{plg_headercode}
</head>
<body bgcolor="#404040">
<table border="0" cellpadding="0" cellspacing="0" width="780" align="center" bgcolor="#CCCCCC">
    <tr>
      <td width="6"><img border="0" src="{layout_url}/images/container-left-top-corner.gif" width="6" height="22" alt=""></td>
      <td width="100%" height="22" background="{layout_url}/images/container-top-bg.gif" nowrap><a href="{site_url}/stats.php" onmouseover="filter('d703','d854')"
onmouseout="filter('d703','d290')">
<img border="0" src="{layout_url}/images/stats.gif" name="d703" width="125" height="22" alt=""></a><a href="{site_url}/calendar.php" onmouseover="filter('e844','e38')" onmouseout="filter('e844','e721')"><img border="0" src="{layout_url}/images/calendar.gif" name="e844" width="125" height="22" alt=""></a><a href="{site_url}/links.php" onmouseover="filter('c927','c831')" onmouseout="filter('c927','c742')"><img border="0" src="{layout_url}/images/links.gif" name="c927" width="125" height="22" alt=""></a><a href="{site_url}/submit.php?type=story{current_topic}" onmouseover="filter('e58','e388')"
onmouseout="filter('e58','e806')"><img border="0" src="{layout_url}/images/submit.gif" name="e58" width="125" height="22" alt=""></a><a href="{site_url}/pollbooth.php" onmouseover="filter('c337','c830')"
onmouseout="filter('c337','c418')"><img border="0" src="{layout_url}/images/polls.gif" name="c337" width="125" height="22" alt=""></a><a href="{site_url}/usersettings.php?mode=preferences" onmouseover="filter('c855','c233')"
onmouseout="filter('c855','c446')"><img border="0" src="{layout_url}/images/personalize.gif" name="c855" width="125" height="22" alt=""></a></td>
      <td width="6"><img border="0" src="{layout_url}/images/container-right-top-corner.gif" width="6" height="22" alt=""></td>
    </tr>
    <tr>
      <td width="6" background="{layout_url}/images/container-left-tube-bg.gif"><img border="0" src="{layout_url}/images/container-left-tube-bg.gif" width="6" height="5" alt=""></td>
      <td width="100%">

  <table bgcolor="#EFEFEF" border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td align="left" width="50%"><a href="{site_url}"><img border="0" src="{layout_url}/images/logo.gif" width="183" height="70" alt="{site_name}"></a></td><td width="50%" align="right" valign="top">
<table cellpadding="0" cellspacing="0" border="0"><tr>
<td>
<form action="{site_url}/search.php" method="get"><input type="text" name="query" class="menusearch" size="15" maxLength="255"><input type="submit" value="{button_search}"> <input type="hidden" name="type" value="all"><input type="hidden" name="mode" value="search"></form></td></tr></table></td></tr>
<tr>
      <td width="50%" class="welcomeblock" valign="middle"
align="left"> <b>{welcome_msg}</b></td>       <td width="50%" class="welcomeblock"
valign="middle" align="right"><b>{datetime}</b> </td>    </tr>
<tr><td width="100%" class="headerblock" valign="middle"
align="center" colspan="2"><a href="{site_url}/search.php">{button_advsearch}</a>   <a href="{site_url}/profiles.php?uid=2">{button_contact}</a> {plg_menu_elements}</td> </tr> </table>
      <!-- COLLAPSABLE BLOCK CHANGE -->
      <!-- Add the placeholders for the arrow images.  Don't actually display them until we know which image to display and if we actually want to display it. -->
      <div style="float:left; padding-top:2px;"><a id="leftBlocksArrowLink"><img id="leftBlocksArrow" border="0" src="{layout_url}/interface/blank.gif" width="12" height="12" /></a></div>
      <div style="float:right; padding-top:2px;"><a id="rightBlocksArrowLink"><img id="rightBlocksArrow" src="{layout_url}/interface/blank.gif" border="0" width="12" height="12"/></a></div>

<table border="0" cellspacing="3" cellpadding="0" width="100%" bgcolor="#CCCCCC">
    <tr>
        {left_blocks}
        <td width="100%" valign="top">

            <!-- START OF CONTENT AREA -->

 


rightblocks.thtml
Text Formatted Code
        <!-- CHANGED FOR COLLAPSABLE BLOCKS -->
        <script>
            var cookieVal = xGetCookie('displaySideBlocks');

            // If the user does not have a cookie, assume they want to see all blocks.  Then, set the cookie.
            if (cookieVal == null)
            {
                cookieVal = 'both';
                var expireDate = new Date();
                expireDate.setTime(expireDate.getTime() + 30 * 24 * 3600 * 1000);
                xSetCookie('displaySideBlocks', cookieVal, expireDate, '/');
            }

            var arrow = xGetElementById('rightBlocksArrow');
            var arrowLink = xGetElementById('rightBlocksArrowLink');
            var display;

            arrowLink.href = 'javascript:toggleBlocks('right')';
            if (cookieVal == 'right' || cookieVal == 'both')
            {
                // We should display the rightblocks.
                arrow.src = "{layout_url}/interface/downarrow.gif";
                display = '';
            }
            else
            {
                // We should hide the rightblocks.
                arrow.src = "{layout_url}/interface/leftarrow.gif";
                display = 'none';
            }
        </script>


        <!-- Note: I have added ID attributes to the following tabledata elements.  This is so we can
             easily refer to them and hide/display them at will.  Depending on your theme, you will have
             to add the ID attributes to different elements.  It all depends on your theme.  Also, if
             nothing appears to be wrapped around the geeklog_blocks variable, you can always try to
             wrap a div around it yourself and then add the ID to it. -->
<td id="rightBlocksContent1"><img src="{site_url}/images/speck.gif" width="10" height="1" alt=""></td>
<td id="rightBlocksContent2" class="featureblock" valign="top">
  {geeklog_blocks}
  <br>
  <img src="{site_url}/images/speck.gif" width="180" height="1" alt="">
</td>

        <!-- Finally, we set the display attribute of the block wrappers depending on whether or not we want to show them. -->
        <script>
            var e1 = xGetElementById('rightBlocksContent1');
            var e2 = xGetElementById('rightBlocksContent2');
            e1.style.display = display;
            e2.style.display = display;
        </script>

 


leftblocks.thtml
Text Formatted Code
<!-- CHANGED FOR COLLAPSABLE BLOCKS -->
        <script>
            var cookieVal = xGetCookie('displaySideBlocks');

            // If the user does not have a cookie, assume they want to see all blocks.  Then, set the cookie.
            if (cookieVal == null)
            {
                cookieVal = 'both';
                var expireDate = new Date();
                expireDate.setTime(expireDate.getTime() + 30 * 24 * 3600 * 1000);
                xSetCookie('displaySideBlocks', cookieVal, expireDate, '/');
            }

            var arrow = xGetElementById('leftBlocksArrow');
            var arrowLink = xGetElementById('leftBlocksArrowLink');
            var display;

            arrowLink.href = 'javascript:toggleBlocks(\'left\')';
            if (cookieVal == 'left' || cookieVal == 'both')
            {
                // We should display the leftblocks.
                arrow.src = "{layout_url}/interface/downarrow.gif";
                display = '';
            }
            else
            {
                // We should hide the leftblocks.
                arrow.src = "{layout_url}/interface/rightarrow.gif";
                display = 'none';
            }
        </script>


        <!-- Note: I have added ID attributes to the following tabledata elements.  This is so we can
             easily refer to them and hide/display them at will.  Depending on your theme, you will have
             to add the ID attributes to different elements.  It all depends on your theme.  Also, if
             nothing appears to be wrapped around the geeklog_blocks variable, you can always try to
             wrap a div around it yourself and then add the ID to it. -->
        <td id="leftBlocksContent1" class="featureblock" valign="top">
            {geeklog_blocks}
            <br><img src="{site_url}/images/speck.gif" width="180" height="1" alt="">
        </td><td id="leftBlocksContent2"><img src="{site_url}/images/speck.gif" width="10" height="1" alt=""></td>


        <!-- Finally, we set the display attribute of the block wrappers depending on whether or not we want to show them. -->
        <script>
            var e1 = xGetElementById('leftBlocksContent1');
            var e2 = xGetElementById('leftBlocksContent2');
            e1.style.display = display;
            e2.style.display = display;
        </script>

 


HTH.
-- destr0yr
"I love deadlines. I like the whooshing sound they make as they fly by." -- Douglas Adams
 Quote
 04/14/04 12:19pm  
Status: offline

Turias

Forum User
Full Member
Registered: 10/20/03
Posts: 807
Quote by destr0yr: Working XSilver: www.destr0yr.com


Your rightblocks look really strange in FireFox on Linux. Is that due to the updated header.thtml file or was it like that before?
 Quote
 04/14/04 01:10pm  
Status: offline

Dazzy

Forum User
Full Member
Registered: 07/19/03
Posts: 200
Location:N. Ireland
My files where the same as Destroyers! and you can see the result on my test website here
Dazzy
 Quote
 04/14/04 01:22pm  
Status: offline

destr0yr

Forum User
Full Member
Registered: 07/06/02
Posts: 324
Quote by Dazzy: My files where the same as Destroyers! and you can see the result on my test website here

in your theme folder create a new folder called interface, and in that folder download the following files:
blank.gif
downarrow.gif
rightarrow.gif
leftarrow.gif
Quote by Turias:Your rightblocks look really strange in FireFox on Linux

Yah, I noticed that too with firefox on my linux box. I haven't played with the DIV statement yet to make it fit on top instead of beside the blocks.
-- destr0yr
"I love deadlines. I like the whooshing sound they make as they fly by." -- Douglas Adams
 Quote
 04/14/04 01:28pm  
Status: offline

Turias

Forum User
Full Member
Registered: 10/20/03
Posts: 807
I slightly modified my leftblocks and rightblocks themefiles. Before, it was possible for slower connections to see the blocks display, and then hide, depending on their settings. The new files fix this.

All I added were the "style" attributes to the sideblock td elements.

And Dazzy, your site looks fine to me. You are missing the X Library includes, though. That is why your images aren't loading. So it's not the DIVs. Maybe there is a problem with your store block, destr0yr?
 Quote

Page navigation

 New Topic  Post Reply
All times are EST. The time is now 04:01 am.
  • Normal Topic
  • Sticky Topic
  • Locked Topic
  • New Post
  • Sticky Topic W/ New Post
  • Locked Topic W/ New Post
  •  View Anonymous Posts
  •  Able to post
  •  Filtered HTML Allowed
  •  Censored Content