“ LavaLamp for JQuery lovers ! “ nice name you will find it when you try to google for JQuery Menu :) http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/ try It! .
I download it and create the example page on just 3 min :) and take 6 hour to apply it to my master page. all you need to do to add the JQuery plugins is to add these lines to you Master Head tag (add Jquery references and lavalamp )
<head runat="server" style=" height:100%;" > <title></title> <script type="text/javascript" src="../Js/jquery-1.2.3.min.js"></script> <script type="text/javascript" src="../Js/jquery.easing.min.js"></script> <script type="text/javascript" src="../Js/jquery.lavalamp.min.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function() { $(function() { $("#1").lavaLamp({ fx: "backout", speed: 700, click: function(event, menuItem) { return false; } }); }); }); <asp:ContentPlaceHolder ID="head" runat="server"> </asp:ContentPlaceHolder> </script> </head>
Great you will get this error :
This occurs of course since jQuery hasn't been loaded by the time the function tries to run.
Solution :
1- Initially my script was placed below my head ContentPlaceHolder
2- If your MasterPage is not at the same directory level then things won't work either. You can use ResolveUrl
3-forces the header to resolve data binding expressions, and everything gets back to normal! by adding the below code to master page code behind
Header Code :
<asp:ContentPlaceHolder ID="head" runat="server"> </asp:ContentPlaceHolder> <script type="text/javascript" src='<%# ResolveUrl ("~/Js/jquery-1.2.3.min.js") %>'></script>
Code Behind
protected override void OnLoad(EventArgs e) { base.OnLoad(e); Page.Header.DataBind(); }
hope my 6 hour of searching :) help someone avoid run into these problems.:)
18 comments: