Can I put an HTML button inside the canvas? - javascript

I want to make the buttons for the game I'm making as real HTML buttons, but they need to be inside the canvas.
How would I go about doing this?

Given that the canvas element has a transparent content model, it may contain fallback elements which are displayed in the event that the canvas element is unsupported. They will not be displayed if the canvas is supported.
You can position HTML elements relative to the canvas' parent to have the buttons "hovering" over the canvas. A menu element could be an appropriately semantic element to render a list of controls, depending on the context:
HTML:
<div id="container">
<canvas id="viewport">
</canvas>
<menu id="controls">
</menu>
</div>
CSS:
#container
{
height: 400px;
position: relative;
width: 400px;
}
#viewport
{
height: 100%;
width: 100%;
}
#controls
{
bottom: 0;
left: 0;
position: absolute;
width: 100%;
}

You can put the button on top of the canvas by giving the canvas a z-index which is lower than the z-index of the button:
<canvas style="z-index:1"></canvas>
<input type="button" style="z-index:2; position:absolute; top:x; left:y" value="test"/>
where x and y are numbers.

I don't believe you can 'put' HTML content inside a canvas tag. Whatever you put in there will actually be displayed if the browser doesn't support <canvas>.
You can, however, position your buttons absolutely over top of a canvas or render areas in your canvas that 'look' like buttons and handle the events yourself (a lot of work).

HTML inside canvas is not possible, but maybe you could position your elements absolutely so that they are "floating" over the canvas, but not inside it.

One way to add button dynamically on the top of the canvas is following the next two points:
1. Making zIndex of the button higher than canvas
2. Position the button using absolute positioning with desired top and left value
Jsfiddle: https://jsfiddle.net/n2EYw/398/
HTML:
<canvas id="canvas" width="200" height="200">
</canvas>
CSS:
canvas {
border: 1px dotted black;
background: navy;
}
JavaScript:
var $testButton = $('<input/>').attr({
type: 'button',
name: 'btn1',
value: 'TestButton',
id: 'testButton',
style: 'position:absolute; top:50px;left:100px; zindex:2'
});
$('body').append($testButton);
$(document).on("click", "#testButton", function() {
alert('button clicked');
});

You can use my DropdownMenu for put an HTML button or menu inside the canvas.
Example of code:
<div class="container" id="containerDSE">
<canvas id="canvas"></canvas>
</div>
<script>
var elContainer = document.getElementById( "containerDSE" ),
elCanvas = elContainer.querySelector( 'canvas' );
dropdownMenu.create( [
{
name: 'Button',
onclick: function ( event ) {
var message = 'Button onclick';
//console.log( message );
alert( message )
},
},
], {
elParent: elContainer,
canvas: elCanvas,
decorations: 'Transparent',
} );
</script>
Example of using.

HTML inside of canvas is not possible.
But if you really want to use buttons, why don't you try positioning the buttons on top of the canvas?

You can put a button inside the canvas (png, jpg, svg and text), using the Canvate library.
http://www.sakuracode.com/canvate
Here you are a sample of a draging button inside the canvas.
container.startDrag();
https://codepen.io/EiseiKashi/pen/BxNbmj

Related

Changing the background colour of another element on click

I would like to add accessibility options to a website to give the user the chance to change the background of the following element (not the whole document background):
.ast-separate-container .ast-article-single {
background-color: #fffff0;
}
For example, I would like to display coloured boxes or text for:
Pink White Blue Yellow
and when the links are clicked the background colour changes.
Thanks in advance for any advice.
In this situation you should use JS and add event listener to this component:
element.addEventListener('click', function() {
element.classList.add(/* class with corresponding styles */)
});
Have a look at this code snippet, which uses javscript to achieve that:
var background = document.getElementById('background');
function setBackgroundTo(color) {
background.style.backgroundColor = color;
}
#background {
height: 100px;
width: 100px;
background-color: red;
}
The div below simulates your background. Click a button to change its color.
<div id="background"></div>
<button onclick="setBackgroundTo('red')">Red</button>
<button onclick="setBackgroundTo('blue')">Blue</button>
<button onclick="setBackgroundTo('green')">Green</button>
<button onclick="setBackgroundTo('#000')">Black</button>

