Issues using JQuery on Masterpage
I'm having some real issues trying to get some JQuery working in my masterpage. All it should be doing is toggling the content on click, it works perfectly fine on JSFiddle and on other non-sitefinity projects.
Sitefinity version: 6.3
Code being used: jsfiddle.net/.../
If you follow the JSFiddle link I have provided you can see what I want to achieve with this Navigation.
Any Ideas I'm really at a loss as to why it is stopping it from working
Hi Andy
Haven't looked in detail at your code,
however here's what I do on my masterpages
In the page Header the following:
<sf:ResourceLinks ID="resourcesLinks" runat="server" >
<sf:ResourceFile JavaScriptLibrary="JQuery" />
<sf:ResourceFile JavaScriptLibrary="JQueryUI" />
<sf:ResourceFile JavaScriptLibrary="JQueryCookie" />
<sf:ResourceFile JavaScriptLibrary="JQueryFancyBox" />
</sf:ResourceLinks>
This loads jQuery libraries correctly
ie. Stops from loading two diff versions
Regards
Martin
Hi Andy,
Martin has suggested a good way to add a reference to jQuery and load it on your master page. The built-in version is 1.8.3 but from the fiddle code I believe that it will work for you. For troubleshooting the issue, could you please provide additional information on how you are currently adding jQuery? If you need to add different version of jQuery, please, always check if any jQuery library is loaded before that, use the noConflict if possible, and ensure the default version is used in the back-end.
Regards,
Nikola Zagorchev
Telerik
Great News my code works, bad news doesn't do what it's supposed to. Instead of toggling between on click it expands and retracts immediately. Could this be to do with this noConflict stuff or the way I have coded the JQuery?
This is the entirety of the MasterPage File:
<%@ Master Language="C#" %>
<%@ Register Namespace="Telerik.Sitefinity.Web.UI.NavigationControls" Assembly="Telerik.Sitefinity" TagPrefix="sf" %>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
<!DOCTYPE html
>
<html>
<head id="Head1" runat="server">
<title>Objective IT | Turning vision into success</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<%-- Application Icons --%>
<meta name="application-name" content="Objective IT"/>
<meta name="msapplication-TileColor" content="#ff5500"/>
<meta name="msapplication-square70x70logo" content="tiny.png"/>
<meta name="msapplication-square150x150logo" content="square.png"/>
<meta name="msapplication-wide310x150logo" content="wide.png"/>
<meta name="msapplication-square310x310logo" content="large.png"/>
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
<%-- Stylesheets --%>
<link rel="stylesheet" type="text/css" href="../App_Themes/ObjectiveTheme/Global/Reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../App_Themes/ObjectiveTheme/Global/Layout.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../App_Themes/ObjectiveTheme/Global/font-awesome.min.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../App_Themes/ObjectiveTheme/Global/objective.css" media="screen" />
<link rel="stylesheet" href="../App_Themes/ObjectiveTheme/Global/print.css" media="print" />
<link rel="next" href="/next"/>
<link rel="prev" href="/prev"/>
<sf:ResourceLinks ID="resourcesLinks" runat="server" >
<sf:ResourceFile JavaScriptLibrary="JQuery" />
<sf:ResourceFile JavaScriptLibrary="JQueryUI" />
<sf:ResourceFile JavaScriptLibrary="JQueryCookie" />
<sf:ResourceFile JavaScriptLibrary="JQueryFancyBox" />
</sf:ResourceLinks>
<script type="text/javascript" src="w.sharethis.com/.../script>
<script type="text/javascript">stLight.options( publisher: "3e0f7867-d3b1-4a55-970f-5f4fa9ea8a15", doNotHash: true, doNotCopy: true, hashAddressBar: false );</script>
</head>
<body>
<form id="form" runat="server">
<asp:ScriptManager runat="server"></asp:ScriptManager>
<a id="backtop"></a>
<script>
$('#buttonLogin').on('click', function (e)
$("#login_Box_Div").toggle();
$(this).toggleClass('class1')
);
</script>
<button id="buttonLogin" onclick="displayLoginBox()">Navigation</button>
<div id="login_Box_Div" style="display:none;">
<ul>
<li>Home</li>
<li>Software Developemnt</li>
<li>Web Developemnt</li>
<li>Mobile & Tablet Apss</li>
<li>Digital Marketing</li>
<li>Clients & Sectors</li>
<li>Contact Us</li>
<li>Blog</li>
</ul>
</div>
<div id="header">
<div class="inner">
<div id="logo"><asp:HyperLink ID="HyperLinkLogo" runat="server" NavigateUrl="~/"></asp:HyperLink></div>
<div id="socialMedia">
<div class="socialLeft"><a href="tel:+441245330360" title="Call Us on +44 1245 330 360"><i class="fa fa-phone"></i></a></div>
<div class="socialRight margin-right telno"><a href="tel:+441245330360" title="Call Us on +44 1245 330 360">+44 (0)1245 330 360</a></div>
<div class="socialLeft"><a href="mailto:interested@objectiveit.com" title="Drop us an Email at interested@objectiveit.com"><i class="fa fa-envelope"></i></a></div>
<div class="socialRight email"><a href="mailto:interested@objectiveit.com" title="Drop us an Email at interested@objectiveit.com">interested@objectiveit.com</a></div>
<div class="socialTiles">
<a class="socialMediaLnk linkedin" target="_blank" href="www.linkedin.com/.../objective-computing-limited"><i class="fa fa-linkedin"></i></a>
<a class="socialMediaLnk twitter" target="_blank" href="twitter.com/ObjectiveIT"><i class="fa fa-twitter"></i></a>
<a class="socialMediaLnk facebook" target="_blank" href="www.facebook.com/objectivecomputing"><i class="fa fa-facebook"></i></a>
<a class="socialMediaLnk googleplus" target="_blank" href="plus.google.com/.../posts"><i class="fa fa-google-plus"></i></a>
<a class="socialMediaLnk rss" target="_blank" href="94.175.238.174/.../objective-computing-blog"><i class="fa fa-rss"></i></a>
</div>
</div>
<div class="clearfix"></div>
<div id="nav" role="navigation"><asp:contentplaceholder id="Navigation" runat="server"/></div><%--<sf:SiteMenu ID="Menu" runat="server" Skin="Sitefinity" />--%>
<div class="clear"></div>
</div>
</div>
<script type="text/javascript">
$('#buttonLogin').on('click', function (e)
$("#login_Box_Div").toggle();
$(this).toggleClass('class1')
);
</script>
<div class="mobileNav">
<button id="buttonLogin" onclick="displayLoginBox()">Navigation</button>
<div id="login_Box_Div" style="display:none;">
<ul>
<li>Home</li>
<li>Software Developemnt</li>
<li>Web Developemnt</li>
<li>Mobile & Tablet Apss</li>
<li>Digital Marketing</li>
<li>Clients & Sectors</li>
<li>Contact Us</li>
<li>Blog</li>
</ul>
</div>
</div>
<div id="container">
<div id="containerInner">
<div id="page" role="contentinfo">
<div id="contentHeader"><asp:contentplaceholder id="headerPlaceholder" runat="server"/></div>
<div id="content"><asp:ContentPlaceHolder ID="contentPlaceholder" runat="server" /></div>
<div id="contentFooter"><asp:contentplaceholder id="footerPlaceholder" runat="server" /></div>
</div>
</div>
</div>
<div id="footer">
<div id="footerInner"><asp:contentplaceholder id="footerArea" runat="server" /></div>
</div>
</form>
</body>
</html>