PDA

View Full Version : Bolded text within text box



harlem
01-12-2010, 01:44 PM
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?

Nile
01-12-2010, 11:13 PM
Tooltips: http://dynamicdrive.com/dynamicindex5/index.html

Within the tooltip - you can make text bold.

harlem
01-13-2010, 09:50 AM
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.

vwphillips
01-13-2010, 03:39 PM
add to css


#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 function


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] + '&nbsp;&nbsp;' + 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\">&nbsp;<\/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;
}



change function


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;
}




add div tooltip to HTML


</table><br>
</center>
<div id="tooltip" onclick="this.style.visibility='hidden';" style="visibility:hidden;" ></div>
</body>
</html>

harlem
01-13-2010, 05:30 PM
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.

harlem
01-14-2010, 02:10 AM
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?

vwphillips
01-14-2010, 08:52 AM
#tooltip {
position:absolute;z-Index:101;width:200px;background-Color:#FFFFCC;border:solid black 1px;
}




.......

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;
}

harlem
01-14-2010, 04:46 PM
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.