|
 Author | Topic: Peekaboo Side Tables (Read 6,780 times) |
SubDevo
Co-Admin
Code Support
member is offline
![[avatar]](http://i486.photobucket.com/albums/rr230/FridayFiles/598px-Lunar_libration_109.gif "[avatar]")
Creator of LSD...
![[homepage]](http://vegasfoxxgfx.com/IOD/GOTS-Images/Misc/MP-ContactIcons/GOTS-Homepage_off.png "[homepage]")
Joined: Mar 2009
Gender: Male 
Posts: 2,594
Location: MI, USA
Karma: 102 |  | Re: Peekaboo Side Tables
« Reply #30 on Apr 11, 2011, 11:58pm » | |
Go to that beach anyways. It would be a good time!
Ok, to get rid of the dark green, remove the Red from each of your table lines in your side tables (3 of them).
<table align="center" width="100%" class="bordercolor" cellpadding="1" cellspacing="4">
Now find any "td"s that have the class "windowbg" and add the Lime Green.
Hopefully that will remove that line on the right.
<td class="windowbg" border="0">
|
![[image]](http://i486.photobucket.com/albums/rr230/FridayFiles/siganimation6left_off.gif "[image]") ![[image]](http://i486.photobucket.com/albums/rr230/FridayFiles/siganimation6right_off.gif "[image]")
![[image]](http://vegasfoxxgfx.com/IOD/GOTS-Images/Sigs/IOD-MB-SubDevo-3.png "[image]")
Why are you looking at my signature, [ME]? |
|
JJ
Senior Member
IOD Supporter
member is offline
![[avatar]](http://i36.photobucket.com/albums/e31/AlsoJJ/Album4/Hootyowl%20Specific/smlgry5237.gif "[avatar]")
Joined: Jan 2011
Gender: Female 
Posts: 920
Location: Kentucky USA
Karma: 21 | | Re: Peekaboo Side Tables
« Reply #31 on Apr 12, 2011, 3:55pm » | |
Thank you for your help, Sub. The fixes you gave me worked. But the whole thing looked terrible. I finally deleted it and started over. I realized along the way that I had mixed and matched table codes and a lot of stuff I had was added a few years ago and I didn't know how they worked. So I've been "practicing." I know I've fussed a lot about my crummy vision, but some days, I just feel like hanging my head and bawling. Heck, I thought cataracts were bad, but that was a breeze compared to what I'm dealing with. But I'm bound and determined to hang in there as long as I can.
I got hoisted on my own petard due to mindset. In my mind, the Peek code had to be all the way at the bottom so when I deleted it, I went ALL the way to the bottom and wiped out whatever else was there. I was scrambling around trying to find my post where you and Rad had me move stuff below the Peek code. Naturally, as soon as I left the admin area and had no mouseover anymore I realized my mistake, but it was too late. Leaned a big lesson today.
I'm still having issues with the tables, but they aren't with this wonderful code, so I will post elsewhere.
|
|
|
Pebble
Code Helper
IOD Supporter
member is offline
![[avatar]](http://i1136.photobucket.com/albums/n494/pebbleleague/FootballGif.gif "[avatar]")
Joined: Mar 2011
Gender: Male
Posts: 1,179
Location: Here & There
Karma: 155 | | Re: Peekaboo Side Tables
« Reply #32 on Apr 14, 2011, 1:40pm » | |
Hi SubDevo - Just a note to say this works GREAT ! I've had it on the left, the right, with/without images etc and all works great.
Just one note that may save you time in the long run - I'd put an explanation for having it on the right hand side. When the code is changed to the right - customize the toggle div -
<div id="leftNavTog" title="Click to Hide or Show" onclick="togL_Nav(true)" onmouseover="this.style.backgroundColor='#FF0000'" onmouseout="this.style.backgroundColor='#00FF00'"></div>
Some people might realise they have to change the 'leftNavTog' to 'rightNavTog' but might not see the 'TogL' needs changing to 'TogR' .
Just a thought that may save you work further down the line.
Great peice of code and you deserve every bit of praise you get for it.
Cheers. 
|
|
|
Pebble
Code Helper
IOD Supporter
member is offline
Joined: Mar 2011
Gender: Male
Posts: 1,179
Location: Here & There
Karma: 155 | | Re: Peekaboo Side Tables
« Reply #33 on Apr 24, 2011, 7:21am » | |
Hi Subdevo,
I was wondering if it is possible to show different peekaboo tables on different boards ? If not , I could use side tables but I would prefer to use the peekaboo's.
On my site for instance - one would have a league table but on another board I wanted a popout/peekaboo gallery of photo's.
Thanks for any help.
|
|
|
SubDevo
Co-Admin
Code Support
member is offline
Creator of LSD...
Joined: Mar 2009
Gender: Male
Posts: 2,594
Location: MI, USA
Karma: 102 | | Re: Peekaboo Side Tables
« Reply #34 on Apr 24, 2011, 10:30am » | |
For best results, the peekaboo side tables should stay in your global footer. I see that you have done that and also you figured out (on your own) how to have it only show on your "shirt" board. Good job! "&&/board=shirts/.test(location.href)"
Be aware that with your added line as is, will match any future boards with the name "shirt" at the beginning of it. Not an issue if you do not do that. But, if you want to make sure, use this instead:
&&/board=shirts(&|$)/.test(location.href)
The best and easiest way would be to have all your content (league tables and the shirt pics) in the side table html but hide or show the content based upon the board name.
That would require you to give an ID to your league table and an ID to the element containing your shirt pics. Then we would use those IDs in a separate code.
Are you going to hide the peekaboo side tables except for these boards?
Or are you going to have it shown globally but change content based upon boards?
I'll give you something to play with (haven't tested):
Add the Yellow to your existing league table.
<table class="tableizer-table" id="leaguetable" style="display:none;">
Then add this after your league table HTML.
<table id="shirtdisplay" style="display:none;">
<tr><td>
<b>SHIRT PICS HERE</b>
</td></tr></table>
Remove the line you added into the peekaboo code so it is visible on all boards for now.
Put this below the peekaboo code.
I think you can figure out the variables...
As I have it right now, the league table should be visible in the general board and the "SHIRT PICS HERE" should show up on the "shirt" board.
Play away!
Code:<script type="text/javascript">
/* Change Peekaboo Side Table Content by Board by SubDevo */
/* Global Footer (below Peekaboo html) - Please leave this header intact. Do not repost. */
/* [url]http://interoceandesigns.proboards.com[/url] or [url]http://lsdp.proboards.com[/url] */
var n=[]; // FORMAT: n["BOARD ID"]="ELEMENT ID";
n["general"]="leaguetable";
n["shirt"]="shirtdisplay";
var m=(/board=(.+?)(&|$)/i.test(location.href))?RegExp.$1:"";
if(m&&n[m]){document.getElementById(n[m]).style.display="";}
</script> |
|
|
Why are you looking at my signature, [ME]? |
|
Pebble
Code Helper
IOD Supporter
member is offline
Joined: Mar 2011
Gender: Male
Posts: 1,179
Location: Here & There
Karma: 155 | | Re: Peekaboo Side Tables
« Reply #35 on Apr 24, 2011, 3:43pm » | |
Cheers Sub,
I got the extra code in and the old out - Now got it working on all pages and the content for selected pages is showing (others just blank). Excellent.
My plan was to have two different peekaboo's on the two different boards so a bit of work to do (return a bit of the old code I had?) and the table width to change on each board. I get a bit lost after staring at the code for a while (I attacked this from a different angle but couldn't get it to display properly, so , basically, I did it wrong and it didn't work ! lol)
It might get to Wednesday before I can have a good play with it and will get back to you for approval or punishment. Or if you get some ideas before then - feel free ! I'll be popping into IOD when I can.
Thanks again Sub
|
|
|
Pebble
Code Helper
IOD Supporter
member is offline
Joined: Mar 2011
Gender: Male
Posts: 1,179
Location: Here & There
Karma: 155 | | Re: Peekaboo Side Tables
« Reply #36 on Apr 27, 2011, 7:59am » | |
Hi Sub, I've got the pages now showing on the two pages I wanted (if you were thinking of doing it differently then let me know and I can change it).
Regarding the changing of the width of the different tables - My idea was to test the url and then assign the CSS depending on the url test - -but that involves changing CSS inside JS which I don't think is possible.... is it ? Ok, i'm just rambling out loud - I'd be better off looking it up ! lol
Edit: All sorted and working great so please ignore the above - Cheers Sub
|
|
|
tempest
New Member
member is offline
Joined: Jan 2012
Gender: Female
Posts: 2
Karma: 0 | | Re: Peekaboo Side Tables
« Reply #37 on Jan 24, 2012, 1:57am » | |
Awesome! I just love your code. It works perfectly, only one problem. I added an image to the toggle of the right sided code and it shows perfectly (though I had to tweak the image several times). The only problem is when you enter the page and the sidebar is still collapsed the toggle image it a bit off from the right side. I had to move the image to the left more because if I left it at zero (well at first it would appear normal) and you click on it to open it it will be half inside the side table. Then when you collapse it its half way into the side which looks really weird. But when I messed the the left side and you open the table the image is perfectly at the side, not half inside. When you collapse it that's when it lines up perfectly to the side. Yet when you leave it collapsed and go into another page of the website it goes off again.
Here is my site: http://thedarkestmoonxxx.proboards.com
Can someone please help me? I have been trying for hours to try and fix this but I can't get it be exactly where I wan it to be.
| |
|
Pebble
Code Helper
IOD Supporter
member is offline
Joined: Mar 2011
Gender: Male
Posts: 1,179
Location: Here & There
Karma: 155 | | Re: Peekaboo Side Tables
« Reply #38 on Jan 24, 2012, 8:24am » | |
Hi Tempest,
Find this line in the code:
var R_TogWidth=24; // Width of Clickable area.
And change it to:
var R_TogWidth=75; // Width of Clickable area.
And in this css:
#rightNavContent {
position: absolute;
left: 24px;
Change the left to:
left: 75px;
Also in this css:
#rightNavTog {
position: absolute;
width: 75px;
height: 24%;
left: -50px;
Change the left: -50px; to
left: 0px;
------------------------------------
Hope this helps - Let me know how you get on and if you're still having trouble I'll take another look.
|
|
|
tempest
New Member
member is offline
Joined: Jan 2012
Gender: Female
Posts: 2
Karma: 0 | | Re: Peekaboo Side Tables
« Reply #39 on Jan 24, 2012, 10:32am » | |
No, now the whole table is off when I open it and when I collapse it it just stays where it was at the beginning.
EDITED: Nevermind, I got it to work. I got the two lefts mixed up lol. I'm a real nut in the morning. Thank you!
| |
|
Pebble
Code Helper
IOD Supporter
member is offline
Joined: Mar 2011
Gender: Male
Posts: 1,179
Location: Here & There
Karma: 155 | | Re: Peekaboo Side Tables
« Reply #40 on Jan 24, 2012, 11:32am » | |
No problem Tempest - I'm a bit like in the mornings as well ! lol
Glad you got it sorted.
|
|
|
chromashadows
New Member
member is offline
Joined: Feb 2012
Gender: Female
Posts: 2
Karma: 0 | | All browsers are great but IE has issues
« Reply #41 on Feb 20, 2012, 7:28pm » | |
My site is
http://fallout-apocalypse.proboards.com/index.cgi
and in Firefox, etc, it looks amazing with your peekaboo's.
However in IE, when I scroll, it flashes and stutters and jerks around. 
I love the peekaboo concept but this browser issue is hurting the professional look of my forum. Any help you can give would be amazing.
My coding is easy to find; though I put the right first then the left. xD I was transfering from a test site to the real site above and did it opposite.
| |
|
Pebble
Code Helper
IOD Supporter
member is offline
Joined: Mar 2011
Gender: Male
Posts: 1,179
Location: Here & There
Karma: 155 | | Re: Peekaboo Side Tables
« Reply #42 on Feb 20, 2012, 9:10pm » | |
Hi chromashadows,
Unfortunately this is just the way with IE. When proboards V5 is released and they give the boards a doctype we'll be able to smooth out the effect in IE. Until then I'm afraid it's just one of those things with IE.
|
|
|
chromashadows
New Member
member is offline
Joined: Feb 2012
Gender: Female
Posts: 2
Karma: 0 | | Re: Peekaboo Side Tables
« Reply #43 on Feb 21, 2012, 12:32am » | |
Ah all right.
Is everything going to end up looking bad at first once we upgrade to V5?
| |
|
Pebble
Code Helper
IOD Supporter
member is offline
Joined: Mar 2011
Gender: Male
Posts: 1,179
Location: Here & There
Karma: 155 | | Re: Peekaboo Side Tables
« Reply #44 on Feb 21, 2012, 7:13am » | |
There should be a transition period (I think it's going to be 3 months) so that'll be enough time to get your board ready for V5. Watch this space !
|
|
|
|
![[Home]](http://vegasfoxxgfx.com/IOD/GOTS-Images/Menu/GOTS-Home_off.png "[Home]")
![[New Topics]](http://vegasfoxxgfx.com/IOD/GOTS-Images/Misc/GOTS-Blank1x1.png "[New Topics]")
![[Help]](http://vegasfoxxgfx.com/IOD/GOTS-Images/Menu/GOTS-Help_off.png "[Help]")
![[Search]](http://vegasfoxxgfx.com/IOD/GOTS-Images/Menu/GOTS-Search_off.png "[Search]")
![[Login]](http://vegasfoxxgfx.com/IOD/GOTS-Images/Menu/GOTS-Login_off.png "[Login]")
![[Register]](http://vegasfoxxgfx.com/IOD/GOTS-Images/Menu/GOTS-Register_off.png "[Register]")
![[Search This Thread]](http://vegasfoxxgfx.com/IOD/GOTS-Images/Message/GOTS-SearchMI_off.png "[Search This Thread]")
![[Share Topic]](http://vegasfoxxgfx.com/IOD/GOTS-Images/Message/GOTS-ShareTopic_off.png "[Share Topic]")
![[Print]](http://vegasfoxxgfx.com/IOD/GOTS-Images/Message/GOTS-Print_off.png "[Print]")
Logged![[image]](http://i36.photobucket.com/albums/e31/AlsoJJ/Album4/Sigs%20and%20Such/FlowerPotOrangeJJ91311.png "[image]")
![[image]](http://i28.photobucket.com/albums/c236/radesign100/IOD-MB-Pebble.png "[image]")