Forum Subject: Collapsable Left Block? Possible?

Posted on: 03/19/04 02:32pm
By: destr0yr

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() Would it be possible? Any suggestions/hints on how I could impliment this?

Collapsable Left Block? Possible?

Posted on: 03/19/04 05:09pm
By: Turias

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!

Collapsable Left Block? Possible?

Posted on: 03/19/04 05:17pm
By: Turias

Actually, I'm going insane. Don't edit COM_siteFooter or COM_siteHeader. Write the script directly in your footer.thtml theme file.

Collapsable Left Block? Possible?

Posted on: 03/19/04 07:14pm
By: destr0yr

sooo uhm... i start a javascript with "script language= ..." right?

Thanks.

Collapsable Left Block? Possible?

Posted on: 03/20/04 03:17pm
By: Turias

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).

Collapsable Left Block? Possible?

Posted on: 03/26/04 06:57am
By: Dazzy

Sounds like a cool idea!, hows this coming on?

Collapsable Left Block? Possible?

Posted on: 04/13/04 06:22pm
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.

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

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...

Collapsable Left Block? Possible?

Posted on: 04/13/04 08:04pm
By: ScurvyDawg

Turias

That rocks very cool theme hack there man.

Collapsable Left Block? Possible?

Posted on: 04/13/04 09:29pm
By: Turias

[QUOTE BY= ScurvyDawg] Turias

That rocks very cool theme hack there man.

[/QUOTE]

Thanks.

Collapsable Left Block? Possible?

Posted on: 04/13/04 09:35pm
By: geKow

WOW! .......I'm missing a thumbs up smily...... Blaine.?

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

geKow

Collapsable Left Block? Possible?

Posted on: 04/14/04 01:50am
By: destr0yr

[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. [/QUOTE]
I'm sorry

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

IMHO, this should be included into GL!!

Collapsable Left Block? Possible?

Posted on: 04/14/04 08:03am
By: Turias

[QUOTE BY= destr0yr]
I'm sorry [/QUOTE]

Don't worry about it. I was just giving you a hard time. 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.

Collapsable Left Block? Possible?

Posted on: 04/14/04 08:10am
By: Kybla

This hack is simply superb! Thanks!

Collapsable Left Block? Possible?

Posted on: 04/14/04 10:30am
By: Dazzy

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

Collapsable Left Block? Possible?

Posted on: 04/14/04 10:40am
By: Turias

If you post those files here in codeblocks I'll take a look at 'em.

Collapsable Left Block? Possible?

Posted on: 04/14/04 11:46am
By: destr0yr

Working XSilver: www.destr0yr.com[*3]

header.thtml:

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

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

<!-- 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.

Collapsable Left Block? Possible?

Posted on: 04/14/04 12:19pm
By: Turias

[QUOTE BY= destr0yr] Working XSilver: www.destr0yr.com[*3] [/QUOTE]

Your rightblocks look really strange in FireFox on Linux. Is that due to the updated header.thtml file or was it like that before?

Collapsable Left Block? Possible?

Posted on: 04/14/04 01:10pm
By: Dazzy

My files where the same as Destroyers! and you can see the result on my test website here[*4]

Collapsable Left Block? Possible?

Posted on: 04/14/04 01:22pm
By: destr0yr

[QUOTE BY= Dazzy] My files where the same as Destroyers! and you can see the result on my test website here[*4] [/QUOTE]
in your theme folder create a new folder called interface, and in that folder download the following files:
blank.gif[*5]
downarrow.gif[*6]
rightarrow.gif[*7]
leftarrow.gif[*8]
[QUOTE by= Turias]Your rightblocks look really strange in FireFox on Linux[/QUOTE]
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.

Collapsable Left Block? Possible?

Posted on: 04/14/04 01:28pm
By: Turias

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?

Collapsable Left Block? Possible?

Posted on: 04/14/04 01:54pm
By: Turias

Due to popular demand, I have added the XSilver_Collapsable to my site. I placed the arrows in a slightly different place than destr0yr did, but it shouldn't matter. You can place them anywhere you want.

Collapsable Left Block? Possible?

Posted on: 04/14/04 01:55pm
By: Dazzy

Thanks guys but I already had the images in the interface folder.

I have also upload the xlib thing to my root directory

Collapsable Left Block? Possible?

Posted on: 04/14/04 02:07pm
By: Turias

[QUOTE BY= Dazzy] Thanks guys but I already had the images in the interface folder.

I have also upload the xlib thing to my root directory[/QUOTE]

You have two problems:

1) You're X library paths are incorrect in your header.thtml file.
2) arrowLink.href = 'javascript:toggleBlocks('right')';
There should be backslahes to escape the inner quotes. That is in your rightblocks.thtml file. Your leftblocks file is correct, so you can use that to compare.

Collapsable Left Block? Possible?

Posted on: 04/14/04 03:38pm
By: dewdoo

I got everything kinda working, but my boxes wont collapse. I am using axonz red theme 3.2.1. Does any one got it working with this theme and post it here. thanx

Collapsable Left Block? Possible?

Posted on: 04/15/04 07:51am
By: Turias

[QUOTE BY= dewdoo] I got everything kinda working, but my boxes wont collapse. I am using axonz red theme 3.2.1. Does any one got it working with this theme and post it here. thanx[/QUOTE]

For those wondering, we got it to work. Anyone interested in getting it to work for Axonz should check out the comments posted on my site.

Collapsable Left Block? Possible?

Posted on: 04/18/04 08:41am
By: HawkeVIPER

[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.

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

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... [/QUOTE]

How about I give you .torturedsoul.org or .wefixtech.co.uk in return for you implementing this on my site?