How to Get Foundation and Other Scripts to Read

Posted by Community Admin on 05-Aug-2018 15:51

How to Get Foundation and Other Scripts to Read

Sitefinity - Front- & Back-End Development

All Replies

Posted by Community Admin on 06-Feb-2017 00:00

Hi everyone,

I am trying to transfer an HTML/CSS/JS prototype into Sitefinity. The theme is setup with the CSS reading in correctly. The page template is also reading correctly via the .master page I created. However, some functionality is not reading correctly.

I have attached a file that shows what is not working. This includes: a megamenu clicking functionality, off-canvas menu clicking functionality, and accordian clicking functionality--all the clicking! :) All of this is built under the Zurb Foundation base.

Other notes:

- Sitefinity Feather is installed, and Foundation is there; but I am using a custom .master page that is Foundation-based. I am not using the Foundation grid in page templates via Sitefinity Admin.

- I have a no-conflict script going, as described by Sitefinity. I'm not confident I am using it correctly, but it looks to be following those instructions. I use this no-conflict on our current live site okay. It's not working in this new site development I'm building though.

This is the only thing in the way of my continuing development. Any help would be greatly appreciated. I should also note that I am not a .NET guru, so assistance with terminology is also appreciated if it gets to be a complex fix in this language. 

Thank you in advance for your time and help.

Maria

Posted by Community Admin on 08-Feb-2017 00:00

Hi everyone,

I have reviewed other posts related to this topic in the forums, but I feel like there are mixed approaches. Below is my current code for implementing scripts. Is this going in the right direction? I still can't get the scripts to read though...

<%@ Master Language="C#" AutoEventWireup="true" %>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.PublicControls" TagPrefix="sf" %>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
 
<!doctype html>
<html class="no-js" lang="en">
<head id="Head" runat="server">
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8">
    <title>Inside Page</title>
 
    <link rel="stylesheet" href="~/Sitefinity/WebsiteTemplates/SchoolcraftCollege/App_Themes/SCTheme/Global/stylesheet.css">
    <link href="https://fonts.googleapis.com/css?family=Jaldi:400,700&subset=latin-ext" rel="stylesheet" />
    <script type="text/javascript">sc = jQuery.noConflict(true);</script>
 
</head> 
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
 
    <sf:JavaScriptEmbedControl
        runat="server"
        ID="jQueryLink"
        ScriptEmbedPosition="Head"
        Url="Sitefinity/WebsiteTemplates/SchoolcraftCollege/App_Themes/SCTheme/Global/js/sc.js">
    </sf:JavaScriptEmbedControl>

Posted by Community Admin on 09-Feb-2017 00:00

Another update:

I have stripped down my code to get the super basic to work. I have an inline JavaScript that represents the problem I have been having in my original post.

Inline, I can get this script to work, my code below:

<%@ Master Language="C#" AutoEventWireup="true" %>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.PublicControls" TagPrefix="sf" %>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
 
<!doctype html>
<html class="no-js" lang="en">
<head id="Head" runat="server">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8">
    <title>Inside Page</title>
</head> 
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
 
    <button onclick="myFunction()">Try it</button>
    <p id="demo"></p>
 
    <script>
        function myFunction()
            document.getElementById("demo").innerHTML = "This Works!";
        
    </script>
 
</form>
</body>
</html>

 

But - it works and then disappears in a second. The script doesn't stick. 

But - if I change the <button> to be a <div> instead, it works.

What is going on with the <button> tag? I don't understand.

 

 

This thread is closed