Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Want to make visual organizer 2

Status
Not open for further replies.
RakhiKalra

RakhiKalra

Programmer
Jun 6, 2003
41
0
0
IN
Hi,
there are few marketing personal in the office and we have to make a software which can serve as a utility for them... I need to make a web based system in which there will b a grid for each executive like:-
| Mon | Tue | wed | Thu | Fri | sat
----------------------------------------------
10AM | | | | | |
----------------------------------------------
11AM | | | | | |
----------------------------------------------
12PM | | | | | |
----------------------------------------------
1 PM | | | | | |
----------------------------------------------
and so on...
i want to make it such that an executive can drag his mouse to make an appointment say-Meeting with Mr. Joseph from 10 to 1....
i have made a table to show the things but i am not getting how to use mouse operations and make 3 cells with same color to denote a single activity.

Help....


Cheers
Rakhi Kalra
 
Sort by date Sort by votes
This will change the table cell bgcolor.

<script language=&quot;JavaScript&quot;>
function cg_bg(str) {
tdc = document.getElementById(str);
tdc.style.background = 'blue';
}
</script>
</head>
<body>
<table>
<tr><td id=&quot;Mon1&quot; onClick=&quot;cg_bg('Mon1');&quot; width=&quot;40&quot; height=&quot;40&quot;>
TEST</td></tr>
</table>

But do you have a plan to save the information
entered in this form??

2b||!2b
 
Upvote 0 Downvote
Rakhi Kalra

You could create a table in HTML and use the onMouseOver event to bring up a small pop-up window, or a prompt dialog box.
This function will change the contents of a table cell using a prompt dialog box:

Code: 
function openChangeText(theCell){
theCell.innerText = prompt(&quot;Enter Cell text&quot;, &quot;Meeting: &quot;)
}

&quot;Meeting: &quot;, above is the default text that would be in the dialog's input box and &quot;Enter Cell text&quot; is a simple instruction displayed on the dialog.

This table cell (the lower one) would activate the function whenever the mouse pointer passes over it.

Code: 
<table border=&quot;1&quot;>
<tr><td>Active Table</td></tr>
<tr><td onmouseover=&quot;openChangeText(this)&quot;>text </td></tr>
</table>

Since the onmouseover event passes the table cell that activated the function to the function, using &quot;this&quot;, then the same function could be used for any number of table cells.

dolphyn
 
Upvote 0 Downvote
Hi dolphyn,

I wrote my original with onMouseover....
then I realized you might have to move across 12
cells to get to your destination.

That's a cool option to add the prompt box.

2b||!2b
 
Upvote 0 Downvote
I can ask the thing but i want several cells to b combined for a single activity....



Cheers
Rakhi Kalra
 
Upvote 0 Downvote
Interesting! Try the following in a blank .html file - it shades the background according to how you select it with the mouse (works IE6 and NN7):

