I need to be able to dynamically replace the radio buttons in a controlgroup. I've come up with a solution, but I'm wanting to make sure I'm going about it the right way. Here's a jsFiddle.
Should I be manually modifying the classes after calling .checkboxradio() on each of the newly-created radio buttons, or is there a method in jQuery Mobile somewhere that will help me accomplish this?
Please note that the jsFiddle here works as I need it to. I'm asking if there's an easier (or more idiomatic) way to update the dynamically-created radio buttons' visual styles to conform to the controlgroup style.
Content should be added to the DOM before jquery mobile enhancement, for instance by binding to the page beforecreate event instead of the page pagebeforeshow. This way your content will be properly enhanced.
As for dynamic content, you can enhance it as soon as it has been inserted in the DOM. See this modified fiddle.
try this:
$('#creneauListPage #fieldcontain input').checkboxradio();
$('#creneauListPage #fieldcontain .ui-btn').removeClass('ui-btn-corner-all');
$('#creneauListPage #fieldcontain .ui-btn:first').addClass('ui-corner-top');
$('#creneauListPage #fieldcontain .ui-btn:last').addClass('ui-corner-bottom ui-controlgroup-last');
Related
I'm using vaadin-combo-box and I have a problem. I have no clue how to customize look and feel of scrollbars for the dropdown. I read about styling parts and I know how to do it but this seems to be impossible. Cant figure out the way to select #scroller element because it has been design not to be a "part" to style. However that is the only way I can think of to apply custom style to dropdown scrollbars. How can that be accomplished?
Thanks in advance for help.
#Update
Turns out that as of today there is no way of having customized styling on scrollbars for vaadin-combo-box component. Element responsible for scrolling resides inside contents shadow DOM and is inaccessible from outside nor its going to inherit style implemented on the parent part [part="content"]
The dropdown part is called vaadin-combo-box-overlay, see: https://vaadin.com/components/vaadin-combo-box/html-api/elements/Vaadin.ComboBoxOverlayElement And it is available for styling.
This allows to style the dropdown to some extent, but there is additional shadow root, that prevents to apply e.g. ::-webkit-scrollbar styles on #scroller element.
So the last option would be to make a copy of the vaadin-combo-box html file in right place in frontend directory. It happens so that that file will be used instead of the one coming from webjar. Then you can edit that html file directly. Of course this means that if there are changes in future versions of vaadin-combo-box, you need to copy again, re-apply changes
I have some experience with GWT . In GWT , widget.setVisible() method will add style="display:none" style to widget. But component of vaadin wouldn't . I checked with firebug , I can't see my component while set component's visible to false. Why ?
I think that should be also have hidden style instead of not containing. I reallize that vaadin's codes were server side. But sometimes , if I would like to just hidden (set style display to none) , has there anyway to accomplish this instead of using css ?
I don't understand concept of what different between without adding component and setVisible(false) ?
As you already noticed, an invisible component is not transferred from server to browser, and from browser's point of view the component doesn't exist. This approach has to benefits:
Less data to transfer from server to client
Security: User cannot inspect invisible components' generated HTML with tools like Firebug because those doesn't exist on the browser.
So basically from browser's point of view it's the same thing that you don't add it to the UI at all. But usually it's just easier to toggle component's visibility instead of adding and removing it from its parent.
If you want to hide components with CSS, you can do it by defining your own theme and adding a style for that there. Then just apply the style for the component you want to hide by using the addStyleName method.
SETVISIBLE Sets the visibility of the component.
Visible components are drawn in the user interface, while invisible ones are not. The effect is not merely a cosmetic CSS change - no information about an invisible component will be sent to the client. The effect is thus the same as removing the component from its parent.
So as the documentation says invisible components are not not visible.
I am trying to swap two TD elements in table on Drag&Drop. I found this plugin Swappable and it works in some way. But when I drag some element the cursor change position to some specific value. I do not want changing cursor position. But when I rework this plugin it stops work.
Does anyone have experience with it or know about any other plugin?
Thanks,
Zbynek
Usually I use the jQuery sortable. It does pretty much want you want. You can use it in a table too.
Then I do my stuff (including ajax updates) in a function setted in the receive event
Did you try the JQuery Sortable() option?
See http://jqueryui.com/sortable/#display-grid
I'm trying to add a delete button to a custom div. However when the page is loaded, the jquery mobile button does not take the format of jquery and displays it like a hyperlink.
var currDelButton = $("<a>").attr("href","#").attr("data-role","button").attr("data-icon","delete").attr("data-iconpos","left").text("حذف");
anyone has an idea about this issue?
Best Regards
Ali
If you are adding the button after the page is loaded then you need to refresh the element for example $("#mybutton").button(); should work.
here is a working example with the code you provided: http://jsfiddle.net/ashanova/RQVd8/1/
call the .page for the main wrapper where new buttons are added.
$("#content").page();
I want to create a "mouseover" pop-up div dynamically, just like What we get in Stackoverflow (When mouse over a tag)/Google+ (when mouseover a friend image).
Curretly I am able to get the text from AJAX, but i am unable to place that in a "Catchy cool" look & feel.
Is there any wasy way to do this in JQuery?
I know that it's not the right way to help but I wrote some code for you:
http://jsfiddle.net/w8qan/11/
It is not perfect - i recommend reading about jQuery's offset() and position() methods and differences between them.
If you want you popups "stylish" - use CSS the way you want, use jQuery's animate(), show(), slideDown(), etc. I focused on displaying your description where you want it.
You can use the .animate() method to create cool custom animations..
For more widely-used effects have a look at this list of jQuery options http://api.jquery.com/category/effects/