In my we page i am dynamically changing the top value for a div's style ie.
<div id="div1" style="top:89;">Test </div>
What i need is to capture the event using Jquery while top value is changed to 88 or 90?
There is no event that is generated when you change the style of an element, so this is impossible.
If you change the style of the element yourself using jQuery, you can of course generate some event there.
Related
Using https://angular-ui.github.io/bootstrap/ typeaheads
It doesn't look like I'm able to add a custom popup template AND a custom item template.
I've tried changing this in my custom popup:
<div uib-typeahead-match index="$index" match="match" query="query" typeahead-template-url="app/components/localIntentsPicker/typeahead-item.html"></div>
I can remove this div and just add my own changes in-line, but then I lose keyboard control over typeahead selection.
I've also tried adding the following to my main typeahead input.
typeahead-template-url="app/components/localIntentsPicker/typeahead-li.html
Neither seems to work.
Turns out I was doing a few things wrong.
Item template code needs to be wrapped in <a> to maintain keyboard selection.
Most importantly, wrapping template-url in extra quotes fixed the issue:
<div uib-typeahead-match index="$index" match="match" query="query" template-url="'app/components/localIntentsPicker/typeahead-item.html'"></div>
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've been trying to create an horizontal radiobutton horizontal list, but somehow I don't get the same visual result as when done with the data-* attributes.
If I do it with code I get squared buttons, while using the attributes I get a nice rounded corner toolbar.
Here is the code I use for creating the button list:
$(element).controlgroup({ mini: true, type: "horizontal" });
which should be the same as the one I use with the data-* attributes:
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
I've posted a jsfiddle to show the result
http://jsfiddle.net/simonech/zeDt4/3/
Can someone shad some light on this strange behavior?
Thx
Simone
To make them look the same, try this:
$("#mycontrolbox").controlgroup({ mini: true, type: "horizontal"});
$("#mycontrolbox").attr("data-role", "controlgroup");
updated jsFiddle - http://jsfiddle.net/zeDt4/4/
Now, why is this.
I think that jQuery mobile is actually not build upon jQuery UI even though it is currently very close. jQuery mobile is using those data-** attributes to select what is going to be a role of each tag. When the element is added to the html, jqm reads the content and based on what is in these data-role attributes, it decorates / replaces / the current content with its own. This is more about what is done to the element in order how it looks.
On the other hand, when you call
$("#mycontrolbox").controlgroup();
This does create a jQuery component allowing you to use the methods of that component. etc.
This is close to how the component behaves from the script point of view. This does not, however, add data-role attribute to the element itself.
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');
When I use JQuery UI's draggable/sortable feature at the parent element....and when applying contenteditable attribute at the child item....the selection feature doesn't works....
<div id="parent">
<div id="child" contenteditable></div>
</div>
$('#parent').draggable();
i.e. focus or active features do not work....without the dragging/sorting features of jQuery UI...focus and active features works at content editable applied element.....
OK.....I found the solution here: How can I enable 'draggable' on a element with contentEditable?
But the problem is: when calling the focus() method inside click-event...it brings cursor at the begging of focused element....it should be at the end...for typing something cursor should go to end...Is there any way to call focus() method and tell him that place cursor at the end of focused element?