I have an image with map and several areas. I need areas to be always highlited and also change their fillColor on hover.
So the only working option is to set data attributes to areas instead of using maphilight on image.
So I have this code:
popupItem.('area').each(function() {
$(this).attr('data-maphilight', '{"alwaysOn":"true","fillColor":"359335","fillOpacity":0.25,"strokeColor":"2d812d"}');
});
Areas are given the specified attributes, but maphilight doesn't work.
It works only when I use maphilight on image like this:
popupItem.find('img:not(.maphilighted)').maphilight({
'strokeColor': '2d812d',
'fillColor': '359335',
'alwaysOn': 'true',
'fillOpacity': '0.25'
});
But in this case I can't change fillColor for a certain area.
Is there any other way to solve my problem?
Thanks for advice
Related
I was wondering if it already exists a way to have an input of type "range" with two different setteable values. The input I would like to achieve is something like this. The idea would be to set a range for a price. Meaning I would need to retrieve the "minimum" and the "maximum" from that input. Obviously, for the sake of learning, we can disregard the CSS style.
Is there a way to accomplish this with HTML5 or JavaScript? I've heard that there are some jQuery plugins that accomplish this, but I was wondering if there's a more "native" way of doing it. As an addition, I'm working with the mobile-oriented framework Ionic. If anybody knows about a plugin for Ionic that can achieve this, it would be much appreciated.
You can use noUiSlider. It includes all Javascript, CSS and HTML necessary.
Having a div like this in your HTML:
<div id="slider"></div>
And using this:
var slider = document.getElementById('slider');
noUiSlider.create(slider, {
start: [20, 80],
connect: true,
range: {
'min': 0,
'max': 100
}
});
You can see an easy example of it working.
I got a dynamic Textfield called txt_nOpp setted to 1, I also got a slider, called Slider1, The slider can only assume values betweed 1 and 6. While the user sets slider value, the text should change.
I've implemented this code:
Slider1.addEventListener(SliderEvent.CHANGE, slHandler);
function slHandler(e:SliderEvent):void{
txt_nOpp.text = String(e.value);
}
Flash doesn't return any error, but the slider/text works only at value 1, the other values of the slider make the text disappear... What's wrong?
SliderEvent.CHANGE only updates when you release the slider, so try
Slider1.addEventListener(Event.ENTER_FRAME, function()
{
txt_nOpp.text = Slider1.value.toString();
});
instead.
I fixed it, it was an anti aliasing problem, just set it as device font and now works
I have two images, one is like an icon and the other is the icon background, what is the best way to combine these two images and make a google marker v3 icon? They are not svg or paths, they are just two png images.
Simplest way: Use an image editor to make a single image and use that as the icon for your custom marker.
If you can't or don't want to do that you can make a custom overlay (reference) that behaves like a marker and use it to overlay the two images in the correct order on the map.
You can use an excellent little library, RichMarker. Its documentation is here.
To make usage easier, you can even create your own custom marker class, something like this:
Ns.Marker = function(properties) {
RichMarker.call(this, properties);
this.setContent('<div class="three-images-marker">' +
properties.NsImage ? '<div class="marker-image-1"><img src="'+properties.NsImage1+'"/></div>' : '' +
properties.NsFrameImage ? '<div class="marker-image-2"><img src="'+properties.NsImage2+'"/></div>' : '' +
'</div>');
};
Ns.Marker.prototype = Object.create(RichMarker.prototype);
// and use it like this:
var gorgeousMarker = new Ns.Marker({
position: yourMarkerLatlng,
map: yourMap,
NsImage: 'example.com/image.png',
NsFrameImage: 'example.com/frame.png',
});
'Ns' is whatever namespace you use, if you do.
From here on it's CSS work, you can position the images as you like.
I was under the impression that 'backgroundIamge' is supposed to be supported in .setStyleAttribute to allow the user to set a background image in a panel via something like this:
setStyleAttribute("backgroundImage","url('myImageUrl')");
However, when I try the following:
var panel = app.createVerticalPanel().setId('panel')
.setStyleAttribute('text-align', 'center')
.setStyleAttribute('zIndex', '3')
.setStyleAttribute('position', 'fixed')
.setStyleAttribute('left', 10)
.setStyleAttribute('top', 10)
.setWidth(250)
.setHeight(150)
.setStyleAttribute('backgroundImage',"url('https://myImage.png')");
I cannot produce a background image in the panel. The funny thing is the exact same code will produce a background image in a button. I have tried 'background' and 'background-image' as well to no avail. Is 'backgroundImage' NOT supported for panels or am I missing something?
I figured it out...you need to use createAbsolutePanel or add an empty label to other types of panels.
i am using slideshow2 by Aeron Glemann in a website.Does in generate the thumbnails or do i have to provide them?the images iam showing are coming from a cloud, and are passed to the slideshow in an array.the thumbs exist in the cloud. how can i pass them in the array if the show cannot create them?
i have used the replace parameter with regex but it shows as thumbnails the full image and nothing happens when i alter the css properties for the thumbnails. the images are displayed.
here is the line for the show creation:
var myShow = new Slideshow('show', eval(res.value), { controller: true, height: 350,overlap: false, resize: false, hu: '',replace:[/^\S+.(gif|jpg|jpeg|png)$/,'t$1'],thumbnails: true, width: 600});
the value object contains the images from the cloud in format shown below:
['xx.jpg','yy.png',....]
thank you very much for your time.
I'd say your regular expression is broken. To add a 't' to the end of the filename? Try:
replace:[/^(\S+)\.(gif|jpg|jpeg|png)$/,'$1t.$2']
Best to play with the regular expression using an online tester to get it right.