I'm not sure if this is a bug or what, but I'm getting a very strange behavior with jQuery mobile's datepicker.
When clicking a disabled date, the enabled dates disappear! WTF?
Please check out my jsFiddle for a very simple example: http://jsfiddle.net/X5qp8/
I'm modeling this after jquery's recommendation for the mobile hack: http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/
I'm also rendering it to a div because I need a persistent calendar. Maybe these things just do not jibe...
I've also found that the bug lies in line 33 of their mobile extension, but it is unclear what they are attempting to do there:
$( ".ui-datepicker-calendar .ui-btn", dp ).each(function(){
var el = $(this);
// remove extra button markup - necessary for date value to be interpreted correctly
el.html( el.find( ".ui-btn-text" ).text() );
});
Line 33 is stripping the extra markup so that the datepicker plugin can parse the date for the plugins various events. I have recently found a solution that worked for me, but I am unable to get things working on your jsFiddle. I have commented out some of the extra markup that was being done for mobile styling. Take a look at my version of the updateDatepicker function and hopefully it will be helpful.
function updateDatepicker(){
// $( ".ui-datepicker-header", dp ).addClass("ui-body-c ui-corner-top").removeClass("ui-corner-all");
$( ".ui-datepicker-prev, .ui-datepicker-next", dp ).attr("href", "#");
$( ".ui-datepicker-prev", dp ).buttonMarkup({iconpos: "notext", icon: "arrow-l", shadow: true, corners: true});
$( ".ui-datepicker-next", dp ).buttonMarkup({iconpos: "notext", icon: "arrow-r", shadow: true, corners: true});
// $( ".ui-datepicker-calendar th", dp ).addClass("ui-bar-c");
// $( ".ui-datepicker-calendar td", dp ).addClass("ui-body-c");
// $( ".ui-datepicker-calendar a", dp ).buttonMarkup({corners: false, shadow: false});
$( ".ui-datepicker-calendar a.ui-state-active", dp ).addClass("ui-btn-active"); // selected date
$( ".ui-datepicker-calendar a.ui-state-highlight", dp ).addClass("ui-btn-up-e"); // today"s date
$( ".ui-datepicker-calendar .ui-btn", dp ).each(function(){
var el = $(this);
// remove extra button markup - necessary for date value to be interpreted correctly
el.html( el.find( ".ui-btn-text" ).text() );
});
};
remove the <div id="datepicker"></div> and replace
$("#datepicker").datepicker({minDate : '9/20/2012'});
by
$("#date").datepicker({minDate : '9/20/2012'});
and it will work
Related
I need to do this action on button click, which is in the collapsible, so i do it like:
my_button.closest('div[data-theme="b"]').find('a.ui-btn-up-b').toggleClass('ui-btn-up-b ui-btn-up-d');
But unfortunately there still remains some styles which needs to be changed, but i don't know which...
Updated answer
Since the dynamic solution doesn't work for collapsible, here is a manual solution.
Working demo
Code
$('#button').on('click', function () {
var oldclass = 'ui-btn-up-b ui-body-b';
var newclass = 'ui-btn-up-d ui-body-d';
$('[data-role=collapsible]').find('a').removeClass(oldclass + ' ui-btn-hover-b').addClass(newclass + ' ui-btn-hover-d');
$('[data-role=collapsible]').find('.ui-collapsible-content').removeClass(oldclass).addClass(newclass);
});
Why collapsible data-theme cant be changed dynamically?
Old answer
Unfortunately, the below dynamic solution surprisingly doesn't work.
Where .selector is the ID of the Collapsible.
$('button').on('click', function () {
// change the theme
$( ".selector" ).collapsible( "option", "theme", "a" );
// apply new styles
$( ".selector" ).collapsible().trigger('create');
});
I'm working with jquery-ui. I can create elements with titles and show the titles. However on a click, I would like to take the title and populate another div (this is because touch enabled devices do not have tooltips). I can get a click event, but I can't get the title while in the click event.
$("div").click(function( event ) {
// just to prove that we are entering this event
$("#preShow").html ( Date() );
// show the title
var toolTip = this.attributes.title.value;
$("#show").html ( toolTip );
// just to prove that there was no crash
$("#postShow").html ( Date() );
});
I have also tried using
var toolTip = $(this).attr ("title");
Here is the jsfiddle showing the problem
http://jsfiddle.net/jK5xQ/
The same code works if I create an HTML file and run it in Firefox with a breakpoint at the first line of the click event. Has anyone experienced this?
This is because jQueryUI's Tooltip removes the title and uses it. Try going about it like this...
$(document).ready(function () {
$( document ).tooltip( {
track: true,
content: function() {
return $( this ).attr( "title" );
}
});
$('div').click(function(){
$('#show').html($('#' + $(this).attr('aria-describedby')).children().html());
});
});
DEMO: http://jsfiddle.net/jK5xQ/4/
Let me know if you have any questions!
I have seen only a couple variants on this question asked a couple other places, notably here and here.
Basically, I have a checkers gameboard where each square on the board is a droppable and each gamepiece is a draggable. Each square can only have one piece on it at a time, and I am trying to toggle the enable/disable method depending on whether there's a piece on the square or not.
Here's a link to what I've got so far: http://jsbin.com/ayalaz, and below is the most pertinent code.
function handleDrop(e, ui) {
var tileNumber = $(this).data('tile');
// Make the gamepiece snap into the tile
ui.draggable
.data({ // WHAT IF PIECE IS SET BACK DOWN IN SAME TILE... CHECK FOR IT!
'preRow': ui.draggable.data('curRow'),
'preCol': ui.draggable.data('curCol'),
'curRow': $(this).data('row'),
'curCol': $(this).data('col')
});
$(this).append($(ui.draggable));
ui.draggable
.position({
of: $(this),
my: 'left top',
at: 'left top'
});
$(this).droppable('disable');
//console.log("Gamepiece set down at: (" + $(this).data('row') + "," + $(this).data('col')+ ")");
}
function handleOut(e, ui) {
// HOW TO TOGGLE DROPPABLE??
$(this).droppable('enable');
}
Any advice?
Thanks in advance!
Jeremy
It looks like you are successfully disabling droppable on a tile after the first drop event. Your problem is that you are not initially setting droppable to disabled on the initial set of occupied tiles.
After you've created your game board and pieces, this should accomplish that, assuming my CSS selector accurately reflects your structure:
$('div.gamePiece').parent().droppable("option", "disabled", true);
Note that this is different from the syntax to change droppability in the initial options. From the jQuery UI droppable documentation:
//initialize
$( ".selector" ).droppable({ disabled: true });
//setter
$( ".selector" ).droppable( "option", "disabled", true );
Edit
It appears I was wrong about $(this).droppable('disable'); and $(this).droppable('enable'); jquery-ui does have alias functions for enable and disable.
enable: function() {
return this._setOption( "disabled", false );
},
disable: function() {
return this._setOption( "disabled", true );
},
I asked my question on gis.stackexchange.com because of its geo nature, but I figured I would have a larger response here. https://gis.stackexchange.com/q/18327/3773
I have been trying to utilize the jQuery UI Slider to control layer opacity in OpenLayers but I have an issue when trying to set the "value" option to anything other than the "max" value.
What I would like to see is the setOpacity method change my layer's opacity to 20% onload. However, the slider is shown in the correct position but the layer displays the "max" value of opacity (100%/opaque).
I need to force the webpage to setOpacity onload, but I am not familiar on how to do this.
Removed the any unnecessary code. Your help is much appreciated!
<script type="text/javascript">
var options = {maxExtent: new OpenLayers.Bounds(-10592586.767623,5113378.756775,-8275939.536344,7731361.313701)};
function init(){
OpenLayers.ImgPath = "http://js.mapbox.com/theme/dark/";
map = new OpenLayers.Map("map",{
maxExtent: new OpenLayers.Bounds(-10592586.767623,5113378.756775,-8275939.536344,7731361.313701),
maxResolution:"auto",
units:'m',
controls:[
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.KeyboardDefaults(),
new OpenLayers.Control.MousePosition(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.Navigation({dragPanOptions: {enableKinetic: true}})
]
});
hii_1 = new OpenLayers.Layer.MapServer("HII","http://127.0.0.1/cgi-bin/mapserv.exe",{
map:'C:/ms4w/Apache/htdocs/hii/hii_landcover.map'},{
isBaseLayer:false,
transparent:true,
format:"image/png",
alpha:true
});
osm_mapnik = new OpenLayers.Layer.OSM("OpenStreetMap: Mapnik");
gmap = new OpenLayers.Layer.Google("Google Maps: Streets");
map.addLayers([hii_1,osm_mapnik,gmap]);
map.zoomToMaxExtent();
map.setCenter(new OpenLayers.LonLat(-9434263,6422370),5);
</script>
<script>
$(function() {
$( "#slider1" ).slider({
range: "min",
min: 0,
value: 20,
slide: function(e, ui) {
hii_1.setOpacity(ui.value / 100);
$( "#amount1" ).val( ui.value );
}
});
$("#amount1" ).val($( "#slider1" ).slider( "value" ) );
</script>
The callback of the slider is not called onLoad. To trigger the event manually, see Trigger a jQuery UI slider event for an example.
Though, it would be better to your layer with an opacity of 0.20. You can achieve that by adding the property opacity to your layers options.
{
isBaseLayer:false,
transparent:true,
format:"image/png",
alpha:true,
opacity:0.20
}
.
I can define icon for a jquery ui button in code like this;
$( ".selector" ).button({ icons: {primary:'ui-icon-gear'} });
but I would like to define button icon in HTML code. for example
button
this way I can only call..
$( ".selector" ).button();
in onready event and define icons in code. otherwise I need to call button() method for every button that have different icon.
You could use the Metadata Plugin.
button
And the script
$(".jqbutton")
.each(function(){
var data = $(this).metadata();
$(this).button({ icons: {primary:data.icon} });
});
I've never used this directly, but I have used it through its support in the jquery validation plugin.
The Metadata Plugin works fine, and you can even do more: you can also set ALL the init properties of a jQuery UI button (other widgets too):
<script type="text/javascript">
$(document).ready(function(){
$('.jq-button').each(function(){
var meta=$(this).metadata();
$(this).button(meta);
});
});
</script>
New item
Thanks, TJB - great idea! :)
You can set the icon after initializing the button using the "options" parameter
$(".jqbutton").button();
$(".jqbutton.ui-icon-gear").button( "option", "icons",
{primary:'ui-icon-gear'} );
http://jqueryui.com/demos/button/#option-icons
EDIT: the link isn't direct, so just look for the Options tab and select 'icons' then look # the section that says 'Get or set the icons option, after init'
The following code looks for "ui-icon-[icon-name]" in the class-attribute of all elements containing the class "jqbutton" and creates a button with an "ui-icon-[icon-name]" icon.
$(function() {
$(".jqbutton").each(function() {
var obj = $(this);
var icon = false;
var c = obj.attr('class');
var i1 = c.indexOf('ui-icon-');
if (i1 != -1) {
var i2 = c.indexOf(" ", i1);
icon = c.substring(i1, i2 != -1 ? i2 : c.length);
obj.removeClass(icon);
}
obj.button({
icons : {
primary : icon
}
});
});
});