I have an element:
<td colspan="3" data-enhance="false">
<select id="CandidatesListBox" size="9" onchange="MoveToGeocode()" style="width: 100%" class="candidatesList" data-role="none"></select>
</td>
I want this element to have no jQuery Mobile styles. The problem is that I fill this item dynamically, and jQuery mobile will ignore all data-enhance="false" tags then adding dynamic elements through javascript. JQuery Mobile will also transform the control, so jQuery that would work on the item (.add(), for example) will not. I need to make a dynamic element with no jQuery mobile styles or elements. Is this possible?
Edit
I have also tried to disable all selects from using JQM, but get the same issue:
$(document).bind('mobileinit', function () {
$.mobile.keepNative = "select"; /* jQuery Mobile 1.4 and higher */
});
JQM adds styles and render them when you specify the JQM css file. Once it is called and unless you override the CSS by your own applying styles for a particular element cannot be stopped. Because JQM itself wrapps our elements with their elements. So as a solution get the element and remove additional class names added by JQM from the element. Also you will need to remove wrapping elements too.
Related
I have an LI with A tag in it.
<li title="LI TEXT" id="test">
ELEMENT WITH HREF HREF
</li>
I want to create jquery tooltip for the LI and default tooltip for its child elements. But this does it both for the jquery elements for LI and its childs.
$("#test").tooltip();
http://jsfiddle.net/k45emuhg/
Okay, what you've described is quite easy with the items option. Simply include a selector restriction for the items you want to show their tooltips, e.g. the same as the original selector that you're calling .tooltip() on:
$("#test").tooltip({items: "#test"});
The question doesn't make this explicit, but you probably also want to show only one (rather than 2) tooltips when you hover over the children element. To do that, you can disable and reenable the parent's tooltip on the mouseenter and mouseleave events. JQuery provides a nice shortcut for that with the hover function:
$("#test a").hover(function() {
$(this).parent().tooltip("disable");
}, function() {
$(this).parent().tooltip("enable");
});
Note that you can use any relevant selector, not necessarily $(this).parent(), depends on how your HTML is structured
Here's the example fiddle updated: http://jsfiddle.net/957r8x51/
I'm using jQuery mobile and need it to not apply jQuery to a specific form element. I can see in the jQuery it does target this specific element. It applies an effect I don't want applied.
Is there some way to do this? I have tried using style= inside the element but the jQuery seems to override this.
Add the attribute data-role="none" to the dom element you don't want enhanced.
I am trying to add some buttons into my jquery mobile page via ajax.
Straight injection into the page doesnt style it at all.
Trying this also does not work (doesnt get styled)
$('Next').appendTo('#page_btns').trigger('create');
Here is the code for its div
<div data-role="controlgroup" data-type="horizontal" id="page_btns"></div>
How can I add/remove grouped buttons via AJAX using jquery mobile?
EDIT: Calling .trigger('create') on the controlgroup div does style the buttons, but they are set to single buttons rather then the grouped style
Trigger create event on any div enclosing the controlgroup.For eg:data-role=content div.
Add the following line of code after you append buttons to div
$('div[data-role=content]').trigger('create');
Is it possible to use the jQuery UI library to apply rounded corners to an element on the page? For example, I've applied some CSS to LI tags so that they look more like buttons and float next to each other. Nothing happens when I apply the following classes to the LI: ui-widget ui-state-default ui-corner-all.
Is it that the styles only apply to jQuery UI elements? Thanks.
With jQuery you can apply directly the round corners to your element. You don't need to use jquery ui for that.
$("#elementYouWant").css({
"-moz-border-radius": "5px"
"-webkit-border-radius": "5px",
"-border-radius": "5px"
});
I'm using the jquery datatables plugin and added some custom jquery-ui buttons to the table footer.
To use the datatables plugin with jquery-ui theming the "bJQueryUI" option has to be turned on.
So far no problem, but now I added the jquery-ui themeroller to my page.
When I change the theme, all the jquery-ui components change their style accordingly, just like the datatable, except for the buttons within the datatable.
I found out that it actually is a css-priority issue: the new styles applied by the themeroller got lower priority than the original styles, so these buttons never change their look.
As the jquery-ui components and the datatables plugin both are quite popular I thought I would find someone with similar problems, but had no luck so far..
That's how the initialization of the datatable and the creation of the custom buttons are done:
<table id="DataTable">
// ...
</table>
<script type="text/javascript">
$(function ()
{
var oDataTable = $('#DataTable').dataTable({
"aaData": result.aaData,
"bPaginate": false,
"bJQueryUI": true,
"bInfo": true,
"sDom": '<"fg-toolbar ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"fg-toolbar ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ipT<"toolbar">>',
"oTableTools":
{
"sRowSelect": "single"
}
});
// add buttons
$("div.toolbar").html('<button id="AddButton">New element</button>');
$("#AddButton").button().click(function () { /* ... */ });
// add more buttons...
}
</script>
Here's a screenshot of the actual html structure and applied css-styles:
http://i.stack.imgur.com/vbAuy.jpg
Any hint is greatly appreciated.
I found the solution myself:
If I add the "ui-widget-content" CSS-class to the toolbar-container div, the styles get applied correctly.
To remove the styles which that class applies (border and background), I added a more specific CSS style to remove these:
div.toolbar
{
float: right;
border: 0;
background: 0;
}
It's important here to use "div.toolbar" not ".toolbar", otherwise the ui-widget-content styles get applied.
Now the toolbar container doesnt get unwanted styles applied and the buttons inside correctly get the selected theme.
Maybe that's helpful for someone using the themeroller with custom jquery-ui buttons in datatables.
IF you want the theme to control the style of the button, then comment out the CSS that is overriding the theme roller style.
If they are themed buttons, then you will have to remove your CSS to allow the theme to take affect. Themes are made to be easily over-writable so you can add customization, only it sounds like you no longer want the customization.
Not sure if you had this problem but there are two separate css classes with datatables. Which one to use depends on if you have bJQueryUI:true or bJQueryUI:false