show javascript on html page instead of pop up

[jcdb]

Hello,
I have an icon on my site where when it is clicked , the javascript file popups. The html code is below
======

<script language="JavaScript" src="http://www.site.com/folder/javascript/file.js"></script>
<table width=95% cellpadding=0 cellspacing=1 border=0>
<tr>
<td><font face="arial, helvetica" size="2">
<img align=absbottom src="http://www.site.com/folder/images/calicon.gif" border=0 onClick="javascript:showMainReport(nowd,nowm,nowy)">
<div
id="Report_main" style="position:absolute; visibility:show; z-index:1">
</div>
====================================
I would like to display the content of the javascript on my html page instead of calling it in popup .js file. How do I do that?
Thank

[Lance]

Try changing this line from:

onClick="javascript:showMainReport(nowd,nowm,nowy)">

To:

onClick="showMainReport(nowd,nowm,nowy)">

The "javascript:" part is only used when part on an href attribute.

[Bernard Marx]

That won't make any difference. It's true that the 'javascript:' only really belongs in an href, but the effect will be the same if it is removed.

To answer this question we need more code, or a fuller explanation of what this means..

I would like to display the content of the javascript on my html page

[webdude]

I think he means to actually display the javascript to show the code in an html page.

In order to do this, you need to replace all < and > with
&lt; and &gt; respectivley.

So now your javascript would look like this...

&lt;script language="JavaScript" src="http://www.site.com/folder/javascript/file.js"&gt;&lt;/script&gt;
&lt;table width=95% cellpadding=0 cellspacing=1 border=0&gt;
&lt;tr&gt;
&lt;td&gt;&lt;font face="arial, helvetica" size="2"&gt;
&lt;img align=absbottom src="http://www.site.com/folder/images/calicon.gif" border=0 onClick="javascript:showMainReport(nowd,nowm,nowy)"&gt;
&lt;div
id="Report_main" style="position:absolute; visibility:show; z-index:1"&gt;
&lt;/div&gt;

This will display correcly in the browser.

I hope this is what you were looking for.

[jcdb]

What I mean is below:

Here's an example: THis calendar on this site
[webreference.com...] , when you click on the small icon on option 1 (A DHTML Lab Popup Calendar without an associated input text element and generated from an image element click:), the calendar show or displays on the screen.

Instead of having to click, how do you just display the calendar on the screen? Like the calendar on this page? [webmasterworld.com...]

THanks

[Lance]

Okay, as a "cheap fix", try this:

FIND:

function display() {  
document.all['calendar'].style.visibility = "visible";  
}  
function hide_start() {  
document.all['calendar'].style.visibility = "hidden";  
}  

and replace:

document.all['calendar'].style.visibility = "hidden";

with:

document.all['calendar'].style.visibility = "visible";

[webdude]

Just paste this where you want the calendar...

<script language="JavaScript">
<!--

var day_of_week = new Array('','','','','','','');
var month_of_year = new Array('January','February','March','April','May','June','July','August','September','October','November','December');

var Calendar = new Date();

var year = Calendar.getYear(); // Returns year
var month = Calendar.getMonth(); // Returns month (0-11)
var today = Calendar.getDate(); // Returns day (1-31)
var weekday = Calendar.getDay(); // Returns day (1-31)

var DAYS_OF_WEEK = 7; // "constant" for number of days in a week
var DAYS_OF_MONTH = 31; // "constant" for number of days in a month
var cal; // Used for printing

Calendar.setDate(1); // Start the calendar day at '1'
Calendar.setMonth(month); // Start the calendar month at now

var TR_start = '<TR>';
var TR_end = '</TR>';
var highlight_start = '<TD WIDTH="10"><TABLE CELLSPACING=0 BORDER=1 BGCOLOR=DEDEFF BORDERCOLOR=CCCCCC><TR><TD WIDTH=5><font face="helvetica,arial" size="1"><B><CENTER>';
var highlight_end = '</CENTER></TD></TR></TABLE></B>';
var TD_start = '<TD WIDTH="10"><CENTER><font face="helvetica,arial" size="1">';
var TD_end = '</font></CENTER></TD>';

cal = '<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=0 BORDERCOLOR=BBBBBB height=0><TR><TD>';
cal += '<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=2 height=0>' + TR_start;
cal += '<TD COLSPAN="' + DAYS_OF_WEEK + '" BGCOLOR="#EFEFEF"><CENTER><font face="helvetica,arial" size="1"><B>';
cal += month_of_year[month] + ' ' + year + '</B>' + TD_end + TR_end;
cal += TR_start;

// DO NOT EDIT BELOW THIS POINT //

// LOOPS FOR EACH DAY OF WEEK
for(index=0; index < DAYS_OF_WEEK; index++)
{

// BOLD TODAY'S DAY OF WEEK
if(weekday == index)
cal += TD_start + '<B>' + day_of_week[index] + '</B>' + TD_end;

// PRINTS DAY
else
cal += TD_start + day_of_week[index] + TD_end;
}

cal += TD_end + TR_end;
cal += TR_start;

// FILL IN BLANK GAPS UNTIL TODAY'S DAY
for(index=0; index < Calendar.getDay(); index++)
cal += TD_start + ' ' + TD_end;

// LOOPS FOR EACH DAY IN CALENDAR
for(index=0; index < DAYS_OF_MONTH; index++)
{
if( Calendar.getDate() > index )
{
// RETURNS THE NEXT DAY TO PRINT
week_day =Calendar.getDay();

// START NEW ROW FOR FIRST DAY OF WEEK
if(week_day == 0)
cal += TR_start;

if(week_day!= DAYS_OF_WEEK)
{

// SET VARIABLE INSIDE LOOP FOR INCREMENTING PURPOSES
var day = Calendar.getDate();

// HIGHLIGHT TODAY'S DATE
if( today==Calendar.getDate() )
cal += highlight_start + day + highlight_end + TD_end;

// PRINTS DAY
else
cal += TD_start + day + TD_end;
}

// END ROW FOR LAST DAY OF WEEK
if(week_day == DAYS_OF_WEEK)
cal += TR_end;
}

// INCREMENTS UNTIL END OF THE MONTH
Calendar.setDate(Calendar.getDate()+1);

}// end for loop

cal += '</TD></TR></TABLE></TABLE>';

// PRINT CALENDAR
document.write(cal);

// End -->

</script>