More in this section

Forums / Developing with Sitefinity / Specifying StyleSheet and JS files in Master Page

Specifying StyleSheet and JS files in Master Page

9 posts, 0 answered
  1. Nitin
    Nitin avatar
    51 posts
    Registered:
    14 Aug 2007
    13 Sep 2007
    Link to this post
    Hi.

    I have the following external css and js files specified in my master page:

    1 <head id="Head1" runat="server">  
    2     <title>Untitled Page</title>   
    3     <link rel="stylesheet" href="../Styles/SomeStyles.css" /> 
    4     <link rel="stylesheet" href="../Styles/sIFR-screen.css" type="text/css" media="screen" /> 
    5     <link rel="stylesheet" href="../Styles/sIFR-print.css" type="text/css" media="print" /> 
    6  
    7     <script src="../Scripts/sifr.js" type="text/javascript"></script> 
    8     <script src="../Scripts/sifr-debug.js" type="text/javascript"></script> 
    9     <script src="../Scripts/sifr-title.js" type="text/javascript"></script> 
    10     <script type="text/javascript">AC_FL_RunContent = 0;</script> 
    11     <script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script> 
    12 </head> 

    The issue is: The user control placed on the master page can't seem to have access to the javascript functions. I tried editing the template and added all the JS and css files using "Properties" tab and then adding "link" using "Add a tag" but still can't seem to make it work.

    Any help is appreciated.

    Thanks

    Nitin
  2. bnye
    bnye avatar
    332 posts
    Registered:
    22 Sep 2005
    13 Sep 2007
    Link to this post
    Aren't those page relative paths? I don't think they operate like CSS paths where they are relative to the file...but I could be wrong.

    We use a simplified approach. We always use website root paths in Sitefinity. You may have more luck or have a specific reason for doing something else.

    If my project is the default website in IIS:

    <link rel="stylesheet" href="/Styles/SomeStyles.css" />


    And VirtualDirectory is the name of the virtual directory:

    <link rel="stylesheet" href="/VirtualDirectory/Styles/SomeStyles.css" />

    To avoid these problems we also always work on SF projects as the default directory. That prevents you from having to change anything when you deploy from a virtual directory to a default website.

    Sincerely,

    Ben
  3. Nitin
    Nitin avatar
    51 posts
    Registered:
    14 Aug 2007
    14 Sep 2007
    Link to this post
    Bnye,

    I changed the links to use Asp.net ~ for virtual directory. Here is the updated code in my master page:

    <head id="Head1" runat="server">  
        <title>Untitled Page</title>   
        <link rel="stylesheet" href="~/Styles/SomeStyle.css" /> 
        <link rel="stylesheet" href="~/Styles/sIFR-screen.css" type="text/css" media="screen" /> 
        <link rel="stylesheet" href="~/Styles/sIFR-print.css" type="text/css" media="print" /> 
     
        <script src="~/Scripts/sifr.js" type="text/javascript"></script> 
        <script src="~/Scripts/sifr-debug.js" type="text/javascript"></script> 
        <script src="~/Scripts/sifr-title.js" type="text/javascript"></script> 
        <script type="text/javascript">AC_FL_RunContent = 0;</script> 
        <script src="~/Scripts/AC_RunActiveContent.js" type="text/javascript"></script> 
    </head> 
     

    That does not seem to help either. Here's how I further diagnosed the issue:

    For testing, I created a link on master page that invokes a javascript function (contained in one of the .js files). When I click that link, I get a runtime error but when I add that Javascript function in Master page itself, the code works. That clearly shows that javascript functions contained in .js files are not accessible to the page.

    The same issue applies to CSS files too. At runtime, the code applies css class attributes in a user control in Page_Load method of that user control but the control is not rendered according to the styles.

    Code snippet:
        protected void Page_Load(object sender, EventArgs e)  
        {  
            if (!base.IsPostBack)  
            {  
                this.SetSelectedMenuStyle(); // Set selected class style to show the clicked menu option  
            }  
        }  
     


    I created a web site solution in visual studio and used the same identical code. The code works as expected there. Is there anything different that I need to do to make it work in a Sitefinity projects?

    Thanks!

    Nitin
  4. bnye
    bnye avatar
    332 posts
    Registered:
    22 Sep 2005
    14 Sep 2007
    Link to this post
    I don't believe you can use the "~/" without the runat="server".

    So for the css link you can just add the runat=server.

    for the javascript I believe you need to resolveurl like

     

    <script src='<%= this.ResolveUrl("~/scripts.js") %>' type='text/javascript'></script>


    Sincerely,

    Ben
  5. bnye
    bnye avatar
    332 posts
    Registered:
    22 Sep 2005
    14 Sep 2007
    Link to this post
    I'm not sure if you can use the resolveurl technique inside the head tag. You may have to move that into the form. I'm not 100% on this as it's been a while.

    Sincerely,

    Ben
  6. Nitin
    Nitin avatar
    51 posts
    Registered:
    14 Aug 2007
    18 Sep 2007
    Link to this post
    Bnye,

    That did not work. I ran out of time before I could figure out how to specify the correct path :(.

    So, I ended up creating a code-behind file for the Master page and writing some server side code for including the .js files:

        protected void Page_Load(object sender, EventArgs e)  
        {  
            if (!base.Page.ClientScript.IsClientScriptIncludeRegistered("sifr-Script"))  
            {  
                base.Page.ClientScript.RegisterClientScriptInclude("sifr-script", base.ResolveUrl("~/Scripts/sifr.js"));  
            }  
        }  
     

    That way, the issue with relative/absolute path went away completely. If I end up finding out a way to specify path in markup code, I will post it here.

    Thanks

    nG
  7. bnye
    bnye avatar
    332 posts
    Registered:
    22 Sep 2005
    18 Sep 2007
    Link to this post
    Glad to hear you found a work-around.
  8. MB
    MB avatar
    302 posts
    Registered:
    09 Jan 2005
    22 Sep 2008
    Link to this post
    I know this is an old thread, but I stumbled on it, so I guess others also will.

    FWIW, The way I resolved this requirement for my customer's site was to use the asp scriptmanager, specify script resources to load... and let it resolve the ~/ reference.

    <body> 
     
        <form id="form1" runat="server">  
     
            <asp:scriptmanager id="ScriptManager1" runat="server">  
             <scripts> 
                <asp:scriptreference name="" Assembly="" Path="~/MyPath/MyFile.js"></asp:scriptreference> 
             </scripts> 
            </asp:scriptmanager> 
     

    I have since implemented the RadScriptManager, but that's not a requirement for this solution.
  9. bnye
    bnye avatar
    332 posts
    Registered:
    22 Sep 2005
    22 Sep 2008
    Link to this post
    Oh sure...take advantage of new technology. JK. Thats the way I would recommend too.

    Thanks,

    Ben
Register for webinar
9 posts, 0 answered