onClick javascript works in IE but not in firefox 1

[gchaves]

Greetings!

I have an onClick script written within an ASP page that, when the link is clicked, pops up a calendar so the user can select a specific date. There is a start date and an end date that the user can select and these variables are passed to a sql query to pull class events from the database for the class calendar.

It works fine in IE 6.0...just not in Mozilla. This is the first time I have used javasript in a long time, so any help would be greatly appreciated. The code that works in IE is below:

		<td><a href="javascript:void(0);" title="Click here to choose a date" onClick="cal.select(document.forms.month_view.startDate,'anchor1',true); return false;" name="anchor1" id="a2"><b><u><font color="#0000FF">Start Date:</font></u></b></a></td>
		<td><input type="text" name="startDate" value="<%= "" & startDate & "" %>" class="textfield" readonly="readonly"></td>

Thanks!
GC

 

[mbrooks]

First thing that catches my eye is

[b]cal.select([/b]document.forms.month_view.startDate,'anchor1',true)

Try renaming it to something like

calSelect(document.forms.month_view.startDate,'anchor1',true)

M. Brooks

http://mbrooks.info

 

[BillyRayPreachersSon]

GC,

Check your JavaScript console in Mozilla - do you see any errors?

If you put an alert at the top of your cal object's select method, does it ever appear?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[gchaves]

When I check in the JavaScript console, I get a whole list of errors in my style sheet and one in my javascript code.

The javascript errors are as follows:

error 1: el has no properties

function AP_getPageOffsetLeft(el)
{
    [b]var ol=el.offsetLeft;[/b]
    while((el=el.offsetParent)!=null)
    {
        ol+=el.offsetLeft
    }
    return ol
}

Again, I'm not a javascript guru, so I am a little lost here. Can anyone tell me what this error means?

Thanks,
GC

 

[BillyRayPreachersSon]

It means that wherever you are calling the function, you are either not passing anything, or not passing a reference to a valid element.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[gchaves]

My job has molded me into a Microsoft programmer...as that is what my company uses. This is my first endeavor at coding something for the true .com world.

in the error, I am setting a variable called ol and setting to el.offsetLeft. Do I need to set a variable called el? How would I go about modifying this javascript to work in both browsers?

Thanks for your help!
GC

 

[BillyRayPreachersSon]

Ignore to the function you have posted above. As I've said, the problem is with whatver you are passing as the parameter when calling the function.

Perhaps you could give more information about that, not about what we can already see.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[gchaves]

I apologize for my ignorance, but I am not even sure what parameter I am even passing. Here is my Calendar.asp page. Perhaps the parameter that I am passing is in there.

<% 
Dim APPPATH
APPPATH = MID( Request.ServerVariables( "APPL_MD_PATH" ), LEN( Request.ServerVariables( "INSTANCE_META_PATH" ) ) + 6 ) %>
<script language="JavaScript" type="text/javascript" SRC="<%= AppPath %>/includes/calendar/cal_cp.js"></script>
<script language="JavaScript" type="text/javascript">
<!--!
   var cal = new CalendarPopup("calendardiv");
   <!-- cal.setDisabledWeekDays(0,6); // Disable selecting Saturday and Sunday -->
   cal.setGraypixelImage("<%= AppPath %>/images/calendar/graypixel.gif");
   cal.setLegendImage("<%= AppPath %>/images/calendar/calegend.gif");
   cal.setLegendLongDesc("<%= AppPath %>/images/calendar/legend_long_desc.txt");
   cal.setDateFormat('MM/dd/yyyy');
   cal.setParseDateFormat('M/d/y');
   var asapDate = new Date("1/1/2000");
   //initialize max date (in case it doesn't get passed in on select function)
   var today = new Date();
   var nextYear = new Date("12/31/2050");
   cal.setDateRange(asapDate, nextYear);
   //cal.setHolidays("<% Year(Now) %>1127","<% Year(Now) %>1225","<% Year(Now) %>0101","<% Year(Now) %>0119","<% Year(Now) %>0216","<% Year(Now) %>0531","<% Year(Now) %>0705","<% Year(Now) %>0906","<% Year(Now) %>1011","<% Year(Now) %>1111");
   cal.setTimeout(25000);
   if(!document.layers)
   { document.write(cal.getStyles()); }
//-->
</script>


<div ID="calendardiv" STYLE="position:absolute;visibility:hidden;"></div>

My cal_cp.js contains all of the functions for the calendar, so I am guessing the parameter that I am passing is contained in within the code above? Otherwise, the cal_cp.js file is over 1500 lines long. Thank you for helping me understand a little more about javascript! I do appreciate it!

