is there a way slick dots hoverable ? when I click to dots, slider is moving..this is ok, but I want when I hover to dots, slider is moving too.
how can I add this hoverable option ?
$('.fade').slick({
dots: true,
infinite: true,
speed: 500,
fade: true
});
Thanks for your response Asaf..I find another solution from creator of slick.js.
I share the solution below.
$('.slick-dots li').on('mouseover', function() {
$(this).parents('.fade').slick('goTo', $(this).index());
});
You can bind the hover event to the slickNext & slickPrevious methods.
Here's an example, just check what class each dot has, or use the nth-of-type to refer to the dot you want:
$('.class-of-dot').hover(function() {
$('.fade').slick('slickNext');
}
Note: I assumed you are using the latest version of slick, if not you can download the latest or comment your version number or just look up for the relevant syntax to use slickNext in that version
Related
I am trying to create multiple jBoxes using the data-attributes and I want to feed them with content from other elements.
I assumed this wouldn't be possible (out of the box), so I used a data-jbox-content-from attribute which is supposed to be point to the element with the content.
But I'm confused now: I know that I should be creating a single jBox only - but I do not see how that is doable when on the other hand I need distinct calls per element to provide the content?
And to confirm my uncertainty...the fiddle isn't working. So I hope someone will find a way to do this either my fixing bugs in my "ugly" approach (eaching over the controls) or a smarter use of JS/jBox.
$("[data-jbox-content-from]").each(function() {
new jBox("Tooltip", {
theme: "TooltipDark",
id: "jBoxTooltip_" + $(this).attr("id"),
getTitle: "data-jbox-title",
content: $($(this).attr("data-jbox-content-from")),
attach: "#" + $(this).attr("id")
}).attach();
});
Complete fiddle here
You approach is correct. But you need to put your code into domready:
$(document).ready(function () {
$("[data-jbox-content-from]").each(function() {
new jBox("Tooltip", {
theme: "TooltipDark",
id: "jBoxTooltip_" + $(this).attr("id"),
getTitle: "data-jbox-title",
content: $($(this).attr("data-jbox-content-from")),
attach: "#" + $(this).attr("id")
});
});
});
Also notice that I removed the .attach() method after new jBox. jBox does that when it initializes.
See updated fiddle: https://jsfiddle.net/StephanWagner/kqgxcda1/1/
I'm trying to implement svg.js to make a map of a clickable floorplan.
But I cannot make this work properly, or this works but doesn't work like I expected:
const map = SVG.get('mysvg');
map.click(function( event ) {
this.fill({ color: '#000' });
console.log(this);
console.log(event.target);
});
When I try to click on some area on the map, instead of change fill color I get nothing.
Actually svgjs triggers 'create' as you can see in console with inspector.
Not sure what am I doing wrong here?
I would expect that the area will change fill color?
https://codepen.io/bobz-zg/pen/LdyXBe
You can use the select function as described here to create a Set. You'd then use the each() method from Set to iterate over each entry and apply the click event handler. For example:
const map = SVG.get("mysvg");
var restaurants = map.select('[id*="restaurant"]:not(g)'); // Create an svg.js Set, but do not capture the group in the set
restaurants.each(function() {
this.click(function(event) {
this.fill({ color: "#000" });
});
});
If you can edit the svg that you are using as an input, I would suggest adding a class to each of the clickable elements to use that as the reference for select. Otherwise, you'll have to do something like selecting all element id 'types' (i.e. restaurant, retail etc.) separately and concatenating the Sets using Set.add() before you do the loop to add the click listener, but that could get messy.
I'm using the plugin Leaflet.Control.Search to search markers in a layer group, which works fine. Once the marker has been found, the map already automatically pans to the center of the respective location, and the marker popup is being opened.
Now, on search, I would like to set the map's zoom level to a fixed value.
My map's initial zoom level is 12 – but once someone uses the search i'd like to set it to 16. How could this be achieved? I tried to implement setZoom, but I'm not sure how the correct syntax should be..
The code looks like this at the moment:
var searchControl = new L.Control.Search({layer: markers2, propertyName: 'Name', circleLocation:true});
searchControl.on('search_locationfound', function(e) {
e.layer.openPopup().openOn(map);
map.setZoom(16);
});
map.addControl( searchControl );
Thanks a lot for any hints!
ps: when i put map.setZoom(16); BEFORE e.layer.openPopup().openOn(map); then the zoom works fine, but the popup doesn't open like it should – it only opens when I hit search again…
Have you tried map.setZoom(16);instead of this in your "on location found" listener?
Alternatively, you might want to try the map.setView(). It takes a lat/lng and zoom level. You can either take in the marker's lat/lng or the popup's lat/lng
Try editing the plugin, commenting the zoom option (line 26)
_config: {
country: '',
searchLabel: 'buscar en el mapa...',
notFoundMessage: 'destino no hallado',
messageHideDelay: 3000,
/*zoomLevel: 18*/
},
I did it another way.
After the
propertyName
I put
zoom: 16
The code looks like this:
var searchControl = new L.Control.Search({
layer: allLayers,
propertyName: 'myKey',
zoom: 16
}).addTo(map);
I'm using the wonderful plugin Leaflet.Control.Search in order to search for markers (from a geoJson marker group) on my map – which works great.
I only have one simple question now:
how can I open a popup for the search result marker?
I'm using custom marker icons with popups (which open on click) already bound to them – but I would like to open the respective popup automatically once it has been found via the search.
My code looks like this:
var searchControl = new L.Control.Search({layer: markers2, propertyName: 'Name', circleLocation:true});
searchControl.on('search_locationfound', function(e) {
e.layer.bindPopup(feature.properties.Name).openPopup();
}).on('search_collapsed', function(e) {
markers2.resetStyle(layer);
});
map.addControl( searchControl ); //inizialize search control
and thought it might work with that line:
e.layer.bindPopup(feature.properties.Name).openPopup();
but unfortunately it doesn't.. ;)
–
Oh, and a second question: at the moment I'm searching only in 1 geoJson layer ("markers2") – does anyone know whether it's possible to search in multiple layers at once?
Any suggestions? I'd be grateful for any help, thanks in advance!
got it: it works like this: e.layer.openPopup().openOn(map);
event.layer is set only for preloaded layer, if you search marker by ajax,jsonp or callData.. event.layer is undefined.
var geojsonLayer = new L.GeoJSON(data, {
onEachFeature: function(feature, marker) {
marker.bindPopup(feature.properties.name);
}
});
map.addLayer(geojsonLayer);
var controlSearch = new L.Control.Search({layer: geojsonLayer, initial: false});
controlSearch.on('search_locationfound', function(event) {
event.layer.openPopup();
});
Look at GeoJSON demo:
https://opengeo.tech/maps/leaflet-search/examples/geojson-layer.html
Recently, I was looking for an answer, and here is my solution for it
searchControl.on("search:locationfound", function (e) {
if (e.layer._popup) e.layer.openPopup();
});
As am totally new to YUI i dont have any clue about.I have just gone through this link to implement autocomplete using YUI http://developer.yahoo.com/yui/autocomplete/.
According to my requirement i need to assign a string array dynamically to datasource object instead of
var dsLocalArray = new YAHOO.util.LocalDataSource(["apples", "broccoli", "cherries"]);
something like
var dsLocalArray=new YAHOO.util.LocalDataSource(documentList[]);
where my documentList is String Array.How do i that?Thanks in advance for the help.
I would suggest you to use YUI3 than YUI2, the example you are showing which uses the YAHOO namespace which is YUI2.
YUI3 is simpler and better, you can get the docs here:
http://yuilibrary.com/yui/docs/autocomplete/
Example of implementing with YUI3 including highlighting feature:
YUI().use('autocomplete', 'autocomplete-filters', 'autocomplete-highlighters', function (Y) {
Y.one('#ac-input').plug(Y.Plugin.AutoComplete, {
resultFilters : 'phraseMatch',
resultHighlighter: 'phraseMatch',
source : ['Alabama','Alaska','Arizona','Arkansas','California']
});
});
Try to lok into the examples at the right bottom side panel in the above docs link.