Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > How to show or hide your left and right side content boxes
Mottie (MVP) 8/6/2008 10:43 AM EST : How to show or hide your left and right side content ...
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Adding the script

  • Free site: Copy (Ctrl-C) and Paste (Ctrl-V) the code while in HTML mode () into any Free Form Text/HTML content box. You'll have to add this to each page - or paste the code into the footer

  • Paid site: Copy (Ctrl-C) and Paste (Ctrl-V) the code into the header or footer area to effect every page on your site. It does the rest

  • Check out my test-site Home page (link at the bottom) and look to either side of my "Welcome" box, you'll see a small arrow on either side. Click on them to see what happens.

The Code

<style type="text/css">
// Entire spacer
.LeftContentSpacer, .RightContentSpacer {
 vertical-align: top;
 cursor: pointer;

}
// Hide/Show link style
.LeftContentSpacer a, .RightContentSpacer a {
 color:
#bbbbbb;
 font-weight: bold;
 font-size: 12px;
}

// style shown when you hover over the spacer
.LeftContentSpacer.hover, .RightContentSpacer.hover {
 background:
#333;
 opacity:
0.7;
 filter: alpha(opacity=
70);
}
</style>
<script type="text/javascript" src="http://www.axiomfiles.com/Files/258012/hideshow-zone-min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 hideSides();
})

</script>

Customizing the script

The code above sets the scripts with default settings. Here is code that shows all the default settings:
 hideSides({
  hideIndicator    : "&lsaquo;",
  showIndicator    : "&rsaquo;",
  switchIndicators : false,
  tooltip          : "Click to hide/show side bar",
  tooltipWidth     : 180,
  clickableSpacer  : true
 });
  • Styling CSS:

    • The entire spacer, where the link goes, has CSS to make the cursor change into a pointing finger when you hover over it and it put the indicator at the top of the page.
    • The link color is in blue. You can also adjust the "font-weight" and "font-size" if you prefer.
    • There is a new class called "hover" that is added when you hover over the spacer. In the CSS above, it changes the background color and makes it slightly transparent (optional).

  • Changing the Indicator:

    • By default, the indicators are arrows. Note that the indicator switches depending on which side it is on and if the side content is shown or hidden. So if you add text like "hide" or "show" it doesn't work as you expect. This is why I added the "switchIndicators" variable - set to true by default to work properly with arrows, but set to false if using text. Here is an example:

       hideSides({
        hideIndicator    : "h<br>i<br>d<br>e"
      ,
        showIndicator    : "
      s<br>h<br>o<br>w",
        switchIndicators : false
       });

    • If you want to use different arrows, don't change the "switchIndicators" value:

       hideSides({
        hideIndicator : "<-"
      ,
        showIndicator : "
      ->"
       });


      Yeah I know those arrows are ugly, but you should get the idea.

    • If you are going to use an image, use single quotes around the src instead of double quotes:

       hideSides({
        hideIndicator : "<img src='image1.jpg'>"
      ,
        showIndicator : "
      <img src='image2.jpg'>"
       });


  • Tooltip

    • Modify the tooltip text using the "tooltip" variable
    • Modify the tooltip width by adjusting the "tooltipWidth" variable in red
    • Note: The modified tooltip script is required for this option to work properly.

       hideSides({
        tooltip      : "Click me darnit!",
        tooltipWidth : 100

       });


  • Clickable area

    • By default, the entire spacer is clickable.
    • You can make only the text/arrow clickable by setting the "clickableSpacer" variable to false

       hideSides({
        clickableSpacer  : false
       });

* NOTE: if adding options to the hideSides() function, make sure the LAST option does not have a comma at the end - this will break the script in IE.
Edit: LOL added comments about free & paid sites, thanks for reminding me Everdark!
Edit (1/19/2009): Updated the code to use jQuery to stop errors
Edit (4/24/2010): Updated script to allow text and doesn't switch and a few other variables.
TopBottom

