I have written some code for an image I am mapping. When I click on a box that I've mapped[MAC 2311] within the original image, I have an onClick event to where I call a function in which I would like to append an image, more specifically an X, over the original box that I just clicked, but my onClick event isn't working. Here is my code for the function and my fiddle with full code. Click on the box marked MAC 2311 calculus I to test my onClick
<script type="text/javascript">
function myAction(where) {
var img = document.createElement("img");
img.src = "http://i67.tinypic.com/2dvo8qp.jpg";
img.height = 75;
img.width = 113;
img.style.top=700;
img.style.right=100;
where.parentNode.appendChild(img);
}
</script>
https://jsfiddle.net/L04yjr88/
Related
I am working on a form widget on Elementor on WordPress, when the user submits the submit button of the form, it will show a pop-up which is created by elementor. The pop-up actually is a DIV tag including my HTML code which I wrote in an HTML widget into the pop-up, as below, and this DIV will be added by some Elementor function to the body tag of the page dynamically when user presses submit button.
<div id="calenderchooser01" style="min-height:100px;"></div>
<script>
function calenderchooser(){
var calenderhtml="";
var numofunits = document.getElementById("form-field-field_numberunits");
if(numofunits.value>=15){
calenderhtml = "<div class='calendly-inline-widget' style='min-width:320px;width:100%;height:650px;'>over 15</div>";
}else if(numofunits.value<15){
calenderhtml = "<div class='calendly-inline-widget' style='min-width:320px;width:100%;height:650px;'>less than 15</div>";
}
document.getElementById("calenderchooser01").innerHTML = calenderhtml;
console.log(calenderhtml);
}
document.getElementById("thisisanidcustom").addEventListener("click",
calenderchooser
);
</script>
thisisanidcustom is the id of submit button form. Also, I tested it with assigning showing of this pop-up to a normal button.
In both cases when I press the button it shows error on the Chrome console:
Uncaught TypeError: Cannot set property 'innerHTML' of null
at HTMLAnchorElement.calenderchooser (9a48896437a750ba11b18d8323f96ea7.js:59)
it references this line :
document.getElementById("calenderchooser01").innerHTML = calenderhtml;
and I think it says that the div#calenderchooser01 does not exist.
I think maybe the function call occurs before adding the DIV to the body tag. but I have not access to Elementor default functions to edit them and say after popup occurs call the calenderchooser(). so in this situation how can I call the function calenderchooser() right after popups shows up. I also thought of something like an event listener on DIV existing change state if available but found nothing.
this worked for me using window.setTimeout() method:
<div id="over15" class='calendly-inline-widget' style='min-width:320px;width:100%;height:650px;display:none'>over 15</div>
<div id="less15" class='calendly-inline-widget' style='min-width:320px;width:100%;height:650px;display:none'>less than 15</div>
<script>
function functionCall(){
setTimeout(calenderchooser, 100);
}
function calenderchooser(){
var numofunits = document.getElementById("form-field-field_numberunits");
if(numofunits.value>=15){
document.getElementById("over15").style.display = "block";
console.log("over15");
}else if(numofunits.value<15){
document.getElementById("less15").style.display = "block";
console.log("less15");
}
}
document.getElementById("thisisanidcustom").addEventListener("click", functionCall
);
</script>
I am trying to get some knowledge in html and canvases, and i am stuck with a little problem. My canvas has a circle on top and 2 buttons below it. One button can be clicked whereas the other is an input button. What I have to do is that i should be able to type in the second button and when the first button is clicked, the first button's value should be changed to the value typed in second button. That click should also move the circle in x axis. I did the movement part, can anyone help me out with the input buttons inside the canvas?
Here's the part of my code, here i tried to put buttons outside the canvas, but i need them in the canvas, not as the html buttons though:
<script>
var stage;
function init() {
stage = new createjs.Stage("myCanvas");
var cbgColor = new createjs.Shape();
cbgColor.graphics.beginFill("#000000").drawRect(0,0, stage.canvas.height,stage.canvas.width);
stage.addChild(cbgColor);
var ball = new createjs.Shape();
ball.graphics.beginFill("#ff0000").drawCircle(0,0,50);
ball.x=100;
ball.y=200;
stage.addChild(ball);
createjs.Ticker.addEventListener("tick",tick);
createjs.Tween.get(ball,{loop:false}).to({x:650}, 3000).to({x:100},1);
}
function tick(event){
stage.update();
}
function handleClick(event){
console.log("clicked");
}
</script>
</head>
<body bgcolor="black" onload="init()">
<canvas id="myCanvas" height=300 width=600>
</canvas><br>
<script>
function change()
{
var inp = document.getElementById('ip').value;
document.getElementById('add').value = inp;
console.log("clicked");
document.getElementById('ip').value=null;
}
</script>
<input id="add" value="Go!" type="button" onclick="change();init();" style="background-color:yellow;font-size:30px;width:110px;height:40px;margin-left:250px"><br>
<br><input type="text" id="ip" style="background-color:black;color:white;font-size:30px;width:140px;height:40px;margin-left:230px">
I want to enable a java script when i press a button.
for example, the java script is -
<div id="miniclip-game-embed" data-game-name="upipe-skateboard" data-theme="1" data-width="600" data-height="457"></div>
<script src="http://www.miniclip.com/js/game-embed.js"></script>
and when i click the button U pipe,this java script should get enabled
The button and enabling code should be in html
This element write a iframe in div.
You can create a outstanding div, if you download and modify game-embed.js (iframe element) the event would fire at all times.
<div style="position: relative;">
<div style="position: absolute; z-index: 1000; width: 600px; height: 457px;" onclick="this.style.display='none'; /* put your action */"></div>
<div style="position: absolute; z-index: 900;" id="miniclip-game-embed" data-game-name="upipe-skateboard" data-theme="1" data-width="600" data-height="457"> </div>
<script src="http://www.miniclip.com/js/game-embed.js"> </script>
</div>
Try this!
Here's something you could try.
First of all you might need some kind of a reusable script injector. Below is an example that takes a URL as parameter and loads a script located at that URL.
function injectScript(src) {
var scriptElement = document.createElement('script');
scriptElement.type = 'text/javascript';
scriptElement.language = 'javascript';
scriptElement.src = src;
document.getElementsByTagName('head')[0].appendChild(scriptElement);
}
Next, you probably need to enable not only the game, but the <div> container where it is going to be displayed. So here's a little helper that you can customise to your liking:
function enableTheGame(containerId, scriptSource) {
var container = document.getElementById(containerId);
if (container) {
container.className = 'enabled'; // can be anything, e.g. style.display='block'
injectScript(scriptSource); // here's our injector
}
}
Now, provided that your button has an id, let's attach to it an event listener that will enable the game. Note that it's important to wait for the page to finish loading.
window.addEventListener('load', function () {
var button = document.getElementById('SomeButton');
if (button) {
button.addEventListener('click', function () {
enableTheGame('miniclip-game-embed', 'http://www.miniclip.com/js/game-embed.js');
});
}
});
The above examples can be improved. For example, the last function could take a look at the button's data-... properties and decide which script to load and where to.
I've found some Javascript code on the web for toggling between two images when clicking on them as in this example.
Now I wonder how to achieve the same result using divs with the pictures being inside the divs.
Both the small and the large image will each be the background image of a div which is inside another div that forms the border (I need to do this to be able to set the inner border radius of the image, which I can when I use an inner div and set its border radius). So I have:
<div class="bordersmallpicture"><div class="smallpicture"></div></div>
and
<div class="borderlargepicture"><div class="largepicture"></div></div>
How can I tell Javascript to toggle between those two div couples instead of images? Here is the Javascript code that I found for the images:
<script>
var imageURL = "small-picture.png";
if (document.images) {
var smallpicture = new Image();
smallpicture.src = "small-picture.png";
var largepicture = new Image();
largepicture.src = "large-picture.png";
}
function changeImage() {
if (document.images) {
if (imageURL == "large-picture.png") {imageURL = "small-picture.png";}
else {imageURL = "large-picture.png";}
document.myimage.src = imageURL;
}
}
</script>
And the HTML part:
<img src="small-picture.png" name="myimage" title="Click to resize" alt="tree">
Can anyone give me a hint how to edit this code to toggle between the div couples mentioned above? Or will a whole new code be necessary when dealing with divs?
You simply need to toggle the classes. See a running example using your images as CSS background in the classes:
<div id="border-div" class="bordersmallpicture">
<div id="image-div" class="smallpicture"></div>
</div>
The the Javascript becomes:
<script>
function changeImage() {
var currentClass = document.getElementById('border-div').className;
if(currentClass == 'borderlargepicture') {
document.getElementById('border-div').className = 'bordersmallpicture';
document.getElementById('image-div').className = 'smallpicture';
} else {
document.getElementById('border-div').className = 'borderlargepicture';
document.getElementById('image-div').className = 'largepicture';
}
}
</script>
If you expect using javascript a lot, I recommend using jQuery which would make the code easier:
<script>
function changeImage() {
$('#border-div').toggleClass('bordersmallpicture').toggleClass('borderlargepicture');
$('#image-div').toggleClass('smallpicture').toggleClass('largepicture');
}
</script>
toggleClass turns ON/OFF a class (Here is the example)
I have a div that I am floating as a dialog over my page. When I use try and use the , the file selector does not get shown. Any help would be appreciated.
The function to create the floating div looks like
function openFloat($html)
{
$floatDiv = $('<div id="mainFloater" class="floater" ></div>');
$center = $('<div id="floaterCenter" class="floater" align="center"></div>');
$fieldset = $('<fieldset id="floaterFieldset" align="left" id="floaterFieldset"></fieldset>');
$fieldset.append($html);
$floatDiv.append($center);
$center.append($fieldset);
$('body').append($floatDiv);
}
openFloat($('<input type="file" name="file">'))
If I use the script at onload it does work.
<script type="text/javascript">
function openFloat($html)
{
$floatDiv = $('<div id="mainFloater" class="floater" ></div>');
$center = $('<div id="floaterCenter" class="floater" align="center"></div>');
$fieldset = $('<fieldset id="floaterFieldset" align="left" id="floaterFieldset"></fieldset>');
$fieldset.append($html);
$floatDiv.append($center);
$center.append($fieldset);
$('body').append($floatDiv);
}
$(document).ready(function(){
openFloat($('<input type="file" name="file">'));
});
</script>
I found the problem. I had some click handlers. A click on the mainFloater would hide everything. A click on the floaterFieldset would cancel the click (so it would not hide). However the cancel click also canceled the clicks for all buttons.