+1-888-365-2779
Try Now
More in this section

Forums / General Discussions / Issues using JQuery on Masterpage

Issues using JQuery on Masterpage

4 posts, 0 answered
  1. Andy
    Andy avatar
    5 posts
    Registered:
    26 Nov 2013
    21 Aug 2014
    Link to this post

    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: http://jsfiddle.net/utaxK/391/ 

    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

  2. Martin
    Martin avatar
    22 posts
    Registered:
    27 Sep 2013
    22 Aug 2014 in reply to Andy
    Link to this post

    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

     

     

  3. Nikola Zagorchev
    Nikola Zagorchev avatar
    424 posts
    Registered:
    24 Nov 2016
    26 Aug 2014
    Link to this post
    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
     
  4. Andy
    Andy avatar
    5 posts
    Registered:
    26 Nov 2013
    01 Sep 2014
    Link to this post

    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="http://w.sharethis.com/button/buttons.js"></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="http://www.linkedin.com/company/objective-computing-limited"><i class="fa fa-linkedin"></i></a>
                                <a class="socialMediaLnk twitter" target="_blank" href="https://twitter.com/ObjectiveIT"><i class="fa fa-twitter"></i></a>
                                <a class="socialMediaLnk facebook" target="_blank" href="https://www.facebook.com/objectivecomputing"><i class="fa fa-facebook"></i></a>
                                <a class="socialMediaLnk googleplus" target="_blank" href="https://plus.google.com/+Objectiveit/posts"><i class="fa fa-google-plus"></i></a>
                                <a class="socialMediaLnk rss" target="_blank" href="http://94.175.238.174/feeds/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>

4 posts, 0 answered