How do I make the widget show with this effect
when I run this then it wont show?
$("#myID").progressbar({
show: {
effect: "blind",
duration: 800
}
});
There is no show options for a progressbar: http://api.jqueryui.com/progressbar/
You mean something ike this?:
http://jsfiddle.net/2Zyf8/1/
var progressBar = $('#myID');
progressBar.progressbar({
value: 25,
create: function (event, ui) {
var bar = $('.ui-progressbar-value');
var realWidth = bar.width();
bar.width(0).animate({
width: realWidth
}, 800);
}
});
Related
I have a Jquery dialog where I want to display button based on a condition.
I tried using this solution to extend the button set but it's not displaying the dynamic button: Add a button to a dialog box dynamically
https://jsfiddle.net/q3u0xebz/
function showActionDialog(title, content, actionMessage, actionCallback) {
var actionDialog = $("<div id='action-dialog'></div>").html(content).dialog({
dialogClass: 'no-close',
title: title,
resizable: false,
height: 'auto',
width: 'auto',
modal: true,
buttons: [{
text: 'Okay',
click: function() {
$(this).dialog('close');
$("action-dialog").remove();
}
}]
});
if (actionCallback != '') {
var buttons = actionDialog.dialog("option", "buttons"); // getter
$.extend(buttons, {
text: actionMessage,
click: function() {
eval(actionCallback).call();
$(this).dialog('close');
$("action-dialog").remove();
}
});
actionDialog.dialog("option", "buttons", buttons); // setter
}
}
When i scroll down and release, i can't scroll up again, i have got this issue on android
My sdk version is 5.1
Here is my search,
var search = Titanium.UI.createSearchBar({
barColor: '#fb2942',
showCancel: true,
top: 0,
hintText: 'Search....',
});
table.search = search;
table.filterAttribute = 'title';
if (OS_ANDROID) {
table.searchHidden = false;
} else {
table.searchHidden = false;
}
table.separatorColor = "#ddd";
search.addEventListener('change', function(e) {
e.value;
});
search.addEventListener('return', function(e) {
search.blur();
});
search.addEventListener('cancel', function(e) {
search.blur();
});
And here is my tableview,
var table = Titanium.UI.createTableView({
backgroundColor: 'white',
separatorColor: "#ddd",
separatorInsets: {
left: 0,
right: 0
},
top: '8dp',
height: Ti.UI.SIZE,
});
In order to be scrollable the TableView height must be set to its default Ti.UI.FILL or a fixed/percentage width, but not Ti.UI.SIZE since that will cause it to fit its content, at which point there's nothing to scroll ;)
Using JQuery UI draggable/droppable I am running into an issue where the draggable drop area is offset (normally to the left but inconsistent distance). The image can be directly over the drop area and fail and on next attempt, in exact same location, pass.
So, dragged item looks in correct spot over mouse but is incorrect when dropped... but only first attempt.
function dragAndDrop(draggedItem,dropZone,size)
{
var bool = 0;
var draggedItem = $(draggedItem);
var dragFromLeft = draggedItem.offset().left;
var dragFromTop = draggedItem.offset().top;
var dropZone = $(dropZone);
//var size = size;
draggedItem.draggable //Make item draggable
({
opacity:1,
revert:function()//'invalid'
{
$(".strobeRed").fadeTo(100, .50).fadeTo(100, 0);
$(this).offset({top: dragFromTop, left: dragFromLeft})
},
drag:function(event, ui)
{
$(this).height(size);
$(this).width(size);
},
cursorAt:
{
left:(size/2),
top:(size/2)
}
});
dropZone.droppable //Make item droppable
({
accept:draggedItem,
drop: function(event, ui)
{
$( ui.draggable ).fadeOut(),
$( this ).droppable( "option", "disabled", true ).css("background-color", "green"), //$(this) = $(event.target)
$( this ).draggable( "option", "disabled", true )
}
});
}
sample image
* EDIT 1
Adding function call from edge animate *
draggable and droppable objects are just divs with class names.
yepnope({nope:['jquery-ui.js','cookbook.js'],complete:init});
function init(){
dragAndDrop(".item1",'.dz1',50);
dragAndDrop(".item2",'.dz2',50);
dragAndDrop(".item3",'.dz3',50);
dragAndDrop(".item4",'.dz4',50);
dragAndDrop(".item5",'.dz5',50);
dragAndDrop(".item6",'.dz6',50);
dragAndDrop(".item7",'.dz7',50);
dragAndDrop(".item8",'.dz8',50);
dragAndDrop(".item9",'.dz9',50);
}
* EDIT 2
fixed issue, introduced another *
by having the scale prior to adding the draggable, it now drops correctly. The new issue is the first item I touch of each type scales and relocates to pointer but the drops. It doesn't fail it just stops being dragged.
function dragAndDrop(draggedItem,dropZone,scaleHeight,scaleWidth)
{
var bool = 0;
var draggedItem = $(draggedItem);
var dragFromLeft = draggedItem.offset().left;
var dragFromTop = draggedItem.offset().top;
var dropZone = $(dropZone);
var currentMousePos = { x: -1, y: -1 };
draggedItem.mousedown(function(event){
currentMousePos.x = event.pageX - (scaleWidth/2);
currentMousePos.y = event.pageY - (scaleHeight/2);
$(this).height(scaleHeight);
$(this).width(scaleWidth);
$(this).offset({top: currentMousePos.y, left: currentMousePos.x});
draggedItem.draggable //Make item draggable
({
opacity:1,
revert:function()//'invalid'
{
$(".strobeRed").fadeTo(100, .50).fadeTo(100, 0);
$(this).offset({top: dragFromTop, left: dragFromLeft})
}
})
});
dropZone.droppable //Make item droppable
({
accept:draggedItem,
drop: function(event, ui)
{
//$( ui.draggable ).fadeOut(),
$( this ).droppable( "option", "disabled", true ).css("background-color", "green"), //$(this) = $(event.target)
$( this ).draggable( "option", "disabled", true )
},
tolerance: "touch"
});
}
** I FOUND IT **
Ok, so my first attempt was calculating the draggable as its original size. The second attempt was not dragging the first item of each type during first attempt. I believe it was stuck in mousedown event and not running the draggable. every time after that draggable was already applied so it worked.
The fix was to assign draggable to everything in the beginning but pull the scaling into a second function. It now scales the item, centers it on mouse, drags and drops.
function dragAndDrop(draggedItem,dropZone,scaleHeight,scaleWidth)
{
var bool = 0;
var draggedItem = $(draggedItem);
var dragFromLeft = draggedItem.offset().left;
var dragFromTop = draggedItem.offset().top;
var dropZone = $(dropZone);
var currentMousePos = { x: 0, y: 0};
draggedItem.draggable //Make item draggable
({
opacity:1,
revert:function()//'invalid'
{
$(".strobeRed").fadeTo(100, .50).fadeTo(100, 0);
$(this).offset({top: dragFromTop, left: dragFromLeft})
}
})
draggedItem.mousedown(function(event){
currentMousePos.x = event.pageX - (scaleWidth/2);
currentMousePos.y = event.pageY - (scaleHeight/2);
$(this).height(scaleHeight);
$(this).width(scaleWidth);
$(this).offset({top: currentMousePos.y, left: currentMousePos.x});
});
dropZone.droppable //Make item droppable
({
accept:draggedItem,
drop: function(event, ui)
{
//$( ui.draggable ).fadeOut(),
$( this ).droppable( "option", "disabled", true ).css("background-color", "green"), //$(this) = $(event.target)
$( this ).draggable( "option", "disabled", true )
},
tolerance: "touch"
});
}
Using the jQuery UI Slider, I'm trying to figure out how to make it so that the slider stops working once certain conditions are met. Any ideas? I thought stopping event propogation in the "start" part would work, but ...it doesn't. So I'm still clueless and lost.
<script type="text/javascript">
$(document).ready(function () {
var spendable = 1000;
var spent = 0;
function spend(quantity) {
var remaining = spendable - quantity;
$('#spendable').text(remaining);
}
$("#eq .slider").each(function () {
var current = 0;
$(this).slider({
range: "min",
step: 100,
value: 0,
min: 0,
max: 500,
animate: true,
orientation: "horizontal",
start: function (event, ui) {
if (spent < spendable)
return true;
event.stopPropagation();
},
slide: function (event, ui) {
// set the current value to whatever is selected.
current = ui.value;
$(this).parent('div:eq(0)').find('.spent').text(current);
var totalled = 0;
$("#eq .slider").each(function () {
totalled += parseInt($(this).parent('div:eq(0)').find('.spent').text());
spend(totalled);
});
}
});
});
Try:
.....
slide: function (event, ui) {
// set the current value to whatever is selected.
current = ui.value;
if(current > 300){
current = 300; //otherwise, it's stuck at 301
return false;
}
....rest of your code
I'm creating a Web interface for a table in Mysql and want to use jQuery dialog for input and edit. I have the following code to start from:
$("#content_new").dialog({
autoOpen: false,
height: 350,
width: 300,
modal: true,
buttons: {
'Create an account': function() {
alert('add this product');
},
Cancel: function() {
$(this).dialog('close');
$.validationEngine.closePrompt(".formError",true);
}
},
closeText: "Sluiten",
title: "Voeg een nieuw product toe",
open: function(ev, ui) { /* get the id and fill in the boxes */ },
close: function(ev, ui) { $.validationEngine.closePrompt(".formError",true); }
});
$("#newproduct").click(function(){
$("#content_new").dialog('open');
});
$(".editproduct").click(function(){
var test = this.id;
alert("id = " + test);
});
So when a link with the class 'editproduct' is clicked it gets the id from that product and I want it to get to the open function of my dialog.
Am I on the right track and can someone help me getting that variable there.
Thanks in advance.
Set a variable eg the_id on top of everything in your script and try this code:
$("#newproduct").click(function(){
$("#" + the_id).dialog('open');
});
$(".editproduct").click(function(){
the_id = this.id;
});
Thanks Sarfraz you were right about the variable. For others interest the full code is now:
$(document).ready(function() {
var id = 0;
$("#content_new").dialog({
autoOpen: false,
height: 350,
width: 300,
modal: true,
buttons: {
'Create an account': function() {
alert('add this product');
},
Cancel: function() {
$(this).dialog('close');
$.validationEngine.closePrompt(".formError",true);
}
},
closeText: "Sluiten",
title: "Voeg een nieuw product toe",
open: function(ev, ui) { alert(id); },
close: function(ev, ui) { $.validationEngine.closePrompt(".formError",true); }
});
$("#newproduct").click(function(){
$("#content_new").dialog('open');
});
$(".editproduct").click(function(){
id = this.id;
$("#content_new").dialog('open');
});
$("#new").validationEngine();});
And on the opening of the modal dialog box i get the correct ID.