I'm trying to get it where a whole two paragraph div can be drawn onto a canvas. I'm mostly having problems with getting the div on a canvas without having to use all of the canvas tags and draw out every line. I think this is possible, let me know if it isn't. I'm intermediate with Javascript and Php, experienced with HTML, but new to canvas so try to keep it simple.
HTML Code:
<head>
<meta http-equiv="content-type" content="text/xml; charset=utf-8" />
<title>Quote It!</title>
<link rel = "stylesheet"
type = "text/css"
href = "passext.css" />
<script type = "text/javascript" src = "js2.js"></script>
</head>
<body>
<h1>It's as easy as One...Two...Three!</h1>
<div id = "instructions">
<p style = "text-align:center;">Instructions:</p>
<ol>
<li>Fill out quote and author fields, then press "Create Quote".</li>
<li>Adjust attributes and watch as it updates in real-time!</li>
<li>Click save and it will convert to a versatile image.</li>
</ol>
</div>
<div id = "tips_warnings">
<p style = "text-align:center;">Tips & Warnings:</p>
<ul>
<li>Don't forget to add quotation marks!</li>
<li>Don't forget a dash before the author.</li>
<li>To create a new quote, hit "Reset", and fill out the form.</li>
</ul>
</div>
<form name = "personalize" id = "personalize">
<fieldset class = "person">
<legend class = "legend">Personalize</legend>
<p>
<label class = "uinfo">Quote (One you make up or one you know):</label>
</p>
<p>
<textarea id = "quote"
rows = "10"
cols = "45"></textarea>
</p>
<p>
<label class = "uinfo">Author:</label>
<input type="text"
id = "write_author"
name = "author"
value = "eg. (-Billy Joe)"
onclick = "this.value = ''"/>
</p>
<p>
<label class = "uinfo">Text Color:</label>
<select id = "selColor" onchange="myFunction()">
<option value = "#ffffff">White</option>
<option value = "#000000">Black</option>
<option value = "#f09dee">Pink</option>
<option value = "#ff0000">Red</option>
<option value = "#1e4d0c">Green</option>
<option value = "#00ff00">Neon Green</option>
<option value = "#0000ff">Blue</option>
<option value = "#00ffff">Cyan</option>
<option value = "#ff00ff">Magenta</option>
<option value = "#ffff00">Yellow</option>
<option value = "#cccccc">Grey</option>
</select>
</p>
<p>
<label class = "uinfo">Text Style:</label>
<select id = "selStyle" onchange = "myFunction()">
<option value = "default">None</option>
<option value = "italic">Italics</option>
<option value = "underline">Underline</option>
<option value = "bold">Bold</option>
</select>
</p>
<p>
<label class = "uinfo">Background Color:</label>
<select id = "selBack" onchange = "myFunction()">
<option value = "null">None</option>
<option value = "#000000">Black</option>
<option value = "#ff0000">Red</option>
<option value = "#00ff00">Green</option>
<option value = "#0000ff">Blue</option>
<option value = "#00ffff">Cyan</option>
<option value = "#ff00ff">Magenta</option>
<option value = "#ffff00">Yellow</option>
<option value = "#ffffff">White</option>
<option value = "#cccccc">Grey</option>
</select>
</p>
<p>
<label class = "uinfo">Border:</label>
<select id = "selBorder" onchange="myFunction()">
<option value = "none">None</option>
<option value = "solid">Solid</option>
<option value = "double">Double</option>
<option value = "groove">Groove</option>
<option value = "ridge">Ridge</option>
<option value = "inset">Inset</option>
<option value = "outset">Outset</option>
<option value = "dashed">Dashed</option>
<option value = "dotted">Dotted</option>
</select>
</p>
<p>
<label class = "uinfo">Border Width:</label>
<select id = "selWidth" onchange = "myFunction()">
<option value = "500px">Large</option>
<option value = "375px">Medium</option>
<option value = "250px">Small</option>
</select>
</p>
<p>
<label class = "uinfo">Font:</label>
<select id = "selFont" onchange = "myFunction()">
<option value = "Times New Roman">Times New Roman</option>
<option value = "Serif">Serif</option>
<option value = "Sans-Serif">Sans Serif</option>
<option value = "Fantasy">Fantasy</option>
<option value = "Monospace">Monospace</option>
<option value = "Cursive">Cursive</option>
</select>
</p>
<p>
<label class = "uinfo">Font Size:</label>
<select id = "selSize" onchange = "myFunction()">
<option value = "105%">13pt</option>
<option value = "120%">14pt</option>
<option value = "130%">15pt</option>
<option value = "140%">16pt</option>
<option value = "150%">18pt</option>
</select>
</p>
<p class = "create_quote">
<input type = "button"
value = "Create Quote"
onclick = "myFunction()"/>
<script type = "text/javascript" src = "js2.js"></script>
<input type = "reset"/>
</p>
</fieldset>
</form>
<canvas id = "blank">
<p id = "blank1"></p>
<p id = "author"></p>
</canvas>
<input type = "button"
id = "save"
value = "Save"
onclick = "saveFuction()"/>
<script type = "text/javascript" src = "js2.js"></script>
</body>
</html>
Javascript Code:
function myFunction(){
var quote, quote1, fsize, fsize1, fColor, fcolor1, bcolor, bcolor1, font, font1, width, width1, border, border1, author, author1, author2, format, fstyle, fstyle1;
format = document.getElementById("blank");
var context = format.getContext("2d");
quote=document.getElementById("quote");
quote1=quote.value;
outPut = document.getElementById("blank1");
if (quote1 != "") {
outPut.innerHTML = quote1;
} else {
alert("You need to enter a quote!");
}
author = document.getElementById("write_author");
author1 = author.value;
author2 = document.getElementById("author")
if (author1 == "" || author1 == "eg. (-Billy Joe)") {
alert("Who wrote this?");
} else {
author2.innerHTML = author1;
}
fcolor = document.getElementById("selColor");
fcolor1 = fcolor.value;
format.style.color=(fcolor1);
fstyle = document.getElementById("selStyle");
fstyle1 = fstyle.value;
if (fstyle1 == "italic") {
format.style.fontStyle=("italic");
format.style.textDecoration=("");
format.style.fontWeight=("");
} else if (fstyle1 == "underline"){
format.style.textDecoration=("underline");
format.style.fontStyle=("");
format.style.fontWeight=("");
} else if (fstyle1 == "bold") {
format.style.fontWeight=("bold");
format.style.textDecoration=("");
format.style.fontStyle = ("");
} else if (fstyle1 == "default") {
format.style.fontWeight=("");
format.style.textDecoration=("");
format.style.fontStyle = ("");
}
bcolor = document.getElementById("selBack");
bcolor1 = bcolor.value;
format.style.backgroundColor=(bcolor1);
border = document.getElementById("selBorder");
border1 = border.value;
format.style.border=( border1);
if (border1 == "dashed") {
format.style.borderWidth=("3px");
} else {
format.style.borderWidth=("5px");
}
width = document.getElementById("selWidth");
width1 = width.value;
format.style.width=(width1);
if (width1 == "375px") {
document.getElementById("blank").style.position = "absolute";
document.getElementById("blank").style.left = "962.5px";
}else if (width1 == "250px") {
document.getElementById("blank").style.position = "absolute";
document.getElementById("blank").style.left = "1025px";
}else if (width1 == "500px") {
document.getElementById("blank").style.position = "absolute";
document.getElementById("blank").style.left = "900px";
}
font = document.getElementById("selFont");
font1 = font.value;
format.style.fontFamily=(font1);
fsize = document.getElementById("selSize");
fsize1 = fsize.value;
format.style.fontSize=(fsize1);
}
function saveFunction(){
format.location.href = format.toDataURL();
}
Any help would be appreciated.
You can't draw html elements directly on canvas.
You'll have to learn/use the canvas drawing commands.
However, some people have had success with this library that simulates html elements on canvas:
http://html2canvas.hertzen.com/
You might also want to know that canvas.toDataURL doesn't allow you to save the image data to a user's local file system for security reasons.
Alternatively,
There are many screen-grabbers out there. SnagIt is a good one: http://www.techsmith.com/snagit.html
Check out html2Canvas as markE said, it takes a dom element and converts it to a canvas, and then you can draw that canvas onto another canvas something like this:
http://html2canvas.hertzen.com/
var domElement = document.getElementById('myElementId');
html2canvas(domElement, {
onrendered: function (domElementCanvas) {
var canvas = document.createElement('canvas');
canvas.getContext('2d').drawImage(domElementCanvas, 0, 0, 100, 100);
// do something with canvas
}
}
Related
here two level selection are given with select tag , i want to make one more level by adding one more select tag.
if i selected madhya pradesh from first select tag then selected Rewa from second selection tag then option list should come into third selection tag with reference to Rewa such as Rewa appeared with respect to madhya pradesh.
tahshil[Rewa] =
{"Huzur","Hanumana","Teonthar","Mangawan","Jawa","Sirmour",
"Mauganj","Naigarhi","Semaria","Gurh","Raipur - Karchuliyan"}
<html>
<head>
<script type="text/javascript">
var countries = [ ];
countries["Madhya Pradesh"] = ["Indore","Jabalpur","Bhopal","Raisen","Rajgarh","Sehore","Vidisha","Morena","Sheopur","Bhind","Ashoknagar","Shivpuri","Rewa"];
countries["Uttar Pradesh"] = ["Allahabad","Moradabad","Ghaziabad","Azamgarh", "Lucknow","Kanpur Nagar","Jaunpur","Sitapur","Bareilly","Gorakhpur","Agra"];
function switchCountry(selCountry)
{
var citySel = selCountry.form.City;
for ( var s = citySel.options.length-1; s > 0; --s )
{
citySel.options[s] = null;
}
var chosen = selCountry.options[selCountry.selectedIndex].text;
var cList = countries[chosen];
if ( cList != null )
{
for ( var i = 0; i < cList.length; ++i )
{
citySel.options[i+1] = new Option(cList[i],cList[i]);
}
}
}
</script>
</head>
<body>
<br>
<form>
<center>
<h3>Select State of shop : <select name="Country" onchange="switchCountry(this);">
<option value = "">Choose state</option>
<option value="mdp">Madhya Pradesh</option>
<option value="utp">Uttar Pradesh</option>
</select></h3>
<h3>Select District place : <select name="City">
<option>Choose City</option>
</select>
<h3>Select Tehsil place : <select name="Tehsil">
<option>Choose City</option>
</select>
</h3><br>
</center>
</form><br><br><br>
</body>
</html>
how to make third level selection ?
i made a solution for my question as follow:
<script type="text/javascript">
var countries = [ ];
countries["Madhya Pradesh"] = ["Indore","Jabalpur","Bhopal","Raisen","Rajgarh","Sehore","Vidisha","Morena","Sheopur","Bhind","Ashoknagar","Shivpuri","Rewa"];
countries["Uttar Pradesh"] = ["Allahabad","Moradabad","Ghaziabad","Azamgarh", "Lucknow","Kanpur Nagar","Jaunpur","Sitapur","Bareilly","Gorakhpur","Agra"];
var Tehsil = [ ];
Tehsil["Rewa"] = ["Huzur","Hanumana","Teonthar","Mangawan","Jawa","Sirmour", "Mauganj","Naigarhi","Semaria","Gurh","Raipur - Karchuliyan"];
function switchCountry(selCountry)
{
var citySel = selCountry.form.City;
for ( var s = citySel.options.length-1; s > 0; --s )
{
citySel.options[s] = null;
}
var chosen = selCountry.options[selCountry.selectedIndex].text;
var cList = countries[chosen];
if ( cList != null )
{
for ( var i = 0; i < cList.length; ++i )
{
citySel.options[i+1] = new Option(cList[i],cList[i]);
}
}
}
function switchCountry1(selCountry)
{
var citySel = selCountry.form.Tehsil;
for ( var s = citySel.options.length-1; s > 0; --s )
{
citySel.options[s] = null;
}
var chosen = selCountry.options[selCountry.selectedIndex].text;
var cList = Tehsil[chosen];
if ( cList != null )
{
for ( var i = 0; i < cList.length; ++i )
{
citySel.options[i+1] = new Option(cList[i],cList[i]);
}
}
}
</script>
</head>
<body>
<br>
<form>
<center>
<h3>Select State of shop : <select name="Country" onchange="switchCountry(this);">
<option value = "">Choose state</option>
<option value="mdp">Madhya Pradesh</option>
<option value="utp">Uttar Pradesh</option>
</select></h3>
<h3>Select District place : <select name="City" onchange="switchCountry1(this);">
<option>Choose City</option>
</select>
<h3>Select Tehsil place : <select name="Tehsil">
<option>Choose Tehsil</option>
</select>
</h3><br>
</center>
</form><br><br><br>
</body>
</html>
I am trying to make a website that makes a Mario Kart Wii license. For some reason the switch statement always shows a picture of Baby Mario even if I select a different character. This is a work-in-progress project, which is why it does not look done. Here's my code:
$(document).ready(function(){
var canvas = document.getElementById("mainCanvas");
var ctx = canvas.getContext("2d");
var name = document.getElementById("name");
var favRace = document.getElementById("favRace");
var bgrnd = document.getElementById("bgrnd");
var favChar = document.getElementById("favChar");
switch (favChar.value) {
case "Yoshi":
img = document.getElementById("yoshi");
break;
case "Baby Luigi":
img = document.getElementById("baby_luigi");
break;
case "Baby Daisy":
img = document.getElementById("baby_daisy");
break;
case "Baby Peach":
img = document.getElementById("baby_peach");
break;
case "Baby Mario":
img = document.getElementById("baby_mario");
break;
default:
img = "NULL";
}
$("#create").click(function(){
drawText("Name: " + name.value, 75, 10);
drawText("Favorite Race: " + favRace.value, 75, 20);
drawImg(img, 0, 0, 62, 72);
canvas.style.background = bgrnd.value;
document.getElementById("mainCanvas").style.display = "block";
});
function drawRect(x, y) {
ctx.fillStyle = "green";
ctx.fillRect(x, y, 8, 5);
}
function drawText(text, x, y) {
ctx.fillStyle = "black";
ctx.font = "9px Arial";
ctx.fillText(text, x, y);
}
function drawImg(img, x, y, width, height) {
ctx.drawImage(img, x, y, width, height);
ctx.strokeRect(x, y, width + 4, height + 4);
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
}
});
#font-face {
font-family: Bandits;
src: url("Bandits.ttf");
font-weight: bold;
}
#mainCanvas {
height: 300px;
width: 530px;
border: 2px solid black;
display: none;
}
.img {
display: none;
}
header {
background: -linear-gradient(#EEEEEE, #DDDDDD);
background: -webkit-linear-gradient(#EEEEEE, #DDDDDD);
height: 50px;
margin: -.6%;
padding: 10px;
}
#title {
font-family: Bandits;
font-size: 55px;
color: #585858;
}
body {
background-color: rgb(134, 170, 230);
}
fieldset {
width: 60%;
text-align: left;
}
.yellow {
color: yellow;
}
#license {
border: 2px solid black;
border-radius: 5px;
}
<!DOCTYPE HTML>
<HTML lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "description" content = "Create Mario Kart Wii Licenses!">
<meta name = "author" content = "Adam Oates">
<meta name = "title" content = "Mario Kart Wii">
<title title = "Mario Kart Wii | License Maker">
Mario Kart Wii | License Maker
</title>
<link rel = "apple-touch-icon" href = "">
<link rel = "shortcut icon" href = "">
<link rel = "stylesheet" type = "text/css" href = "main.css">
<script type = "text/javascript" src = "http://code.jquery.com/jquery-2.1.4.js"></script>
<script type = "text/javascript" src = "main.js"></script>
</head>
<body>
<header>
<div id = "title">
MKWii License Maker
</div>
</header><br><br><br><br>
<section>
<div align = "center">
<form action = "" method = "post">
<fieldset>
Name: <input type = "text" id = "name" placeholder = "Name"><br><br>
Favorite Race: <input type = "text" id = "favRace" placeholder = "Favorite Race"><br><br>
Overall Ranking: <select id = "ranking">
<option id = "e" value = "e">E</option>
<option id = "d" value = "d">D</option>
<option id = "c" value = "c">C</option>
<option id = "b" value = "b">B</option>
<option id = "a" value = "a">A</option>
<option id = "star1" value = "star1">★</option>
<option id = "star2" value = "star2">★★</option>
<option id = "star3" value = "star3">★★★</option>
</select><br><br>
Versus Points: <select id = "vrPoints">
<option id = "1000+" value = "1000+">1000+</option>
<option id = "2000+" value = "2000+">2000+</option>
<option id = "3000+" value = "3000+">3000+</option>
<option id = "4000+" value = "4000+">4000+</option>
<option id = "5000+" value = "5000+">5000+</option>
<option id = "6000+" value = "6000+">6000+</option>
<option id = "7000+" value = "7000+">7000+</option>
<option id = "8000+" value = "8000+">8000+</option>
<option id = "9000+" value = "9000+">9000+</option>
</select><br><br>
Favorite Character: <select id = "favChar">
<option value = "Baby Mario" id = "bm">Baby Mario</option>
<option value = "Baby Luigi" id = "bl">Baby Luigi</option>
<option value = "Baby Peach" id = "bp">Baby Peach</option>
<option value = "Baby Daisy" id = "bd">Baby Daisy</option>
<option value = "Toad" id = "toad">Toad</option>
<option value = "Toadette" id = "tdet">Toadette</option>
<option value = "Koopa Troopa" id = "kt">Koopa Troopa</option>
<option value = "Dry Bones" id = "db">Dry Bones</option>
<option value = "Mario" id = "mro">Mario</option>
<option value = "Luigi" id = "lgi">Luigi</option>
<option value = "Peach" id = "pch">Peach</option>
<option value = "Daisy" id = "dsy">Daisy</option>
<option value = "Yoshi" id = "ysh">Yoshi</option>
<option value = "Birdo" id = "bdo">Birdo</option>
<option value = "Diddy Kong" id = "diddy">Diddy Kong</option>
<option value = "Bowser Jr." id = "jr">Bowser Jr.</option>
<option value = "Wario" id = "wro">Wario</option>
<option value = "Waluigi" id = "wlgi">Waluigi</option>
<option value = "Donkey Kong" id = "dk">Donkey Kong</option>
<option value = "Bowser" id = "bwr">Bowser</option>
<option value = "King Boo" id = "kboo">King Boo</option>
<option value = "Rosalina" id = "rlna">Rosalina</option>
<option value = "Funkey Kong" id = "fk">Funkey Kong</option>
<option value = "Dry Bowser" id = "drybwr">Dry Bowser</option>
</select><br><br>
Secondary Character: <select id = "secChar">
<option value = "Baby Mario" id = "bm">Baby Mario</option>
<option value = "Baby Luigi" id = "bl">Baby Luigi</option>
<option value = "Baby Peach" id = "bp">Baby Peach</option>
<option value = "Baby Daisy" id = "bd">Baby Daisy</option>
<option value = "Toad" id = "toad">Toad</option>
<option value = "Toadette" id = "tdet">Toadette</option>
<option value = "Koopa Troopa" id = "kt">Koopa Troopa</option>
<option value = "Dry Bones" id = "db">Dry Bones</option>
<option value = "Mario" id = "mro">Mario</option>
<option value = "Luigi" id = "lgi">Luigi</option>
<option value = "Peach" id = "pch">Peach</option>
<option value = "Daisy" id = "dsy">Daisy</option>
<option value = "Yoshi" id = "ysh">Yoshi</option>
<option value = "Birdo" id = "bdo">Birdo</option>
<option value = "Diddy Kong" id = "diddy">Diddy Kong</option>
<option value = "Bowser Jr." id = "jr">Bowser Jr.</option>
<option value = "Wario" id = "wro">Wario</option>
<option value = "Waluigi" id = "wlgi">Waluigi</option>
<option value = "Donkey Kong" id = "dk">Donkey Kong</option>
<option value = "Bowser" id = "bwr">Bowser</option>
<option value = "King Boo" id = "kboo">King Boo</option>
<option value = "Rosalina" id = "rlna">Rosalina</option>
<option value = "Funkey Kong" id = "fk">Funkey Kong</option>
<option value = "Dry Bowser" id = "drybwr">Dry Bowser</option>
</select><br><br>
Vehichle Used For Favorite Character: <select id = "favKart">
<optgroup label = "Light Weight">
<option value = "Standard Kart S" id = "sks">Standard Kart S</option>
<option value = "Booster Seat" id = "bseat">Booster Seat</option>
<option value = "Mini Beast" id = "mb">Mini Beast</option>
<option value = "Cheap Charger" id = "cc">Cheap Charger</option>
<option value = "Tiny Titan" id = "tt">Tiny Titan</option>
<option value = "Blue Falcon" id = "bf">Blue Falcon</option>
<option value = "Standard Bike S" id = "sbs">Standard Bike S</option>
<option value = "Bullet Bike" id = "bb">Bullet Bike</option>
<option value = "Bit Bike" id = "bitb">Bit Bike</option>
<option value = "Quacker" id = "qkr">Quacker</option>
<option value = "Magikruser" id = "mgcCrsr">Magikruser</option>
<option value = "Jet Bubble" id = "jb">Jet Bubble</option>
<optgroup label = "Medium Weight">
<option value = "Standard Kart M" id = "skm">Standard Kart M</option>
<option value = "Classic Dragster" id = "cd">Classic Dragster</option>
<option value = "Wild Wing" id = "ww">Wild Wing</option>
<option value = "Super Blooper" id = "sb">Super Blooper</option>
<option value = "Daytripper" id = "dtrp">Daytripper</option>
<option value = "Sprinter" id = "sprnt">Sprinter</option>
<option value = "Standard Bike M" id = "sbm">Standard Bike M</option>
<option value = "Mach Bike" id = "machb">Mach Bike</option>
<option value = "Sugarscoot" id = "sugar">Sugarscoot</option>
<option value = "Zip Zip" id = "zip">Zip Zip</option>
<option value = "Sneakster" id = "sneak">Sneakster</option>
<option value = "Dolphin Dasher" id = "dphin">Dolphin Dasher</option>
<optgroup label = "Heavy Weight">
<option value = "Standard Kart L" id = "skl">Standard Kart L</option>
<option value = "Offroader" id = "offrdr">Offroader</option>
<option value = "Flame Flyer" id = "ffly">Flame Flyer</option>
<option value = "Pirahna Prowler" id = "prwlr">Pirahna Prowler</option>
<option value = "Jetsetter" id = "jetstr">Jetsetter</option>
<option value = "Honeycoupe" id = "hnycp">Honeycoupe</option>
<option value = "Standard Bike L" id = "sbl">Standard Bike L</option>
<option value = "Flame Runner" id = "frner">Flame Runner</option>
<option value = "Wario Bike" id = "wrobike">Wario Bike</option>
<option value = "Shooting Star" id = "shstr">Shooting Star</option>
<option value = "Spear" id = "spear">Spear</option>
<option value = "Phantom" id = "phntm">Phantom</option>
</select><br><br>
Vehichle Used For Secondary Character: <select id = "favKart">
<optgroup label = "Light Weight">
<option value = "Standard Kart S" id = "sks">Standard Kart S</option>
<option value = "Booster Seat" id = "bseat">Booster Seat</option>
<option value = "Mini Beast" id = "mb">Mini Beast</option>
<option value = "Cheap Charger" id = "cc">Cheap Charger</option>
<option value = "Tiny Titan" id = "tt">Tiny Titan</option>
<option value = "Blue Falcon" id = "bf">Blue Falcon</option>
<option value = "Standard Bike S" id = "sbs">Standard Bike S</option>
<option value = "Bullet Bike" id = "bb">Bullet Bike</option>
<option value = "Bit Bike" id = "bitb">Bit Bike</option>
<option value = "Quacker" id = "qkr">Quacker</option>
<option value = "Magikruser" id = "mgcCrsr">Magikruser</option>
<option value = "Jet Bubble" id = "jb">Jet Bubble</option>
<optgroup label = "Medium Weight">
<option value = "Standard Kart M" id = "skm">Standard Kart M</option>
<option value = "Classic Dragster" id = "cd">Classic Dragster</option>
<option value = "Wild Wing" id = "ww">Wild Wing</option>
<option value = "Super Blooper" id = "sb">Super Blooper</option>
<option value = "Daytripper" id = "dtrp">Daytripper</option>
<option value = "Sprinter" id = "sprnt">Sprinter</option>
<option value = "Standard Bike M" id = "sbm">Standard Bike M</option>
<option value = "Mach Bike" id = "machb">Mach Bike</option>
<option value = "Sugarscoot" id = "sugar">Sugarscoot</option>
<option value = "Zip Zip" id = "zip">Zip Zip</option>
<option value = "Sneakster" id = "sneak">Sneakster</option>
<option value = "Dolphin Dasher" id = "dphin">Dolphin Dasher</option>
<optgroup label = "Heavy Weight">
<option value = "Standard Kart L" id = "skl">Standard Kart L</option>
<option value = "Offroader" id = "offrdr">Offroader</option>
<option value = "Flame Flyer" id = "ffly">Flame Flyer</option>
<option value = "Pirahna Prowler" id = "prwlr">Pirahna Prowler</option>
<option value = "Jetsetter" id = "jetstr">Jetsetter</option>
<option value = "Honeycoupe" id = "hnycp">Honeycoupe</option>
<option value = "Standard Bike L" id = "sbl">Standard Bike L</option>
<option value = "Flame Runner" id = "frner">Flame Runner</option>
<option value = "Wario Bike" id = "wrobike">Wario Bike</option>
<option value = "Shooting Star" id = "shstr">Shooting Star</option>
<option value = "Spear" id = "spear">Spear</option>
<option value = "Phantom" id = "phntm">Phantom</option>
</select><br><br>
License Color: <select id = "bgrnd">
<option value = "blue" id = "blue">Blue</option>
<option value = "red" id = "red">Red</option>
<option value = "white" id = "white">White</option>
<option value = "green" id = "green">Green</option>
<option value = "navy" id = "navy">Navy Blue</option>
</select><br><br>
<input type = "button" id = "create" value = "Create License">
</fieldset>
</form><br><br><br>
<canvas id = "mainCanvas"></canvas>
</div>
<img src = "images/yoshi.png" id = "yoshi" class = "img">
<img src = "images/baby_mario.png" id = "baby_mario" class = "img">
<img src = "images/baby_luigi.png" id = "baby_luigi" class = "img">
<img src = "images/baby_daisy.png" id = "baby_daisy" class = "img">
<img src = "images/baby_peach.png" id = "baby_peach" class = "img">
</section>
<footer>
</footer>
</body>
</HTML>
You need to wrap it into event handler, and to get the selected value, like this:
$('#favChar').change(function(){
var favChar = document.getElementById("favChar");
var favorite = favChar.options[favChar.selectedIndex].value;
switch (favorite) {
case "Yoshi":
img = document.getElementById("yoshi");
break;
case "Baby Luigi":
img = document.getElementById("baby_luigi");
break;
case "Baby Daisy":
img = document.getElementById("baby_daisy");
break;
case "Baby Peach":
img = document.getElementById("baby_peach");
break;
case "Baby Mario":
img = document.getElementById("baby_mario");
break;
default:
img = "NULL";
}
});
Show log
When the page loades, it has my list and a show and hide button. However when i go down the list its suppose to display pictures and some text. However my buttons (hide and show) disappear. How to make them appear even when this occurs?
Thanks for the help
function imagechange(image)
{
mangaimage.innerHTML = "<img src='mangalist/" + image + "small.jpg'/>";
mangasummary.innerHTML = changetext(mangasum[image],95);
readmanga.href = mangasite[image];
}
function changetext(text,num)
{
numChar = num;
arrayWord = text.split(" ");
str = "";
strArray = new Array();
newtext = "";
for ( i = 0; i < arrayWord.length; i ++)
{
if (str.length + arrayWord[i].length >= numChar)
{
newtext += str + "<br />";
str = ""
}
if (str.length + arrayWord[i].length <= numChar)
{
str += arrayWord[i] + " ";
}
if (i == arrayWord.length-1)
{
newtext += str+ "<br />";
}
}
return newtext;
}
function hide()
{
document.getElementById("listm").style.display = "none";
<tr>
<td id = "mim" colspan ="2">
<span id = "mangaim">
</span>
</td>
<td id = "min">
Manga List:<br />
<select id= "listm" size = "15" onchange = "imagechange(this.value)">
<option value = "onepiece" id = "po"> One Piece </option>
<option value = "naruto" id = "po" > Naruto </option>
<option value = "bleach" id = "po"> Bleach </option>
<option value = "gintama" id = "po"> Gintama </option>
<option value = "nisekoi" id = "po"> Nisekoi </option>
<option value = "worldtrigger" id = "po"> World Trigger </option>
<option value = "psi" id = "po"> PSI Kusuo Saiki </option>
<option value = "ironknight" id = "po"> Iron Knight </option>
<option value ="stealth" id = "po"> Stealth Symphony </option>
<option value = "illegalrare" id = "po"> Illegal Rare </option>
<option value = "haikyu" id = "po"> Haikyu!! </option>
<option value = "kuroko" id = "po"> Kuroko No Basket </option>
<option value = "assassin" id = "po"> Assassination Classroom </option>
<option value = "shoku" id = "po"> Shokugeki no Soma</option>
<option value = "toriko" id = "po"> Toriko </option>
</select>
</td>
</tr>
<tr>
<td colspan = "2">
<span id="ms">
</td>
</br>
<button onclick = "hide()">Hide</button>
<button onclick = "showlist()">Show List</button>
<script>
mangaimage = document.getElementById("mangaim");
mangasummary = document.getElementById("ms");
readmanga = document.getElementById("rm");
</script>
</body>
Awesome App Beta
The corrected code below works. One potential problem was declaring an array and trying to use it like an object:
var mangasum = new Array();
mangasum["onepiece"] = "some string";
You can actually access arrays using an associative index. As MDN says:
Some people think that you shouldn't use an array as an associative
array. In any case, you can use plain objects instead, although doing
so comes with its own caveats. See the post Lightweight JavaScript
dictionaries with arbitrary keys as an example.
Reference: MDN Arrays
So the error was likely a combination of minor syntax errors and a lot of malformed html. Thanks to browser robustness it limped along regardless. Despite the ugly code, I came to admire OP's willingness to write it himself and at least try ... which is more than I can say about many posts on SO.
I leave it to OP to finish the details and make this an awesome app:
Run Snippet to Test (images omitted)
<!DOCTYPE HTML>
<html>
<head>
<title>Demo</title>
</head>
<body>
<table>
<tr>
<td id = "mim" colspan ="2">
<span id = "mangaim">
</span>
</td>
<td id = "min">
Manga List:<br />
<select id= "listm" size = "15" onchange = "imagechange(this.value)">
<option value = "onepiece" id = "po"> One Piece </option>
<option value = "naruto" id = "po" > Naruto </option>
<option value = "bleach" id = "po"> Bleach </option>
<option value = "gintama" id = "po"> Gintama </option>
<option value = "nisekoi" id = "po"> Nisekoi </option>
<option value = "worldtrigger" id = "po"> World Trigger </option>
<option value = "psi" id = "po"> PSI Kusuo Saiki </option>
<option value = "ironknight" id = "po"> Iron Knight </option>
<option value = "stealth" id = "po"> Stealth Symphony </option>
<option value = "illegalrare" id = "po"> Illegal Rare </option>
<option value = "haikyu" id = "po"> Haikyu!! </option>
<option value = "kuroko" id = "po"> Kuroko No Basket </option>
<option value = "assassin" id = "po"> Assassination Classroom </option>
<option value = "shoku" id = "po"> Shokugeki no Soma</option>
<option value = "toriko" id = "po"> Toriko </option>
</select>
</td>
</tr>
<tr>
<td colspan = "2">
<span id="ms">
</td>
</tr>
</table>
<button onclick = "hide()">Hide</button>
<button onclick = "showlist()">Show List</button>
<script type="text/javascript">
var mangasum = {
onepiece : "Gold Rogeet coveerso",
bleach : "Ichigo Kurosaki has always be",
stealth : "In a world where elves, dwar",
naruto : "In the village of Konohagakure",
kuroko : "Kuroko is a member from the l",
gintama : "The story focuses on an ecc",
nisekoi : "Raku Ichijou may be the heir to a y",
assassin : "A weird class kicks off in the super",
shoku : "Yukihira Souma's dream is to become a fu",
worldtrigger : "A gate to another dimension has burs",
haikyu : "A chance event triggerer",
illegalrare : "Supernatural creatures live alongside",
psi : "Saiki Kusuo has a wide array of superpowers at his",
ironknight : "A boy with a body like steel encounters the"
}
function imagechange(image) {
mangaimage.innerHTML = "<img src='mangalist/" + image + "small.jpg'>";
mangasummary.innerHTML = changetext(mangasum[image], 95);
readmanga.href = mangasite[image];
}
function changetext(text,num) {
numChar = num;
arrayWord = text.split(" ");
str = "";
strArray = new Array();
newtext = "";
for ( i = 0; i < arrayWord.length; i ++) {
if (str.length + arrayWord[i].length >= numChar) {
newtext += str + "<br />";
str = ""
}
if (str.length + arrayWord[i].length <= numChar) {
str += arrayWord[i] + " ";
}
if (i == arrayWord.length-1) {
newtext += str+ "<br />";
}
}
return newtext;
}
function hide() {
document.getElementById("listm").style.display = "none";
}
function showlist() {
document.getElementById("listm").style.display = "block";
}
var mangaimage = document.getElementById("mangaim");
var mangasummary = document.getElementById("ms");
var readmanga = document.getElementById("rm");
</script>
</body>
</html>
when i use split() the textfield value is empty, value for textfield from drop down that i need is e.g 15.
please show me where did i go wrong..
thanks,
here's the code :
<select name="cmbitems" id="cmbitems">
<option value="price1:15">blue</option>
<option value="price2:20">green</option>
<option value="price3:25">red</option>
</select>
<input type="text" name="txtprice" id="txtprice" onClick="checkPrice()">
var select = document.getElementById('cmbitems');
var pecah = select.split(":");
var hasil = pecah[1];
var input = document.getElementById('txtprice');
select.onchange = function() {
input.value = hasil.value;
}
Try this
<select name="cmbitems" id="cmbitems">
<option value="price1:15">blue</option>
<option value="price2:20">green</option>
<option value="price3:25">red</option>
</select>
<input type="text" name="txtprice" id="txtprice">
var input = document.getElementById('txtprice');
var select = document.getElementById('cmbitems');
select.onchange = function() {
var pecah = select.options;
var hasil = pecah[pecah.selectedIndex];
input.value = hasil.value.split(":")[1];
}
Try
var input = document.getElementById('txtprice');
document.getElementById('cmbitems').onchange = function() {
var select = document.getElementById('cmbitems').value;
var pecah = select.split(":");
var hasil = pecah[1];
alert(hasil);
input.value = hasil;
}
I'm attempting to create a page that creates a div with two paragraphs, specifically a quote and author. Afterwards, the user can change things like background color, font, font-size, and other attributes. So far everything works good, but then I want to have a save button that turns the div into one image that the user can right-click and save the image. Examples like this include http://www.teacherfiles.com/free_word_art.html and http://cooltext.com/. I looked into some of the script and HTML, but it led me to a dead end. Maybe somebody else can get something out of those? Then I started searching and saw a lot of different answers involving canvas, which I'm new to.
HTML Code:
<head>
<meta http-equiv="content-type" content="text/xml; charset=utf-8" />
<title>Quote It!</title>
<link rel = "stylesheet"
type = "text/css"
href = "passext.css" />
<script type = "text/javascript" src = "js2.js"></script>
</head>
<body>
<h1>It's as easy as One...Two...Three!</h1>
<div id = "instructions">
<p style = "text-align:center;">Instructions:</p>
<ol>
<li>Fill out quote and author fields, then press "Create Quote".</li>
<li>Adjust attributes and watch as it updates in real-time!</li>
<li>Click save and it will convert to a versatile image.</li>
</ol>
</div>
<div id = "tips_warnings">
<p style = "text-align:center;">Tips & Warnings:</p>
<ul>
<li>Don't forget to add quotation marks!</li>
<li>Don't forget a dash before the author.</li>
<li>To create a new quote, hit "Reset", and fill out the form.</li>
</ul>
</div>
<form name = "personalize" id = "personalize">
<fieldset class = "person">
<legend class = "legend">Personalize</legend>
<p>
<label class = "uinfo">Quote (One you make up or one you know):</label>
</p>
<p>
<textarea id = "quote"
rows = "10"
cols = "45"></textarea>
</p>
<p>
<label class = "uinfo">Author:</label>
<input type="text"
id = "write_author"
name = "author"
value = "eg. (-Billy Joe)"
onclick = "this.value = ''"/>
</p>
<p>
<label class = "uinfo">Text Color:</label>
<select id = "selColor" onchange="myFunction()">
<option value = "#ffffff">White</option>
<option value = "#000000">Black</option>
<option value = "#f09dee">Pink</option>
<option value = "#ff0000">Red</option>
<option value = "#1e4d0c">Green</option>
<option value = "#00ff00">Neon Green</option>
<option value = "#0000ff">Blue</option>
<option value = "#00ffff">Cyan</option>
<option value = "#ff00ff">Magenta</option>
<option value = "#ffff00">Yellow</option>
<option value = "#cccccc">Grey</option>
</select>
</p>
<p>
<label class = "uinfo">Text Style:</label>
<select id = "selStyle" onchange = "myFunction()">
<option value = "default">None</option>
<option value = "italic">Italics</option>
<option value = "underline">Underline</option>
<option value = "bold">Bold</option>
</select>
</p>
<p>
<label class = "uinfo">Background Color:</label>
<select id = "selBack" onchange = "myFunction()">
<option value = "null">None</option>
<option value = "#000000">Black</option>
<option value = "#ff0000">Red</option>
<option value = "#00ff00">Green</option>
<option value = "#0000ff">Blue</option>
<option value = "#00ffff">Cyan</option>
<option value = "#ff00ff">Magenta</option>
<option value = "#ffff00">Yellow</option>
<option value = "#ffffff">White</option>
<option value = "#cccccc">Grey</option>
</select>
</p>
<p>
<label class = "uinfo">Border:</label>
<select id = "selBorder" onchange="myFunction()">
<option value = "none">None</option>
<option value = "solid">Solid</option>
<option value = "double">Double</option>
<option value = "groove">Groove</option>
<option value = "ridge">Ridge</option>
<option value = "inset">Inset</option>
<option value = "outset">Outset</option>
<option value = "dashed">Dashed</option>
<option value = "dotted">Dotted</option>
</select>
</p>
<p>
<label class = "uinfo">Border Width:</label>
<select id = "selWidth" onchange = "myFunction()">
<option value = "500px">Large</option>
<option value = "375px">Medium</option>
<option value = "250px">Small</option>
</select>
</p>
<p>
<label class = "uinfo">Font:</label>
<select id = "selFont" onchange = "myFunction()">
<option value = "Times New Roman">Times New Roman</option>
<option value = "Serif">Serif</option>
<option value = "Sans-Serif">Sans Serif</option>
<option value = "Fantasy">Fantasy</option>
<option value = "Monospace">Monospace</option>
<option value = "Cursive">Cursive</option>
</select>
</p>
<p>
<label class = "uinfo">Font Size:</label>
<select id = "selSize" onchange = "myFunction()">
<option value = "105%">13pt</option>
<option value = "120%">14pt</option>
<option value = "130%">15pt</option>
<option value = "140%">16pt</option>
<option value = "150%">18pt</option>
</select>
</p>
<p class = "create_quote">
<input type = "button"
value = "Create Quote"
onclick = "myFunction()"/>
<script type = "text/javascript" src = "js2.js"></script>
<input type = "reset"/>
</p>
</fieldset>
</form>
<canvas id = "blank">
<p id = "blank1"></p>
<p id = "author"></p>
</canvas>
<input type = "button"
id = "save"
value = "Save"
onclick = "saveFuction()"/>
<script type = "text/javascript" src = "js2.js"></script>
</body>
</html>
Javascript Code:
function myFunction(){
var quote, quote1, fsize, fsize1, fColor, fcolor1, bcolor, bcolor1, font, font1, width, width1, border, border1, author, author1, author2, format, fstyle, fstyle1;
format = document.getElementById("blank");
var context = format.getContext("2d");
quote=document.getElementById("quote");
quote1=quote.value;
outPut = document.getElementById("blank1");
if (quote1 != "") {
outPut.innerHTML = quote1;
} else {
alert("You need to enter a quote!");
}
author = document.getElementById("write_author");
author1 = author.value;
author2 = document.getElementById("author")
if (author1 == "" || author1 == "eg. (-Billy Joe)") {
alert("Who wrote this?");
} else {
author2.innerHTML = author1;
}
fcolor = document.getElementById("selColor");
fcolor1 = fcolor.value;
format.style.color=(fcolor1);
fstyle = document.getElementById("selStyle");
fstyle1 = fstyle.value;
if (fstyle1 == "italic") {
format.style.fontStyle=("italic");
format.style.textDecoration=("");
format.style.fontWeight=("");
} else if (fstyle1 == "underline"){
format.style.textDecoration=("underline");
format.style.fontStyle=("");
format.style.fontWeight=("");
} else if (fstyle1 == "bold") {
format.style.fontWeight=("bold");
format.style.textDecoration=("");
format.style.fontStyle = ("");
} else if (fstyle1 == "default") {
format.style.fontWeight=("");
format.style.textDecoration=("");
format.style.fontStyle = ("");
}
bcolor = document.getElementById("selBack");
bcolor1 = bcolor.value;
format.style.backgroundColor=(bcolor1);
border = document.getElementById("selBorder");
border1 = border.value;
format.style.border=( border1);
if (border1 == "dashed") {
format.style.borderWidth=("3px");
} else {
format.style.borderWidth=("5px");
}
width = document.getElementById("selWidth");
width1 = width.value;
format.style.width=(width1);
if (width1 == "375px") {
document.getElementById("blank").style.position = "absolute";
document.getElementById("blank").style.left = "962.5px";
}else if (width1 == "250px") {
document.getElementById("blank").style.position = "absolute";
document.getElementById("blank").style.left = "1025px";
}else if (width1 == "500px") {
document.getElementById("blank").style.position = "absolute";
document.getElementById("blank").style.left = "900px";
}
font = document.getElementById("selFont");
font1 = font.value;
format.style.fontFamily=(font1);
fsize = document.getElementById("selSize");
fsize1 = fsize.value;
format.style.fontSize=(fsize1);
}
function saveFunction(){
format.location.href = format.toDataURL();
}
Any help would be appreciated.
Here is some stuff that you can use in your project. See the examples, it can be help. That script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. I hope you make it.
http://html2canvas.hertzen.com/
and here some examples
http://experiments.hertzen.com/jsfeedback/