Member Avatar for xzajox

Hi, I'm having this problem and can't get a solution anywhere.

-- <Introduction:>
I have a master page, then I have a content page which contains a little login form wrapped in <div id="LoginTable"></div>

What I want, is to use a ScriptaculoUs JavaScript
Effect.Highlight(...)
on some mouseovers.
The Effect.Highlight is in external .js file. Scriptaculous uses also Prototype.


--<Problem>
On a standalone page it worked fine,
I referenced the "Scriptaculous.js" and "Prototype.js" in the <head> tags,
then I added a <script> tag with a function: HiEffect(element){ Effect.Highlight(...) }
then I added onmouseover="HiEffect(this)" to the element.

Everything worked fine until I had to put this page under a MasterPage.

Now, even if I reference the files in the MasterPage or ContentPage, the script won't run.


--<What Worked>
I tried instead of putting Effect.Highlight() something regular, like alert("lol") and the mouseover worked, so OK, the <script> can be found.
Then I checked if the element can be found, Yes, it is found.

So the problem surely is in the reference to the external .js file.
Where to put it, or how to force the page to know where to look for it?


Does anyone know, please let me know, thanx a lot.

  • 2 Contributors
  • 4 Replies
  • 123 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by xzajox
Member Avatar for xzajox

lol 230 views, and nobody can help?
maybe it is a big problem, or was I misunderstood?

Member Avatar for Drew

It really helps if you can post some code, or link to some code, and include any error messages.

Member Avatar for xzajox

Aw, yes, sorry.

this is my master Page:

<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/>
    <title>my web</title>
    <link rel="stylesheet" type="text/css" href="StyleSheet.css" />
    <script src="/Javascript/prototype.js" type="text/javascript"></script>
    <script src="/Javascript/scriptaculous.js" type="text/javascript"></script>    
    <script src="/Javascript/effects.js" type="text/javascript"></script>    
    
    <script type="text/javascript" language="javascript">
    function mp_onload()
    {     
      if(window.body_onload != null)
        window.body_onload();
    }
    </script>  
    
    <script type="text/javascript">
        function EffectAppear(elem)
        {
        Effect.Appear(elem, { duration: 2.0 })
        }
    </script>
    
</head>
<body onload="mp_onload()">
    <form id="form1" runat="server">
    <div>
        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
        </asp:contentplaceholder>
    </div>
    </form>
</body>
</html>

this is my content Page:

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login" Title="Login" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> 
<script type="text/javascript" language="javascript">
    function body_onload()
    {
    EffectAppear(findTable());
    }
    
    function findTable()
    {
    var tab = '<%= LoginTable.ClientID %>';
    return tab;
    }
    
</script>

<div>
    <table cellpadding="0" cellspacing="0" style="width:100%; height:100%;">
        <tr style="height:30%;">
            <td style="width:43%;"></td>
            <td style="width:14%; height: 150px;" align="center" valign="bottom">
                <asp:Label ID="Label4" runat="server" ForeColor="Red" Text="Message" Visible="False"></asp:Label></td>
            <td style="width:43%;"></td>
        </tr>
        <tr style="height:20%;">
            <td style="width:43%;"></td>   
            <td style="width:14%;">
                <div id="LoginTable" class="dialog" style="display:none;" runat="server">
                    <div class="content">
                        <div class="t"></div>
                        <table cellspacing="0" style="width:100%; height:100%; border-right: black 0px solid; border-top: black 0px solid; border-left: black 0px solid; border-bottom: black 0px solid;" border="2">
                            <tr>
                                <td colspan="2" align="center" style="border-right: 0px solid; border-top: 0px solid; border-left: 0px solid; border-bottom: 0px solid;">
                                    <asp:Label ID="Label1" runat="server" Text="Prihlásenie"></asp:Label></td>                        
                            </tr>
</table>

the table goes on, but it is not important.
codebehind files are also not important.

What this is doing: When the page loads, the <div> 'LoginTable' should appear slowly.

ERROR messages. Yes, I use Firebug and it tells me this:

Effect is not defined:
Effect.Appear(elem, { duration: 2.0 })

So it is obvious that the external file effects.js cannot be found.
I know I don't need to put the <script> reference to effects.js, because the file scriptaculous.js loads it itself, but still, the file can not be found or what.

hope this helps, thx.

Member Avatar for xzajox

WHAT THE HELL?

I resolved it by accident. I almost gave up.

I simply moved the <script> references
from the <head> of the Master Page
into the <body><form> tag

and it worked...

lol, I spent hours googling around and found nothing. :'( :@

I Hope if anybody`s got this noob (that`s me) problem, here is the solution.

Anyway, thanx Drew, and to everybody who wanted to help :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.