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! > Adding Icons to your Calendar
Mottie (MVP) 10/5/2008 4:12 PM EST : RE: Calendar Icons v1.1
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

LOL I'd make one if you had the images and the raid names LOL
TopBottom

Mottie (MVP) 10/7/2008 1:33 AM EST : RE: Calendar Icons v1.1
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

OK Chefricochet,



Here is the code for showing only icons in the event's box. They are not clickable at all. I left the code for the Main and side calendar since I wasn't sure if you were still going to use it. But, I highlighted the code (in purple) that was changed and added from version 1.1.

<div id="tempvar" style="display:none;"/>
<script type="text/javascript">
$(document).ready(function() {
 var events = new Array();
 
 events.push(["Favor Run","http://i299.photobucket.com/albums/mm299/chefricochet/5c054b59.gif"]);
 events.push(["Demon Queen","http://i299.photobucket.com/albums/mm299/chefricochet/animated/b8dadb93.gif"]);
 events.push(["Tempest spine","http://i299.photobucket.com/albums/mm299/chefricochet/animated/2bf0af1b.gif"]);
 events.push(["Bounty hunter","http://i299.photobucket.com/albums/mm299/chefricochet/animated/raid.gif"]);
 events.push(["Black abbott","http://i299.photobucket.com/albums/mm299/chefricochet/animated/Druid-03-june.gif"]);
 events.push(["Titan","http://i299.photobucket.com/albums/mm299/chefricochet/animated/Monster-02-june.gif"]);
 events.push(["Von","http://i299.photobucket.com/albums/mm299/chefricochet/animated/Dragon-17-june.gif"]);
 events.push(["Shroud","http://i299.photobucket.com/albums/mm299/chefricochet/animated/Demon-03-june.gif"]);
 events.push(["Reaver","http://i299.photobucket.com/albums/mm299/chefricochet/animated/067eed10.gif"]);
 events.push(["Flagging","http://i299.photobucket.com/albums/mm299/chefricochet/animated/74d0c3ce.gif"]);

 events.push(["birthday|Birthday","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/birthday.gif"]);
 events.push(["Fun event|fun event","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/fun.gif"]);
 events.push(["quest|Quest","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/quest.gif"]);
 events.push(["Unk|unk","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/unknown.gif"]);

/*
***************************************
 Don't change anything below this line!
*************************************** */

 // Main Calendar
 $(".CenterContentZone").find("#tblMonthlyCalendarTable").find(".NormGridRow,.AltGridRow").each(function() {
  addIcons($(this),"right","56","56");
 });
 // Events Box
 $("a").each(function() {
     $("#tempvar").html("");
  if ($(this).attr("title").match("details of this event on the Calendar")) {
   $(this).parent().css("width","130").removeClass("NormGridRow").removeClass("AltGridRow")
    .unbind().parent().attr("align","center");
   addIconsOnly($(this).parent(),"","56","56");
   $(this).parent().html($("#tempvar").html());
  }

 }); // Side Calendar (Mini)
 $(".LeftContentZone,.RightContentZone").find("#monthlyCalendarCalendarColumn").find("table:eq(0)").each(function() {
 try {
   $(this).find(".NormGridRow,.AltGridRow").each(function() {
     var evtTitle = "<div>" + $(this).find("a").text().replace("'","&#39;") + "</div>";
     var divTitle = evtTitle + $(this).attr("title").replace("(","<br>(");
     var evtTooltp = "ddrivetip('" + divTitle + "', '', '210');"
    $(this).attr("title","").attr("",evtTooltp).attr("","hideddrivetip();"); // event tooltip
    $(this).html(evtTitle); // replace date contents with just the event, for addIcons function
    addIcons($(this),"right",16,16);
    $(this).removeClass("NormGridRow").removeClass("AltGridRow").unbind().children("div").remove();
    $(this).css("border-width","0px").css("padding-right","5px").css("margin","0px"); // hides border around the events
   });
   $(this).attr("title",""); // remove the "calendar" title popup
   $(this).find(".ContentBoxTitle").parent().css("height","10px").css("font-size","7pt");
   $(this).find("tr:gt(2)").find("td").css("min-width","22px").css("height","30px").css("font-size","8pt").css("align","center");
   $(this).find("a:contains('Prev Month')").html("&lt;");
   $(this).find("a:contains('Next Month')").html("&gt;");
 } catch(e) {}
 });

 function addIcons (box,imgAlign,imgWidth,imgHeight) {
  for (var j=0; j < events.length; j++ ) {
   if (box.html().match(events[j][0])) {
    var temp = "<img align='" + imgAlign + "' src='" + events[j][1];
    temp += "'width='" + imgWidth + "' height='" + imgHeight + "'>";
    box.html( temp + box.html() );
   }
  }
  return true;
 }
  function addIconsOnly (box,imgAlign,imgWidth,imgHeight) {
  for (var j=0; j < events.length; j++ ) {
   if (box.html().match(events[j][0])) {
    var temp = "<img align='" + imgAlign + "' src='" + events[j][1];
    temp += "'width='" + imgWidth + "' height='" + imgHeight + "'>";
    $("#tempvar").html( $("#tempvar").html() + temp );
   }
  }
  return true;
 }

});
</script>


