Develop Reference

Firefox very slow with forEachFeatureatPixel

Firefox and IE are operating REALLY slowly with OPENLAYERS 3 when using the forEachFeatureatPixel function. I'm trying to find a way to speed it up. Essentially, the application (found at www.penguinmap.com) has as popup that comes up when the user hovers over a point on the map. But Firefox struggles with this feature. I'm looking for help with the following code to speed it up:
var selectMouseMove = new ol.interaction.Select({
condition: function (e) {
return e.originalEvent.type == 'mousemove';
},
style: hoverStyle
})
// Change cursor
var target = map.getTarget();
var jTarget = typeof target === "string" ? $("#" + target) : $(target);
// On Hover, change the mouse cursor and display the name of the site
$(map.getViewport()).on('mousemove', function (e) {
var pixel = map.getEventPixel(e.originalEvent);
var feature = map.forEachFeatureAtPixel(pixel,
function (feature, layer) {
return feature;
});
if (feature) {
map.addInteraction(selectMouseMove)
jTarget.css("cursor", "pointer");
var geometry = feature.getGeometry();
var coord = geometry.getCoordinates();
popup.setPosition(coord);
$(element).popover({
'placement': 'top',
'html': true,
'content': feature.get('site_name')
});
$(element).popover('show');
} else {
map.removeInteraction(selectMouseMove)
jTarget.css("cursor", "");
$(element).popover('destroy');
}
});
var element = document.getElementById('popup');
var popup = new ol.Overlay({
element: element,
positioning: 'bottom-center',
stopEvent: false
});
map.addOverlay(popup);

I solved this problem for points only (I had the slow performance problem also on IE 11) with an own function.
// Alternative FeatureAtPixel-Function wegen FF
// Sucht im Rechteck vom Punkt pixel aus in +/- x und +/- y
function FFIE_getFeatureAtPixelQuadrat(pixel, DiffCoord) {
result = [];
mousepixel = map.getCoordinateFromPixel(pixel);
f = vectorSource.getFeatures();
c = 0;
for (var i in f) {
if (f[i].point.flatCoordinates[0] > mousepixel[0] - DiffCoord && f[i].point.flatCoordinates[0] < mousepixel[0] + DiffCoord ) {
if (f[i].point.flatCoordinates[1] > mousepixel[1] - DiffCoord && f[i].point.flatCoordinates[1] < mousepixel[1] + DiffCoord ) {
c++;
result.push(f[i]);
}}
}
if (c > 0) {
return result;
}
}
The parameter DiffCoord I get on "moveend" event:
// Event, wenn Zoom neu gesetzt
map.on("moveend", function(evt) {
// Berechnen flatCoordinates per Pixel
var pixel = [0,0];
startx = map.getCoordinateFromPixel(pixel)[0];
pixel = [1,1];
endx = map.getCoordinateFromPixel(pixel)[0];
DiffCoord = (endx-startx) * 8; // 8 entspricht den +/- Pixeln in flatCoordinates
});
Now IE and FF seems to be equal fast than Chrome for the popup on mousemove.
This example is only for points because it searches the feature in a square around the origin of the point.
I hope this helps?

Call inner Javascript functions from .js file

