I draw a text along a path with Keith Wood's jQuery SVG plugin. How can I get a length of the path with JS?
From the SVG specification, use path.getTotalLength().
Here's a minimal example of how to use this with the jquery-svg library:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery SVG Basics</title>
<style type="text/css">
#import "jquery.svg.css";
#mydiv { width: 400px; height: 300px; border: 1px solid #484; }
</style>
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript" src="jquery.svg.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#mydiv").svg({
onLoad : function(svg){
var path = svg.createPath();
var pathNode = svg.path(path.move(100, 200).curveC([[200,
100, 300, 0, 400, 100], [500, 200, 600, 300, 700,
200], [800, 100, 900, 100, 900, 100]]));
console.log(pathNode.getTotalLength());
}
});
});
</script>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>
Related
canvas.style('z-index', '-1'); doesn't work with noscrollbars.css and broke p5.easycam.js in chrome.
I'm trying to get rid of scrollbars on a full window canvas. this works really well in Firefox but breaks p5.easycam.js in chrome, I get no errors in console. maybe it has something to do with node.js?
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="noscrollbars.css">
<head>
<meta charset="UTF-8" />
<script src="p5.js"></script>
<script src="myscript.js"></script>
<script src="p5.easycam.min.js"></script>
</head> <body> <main> </main> </body>
</html>
noscrollbars.css
html, body {
height: 100%;
}
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
myscript.js (credit Paul Wheeler for pointing out question error)
var canvas;
var easycam;
let CamState = { distance: 2000, center: [0,0,0], rotation: [1,0,0,0]};
function setup() {
canvas = createCanvas(windowWidth, windowHeight, WEBGL);
canvas.position(0, 0);
canvas.style('z-index', '-1');
fill(255, 64, 0);
easycam = createEasyCam();
easycam.setViewport([0, 0, windowWidth, windowHeight]);
}
function draw() {
background(0);
ambientLight(100, 100, 100);
pointLight(255, 255, 255, -100, -100, 100);
directionalLight(100, 100, 100, -1, 0.1, 0.8);
box(150);
}
I did not know before posting but I'm guessing multiple canvas layers (in chrome) don't correspond to the css I wrote and I need to go learn more about that as canvas.style('z-index', '0'); works
I cannot reproduce your problem. Runnable example:
let easycam;
function setup() {
let c = createCanvas(windowWidth, windowHeight, WEBGL);
c.style('z-index', '-1');
noStroke();
fill(255, 64, 0);
easycam = createEasyCam();
easycam.setViewport([0, 0, windowWidth, windowHeight]);
}
function draw() {
background(0);
ambientLight(100, 100, 100);
pointLight(255, 255, 255, -100, -100, 100);
directionalLight(100, 100, 100, -1, 0.1, 0.8);
box(150);
}
html,
body {
height: 100%;
}
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="test-link-before-head.css">
<head>
<meta charset="UTF-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="https://freshfork.github.io/p5.EasyCam/p5.easycam.js"></script>
</head>
<body>
<main> </main>
</body>
</html>
Here is a resizable UI plugin JS that is working fine with mouse click & drag.
It's changing it's font-size with mouse. Meaning, when I change the width or height of my div with id="chartdiv" from mouse corner then it is changing the font-size correctly. However, when I change the width or height of my div with id="chartdiv" from button onClick, then it's not working.
I want to use this font-size resizable feature from Button.
For this query I already visited to this answer: How to trigger jquery Resizable resize programmatically? but there is not font-size function
What mistake am I making here?
Below is my code:
<!DOCTYPE html>
<html>
<head>
<style>
.resize{
font-size: 2.8vh;
white-space: nowrap;
color: black;
background: yellow;
cursor: move;
width: 300px;
height: 130px
}
.resize:focus {
width: 500px; }
</style>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
</head>
<body>
<button type="button" onClick = "document.getElementById('chartdiv').style.width = '600px';">Click Me!</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/smoothness/jquery-ui.css">
<div class="resize" id="chartdiv">Some name that is very long</div>
<script type="text/javascript">
$('.resize').resizable( {
minWidth: 210,
minHeight: 120,
resize: function( event, ui ) {
// handle fontsize here
var size = ui.size;
// something like this change the values according to your requirements
$( this ).css( 'font-size', ( size.width * size.height ) / 2800 + 'px' );
}
} );
</script>
</body>
</html>
Thanks in advance.
Following creates a simple jQuery plugin function fontResize() that can be used in both instances
$.fn.fontResize = function() {
return this.each(function() {
const $el = $(this);
$el.css('font-size', ($el.width() * $el.height()) / 2800 + 'px');
});
}
$('button.do-resize').click(function(){
$('#chartdiv').width(600).fontResize()// use plugin function
})
$('.resize').resizable({
minWidth: 210,
minHeight: 120,
resize: function(event, ui) {
$(this).fontResize();// use plugin function
}
});
<!DOCTYPE html>
<html>
<head>
<style>
.resize {
font-size: 2.8vh;
white-space: nowrap;
color: black;
background: yellow;
cursor: move;
width: 300px;
height: 130px
}
.resize:focus {
width: 500px;
}
</style>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
</head>
<body>
<button class="do-resize" type="button" >Click Me!</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/smoothness/jquery-ui.css">
<div class="resize" id="chartdiv">Some name that is very long</div>
</body>
</html>
<button type="button" onClick = "ResizeWithButton();">Click Me!</button>
function ResizeWithButton(){
var x = document.getElementById('chartdiv');
x.style.width = '600px';
var rect = x.getBoundingClientRect();
x.style.fontSize = `${(rect.width * rect.height)/2800}px`;
}
This question already has answers here:
Difference between var and this in Javascript functions?
(2 answers)
Closed 2 years ago.
I would like to create a new element with CSS properties every time I call the squareGenerator() function, but it doesn't do that.
function squareGenerator() {
var newSquare = document.createElement("div");
this.newSquare.css({"background-color": "yellow", "height": "200px", "width": "200px"});
$('.father').append(newSquare);
}
squareGenerator()
body{
padding: 0;
margin: 0;
}
.father{
width: 100%;
height: 1000px;
background-color: lightblue;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>NovaNote</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="father">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="function.js" charset="utf-8"></script>
</body>
</html>
Your using jQuery so do this:
var newSquare = $("<div/>");
newSquare.css({"background-color": "yellow", "height": "200px", "width": "200px"});
In order to apply the .css() function, which is a jQuery function, you need to be operating on a jQuery object. Note in my example: $(newSquare).css().
function squareGenerator() {
var newSquare = document.createElement("div");
$(newSquare).css({"background-color": "yellow", "height": "200px", "width": "200px"});
$('.father').append(newSquare);
}
squareGenerator()
body{
padding: 0;
margin: 0;
}
.father{
width: 100%;
height: 1000px;
background-color: lightblue;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>NovaNote</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="father">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="function.js" charset="utf-8"></script>
</body>
</html>
I want to know .mydiv how far from the top of the body and for this purpose I used the code getBoundingClientRect() but it doesn't work, this is my code :
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Elemet.GetBoundingClientRect();</h1>
<div class="myDiv">blah balh balh</div>
<script type="text/javascript">
var div = document.querySelector(".myDiv");
var rect = div.getBoundingClientRect();
console.log(rect);
</script>
</body>
</html>`
This is the result :
`DOMRect {x: 0, y: 0, width: 0, height: 0, top: 0, …}
bottom: 0
height: 0
left: 0
right: 0
top: 0
width: 0
x: 0
y: 0
__proto__: DOMRect`
The result only gives me zero numbers
how Can I solve this problem please help ???!
It is working. Try to remove the css and test again.
<h1>Elemet.GetBoundingClientRect();</h1>
<div class="myDiv">blah balh balh</div>
<script type="text/javascript">
var div = document.querySelector(".myDiv");
var rect = div.getBoundingClientRect();
console.log(rect);
</script>
I am trying to create a simple line, but it does not register s.line as a function, and i cannot see what i am doing wrong here. My code is posted below. Thanks!
<html>
<head>
<style type="text/css">
#svg{
width: 700px;
height: 700px;
background-color: #ccc;
}
</style>
</head>
<body>
<div id="svg"></div>
<script src="snap.svg-min.js"></script>
<script>
var s = Snap("#svg");
var metric = 24;
var ground = s.line(50,350,650,350);
</script>
</body>
You have to draw on a <svg> element, not a <div>
<html>
<head>
<style type="text/css">
#svg{
width: 700px;
height: 700px;
background-color: #ccc;
}
</style>
</head>
<body>
<svg id="svg"></svg>
<script src="http://snapsvg.io/assets/js/snap.svg-min.js"></script>
<script>
var s = Snap("#svg");
var metric = 24;
var ground = s.line(50,50,650,50);
ground.attr({
stroke: "red",
strokeWidth: 10
});
</script>
</body>