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! > Reformatting Event Details
Mottie (MVP) 2/6/2009 1:46 AM EST : Reformatting Event Details
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Reformatting Event Details

Before
After

All this code does is moves the "Comments" and "Follow-Up" sections ofthe event details under the mini calendar on the right side. It waswritten to help make the entire window more aesthetically pleasing 

Thiscode only effects the calendar events so you only have to add it into a free form text/HTML box on your Calendar page. There is no needto customize it.

Code

<script type="text/javascript">
$(document).ready(function() {
 $("div[id*='_pnlMainView']").each(function(){
  var temp1 = $(this);
  var temp2 = '';
  temp1.find("td:eq(0)").find(".ContentBoxTitle").each(function(){
   if ($(this).html().match("Comments")){
    temp2 += "<br><div style='text-align:left;'>";
    temp2 += $(this).parent().parent().html() + "</div>";
    $(this).parent().parent().html('');
   }
  })
  temp1.find("td").each(function(){
   if ($(this).html() == "Follow-Up") {
    temp2 += "<br><div class='ContentBox'><div style='padding:5px;font-weight:bold;' class='ContentBoxTitle'>"
   temp2 += "Follow-Up</div><tableclass=ContentBoxBody><tr>" + $(this).next().html() +"</tr></table></div>";
    $(this).parent().html('');
   }
   if ($(this).attr("id").match("_smallCalendarsCell")) $(this).append(temp2);
  })
 })
})
</script>
TopBottom

Valdaglerion (Guild Admin) 4/2/2011 5:22 PM EST : RE: Reformatting Event Details
Valdaglerion
Posts: 2473
Zomgawsh Poster

Could you post an alternate version to just move the comments?  I'd like the follow-up to remain where it is by default, at the top, when the event is over.
TopBottom

Mottie (MVP) 4/2/2011 6:35 PM EST : RE: Reformatting Event Details
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hey Val!!

I haven't tested this, but I think this modification should work:
<style type="text/css">
.eventComments div { font-size: 110%; }
</style>
<script type="text/javascript">
$(document).ready(function() {
 var temp1 = $('div[id*="_pnlMainView"]'), temp2,
  comments = temp1.find("a[id$=_lnkAddComment]").closest("td");
 if (comments.length) {
  temp2 = "<br><div style='text-align:left;'>" + comments.html() + "</div>";
  comments.empty();
  temp1.find('td[id*="_smallCalendarsCell"]')
   .append(temp2)
   .find('.ContentBoxBody')
    .addClass('eventComments')
    .removeAttr('style');
 }
});
</script>
TopBottom

Valdaglerion (Guild Admin) 4/2/2011 7:02 PM EST : RE: Reformatting Event Details
Valdaglerion
Posts: 2473
Zomgawsh Poster

When I tried it, the Comments box vanished instead of moving. 
TopBottom

Mottie (MVP) 4/2/2011 8:49 PM EST : RE: Reformatting Event Details
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Oops! Ok I updated my last post.
TopBottom

Valdaglerion (Guild Admin) 4/3/2011 12:24 AM EST : RE: Reformatting Event Details
Valdaglerion
Posts: 2473
Zomgawsh Poster

Working now but the box is fairly small.  Any way for the user to set the height of the comments box?
TopBottom

Mottie (MVP) 4/3/2011 4:41 PM EST : RE: Reformatting Event Details
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Val!

I've updated the code above again
TopBottom

Valdaglerion (Guild Admin) 4/4/2011 12:41 PM EST : RE: Reformatting Event Details
Valdaglerion
Posts: 2473
Zomgawsh Poster

Thanks Mottie!  Say, I don't see a number in there anywhere.  I assume there's some part of that script I can adjust to try different height settings?

Also, even if we decide to leave the comments at the bottom of the page, I'd love to be able to adjust the height there too.  Since Guildportal doesn't allow someone to sign up as "Not Attending" (a feature I asked for), our members use the comments box.  The problem is, it's not very tall, even at the bottom of the page.
TopBottom

Mottie (MVP) 4/4/2011 6:41 PM EST : RE: Reformatting Event Details
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hey Val,

Sheez, never happy LOL... j/k

If you aren't planning on moving the comments, use the following code. It doesn't a height limit, it removes the already set limit of 100px.
<style type="text/css">
.eventComments div { font-size: 110%; }
</style>
<script type="text/javascript">
$(document).ready(function() {
 $("#cellEventList").find('.ContentBoxTitle:contains(Comments)').next().addClass('eventComments').removeAttr('style');
});
</script>
And before you ask, I added a class "eventComments" and the css above to point to the actual comment and css to increase the font size. And I also added it to the previous code. 
TopBottom

Valdaglerion (Guild Admin) 4/10/2011 2:58 AM EST : RE: Reformatting Event Details
Valdaglerion
Posts: 2473
Zomgawsh Poster

Oops, just noticed something strange.  When using the code above to move just the comments to the side, the Add Comment link is still at the bottom of the page until the first comment is added.  Then, the javascript moves it and the comment to the side but not before.
TopBottom

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