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
}
.
Related
When I put OpenLayers map in a dialog, the zoom wheel seems not working. Also, when trying to resize the dialog, it is not that smooth. How to solve the two problems?
Here is the fiddle http://jsfiddle.net/Ja7v2/2/
var div = $('<div />')
.attr('id', 'map')
.css({width:800,height:600})
.appendTo($('body'));
//start a simple map, code from on http://openlayers.org/dev/examples/osm.html
map = new OpenLayers.Map( 'map');
layer = new OpenLayers.Layer.OSM( "Simple OSM Map");
map.addLayer(layer);
map.setCenter(
new OpenLayers.LonLat(-71.147, 42.472).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
), 12
);
map.addControl(new OpenLayers.Control.Navigation({
zoomWheelEnabled: true,
}));
// initialize the jQueryUI Dialog
div.dialog({
width:800,
height:600,
title: 'My Map',
resizeStop: function(){
map.updateSize(); //to prevent drag-zoom error
},
dragStop: function(){
map.updateSize(); //to prevent drag-zoom error
}
});
seems the jQuery dialog disables scrolling by default.
Adding this line solves the (your) problem:
$('#map').css('overflow', 'hidden');
It's not the final solution, I believe, but shows you the way... :)
I am trying to change the opacity of the image after I click the red button
instead of adding the different image, and I should not see the red button on the new image
My JS code is below.
http://jsfiddle.net/mwPeb/7/
<script>
$(document).ready(function () {
$(".specialHoverOne").hover(function () {
// alert("i am here");
$(".ctaSpecialOne").css("visibility", "visible");
},
function () {
$(".ctaSpecialOne").css("visibility", "hidden");
});
$(".ctaSpecialOne").click(function (e) {
alert("clicked");
e.preventDefault();
//$(this).closest('.specialHoverOne').unbind("mouseenter").end().parent().siblings('a').children("img").attr("src", //"http://imgs.zinio.com/magimages/62898189/2012/416242497_200.jpg");
$(this).css({
'opacity': 50
});
});
});
</script>
I'd spend some quality time cleaning up the coding here, it's a bit difficult to find anything and the structure is a bit hard to follow.
If I'm understanding correctly, I believe this is the line you need to make the image above the red button change opacity when said red button is clicked.
$(this).parent().prev().prev().css({'opacity':.5});
More specifically;
$(".ctaSpecialOne").click(function (e) {
e.preventDefault();
$(this).parent().prev().prev().css({'opacity':.5});
});
http://jsfiddle.net/mwPeb/11/
You want the opacity of the red button to change on click? Or the image above it? For starters, to set the opacity, you would change your line:
$(this).css({'opacity':50});
to:
$(this).css({ opacity: 0.5 });
In your current fiddle, you'll see that sets the opacity of the red button. If you want it to set something else, you now have the syntax.
Update:
Instead of wiring up a bunch of .click() events that repeat the same code, might be best to create a function
function setThisOpacity(id) {
$("#" + id).css({ opacity: 0.5 });
//do other stuff if you need to
}
And then in your html markup, just add an onclick="setThisOpacity(someID);" where someID is an actual ID to the item you want to set the opacity.
I'm fairly javascript and jquery. I'm trying to add a slider to my webpage. It's a basic slider where anyone can select a value between 0-100. I'm not sure how to mark SOME intervals in the middle.
This is the code i have so far
<script>
$(function() {
var temp = 0;
$( "#slider" ).slider({
animate: true,
value:temp,
min: 0,
max: 100,
step: 1,
slide: function( event, ui ) {
$( "#amount" ).val(ui.value );
},
stop: function(event, ui) {
temp = ui.value;
//Do something
}
});
$( "#amount" ).val($( "#slider" ).slider( "value" ) );
});
</script>
It is functioning properly. What i wanna try to do is add interval markers at 0.25,50,75 and 100.
I have gone through a few questions on SO but not sure how to proceed with the implementation. Would appreciate the help.
I tried this implementation: http://jsbin.com/iwime but this is not what i am trying to do as i just want the ticks to appear at those regular intervals but users shold stll be able to select other values.
Thanks
Cheers
I am guessing you want something like this: http://jsbin.com/iwime/116
So, instead of using the number of ticks in the max option of slider, you use whatever max units you want to provide, e.g. 100. Then in refershTicks(), update the algorithm to toggle the class.
Slider settings:
var slider = $("#slider").slider({
...
max: 100, // the only change
...
});
And the refreshTicks() method:
function refreshTicks() {
var s = slider
, lo = s.slider("values", 0), hi = s.slider("values", 1);
var max = s.slider('option', 'max');
s.find(".tick").each(function(i) {
var i = (i + 1) * (max/ticks.length) - (max/ticks.length)/2; // the updated algorithm
var inRange = (i >= lo && i < hi);
$(this)
[(inRange ? 'add' : 'remove') + 'Class']("ui-widget-header")
[(inRange ? 'remove' : 'add') + 'Class']("ui-widget-content");
});
}
Similar to this SO Question : The answer from Bijan might help.
The implementation of jQuery UI slider he suggest may help you to find a solution:
http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/
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 have a jQuery UI droppable element which I would like to get bigger when a draggable is hovered over it. I have tried both using the hoverClass option and also binding to the drophover event.
Visually, both these methods work fine. However, once the draggable exits the original (smaller) boundary of the droppable, jQuery UI interprets this as a 'dropout', despite still being within the current (larger) boundary.
For example, js:
$("#dropable").droppable({
hoverClass: 'hovering'
}.bind('dropout', function () {console.log('dropout')});
css:
#droppable { background: teal; height: 10px; }
#droppable.hovering { height: 200px; }
In this case, when a draggable hovers over the droppable, the droppable visually increases in size to 200px. If at this point, the draggable is moved down by 20px, I would expect it to still be hovering over the droppable. Instead, jQuery UI fires the dropout event and the droppable reverts to being 10px high.
Anyone know how to get it to behave in the way I'd expect it to?
jsFiddle example: http://jsfiddle.net/kWFb9/
Had the same problem, I was able to solve it by using the following options:
$("#droppable").droppable({
hoverClass: 'hovering',
tolerance: 'pointer'
});
$('#draggable').draggable({
refreshPositions: true
});
Here's the working fiddle: http://jsfiddle.net/kWFb9/51/
See http://bugs.jqueryui.com/ticket/2970
So I made a couple tweaks to your fiddle
First I set the droppable tolerance to "touch" which will activate whenever any part of the draggable is touching it. This causes the hovering class to be applied.
Next I added an animation to resize your draggable element slightly. I wasn't sure if this was functionality you wanted or not so I put it in there anyways.
Lastly, I permanently apply the hovering class to the droppable element when the draggable element is dropped into the droppable zone. This way the droppable doesn't revert to that narrow height when there is an element in it
http://jsfiddle.net/kWFb9/2/
EDIT:
Better fiddle: http://jsfiddle.net/kWFb9/6/
I hope this helps :)
you could create a bigger (i.e. the size of #droppable.hovering) div without background and apply your droppable to it. Note that you didn't provide HTML but the new #drop_container should contain both divs.
JS
var dropped;
$("#droppable").droppable({
drop: function(event, ui) {
dropped = true;
}
});
$('#draggable').draggable({
start: function(event, ui) {
$("#droppable").addClass("hovering");
dropped = false;
},
stop: function(event, ui) {
if (!dropped) {
$("#droppable").removeClass("hovering");
}
}
});
CSS
#droppable { background: teal; height: 10px; }
#droppable.hovering, #drop_container { height: 200px; }
Or you could try another solution with .live() or .livequery() from this article
[EDIT] I've edited my code and here is a jsfiddle: http://jsfiddle.net/94Qyc/1/
I had to use a global var, I didn't find a better way to check wether the box was dropped. If anybody has an idea, that would be great.
There is an other (hum hum) not bad solution :
TL;DR: Fiddle
The problem is that the plugin stores dom element's size values when the widget is created (something like) :
//jquery.ui.dropable.js
$.widget("ui.droppable", {
...
_create: function() {
var proportions,
this.proportions = function() { return proportions; }
And the offset for widgets are initialized in $.ui.ddmanager.prepareOffsets();
So we only need to overwrite the proportions object.
This way allow to access to real plugin properties so we can write something like :
$("#droppable").droppable({
hoverClass: 'hovering',
over: function(ev, ui) {
var $widget = $(this).data('droppable');
$widget.proportions = {
width: $(this).width(),
height: $(this).height()
};
},
out: function(ev, ui) {
var $widget = $(this).data('droppable'); //ui-droppable for latests versions
$widget.proportions = {
width: $(this).width(),
height: $(this).height()
};
}
})