I wonder how to make the uppermost text row within the right-positioned box at http://testingbar.atspace.com/index2.htm bold, when you click on a date?
And is it possible to have a tooltip at mouseover instead of a box?
CSS Codes
Junior Coders
Bolded text within text box
I wonder how to make the uppermost text row within the right-positioned box at http://testingbar.atspace.com/index2.htm bold, when you click on a date?
And is it possible to have a tooltip at mouseover instead of a box?
Last edited by harlem; 01-12-2010 at 02:02 PM.
Elite Coders
Tooltips: http://dynamicdrive.com/dynamicindex5/index.html
Within the tooltip - you can make text bold.
Jeremy | jfein.net
Junior Coders
If i remove the textarea-box and replace it with this tooltip: http://dynamicdrive.com/dynamicindex5/popinfo.htm
how do I implement it so that the events pop up when I move my mouse over them?
The events are written in the events.js javasvript file, which makes it harder to understand how to implement it.
Elite Coders
add to css
change functionCode:#evtcal a:link {font: normal 12pt "Arial", "Helvetica", "Sans Serif"; color: #000000; text-decoration: none;} /* unvisited link */ #evtcal a:visited {font: normal 12pt "Arial", "Helvetica", "Sans Serif"; color: #000000; text-decoration: none;} /* visited link */ #evtcal a:hover {font: normal 12pt "Arial", "Helvetica", "Sans Serif"; color: #004400; text-decoration: none;} /* mouse over link */ #evtcal a:active {font: normal 12pt "Arial", "Helvetica", "Sans Serif"; color: #004400; text-decoration: none;} /* selected link */ #tooltip { position:absolute;z-Index:101;width:200px;background-Color:#FFFFCC; }
change functionCode:function createCalendar() { calendarString = ''; var daycounter = 0; calendarString += '<table width="312" border="1" cellpadding="0" cellspacing="1">'; calendarString += '<tr>'; calendarString += '<td align=\"center\" valign=\"center\" width=\"40\" height=\"30\" colspan=\"2\"><a href=\"#\" onClick=\"changedate(\'prevmo\')\">FÖRRA<\/a><\/td>'; calendarString += '<td bgcolor=\"#cccddd\" align=\"center\" valign=\"center\" width=\"128\" height=\"30\" colspan=\"3\"><b>' + wordMonth[monthNum-1] + ' ' + yearNum + '<\/b><\/td>'; calendarString += '<td align=\"center\" valign=\"center\" width=\"40\" height=\"30\" colspan=\"2\"><a href=\"#\" onClick=\"changedate(\'nextmo\')\">NÄSTA<\/td>'; calendarString += '<\/tr>'; calendarString += '<tr>'; calendarString += '<td bgcolor=\"#33df33\" align=\"center\" valign=\"center\" width=\"40\" height=\"22\"><strong>S</strong><\/td>'; calendarString += '<td bgcolor=\"#33df33\" align=\"center\" valign=\"center\" width=\"40\" height=\"22\"><strong>M</strong><\/td>'; calendarString += '<td bgcolor=\"#33df33\" align=\"center\" valign=\"center\" width=\"40\" height=\"22\"><strong>T</strong><\/td>'; calendarString += '<td bgcolor=\"#33df33\" align=\"center\" valign=\"center\" width=\"40\" height=\"22\"><strong>O</strong><\/td>'; calendarString += '<td bgcolor=\"#33df33\" align=\"center\" valign=\"center\" width=\"40\" height=\"22\"><strong>T</strong><\/td>'; calendarString += '<td bgcolor=\"#33df33\" align=\"center\" valign=\"center\" width=\"40\" height=\"22\"><strong>F</strong><\/td>'; calendarString += '<td bgcolor=\"#33df33\" align=\"center\" valign=\"center\" width=\"40\" height=\"22\"><strong>L</strong><\/td>'; calendarString += '<\/tr>'; thisDate == 1; for (var i = 1; i <= 6; i++) { calendarString += '<tr>'; for (var x = 1; x <= 7; x++) { daycounter = (thisDate - firstDay)+1; thisDate++; if ((daycounter > numbDays) || (daycounter < 1)) { calendarString += '<td align=\"center\" bgcolor=\"#cccddd\" height=\"30\" width=\"40\"> <\/td>'; } else { if (checkevents(daycounter,monthNum,yearNum,i,x) || ((todaysDay == x) && (todaysDate == daycounter) && (todaysMonth == monthNum))){ if ((todaysDay == x) && (todaysDate == daycounter) && (todaysMonth == monthNum)) { calendarString += '<td align=\"center\" bgcolor=\"#AAFFAA\" height=\"30\" width=\"40\" style=cursor:pointer; onclick=\"showevents(this,' + daycounter + ',' + monthNum + ',' + yearNum + ',' + i + ',' + x + ');\" >' + daycounter + '<\/td>'; } else calendarString += '<td align=\"center\" bgcolor=\"#FFFFC8\" height=\"30\" width=\"40\" style=cursor:pointer; onclick=\"showevents(this,' + daycounter + ',' + monthNum + ',' + yearNum + ',' + i + ',' + x + ');\" >' + daycounter + '<\/td>'; } else { calendarString += '<td align=\"center\" bgcolor=\"#DDFFFF\" height=\"30\" width=\"40\">' + daycounter + '<\/td>'; } } } calendarString += '<\/tr>'; } calendarString += '<tr><td colspan=\"7\" nowrap align=\"center\" valign=\"center\" bgcolor=\"#ffffff\" width=\"280\" height=\"22\"><a href=\"javascript:changedate(\'return\')\"><b>Dagens datum<\/b><\/a><\/td><\/tr><\/table>'; var object=document.getElementById('calendar'); object.innerHTML= calendarString; thisDate = 1; }
add div tooltip to HTMLCode:function showevents(obj,day,month,year,week,dayofweek) { var theevent = ""; var bold = ""; var floater = 0; for (var i = 0; i < events.length; i++) { // First we'll process recurring events (if any): if (events[i][0] != "") { if (events[i][0] == "D") { } if (events[i][0] == "W") { if ((events[i][2] == dayofweek)) { bold += "Events of: <br>" + month +'/'+ day +'/'+ year + '<br>'; theevent += events[i][6] + '<br>'; theevent += 'Start Time: ' + events[i][4] + '<br>'; theevent += 'Ending Time: ' + events[i][5] + '<br>'; theevent += 'Description: ' + events[i][7] + '<br>'; theevent += '<br> -------------- <br><br>'; // document.forms.eventform.eventlist.value = theevent; } } if (events[i][0] == "M") { } if (events[i][0] == "Y") { if ((events[i][2] == day) && (events[i][1] == month)) { bold += events[i][6] + '<br>'; theevent += '' + events[i][4] + '<br> <br>'; theevent += '' + events[i][7]; // document.forms.eventform.eventlist.value = theevent; } } if (events[i][0] == "F") { if ((events[i][1] == 3) && (events[i][2] == 0) && (events[i][3] == 0) ) { if (easterday == day && eastermonth == month) { bold += "Events of: <br>" + month +'/'+ day +'/'+ year + '<br>'; theevent += events[i][6] + '<br>'; theevent += 'Start Time: ' + events[i][4] + '<br>'; theevent += 'Ending Time: ' + events[i][5] + '<br>'; theevent += 'Description: ' + events[i][7] + '<br>'; theevent += '<br> -------------- <br><br>'; // document.forms.eventform.eventlist.value = theevent; } } else { floater = floatingholiday(year,events[i][1],events[i][2],events[i][3]); if ((month == 5) && (events[i][1] == 5) && (events[i][2] == 4) && (events[i][3] == 2)) { if ((floater + 7 <= 31) && (day == floater + 7)) { bold += "Events of: <br>" + month +'/'+ day +'/'+ year + '<br>'; theevent += events[i][6] + '<br>'; theevent += 'Start Time: ' + events[i][4] + '<br>'; theevent += 'Ending Time: ' + events[i][5] + '<br>'; theevent += 'Description: ' + events[i][7] + '<br>'; theevent += '<br> -------------- <br><br>'; } else if ((floater + 7 > 31) && (day == floater)) { bold += "Events of: <br>" + month +'/'+ day +'/'+ year + '<br>'; theevent += events[i][6] + '<br>'; theevent += 'Start Time: ' + events[i][4] + '<br>'; theevent += 'Ending Time: ' + events[i][5] + '<br>'; theevent += 'Description: ' + events[i][7] + '<br>'; theevent += '<br> -------------- <br><br>'; } } else if ((events[i][1] == month) && (floater == day)) { bold += "Events of: <br>" + month +'/'+ day +'/'+ year + '<br>'; theevent += events[i][6] + '<br>'; theevent += 'Start Time: ' + events[i][4] + '<br>'; theevent += 'Ending Time: ' + events[i][5] + '<br>'; theevent += 'Description: ' + events[i][7] + '<br>'; theevent += '<br> -------------- <br><br>'; } } } } // Now we'll process any One Time events happening on the matching month, day, year: else if ((events[i][2] == day) && (events[i][1] == month) && (events[i][3] == year)) { bold += "Events of: <br>" + month +'/'+ day +'/'+ year + '<br>'; theevent += events[i][6] + '<br>'; theevent += 'Start Time: ' + events[i][4] + '<br>'; theevent += 'Ending Time: ' + events[i][5] + '<br>'; theevent += 'Description: ' + events[i][7] + '<br>'; theevent += '<br> -------------- <br><br>'; } } if (bold == "") bold = 'No events to show.'; bold='<span style="font-Weight:bold;" >'+bold+'</span><br>'; var tt=document.getElementById('tooltip'); tt.innerHTML=bold+theevent; tt.style.left=zxcPos(obj)[0]-(tt.offsetWidth-obj.offsetWidth)/2+'px'; tt.style.top=zxcPos(obj)[1]+obj.offsetHeight+'px'; tt.style.visibility=tt.style.visibility=='hidden'?'visible':'hidden'; } function zxcPos(obj){ var rtn=[0,0]; while(obj){ rtn[0]+=obj.offsetLeft; rtn[1]+=obj.offsetTop; obj=obj.offsetParent; } return rtn; }
Code:</table><br> </center> <div id="tooltip" onclick="this.style.visibility='hidden';" style="visibility:hidden;" ></div> </body> </html>
Vic
God Loves You and will never love you less.
http://www.vicsjavascripts.org/Home.htm
If my post has been useful please donate to http://www.operationsmile.org.uk/
harlem (01-13-2010)
Junior Coders
Outstanding work!
I have managed to arrange the tooltip to the right of the calendar, added some padding too. Just three minor quirks:
1) I can't seem to add any black 1px border around it in the css.
2) I have to click twice on a date the first time I want to load an event
3) Is it possible, when an event is showing to the right, to click another date and another event will come up? Now I need to click to close the event before I open a new one.
Junior Coders
Outstanding work!
I have managed to arrange the tooltip to the right of the calendar, added some padding too. Just one minor thing:
I can't seem to add any black 1px border around it in the css. Is this possible?
Elite Coders
Code:#tooltip { position:absolute;z-Index:101;width:200px;background-Color:#FFFFCC;border:solid black 1px; }
Code:....... var tt=document.getElementById('tooltip'); tt.innerHTML=bold+theevent; tt.style.left=zxcPos(obj)[0]-(tt.offsetWidth-obj.offsetWidth)/2+'px'; tt.style.top=zxcPos(obj)[1]+obj.offsetHeight+'px'; tt.style.visibility=tt.style.visibility=='hidden'||(this.obj&&this.obj!=obj)?'visible':'hidden'; this.obj=obj; }
Vic
God Loves You and will never love you less.
http://www.vicsjavascripts.org/Home.htm
If my post has been useful please donate to http://www.operationsmile.org.uk/
harlem (01-14-2010)
Junior Coders
You have been of great help for this event calendar. I only have one smaller problem left now.
If you click on 20st January, an event will show up. If you click on today's date, it will say that there is no activity today. If today's date is the same as an activity, the date color will turn red. All this is fine.
But when today's date is the same as the activity date (20st January) and I click on it, it will say that there is no activity today, even though it is. I want the date to say the same thing when it's red and when it's yellow.
Posting Permissions
Reply With Quote
Bookmarks