Develop Reference

Ion.RangeSlider color from middle

I'm trying to use Ion.RangeSlider to make a slider where the color starts from the center and goes in the direction of the slider control until it hits the slider control. Right now, this is what I have:
Instead, I would like the color to go from the center of the slider to the slider control.
How can I make the RangeSlider work like that so that the color starts from the middle (as shown above)?
EDIT:
I looked at this question, but it deals with sliders with two controls instead one.
EDIT 1:
setup.js:
jQuery(document).ready(function($){
$(".slider").each(function() {
console.log($(this).attr("id"));
$(this).ionRangeSlider({
type: $(this).attr("data-slider_type"),
grid: $(this).attr("data-slider_grid"),
min: $(this).attr("data-slider_min"),
max: $(this).attr("data-slider_max"),
prefix: $(this).attr("data-slider_prefix")+" ",
postfix: " " + $(this).attr("data-slider_suffix"),
step: $(this).attr("data-slider_stepper"),
from: $(this).attr("data-slider_from")
});
$(this).on("change", function () {
var $this = $(this),
value = $this.prop("value").split(";");
});
});
});

Use: https://github.com/jordansoltman/ion.rangeSlider with has the additional boolean option: fixMiddle. For example:
$(".slider").ionRangeSlider({
fixMiddle: true,
...
});
Note: use ion.rangeSlider.js as ion.rangeSlider.min.js has not been updated.

Angular-leaflet-directive Custom HTML popup

I'm attempting to create a custom popup while using the angular-leaflet-directive. I'm opening the popup from the leaflet.draw on:create event. Here:
map.on('draw:created', function(e) {
layer = e.layer;
drawnItems.addLayer(layer);
var newComment = "Enter Comment";
var newID = "ID";
var newGeoJsonFeat = layer.toGeoJSON();
newGeoJsonFeat.properties = {"comment":newComment, "id":newID};
console.log(newGeoJsonFeat);
onEachFeature(newGeoJsonFeat,layer);
layer.openPopup();
});
Then I'm using #blackjid's logic as seen here: https://github.com/tombatossals/angular-leaflet-directive/issues/238 to bind the custom popup
function onEachFeature(feature, layer) {
// Create get the view template
var popupContent = '<div ng-include="\'partials/popup_newfeat.html\'"></div>';
console.log("assigning popup");
// Bind the popup
// HACK: I have added the stream in the popup options
layer.bindPopup(popupContent,{
closeButton: false,
maxHeight: 300,
feature: feature
});
};
$scope.$on('leafletDirectiveMap.popupopen', function(event, leafletEvent){
// Create the popup view when is opened
var feature = leafletEvent.leafletEvent.popup.options.feature;
var newScope = $scope.$new();
newScope.stream = feature;
$compile(leafletEvent.leafletEvent.popup._contentNode)(newScope);
});
Long story short, Everything works fine except the popup container isn't resizing properly to fit the new content. The height seems right, but the width is off.
I tried using:
.leaflet-popup-content {
width:auto !important;
}
Which will probably suffice, but this causes the popup anchor to shift to the bottom left of the popup for some reason. AutoPan is also broken when clicking near the top of the map.
Does anyone know where and how I can get popup.update() to fire? I believe thats what needs to happen, but I don't know where to implement it. I've tried calling it after layer.openPopup() like so:
onEachFeature(newGeoJsonFeat,layer);
layer.openPopup();
layer.getPopup().update();
});
But that doesn't seem to do anything. Any help is greatly appreciated!

You need to use the 'leafletEvent'. Try this:
myApp.controller('YourController', ['$scope', 'leafletEvent', function($scope) {
// after all your crazy custom popup stuff ...
leafletData.getMap().then(function(map) {
layer.getPopup().update();
});
}]);

I ended up storing the image width in the properties of the GeoJson, and then setting the minWidth to that value in the bindPopup function.
layer.bindPopup(popupContent,{
closeButton: true,
closeOnClick: false,
minWidth: feature.properties.width,
autoPanPadding: L.point(20,20),
keepInView: false,
feature: feature
});

How to make a hover effect change another "object" selected