I'm working on an ASP.NET MVC 4 application. I am using the GetUikit css library which also offers some basic javascript/ jQuery powered stuff. I'm using the Off canvas component which is actually working.
Getuikit: https://github.com/uikit/uikit http://getuikit.com/index.html
Offcanvas Component: http://getuikit.com/docs/offcanvas.html
I can call the offcanvas as advertised via an anchor tag. That's no problem at all. I would want to be able to hide and show the offcanvas area from javascript. I've tracked down the specific Javascript section in the UIKit provided .js file. This section looks like this:
(function($, UI) {
"use strict";
var $win = $(window),
$doc = $(document),
Offcanvas = {
show: function(element) {
element = $(element);
if (!element.length) return;
var doc = $("html"),
bar = element.find(".uk-offcanvas-bar:first"),
rtl = ($.UIkit.langdirection == "right"),
dir = (bar.hasClass("uk-offcanvas-bar-flip") ? -1 : 1) * (rtl ? -1 : 1),
scrollbar = dir == -1 && $win.width() < window.innerWidth ? (window.innerWidth - $win.width()) : 0;
scrollpos = {x: window.scrollX, y: window.scrollY};
element.addClass("uk-active");
doc.css({"width": window.innerWidth, "height": window.innerHeight}).addClass("uk-offcanvas-page");
doc.css((rtl ? "margin-right" : "margin-left"), (rtl ? -1 : 1) * ((bar.outerWidth() - scrollbar) * dir)).width(); // .width() - force redraw
bar.addClass("uk-offcanvas-bar-show").width();
setTimeout(function() {
/*SELF ADDED FOR ARROW*/
var elementArrow = document.getElementById('notification-arrow');
$(elementArrow).css("display", "inline-block");
/*--------------------*/
}, 250);
element.off(".ukoffcanvas").on("click.ukoffcanvas swipeRight.ukoffcanvas swipeLeft.ukoffcanvas", function(e) {
var target = $(e.target);
if (!e.type.match(/swipe/)) {
if (!target.hasClass("uk-offcanvas-close")) {
if (target.hasClass("uk-offcanvas-bar")) return;
if (target.parents(".uk-offcanvas-bar:first").length) return;
}
}
e.stopImmediatePropagation();
Offcanvas.hide();
});
$doc.on('keydown.ukoffcanvas', function(e) {
if (e.keyCode === 27) { // ESC
Offcanvas.hide();
}
});
},
hide: function(force) {
var doc = $("html"),
panel = $(".uk-offcanvas.uk-active"),
rtl = ($.UIkit.langdirection == "right"),
bar = panel.find(".uk-offcanvas-bar:first");
if (!panel.length) return;
/*SELF ADDED FOR ARROW*/
$('#notification-arrow').css("display", "none");
/*--------------------*/
if ($.UIkit.support.transition && !force) {
doc.one($.UIkit.support.transition.end, function() {
doc.removeClass("uk-offcanvas-page").attr("style", "");
panel.removeClass("uk-active");
window.scrollTo(scrollpos.x, scrollpos.y);
}).css((rtl ? "margin-right" : "margin-left"), "");
setTimeout(function(){
bar.removeClass("uk-offcanvas-bar-show");
}, 50);
} else {
doc.removeClass("uk-offcanvas-page").attr("style", "");
panel.removeClass("uk-active");
bar.removeClass("uk-offcanvas-bar-show");
window.scrollTo(scrollpos.x, scrollpos.y);
}
panel.off(".ukoffcanvas");
$doc.off(".ukoffcanvas");
}
}, scrollpos;
var OffcanvasTrigger = function(element, options) {
var $this = this,
$element = $(element);
if($element.data("offcanvas")) return;
this.options = $.extend({
"target": $element.is("a") ? $element.attr("href") : false
}, options);
this.element = $element;
$element.on("click", function(e) {
e.preventDefault();
Offcanvas.show($this.options.target);
});
this.element.data("offcanvas", this);
};
OffcanvasTrigger.offcanvas = Offcanvas;
UI["offcanvas"] = OffcanvasTrigger;
// init code
$doc.on("click.offcanvas.uikit", "[data-uk-offcanvas]", function(e) {
e.preventDefault();
var ele = $(this);
if (!ele.data("offcanvas")) {
var obj = new OffcanvasTrigger(ele, UI.Utils.options(ele.attr("data-uk-offcanvas")));
ele.trigger("click");
}
});
})(jQuery, jQuery.UIkit);
I found one similar thread on Stackoverflow (How can I access the inner functions of this script?) which suggested I'd need to use the following method:
jQuery.UIkit.offcanvas.offcanvas.show('#alerts-canvas');
Where #alerts-canvas is the id of my offcanvas area. When I try to call this from javascript I get the following Javascript error: Uncaught TypeError: Cannot read property 'offcanvas' of undefined.
I have no idea what I'm doing wrong, but I really hope this will work because I really need this to work.
I made sure the script is linked (this happens for all pages in the general _Layout page.
Do you guys have any idea what I might be doing wrong?

try
$.UIkit.offcanvas.show('#alerts-canvas');

How to drag an image to move it smoothly on screen, using jquery in ie8

I am working on a project where we can move an image like in google map,, it works perfectly in crome,ff and above ie9, but when i checked in ie8 the image is not moving smoothly,it takes a 2 to 3 sec of time to move.
/* Map dragging */
var previousX;
var previousY;
var previousLeft;
var previousTop;
var cids = self.data.cuLocation;
var lumids = self.data.lumLocation;
$('#MapView img').css( 'cursor', 'pointer' );
$("#MapView img").mousedown(function(e) {
//console.log("mousedown");
e.preventDefault();
drag.state = true;
previousX = e.originalEvent.clientX;
previousY = e.originalEvent.clientY;
previousLeft = $("#MapView img").position().left;
previousTop = $("#MapView img").position().top;
});
$("#MapView img").mousemove(function(e) {
var old_pos = self.getPosition();
if (drag.state) {
e.preventDefault();
drag.x = e.originalEvent.clientX - previousX;
drag.y = e.originalEvent.clientY - previousY;
var cur_position = $("#MapView img").position();
var new_left = cur_position.left + drag.x;
var new_top = cur_position.top + drag.y;
previousX = e.originalEvent.clientX;
previousY = e.originalEvent.clientY;
}
});
$("#MapView img").mouseleave(function(e) {
//console.log("mouseleave");
drag.state = false;
});
$(document).mouseup(function(e) {
// alert("mouseup");
drag.state = false;
});

Use the following Link for your better understanding in Draggable event so than you can use it to Drag your Image wherever you want.
http://jqueryui.com/draggable/
and for Drap & Drop of one element onto other element ::
http://jqueryui.com/draggable/#snap-to

Standalone jQuery "touch" method?

So, I'm looking to implement the ability for a plugin I wrote to read a touch "swipe" from a touch-capable internet device, like an iPhone, iPad or android.
Is there anything out there? I'm not looking for something as full as jQtouch, though was considering reverse engineering the code I would need out of it.
Any suggestions on the best way to approach this? A snippet of code already available?
Addendum: I realize in hindsight the solution won't strictly be jQuery, as I'm pretty sure there aren't any built-in methods to handle this. I would expect standard Javascript to find itself in the answer.

(function($) {
$.fn.swipe = function(options) {
// Default thresholds & swipe functions
var defaults = {
threshold: {
x: 30,
y: 10
},
swipeLeft: function() { alert('swiped left') },
swipeRight: function() { alert('swiped right') },
preventDefaultEvents: true
};
var options = $.extend(defaults, options);
if (!this) return false;
return this.each(function() {
var me = $(this)
// Private variables for each element
var originalCoord = { x: 0, y: 0 }
var finalCoord = { x: 0, y: 0 }
// Screen touched, store the original coordinate
function touchStart(event) {
console.log('Starting swipe gesture...')
originalCoord.x = event.targetTouches[0].pageX
originalCoord.y = event.targetTouches[0].pageY
}
// Store coordinates as finger is swiping
function touchMove(event) {
if (defaults.preventDefaultEvents)
event.preventDefault();
finalCoord.x = event.targetTouches[0].pageX // Updated X,Y coordinates
finalCoord.y = event.targetTouches[0].pageY
}
// Done Swiping
// Swipe should only be on X axis, ignore if swipe on Y axis
// Calculate if the swipe was left or right
function touchEnd(event) {
console.log('Ending swipe gesture...')
var changeY = originalCoord.y - finalCoord.y
if(changeY < defaults.threshold.y && changeY > (defaults.threshold.y*-1)) {
changeX = originalCoord.x - finalCoord.x
if(changeX > defaults.threshold.x) {
defaults.swipeLeft()
}
if(changeX < (defaults.threshold.x*-1)) {
defaults.swipeRight()
}
}
}
// Swipe was canceled
function touchCancel(event) {
console.log('Canceling swipe gesture...')
}
// Add gestures to all swipable areas
this.addEventListener("touchstart", touchStart, false);
this.addEventListener("touchmove", touchMove, false);
this.addEventListener("touchend", touchEnd, false);
this.addEventListener("touchcancel", touchCancel, false);
});
};
})(jQuery);
$('.swipe').swipe({
swipeLeft: function() { $('#someDiv').fadeIn() },
swipeRight: function() { $('#someDiv').fadeOut() },
})
and this is how you detect iphone
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
if (document.cookie.indexOf("iphone_redirect=false") == -1) window.location = "path to iphone page";
}

