Is there a way to use an svg element as an icon for the Microsoft.Maps.Pushpin?
I created an svg
element like this:
var fillcolor = "#ff0222";
var svg1 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg1.setAttribute("height",50);
svg1.setAttribute("width",50);
var circles = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circles.setAttribute("cx",25);
circles.setAttribute("cy",25);
circles.setAttribute("r",25);
circles.setAttribute("fill",fillcolor);
svg1.appendChild(circles);
On the Microsoft.Maps.Pushpin it is possible to set the options (PushpinOptions) where you can specify the htmlContent property to the value of your choice.
See: http://msdn.microsoft.com/en-us/library/gg427629.aspx
And the iSDK sample: http://www.bingmapsportal.com/isdk/ajaxv7#Pushpins15
The code should be inspired by something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Add pushpin with options</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
var map = null;
function getMap()
{
map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: 'Your Bing Maps Key'});
}
function addCustomPushpin()
{
var pushpinOptions = {width: null, height: null, htmlContent: "<div style='font-size:12px;font-weight:bold;border:solid 2px;background-color:LightBlue;width:100px;'>Custom Pushpin</div>"};
var pushpin= new Microsoft.Maps.Pushpin(map.getCenter(), pushpinOptions);
map.entities.push(pushpin);
}
</script>
</head>
<body onload="getMap();">
<div id='myMap' style="position:relative; width:400px; height:400px;"></div>
<div>
<input type="button" value="AddCustomPushpin" onclick="addCustomPushpin();" />
</div>
</body>
</html>
Related
I have an desktop application using swiper to slide page, but when I put a select tag in slide page ,the select tag can not pop the drop-drown box, anyone has happend the problem?
Thanks advance!
here demo is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="styles/swiper/idangerous.swiper.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"> </script>
<!-- 翻页 依赖jquery -->
<script type="text/javascript" src="js/swiper/idangerous.swiper-1.9.js"></script>
<title>swiper demo</title>
<script type="text/javascript">
$(function(){
$('.swiper-container, .swiper-slide').css({
height: ($(window).height()) + 'px',
width: '100%'
});
var mySwiper = $('.swiper-container').swiper({
//Your options here:
mode:'horizontal',
loop: false,
keyboardControl: true,
// mousewheelControl: true,
onSlideChangeStart: function(swiper){
pageCurrentNum = swiper.realIndex;
$('#currentPage').text(pageCurrentNum + 1);
gridster = null;
gridster = $('#gridster' + pageCurrentNum +'>ul').gridster(gridsterOpts).data('gridster');
if(!confingInfo.isDebug){
gridster.disable();
}
},
});
})
</script>
</head>
<body>
<div class="swiper-container responsive">
<div class="swiper-wrapper" style="background:red;">
<!--First Slide-->
<div class="swiper-slide ">
page1
<select>
<option>test1</option>
<option>test2</option>
<option>test3</option>
</select>
</div>
<!--Second Slide-->
<div class="swiper-slide">
page2
</div>
</div>
</div>
</body>
</html>
I solved the problem by using the codes underline:
$('.swiper-slide select').on('mousedown touchstart MSPointerDown', function(e){
e.stopPropagation();
});
Hope this can help you who has happened the same problem like me!
I know this is old question.
But on Swiper 3, Dean's answer does not work.
My solution is add class="swiper-no-swiping" to SELECT tag.
Hope this helps.
Or if you don't need the touch events on desktop, you can disable it with the option simulateTouch.
See: http://idangero.us/swiper/api/
Is there a way for codemirror to highlight the code matching a pattern (like if I use the search addon) when the page load? So I could load the page with ?search=my_pattern and pass the pattern to codemirror.
Here's a sample code and a jsfiddle. You can use CTRL+F to use the search addon.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/codemirror.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/codemirror.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/search.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/searchcursor.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/match-highlighter.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/python.js"></script>
</head>
<body>
<textarea id="myTextArea">print "hello world"</textarea>
<script>
var myTextArea = document.getElementById('myTextArea');
var myCodeMirror = CodeMirror.fromTextArea(myTextArea, {
'mode': 'python',
'lineNumbers': true
});
</script>
</body>
</html>
http://jsfiddle.net/ErxMb/
I figured out how to do it using overlay.js by looking at the CodeMirror: Overlay Parser Demo.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/codemirror.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/codemirror.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/search.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/searchcursor.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/overlay.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/match-highlighter.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/python.js"></script>
</head>
<style type="text/css">
.cm-highlightSearch {background: yellow;}
</style>
<body>
<textarea id="myTextArea">print "hello world"</textarea>
<script>
var keyword = 'hello';
CodeMirror.defineMode("highlightSearch", function(config, parserConfig) {
var searchOverlay = {
token: function(stream, state) {
if (stream.match(keyword)) {
return "highlightSearch";
}
while (stream.next() != null && !stream.match(keyword, false)) {}
return null;
}
};
return CodeMirror.overlayMode(CodeMirror.getMode(config, parserConfig.backdrop || "python"), searchOverlay);
});
var myTextArea = document.getElementById('myTextArea');
var myCodeMirror = CodeMirror.fromTextArea(myTextArea, {
'mode': 'highlightSearch',
'lineNumbers': true
});
</script>
</body>
</html>
http://jsfiddle.net/HkjY7/
I have multiple images in an html page.I want to use html2canvas to convert the page to image.The images are local and from same source.It always keep on showing the error msg " Unable to get image data from canvas because the canvas has been tainted by cross-origin data."
The same code will work for one image or multiple copy of same image.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="language" content="de">
<script type="text/javascript" src="./js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/html2canvas.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var target = $('#mainDiv');
html2canvas(target, {
onrendered: function(canvas) {
var data = canvas.toDataURL();
var img = document.getElementById('img1');
img.src = data;
}
});
});
</script>
</head>
<body>
<div id="mainDiv">
<div id="div1" ><p>paragraph 1 paragraph 1 paragraph 1 paragraph 1 paragraph 1 paragraph 1 paragraph 1 paragraph 1 </p></div>
<div id="div2" ><p>paragraph2 paragraph2 paragraph2 paragraph2 paragraph2 paragraph2 paragraph2 paragraph2 </p></div>
<img src="images/01.jpg" >
<img src="images/02.jpg" >
<img src="images/03.jpg" >
<img src="images/04.jpg" >
</div>
<img id="img1"></img>
</body>
</html>
I am not sure what does the error message mean.Also if somebody can tell me how do i make this work with multiple images, it will be very helpful
just remove what you dont need. ie, i have Div1,Div2 etc
function PrintChartCanvas(divId) {
//div canvas
var divObj = html2canvas($('#div' + divId));
var divQueu = divObj.parse();
var divCanvas = divObj.render(divQueu);
divImg = divCanvas.toDataURL();
return divImg;
}
document.getElementById("img1").src = PrintChartCanvas(3);
This should work
I would like to make a webapp that uses the "UIScrollView" xcode-function but in html.
There's no problem making a html page that puts a bunch of images in one row.. I just want to make a iphone horizontal scroll with swipe gesture to show the next image.
Can this be made?
You'll need to watch for touchstart and touchend (or touchmove) to figure out the direction, then just replace the image with the next/previous. Here are some links:
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/
Untested:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var startX;
var endX;
var pic=0;
var pics = ['pic1.png','pic2.png','pic3.png'];
document.getElementById('picture').setAttribute('src',pics[pic]);
function touchStart(event){
startX = event.touches[0].pageX;
}
function touchEnd(event){
endX = event.touches[0].pageX;
deltaX=endX-startX;
if(deltaX>0){
next();
}
else{
prev();
}
}
function next(){
pic++;
if(pic>pics.length){pic--;}
document.getElementById('picture').setAttribute('src',pics[pic]);
}
function previous(){
pic--;
if(pic<0){pic++;}
document.getElementById('picture').setAttribute('src',pics[pic]);
}
</script>
<style>
#pictureFrame{height:460px; width:320px; top:0; left:0;}
</style>
</head>
<body>
<div id="pictureFrame"><img ontouchstart="touchStart(event);" ontouchend="touchEnd(event);" id="picture"/></div>
</body>
</html>
How to do add multiple pushpins to the Bing map v7 through Ajax API.. ?
They could be loaded from a array, list, json or anywhere else..
could someone provide a small example? Thank you
You can use EntityCollection to add several pins at the same time.
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&mkt=de-de" type="text/javascript" charset="UTF-8"></script>
</head>
<body onload="init()">
<div id="map" style="position: relative; width: 800px; height: 300px;"></div>
<script type="text/javascript">
function init(){
// Initialize the map
var map = new Microsoft.Maps.Map(
document.getElementById("map"),
{
credentials: "YOUR-BING-KEY",
mapTypeId: Microsoft.Maps.MapTypeId.road
}
);
// Creates a collection to store multiple pins
var pins = new Microsoft.Maps.EntityCollection();
// Creates 5 random pins
for (var i = 0; i < 5; i++){
// A random position
var position = new Microsoft.Maps.Location(Math.random() * 45, Math.random() * 90);
// Creates a Pushpin
var pin = new Microsoft.Maps.Pushpin(position);
// Adds the pin to the collection instead of adding it directly to the Map
pins.push(pin);
}
// Adds all pins at once
map.entities.push(pins);
}
</script>
</body>
</html>
Also, here another example using JSON and jQuery.