i can't use the jquery UI autocomplete on magnific popup form. like the below URL. demo URL of jquery UI
http://jqueryui.com/autocomplete/
have to add a z-index property to .ui-autocomplete class. in magnific popup the form content z-index property was 1045, so we have to add z-index on .ui-autocomplete class in jqueryui css.
Related
I'm following the modal dialog example on jQuery UI website but not having any luck getting the dialog to be displayed. The example creates and opens the dialog from a button-cllick but I'm trying to launch it from a click on a TD element. Is that possible?
Assume that your td element has clickable_td id and also your dialog block has dialog id, So you can attach click event handler for td emelent with the on() function object and show your dialog block with dialog() function object while clicks captured like this:
$('#clickable_td').on('click',function(){$('#dialog').dialog();});
NOTE: The default jQuery z-index is 100, if your layouts' elements have higher value of it, try this instead:
$('#clickable_td').on('click',function(){$('#dialog').dialog();$('div.ui-front').removeClass('ui-front').css({zIndex: "10000"})});
This code basically creates a block UI. Instead of using jquery block UI dialog, you can use jquery blockUI plugin. You can refer the link to understand the code.
http://www.malsup.com/jquery/block/#demos
In the below example #yourtd_id is the id of your td and #your_div is the div which you want to make as modal. When the td is clicked .blockUI is a class which display your_div on the screen. Now it like a modal dialog. To come out of the modal dialog insert a button on #your_div and give id as #cancel_btn. When the #cancel_btn is clicked .unblockUI() unblocks the UI i.e unblocks the modal dialog.
$(document).ready(function() {
$('#yourtd_id').click(function() {
$.blockUI({ message: $('#your_div') });
//keep a cancel button on #your_div. for eg: consider its id as #cancel_btn
});
$('#cancel_btn').click(function(){
$.unblockUI();
});
});
This will work.I hope this will help you.
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');
I am using jquery ui tabs
Inside a tab i want to inset an autocomplete combobox
When the combobox is outside the tabs it works perfect, but when inside the tabs it doesnt look good.
Here is a screenshot:
Any ideas how to solve this issue?
solved it. i had a class for span inside the tabs ( #tabs span {......} ) –
I need to format multiple containers (div) in a web page to look like a jquery-ui dialog.
The divs should automatically change if I change the theme.
So far I'm applying a jquery-ui tab to the div, but this don't have the same title bar and I need to add a lot of html for each div
Thanks In Advance
Just use the same css as jQuery UI and apply it to your divs.
Examples:
http://jsfiddle.net/Fyj7L/
http://jsfiddle.net/Fyj7L/1/
http://jsfiddle.net/Fyj7L/2/
I have jQuery Datepicker inside my form.
My problem is after I have clicked inside textfield, datepicker shows too big.
How can I resize datepicker?
Check for solution in this thread
I quote -
add in a stylesheet loaded after the ui-files
div.ui-datepicker{
font-size:10px;
}