There's also jQuery.touchwipe at http://www.netcu.de/jquery-touchwipe-iphone-ipad-library

The smallest and most jQuery-esque solution is here: https://github.com/eikes/jquery.swipe-events.js

textarea autogrow functionality jitters with every keystroke

I was playing around with the jquery autogrow plugin, which expands the height of the text automatically as the text needs it. The problem is that with every key down, the bottom border of the textarea jitters in a noticeable way. I'm not sure what the problem could be, so I'm going to go out on a limb and post the 132 lines of this GPL plugin here. Any hints where the problem could be or how to circumvent it?
/*
Auto Expanding Text Area (1.2.2) by Chrys Bader */
(function(jQuery) {
var self = null;
jQuery.fn.autogrow = function(o){
return this.each(function() {
new jQuery.autogrow(this, o);
});
};
/**
* The autogrow object.
*
* #constructor
* #name jQuery.autogrow
* #param Object e The textarea to create the autogrow for.
* #param Hash o A set of key/value pairs to set as configuration properties.
* #cat Plugins/autogrow
*/
jQuery.autogrow = function (e, o) {
this.options = o || {};
this.dummy = null;
this.interval = null;
this.line_height = this.options.lineHeight || parseInt(jQuery(e).css('line-height'));
this.min_height = this.options.minHeight || parseInt(jQuery(e).css('min-height'));
this.max_height = this.options.maxHeight || parseInt(jQuery(e).css('max-height'));;
this.textarea = jQuery(e);
if(this.line_height == NaN) this.line_height = 0;
// Only one textarea activated at a time, the one being used
this.init();
};
jQuery.autogrow.fn = jQuery.autogrow.prototype = { autogrow: '1.2.2' };
jQuery.autogrow.fn.extend = jQuery.autogrow.extend = jQuery.extend;
jQuery.autogrow.fn.extend({ init: function(){
var self = this;
this.textarea.css({overflow: 'hidden', display: 'block'});
this.textarea.bind('focus', function(){ self.startExpand() }).bind('blur', function() { self.stopExpand() });
this.checkExpand();
},
startExpand: function() {
var self = this;
this.interval = window.setInterval(function() { self.checkExpand()}, 400); },
stopExpand: function() { clearInterval(this.interval); },
checkExpand: function() {
if (this.dummy == null) {
this.dummy = jQuery('<div></div>');
this.dummy.css({
'font-size' : this.textarea.css('font-size'),
'font-family': this.textarea.css('font-family'),
'width' : this.textarea.css('width'),
'padding' : this.textarea.css('padding'),
'line-height': this.line_height + 'px',
'overflow-x' : 'hidden',
'position' : 'absolute',
'top' : 0,
'left' : -9999
}).appendTo('body');
}
// Strip HTML tags
var html = this.textarea.val().replace(/(<|>)/g,'');
// IE is different, as per usual
if ($.browser.msie){
html = html.replace(/\n/g, '<BR>new');
} else {
html = html.replace(/\n/g, '<br>new');
}
if (this.dummy.html() != html){
this.dummy.html(html);
if (this.max_height > 0 && (this.dummy.height() + this.line_height > this.max_height)){
this.textarea.css('overflow-y', 'auto');
} else {
this.textarea.css('overflow-y', 'hidden');
if (this.textarea.height() < this.dummy.height() + this.line_height || (this.dummy.height() < this.textarea.height())) {
this.textarea.animate({height: (this.dummy.height() + this.line_height) + 'px'}, 100);
}
}
}
}
});
})(jQuery);

In regard to jeerose's comment:
http://www.aclevercookie.com/aclevercookiecom-breached-problem-resolved/
It has been brought to my attention by
visitors that their virus protection
goes off when they come to this blog.
I investigated the matter and found
that harmful code had been injected
into the source of the site.
This has been resolved and measures
have been taken to increase the
security of the site.
Thanks for the report, and I apologize
for the alarm.
Which doesn't seem to be true. As my antivirus still fires when opening that site