I've been having issues trying to get Isotope to render properly.
I've tried a few different ways to get it to work, including using the imagesLoad function, to no avail.
You can view the page here: http://wpsanjose.com/#latest-posts
If you select "ALL", you'll see the proper margins appear which is what I'm after when it first pops up.
This is the code I'm using:
(function($) {
$(window).load(function() {
//Set the isotope area
var $container = $('#isotope-wrap');
//Set our items to be filtered and how to display
$container.isotope({
itemSelector: 'article',
masonry: {
columnWidth: 1
}
});
var $filterSets = $('.options'),
$filterLinks = $filterSets.find( 'a' );
$filterLinks.click(function() {
var $this = $(this);
// don't do anything if already selected
if ( $this.hasClass('selected') ) {
return false;
}
var $filterSet = $this.parents('.options');
$filterSet.find('.selected' ).removeClass('selected');
$this.toggleClass('selected');
})
// filter items when filter link is clicked
jQuery('#filters a').click(function(){
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector
});
return false;
})
});
$(".entry").hover(
function() {
$(".article-outer", this).stop().animate({top: '-1000px'},{queue: false, duration: 700});
},
function() {
$(".article-outer", this).stop().animate({top: '0px'},{queue: false, duration: 700});
});
})(jQuery);
any help would be greatly appreciated!
Related
I am trying to load the carousel (swiper slider) inside some tabs in Elementor WordPress. The carousel works fine before clicking on tabs, but whenever I click on tabs, the carousel shows but does not "slide".
I have seen few questions regarding this topic and tried their solutions, but no luck.
Right now, I am trying this code in (child-theme/function.php) which is giving me an error:
Error -> "Uncaught TypeError: Cannot read property 'params' of undefined"
add_action('wp_footer', 'swiperCarousel', 9999999999);
function swiperCarousel() {
?>
<script>
var refreshSliders = function(){
jQuery( ".swiper-container" ).each(function( index ) {
swiperInstance = jQuery(this).data('swiper');
swiperInstance.params.observer = true;
swiperInstance.params.observeParents = true;
swiperInstance.update();
});
}
window.onload = function()
{
console.log('Document loaded');
jQuery("#aws-carousel-switcher").on("click", function(){
console.log('Tab has been clicked');
var $this = jQuery(this);
refreshSliders();
jQuery('html,body').animate({
scrollTop: $this.offset().top - 220
}, 500);
});
}
</script>
<?php
}
The error is being generated from this line:
swiperInstance.params.observer = true;
this will work for you.
jQuery(".swiper-container li").click(function(){
setTimeout(function(){ window.dispatchEvent(new Event('resize')); }, 1000);
})
select your respective tab selector.
Can anyone tell me how to show all popup of markers in openlayers 3 map. I searched many sites but couldn't get any answer please anyone know about this then help me
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.TileJSON({
url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure',
crossOrigin: 'anonymous'
})
})
],
overlays: [overlay],
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([0, 50]),
zoom: 2
})
});
var vectorSource = new ol.source.Vector({
features: [
new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([16.37, 48.2])),
name: 'London'
}),
new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([-0.13, 51.51])),
name: 'NY'
}),
new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([30.69, 55.21])),
name: 'Paris'
})
]
});
var markers = new ol.layer.Vector({
source: vectorSource,
style: new ol.style.Style({
image: new ol.style.Icon({
src: '//openlayers.org/en/v3.12.1/examples/data/icon.png',
anchor: [0.5, 1]
})
})
});
map.addLayer(markers);
function showpopup(){
// For showing popups on Map
var arrayData = [1];
showInfoOnMap(map,arrayData,1);
function showInfoOnMap(map, arrayData, flag) {
var flag = 'show';
var extent = map.getView().calculateExtent(map.getSize());
var id = 0;
var element = document.getElementById('popup');
var popup = new ol.Overlay({
element: element,
positioning: 'center'
});
map.addOverlay(popup);
if (arrayData != null && arrayData.length > 0) {
arrayData.forEach(function(vectorSource) {
/* logMessage('vectorSource >> ' + vectorSource); */
if (vectorSource != null && markers.getSource().getFeatures() != null && markers.getSource().getFeatures().length > 0) {
markers.getSource().forEachFeatureInExtent(extent, function(feature) {
/* logMessage('vectorSource feature >> ' + feature); */
console.log("vectorSource feature >> " + markers.getSource().getFeatures());
if (flag == 'show') {
var geometry = feature.getGeometry();
var coord = geometry.getCoordinates();
popup.setPosition(coord);
/* var prop;
var vyprop = ""; */
$(element).popover({
'position': 'center',
'placement': 'top',
'template':'<div class="popover"><div class="popover-content"></div></div>',
'html': true,
'content': function() {
var string = [];
var st = feature.U.name;
if (st != null && st.length > 0) {
var arrayLength = 1;
string = "<table>";
string += '<tr><td>' + st + "</table>";
}
return string;
}
});
$(element).popover('show');
} else {
$(element).popover('destroy');
}
});
}
});
}
};
}
I used this code in my file but it show only one popup on all markers please someone tell me how to show all markers popup simultaneously.
I'm not sure exactly what you're trying to show in your popups, but I would probably try this approach. This extends the ol.Overlay class, allowing you to get the map object and attach a listener which you can use to grab the feature that was clicked. Is this what you're trying to accomplish?
function PopupOverlay() {
var element = document.createElement('div');
$(element).popover({
template: '<div class="popover"><div class="popover-content"></div></div>',
placement: 'top',
position: 'center',
html: true
});
ol.Overlay.call(this, {
element: element
});
}
ol.inherits(PopupOverlay, ol.Overlay);
PopupOverlay.prototype.setMap = function (map) {
var self = this;
map.on('singleclick', function (e) {
map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
ol.Overlay.prototype.setPosition.call(self, feature.getGeometry().getCoordinates());
var el = self.getElement();
$(el).data('bs.popover').options.content = function () {
// EDIT THE POPOVER CONTENT
return feature.get('name');
};
$(el).popover('show');
});
});
ol.Overlay.prototype.setMap.call(this, map);
};
Check out this example
So after your comment, I see what you're trying to do now. I would say that you want to take the same basic approach, make a class that overrides ol.Overlay, but this time just loop through all the features, creating an overlay for each feature.
This Updated Example
function PopoverOverlay(feature, map) {
this.feature = feature;
var element = document.createElement('div');
$(element).popover({
template: '<div class="popover"><div class="popover-content"></div></div>',
placement: 'top',
position: 'center',
html: true
});
ol.Overlay.call(this, {
element: element,
map: map
});
};
ol.inherits(PopoverOverlay, ol.Overlay);
PopoverOverlay.prototype.togglePopover = function () {
ol.Overlay.prototype.setPosition.call(this, this.feature.getGeometry().getCoordinates());
var self = this;
var el = this.getElement();
$(el).data('bs.popover').options.content = function () {
// EDIT THE POPOVER CONTENT
return self.feature.get('name');
};
$(el).popover('toggle');
};
// create overlays for each feature
var overlays = (function createOverlays () {
var popupOverlays = [];
vectorSource.getFeatures().forEach(function (feature) {
var overlay = new PopoverOverlay(feature, map);
popupOverlays.push(overlay);
map.addOverlay(overlay);
});
return popupOverlays;
})();
// on click, toggle the popovers
map.on('singleclick', function () {
for(var i in overlays) {
overlays[i].togglePopover();
}
});
Now when you click anywhere on the map, it should call the togglePopover method and toggle the popover on the individual element.
In a application, I am using google map to display stations with google marker, because the google marker is static with icon not animated, so I decided to inherit OverlayView and use canvas to draw a station dynamically. And this works, however, I want this overlay to receive the google events like the marker, such as click, mouse over, mouse out...
For example,
function StationCanvas(map, position, name) {
this.map_ = map;
this.position_ = position;
this.name_ = name;
this.canvas_ = null;
this.labelDiv_ = null;
this.canvasWidth_ = 12;
this.canvasHeight_ = 50;
this.setMap(map);
console.log('canvas '+this.position_);
}
StationCanvas.prototype = new google.maps.OverlayView();
StationCanvas.prototype.onAdd = function() {
var canvas = document.createElement("canvas");
canvas.setAttribute("width", this.canvasWidth_);
canvas.setAttribute("height", this.canvasHeight_);
canvas.style.position = "absolute";
this.canvas_ = canvas;
var panes = this.getPanes();
panes.floatPane.appendChild(canvas);
this.labelDiv_ = document.createElement("div");
this.labelDiv_ .setAttribute("width", this.canvasWidth_);
this.labelDiv_ .setAttribute("height", this.canvasHeight_);
this.labelDiv_ .style.position = "absolute";
this.labelDiv_ .innerHTML = this.name_;
panes.floatPane.appendChild(this.labelDiv_ );
/////////////////////////////////////////////////////////////
this.listeners_ = [
google.maps.event.addListener(this.canvas_, "mouseover", function (e) {
//this.style.cursor = "pointer";
//google.maps.event.trigger(this, "mouseover", e);
console.log('mouse mover');
}),
google.maps.event.addListener(this.canvas_, "mouseout", function (e) {
//this.style.cursor = this.getCursor();
//google.maps.event.trigger(this, "mouseout", e);
console.log('mouse out');
}),
google.maps.event.addListener(this.canvas_, "click", function (e) {
google.maps.event.trigger(this, "click", e);
console.log('click');
}),
google.maps.event.addListener(this.canvas_, "dblclick", function (e) {
//google.maps.event.trigger(this, "dblclick", e);
}),
];
}
Intially, I use google.maps.event.addListener as showed above to listen the event, nothing happens, so it seems canvas doesn't work with google.maps.eventListener.
Then I found google has provided a addDomListener(instance:Object, eventName:string, handler:Function), but since it only support dom rather then canvas, so when I used that listener, the browser breaks down.
At last, I have tried to use
canvas.onmouseout = function() {
console.log("on mouse out");
}
}
It is supposed to work, but still no, I guess something wrong within the code. even this works, the next question is how can I trigger the event to outside, so that I can work this overlayview like the google marker
var test1 = new StationCanvas(map, new google.maps.LatLng(53.3234,-2.9178), "abc",13);
google.maps.event.addListener(test1, 'click', function(event){
console.log('test 1 click');
});
addDomListener works for me, even with <canvas/>
What would break your code is e.g. this:
google.maps.event.addListener(this.canvas_, "click", function (e) {
google.maps.event.trigger(this, "click", e);
console.log('click');
})
this , when used in a event-callback, refers to the object that triggers the event(here: the canvas-node), your code produces a recursion. When you want to trigger the click-event for the StationCanvas-instance, you may store the instance as a property of the canvas-element, so it will be easy accessible inside the click-callback
StationCanvas.prototype.onAdd = function() {
var canvas = document.createElement("canvas");
canvas.overlay=this;
//more code
}
this.listeners_ = [
google.maps.event.addDomListener(this.canvas_, "click", function (e) {
google.maps.event.trigger(this.overlay,'click')
}),
google.maps.event.addListener(this, "click", function (e) {
alert('click on the StationCanvas-instance');
})
];
following this example http://www.keypointpartners.com/test/mab/fromxml1.html and Google Maps API v3 documentation (https://developers.google.com/maps/documentation/javascript/streetview) I've put together a map that loads markers from an XML file and display a tabbed infowindow for each loaded marker. Wishing to check if a location actually has a streetview available, I've modified my createMarker to this:
function createMarker(latlng, name, html) {
//var contentString = html;
var contentString = [
'',
'',
name,
'',
'',
'Località',
'Struttura',
'Voli',
//'Opzioni',
'Streetview',
'',
html,
''
].join('');
// Create a marker
var marker = new google.maps.Marker({
position: latlng,
title: name,
map: inc_map
});
// Add a listener to the marker to populate and open the infowindow
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(inc_map, marker);
google.maps.event.addListener(infowindow, 'domready', function() {
inc_sv.getPanoramaByLocation(marker.position, 50, processSVData);
//console.log("Adding tabs");
$('#tabs').tabs();
});
});
Tha callback function used by getPanoramaByLocation is as follows:
function processSVData(data, status) {
if (status == google.maps.StreetViewStatus.OK) {
google.maps.event.addListener(infowindow, 'domready', function() {
$('#stv-lnk').click(function() {
var panoramaOptions = {
position: data.location.latLng,
visible: true,
linksControl: false,
panControl: false,
addressControl: false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
enableCloseButton: false
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById("stvpano"), panoramaOptions);
inc_map.setStreetView(panorama);
});
});
} else {
google.maps.event.addListener(infowindow, 'domready', function() {
$('#stv-lnk').click(function() {});
document.getElementById("stvpano").innerHTML = "Streetview non è disponibile per questo luogo"
});
}
}
Now, what happens is that first streetview tab doesn't show anything, while next clicked streetview tabs show previous tab's streetview. Comparing to the abovementioned example from API docs, I build a separate StreetViewPanorama object for each tab (while the example uses a global panorama var to hold it).
Is this my mistake? Or...?
Link at the actual page: http://turom-mice.it/condorincentive/incentive.html
Any help/suggestion greatly appreciated!
Cheers,
rash*
EDIT: ok, I solved one of the problems. I was nesting too many eventListener: I removed the ones inside function processSVData and each infowindow nows show the correct streetview. The code now looks like this:
function processSVData(data, status) {
if (status == google.maps.StreetViewStatus.OK) {
$('#stv-lnk').click(function() {
var panoramaOptions = {
position: data.location.latLng,
visible: true,
linksControl: false,
panControl: false,
addressControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
enableCloseButton: false
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById("stvpano"), panoramaOptions);
inc_map.setStreetView(panorama);
});
} else {
$('#stv-lnk').click(function() {
inc_map.setStreetView(null);
document.getElementById("stvpano").innerHTML = "Streetview non è disponibile per questo luogo"
});
}
}
Now, the problem is that the 'else' branch seems doing nothing: when a location has no streetview available, you see last shown streetview, no matter I've set it to null and put some warning text inside the div (I should show a link to a substitute gallery page though). question is: is this correct? Or...?
As usual, any help/hint/suggestion...
Ciao,
rash*
EDIT 2: ok, solved completely. The else branch didn't manage the click event, so putting it back in place solved. The code just above has been edited to reflect the solution.
Thanks anyway, waiting for an answer made me re-think the whole thing. Hope this could be of some help to anybody.
rash*
So I have like a list of users on a page. each user name is clickable and it displays the user information in the dialog. Right now I'm using a static length for the list.
I would like jquery to see how big the list of users is and apply the code to the list.
Check out the code here:
$(function() {
var options = {
autoOpen: false,
width: 'auto',
modal: true
};
$([1, 2, 3, 4]).each(function() {
var num = this;
var dlg = $('#dialog-player-' + num).dialog(options);
$('#player-link-' + num).click(function() {
dlg.dialog("open");
return false;
});
});
});
I looked at this page of the documentation: each
What I tried is to select all divs in container "div#parent". Like so:
$(function() {
var options = {
autoOpen: false,
width: 'auto',
modal: true
};
$("div#parent div").each(function() {
var num = this;
var dlg = $('#dialog-player-' + num).dialog(options);
$('#player-link-' + num).click(function() {
dlg.dialog("open");
return false;
});
});
});
But that didn't work. Anybody know of any other way to do this ?
I've noticed a bug in your code and fixed it for you:
$(function() {
var options = {
autoOpen: false,
width: 'auto',
modal: true
};
var num = 1;
$("div#parent div").each(function() {
var dlg = $('#dialog-player-' + num).dialog(options);
$('#player-link-' + num).click(function() {
dlg.dialog("open");
return false;
});
num = num + 1;
});
});
$(function() {
var options = {
autoOpen: false,
width: 'auto',
modal: true
};
$(['George', 'Ralph', 'Carmine', 'Suzy']).each(function(index, val) {
var num = index;
var dlg = $('#dialog-player-' + num).dialog(options);
$('#player-link-' + num).click(function() {
dlg.dialog("open");
return false;
});
});
});
You had the right idea the first time. Just use the index supplied by the each function. No need for a separate counter.
look up 'children' in the docs - I think you might need to cycle through the children of the element using each rather than what you have done. e.g.
$("div#parent").children('div').each(function(){etc...})