javascript functions

Sunday, April 8, 2007

Band Page Hide Friends Show Comments

[This post has not been updated to reflect the new classes.
Please see this: Hide Friends Show Comments
It is for the non artist page, but with the new classes, it does work for the artist page as well.

==== My Old Code is Below, I was really proud of myself for figuring out how to get the friends into their own class Before myspace gave them a class. But now it is moot. ==================

I start by placing this at the bottom of the band bio section: (This does NOT go between style tags)
Code Block A
</td></tr></table>
</td></tr></table>
</td></tr></table>
<div class="mydclassfc" style="width:500px; visibility:visible; border:1px silver solid; margin:1px ">

<table class="mytclassf" ><tr><td>
<table style="display:none"><tr><td>
<table><tr><td>
(You can alter the color, width and margin px values, to suit tastes)

Next I hide my friends. Because they are in their own class it is easy.
Place this block just above the other block, also in the band bio area.
Code Block B
<style type="text/css">
{!! hide friends !!}
.mydclassfc .mytclassf {display:none}
</style>
If I want a scroll box for my comments, I can add this:(adjust height to suit your page. I used a very low number because I had so few comments and needed overflow to get a scroll box.)
Code Block C
<style type="text/css">
{!! Turn Comments into Scroll Box!!}
.mydclassfc {height:300px; overflow:auto;}
</style>
Another block I recommend using, is a block to prevent large comment pictures from throwing your comment width off.
Code Block D
<style type="text/css">
{!! control comment picture size !!}
.mydclassfc img {max-width:100%; }
* html .mydclassfc img {width:259px;}
* html .mydclassfc a img {width:60px;}
.ImgOnlineNow {width:40px;}
</style>
You can combine all the style blocks (blocks B,C,D) into one, using one set of style tags (open tag on top, close tag on bottom). Or just paste each block I give you separate. Either way works. It all goes in the bio section.

One can use absolute placement to place the comment scroll box anywhere on my page. However I only recommend this if you understand how it effects the rest of the page. It is like picking the box off of the page, allowing all the table margins to re-adjust themselves as if it were not on the page, and then plopping it down on top of whatever is there.
Because our bottom menu is NOT in our div, it will move up, and you may find your comment box sitting on top of it.
However, IF you are using absolute placement for a large percent of the page, the strategy works well.

Another idea is to move the box using relative placement.
This one can leave significant whitespace, where the box was previously located. Sometimes this can be solved by using a negative bottom margin. However I have seen issues with this between the different browsers and resolutions.

If you only want to move the box left or right, relative placement works well, without the whitespace problem.

If you hide your friends, you may want to add a link to view them.
If you are not going to relocate your comment box, it might work best to just put a link to your comments directly above the box.
To do this modify code block [A] as follows:
</td></tr></table>
</td></tr></table>
</td></tr></table>
<span class="myfriendlink"><a href="http://friends.myspace.com/index.cfm?fuseaction=user.viewfriends&friendID=6221">
LINK TO FRIENDS</a></span>
<div class="mydclassfc" style="width:500px; visibility:visible; border:1px silver solid; margin:1px ">

<table class="mytclassf" ><tr><td>
<table style="display:none"><tr><td>
<table><tr><td>
Change Tom's Friend ID (6221) to your own.

Here is the code combined into one block as I have used it on this example page:
my band test page
Notice that I only close two sets of table/row/cell rather than three, as I do above. The difference is that this will place the comment div to the right instead of bottom center. If you want it bottom center close three groups as I do in the above code.

This code goes in the bio section. If you don't have firefox use Safe Mode. Otherwise I recommend turning off style during the preview/submit process.
<style type="text/css">
{!! that ugly grey backgroundto bottom menu, remove this line if desired!!}
table tr {background-color:transparent}
{! effects url box background as well !}

{!! hide friends !!}
.mydclassfc .mytclassf {display:none}
{!! Turn Comments into Scroll Box!!}
.mydclassfc {height:300px; overflow:auto;}
{!! control comment picture size !!}
.mydclassfc img {max-width:98%; }
* html .mydclassfc img {width:259px;}
* html .mydclassfc a img {width:60px;}
.ImgOnlineNow {width:40px;}

{!additional size control !}
.mydclassfc table {width:100%}
</style>

</td></tr></table>
</td></tr></table>
<span class="myfriendlink"><a href="http://friends.myspace.com/index.cfm?fuseaction=user.viewfriends&friendID=6221">
LINK TO FRIENDS</a></span>
<div class="mydclassfc" style="width:100%; visibility:visible; border:1px silver solid; margin:1px ">

<table class="mytclassf" ><tr><td>
<table style="display:none"><tr><td>
<table><tr><td>
(If you use this code block, change Tom's id to your own.)

Another idea for adding links to sections you have removed, is to add in a custom top menu.
I tend to prefer this strategy.
adding a top menu
However if you use it with the band page, you need to adjust the values.
You need to place your menu about 15 additional px from the top.
You should play with the px values to see what works on your page.
The idea is to move up the existing top menu bar, making room for a custom top menu bar in its place.

3 comments:

Anonymous said...

no wat iwas asking for and none of the codes workk

GREAT9 said...
This comment has been removed by a blog administrator.
u∃∃l!∃ said...

Yes, but I don't like having people advertise, non related material, in their comments on my site.

I am ok, with people posting links to material which is relevant to the content of the post.

About Me

My Photo



My name is Eileen.
I live in Corvallis Oregon (for now).
My job is moving to Austin Texas and I may move with it).
I have Aspergers (a type of high functioning autism).
In my case it is not a disability; it gives me as many strengths as it does weaknesses.
However, communicating with Neuro Typicals is a challenge for me. So if we do not understand each other, it is not because I dislike you, think you are stupid, or anything else negative. We just think differently.