I would like to use the new Jquery UI Spinner widget on a website. My problem is that the website already uses jquery UI 1.8.10 and when I tried updating to 1.9 I got a lot of errors due to other plugins relying on V 1.8.
Is it possible to load the spinner widget on a page that has already loaded jquery ui 1.8? Is it possible to load jquery ui 1.9 in tandem so I can then load the spinner widget? Is it possible to modify the spinner widget to work with 1.8? Any help would be greatly appreciated.
Here is a quick fiddle of the spinner I want to use (selects hours and minutes and steps by half hours) - http://jsfiddle.net/fDpE9/5/
I decided to make a JavaScript function to create my own widget without jQuery UI. I added a create function to replace the input with the same HTML as a Jquery UI spinner, and attach my own spin function to the button clicks. Still need to add holding mouse down event on the buttons but you get the idea.
function createHourMinSpinner(elementSelector) {
$(elementSelector).replaceWith('<span class="ui-spinner ui-state-default ui-widget ui-widget-content ui-corner-all"><input id="' + $(elementSelector).attr('id') + '" class="ui-spinner-input" value="' + $(elementSelector).val() + '" name="' + $(elementSelector).attr('name') + '" style="width:' + $(elementSelector).width() + 'px;" aria-valuenow="0" autocomplete="off" role="spinbutton"><a onclick="spinHourMin(\'#' + $(elementSelector).attr('id') + '\', true);" class="ui-spinner-button ui-spinner-up ui-corner-tr ui-button ui-widget ui-state-default ui-button-text-only" tabindex="-1" role="button" aria-disabled="false"><span class="ui-button-text"><span class="ui-icon ui-icon-triangle-1-n">▲</span></span></a><a onclick="spinHourMin(\'#' + $(elementSelector).attr('id') + '\', false);" class="ui-spinner-button ui-spinner-down ui-corner-br ui-button ui-widget ui-state-default ui-button-text-only" tabindex="-1" role="button" aria-disabled="false"><span class="ui-button-text"><span class="ui-icon ui-icon-triangle-1-s">▼</span></span></a>');
}
function spinHourMin(elementSelector, goingUp) {
var originalVal = $(elementSelector).val() + "";
var originalWhole = parseInt(originalVal.split(':')[0]);
var originalFract = parseInt(originalVal.split(':')[1]);
var newValue = "0:00";
if (!goingUp && originalWhole == 0) {
newValue = "0:00";
} else if (goingUp && (originalFract == undefined || originalFract < 30 || isNaN(originalFract))) {
newValue = originalWhole + ":30";
} else if (goingUp && originalFract >= 30) {
newValue = (originalWhole + 1) + ":00";
} else if (!goingUp && (originalFract == undefined || originalFract == 0 || isNaN(originalFract))) {
newValue = (originalWhole - 1) + ":30";
} else if (!goingUp && originalFract > 30) {
newValue = originalWhole + ":30";
} else if (!goingUp && originalFract <= 30 && originalFract != 0 && originalFract != undefined) {
newValue = originalWhole + ":00";
}
$(elementSelector).val(newValue);
}
Related
I am building a phonegap application. IIt works fine for iOS and Android , but in Windows Phone 8, the application does not load the page for the second time. I have a list on Page 1. When I click at each list item,it opens up its details on the second page.
The code of Page 1 is as follows-
//Each list item belongs to class 'stores-list'
$(document).on("click", '.stores-list', function() {
if (storage.getDataForKey('storeDetails') != null) {
storage.clearData('storeDetails');
}
storage.setDataForKey('storeDetails', stores[$(this).index()]);
$.mobile.changePage('store-details.html', {
transition: 'slide',
// data: stores[$(this).index()],
});
});
The code of Page 2 is as follows-
$(document).on("pagebeforecreate", '#store-details', function () {
var storeDetailsQuery = storage.getDataForKey('storeDetails');
displaystoredetailsdata(storeDetailsQuery);
});
function displaystoredetailsdata(data1) {
var htmlstoredetails = "";
htmlstoredetails += '<div class="ui-grid-a"><div class="ui-block-a">Store Name</div><div class="ui-block-b">';
htmlstoredetails += '' + data1.storeName + '</div></div>';
htmlstoredetails += '<div class="ui-grid-a"><div class="ui-block-a">Type</div><div class="ui-block-b">';
htmlstoredetails += '' + data1.storeType + '</div></div>';
htmlstoredetails += '<div class="ui-grid-a"><div class="ui-block-a">Mobile</div><div class="ui-block-b">';
htmlstoredetails += '' + data1.mobile + '</div></div>';
htmlstoredetails += '<div class="ui-grid-a"><div class="ui-block-a">Address</div><div class="ui-block-b">';
htmlstoredetails += '' + data1.address + ', ' + data1.city + ' - ' + data1.pin + '</div></div>';
htmlstoredetails += '<div class="ui-grid-a"><div class="ui-block-a">Week Off</div><div class="ui-block-b">';
htmlstoredetails += '' + data1.weekOff + '</div></div>';
htmlstoredetails += '<div class="ui-grid-a"><div class="ui-block-a">Timings</div><div class="ui-block-b">';
htmlstoredetails += '' + data1.timings + '</div></div>';
$('#page-store-details-display').html(htmlstoredetails);
}
The problem that I am facing is that when I click on a list item , it opens up the next page and display the details. But when for the second time, if I click on any list item, it redirects to other page and even create correct dynamic html, but page is not displayed for any reason that I am not able to get. (I also tried firing "pageshow" event. It executed for the first time. But didnot fire when I clicked any list item the second time.)
Please help. Thanks in advance.
I have found solution to my question. Actually localStorage when was getting cleared,it raised an unexpected event handling. So instead of clearing the storage, I simply updated the value of key.
Please see:
http://jsbin.com/xebaxiya/3/edit
Pop up works in first listview, but after clicking "Add Date" I can't see how to get the popup to work on the subsequent listviews.
Any advice?
Many thanks
In your code which adds the dynamic datepicker, remove the class="hasDatepicker" from the content string and then after appending the elements, call the datepicker() function on the new input to initialize the widget:
$("#add").click(function() {
nextId++;
if (nextId<21) {
var content = '<li class="ui-field-contain"><label for="datechosen' + nextId + '">Date ' + nextId + '</label><div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset"><input type="text" id="datechosen' + nextId + '" name="datechosen' + nextId + '" data-role="date" placeholder="Pop up doesnt work :( " readonly="readonly" /></div></li>';
$( "#set" ).append( content ).listview( "refresh" );
$("#datechosen" + nextId).datepicker();
}
});
Here is your updated jsBin
I'm creating the below which is doing fine except for one problem:
function showDevices() {
for (var i = 0; i < devices.length; i++) {
var value = devices[i].Value;
var geraete_id = devices[i].Key;
if (value.Name != "") { // if name exists, use that as heading, else, use UDID
$("#geraete-list").append("<li id='geraete-"+i+"'><a href='#'><h5>" + value.Name + "</h5>"
+ "<p>" + value.LastUsedBy + "</p>"
+ "<p id='geraete_DID'>" + geraete_id + "</p>"
+ "<p>Zuletzt Verwendet: " + formatDate(jsonToDate(value.LastUsed)) + "</p></a>"
+ "<a href='#confirm_device_removal' class='deleteListItem' data-rel='dialog'></a></li>");
}
else {
$("#geraete-list").append("<li id='geraete-"+i+"'><a href='#'><h5 id='geraete_DID'>" + geraete_id + "</h5>"
+ "<p>" + value.LastUsedBy + "</p>"
+ "<p>Anonymous User</p>"
+ "<p>Zuletzt Verwendet: " + formatDate(jsonToDate(value.LastUsed)) + "</p></a>"
+ "<a href='#confirm_device_removal' class='deleteListItem' data-rel='dialog'></a></li>");
}
}
$("#geraete-list").listview("refresh");
}
The problem is that class='deleteListItem'gets turned into class='deleteListItem ui-btn ui-btn-icon-notext ui-icon-delete'
Is this just the way Chrome is reading it or is jQuery Mobile adding this into my class?
The problem is I want to run the below code but the getDeviceIDforRemoval() isn't doing anything...
function getDeviceIDforRemoval(){
$(".device_to_remove").text($("#geraete_DID").text()); // sends the device ID into confirm submission dialog
}
function removeDevices(){
var geraetID = $(this).find('span').text(); //retrieves the DID inserted by above function
removeDevice(geraetID,loadDevices);
}
function removeDevice(udid,onSuccess){
Server.removeDevice(udid,onSuccess);
}
Elements can have multiple classes and when these are shown in the HTML they appear as
class="class1 class2 class3"
Order is largely unimportant.
This code...
$(".device_to_remove").text($("#geraete_DID").text());
...will select all elements with class device_to_remove regardless of whether other classes are also applied to those elements. It will then attempt to set the text of those elements to the text of the element with id geraete_DID.
Which of your elements actually has the class device_to_remove? I see no other reference to this in your code?
Using jQuery Mobile the code below works, however when I click on a menu item then click 'back' all my menu items have duplicated/appended etc.
$.each(siteData["pages"], function(i,v) {
$.mobile.activePage.find('[data-role=content]').append('' +
'<a href="#' + v["id"] +
'" data-role="button">' + v["name"] +
'</a>').trigger('create');
var newPage = $("<div data-role='page' id='" + v["id"] +
"'><div data-role=header><a data-iconpos='left' data-icon='back' href='#' data-role='button' " +
"data-rel='back'>Back</a>" +
"<h1>Dynamic Page</h1>" +
"</div>" +
"<div data-role=content>Stuff here</div>" +
"</div>");
// Append the new page info pageContainer
newPage.appendTo($.mobile.pageContainer);
});
How can I stop this behavior?
I will make you a solution from your last question, it will be easier to understand
Take a look at working example: http://jsfiddle.net/Gajotres/3kPTf/
Basically before you add content you need to check if that constant already exist.
In your case each time you add a new button/page check if that button/page already exist like this:
if(!$('#second').length){
// In this case this code block will execute if button with an id second don't exist
}
And here's a code example:
$(document).on('pagebeforeshow', '#index', function(){
if(!$('#second').length){
$.mobile.activePage.find('[data-role=content]').append('Second').trigger('create');
var newPage = $("<div data-role='page' id='second'><div data-role=header><a data-iconpos='left' data-icon='back' href='#' data-role='button' data-rel='back'>Back</a>" +
"<h1>Dynamic Page</h1>" +
"</div>" +
"<div data-role=content>Stuff here</div>" +
"</div>");
// Append the new page info pageContainer
newPage.appendTo($.mobile.pageContainer);
}
});
Using jQuery UI draggable/droppable, how can force multiple drop containers to scroll when the draggable is dragged over them?
For example, how can I make these "drop target" lists scroll when dragging the "drag me" square over them?
Fiddle of above: http://jsfiddle.net/AdrkG/
Note: the draggable({ scroll: true }) option will not work here, as the draggable isn't a child of either drop container.
And some code examples to satisfy StackOverflow (otherwise it complains that I'm only linking to JSFiddle):
<div class="draggable">drag me</div>
<div class="dropcontainer">
<div class="droppable">drop target 0</div>
<div class="droppable">drop target 1</div>
…
</div>
<div class="dropcontainer">
<div class="droppable">drop target 0</div>
<div class="droppable">drop target 1</div>
…
</div>
<script>
$(".draggable").draggable()
$(".doppable").droppable()
</script>
<style>
.dropcontainer {
overflow: auto;
width: 150px;
height: 100px;
}
</style>
You may use the drag event.
Here is an exemple: http://jsfiddle.net/AdrkG/8/
I have almost th the same problem now. Thanks #Bali Balo for the direction and great example.
I just want to show 2-dimentional scroll variant of his code if somebody else needs:
var dropContainers = $(".dropContainer");
drag: function (event, ui) {
dropContainers.each(function () {
var $this = $(this);
var cOffset = $this.offset();
var bottomPos = cOffset.top + $this.height();
var rightPos = cOffset.left + $this.width();
clearInterval($this.data('timerScroll'));
$this.data('timerScroll', false);
if (event.pageX >= cOffset.left && event.pageX <= cOffset.left + $this.width()) {
if (event.pageY >= bottomPos - triggerZone && event.pageY <= bottomPos) {
var moveDown = function () {
$this.scrollTop($this.scrollTop() + scrollSpeed);
};
$this.data('timerScroll', setInterval(moveDown, 10));
moveDown();
}
if (event.pageY >= cOffset.top && event.pageY <= cOffset.top + triggerZone) {
var moveUp = function () {
$this.scrollTop($this.scrollTop() - scrollSpeed);
};
$this.data('timerScroll', setInterval(moveUp, 10));
moveUp();
}
}
if (event.pageY >= cOffset.top && event.pageY <= cOffset.top + $this.height()) {
if (event.pageX >= rightPos - triggerZone && event.pageX <= rightPos) {
var moveRight = function () {
$this.scrollLeft($this.scrollLeft() + scrollSpeed);
};
$this.data('timerScroll', setInterval(moveRight, 10));
moveRight();
}
if (event.pageX >= cOffset.left && event.pageX <= cOffset.left + triggerZone) {
var moveLeft = function () {
$this.scrollLeft($this.scrollLeft() - scrollSpeed);
};
$this.data('timerScroll', setInterval(moveLeft, 10));
moveLeft();
}
}
});
},
I added optimization not to search the droppable areas on every drag event - I pre-calculated it before initializing draggable widget. That substantially increased performance and responsiveness of dragging.
One more minor change is that it looks like moveUp and moveDown function names were interchanged ocasionally (I renamed them vise versa).