I try to upload and draw an image into a canvas.
I have the html code for button and canvas and js code for onchange event.
My code does not work and I do not have any errors to figure out what is going on.
The fix is by simply including your scripts at the end of the body before the closing tag </body>.
Your html code will appear like this:
<html>
<body>
<div id="buttonsDiv" >
<input type="file" accept="image/*" title="Upload Image" class="normal-button" id="uploadBtn"/>
</div>
<canvas id= "myImgCanvas" title="Drop an image here to upload" ></canvas>
<script src="myFileName.js"></script>
</body>
</html>
Note that you must pay attention when you should/ should not include your scripts in the <head> tag vs including it at the end of the </body> tag. You can check this post for the best practice.
Related
i am using froala editor, however when i put this html code in the code view
<td><img src="http://edm.gsc.com.my/WebLITE/Applications/campaignmgmt/uploaded/pics/2017/gsc-edm-july2017/masthead-gsc30.jpg" width="280" height="110" alt="#GSC30" title="#GSC30" class="img-max" style="display:block;"></td>
it become,
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body style="min-height: 300px;">
<p>
<img src="http://edm.gsc.com.my/WebLITE/Applications/campaignmgmt/uploaded/pics/2017/gsc-edm-july2017/masthead-gsc30.jpg" width="280" height="110" alt="#GSC30" title="#GSC30" class="img-max fr-fil fr-dib">
</p>
</body>
</html>
i dont want it to help me to format anything, how can i disable the froala editor to format anything for me?
It looks like you are using the fullPage option: https://www.froala.com/wysiwyg-editor/docs/options#fullPage. When this option is used, the editor is automatically adding HTML, HEAD and BODY tags.
To disable wrapping the a with P tags, you should also turn the enter option to $.FroalaEditor.ENTER_BR: https://www.froala.com/wysiwyg-editor/docs/options#enter.
For some reason the following very simple code will not execute visibility setting in safari until AFTER the file is finished uploading or if a user doesn't put a file into the file input section.
This is the only browser it acts like this in.
Every other browser executes the visibility settings while the file is uploading. Please, can anyone explain why?
ENTIRE SIMPLE PHP FILE CODE
<html>
<head>
<title>Our Industry Alpha 0.01</title>
<script>
function formcheck() {
document.getElementById('i_submit').style.visibility='hidden'; document.getElementById('patience').style.visibility='visible';
}
</script>
</head>
<body>
<form action="" enctype="multipart/form-data" method="post">
<input type="file" required>
<input type="submit" style="visibility:visible;" value="Send" id="i_submit" onclick="formcheck();">
</form>
<div id="patience" style="visibility:hidden;">... UPLOADING ...</div>
</body>
</html>
Excuse my English.
I tried to use the jQuery Reel Plugin and it works perfectly on my html file.
<img src="DSCN0691.jpg" width="210" height="186"
class="reel"
id="image1"
data-images="fish/DSCN####.JPG|691..702">
But if I add the script through document.innerHTML, it doesn't work at all.
The image will show up, but I can't reel it.
document.getElementById('Hello').innerHTML='<img src="fish/DSCN0691.JPG" width="210" height="186" class="reel" id="image2" data-images="fish/DSCN####.JPG|691..702">';
I also tried the element.setAttribute(name, value) function,
or loaded the whole html file using jQuery.
But it turns out the same way...
Have no idea what to do now.
Or are there any other solution that I can show and hide the reel image dynamically ?
Thanks a lot.
Down here are the whole script and project.
JQuery Reel Project
<script language="JavaScript">
function WriteToFile(passForm) {
document.getElementById('Hello').innerHTML='<img src="fish/DSCN0691.JPG" width="210" height="186" class="reel" id="image2" data-images="fish/DSCN####.JPG|691..702">';
}
</script>
<head>
<script src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<script src='jquery.reel.js' ></script>
</head>
<body>
<div id="Hello"></div>
<input type="button" value="submit" onclick="WriteToFile(this);">
<img src="DSCN0691.jpg" width="210" height="186"
class="reel"
id="image1"
data-images="fish/DSCN####.JPG|691..702">
</body>
The reel plugin is initializing all images with the class "reel" on document load. If you change the HTML Dom afterwards, you need to initialize the added image. You can do this by the following javascript instead:
$('#image').reel({
images: 'fish/DSCN####.JPG|691..702'
});
The below code has 3 buttons. While the first two buttons use draw.js, the 3rd button uses shapes.js. Both javascripts have an onclick event handler, so I cannot use both scripts at same time.
Is there a way I can dynamically replace javascript in button click? Like when I press add polygon or add line only draw.js works and when I press add doors shapes.js works?
I tried following: http://www.javascriptkit.com/javatutors/loadjavascriptcss2.shtml but didn't understand anything and made a mess out of my code. Similarly, as you can guess by the code, I am drawing on canvas so I don't want to lose anything on my canvas that is already there when I change my script.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="shapes.js"></script>
<script type="text/javascript" src="draw.js"></script>
</head>
<body>
<div id="board">
<canvas id="canvas1" width="300" height="300" style="border: 1px solid black;"> </canvas>
<br />
<input type="button" value="Add polygon" class="draw" data-type="poly">
<input type="button" value="Add line" class="draw" data-type="line">
<input type="button" value="Add door" >
</div>
</body>
</html>
You can use RequireJS library for it( http://requirejs.org/ ). RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments.
Like this, you can add any JS by RequireJS:
<script data-main="shapes.js" src="js/require.js"></script>
you can use HeadJs library .
HeadJS is a JavaScript file and module loader, a small library for Responsive Design, Feature Detections & Resource Loading
HeadJs is great and useful, try it.
Need to quickly load a JS or CSS file
// Load up some JS
head.load("jQuery.js", function() {
// Call a function when done
console.log("Done loading jQuery");
});
// Load up some CSS
head.load("bootstrap.css");
I have 2 files. One called foo1.php and the other called foo2.php.
Contents of foo1.php:
<script type="text/javascript" src="yoxview/yoxview-init.js"></script>
<div class="yoxview">
<img src="files/Desert.jpg" alt="First" title="First image" />
<img src="files/hydrangeas.jpg" alt="Second" title="Second image" />
<img src="files/Jellyfish.jpg" alt="Third" title="Third image" />
</div>
Contents of foo2.php:
<script type="text/javascript" src="scripts/jquery-1.4.4.min.js"></script>
<script>
$(document).ready(function() {
$('.bar').load('foo1.php');
});
</script>
<div class="bar">this text will be replaced</div>
When I go to foo2.php I get a blank white page with a never ending loading favicon. I think this has something to do with loading the script:
<script type="text/javascript" src="yoxview/yoxview-init.js"></script>
in foo1.php since the contents of that page are passed through the .load() function. When I remove that script reference foo1.php loads just fine. I don't think this problem is specific to that particular script. If I try to load any page with a script reference the same result occurs (the blank page/loading favicon).
Is there a way to load content from another page that has script references?
EDIT
Here's the link to the problem script:
http://www.yoxigen.com/yoxview/yoxview/yoxview-init.js
Try using this to intercept the document.write, it's worked for me in the past: https://github.com/iamnoah/writeCapture