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.
Related
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>
I want to react if a user hovers over a border (or into its near).
I got an table for ERD / UML diagrams and I want to give the user the opportunity to resize this table by dragging the tables border. I am working with jQuery and pure JS. My tables are rectangles and its positions are known (x1, x2, y1, y2, width , height , (x1 | y1 ) is top-left, (x2 | y2) is bottom-right ). Every table has the class "diagram" , so I thought about triggering the ."diagram".hover and check the mouse position, but this would be non performant.
I am mainly searching for idears, but short examples would be great.
Code update:
http://codepad.org/3xr8H39m
Wrap it in a wrapper and prevent event happening in its children. See below:
var border = document.getElementById("border");
border.onmouseover = function(e) {
if(e.target !== e.currentTarget) return;
console.log("border-hover")
}
#border {
padding: 4px;
background: blue;
box-sizing: border-box;
cursor: pointer;
}
.box{
height: 100px;
width: 100%;
background: white;
cursor: default;
}
<div id="border">
<div class="box"></div>
</div>
As I know, there is no special method to catch hovering over borders, so you will need some workaround. The first way is to create external container wrapped around the table, with some pixels padding, so you will have some border, and detect hovering over both external container and the inner table, like here:
<script type="text/javascript">
$(function() {
var innerHover = false;
$('.inner_table')
.on('mouseover', function() {
innerHover = true;
})
.on('mouseout', function() {
innerHover = false;
});
// check if we can start resizing
$('.external_wrapper').on('click', function() {
if (!innerHover) {
// we can start resizing!
}
});
});
</script>
<div class="external_wrapper" style="padding: 3px;">
<table class="inner_table">
...
</table>
</div>
The other way is to create thin additional divs along all four table borders and use them as click anchors. This way is user in jQueryUI dialog widget. It is much more flexible as you will not be glued to container borders.
I have a feeling this won't be possible, but thought I'd ask anyway.
<body> //body uses 'back' background
<div id="div1"> //div1 uses 'front' background
<div id="child1"> //child1: no backgrounds, so shows 'front' background
</div>
</div>
</body>
My body element uses a background image. (I'll call it the back background image)
div1 uses a different background image (I'll call it the front background image), so the front background image covers over the main background image.
div1 contains a child div child1 that doesn't use any background images, so it just shows the background image of its parent i.e. it shows the front background.
I would like child1 to use the background of body and not the background of its parent div1. Because of the nature of the back background (it's a drawing, not a repeating pattern), I can't just apply the back background image to child1. I actually need a way to make a hole in div1's background so that child1 gets the back background image as its background, and not its parent's background.
So my question is: is there a way a div can inherit its grandparent's background, as opposed to its parent's background?
If this isn't possible with CSS, I'm open to javascript solutions.
This would be with using javascript and jQuery:
CSS
body {
background: url("Background 1");
}
#div1 {
background: url("Background 2");
}
#child1 {
background: url("Background 1");
}
JS
$(function() {
function positionBackground() {
var myChild1 = $("#child1");
myChild1.css({
backgroundPosition : "-" + myChild1.offset().left + "px -" + myChild1.offset().top + "px"
});
}
positionBackground();
$(window).resize(positionBackground);
});
Here is the fiddle: http://jsfiddle.net/gMK9G/
I don't think you'll be able to change the way that styles are inherited, that said, you shouldn't really need to.
This is a little rough, but you could use the same image on the child div as you're using on the body and just play with the background positioning to line it up.
Working Example
body {
background: url("Background 1");
}
#div1 {
background: url("Background 2");
}
#child1 {
background: url("Background 1");
background-position: 0px -125px; /* adjust as needed */
}
UPDATE 2 Elements in the DOM Cannot share the same background image, you can maybe apply the background image and position them exactly so that it looks like they are, but in reality it is not possible.
As far as I am aware this is not currently possible because css only has inherit and inherit "inherits" from it's parents and there is no way to customize that. Of course javascript can do this easily and I will provide a jQuery example only because you have the jquery tag.
$('.inherit-grandparent').each(function( element ) {
var $this = $(this),
property = $this.attr('grandparent-property'),
value = $this.parent().parent().css(property);
if(property && value) $this.css(property, value);
});
Usage
<div class="inherit-grandparent" grandparent-property="background"></div>
Demo: http://jsfiddle.net/aKHfr/
So not only will this solve your problem, but it's dynamic so you can use it on any element and request any property.
Update:
Here is a jQuery Plugin version, if you would prefer that.
jQuery.fn.inheritGrandparent = function( property ) {
var $this = $(this),
value = $this.parent().parent().css(property);
if(property && value) $this.css(property, value);
};
Usage:
$('#test').inheritGrandparent('background');
Demo: http://jsfiddle.net/aKHfr/2/
Happy Coding!
My HTML:
<div class="p1">
<div class="p2">
<div class="p3">
GandSOn
</div>
</div>
</div>
My css:
.p1 {
disapley: flex;
}
.p2{
display:inherit;
}
.p3 {
display:inherit;
}
I want to be able to move an object from one position to another using buttons for example 3 buttons left right and center that always put the object at the exact same positions everytime.
I have tried using style.position="absolute" but it moves left or right or whatever position depending on it last position never the same three positions.
Which one of static, absolute, fixed, relative, inherit would be best to use in this case? and is it possible to get an example of how a particular object would be set to a particular position thanks in advance
position: absolute tells the browser HOW to position your element, but not WHERE to position your element. You still need to position your element by setting left or right and top or bottom values in your css.
Given some markup:
<button id="left">LEFT</button>
<button id="right">RIGHT</button>
<button id="center">CENTER</button>
<div id="wrapper">
<div id="thingy"/>
</div>
and some styles:
#wrapper {
position: relative;
margin-top: 10px;
}
#thingy {
margin: 0 auto;
width: 25px;
height: 25px;
background-color: #f69;
}
You can move the thingy this way:
var thingy = document.getElementById('thingy');
document.getElementById('left').onclick = function() {
thingy.style.position = 'absolute';
thingy.style.right = null;
thingy.style.left = 0;
};
document.getElementById('right').onclick = function() {
thingy.style.position = 'absolute';
thingy.style.left = null;
thingy.style.right = 0;
};
document.getElementById('center').onclick = function() {
thingy.style.position = 'inherit';
thingy.style.left = null;
thingy.style.right = null;
};
Code is posted at: http://jsfiddle.net/TXWfh/1/
You could make it work with absolute, but I think relative might work best in your case.
HTML
<div id="test"></div>
<input type="button" id="left" value="Left">
<input type="button" id="middle" value="Middle">
<input type="button" id="right" value="Right">
CSS
#test {
position: relative;
width: 100px;
height: 100px;
background-color: red;
}
input {
padding: 4px;
}
JavaScript
var test = document.getElementById("test");
document.getElementById("left").onclick = function() {
test.style.left = "0px";
};
document.getElementById("middle").onclick = function() {
test.style.left = "250px";
};
document.getElementById("right").onclick = function() {
test.style.left = "500px";
};
Live example
Don't know what you are trying to do, but it really doesn't matter if you don't have a lot of surrounding html code that can get affected by your choice of position value.
following 3 fiddles do same things but with subtle difference that they have different value for position attribute.
http://jsfiddle.net/9uQT8/3/
http://jsfiddle.net/9uQT8/4/
http://jsfiddle.net/9uQT8/5/
try clicking left center right. and see. I used jQuery though, super cool JS framework.
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