Add attributes to layout DIV tags - best practice
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?
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
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.
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