How do I specify the velocity and threshold, using jQuery Hammer?
$(window).load(function(){
$(function(){
var myElement = document.getElementById('myElement');
Hammer(myElement).on("swipeleft", function() {
console.log("drag left");
});
});
});
Don't know if you still need the answer, but your can change it like this:
var mc = new Hammer.Manager(myElement);
mc.add( new Hammer.Swipe({ velocity: 0.1, threshold: 0 }) );
Related
--I'm brand new to coding, but slowly working my way through fiddles. Your patience is appreciated!--
I'm working on creating a visual representation of the diaspora of a small village in Ukraine. I have so far found a fiddle that does what I need, up to a point. I'm having trouble with the following bits though:
I have no issue with a single var departure --> var arrival line animating, as per the original fiddle, but I can't quite find resources on how to add another line (whether same var departure or different).
I would also like to add multiple points along the same itinerary. Everything I've found uses a list of LatLng coordinates but I can't get that to animate.
Any help would be greatly appreciated! Thanks!
http://jsfiddle.net/bz4b9jkg/6/
var map;
$(document).ready(function () {
var latlng = new google.maps.LatLng(41.142556, -42.219561);
var myOptions = {
zoom: 2,
center: latlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map($('#map_canvas').get(0), myOptions);
var departure = new google.maps.LatLng(49.461686, 23.174658); //Set to whatever lat/lng you need for your departure location
var arrival = new google.maps.LatLng(40.6983279,-74.0433196); //Set to whatever lat/lng you need for your arrival location
var line = new google.maps.Polyline({
path: [departure, departure],
strokeColor: "#FF0000",
strokeOpacity: 0.7,
strokeWeight: 2,
geodesic: true, //set to false if you want straight line instead of arc
map: map,
});
var step = 0;
var numSteps = 250; //Change this to set animation resolution
var timePerStep = 5; //Change this to alter animation speed
var interval = setInterval(function() {
step += 1;
if (step > numSteps) {
clearInterval(interval);
} else {
var are_we_there_yet = google.maps.geometry.spherical.interpolate(departure, arrival, step / numSteps);
line.setPath([departure, are_we_there_yet]);
}
}, timePerStep);
line.setMap(map);
});
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
body{padding-top:25px;}
#map_canvas {
width: 100%;
height: 400px;
}
<script src="http://maps.google.com/maps/api/js?sensor=false&dummy=.js"></script>
<div class="container">
<div class="well">
<div id="map_canvas"></div>
</div>
</div>
So I have a functioning code (example here) to create a split screen of half google map Hybrid view and then when you click somewhere on that map (left side) then (right side) opens street view for that location.
I want to have a marker on the hybrid map side that when clicked on opens an info window on that side and then the street view for that location on the right side of the screen. But I can't seem to figure out how to code in that marker to open as an info window/bubble on the left side map?
Here's the code currently (including the mistake I've made as it doesn't work):
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var myCenter = new google.maps.LatLng(42.315126 , -72.63455);
var DoYouFeel = new google.maps.LatLng(42.315148 , -72.634429)
var sv = new google.maps.StreetViewService();
var panorama;
function initialize() {
panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'));
// Set up the map
var mapOptions = {
center: myCenter,
zoom: 16,
mapTypeId: google.maps.MapTypeId.HYBRID,
streetViewControl: false
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
//Set up the markers
var marker = new google.maps.Marker({
position: DoYouFeel,
});
marker.setMap(map);
google.maps.event.addListener(marker, 'click', function() {
bubble = new google.maps.InfoWindow({
content: '<div id="mydiv"><br><embed src="Do You Feel....mov" width="720" height="576" align="center"><br><br></div>'
})
bubble.open(map, marker);
});
// getPanoramaByLocation will return the nearest pano when the
// given radius is 50 meters or less.
google.maps.event.addListener(map, 'click', function(event) {
sv.getPanoramaByLocation(event.latLng, 50, processSVData);
});
}
function processSVData(data, status) {
if (status == google.maps.StreetViewStatus.OK) {
var marker = new google.maps.Marker({
position: data.location.latLng,
map: map,
title: data.location.description
});
panorama.setPano(data.location.pano);
panorama.setPov({
heading: 270,
pitch: 0
});
panorama.setVisible(true);
google.maps.event.addListener(marker, 'click', function() {
var markerPanoID = data.location.pano;
// Set the Pano to use the passed panoID
panorama.setPano(markerPanoID);
panorama.setPov({
heading: 270,
pitch: 0
});
panorama.setVisible(true);
});
} else {
alert('Street View data not found for this location.');
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Check out my html5 based clipping constraint on
http://shedlimited.debrucellc.com/test3/canvaskinclip.html
(messing with jsfiddle on http://jsfiddle.net/aqaP7/4/)
So, in html5 I can easily draw a shaped boundary like the following:
context.beginPath();
context.moveTo(5, 5);
context.lineTo(34, 202);
context.lineTo(2, 405);
context.lineTo(212, 385);
context.lineTo(425, 405);
context.lineTo(400, 202);
context.lineTo(415, 10);
context.lineTo(212, 25);
context.clip();
In kinetic.js though, all I see for clipping options is: height, width, and x, y,
I came across the following : Mask/Clip an Image using a Polygon in KineticJS, but the inner/fill image can't be set to draggable
any help please!
In the new kineticJS versions, a lot of the work is done in the background for you.
Take a look at this tutorial:
This fiddle gets you pretty close, here's the code:
<body>
<div id="container"></div>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.0-beta2.js"></script>
<script>
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
// get num of sources
for(var src in sources) {
numImages++;
}
for(var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if(++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
function draw(images) {
var stage = new Kinetic.Stage({
container: 'container',
width: 600,
height: 700
});
var layer = new Kinetic.Layer();
var patternPentagon = new Kinetic.RegularPolygon({
x: 220,
y: stage.getHeight() / 4,
sides: 5,
radius: 70,
fillPatternImage: images.yoda,
fillPatternOffset: [-220, 70],
stroke: 'black',
strokeWidth: 4,
draggable: true
});
patternPentagon.on('dragmove', function() {
//this.setFillPatternImage(images.yoda);
//this.setFillPatternOffset(-100, 70);
var userPos = stage.getUserPosition();
this.setFillPatternOffset(-userPos.x,-userPos.y);
layer.draw();
this.setX(220);
this.setY(stage.getHeight() / 4);
});
layer.add(patternPentagon);
stage.add(layer);
}
var sources = {
darthVader: 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg',
yoda: 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg'
};
loadImages(sources, function(images) {
draw(images);
});
</script>
</body>
There is a more complex/accurate way of doing this without making it a background pattern, like with grouping objects together
Bit of a n00b here.
I was trying to modify a hover function I'd found which positions and animates an image within a list item. Instead of giving .animate({top: an exact pixel value in the first instance, I wanted to pass it the variable imgHeight, which gets the height of the containing li, but I'm clearly doing something wrong. Any pointers?
var imgHeight = $('li').height();
$(function() {
$('ul.hover_block li').hover(function(){
$(this).find('img').animate({top:'imgHeight' + 'px'},{queue:false,duration:200});
}, function(){
$(this).find('img').animate({top:'0px'},{queue:false,duration:200});
});
});
Try this instead: you had
{top: 'imgHeight' + 'px'}
Should be
{top: imgHeight + 'px'}
Full code:
var imgHeight = $('li').height();
$(function() {
$('ul.hover_block li').hover(function(){
$(this).find('img').animate({top:imgHeight + 'px'},{queue:false,duration:200});
}, function(){
$(this).find('img').animate({top:'0px'},{queue:false,duration:200});
});
});
Know issue tumblr restricts width of videos to max500, i want them 700.
I've tried all the hacks and scripts listed, they won't work on my theme. Any suggestions?
This code was a useful starting point, but it didn't resize the embed tag, too, which means it won't work for all browsers.
<script type="text/javascript">
$(document).ready(function() {
var embedTag;
$('.video').each(function(index) {
$( this ).contents().each( function ( index ) {
if ($(this).is('object') || $(this).is('embed') || $(this).is('iframe')) {
var orgWidth = $(this).attr('width');
var orgHeight = $(this).attr('height');
var scale = orgHeight/orgWidth;
var targetWidth = 474;
var targetHeight = targetWidth * scale;
$(this).attr('width', targetWidth);
$(this).attr('height', targetHeight);
$(this).find('embed').attr('width', targetWidth);
$(this).find('embed').attr('height', targetHeight);
}
});
});
});
</script>
EDIT: A further revision, just in case your videos/media, whatever are embedded within other elements:
<script type="text/javascript">
$(document).ready(function() {
var embedTag;
$('.video, .media').each(function(index) {
$( this ).find('object, embed, iframe').each( function ( index ) {
var orgWidth = $(this).attr('width');
var orgHeight = $(this).attr('height');
var scale = orgHeight/orgWidth;
var targetWidth = 474;
var targetHeight = targetWidth * scale;
$(this).attr('width', targetWidth);
$(this).attr('height', targetHeight);
$(this).find('embed').attr('width', targetWidth);
$(this).find('embed').attr('height', targetHeight);
});
});
});
</script>
I had to do the same thing with the theme that I designed/developed for my Tumblr (ridiculouslyawesome.com). In order to get around the 500px max width that Tumblr seems to impose, I came up with a little javascript hack that finds all object/embed/iframe tags in the page and resizes them properly for the theme. This example uses jQuery, but you can alter it to whatever JS framework you prefer to use.
$(document).ready(function() {
var embedTag;
$('div.video_container').each(function(index) {
$( this ).contents().each( function ( index ) {
if ($(this).is('object') || $(this).is('embed') || $(this).is('iframe')) {
var orgWidth = $(this).attr('width');
var orgHeight = $(this).attr('height');
var scale = orgHeight/orgWidth;
var targetWidth = 960;
var targetHeight = targetWidth * scale;
$(this).attr('width', targetWidth);
$(this).attr('height', targetHeight);
}
});
});
});
So far this has worked pretty good for my theme in all the browsers that I have tested it on. Hopefully it will work for you too. Let me know if you run into any issues with it.
Ryan