How to remove css Styling from Jquery Mobile 1.45
I use link tag , A href
Try set this rel="external" data-ajax="false" data-role="none" ,but Not working.
Link ME!
It is a basic style, not really a data-role enhancement.
You have to override the css like this JsFiddle :
a{
text-decoration:none!important;
color:black!important;
font-weight:normal!important;
}
Note : data-ajax=false is more about how the transition is going to happen as someone explained it here
More about data-ajax=false and rel=external on the documentation
Related
How can I completely disable jquery mobile styling for certain container?
I am using data-enhance="false" for container along with javascript code:
$(document).bind("mobileinit", function() {
$.mobile.ignoreContentEnabled = true;
});
Yet some jquery mobile styling remains, for example link color:
.ui-page-theme-a a{
color: #38C;
font-weight: 700;}
I had to overwrite these css rules manually, it is pretty cumbersome.
if you have less CSS to overwrite, then overwriting same classes in our css with !important is best way.
If you are overwriting many classes then don't include jQuery mobile theme CSS just use jQuery mobile structure CSS as its requires for some functionalities such as transition and all.
One more option modify Jquery theme CSS as requires means remove unwanted class as jquery mobile is open source you are good on this.
I have a page with handsontable and the jquery UI datapicker component ?
By themselves, they work fine.
Jquery UI datepicker, http://jsfiddle.net/7Bvap/355/
$( "#datepicker" ).datepicker();
Handsontable , http://jsfiddle.net/ngpxZ/
But when I put them together,
the datepicker doesnt work (as in the calendar doesnt pop out)
http://jsfiddle.net/cuj3V/
I found a similar problem here,
https://github.com/warpech/jquery-handsontable/issues/498
For page with handsontable as workaround I'm reloading jquery ui css after handson table css and works fine.
So I placed the handsontable.css before the jqueryui.css. But still no avail. Anyone can help ?
Looks like there was a problem with the jsFiddle including the scripts/styles in the css section. You should not need to use the CSS section to include external files. Use the "External Resources" menu instead
external resources
Datepicker and handsontable jsFiddle
I have some jquery mobile pages with custom css but it takes only effect when i reload the page and not at first load.
The css file is called in all sites with:
<link rel="stylesheet" href="http://mobile.kerger-mg.de/rezepte-suche/stylesheet/style.css" />
Thanks in advance for any suggestions and your time.
You must load all css the first time, in other words all pages must have the same inclusions,
don't forget that jqm is based on ajax navigation...
try to link the page in question in this way:
<a href="PAGE_WITH_PROBLEM_CSS.html" rel="external">
in this way, the landing page (PAGE_WITH_PROBLEM_CSS.html) is reloaded.
:)
I am using jquery-mobile for 1 of my applications in Rails 2.3.4.
The following code
li data-icon="plus" data-iconpos="right"><%= link_to "Post", [my parameters] %>
does not show the data icon, "plus". I am wondering why.
Any ideas please.
The original question is a little unclear to me, but from the comments, it looks like you're trying to find out how to change the icon in listview from the standard arrow.
To do this, add a data-split-icon property to the ul tag - setting it to one of the icon names from http://jquerymobile.com/demos/1.0a3/docs/buttons/buttons-icons.html
For example:
<ul data-role="listview" data-inset="true" data-split-icon="star">
<li><h3><a>list item 1</a></h3><a>link title</a></li>
<li><h3><a>list item 2</a></h3><a>link title</a></li>
<li><h3><a>list item 3</a></h3><a>link title</a></li>
</ul>
Instead of the standard arrow icon, that gives you a list with pretty stars.
Hope that helps
I had the same problem myself - it is due to the fact that Rails uses a 1.4 version of jQuery by default - you need to be using jQuery 1.5
If you want to get started quickly then use the jQuery CDN hosted files:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js">
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" />