Issues using JQuery on Masterpage

Posted by Community Admin on 21-Aug-2014 00:00

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

Posted by Community Admin on 22-Aug-2014 00:00

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

Posted by Community Admin on 26-Aug-2014 00:00

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

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items

Posted by Community Admin on 01-Sep-2014 00:00

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>

This thread is closed

All Replies