Hi can someone please help me with getting the buttons to resize the shape. I have had a go myself but cannot get it to work. Below is the code I have so far thanks in advance
<html>
<head>
<script>
function Smaller()
{
document.getElementById("rectangle1").height="50";
document.getElementById("rectangle1").width="50";
}
function resetsize()
{
document.getElementById("rectangle1").height="200";
document.getElementById("rectangle1").width="300";
}
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width: 500px; height: 500px">
<rect id="rectangle1" x="150" y="0" width="300" height="200" />
</svg>
<input type="button" onclick="Smaller" value="Smaller" />
<input type="button" onclick="resetsize" value="ResetSize" />
</body>
</html>
<html>
<head>
<script>
function smaller() {
document.getElementById("rectangle1").style.height="50px";
document.getElementById("rectangle1").style.width="50px";
}
function resetsize() {
document.getElementById("rectangle1").style.height="200px";
document.getElementById("rectangle1").style.width="300px";
}
</script>
</head>
<body>
<div style="min-height:500px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width: 500px; height: 500px" id="rectangle1">
<rect x="150" y="0" width="300" height="200" />
</svg>
</div>
<input type="button" onclick="smaller()" value="smaller" />
<input type="button" onclick="resetsize()" value="ResetSize" />
</body>
</html>
Please look at the on click propery of the buttons. And there is no id for yor svg element. :- )
You can access a DOM element's CSS properties with the style attribute, like this:
function smaller() {
document.getElementById("rectangle1").style.height="50";
document.getElementById("rectangle1").style.width="50";
}
function resetsize() {
document.getElementById("rectangle1").style.height="200";
document.getElementById("rectangle1").style.width="300";
}
A few notes about your coding conventions: You typically want to having opening function brackets on the same line as the name of the function. Function names should be camelCase at all times; save UpperCase for class names only. Finally, make sure you tab in stuff inside of functions, if statements, etc. Your fellow developers will thank you. =)
Edit: make sure your HTML looks like this:
<input type="button" onclick="smaller()" value="Smaller" />
<input type="button" onclick="resetsize()" value="ResetSize" />
use jQuery to avoid this DOM abomination document.getElementById("fooo")
Related
Hello I would like to write a simple function that creates svgcircles where I only have to specify the x, y coordinates.
JavaScript code is:
function cir(x, y){
<circle cx="x" cy="y" r="10" fill="blue" />;
}
HTML code is:
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
</head>
<body>
<svg width="1024" height="768">
cir(50, 50);
</svg>
</body>
</html>
What am I doing wrong?
You can return some HTML using a template literal and add it to your SVG element.
function cir(x, y) {
return `<circle cx=${x} cy=${y} r="10" fill="blue" />`;
}
document.querySelector('svg').insertAdjacentHTML('beforeend', cir(50, 50));
<svg width="1024" height="768"></svg>
Note: you should move your script to just before your </body> tag. That way the document will have time to load before the script is executed.
<script src="script.js"></script>
</body>
DOM resources on MDN:
querySelector
insertAdjacentHTML
EDIT
Now, if you wanted to include a form from which you can get the coordinates, you can do something like this.
function cir(x, y) {
return `<circle cx=${x} cy=${y} r="10" fill="blue" />`;
}
// Grab all the elements
const button = document.querySelector('.submit');
const svg = document.querySelector('svg');
const x = document.querySelector('.x');
const y = document.querySelector('.y');
// Add an event listener to the button
button.addEventListener('click', addShape, false);
function addShape(e) {
// Prevent the form from submitting
e.preventDefault();
svg.insertAdjacentHTML('beforeend', cir(x.value, y.value));
}
<form>
<input class="x" type="text" placeholder="X coord" />
<input class="y" type="text" placeholder="Y coord" />
<button class="submit">Submit</button>
</form>
<svg width="1024" height="768"></svg>
You can add more inputs for the radius and colour if you wanted.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
svg{ display: inline-block; }
</style>
<script src="my.js"></script>
</head>
<body>
<embed src="sprites.svg" type="image/svg+xml" width="0" height="0" />
<svg id="MAIN" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 320 208" shape-rendering="crispEdges">
<path d="M0 0h320v208h-320v-208z" fill="#000"/> <!-- Fill screen -->
<svg id="sprite1"><use xlink:href="sprites.svg#SP1" x="64" y="128"</use></svg>
<svg id="sprite2"><use xlink:href="sprites.svg#SP2" x="64" y="128"</use></svg>
<svg id="sprite3"><use xlink:href="sprites.svg#SP3" x="64" y="128"</use></svg>
</svg>
<script>
start( 1 ); // Call Func in my.js
</script>
</body>
</html>
I have hundreds of sprites in "sprites.svg". How do I, in javascript add the sprites I want to the DOM via javascript. I want them added so that they are just like sprite1 to sprite3 in the example html page above, thanks Keith
Worked it out, not as complex as I thought.
var svgURI = "http://www.w3.org/2000/svg";
var mainSVG = document.getElementById( "MAIN" ); // my main SVG
var svg = document.createElementNS( svgURI, 'svg' );
svg.id = "sprite4";
svg.innerHTML = "<use xlink:href='sprites.svg#SP4'></use>";
mainSVG.appendChild( svg );
Thanks to every one who tried to help
In this snippet of code, even though I align the text far outside of the canvas boundaries, the text shows up below the canvas height. I'm new to HTML and I question why using a canvas seems to block the whole row it's on. I also want to know if there is a way around this, so I can have my canvas and have the text to the right of it on the same row.
<!DOCTYPE html>
<html>
<canvas id= "myCanvas" width="600" height="600">
</canvas>
<head>
<title>test</title>
<meta name="generator" content="BBEdit 11.6" />
</head>
<body>
<p style="text-align:right">JavaScript can change the content of an HTML element:</p>
</body>
</html>
<!DOCTYPE html>
<html>
<canvas id="myCanvas" width="600" height="600" style="border:1px solid #000000;">
</canvas>
<head>
<title>test</title>
<meta name="generator" content="BBEdit 11.6" />
</head>
<body>
<p style="text-align:right; display: inline-block;">JavaScript can change the content of an HTML element:</p>
</body>
</html>
First your code is some wrong, you need to follow a structure.
<!DOCTYPE html>
<html>
<head>
<!-- Code -->
</head>
<body>
<!-- Code -->
</body>
</html>
Your canvas you need to write inside body tag.
You have many options but each options have differences, depend of what you want to do after, you can to choose :
float, inline, inline-block or inline-flex
Float:
This is the old form, that make an element float.
<canvas style="float:left; border:1px solid red;" id= "myCanvas" width="30" height="30">
</canvas>
<p style="text-align:right">JavaScript can change the content of an HTML element:</p>
Inline:
Element in one line but doesn't respect the width and height property of the element.
<canvas style="border:1px solid red;" id= "myCanvas" width="30" height="30">
</canvas>
<p style="display:inline;">JavaScript can change the content of an HTML element:</p>
Inline-block:
Element in one line respecting the width and height property of the element.
<canvas style="border:1px solid red;" id= "myCanvas" width="30" height="30">
</canvas>
<p style="display:inline-block;">JavaScript can change the content of an HTML element:</p>
Inline-Flex:
Introduced in css3, inline in version flex.
<canvas style="border:1px solid red;" id= "myCanvas" width="30" height="30">
</canvas>
<p style="display:inline-flex;">JavaScript can change the content of an HTML element:</p>
The definitions are very quickly, refer more information:
Reference 1
Reference 2
Update:
Align in the top, using flex:
<div style="display:flex;align-self: flex-start">
<canvas style="border:1px solid red;" id= "myCanvas" width="100" height="100">
</canvas>
<p style="margin-top:0">JavaScript can change the content of an HTML element:</p>
</div>
I want to show 4 popup windows, at the same time, which show 4 different flash slides after a respective image button is clicked.
I used JavaScript to make the popup window but cannot complete the rest of the image button. When i click on the button random flash slide plays.
Please refer below code :-
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="ddmenu/ddmenu.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="images/favicon.ico"/>
<script src="ddmenu/ddmenu.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$("[id*=a]").live("click", function () {
$("#dialog26").dialog({
title: "DMD Officers",
height: 700,
width: 1000,
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
return false;
});
</script>
<script type="text/javascript">
$("[id*=b]").live("click", function () {
$("#dialog27").dialog({
title: "Outsourced Photographs",
height: 700,
width: 1000,
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
return false;
});
</script>
<script type="text/javascript">
$("[id*=c]").live("click", function () {
$("#dialog28").dialog({
title: "DMD Dog Squad",
height: 700,
width: 1000,
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
return false;
});
</script>
<script type="text/javascript">
$("[id*=d]").live("click", function () {
$("#dialog29").dialog({
title: "Snake awareness campaign",
height: 700,
width: 1000,
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
return false;
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td colspan="3" class="auto-style9">
<nav id="ddmenu">
<ul>
<li>Home</li>
<li>About Us</li>
</ul>
</nav>
</td>
</tr>
<tr>
<td style="border-style: solid; border-color: #996600;">
<asp:imagebutton id="a" runat="server" height="200px" imageurl="~/Images/officer.jpg" width="200px" />
<div id="dialog26" style="display: none;">
<embed src="Videos/DMD Officers final.swf" height="1000px" width="1000px" />
</div>
</td>
<td style="border-style: solid; border-color: #996600;">
<asp:imagebutton id="b" runat="server" height="200px" imageurl="~/Images/outphoto.jpg" width="200px" />
<div id="dialog27" style="display: none;">
<embed src="Videos/Outsourced photographs.swf" height="1000px" width="1000px" />
</div>
</td>
<td style="border-style: solid; border-color: #996600; text-align: center;">
<asp:imagebutton id="c" runat="server" height="200px" imageurl="~/Images/Dog.jpg" width="200px" />
<div id="dialog28" style="display: none;">
<embed src="Videos/DMD Dog Squad 1.swf" height="1000px" width="1000px" />
</div>
</td>
<td style="border-style: solid; border-color: #996600; text-align: center;">
<asp:imagebutton id="d" runat="server" height="200px" imageurl="~/Images/SankeAwa.jpg" width="200px" />
<div id="dialog29" style="display: none;">
<embed src="Videos/Snake awareness campaign.swf" height="1000px" width="1000px" />
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
This code here $("[id*=btnPopup]") is means that is capture all buttons that contains the btnPopup !, since the rest buttons contains that because of the name (btnPopup2,btnPopup3,btnPopup4) you have capture all with the same (first) code, and what ever you press only the first is fired.
So rename the first button to btnPopup0 if you like to use this code as it is and make it work.
Reference :
https://api.jquery.com/attribute-contains-selector/
But I see more bugs...
in this line $("#dialog").dialog({ that exist on every call, is still call the same part of the page to make it dialog, but I see that the other parts have names like dialog1, dialog2 etc... so this is something that you must fix also.
lots and lots of mistake in your code !!! .Let me point out one by one.
1. $("[id*=a]").live("click" : Similar code exist in other 3 sections. Do Not Use Live to bind events. Its deprecated, and deprecated for good reasons. Taken from the doc
As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().
Also in your scenario [id*=a] is not required. Simply id=a would be sufficient.
live() jquery API Document
2. $("#dialog").dialog({ : You have the same code in other 3 sections as well. You are binding events to the same id. Which is a BIG NO. Do not use same Id's Id's has to be unique in the entire DOM. You can make use of class. Just put the same class name to all the divs and then bind events using the class name.
- When you bind events by using ids Jquery will find the first element with that id in the DOM (reading from top) and binds the event to onle that element.
You are repeating the same script logic multiple times, make it Generic. So cleaning up your HTML and SCripts, Below is what you actually need.
HTML
<tr>
<td style="border-style: solid; border-color: #996600;">
<asp:imagebutton id="a" class="imageDialog" runat="server" height="200px" imageurl="~/Images/officer.jpg" width="200px" />
<div class="dialog" data-dialog-title="DMD Officers" style="display: none;">
<embed src="Videos/DMD Officers final.swf" height="1000px" width="1000px" />
</div>
</td>
<td style="border-style: solid; border-color: #996600;">
<asp:imagebutton id="b" class="imageDialog" runat="server" height="200px" imageurl="~/Images/outphoto.jpg" width="200px" />
<div class="dialog" data-dialog-title="Outsourced photographs" style="display: none;">
<embed src="Videos/Outsourced photographs.swf" height="1000px" width="1000px" />
</div>
</td>
<td style="border-style: solid; border-color: #996600; text-align: center;">
<asp:imagebutton id="c" class="imageDialog" runat="server" height="200px" imageurl="~/Images/Dog.jpg" width="200px" />
<div class="dialog" data-dialog-title="DMD Dog Squad" style="display: none;">
<embed src="Videos/DMD Dog Squad 1.swf" height="1000px" width="1000px" />
</div>
</td>
<td style="border-style: solid; border-color: #996600; text-align: center;">
<asp:imagebutton id="d" class="imageDialog" runat="server" height="200px" imageurl="~/Images/SankeAwa.jpg" width="200px" />
<div class="dialog" data-dialog-title="Snake awareness campaign" style="display: none;">
<embed src="Videos/Snake awareness campaign.swf" height="1000px" width="1000px" />
</div>
</td>
</tr>
Note: I added a class to all the imageButton, And then changed the div id to class. Also added data-dialog-title attribute to hold the titles for the dialog. More About data Attribute You will see its usage below.
Script
<script type="text/javascript">
$(function(){
$.each('.dialog',function(){ //loop all the div's and apply plugin for all of them
$(this).dialog({
title: $(this).data('dialog-title'), //extract the title here.
height: 700,
width: 1000,
buttons: {
Close: function() {
$(this).dialog('close');
}
}
});
});
$(".imageDialog").on("click", function() {
$(this).closest('td').find(".dialog").dialog( "open" ); //this is how you open the dialog, taken from the plugin site.
});
});
</script>
On document ready apply the dialog plugin to all the div's with class dialog
Bind event to all imageButton by just using class selector .imageDialog
trace up to the parent td, then trace down to find the div with class name 'dialog' and open it.
I'd like to appending an entire svg element to an childless element of the DOM. I tried the d3-style and the common style and both lead me to this error:
[Exception... "String contains an invalid character" code: "5" nsresult: "0x80530005 (InvalidCharacterError)" location: "<unknown>"]
How do I append it correct?
// with d3
var dropTargetsDiv = d3.select(".droptargets").html("");
dropTargetsDiv.append(svgPic);
// without d3
var dropTargetsDiv = window.document.getElementById("canvas").parentNode;
dropTargetsDiv.innerHTML="";
dropTargetsDiv.appendChild(window.document.createElement(svgPic));
//the svg content is taken from a text area...
var svgPic = scope.$parent.export;
//and looks fine
<svg id="canvas"><g id="dashboard-content"><rect id="dropPanel"></rect></g></svg>
// the structure
<div class="droptargets"...
<svg id="canvas"...
<g id="dashboard-content...
D3's .append() doesn't take the contents of the element to be appended. To quote the documentation:
Appends a new element with the specified name as the last child of each element in the current selection [...] The name may be specified either as a constant string or as a function that returns the DOM element to append.
So to append an SVG element, you should do
var svg = dropTargetsDiv.append("svg");
and then populate the contents of the node, i.e. add the g element and anything else that may be there.
Insert svg text into your SVG DIV by dropTargetsDiv.innerHTML=mySVGText. This will completely replace the previous.
Example Below:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body style='font-family:arial'>
<center>
<div style='width:90%;background-color:gainsboro;text-align:justify;padding:10px;border-radius:6px;'>
Replace DIV.innerHTML with new SVG text
</div>
<br />New SVG Source:<br />
<textarea id=svgNewSourceValue style='font-size:110%;font-family:lucida console;width:90%;height:100px'>
<svg id="mySVG2" width="400" height="400" xmlns="http://www.w3.org/2000/svg" >
<rect width=150 height=100 x=100 y=100 fill=blue />
</svg>
</textarea>
<div id="svgDiv" style='background-color:lightgreen;width:400px;height:400px;'>
<svg id="mySVG1" width="400" height="400" xmlns="http://www.w3.org/2000/svg" >
<circle r=150 cx=200 cy=200 fill=red />
</svg>
</div>
<center><button onClick=replaceSVG()>Replace SVG</button></center>
<br />SVG Source:<br />
<textarea id=svgSourceValue style='font-size:110%;font-family:lucida console;width:90%;height:100px'>
</textarea>
<br />Javascript:<br />
<textarea id=jsValue style='border-radius:26px;font-size:110%;font-weight:bold;color:midnightblue;padding:16px;background-color:beige;border-width:0px;font-size:100%;font-family:lucida console;width:90%;height:200px'></textarea>
</center>
<script id=myScript>
function replaceSVG()
{
svgDiv.innerHTML=svgNewSourceValue.value
svgSourceValue.value=svgDiv.innerHTML
}
</script>
<script>
document.addEventListener("onload",init(),false)
function init()
{
svgSourceValue.value=svgDiv.innerHTML
jsValue.value=myScript.text
}
</script>
</body>
</html>