I'm trying to create progress bar with text before it, like this:
Progress: [======> ]
but whenever I'm inserting tag with style "display: inline;" after text, jQuery UI progress bar shows wrong results.
Can anyone suggest me how to do it right? Thank you.
However, jsFiddle doesn't show that 'wrong result'. Using Firefox on Linux.
http://jsfiddle.net/gEmsp/
Regards.
Look at this:
[http://jsfiddle.net/gEmsp/1/][1]
Wrap label text in container.
Related
I am writing a script using jQueryUI's button http://jqueryui.com/dialog/#modal-form.
The button is pretty fancy looking.
Now, when I tried to use jQuery to change the display name of the button:
$('#signin').text("new name");
The Button revert to the original style of the browser, with no padding and etc. I don't know why change of style happens when I just change the display name of the button. Please suggest me a way to fix it.
To change button text use this :
$('#btnId').val('new-text');
I figured out how. I used a span tag around the display name and just change text of that span tag.
I am using this jQueryUI tooltip.
The jQueryUI file is quite large as it contains all the other elements.
Do I need all that code to let the tooltip behave properly or could I remove some of the code?
No, you don't.
Here's your jQuery UI build with only tooltip selected: http://jqueryui.com/download/#!version=1.10.3&components=1101000000000000000100000000000000
Feel free to customize this selection if you want.
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/
I have a textbox that I am attaching jQuery UI's Autocomplete functionality to and I am using CSS to give it a max height via the example here. My problem is that doing this causes the z-index problem that bgiframe solves to come back again, but in a different way. The initial autocomplete menu is above all the controls underneath it, but when I begin to scroll the autocomplete menu falls behind them.
Any suggestions?
EDIT:
This is purely an IE6 bug.
As you can see, after scrolling down the autocomplete falls behind the other controls.
I could solve the problem by replacing offsetHeight by scrollHeight in the following line (from jquery.bgiframe.js) :
height:'+(s.height=='auto'?'expression(this.parentNode.offsetHeight+\'px\')':prop(s.height))+';'+
This change solved the bug for the autocomplete fields with vertical scrollbars. I could not spot any regression in other kinds of dialogs (but I did not run extensive tests).
You need to reverse the z-index order of the form elements (or their containers) using javascript. I.e., "Social Worker" has the lowest, "DX Code" the highest z-index.
You could change the offsetHeight to scrollHeight, like Siggen says, but I have encountered problems when there is only 1 result returned from the autocomplete. The 1 result is squished into a window that only like 2 pxs high.
I found a fix though.
When you have a data.length<2, you should use the offsetHeight, rather than the scrollHeight.
You have to modify autocomplete.js.
Locate this code:
if($.fn.bgiframe)list.bgiframe();
And make it this:
if($.fn.bgiframe){
if(data.length<2)
list.bgiframe({height:'expression(this.parentNode.offsetHeight+\'px\')'});
else
list.bgiframe();
}
Remember, this code should be used in combination with Siggen's fix.
I have used a combination of both parameter for the height like this:
'height:'+(s.height=='auto'?'expression(Math.max(this.parentNode.offsetHeight,this.parentNode.scrollHeight)+\'px\')':prop(s.height))+';'
Look at the max function. Now it is good with no scroll bar (shorter list and longer list as well)
and now the autocomplete component looks perfect in IE6.