Question

i Would like to do do one webpart which contains Jquery effects like toggle .

When we click on image beside that tools,resources we beed to display a menu…for that i would like to use jquery toggle

i have added the following link in sharepoint master page

<SharePoint:ScriptLink language="javascript" name="/_layouts/NMFSHeaderLinks/jquery-1.4.1-vsdoc.js"  Defer="true" runat="server"/>

and in the visual webpart

<style type="text/css">
    a:hover
    {
        text-decoration:none;
        font-weight:bold;
    }
    .style1
    {
        width: 8px;
        height: 7px;
    }
</style>

<script type="text/javascript" src="../../../_layouts/NMFSHeaderLinks/jquery-1.4.1-vsdoc.js">


    $(document).ready(function () {
        $('#hpTools').click(function () {
            alert('Entered in jquery');
            $("#divtools").toggle("slow");
        });
    });


</script>

<table id="td">
<tr>
<td>
<asp:HyperLink ID="hpBlueBook" runat="server" Font-Bold="False" 
    Font-Size="Small" ForeColor="#F19005" NavigateUrl="http://Sparsh" >Blue Book</asp:HyperLink>
&nbsp; |&nbsp;
</td>
<td><asp:HyperLink ID="hpReports" runat="server" Font-Bold="False" 
    Font-Size="Small" ForeColor="#F19005" NavigateUrl="http://Sparsh">Reports</asp:HyperLink>

&nbsp;|</td>
<td>
<asp:HyperLink ID="hpTools" runat="server" Font-Bold="False" 
    Font-Size="Small" ForeColor="#F19005" >Tools</asp:HyperLink>
&nbsp;<img alt="getTools" class="style1" id="tools"
        src="../../../_layouts/images/NMFSHeaderLinks/DropDown.png" />&nbsp;|&nbsp;


</td>
<td>
<asp:HyperLink ID="hpResources" runat="server" Font-Bold="False" 
    Font-Size="Small" ForeColor="#F19005" >Resources</asp:HyperLink>

&nbsp;<img alt="GetResources" class="style1" 
        src="../../../_layouts/images/NMFSHeaderLinks/DropDown.png" />&nbsp;|
</td>
<td>
<asp:HyperLink ID="hpQuickLinks" runat="server" Font-Bold="False" 
    Font-Size="Small" ForeColor="#F19005" >Quick Links</asp:HyperLink>

&nbsp;<img alt="GetQuick Links" class="style1" 
        src="../../../_layouts/images/NMFSHeaderLinks/DropDown.png" />
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td> <div id="divtools" style="display:none">
            <asp:Menu ID="ToolsMenu" runat="server" BackColor="#F7F6F3" 
                DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="0.8em" 
                ForeColor="#7C6F57" StaticSubMenuIndent="10px">
                <DynamicHoverStyle BackColor="#7C6F57" ForeColor="White" />
                <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
                <DynamicMenuStyle BackColor="#F7F6F3" />
                <DynamicSelectedStyle BackColor="#5D7B9D" />
                <Items>
                    <asp:MenuItem NavigateUrl="http://www.google.com" Text="Google" Value="Google">
                    </asp:MenuItem>
                    <asp:MenuItem NavigateUrl="http://www.yahoo.com" Text="Yahoo" Value="Yahoo">
                    </asp:MenuItem>
                </Items>
                <StaticHoverStyle BackColor="#7C6F57" ForeColor="White" />
                <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
                <StaticSelectedStyle BackColor="#5D7B9D" />
            </asp:Menu>
        </div></td>
        <td>
        <div id="Reports">
            <asp:Menu ID="Menu1" runat="server" BackColor="#F7F6F3" 
                DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="0.8em" 
                ForeColor="#7C6F57" StaticSubMenuIndent="10px">
                <DynamicHoverStyle BackColor="#7C6F57" ForeColor="White" />
                <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
                <DynamicMenuStyle BackColor="#F7F6F3" />
                <DynamicSelectedStyle BackColor="#5D7B9D" />
                <Items>
                    <asp:MenuItem NavigateUrl="http://www.google.com" Text="Static" Value="Google">
                    </asp:MenuItem>
                    <asp:MenuItem NavigateUrl="http://www.yahoo.com" Text="Dynamic" Value="Yahoo">
                    </asp:MenuItem>
                </Items>
                <StaticHoverStyle BackColor="#7C6F57" ForeColor="White" />
                <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
                <StaticSelectedStyle BackColor="#5D7B9D" />
            </asp:Menu>
        </div>
        </td>
        <td>
        <div id="QuickLinks">
            <asp:Menu ID="Menu2" runat="server" BackColor="#F7F6F3" 
                DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="0.8em" 
                ForeColor="#7C6F57" StaticSubMenuIndent="10px">
                <DynamicHoverStyle BackColor="#7C6F57" ForeColor="White" />
                <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
                <DynamicMenuStyle BackColor="#F7F6F3" />
                <DynamicSelectedStyle BackColor="#5D7B9D" />
                <Items>
                    <asp:MenuItem NavigateUrl="http://Sparsh" Text="Sparsh" Value="Google">
                    </asp:MenuItem>
                    <asp:MenuItem NavigateUrl="http://webmail/owa" Text="Mail" Value="Yahoo">
                    </asp:MenuItem>
                </Items>
                <StaticHoverStyle BackColor="#7C6F57" ForeColor="White" />
                <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
                <StaticSelectedStyle BackColor="#5D7B9D" />
            </asp:Menu>
        </div>
        </td></tr>
</table>

but it is not going to the click function…
Please let me know how can i proceed….i tried with the image ID also.but not working

Answer 1

Please Remove the src from the script block. Also, I’m not sure if deferred loading causes $ to be undefined at the time the script block is executed.