Jquery have a parent div have the same width and height of it's child element

I'm having this problem to solve for weeks now and really need help.
I have this system where a user selects a template with 2 types of areas. One for inserting images and one for inserting text.
Each template may come with numerous areas to insert images and each image area is just a div with it's own dimensions [width px - height px] within a limited area of 800px - 650px.
I will call this div to receive images div.img
Inside that div.img theres an input type="file" and throw jquery.form.js plugin I'm able to insert a new image into it.
I will call the inserted image new.img
This new.img comes wrapped in a div div.newImg because I had to have a button to delete the image on top of the image itself.
I'm using jquery ui draggable and resizable so the div.newImg may be resized and dragged inside of div.img.
Here are the different elements: div.img -> div.newImg -> new.img + button delete
HTML
<div class="child" style="z-index: 70; position: absolute; top: 0px; left: 0px; width: 800px; height: 172px; cursor: default; background-color: rgba(254, 202, 64, 0.701961);" alt="reset">
<div class="imgh ui-resizable ui-draggable" alt="reset3" style="height: 100%; width: 204px;">
<img src="###" style="width:inherit; height:inherit; min-width:50px; min-height:50px;" class="img_set">
<div class="close"><i class="icon-remove-sign"></i></div>
</div>
</div>
JQUERY
$('.imgh').resizable({ containment: $(this).closest('.child') });
$('.imgh').draggable({ containment: $(this).closest('.child'), scroll: true, snap: true, snapTolerance: 5 });
This is what I've manage to approach so far but doesn't help me at all
if($('.child').width() > $('.child').height()){
$('.imgh').height('100%');
$('.imgh').width($('.imgh img').width());
}else{
$('.imgh').width('100%');
$('.imgh').height($('.imgh img').height());
}
I've managed to have the img.img_set have the same dimensions as it's parent by having style="width:inherit; height:inherit;".
What I need is a way for the div.imgh to have the same dimensions as it's inner img.img_set. Like a reversed inherit.
UPDATE
This code does what I want but my problem is that everytime I resize it comes back to what I've defined in the initialization:
if($('.child').width() > $('.child').height()){
$('.imgh').height('100%');
$('.imgh').width('auto');
}else{
$('.imgh').width('100%');
$('.imgh').height('auto');
}
if($('.imgh').width() > $('.imgh img').width()){
$('.imgh').width($('.imgh img').width());
}
Is there a way for this to only happen once to each div.imgh?
You could use .bind() to resize it it every time something changes...
$('.imgh').bind('resize', FullWidthHeight); //Note: check the 'resize' event is relevant to imgh
function FullWidthHeight() {
$('.imgh').css('height', img.img_set.height());
$('.imgh').css('width', img.img_set.width());
}

jQuery UI : Resizable Coustom Duoble-Click Event

copied following code from http://jqueryui.com/demos/resizable/#default
<meta charset="utf-8">
<style>#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable();
});
</script>
<div class="demo">
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>
</div>
It outputs this.
I want to capture the double click event for each of cursor position so that if
Double click by horizontal re-size cursor, i can toggle width of current resizable between original and maximun available width.
Double click by vertical re-size cursor, i can toggle height of current resizable between original and maximun available height.
Double click by diagonal re-size cursor, i can toggle width and height of current resizable between original and maximun available width and height.
The handlers have specific classNames:
ui-resizable-se//bottom right
ui-resizable-s//bottom
ui-resizable-e//right
You can select them and bind the dblclick:
$('.ui-resizable-se').dblclick(function(){alert('clicked bottom right handle');})
A pointer to the resizable you'll get inside the function using $(this).parent()
Use firebug to find out the elements you ant to attach the event (like: .ui-resizable-e - self explanatory) and use for example:$(".ui-resizable-e").dblclick(myFunctionToResize);
Is that what you mean?

Enlarge textarea onClick

