Integrating and using jQuery Mobile - Sitefinity - Front- & Back-End Development

All Replies

Posted by Community Admin on 01-Oct-2012 00:00

Is there any guidance on integrating and using jQuery Mobile on all Sitefinity pages? Can I simply add the jQuery Mobile tags to the head tags of all my pages? Is there a way to simply do this on my Sitefinity Master Pages (without using Visual Studio Master Pages)?

Thanks.

Posted by Community Admin on 04-Oct-2012 00:00

Hi,

You can load jquery mobile on sitefinity created page templates without creating master page in visual studio by going to Design->Page templates and on an already created template or creating new one place javascript widget that will allow you to load jquery mobile on one javascript widget and choose to embed the script in the head of the page, body or where the widget location on the page is.
Place additional javascript widgets to write the jquery script into that will be using the loaded jquery mobile.

To insert meta tag into the page <head> without using master page go to the page and expand Actions menu and select Title & Properties then find the textbox Html to be included into the <head> tag.

Kind regards,
Stanislav Velikov
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 28-Oct-2012 00:00

I was able to successfully integrate jQuery Mobile using the steps you provided. This is what I did:

1) Added a CSS Widget that pointed to the jQuery Mobile CSS File
2) Added a JavaScript Widget that pointed to the supported jQuery version for jQuery Mobile
3) Added another JavaScript Widget that pointed to the jQuery Mobile file
4) Added the ViewPort Meta Tag to the relevant Page in the Advanced Settings-->Head

However, once I applied all of this content, the jQuery Mobile CSS messed up the CSS styles contained in the original theme for the site. Particularly, the background color was cut off from filling the entirety of the screen and the fonts did not display correctly.

I tried using FireBug to do some overrides for the styles, but I am not familiar enough with how Sitefinity App_Themes CSS and styles would normally conflict with jQuery Mobile CSS and styles.

Is there any guidance on how to resolve these styling conflicts between the 2 different CSS locations?

Please advise.

Thanks.

Posted by Community Admin on 29-Oct-2012 00:00

Hey Samir,

The CSS Widget you used in step 1 is meant for styles to be applied AFTER the the theme files have been loaded. That's why you're seeing your jQueryMobile.css overwriting styles instead of acting as a 'reset'.

The App_Themes folder is nothing other than a grouping of .css files in a somewhat weird place...

The Global folder holds all .css files that will always be loaded for your site if you apply the theme, the Styles folder, is just a folder so you can reference css files you don't always want to be loaded.

So you can copy/paste your jQueryMobile.css file into the Theme's global folder and it will always get loaded. To control the order in which the .css files get loaded, there is a file called cssLoadOrder.xml which you need to edit and look something like this:

<?xml version="1.0" encoding="utf-8" ?>
<cssFiles>
<file>sfreset.css</file>
<file>jquerymobile.css</file>
<file>sfproject.css</file>
</cssFiles>

Remove the css widget and after that, everything should load in proper order and work.

Jochem.

This thread is closed