Thanks,
GC

 

[BillyRayPreachersSon]

There is no call at all to "AP_getPageOffsetLeft" there.

Why not just do a search over your whole project for the string "AP_getPageOffsetLeft" to find out where you're calling it?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[gchaves]

The previous code I posted calls another javascript file called cal_cp.js. This file is roughly 1500 lines long. Out of the 1500 or so lines of code, AP_getPageOffsetLeft is used only within the first 108 lines of code. I do see several places where AP_getPageOffsetLeft is being called and is being passed some variables, but am still in the dark. I will post the first 108 lines and bold the function calls for AP_getOPageOffsetLeft.

function getAnchorPosition(anchorname)
{
    var useWindow=false;
    var coordinates=new Object();
    var x=0,y=0;
    var use_gebi=false,use_css=false,use_layers=false;
    if(document.getElementById)
    {
        use_gebi=true
    }
    else if(document.all)
    {
        use_css=true
    }
    else if(document.layers)
    {
        use_layers=true
    }
    if(use_gebi&&document.all)
    {
        [b][i]x=AP_getPageOffsetLeft(document.all[anchorname]);[/i][/b]
        y=AP_getPageOffsetTop(document.all[anchorname])
    }
    else if(use_gebi)
    {
        var o=document.getElementById(anchorname);
        [b][i]x=AP_getPageOffsetLeft(o);[/i][/b]
        y=AP_getPageOffsetTop(o)
    }
    else if(use_css)
    {
        [b][i]x=AP_getPageOffsetLeft(document.all[anchorname]);[/b][/i]
        y=AP_getPageOffsetTop(document.all[anchorname])
    }
    else if(use_layers)
    {
        var found=0;
        for(var i=0;i<document.anchors.length;i++)
        {
            if(document.anchors[i].name==anchorname)
            {
                found=1;
                break
            }
        }
        if(found==0)
        {
            coordinates.x=0;
            coordinates.y=0;
            return coordinates
        }
        x=document.anchors[i].x;
        y=document.anchors[i].y
    }
    else
    {
        coordinates.x=0;
        coordinates.y=0;
        return coordinates
    }
    coordinates.x=x;
    coordinates.y=y;
    return coordinates
}
function getAnchorWindowPosition(anchorname)
{
    var coordinates=getAnchorPosition(anchorname);
    var x=0;
    var y=0;
    if(document.getElementById)
    {
        if(isNaN(window.screenX))
        {
            x=coordinates.x-document.body.scrollLeft+window.screenLeft;
            y=coordinates.y-document.body.scrollTop+window.screenTop
        }
        else
        {
            x=coordinates.x+window.screenX+(window.outerWidth-window.innerWidth)-window.pageXOffset;
            y=coordinates.y+window.screenY+(window.outerHeight-24-window.innerHeight)-window.pageYOffset
        }
    }
    else if(document.all)
    {
        x=coordinates.x-document.body.scrollLeft+window.screenLeft;
        y=coordinates.y-document.body.scrollTop+window.screenTop
    }
    else if(document.layers)
    {
        x=coordinates.x+window.screenX+(window.outerWidth-window.innerWidth)-window.pageXOffset;
        y=coordinates.y+window.screenY+(window.outerHeight-24-window.innerHeight)-window.pageYOffset
    }
    coordinates.x=x;
    coordinates.y=y;
    return coordinates
}
[b][i]function AP_getPageOffsetLeft(el)
{
    var ol=el.offsetLeft;
    while((el=el.offsetParent)!=null)
    {
        ol+=el.offsetLeft;
    }
    return ol
}[i][/b]
function AP_getWindowOffsetLeft(el)
{
    [b][i]return AP_getPageOffsetLeft(el)-document.body.scrollLeft[/i][/b]
}

I hate to post a ton of code, but hopefully I have made it somewhat easier to pick up the troublespots. If, after looking at this, we are unable to find a solution to get this to work in firefox (or netscape, for that matter), then I think that will be the telltale sign that I need to research other calendar functions.

Thank you, again, for your help!

GC

 

[BillyRayPreachersSon]

OK - you need to change the ID of "a2" in the line of code you posted originally to be the same as the NAME ("anchor1").

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[gchaves]

Awesome! That did the trick! Could you tell me why that worked? I see where the cal_cp.js file is looking for anchorname, but why didn't it like a1 or a2?

Thanks again! I certainly appreciate you looking at this and helping me out!

Thanks,
GC

 

[BillyRayPreachersSon]

It was in the very first thing you posted:

name="anchor1" id="a2"

They needed to be the same for the cross-browser code to work correctly.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]