Can anyone please let me how to Enlarge textarea while using OnClick function or how to increase the rows on onClick?
regards
balkar
If you can set pixel or column sizes (instead of using the rows and cols attributes), you can use the :focus CSS pseudo-class:
HTML:
<textarea id="myarea"></textarea>
CSS:
textarea#myarea { width: 100px; height: 20px; }
textarea#myarea:focus { width: 500px; height: 200px; }
depending on the layout, it's sometimes attractive to give the focused textarea position: absolute so it floats above the other elements in its enlarged state.
If you wanna use onClick, add an onClick Handler via JavaScript:
<html>
<body onLoad="load();">
<textarea id="t1">foo</textarea>
<script>
function load(){
document.getElementById("t1").addEventListener("click",function(){
this.setAttribute("rows","50");
},false);
}
</script>
</body>
</html>

Circle image overlays

I have a image in the shape of a Circle.
The circle is broken into 3 equal parts.
I have an image with the entire circle.
I have 3 other images, each only a piece of the circle but in the color green.
I have to do the following:
Display the original circle image.
Have a 3 buttons on the screen, each button is linked to the 3 parts of the circle.
When clicked, it overlays the green image over the circle.
So if you clicked all 3 buttons, the entire circle would be green.
If you only clicked the 1st button, only that section of the circle would be green.
How can I implement this?
Is it possible to overlay 2 images at once? Do I have to play with x and y positioning here?
(the green image sections currently, if you place them over the original image, will lineup exactly with the original circle image.
Here's a solution shown in straight JavaScript and also jQuery.
The straight JavaScript uses the DOM0 onclick handlers of the buttons which is OK because they're only triggering one event. The onload handler for the window is more of a problem: you can only have one per document.
The jQuery solution is much shorter as you can see, but you'll have to include the jQuery library. The $( function(){} ) takes the place of the window onload handler but you can have as many as you like.
The images sector1.gif, sector2.gif and sector3.gif are transparent apart from the bits of the circle that are visible for them. You could use .png too but that wouldn't work in ie6 without some tweakery.
<!-- the markup -->
<div id="circle">
<div id="sector1"></div>
<div id="sector2"></div>
<div id="sector3"></div>
</div>
<input type="button" id="button1" value="Sector 1">
<input type="button" id="button2" value="Sector 2">
<input type="button" id="button3" value="Sector 3">
_
/* the style */
#circle{
width: 100px;
height 100px;
position: relative;
background: url( images/circle.gif );
}
#sector1, #sector1, #sector1 {
width: 100px;
height 100px;
top: 0;
left: 0;
position: absolute;
display: none;
}
#sector1 {
background: url( images/sector1.gif );
}
#sector2 {
background: url( images/sector2.gif );
}
#sector2 {
background: url( images/sector3.gif );
}
_
//basic javascript solution
window.onload = function() {
// get references to the buttons
var b1 = document.getElementById( 'button1' );
var b2 = document.getElementById( 'button2' );
var b3 = document.getElementById( 'button3' );
// get references to the sectors
var s1 = document.getElementById( 'button1' );
var s2 = document.getElementById( 'button2' );
var s3 = document.getElementById( 'button3' );
// add onclick events to the buttons which display the sectors
b1.onclick = function() { s1.style.display = 'block'; }
b2.onclick = function() { s2.style.display = 'block'; }
b3.onclick = function() { s3.style.display = 'block'; }
}
//jQuery solution
$(function() {
$('#button1').click( function() { $('#sector1').show() } );
$('#button2').click( function() { $('#sector2').show() } );
$('#button3').click( function() { $('#sector3').show() } );
});
The 3 images with partial circles should be transparent for the parts that are not green. Then all 4 images can be overlayed always, and the buttons can change the stacking order. The ones "displayed" will go on top of the solid circle and the others will go beneath it.
You could also use the full image as the background of a div and then 3 divs over that with the green, or overlay or whatever and then just toggle the visibility or class of the overlays.
I wouldnt say any better or worse than the above, but different.

Categories

Resources