Welcome to Geeklog, Anonymous Monday, November 25 2024 @ 12:42 pm EST
Geeklog Forums
Collapsable Left Block? Possible?
Page navigation
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() 
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
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
30
37
Quote
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!
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!
35
32
Quote
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. 
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...
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...
34
36
Quote
Status: offline
ScurvyDawg
Forum User
Full Member
Registered: 11/06/02
Posts: 523
Turias
That rocks very cool theme hack there man.
That rocks very cool theme hack there man.
40
38
Quote
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.
I'm sorry
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!!
(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
31
32
Quote
Status: offline
Turias
Forum User
Full Member
Registered: 10/20/03
Posts: 807
Quote by destr0yr:
I'm sorry
I'm sorry
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.
35
41
Quote
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
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
31
36
Quote
Status: offline
destr0yr
Forum User
Full Member
Registered: 07/06/02
Posts: 324
Working XSilver: www.destr0yr.com
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
<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
<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
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
28
35
Quote
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?
33
30
Quote
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
28
29
Quote
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?
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?
29
34
Quote
Page navigation
All times are EST. The time is now 12:42 pm.
- 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