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

Forums / Developing with Sitefinity / Add attributes to layout DIV tags - best practice

Add attributes to layout DIV tags - best practice

4 posts, 0 answered
  1. David
    David avatar
    114 posts
    Registered:
    19 Jul 2012
    01 May 2015
    Link to this post

    I want to use JQuery and the Parallax addon.  I've added the following to my MasterPage:

    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" >
    <sf:ResourceLinks ID="ResourceLinks" runat="server">
    <sf:ResourceFile JavaScriptLibrary="JQuery"></sf:ResourceFile>
    <sf:ResourceFile Name="Telerik.Sitefinity.WebsiteTemplates.PAD4UMain.jquery.parallax.1.1.3.js" Static="True" />
    </sf:ResourceLinks>

    I think this is correct and that I have followed best practice in where to the JS files, but any corrections much appreciated.

    The problem is that the Parallax JS file, requires that I add:

    data-parallax="scroll" data-image-src="/path/to/image.jpg"

    attributes to the DIV tag to use the Parallax effect.  However, the DIVs are layout DIVs so I guess I need to do this programmatically, but what is the best way to do this?

  2. Sabrie Nedzhip
    Sabrie Nedzhip avatar
    534 posts
    Registered:
    06 Dec 2016
    06 May 2015
    Link to this post
    Hello David,

    The way you have added the scripts to your master page seems correct. You may also refer to the following article for more details about including css, javascript and jQuery resources in Sitefinity.

    As your question about adding attributes to the div tag in the layout controls, what I can suggest is that you create your custom layout controls using Thunder and add the desired attributes there. You may checkout the following resources on how you can achieve this:

    1. Creating layout widgets
    2. Creating Custom Layout Widgets with Sitefinity Thunder - Video

    Then when you open the page in edit mode you will be able to drag your custom layout control on a placeholder and then drag a widget on it.

    When creating your custom layout widgets you can use the standard Sitefinity layout widgets as a guideline as described in the following articles:

    1. Custom layout widgets
    2. Guidelines
     
    Regards,
    Sabrie Nedzhip
    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
     
  3. David
    David avatar
    114 posts
    Registered:
    19 Jul 2012
    06 May 2015 in reply to Sabrie Nedzhip
    Link to this post

    Thanks Sabrie,

    That's just what I need to do - I thought creating a custom layout would be painful, but the video seems pretty easy to follow.

    However my JS scripts are not working, probably because I missed the AssemblyInfo attribute.  However when I add AssembyInfo attribute it stops everything working as in this post:

    http://www.sitefinity.com/developer-network/forums/developing-with-sitefinity-/server-error-in-'-'-application

    Any help much appreciated.  The manual doesn't seem to use the SitefinityWebApp project for it's embedded resources, nor the standard directory structure, which makes it difficult to see how this is actually achieved.

     

  4. Sabrie Nedzhip
    Sabrie Nedzhip avatar
    534 posts
    Registered:
    06 Dec 2016
    08 May 2015
    Link to this post
    Hi David,

    In the last post of the forum thread which you have referred to, the sample is using the SitefinityWebApp namespace. Please take a look at the sample there and try to follow the same approach on your side.

    Regards,
    Sabrie Nedzhip
    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 posts, 0 answered