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 strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Clientlets: dynamic HTML written by client-side JavaScript.

Status
Not open for further replies.
RichardEdwards

RichardEdwards

Programmer
Jan 31, 2002
33
US
I have created a library of helpful JavaScript including an easy-to-use cross-browser navigable calendar. Go to and click the calendar link to see it in action. My dynamicHTML3.js library defines a slew of String.prototype functions named for the corresponding HTML tags that they implement. Perhaps most importantly, I've defined several "widgets" that make it easy to render reusable components like a color selector or an entire calendar.

Just use this code...
Code: 
<script language=JavaScript src=[URL unfurl="true"]http://home1.gte.net/uuclb/dynamicHTML3.js></script>[/URL]
<script language=JavaScript>
(new Date()).calendar().write(); // renders a calendar! 
</script>
I'd be happy to answer your questions about dynamicHTML3.js
Code: 
&quot;Richard Edwards&quot;.link(&quot;mailto:&quot;+/*NO*/&quot;redwards&quot;+/*SPAM*/&quot;@afsa.com&quot;/*THANKS*/).write();
 
IE6
Code: 
[URL unfurl="true"]http://home1.gte.net/uuclb/mission.html[/URL] = blank/error
[URL unfurl="true"]http://home1.gte.net/uuclb/principles.html[/URL] = blank/error
[URL unfurl="true"]http://home1.gte.net/uuclb/minister.html[/URL] = blank/error
[URL unfurl="true"]http://home1.gte.net/uuclb/education.html[/URL] = blank/error
[URL unfurl="true"]http://home1.gte.net/uuclb/programs.html[/URL] = blank/error
[URL unfurl="true"]http://home1.gte.net/uuclb/links.html[/URL] = blank/error

and your calendar
[URL unfurl="true"]http://home1.gte.net/uuclb/calendar.html[/URL] = blank/error

just to let u know
wmail.jpg


someone knowledge ends where
someone else knowledge starts
 
Try the code from my opening post...

Just copy it and save as calendar.html, then view it in your browser. Apparently, the uuclb web site has other problems, but the script is still accessible.

Let me know if you have problems.
 
Or try this...
Code: 
<script language=JavaScript src=[URL unfurl="true"]http://home1.gte.net/uuclb/dynamicHTML3.js></script>[/URL]
<script language=JavaScript>
(new Date()).calendar().colorGrid().write(); // renders a calendar! 
</script>
 
ya it worked....
but if i enter a new year it restart ?
can u check the 2053 calendar ? (example)
wmail.jpg


someone knowledge ends where
someone else knowledge starts
 
Absolutely. If you select a different month, day or year, it updates itself internally.
 
well that is not working (year)
wmail.jpg


someone knowledge ends where
someone else knowledge starts
 
Perhaps refresh again. You should see the focus indicated on the current day in the calendar. If not, it didn't load properly.

BTW: What browser/version/platform are you using?
 
'browser/version/platform' = 'IE/6.01/win2kpro'
if i enter a new year value and hit enter it reset
wmail.jpg


someone knowledge ends where
someone else knowledge starts
 
Recently, I have tested it successfully under...
IE/5.5/Win2Kpro
NS/4.7/Win2Kpro
NS/6.2/Win2Kpro

And awhile back, it tested successfully under...
Op/6/Win2Kpro
Op/5/WinNT4wrk/SP6

But there is a Date object bug (in the browser, I think!)...
Op/4/WinNT4wrk/SP6

 
I'd be curious to know if it works...

1. From your local file system (point the SRC attribute to a local copy of dynamicHTML3.js)

2. Through your own web server (point the SRC attribute to a localhost copy of dynamicHTML3.js)

???
 
1 & 2 = same
after enter the self.loc is (and its reset)
Code: 
file:///C:/Documents%20and%20Settings/Administrator/Desktop/f.html?week=1st&weekday=Tue&month=May&year=2032&date=Tue+May+7+17%3A31%3A59+EDT+2002&script=var+DATE%3Dnew+Date%28document%5B%27cal0%27%5D.date.value%29%3Bvar+YEAR%3Dy2k%28DATE%29%3Bvar+MONTH%3DDATE.getMonth%28%29%3Bvar+DAY%3DDATE.getDate%28%29%3Bvar+WEEKDAY%3DDATE.getDay%28%29%3Bvar+WEEK+%3D+Math.floor%28%28DAY-1%29%2F7%29%3Bif%28this.value.length%29%7BDATE%3Dnew+Date%28YEAR%2CMONTH%2Cthis.value%29%7D%3Bdocument%5B%27cal0%27%5D.date.value%3DDATE.toString%28%29%3BupdateCal%28document%5B%27cal0%27%5D%29