TopBottom

chefricochet (Guild Admin) 10/7/2008 3:11 AM EST : RE: Calendar Icons v1.1
chefricochet
Posts: 208
Fingers of Fury!

de46f541.gif image by chefricochet  de46f541.gif image by chefricochet  de46f541.gif image by chefricochet
  OK, I added the lower script you wrote, as I only want to amend the small event box on my home page. It didn't work! Is this because of the changes made to the entire script? Or is it just because I really don't know I'm doing!
  I'm not real concerned about people clicking on the icon for the small box, as that box is nothing more than an alert for the members to go to the event page. Once again my friend, I have given you the keys to the castle to look at the footer css. But be advised; danger lurks everywhere  for all you WOW players! As this is a DDO site!
                             
5003774f.gif image by chefricochet

Laggin
If you love something, set it free! If it doesn't come back; hunt it down, and kill it!
TopBottom

chefricochet (Guild Admin) 10/7/2008 4:02 AM EST : RE: Calendar Icons v1.1
chefricochet
Posts: 208
Fingers of Fury!

  My bad! I fixed it! LOL, I had a line out of place! Must have been that little gremlin running around in my code again!
                      
e02d503a.gif image by chefricochetTY bud!

Laggin
If you love something, set it free! If it doesn't come back; hunt it down, and kill it!
TopBottom

Mottie (MVP) 10/7/2008 6:33 AM EST : RE: Calendar Icons v1.1
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

LOL You're too funny.

Anyway, I wanted to post here about how to fix an issue with the Calendar icons I found on Chefricochet's Chainmail site.

Before



Notice the icons are outside the box. This is a simple fix in the CSS using a "min-height"... the CSS also includes a "border: 0px !important" to over-ride the blue outline around the events. Replace the height (in red) to match your added icon size.
.MoGridRow { color: #ffffff; background-color: #473e2d; border: 0px !important; min-height:56px; }
.AltGridRow { color: #ffffff; background-color: #222222; border: 0px !important; min-height:56px; }
.NormGridRow { color: #ffffff; background-color: #111111; border: 0px !important; min-height:56px; }
After
TopBottom

Khaelle (New Admin) 10/7/2008 6:13 PM EST : RE: Calendar Icons v1.1
Khaelle
Posts: 313
Fingers of Fury!

Ok I am running into one hell of a quandry here with calendar icons and pop up information on the guild site I run. With Fiirefox I can create the smaller calendar with icons and pop up info, with Safari and IE7 no dice on the pop ups and with IE7 if there are two or more events scheduled for the same day the icons are stacking. The stacking is not happening with Firefox or Safari. Now I am not comfortable enough at this time to try and run a completely custom css for the site but thanks to your helpful tips etc on your test sites I am learning quite a bit. If you could help me nail down the issues with Safari and IE7 would be much appreciated.
TopBottom

Mottie (MVP) 10/8/2008 5:22 AM EST : RE: Calendar Icons v1.1
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Khaelle,

Well I figured out why the tooltips weren't working on IE and Chrome, but I don't have Safari installed. I'm hoping that it will work properly now. The original post has the updated script - the change is in the "Side Calendar (Mini)" section.

I don't quite understand what you mean by the icons not stacking. When I look at the Calendar page of test-site 3.. I see Oct 3 and Oct 24 icons stacked on top of each other, like in the original post screenshot (using Firefox). The calendar cells are narrow enough that the images almost have to stack. How about a screenshot? 




TopBottom

Khaelle (New Admin) 10/8/2008 7:06 AM EST : RE: Calendar Icons v1.1
Khaelle
Posts: 313
Fingers of Fury!

One screen shot coming up as requested.   stacking icons IE7  from Firefox


TopBottom

Mottie (MVP) 10/8/2008 8:02 AM EST : RE: Calendar Icons v1.1
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Ahhh I see, it looks like it might be the same problem that chefricochet was having... did you try adding the CSS I posted above?
.MoGridRow { color: #ffffff; background-color: #473e2d; border: 0px !important; min-height:56px; }
.AltGridRow { color: #ffffff; background-color: #222222; border: 0px !important; min-height:56px; }
.NormGridRow { color: #ffffff; background-color: #111111; border: 0px !important; min-height:56px; }
Replace the number in red with the size of the icon you are using in the calendar.

Oh and did the new script work on Safari?
TopBottom

Khaelle (New Admin) 10/8/2008 8:28 AM EST : RE: Calendar Icons v1.1
Khaelle
Posts: 313
Fingers of Fury!

The changes to the script worked great for Safari, you are the Guru. Now in regards to the CSS you are suggesting I use would that entail setting up a custom CSS for my web site?
TopBottom

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