Code: 
<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot;[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd&quot;>[/URL]
<html>
<head>
<title>test bed</title>
<script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;>
var dragging = false;
var startCell;
var endCell;

function startDrag(thisEvent, thisCell){
 if (!dragging) {
	dragging = true;
 	startCell = thisCell;
 	toggleCell(startCell);
 }
}
function doDrag(thisEvent, thisCell){
 if(dragging){
  //change bg of this cell 
  //toggleCell(thisCell);
  
  //recalc range so far
  endCell = thisCell;
  cleanupSel();
 }
}
function endDrag(thisEvent, thisCell){
 if(dragging){
  dragging = false;
  endCell = thisCell;
  
  //now do final fix so shaded ones go from startCell.ID to endCell.ID
  cleanupSel();
 }
}
function toggleCell(thisCell){
 var classN = thisCell.className;
 if (classN==&quot;selected&quot;)
 	thisCell.className=&quot;blank&quot;;
 if (classN==&quot;blank&quot;)
 	thisCell.className=&quot;selected&quot;;
}
function cleanupSel(){
 var startID = parseInt(startCell.id);
 var endID = parseInt(endCell.id);
 
 //swap em if start > end
 if (startID > endID) {
 	startID = startID + endID; //wierd swap arithmetic, works well for ints
 	endID = startID - endID;
 	startID = startID - endID;
 }
 
 //loop through all table cells, set only ones in range to selected
 var n
 var thisOne
 for (n = 1; n <= 8; n++) {
 	thisOne = document.getElementById(n);
 	if (n >= startID && n <= endID){
 	  thisOne.className=&quot;selected&quot;;
 	} else {
 	  thisOne.className=&quot;blank&quot;;
 	}
 }
 //alert(&quot;range should be from &quot; + startID + &quot; to &quot; + endID + &quot;.&quot;);
}
</script>
<style>
td {
	width: 100pt;
	height: 80pt;
	text-align: center;
}

td.blank {
	background-color: #FFFFFF;
}

td.selected {
	background-color: #CCCCCC;
}
</style>
</head>
<body onmouseup=&quot;dragging=false;&quot;>
<p>2x4 Table:</p>
<table border=&quot;1&quot;>
<tr>
	<td class=&quot;blank&quot; id=&quot;1&quot; onmousedown=&quot;startDrag(event, this);&quot; onmouseover=&quot;doDrag(event, this);&quot; onmouseup=&quot;endDrag(event,this);&quot;>1</td>
	<td class=&quot;blank&quot; id=&quot;2&quot; onmousedown=&quot;startDrag(event, this);&quot; onmouseover=&quot;doDrag(event, this);&quot; onmouseup=&quot;endDrag(event,this);&quot;>2</td>
	<td class=&quot;blank&quot; id=&quot;3&quot; onmousedown=&quot;startDrag(event, this);&quot; onmouseover=&quot;doDrag(event, this);&quot; onmouseup=&quot;endDrag(event,this);&quot;>3</td>
	<td class=&quot;blank&quot; id=&quot;4&quot; onmousedown=&quot;startDrag(event, this);&quot; onmouseover=&quot;doDrag(event, this);&quot; onmouseup=&quot;endDrag(event,this);&quot;>4</td>
</tr>
<tr>
	<td class=&quot;blank&quot; id=&quot;5&quot; onmousedown=&quot;startDrag(event, this);&quot; onmouseover=&quot;doDrag(event, this);&quot; onmouseup=&quot;endDrag(event,this);&quot;>5</td>
	<td class=&quot;blank&quot; id=&quot;6&quot; onmousedown=&quot;startDrag(event, this);&quot; onmouseover=&quot;doDrag(event, this);&quot; onmouseup=&quot;endDrag(event,this);&quot;>6</td>
	<td class=&quot;blank&quot; id=&quot;7&quot; onmousedown=&quot;startDrag(event, this);&quot; onmouseover=&quot;doDrag(event, this);&quot; onmouseup=&quot;endDrag(event,this);&quot;>7</td>
	<td class=&quot;blank&quot; id=&quot;8&quot; onmousedown=&quot;startDrag(event, this);&quot; onmouseover=&quot;doDrag(event, this);&quot; onmouseup=&quot;endDrag(event,this);&quot;>8</td>
</tr>
</table>
</body>
</html>

Should help you forwards :)

Posting code? Wrap it with code tags: [ignore]
Code: 
[/ignore][code]CodeHere
[ignore][/code][/ignore].
 
Upvote 0 Downvote
HI Clarkin,
it did work!!!! :) this is what a wanted....
Thanx a lot.....
Regards
Rakhi

Cheers
Rakhi Kalra
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
170
Kennelbloke
Kennelbloke
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
150
lexer
lexer
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
179
xwb
xwb
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
131
Rayj0000
Rayj0000
penguinspeaks
  • Locked
  • Question
How do I pass a classic asp variable to JS
Replies
1
Views
226
xwb
xwb

Part and Inventory Search

Sponsor

Back
Top