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">
Related
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/
I hace some code that adds dynamic input boxes on a click. In all of the major browsers, it works fine. But in IE8 it does nothing. There are no errors being reported and developer tools shows no errors either. should this code work with IE8. Thanks
jQuery 1.7.1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Script an doctype in the head section.
<script type="text/javascript">
$(function() {
var MaxInputs = 7; //maximum input boxes allowed
var InputsWrapper = $("#INTKInputsWrapper"); //Input boxes wrapper ID
var AddButton = $("#INTKAddMoreFileBox"); //Add button ID
var x = InputsWrapper.length; //initlal text box count
var FieldCount=1; //to keep track of text box added
$(AddButton).click(function (e) //on add input button click
{
if(x <= MaxInputs) //max input box allowed
{
FieldCount++; //text box added increment
//add input box
$(InputsWrapper).append('<div><input type="text" name="box_add[]'+FieldCount+'" required="required" " /><img src="/domain/users/css/images/redclose.png" style="margin-left: 10px; margin-right:10px;" /><span style="margin-left:2px;font-size:10px;color: grey;">Remove</span></div>');
x++; //text box increment
}
return false;
});
$("body").on("click",".removeclass", function(e){ //user click on remove text
if( x > 1 ) {
$(this).parent('div').remove(); //remove text box
x--; //decrement textbox
}
return false;
})
});
</script>
HTML relevant code
<fieldset>
<legend>Input box reference(s)</legend>
Add More Boxes<span style="margin-left:10px;font-size:10px;color: grey;">( Maximum 8 )</span>
<div id="INTKInputsWrapper">
<input name="box_add[]" type="text" required="required />
<a style="margin-left: 14px;" href="javascript:void(0)" class="boxhelp">Help</a>
</div>
</fieldset>
I am working with an icon which is clickable and once you clicked it. It will add another icon in the div i want to set the created icon to be draggable and from the inspect element it is draggable yet I can't drag it on my screen. Can someone check what seems to be the problem?
HTML:
<div id = icon>
<img class="icon" src="../../Pictures/bulb.png" width="50" height="50"/>
<img class="icon" src="../../Pictures/snow.png" width="50" height="50"/>
</div>
Jscript
$(function () {
$('.icon').click(function () { DrawImage($(this).attr('src')); });
});
function DrawImage(a) {
image = document.createElement('img');
image.setAttribute('class', 'drag');
image.setAttribute('src', a);
image.setAttribute('draggable', 'true');
image.setAttribute('style', 'position:relative; top:0px; left:0px;');
image.height = 50;
image.width = 50;
$('#icon').append(image);
}
added this on my html head
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-ui-1.8.11.js")"></script>
update:
fixed it by cloning the image element and assigning some attribute to it
var iconnew = $(iconimg).clone();
iconnew.attr({ "id": "clone"});
iconnew.css({'top':mouseY, 'left':mouseX})
iconnew.appendTo('#drag').draggable({ containment: '#bg' });
I don't think you are actually enabling the draggable functionality on your image element when you append it to the DOM. You could try changing your DrawImage function to this:
http://jsfiddle.net/qDZsb/
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.