so it means that on enter i sumbit
so u should (i think) place a action=&quot;calculate_year()&quot;
no ?
wmail.jpg


someone knowledge ends where
someone else knowledge starts
 
That made no sense to me. Could you post the source to your f.html file (or a web link to it)? Are you trying to manipulate the calendar from JavaScript code?

The calendar is rendered as a self-contained html FORM. Here is the verbose code...
Code: 
<TABLE>
<TBODY>
<TR>
<TH align=middle colSpan=7><SELECT id=week onchange=&quot;updateDate(document['cal0'])&quot; name=week><OPTION selected>1st</OPTION><OPTION>2nd</OPTION><OPTION>3rd</OPTION><OPTION>4th</OPTION><OPTION>last</OPTION></SELECT><SELECT id=weekday onchange=&quot;updateDate(document['cal0'])&quot; name=weekday><OPTION>Sun</OPTION><OPTION>Mon</OPTION><OPTION selected>Tue</OPTION><OPTION>Wed</OPTION><OPTION>Thu</OPTION><OPTION>Fri</OPTION><OPTION>Sat</OPTION></SELECT><SELECT id=month onchange=&quot;updateDate(document['cal0'])&quot; name=month><OPTION>Jan</OPTION><OPTION>Feb</OPTION><OPTION>Mar</OPTION><OPTION>Apr</OPTION><OPTION selected>May</OPTION><OPTION>Jun</OPTION><OPTION>Jul</OPTION><OPTION>Aug</OPTION><OPTION>Sep</OPTION><OPTION>Oct</OPTION><OPTION>Nov</OPTION><OPTION>Dec</OPTION></SELECT><INPUT id=year onchange=&quot;updateDate(document['cal0'])&quot; size=4 value=2002 name=year><INPUT id=date type=hidden value=&quot;Tue May 7 14:43:30 PDT 2002&quot; name=date><INPUT id=script type=hidden value=&quot;var DATE=new Date(document['cal0'].date.value);var YEAR=y2k(DATE);var MONTH=DATE.getMonth();var DAY=DATE.getDate();var WEEKDAY=DATE.getDay();var WEEK = Math.floor((DAY-1)/7);if(this.value.length){DATE=new Date(YEAR,MONTH,this.value)};document['cal0'].date.value=DATE.toString();updateCal(document['cal0'])&quot; name=script></TH>
<TR>
<TD vAlign=top align=right>Su</TD>
<TD vAlign=top align=right>M</TD>
<TD vAlign=top align=right>Tu</TD>
<TD vAlign=top align=right>W</TD>
<TD vAlign=top align=right>Th</TD>
<TD vAlign=top align=right>Fr</TD>
<TD vAlign=top align=right>Sa</TD></TR>
<TR>
<TD align=right><INPUT id=day onclick=&quot;eval(document['cal0'].script.value)&quot; type=button name=day height=&quot;25&quot; width=&quot;25&quot;></TD>
<TD align=right><INPUT id=day onclick=&quot;eval(document['cal0'].script.value)&quot; type=button name=day height=&quot;25&quot; width=&quot;25&quot;></TD>
<TD align=right><INPUT id=day onclick=&quot;eval(document['cal0'].script.value)&quot; type=button name=day height=&quot;25&quot; width=&quot;25&quot;></TD>
<TD align=right><INPUT id=day onclick=&quot;eval(document['cal0'].script.value)&quot; type=button value=1 name=day height=&quot;25&quot; width=&quot;25&quot;></TD>
<TD align=right><INPUT id=day onclick=&quot;eval(document['cal0'].script.value)&quot; type=button value=2 name=day height=&quot;25&quot; width=&quot;25&quot;></TD>
<TD align=right><INPUT id=day onclick=&quot;eval(document['cal0'].script.value)&quot; type=button value=3 name=day height=&quot;25&quot; width=&quot;25&quot;></TD>
<TD align=right><INPUT id=day onclick=&quot;eval(document['cal0'].script.value)&quot; type=button value=4 name=day height=&quot;25&quot; width=&quot;25&quot;></TD></TR>
<TR>
<TD align=right><INPUT id=day onclick=&quot;eval(document['cal0'].script.value)&quot; type=button value=5 name=day height=&quot;25&quot; width=&quot;25&quot;></TD>
<TD align=right><INPUT id=day onclick=&quot;eval(document['cal0'].script.value)&quot; type=button value=6 name=day height=&quot;25&quot; width=&quot;25&quot;></TD>
<TD align=right><INPUT id=day onclick=&quot;eval(document['cal0'].script.value)&quot; type=button value=7 name=day height=&quot;25&quot; width=&quot;25&quot;></TD>
<TD align=right><INPUT id=day onclick=&quot;eval(document['cal0'].script.value)&quot; type=button value=8 name=day height=&quot;25&quot; width=&quot;25&quot;></TD>
<TD align=right><INPUT id=day onclick=&quot;eval(document['cal0'].script.value)&quot; type=button value=9 name=day height=&quot;25&quot; width=&quot;25&quot;></TD>
<TD align=right><INPUT id=day onclick=&quot;eval(document['cal0'].script.value)&quot; type=button value=10 name=day height=&quot;25&quot; width=&quot;25&quot;></TD>
<TD align=right><INPUT id=day onclick=&quot;eval(document['cal0'].script.value)&quot; type=button value=11 name=day height=&quot;25&quot; width=&quot;25&quot;></TD></TR>
<TR>
<TD align=right><INPUT id=day onclick=&quot;eval(document['cal0'].script.value)&quot; type=button value=12 name=day height=&quot;25&quot; width=&quot;25&quot;></TD>
<TD align=right><INPUT id=day onclick=&quot;eval(document['cal0'].script.value)&quot; type=button value=13 name=day height=&quot;25&quot; width=&quot;25&quot;></TD>
<TD align=right><INPUT id=day onclick=&quot;eval(document['cal0'].script.value)&quot; type=button value=14 name=day height=&quot;25&quot; width=&quot;25&quot;></TD>
<TD align=right><INPUT id=day onclick=&quot;eval(document['cal0'].script.value)&quot; type=button value=15 name=day height=&quot;25&quot; width=&quot;25&quot;></TD>
<TD align=right><INPUT id=day onclick=&quot;eval(document['cal0'].script.value)&quot; type=button value=16 name=day height=&quot;25&quot; width=&quot;25&quot;></TD>
<TD align=right><INPUT id=day onclick=&quot;eval(document['cal0'].script.value)&quot; type=button value=17 name=day height=&quot;25&quot; width=&quot;25&quot;></TD>
<TD align=right><INPUT id=day onclick=&quot;eval(document['cal0'].script.value)&quot; type=button value=18 name=day height=&quot;25&quot; width=&quot;25&quot;></TD></TR>
<TR>
<TD align=right><INPUT id=day onclick=&quot;eval(document['cal0'].script.value)&quot; type=button value=19 name=day height=&quot;25&quot; width=&quot;25&quot;></TD>
<TD align=right><INPUT id=day onclick=&quot;eval(document['cal0'].script.value)&quot; type=button value=20 name=day height=&quot;25&quot; width=&quot;25&quot;></TD>
<TD align=right><INPUT id=day onclick=&quot;eval(document['cal0'].script.value)&quot; type=button value=21 name=day height=&quot;25&quot; width=&quot;25&quot;></TD>
<TD align=right><INPUT id=day onclick=&quot;eval(document['cal0'].script.value)&quot; type=button value=22 name=day height=&quot;25&quot; width=&quot;25&quot;></TD>
<TD align=right><INPUT id=day onclick=&quot;eval(document['cal0'].script.value)&quot; type=button value=23 name=day height=&quot;25&quot; width=&quot;25&quot;></TD>
<TD align=right><INPUT id=day onclick=&quot;eval(document['cal0'].script.value)&quot; type=button value=24 name=day height=&quot;25&quot; width=&quot;25&quot;></TD>
<TD align=right><INPUT id=day onclick=&quot;eval(document['cal0'].script.value)&quot; type=button value=25 name=day height=&quot;25&quot; width=&quot;25&quot;></TD></TR>
<TR>
<TD align=right><INPUT id=day onclick=&quot;eval(document['cal0'].script.value)&quot; type=button value=26 name=day height=&quot;25&quot; width=&quot;25&quot;></TD>
<TD align=right><INPUT id=day onclick=&quot;eval(document['cal0'].script.value)&quot; type=button value=27 name=day height=&quot;25&quot; width=&quot;25&quot;></TD>
<TD align=right><INPUT id=day onclick=&quot;eval(document['cal0'].script.value)&quot; type=button value=28 name=day height=&quot;25&quot; width=&quot;25&quot;></TD>
<TD align=right><INPUT id=day onclick=&quot;eval(document['cal0'].script.value)&quot; type=button value=29 name=day height=&quot;25&quot; width=&quot;25&quot;></TD>
<TD align=right><INPUT id=day onclick=&quot;eval(document['cal0'].script.value)&quot; type=button value=30 name=day height=&quot;25&quot; width=&quot;25&quot;></TD>
<TD align=right><INPUT id=day onclick=&quot;eval(document['cal0'].script.value)&quot; type=button value=31 name=day height=&quot;25&quot; width=&quot;25&quot;></TD>
<TD align=right><INPUT id=day onclick=&quot;eval(document['cal0'].script.value)&quot; type=button name=day height=&quot;25&quot; width=&quot;25&quot;></TD></TR>
<TR>
<TD align=right><INPUT id=day onclick=&quot;eval(document['cal0'].script.value)&quot; type=button name=day height=&quot;25&quot; width=&quot;25&quot;></TD>
<TD align=right><INPUT id=day onclick=&quot;eval(document['cal0'].script.value)&quot; type=button name=day height=&quot;25&quot; width=&quot;25&quot;></TD>
<TD align=right><INPUT id=day onclick=&quot;eval(document['cal0'].script.value)&quot; type=button name=day height=&quot;25&quot; width=&quot;25&quot;></TD>
<TD align=right><INPUT id=day onclick=&quot;eval(document['cal0'].script.value)&quot; type=button name=day height=&quot;25&quot; width=&quot;25&quot;></TD>
<TD align=right><INPUT id=day onclick=&quot;eval(document['cal0'].script.value)&quot; type=button name=day height=&quot;25&quot; width=&quot;25&quot;></TD>
<TD align=right><INPUT id=day onclick=&quot;eval(document['cal0'].script.value)&quot; type=button name=day height=&quot;25&quot; width=&quot;25&quot;></TD>
<TD align=right><INPUT id=day onclick=&quot;eval(document['cal0'].script.value)&quot; type=button name=day height=&quot;25&quot; width=&quot;25&quot;></TD></TR></TBODY></TABLE></FORM>
 