For example I have two classes A and B, I need that when I hover over the change which is the amount, color, etc. B. I do not know if I can do this using CSS and onmouseover.
I'm putting a piece of code that handle the creation of the table and the definition of the class C.
What I need here is that when the User delecione or hover over the table activate this class C
jQuery(grid_selector).jqGrid({
url:urllst,
datatype: 'json',
height: 'auto',,
ignoreCase: true,
colNames:['UF','NAME','CITY' ],
colModel:[
{name:"uf",index:"uf", width:100, sorttype:'text', viewable: true, frozen: true, focus: true,
stype:'text',
formoptions:{elmprefix:'*', label: 'UF:', rowpos:1, colpos:1},
editable:true,
editrules: {required: true},
edittype: 'custom',
classes: 'c',
editoptions: {style: "text-transform: uppercase",
'custom_element' : macro_uf_element,
'custom_value' : macro_uf_value,
},

I believe you need to use javascript, but I could be wrong.
//grab all of the item images and make sure their popup description shows
var $contentWrapper = $("#contentWrapper");
//and bind the events that allow us to have a popup window follow the cursor
$contentWrapper.on("mouseover", className, function(event) {
var $itemDescription = $(this).parent("").find(".description");
//when the users cursor enters the item ensure that it enables vision of the popup and initialize the coordinates
updatePosition(event.clientX, event.clientY, $itemDescription);
$itemDescription.show();
});
that's a little snippet of code I use for showing a div when a user hovers over an image, I believe this is similar to what you're looking for.

Hy guys, I resolved as follows.
I declared the function mouseenter and mouseleave because only hover was setting the color and not returned to normal.
When you position the mouse over the table row selection will occur in class C.
$("#tabDados").mouseenter(function(){
$(".c").css("background-color","#eff3f8");
});
$("#tabDados").mouseleave(function(){
$(".c").css("background-color","#fff");
});

AS3. Animated pop-up window in Flash

I'm creating flash game and for now I have simple menu, when clicking button close current window and add new one.
Maybe could you suggest any script for animated pop-up new window or custom menu? Thank you.
For now I use simple this:
btn_play.addEventListener(MouseEvent.CLICK, start);
private function start(event:Event):void
{
menu_background.visible = false;
removeChild(btn_play);
removeChild(btn_control);
removeChild(btn_credits);
removeChild(btn_quit);
addChild(secondBackground);
addChild(btn_back);
}

You can use lots of Tweens for the pop-up by GreenSock.
For example:
//Fade in and Fade out
TweenLite.to([menu_background, btn_play, btn_control, btn_credits, btn_quit], 0.5, {alpha:0, onComplete:function()
{
menu_background.visible = false;
removeChild(btn_play);
removeChild(btn_control);
removeChild(btn_credits);
removeChild(btn_quit);
addChild(secondBackground);
addChild(btn_back);
//Immediately set the alpha of secondBackground and btn_back to 0 and tween them to alpha 1 in 0.5 second
TweenLite.from( [secondBackground, btn_back], 0.5, {alpha:0} );
}});
Experiment more with the TweenLite/Max Plugin Explorer.

Highcharts: Add a custom image button

I want to add and image button on highcharts.
So far, I have successfully created a image button and have attached a click event on it.
But problem is that, the image (sun.png) is on left side of chart and image button is right aligned ( the default position of toolbar). Any fix for this ?
exporting: {
buttons: {
popUpBtn: {
symbol: 'url(images/sun.png)',
_titleKey: 'popUpBtnTitle',
x: -10,
symbolFill: '#B5C9DF',
hoverSymbolFill: '#779ABF',
onclick: function () {
alert('ad');
popUpChart($(this));
}
},
exportButton: {
enabled: false
},
printButton: {
enabled: false
}
}
}
Also, if there are other methods to add an image in chart which have click event, those methods are welcomed too.

Finally, I figured it out like this.
May be it will help others.
function callback($this){
var img = $this.renderer.image('images/zoom_icon.png',$this.chartWidth-40,5,40,12);
img.add();
img.css({'cursor':'pointer'});
img.attr({'title':'Pop out chart'});
img.on('click',function(){
// prcessing after image is clicked
});
}
new Highcharts.Chart(charts.params,callback);
// where charts.params is object which contains options for chart