I am new to coding so I am looking for the simplest way to take and image and show or hide it based either on one button or via radio button controls. Currently the image is on as an but i can use the any recommend method. If at all possible from a different page on my site.
For a button, you could use
<html>
<body>
<script type="text/javascript">
function addimage() {
var img = document.createElement("img");
img.src = "IMAGE_URL_HERE";
img.height = IMAGE_HEIGHT;
img.width = IMAGE_WIDTH;
//optionally set a css class on the image
var class_name = "foo";
img.setAttribute("class", class_name);
document.body.appendChild(img);
}
</script>
</head>
<body>
<button onclick="addimage();">Click</button>
</body>
</html>
Related
In case of Edge browser say Browser One, passing a custom argument to second Browser.
if I pass a string it is available in the second window. But, if I pass an object (say XMLDocument) in the second window, I could not serialzetoString.
var myWin = window.open(...);
myWin.customArg = 'string parameter' // Works
myWin.customArg = xmlObject // Doesnt Work
in the second window,
new XMLSerializer().serializeToString(xmlDoc)
throws xml parser exception.
Can any one help in resolving this?
Same code works fine for Chrome.
Edit - Sample code of Parent Window is here -
<html>
<head>
<script type="text/javascript">
function OpenWindow()
{
var objXML = '<SelectedCharts><Chart ColumnNo="1" ChartName="E0PK" GroupName="test" OrderNo="1" /></SelectedCharts>';
var xmlDoc = new DOMParser().parseFromString(objXML,'text/xml');
var dialog = window.open("Child_Window.htm", "title", "width=550px, height= 350px,left=100,top=100,menubar=no,status=no,toolbar=no");
dialog.dialogArguments = xmlDoc ;
dialog.opener = window;
}
</script>
</head>
<body>
<span>Passing an XML Object to the child window:</span>
<input type="button" value="Open Popup" onclick="OpenWindow()" />
</body>
</html>
And the sample code of Child window is here -
<html>
<head>
<script type="text/javascript">
function onBodyLoad()
{
alert(new XMLSerializer().serializeToString(window.dialogArguments));
}
</script>
</head>
<body onload="onBodyLoad()">
<span>This is child window.</span>
</body>
</html>
The code snippet shown in the question works fine for Chrome browser. And to pass the context to another window in case of Edge browser, follow the below method.
declare a global variable and set it in the parent window
And, access the varable in the child window using window.opener.
And sample code is provided in Pass custom arguments to window.open in case of Edge browser
My canvas has image which programly generated from local file or from images from internet. When I try to save it using toDataURl function I get secure error. How can I save result (without server, using only js ) and is it possible?
I know about security rule but maybe there is some solution to bypass this rule
All my code is in github if need
Shame! Don't bypass rules built to provide security for our users.
The key to satisfying CORS security and still getting what you need is to let the user select the image file you need to load into canvas.
If the user selects the file, CORS security is satisfied and you can use the canvas as you need (including using canvas.toDataURL to save the canvas).
Here are the steps to let a user select a file from their local drive:
Add an html input element with type="file"
The user clicks browse on this element and selects their file
When the user clicks OK, use window.URL.createObjectURL to create a URL from their selected file.
Create a new Image and set its source to the URL you created in #3.
Use context.drawImage to draw your new image on the canvas.
The resulting canvas is CORS compliant so canvas.toDataURL will work.
Here's example code:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
#canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
$("#fileInput").change(function(e){
var URL = window.webkitURL || window.URL;
var url = URL.createObjectURL(e.target.files[0]);
var img = new Image();
img.onload = function() {
canvas.width=img.width;
canvas.height = img.height;
ctx.drawImage(img,0,0);
ctx.fillStyle="black";
ctx.fillRect(0,canvas.height-30,canvas.width,30);
ctx.fillStyle="white";
ctx.font="18px verdana";
ctx.fillText("I'm OK with CORS!",5,canvas.height-8);
}
img.src = url;
});
$("#save").click(function(){
var html="<p>Right-click on image below and Save-Picture-As</p>";
html+="<img src='"+canvas.toDataURL()+"' alt='from canvas'/>";
var tab=window.open();
tab.document.write(html);
});
}); // end $(function(){});
</script>
</head>
<body>
<input type="file" id="fileInput">
<button id="save">Save</button><br>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
I have a javascript function that I need to give her an 'ID' of div from onClick img tag
Is there any one that can help me I don't know what to do:
Html:
<img onclick="imgClicked"></img>
<div id="foo">...</div>
Javascript:
<script type = "text/javascript">
window.imgClicked = function(){
var div = document.getElementById("foo");
...//do anything you want...
}
</script>
You can find the div , on which the image is clicked by using event.target.nodeName
Setup an click event handler for Image, then u can use above to find out the div of the image clicked.hope it helps..
I am new in jquery I desperately need some help in running this code.I am trying to create a fade in-fade out image banner with 4 images within div tag, with the help of a function fadingbanner() which calls itself recursively and is initiated by a settimeout function.But for some reason its not working.Please help....
<HTML>
<HEAD>
<script type= "text/javascript" src="C:\Documents and Settings\A\Desktop\jquery-1.9.1.js"></script>
<SCRIPT>
<div>
<img src = "C:\Documents and Settings\A\Desktop\web_files\temp1.jpg" id = "i1">
<img src = "C:\Documents and Settings\A\Desktop\web_files\temp2.jpg" id = "i2">
<img src = "C:\Documents and Settings\A\Desktop\web_files\temp3.jpg" id = "i3">
<img src = "C:\Documents and Settings\A\Desktop\web_files\temp4.jpg" id = "i4">
</div>
function fadingbanner()
{
$(document).ready(function(){
$("#i1").fadeOut(2000,function(){
$("#i2").fadeIn(2000,function(){
$("#i2").fadeOut(2000,function(){
$("#i3").fadeIn(2000,function(){
$("#i3").fadeout(2000,function(){
$("#i4").fadeIn(2000,function(){
$("#i4").fadeout(2000,function(){
fadingbanner();
});
});
});
});
});
});
});
}
</SCRIPT>
</HEAD>
<BODY>
<IMG NAME = "bannerimage" src = "C:\Documents and Settings\A\Desktop\web_files\temp1.jpg" height = "200" width = "600" onload = "settimeout("fadingbanner()",1000)">
</BODY>
</HTML>
Take out the function and it should work ok. It is only defining a function and never running it. If it did run it, all it would do is schedule the code to run when the document finishes loading.
You also want to hide all but the first picture at the start.
So it should be like:
$(document).ready(function(){
$("#i2, #i3, #i4").hide();
$("#i1").fadeOut(2000,function(){
... all that other stuff
});
});
Here is a fiddle showing it: http://jsfiddle.net/ePBkX/1/
I borrowed the pictures there from the fiddle attached to this, which you might want to read: jQuery fade out then fade in
I'm trying to create a create a new CKEditor ver4 instance in response to the user clicking on an element. Due to the nature of the application, I can not use the "autoInline" feature as outlined in the CKEditor Sample. While the sample below does in fact create an editor instance, that instance has a significant problem. Inline instances are supposed to disappear when the user clicks away from them. In this example however, the user must first click away, click back into the instance, and then click away again. How can I prevent this?
<!doctype html>
<html>
<head>
<script src="jspath/ckeditor.js"></script>
<script>
var editor = null;
CKEDITOR.disableAutoInline = true;
function init() {
var e2 = document.getElementById("element2");
e2.addEventListener("click", function () {
if(!editor) {
editor = CKEDITOR.inline(e2);
editor.on('instanceReady', function () {
console.log("instanceReady")
console.log(editor.focusManager.hasFocus);
});
editor.on('focus', function() {
console.log("focus");
})
editor.on('blur', function() {
console.log("blur");
editor.destroy();
editor = null;
})
}
})
}
</script>
</head>
<body onload="init()">
<div tabindex="0" id="element2" style="background-color: yellow;" contentEditable = true>Element 2</div>
</body>
</html>
Despite the fact that editor.focusManager.hasFocus was true, the editor's element did not in fact have focus. Perhaps this is a bug? Anyway, adding editor.focus(); to the instanceReady function resolved the issue.