Everdark (MVP) 8/6/2008 11:16 AM EST : RE: How to show or hide your left and right side cont...
GuildPortal MVP
Everdark
Posts: 3953
Zomgawsh Poster

I swear, you're like the guy who takes a beat up old car shows how to customize it into a classy high end show piece! (Not saying GP is a beat up old car, mind you )

You could have your own web show called something like, "Mottify My Site!"

    "Today on 'Mottify My Site' we are going to add a live in-game feed into a side panel. First you'll need to use custom CSS and have a paid site for this to work. Now copy and paste the following into your new content container, making sure that you are in HTML mode  first ......"



I should change my Sig to say, "The person who says it cannot be done... hasn't met Mottie."

"The person who says it cannot be done should not interrupt the person doing it." 

 
Everdark (T), Evadarr, Nevinn (AC), Soninn, Croninn, Zakarr, Avirded (SC)
TopBottom

Mottie (MVP) 8/6/2008 11:36 AM EST : RE: How to show or hide your left and right side cont...
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

LMAO you're too funny
TopBottom

_Shulkie_ (Guild Admin) 4/24/2010 7:23 AM EST : RE: How to show or hide your left and right side cont...
_Shulkie_
Posts: 467
Fingers of Fury!

I know this is a bit of a necro but might be useful for someone, just a tweak of mottie's code I was trying on my site but decided against using.


<style type="text/css">
#ctl00_ContentPlaceHolder1_LeftSpacer { vertical-align: top; cursor: pointer; color: #ff9900; }
#ctl00_ContentPlaceHolder1_RightSpacer { vertical-align: top; cursor: pointer; color: #ff9900; }
</style>
<script type="text/javascript">
var HArrow = "H<br>I<br>D<br>E<br><br>S<br>I<br>D<br>E<br><br>B<br>A<br>R";
var SArrow = "S<br>H<br>O<br>W<br><br>S<br>I<br>D<br>E<br><br>B<br>A<br>R";
// Don't change anything below
$(document).ready(function() {
 $('#ctl00_ContentPlaceHolder1_LeftSpacer').html('<a id="LIcon" onClick="javascript:hideSide(this.id)">'+HArrow+'</a>');
 $('#ctl00_ContentPlaceHolder1_RightSpacer').html('<a id="RIcon" onClick="javascript:hideSide(this.id)">'+HArrow+'</a>')
});
function hideSide(selSide){
 var side = (selSide == "LIcon") ? $('#ctl00_ContentPlaceHolder1_LeftPane') : $('#ctl00_ContentPlaceHolder1_RightPane');
 if (side.css('display') == "none") {
  side.css('display',"");
  $('#'+selSide).html(HArrow);
 } else {
  side.css('display',"none");
  $('#'+selSide).html(SArrow);
 }
}
</script>
Cheers, Shulkie
TopBottom

Mottie (MVP) 4/24/2010 12:44 PM EST : RE: How to show or hide your left and right side cont...
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Hi Shulkie!

Naw, I don't believe in necro posting as long as you have something to contribute. So I'm actually glad people are still finding these scripts useful. 

So thanks for the tweek and the idea 

I looked at this code that I wrote over a year ago and my OCD compelled me to mess around with it and I made a bunch of changes LOL.

Anyway, I ended up making it an external script that you can just point to and add options as desired. The top post has been updated with the new scripting and its options.
TopBottom

Valdaglerion (Guild Admin) 11/19/2011 3:28 PM EST : RE: How to show or hide your left and right side cont...
Valdaglerion
Posts: 2473
Zomgawsh Poster

I'm using this as a mod but noticed it doesn't seem to affect our home page.  Is this by design?  It works fine on the other pages.
TopBottom

Mottie (MVP) 11/19/2011 4:39 PM EST : RE: How to show or hide your left and right side cont...
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Hi Val!

Hmm, it's due to some really weird code in your teamspeak widget leaking into the page footer and breaking the event status icon script and thus breaking all of the mods on that page. I can't really tell you what the problem is because all of the code is jumbled up down there, it looks like HTML soup! But it starts in the Team Speak widget.
TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%