Add attributes to layout DIV tags - best practice

Posted by Community Admin on 04-Aug-2018 09:52

Add attributes to layout DIV tags - best practice

All Replies

Posted by Community Admin on 01-May-2015 00:00

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?

Posted by Community Admin on 06-May-2015 00:00

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
 

Posted by Community Admin on 06-May-2015 00:00

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:

www.sitefinity.com/.../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.

 

Posted by Community Admin on 08-May-2015 00:00

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
 

This thread is closed