Below is an example that creates at star using SVG.js shapes extension. When I request to animate it from 7 points(spikes) to 10 points(spikes), it generates an error.
Any ideas?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SVG.js - Shapes Extension: animate error</title>
<script type="text/javascript" src="//svgDiscovery.com/SVG.js/svg.js"></script>
<script type="text/javascript" src="//svgDiscovery.com/SVG.js/Plugins/svg.shapes.js"></script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body style='padding:10px;font-family:arial;'>
<center>
<h4>SVG.js - Shapes Extension: animate error</h4>
<table>
<tr>
<td>
<div id="svgDiv" style='background-color:lightgreen;width:400px;height:400px;'></div>
</td>
</tr></table>
<script id=myScript>
//---access the empty DIV---
var mySVG = SVG('svgDiv').size(400, 400);
var myStar = mySVG.polygon().attr({id:'myPolygon',stroke:'blue','stroke-width':3,fill:'yellow'}).star({
inner: 50
, outer: 100
, spikes: 7
}).move(100,100)
//---creates error---
myStar.animate().star({ spikes: 10 })
</script>
</body>
</html>
So I found the time to update this extension. It is available on bower and as soon as the package-conflict is solved on npm, too.
It now requires version 2 of svg.js and works exactly as you specified
mySVG
.polygon()
.ngon()
.animate()
.star()
Related
I am trying to make a simple latin dictionary. I am new to JavaScript so I am trying to test the input tag with the alert function. In the console, I am receiving the error message after I click the "translate" button. Error: "translate is not a function (in 'translate()', 'translate' is true)".
HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Latin Dictionary</title>
</head>
<h1 id="main-header">Latin Dictionary!</h1>
<body>
<input id="latin-word" placeholder="Latin to English"/>
<br />
<button onclick="translate()" id="btn-translate-latin-english">Translate</button>
<script type="text/javascript" src="translate.js"></script>
</body>
</html>
JavaScript:
function translate() {
var latinWord = document.getElementById("latin-word").value;
alert("word that was entered: " + latinWord);
}
Thank you in advance :)
To solve it, choose another function name, such as myTranslate().
Why you can't use translate()? Because there's already a built-in translate in HTML. See here.
Note: You can choose whatever you want.
JS Code:
function myTranslate() {
var latinWord = document.getElementById("latin-word").value;
alert("word that was entered: " + latinWord);
}
HTML:
<button onclick="myTranslate()" id="btn-translate-latin-english">Translate</button>
Let me know if it works.
I think this error is being called because you are using the script tag after the button tag. I think moving the script into the head of the html will solve the issue
You seem to use the function's name translate which is a reserved word in JavaScript.
translate is a global attribute to make elements translatable or movable.
You must rename the function to fix this error. I used Translate():
function Translate() {
var latinWord = document.getElementById("latin-word").value;
alert("Word that was entered: " + latinWord);
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Latin Dictionary</title>
</head>
<h1 id="main-header">Latin Dictionary!</h1>
<body>
<input id="latin-word" placeholder="Latin to English"/>
<br />
<button onclick="Translate()" id="btn-translate-latin-english">Translate</button>
<script type="text/javascript" src="translate.js"></script>
</body>
</html>
I've set up a reasonable Django site to test and play around with, but I'm having an awful time including fabric.js
Ultimately I want to use fabric.js to take small images from a database and display them on a canvas, but I digress.
The issue I'm having is that I cannot use a local png image within my html using fabric.js - I mean, fabric is included (because I can do very basic tricks with fabric, like create rectangles) However, the tutorial isn't clear on including local images.
Here's my awful code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is using render</title>
{% load staticfiles %}
<script scr="{% static "js/fabric.js" %}" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
var canvas = new fabric.Canvas('c');
canvas.setHeight(480);
canvas.setWidth(640);
var imgElement = fabric.Image.fromURL('../static/images/pitch.png', function(oImg) {
canvas.add(oImg);
});
var imgInstance = new fabric.Image(imgElement, {
left: 100,
top: 100,
angle: 90,
opacity: 0.85
});
canvas.add(imgInstance);
</script>
</body>
</html>
Probably doing something noobish, so apologies in advance.
Add an image element in your HTML (and get it by id) instead of loading it using fabric.Image.fromURL()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is using render</title> {% load staticfiles %}
<script src="{% static "js/fabric.js" %}" type="text/javascript"></script>
</head>
<body>
<canvas id="c"></canvas>
<img id="imgElement" src="../static/images/pitch.png" hidden>
<script type="text/javascript">
var canvas = new fabric.Canvas('c');
canvas.setHeight(480);
canvas.setWidth(640);
var imgInstance = new fabric.Image(imgElement, {
left: 100,
top: 100,
angle: 90,
opacity: 0.85
});
canvas.add(imgInstance);
</script>
</body>
</html>
Using SVG.js, I a have div that I placed in the svg as foreignobject. The div sizes nicely based on it innerHTML. I would like it be draggable. I added draggable() to the foreignobject, but it is not working properly: it does not retain the x,y dragged values.
Any ideas?
Below is an example of the problem.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SVG.js - Draggable foreignobject </title>
<script type="text/javascript" src="//svgDiscovery.com/SVG.js/svg.js"></script>
<script type="text/javascript" src="//svgDiscovery.com/SVG.js/Plugins/svg.foreignobject.js"></script>
<script type="text/javascript" src="//svgDiscovery.com/SVG.js/Plugins/svg.draggable.js"></script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body style='padding:10px;font-family:arial;'>
<center>
<h4>SVG.js - Draggable foreignobject </h4>
<table>
<tr>
<td>
<div id="svgDiv" style='background-color:lightgreen;width:400px;height:400px;'></div>
</td>
</tr></table>
<script id=myScript>
var mySVG = SVG('svgDiv').size(400, 400);
var fobj = mySVG.foreignObject().attr({id: 'fobj'})
fobj.move(30,30)
fobj.draggable()
var txt = "some text that is quite long. and it goes on and on. and it's pointless really. and the grammar is terrible. blah. blah. blah"
fobj.appendChild("div", {id: 'myDiv', innerHTML: txt})
myDiv.style.cursor = 'move'
myDiv.style.width = '200px'
myDiv.style.padding = '10px'
myDiv.style.background = 'white'
myDiv.style.height = myDiv.scollHeight+'px'
myDiv.style.border = "solid black 1px"
</script>
</body>
</html>
I have been trying something like that:
laststmarker is a nokia.maps.map.StandardMarker
ncolor is a string= #0000FF
laststmarker.brush=ncolor;
laststmarker.brush="{color:'"+ncolor+"'}";
laststmarker.brush={color:ncolor};
and other things, how do i change the color without remove and add it again to the map?
The important thing to note here is that the brush is immutable - that means that you can't update the parameter directly - you need to use the setter e.g. marker.set("brush" , { color :"#FF0000"}); - this is usually followed by map.update(-1,0); in order to refresh the map.
The example below highlights a marker when the mouse pointer hovers over it. You need to use your own app id and token to get it to work.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9" />
<base href="http://www.wrc.com/" />
<title>Highlighing a marker</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script language="javascript" src="http://api.maps.nokia.com/2.2.4/jsl.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<p> Place your pointer over the marker to highlight it.</p>
<div id="gmapcanvas" style="width:600px; height:600px;" > </div><br/><br/>
<script type="text/javascript">
// <![CDATA[
/////////////////////////////////////////////////////////////////////////////////////
// Don't forget to set your API credentials
//
// Replace with your appId and token which you can obtain when you
// register on http://api.developer.nokia.com/
//
nokia.Settings.set( "appId", "YOUR APP ID GOES HERE");
nokia.Settings.set( "authenticationToken", "YOUR AUTHENTICATION TOKEN GOES HERE");
/////////////////////////////////////////////////////////////////////////////////////
map = new nokia.maps.map.Display(document.getElementById('gmapcanvas'), {
'components': [
// Behavior collection
new nokia.maps.map.component.Behavior() ],
'zoomLevel': 5, // Zoom level for the map
'center': [41.0125,28.975833] // Center coordinates
});
// Remove zoom.MouseWheel behavior for better page scrolling experience
map.removeComponent(map.getComponentById("zoom.MouseWheel"));
var normalMarker = new nokia.maps.map.StandardMarker(new nokia.maps.geo.Coordinate(41.0125,28.975833), {brush: {color: "#FF0000"}});
normalMarker.addListener("mouseover" , function(evt) {
normalMarker.set("brush" , { color :"#0000FF"});
map.update(-1,0);
}, false);
normalMarker.addListener("mouseout" , function(evt) {
normalMarker.set("brush" , { color :"#FF0000"});
map.update(-1,0);
}, false);
map.objects.add(normalMarker);
// ]]>
</script>
</body>
</html>
If I have some hidden element on a page, that contains some content, how can I create a link and when user clicks it, browser would open a new window and show the content (only the content, for example some json data)?
ps. I know that's probably bad idea to have some hidden content on the page. It's better to put an action link that will get the content from the server.. But it involves many other headaches and it wasn't me who created the page, so please just let me know if there's a comparatively easy solution...
Please use http://okonet.ru/projects/modalbox/index.html with inline content setting
You could pass the (URL encoded) contents of the hidden element as an argument in the URL when opening the second page. That argument could then be (unencoded and) inserted into the body of the second page when it loads.
The following example works locally on OS X. On other operating systems, the example may need to be placed on an actual web server before it will work:
page1.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Page 1</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
function openwindow(){
window.open("page2.html?html="+escape($("#myDiv").html()));
}
</script>
<style>
.hidden {
visibility: hidden;
}
</style>
</head>
<body>
Click Me!
<div class="hidden" id="myDiv">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/HTML5-logo.svg/200px-HTML5-logo.svg.png">
<p>See the HTML5 specification</p>
</div>
</body>
</html>
page2.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Page 2</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
jQuery.extend({
// from: http://paulgueller.com/2011/04/26/parse-the-querystring-with-jquery/
parseQuerystring: function(){
var nvpair = {};
var qs = window.location.search.replace('?', '');
var pairs = qs.split('&');
$.each(pairs, function(i, v){
var pair = v.split('=');
nvpair[pair[0]] = pair[1];
});
return nvpair;
}
});
</script>
<script>
$(document).ready(function(){
$(document.body).html(unescape(jQuery.parseQuerystring().html));
});
</script>
<style>
.hidden {
visibility: hidden;
}
</style>
</head>
<body>
<!-- this will be replaced -->
</body>
</html>