Try this change:

Point your browser to &quot; and download it onto your desktop.

Modify the f.html file to read...
Code: 
<script language=JavaScript src=file:///C:/Documents%20and%20Settings/Administrator/Desktop/dynamicHTML3.js>;</script>
<script language=JavaScript>
(new Date()).calendar().write(); // renders a calendar! 
</script>
Then point your browser to &quot;file:///C:/Documents%20and%20Settings/Administrator/Desktop/f.html&quot;

That way, you'll be running against a copy of the dynamicHTML3.js from your local file system, rather than over the net to a flakey host (Verizon).
 
as said before ...

1. From your local file system (point the SRC attribute to a local copy of dynamicHTML3.js)
2. Through your own web server (point the SRC attribute to a localhost copy of dynamicHTML3.js)
???

1 & 2 = same


even if i do it this way it WONT WORK
Code: 
<html>
<head>
<script language=JavaScript src=file:///C:/Documents%20and%20Settings/Administrator/Desktop/dynamicHTML3.js>;</script>
</script>
</head>
<body>
<script language=JavaScript>
(new Date()).calendar().write(); // renders a calendar! 
</script>
</body>
</html>[code]

int this line 
[code]<INPUT id=year onchange=&quot;updateDate(document['cal0'])&quot; size=4 value=2002 name=year>
there is no type=???
if text was wanted place type=text
add all your <input> a <form>
in this <form> tag place
Code: 
action=&quot;updateDate(document['cal0'])&quot;
and remove onchange=&quot;updateDate(document['cal0'])&quot;
from the year <input>

just sugjestion



wmail.jpg


someone knowledge ends where
someone else knowledge starts
 
Actually, there is a type(=text) specified. But why remove the onchange event? That's what makes the calendar navigable.
 
In your f.html file, insert &quot;.source()&quot; just before the &quot;.write()&quot; and view it in the browser. That'll show you what the browser is attempting to render.

BTW: Why do you say not to use onchange? I use that to update the calendar during navigation.
 
cause it not working
wmail.jpg


someone knowledge ends where
someone else knowledge starts
 
Hi all,

I have just tried this out and I see where both of your are coming from...

If you enter a new date and hit &quot;enter&quot; then the form refreshes..

If you just enter the year and then click on the day then it updates correctly..

Does that solve the confusion??

Hope this helps Wullie

 
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
297
lexer
lexer
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
689
Mike Lewis
Mike Lewis
JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
158
Daniel K
Daniel K
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
334
xwb
xwb
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
306
malpa
malpa

Part and Inventory Search

Sponsor

Back
Top