In my web app, I have a page where I use autocomplete widget from jQuery UI.
I link to jQuery Mobileand jQuery UI CSS from this page.
link rel="stylesheet" href="Styles/jquery.mobile-1.0.1.min.css"
type="text/css" link rel="stylesheet" type="text/css"
href="Styles/ui-lightness/jquery-ui-1.8.16.custom.css"
when I do this, my jQuery Mobile data-icons dont show at all. I just see a black hole in place. The other pages where I refer to only the jQuery Mobile have no issues. they display the data-icons fine.
Any idea as to what I could be doing wrong?
Put the jQuery UI css link BEFORE the jQuery mobile css and should work.
Try linking your Javascripts in the followng order:
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>
If this doesn't help, try using the custom selector in your code :jqmData(), as it automatically incorporates namespaced data attributes into the lookup when they are in use. For example, instead of calling $("div[data-role='page']"), you should use $("div:jqmData(role='page')"), which internally maps to $("div[data-"+ $.mobile.ns +"role='page']") without forcing you to concatenate a namespace into your selectors manually specially for your data-icons
jQuery mobile shows the icon through a background-image and position CSS declaration, it's likely you have CSS that is overriding those styles.
To find your issue, use your debugger, Chrome's debugger is especially useful, under Computed Style look for the background-image/position style and the CSS class in conflict. Then you can see which class is winning and the actual value, if you see a black box you may very well just have a bad url to the image - which you can identify here as well by following the image link on the CSS style and seeing if that image really exists.
Also I don't see your < and > brackets around your CSS declaration, correct me if I'm wrong but I think you're supposed to link to each css file with a separate tag:
<link rel="stylesheet" href="Styles/jquery.mobile-1.0.1.min.css" type="text/css">
<link rel="stylesheet" type="text/css" href="Styles/ui-lightness/jquery-ui-1.8.16.custom.css">
Related
I've started developing to sitefinity CMS and I'm having some conflicts when applying styles and Jquery/javascript to Different Widgets.
I want each widget to have its own Style and its Own Jquery and Javascrip functions.
What's happening is that I'm applying in one widget preventDefautls to all its textboxes, and the other widgets' textboxes get affected too.
I'm also applying different css to the widgets and there are conflicts too.
Maybe the good practice is to use the same css to all widgets.
but still when I want to apply something like preventDefaults to all its textboxes, all my widgets get affected.
How can I avoid this?
Im developing ASP.NET MVC Widgets
and this is my widgets structure
<script src="#Url.Content("~/Scripts/jquery-1.11.3.js")"></script>
<link rel="stylesheet" href="~/Content/bootstrap.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.805/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.805/styles/kendo.bootstrap.min.css" />
<style>
//addicional style
<style>
<script>
//scripts...
</script>
<div>
Content...
</div>
Some advices about good practices, documentation, or code would be great.
For the styles, I generally wrap my custom widgets with a specific class, eg "imageGallery", and then in my main css (which I manage with grunt/compass), I make sure to target that class explicitly. This way, I can have global style settings, but then also style specific widgets with tweaks. And the nice thing with grunt/compass, is that you can have a separate physical css file for each widget's styles, but they all get bundled together for publishing.
For js, I typically inherit from the SF types, eg "SimpleScriptView", and then override the GetScriptDescriptors(), GetScriptReferences(), etc methods. This allows the scripts to be bundled with the ashx, and cuts down on risk of duplication, etc. It can be a little more complicated to follow the Sitefinity layout of the javascript classes at first, but you'll be consistent with the framework, so you can even decompile SF to get more examples when needed.
I have made my own stylesheet that I require to include on the Jenkins plugin.
<l:layout css="/plugin/myPlugin/css/jquery-ui.css">
<link rel="stylesheet" href="${rootURL}/plugin/myPlugin/jquery-ui.css" type="text/css" media="screen" />
Please advice me..
Thanks..
To link CSS files in Jelly files is deprecated, see jelly tags documentation:
This was originally added to allow plugins to load their stylesheets, but the use of thie
attribute is discouraged now. plugins should now do so by inserting <style> elements
and/or <script> elements in <l:header/> tag.
Please use inline css tags instead (code example).
Place your css file(s) under
/src/webapp/css
and reference them as ..
" href="${rootURL}/plugin//css/layout.css"
Using a <link> element with the $rootURL as noted above worked for me. The important thing that I noticed was to make sure to place the <link> element after <l:layout>. I had it right after the <j:jelly> tag originally and it wasn't able to render the ${rootURL}.
The <link> tag will be much cleaner than doing inline styling.
I am using JQuery themes in my html. ThemeRoller works correctly and applies right themes. However I want to change the default theme that it sets when Page loads. For example, I want to use the 'Start' theme when html loads. Can anybody please help?
You can use the "loadTheme" option like that:
$("#themeSwitcher").themeswitcher({
"loadTheme": "Start"
});
You need to download the generated CSS and images from the ThemeRoller and reference the CSS in your page.
As SLaks suggests, you need do the following:
Download a new theme (jquery theme downloader)
Unzip the files and put them into your website (south-street theme gets copied to: MyWebproject\Content\themes\south-street)
Make a reference in your html to the css:
<link href="Content/themes/south-street/jquery-ui-1.8.13.custom.css" rel="stylesheet" type="text/css" />
I am loading jQuery UI as
google.load("jqueryui", "1.8.6");
from the Google CDN
And I want the theme UI Darkness to be associated with it.
Any other methods other than
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-darkness/jquery-ui.css" />
Something like
google.load("jqueryui", "1.8.6","{theme: 'UI-Darkness'}");
So far google loader doesn't support this syntax for jqueryui, you can check the documentation here.
http://code.google.com/intl/zh-CN/apis/loader/#GoogleLoad
I think refer to the link in a tag is still the best way in your case.
I have a webpage with header footer and all. when i print that page , i need to print with custom header and footer and specific page size also.. what all should i take into effect for this..
which one is better. by using php or using jquery plugins. i want more control on page layout
you should use CSS maybe, and a special stylesheet for printable versions :
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
If you have your data using PHP from a DB you can use FPDF