Results 1 to 8 of 8

Thread: Bolded text within text box

  1. #1
    Join Date
    Jan 2010
    Posts
    26
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default 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.

  2. #2
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Tooltips: http://dynamicdrive.com/dynamicindex5/index.html

    Within the tooltip - you can make text bold.
    Jeremy | jfein.net

  3. #3
    Join Date
    Jan 2010
    Posts
    26
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    add to css

    Code:
    #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

    Code:
    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

    Code:
    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

    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/

  5. The Following User Says Thank You to vwphillips For This Useful Post:

    harlem (01-13-2010)

  6. #5
    Join Date
    Jan 2010
    Posts
    26
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    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.

  7. #6
    Join Date
    Jan 2010
    Posts
    26
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    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?

  8. #7
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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/

  9. The Following User Says Thank You to vwphillips For This Useful Post:

    harlem (01-14-2010)

  10. #8
    Join Date
    Jan 2010
    Posts
    26
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •