More in this section

Forums / Developing with Sitefinity / Integrating and using jQuery Mobile

Integrating and using jQuery Mobile

4 posts, 0 answered
  1. Samir Vaidya
    Samir Vaidya avatar
    261 posts
    Registered:
    05 Feb 2005
    01 Oct 2012
    Link to this post
    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.
  2. Stanislav Velikov
    Stanislav Velikov avatar
    1113 posts
    Registered:
    18 Sep 2017
    04 Oct 2012
    Link to this post
    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
  3. Samir Vaidya
    Samir Vaidya avatar
    261 posts
    Registered:
    05 Feb 2005
    28 Oct 2012 in reply to Stanislav Velikov
    Link to this post
    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.
  4. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    29 Oct 2012 in reply to Samir Vaidya
    Link to this post
    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.
4 posts, 0 answered