In my Angular project, I am playing with CSS to move the image/video element inside a "stage" element.
What I have so far:
SCSS:
.stage {
width: 400px;
height: 300px;
position: relative;
overflow: hidden;
background-color: coral
}
video {
position: absolute;
width: 500px;
height: 400px;
}
HTML:
<div class="stage">
<video controls autoplay [ngStyle]="{'top': top, 'left': left">
<source src="http://www.archive.org/download/AnimatedMechanicalArtPiecesAtMit/P1120973_512kb.mp4" type="video/mp4">
</video>
</div>
<div class="row">
<div class="col-1 ">
<button type="button" class="btn btn-primary btn-tn " (click)="moveLeft()">
Left
</button>
</div>
<div class="col-1">
<button type="button" class="btn btn-primary btn-tn " (click)="moveRight()">
Right
</button>
</div>
<div class="col-1">
<button type="button" class="btn btn-primary btn-tn " (click)="moveUp()">
Up
</button>
</div>
<div class="col-1">
<button type="button" class="btn btn-primary btn-tn " (click)="moveDown()">
Down
</button>
</div>
</div>
CODE:
l: number = 0;
t: number = 0;
left = '0px';
top = '0px';
moveUp() {
this.t -= 5;
this.top = this.t + 'px';
}
moveDown() {
this.t += 5;
this.top = this.t + 'px';
}
moveLeft() {
this.l -= 5;
this.left = this.l + 'px';
}
moveRight() {
this.l += 5;
this.left = this.l + 'px';
}
Result: Image/video moved and left blank space.
My question: how to keep image/video remain within the stage when moving left, right, up, down
For example, The image (blue) will be held when the image reaches to the top and left edge of stage (yellow).
Hope my explanation is clear. Any suggestion is appreciated.
Related
I have an image displayed in my website. and I want to write a JavaScript code to change that image when clicking on a given button and I want to get another image displayed when clicking on another button so on and so forth. Let me show you how I have tried to solve this problem:
HTML:
<div class ="container image">
<figure>
<img src="alpaca/backgrounds/blue50.png" id="picture" class ="show1" />
</figure></div>
Javascript:
const image = document.getElementById("picture");
function showImg() {
image.src = "blue50.png";
//hide previously shown image
for ( i = 1; i < 18; i++) {
var obj = document.getElementById( "picture" + i );
if (obj != null)
obj.className = 'hide1';
}
var obj = document.getElementById( "picture" + id );
if (obj != null)
obj.className = 'show1';
}
CSS:
.container {
position: absolute;
bottom:60px;
left: -140px;
}
.image {
position:absolute;
}
.eye {
position:absolute;
z-index: 10;
}
.mouth {
position:absolute;
z-index: 8;
}
.nose {
position:absolute;
z-index: 8;
}
.show1{display:block;}
.hide1{display:none;}
.leftButton {
color: black;
text-align:right;
font-size:35px;
font-family: 'sofia';
border-radius: 30px;
background-color:rgb(252, 228, 228);
position:absolute;
bottom: -410px;
left:200px;
}
You see, what I need is for instance , when clicking on the button "blue60" of "Backgrounds" I should get another background image and this as to be the same for others buttons. Right now, when clicking on the button "blue60" I get nothing. Please , help me solve this problem.
<div id="Backgrounds" ><p class="para">Backgrounds</p>
<button type="button" onclick="showImg(1)" src="Alpaca/backgrounds/blue50" class="rightSubButton">Blue50</button>
<button type="button" onclick="showImg(2)" src="Alpaca/backgrounds/blue60" class ="rightSubButton">Blue60</button>
<button type="button" onclick="showImg(3)" src="Alpaca/backgrounds/blue70" class ="rightSubButton">Blue70</button>
<button type="button" onclick="showImg(4)" class ="rightSubButton">Darkblue30</button>
<button type="button" onclick="showImg(5)" class ="rightSubButton">Darkblue50</button>
<button type="button" onclick="showImg(6)" class ="rightSubButton">Darkblue70</button>
<button type="button" onclick="showImg(7)" class="rightSubButton">Green50</button>
<button type="button" onclick="showImg(8)" class ="rightSubButton">Green60</button>
<button type="button" onclick="showImg(9)" class ="rightSubButton">Green70</button>
<button type="button" onclick="showImg(10)" class ="rightSubButton">Grey40</button>
<button type="button" onclick="showImg(11)" class ="rightSubButton">Grey70</button>
<button type="button" onclick="showImg(12)" class ="rightSubButton">Grey80</button>
<button type="button" onclick="showImg(13)"class ="rightSubButton">Red50</button>
<button type="button" onclick="showImg(14)"class ="rightSubButton">Red60</button>
<button type="button" onclick="showImg(15)"class ="rightSubButton">Red70</button>
<button type="button" onclick="showImg(16)"class ="rightSubButton">Yellow50</button>
<button type="button" onclick="showImg(17)"class ="rightSubButton">Yellow60</button>
<button type="button" onclick="showImg(18)"class ="rightSubButton">Yellow70</button>
</div>
<div id="Ears" ><p class="para">Ears</p>
<button type="button" class="rightSubButton">Default</button>
<button type="button" class ="rightSubButton">Tilt-backward</button>
<button type="button" class ="rightSubButton">Tilt-forward</button>
</div>
You can change the src property of the desired HTMLImageElement in order to change its image:
const image = document.getElementById('...');
function showImg(number) {
image.src = '...'; // Path or URL to image
}
Im trying to figure out what im dooing wrong. I have a hmtl5 canvas inside a bootstrap modal. The canvas is a selecting game where you select objects inside the canvas and manipulate them.
Unfortunately it works allright in the center of the 600x600px Canvas but im getting a wierd offset when im trying to get the coordinates in the corner of the picture. The offset is getting bigger as you get closer to the corners
Here's my code.
Thank you very much in advance!
Javascript:
document.addEventListener('DOMContentLoaded', (ev) => {
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
canvas.width = 600;
canvas.height = 600;
let imgObj = new Image();
imgObj.onload = function() {
let w = canvas.width;
let nw = imgObj.naturalWidth; //1350
let nh = imgObj.naturalHeight; //900
console.log(nw);
console.log(nh);
let aspect = nw / nh;
let h = w / aspect;
console.log('height', h)
canvas.height = h;
soldTilesDisplay.textContent = totalTiles-soldTiles;
ctx.drawImage(imgObj, 0, 0, w, h);
rectangulize_with_IDs();
fillarraywithrandomTiles(soldTiles);
//greyscaleOriginal();
//ctx.drawImage(imgObj, dx, dy);
//ctx.drawImage(imgObj, dx, dy, dw, dh);
//ctx.drawImage(imgObj, sx, sy, sw, sh, dx, dy, dw, dh);
};
function getMousePosition(canvas, event) {
let rect = canvas.getBoundingClientRect();
let x = event.clientX - Math.floor(rect.left);
let y = event.clientY - Math.floor(rect.top);
storePixelArray(x, y); // originale "Store in Array funktion"
store_rect(x,y);
clickcounter = clickcounter + 1;
console.log("Exact Coordinates: X: " + x,
" Y: " + y, "CLick Counter: "+ clickcounter);
}
Html:
<div>
<!-- Bootstrap Modal here!-->
<div class="row">
<div class="col-lg-4">
<!-- Bootstrap Modal here!-->
<div class="modal fade" id="myModal1">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h3>WIN!</h3>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<canvas id="canvas" style="background-image: url('/images/Berge.png')"></canvas>
</div>
<div class="col-md-6 justify-content-center">
<div class="card text-center" style="width: 30rem;">
<div class="card-body">
<h5 class="card-title" id="Punktestand"> Card Title
Score:
</h5>
<p class="card-text" id="paragraphImModal">With supporting
text below as a natural
lead-in to additional content.</p>
<button type="button" class="btn btn-default" id="usePointsPixelButton">
Select Pixel first</button>
<br>
<h5 class="selectedPixelAmount" id="AmountOfPixels"> </h5>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-lg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
I found the problem after running into the same Issue.
It is because the class .modal-dialog and every subclass under it has a relative positioning. just set the positioning to unset and you get the correct coordinates.
in my case i had to change following classes:
.modal-dialog {
position: unset;
}
.modal-content {
position: unset;
}
.modal-body {
position: unset;
}
.alert {
position: unset;
}
If you want you can do css stuff like "just change the position of modal-body inside modal dialog" so you dont mess up anything else :)
I am trying to step away from jsTree as this is not as much as configurable as having my own custom code. I am making use of Bootstrap to have a somewhat similar functionality as jsTree. I am also stepping away from jQuery (for now), because of debugging reasons.
//Event delegation
function BindEvent(parent, eventType, ele, func) {
var element = document.querySelector(parent);
element.addEventListener(eventType, function(event) {
var possibleTargets = element.querySelectorAll(ele);
var target = event.target;
for (var i = 0, l = possibleTargets.length; i < l; i++) {
var el = target;
var p = possibleTargets[i];
while (el && el !== element) {
if (el === p) {
return func.call(p, event);
}
el = el.parentNode;
}
}
});
}
//Add content after referenced element
function insertAfter(referenceNode, newNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
//Custom function
function LoadSubOptions(ele) {
ele = ele.parentElement.parentElement;
let newEle = document.createElement("div");
newEle.classList.add("row", "flex");
//Generated HTML Content (currently hard coded):
newEle.innerHTML = "<div class='col-xs-1'><div class='tree-border'></div></div><div class='col-xs-11'><div class='row'><div class='col-xs-12'><button class='btn btn-default btn-block btn-lg'>Test</button></div></div></div>";
insertAfter(ele, newEle);
}
//Bind method(s) on button click(s)
BindEvent("#tree-replacement", "click", "button", function(e) {
LoadSubOptions(this);
});
#tree-replacement button {
margin-top: 5px;
}
.tree-border {
border-left: 1px dashed #000;
height: 100%;
margin-left: 15px;
}
.flex {
display: flex;
}
/*Probably not wise to use this method on Bootstrap's grid system: */
#tree-replacement .row.flex>[class*='col-'] {
display: flex;
flex-direction: column;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div id="tree-replacement">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default btn-block btn-lg">
Option 1
</button>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default btn-block btn-lg">
Option 2
</button>
</div>
</div>
<!--The generated html as example: -->
<!--<div class="row">
<div class="col-xs-1">
<div class="tree-border">
</div>
</div>
<div class="col-xs-11">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default btn-block btn-lg">
Option 2
</button>
</div>
</div>
</div>
</div>-->
</div>
</div>
JSFiddle
I added a border in a .column-*-1 to allow for some spacing for the border:
The spacing however, I find a bit too much. How could I address this problem? I would like to refrain from styling Bootstrap's grid system (meaning I preferably would not want to touch any styling behind .col-* and .row classes etc.) because this might break the responsiveness or anything else related to Bootstrap.
Edit:
I also noticed that when adding a lot of buttons by just clicking them, the layout of tree will start failing as well. (I am aware this is a different question, so if I need to post another question regarding this problem, please do let me know) Is there a way I could address this so that the element works correctly?
Add this little CSS
#tree-replacement .row.flex > .col-xs-11:nth-child(2):before {
content: ' ';
position: absolute;
left: calc(-100% / 11 + 30px);
top: 2em;
border-top: 1px dashed #000000;
width: calc(100% / 5 - 15px);
}
//Event delegation
function BindEvent(parent, eventType, ele, func) {
var element = document.querySelector(parent);
element.addEventListener(eventType, function(event) {
var possibleTargets = element.querySelectorAll(ele);
var target = event.target;
for (var i = 0, l = possibleTargets.length; i < l; i++) {
var el = target;
var p = possibleTargets[i];
while (el && el !== element) {
if (el === p) {
return func.call(p, event);
}
el = el.parentNode;
}
}
});
}
//Add content after referenced element
function insertAfter(referenceNode, newNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
//Custom function
function LoadSubOptions(ele) {
ele = ele.parentElement.parentElement;
let newEle = document.createElement("div");
newEle.classList.add("row", "flex");
//Generated HTML Content (currently hard coded):
newEle.innerHTML = "<div class='col-xs-1'><div class='tree-border'></div></div><div class='col-xs-11'><div class='row'><div class='col-xs-12'><button class='btn btn-default btn-block btn-lg'>Test</button></div></div></div>";
insertAfter(ele, newEle);
}
//Bind method(s) on button click(s)
BindEvent("#tree-replacement", "click", "button", function(e) {
LoadSubOptions(this);
});
#tree-replacement button {
margin-top: 5px;
}
.tree-border {
border-left: 1px dashed #000;
height: 100%;
margin-left: 15px;
}
.flex {
display: flex;
}
/*Probably not wise to use this method on Bootstrap's grid system: */
#tree-replacement .row.flex>[class*='col-'] {
display: flex;
flex-direction: column;
}
#tree-replacement .row.flex > .col-xs-11:nth-child(2):before {
content: ' ';
position: absolute;
left: calc(-100% / 11 + 30px);
top: 2em;
border-top: 1px dashed #000000;
width: calc(100% / 5 - 15px);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div id="tree-replacement">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default btn-block btn-lg">
Option 1
</button>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default btn-block btn-lg">
Option 2
</button>
</div>
</div>
<!--The generated html as example: -->
<!--<div class="row">
<div class="col-xs-1">
<div class="tree-border">
</div>
</div>
<div class="col-xs-11">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default btn-block btn-lg">
Option 2
</button>
</div>
</div>
</div>
</div>-->
</div>
</div>
Here I have used absolute positioning and increased height by 5px which kind of makes it touches the next div element.
Here is the Fiddle Link
and the Code Snippet:
//Event delegation
function BindEvent(parent, eventType, ele, func) {
var element = document.querySelector(parent);
element.addEventListener(eventType, function(event) {
var possibleTargets = element.querySelectorAll(ele);
var target = event.target;
for (var i = 0, l = possibleTargets.length; i < l; i++) {
var el = target;
var p = possibleTargets[i];
while (el && el !== element) {
if (el === p) {
return func.call(p, event);
}
el = el.parentNode;
}
}
});
}
//Add content after referenced element
function insertAfter(referenceNode, newNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
//Custom function
function LoadSubOptions(ele) {
ele = ele.parentElement.parentElement;
let newEle = document.createElement("div");
newEle.classList.add("row", "flex");
//Generated HTML Content (currently hard coded):
newEle.innerHTML = "<div class='col-xs-1'><div class='tree-border'></div></div><div class='col-xs-11'><div class='row'><div class='col-xs-12'><button class='btn btn-default btn-block btn-lg'>Test</button></div></div></div>";
insertAfter(ele, newEle);
}
//Bind method(s) on button click(s)
BindEvent("#tree-replacement", "click", "button", function(e) {
LoadSubOptions(this);
});
#tree-replacement button {
margin-top: 5px;
}
.tree-border {
border-left: 1px dashed #000;
height: calc(100% + 5px);
margin-left: 20px;
position: absolute;
}
.flex {
position: relative;
display: flex;
}
.col-xs-11 .col-xs-12 {
padding-left: 0;
}
/*Probably not wise to use this method on Bootstrap's grid system: */
#tree-replacement .row.flex>[class*='col-'] {
display: flex;
flex-direction: column;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div id="tree-replacement">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default btn-block btn-lg">
Option 1
</button>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default btn-block btn-lg">
Option 2
</button>
</div>
</div>
<!--<div class="row">
<div class="col-xs-1">
<div class="tree-border">
</div>
</div>
<div class="col-xs-11">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default btn-block btn-lg">
Option 2
</button>
</div>
</div>
</div>
</div>-->
</div>
</div>
Trying to get this progress bar on Bootstrap to show real-time progress from a JSON API, while also showing the % of goal achieved:
Here is how it looks right now: http://puu.sh/jt2Gu/823f6a6a0f.png
Both progress bars should be centered on the page and the progress itself isnt updating and I'm not sure why, please help?
progress bar for coins sold
progress bar for amount raised
% funded (should be on top of picture)
CSS:
}
.progress {
position: absolute;
top: 80%;
z-index: 2;
text-align: center;
width: 50%;
}
HTML:
<div class="container">
<div class="banner-buynow">
<div class="col-md-2 col-md-offset-3 object-non-visible"
data-animation-effect="fadeIn">
<a class="btn btn-info" href="javascript:void(0);" onclick=
"opentac();">Buy Now<br>
<div class="ratebtc"></div></a>
</div>
<div class="progress">
<div class="progress-bar active progress-bar-striped active">
<div class="percentage-label"></div>
</div>
</div>
</div>
<div class="progress">
<div class=
"progress-bar progress-bar-success progress-bar-striped active"
style="width:1%">
<div class="goal-label"></div>
</div>
</div>
</div>
<div class="funded-label"></div>
JS
$.getJSON("https://www2.shapeshift.io/crowdsales", function (json) {
var soldT = Math.round(json.sold);
var left = json.remaining;
var total = Math.round(soldT+left);
var ratebtc = json.rateT;
var percent = Math.round(soldT/total*100);
var backers = json.orders;
var raisedtotal = Math.round(json.raised) + ' BTC';
var goal = Math.round(raisedtotal/730);
var percentsold = Math.round(percent) + '%';
var backers = json.orders + ' backers';
var funded = Math.round(json.raised/730*100);
$('.progress-bar').css('width', percentsold);
$('.percentage-label').html(soldT + " coins sold ");
$('.ratebtc').html(ratebtc );
$('.backers').html(raisedtotal + " from " + backers );
$('.progress-bar-success').css('width', goal);
$('.goal-label').html(raisedtotal + " towards goal of 730 BTC");
$('.funded-label').html(funded + " % funded");
});
JSFiddle: https://jsfiddle.net/qy1ko5xf/
you can add the div with the class funded-label inside the container if you want it to be at the bottom of the container. give it an absolute position.
here's the updated HTML
<div class="container">
<div class="banner-buynow">
<div class="col-md-2 col-md-offset-3 object-non-visible"
data-animation-effect="fadeIn">
<a class="btn btn-info" href="javascript:void(0);" onclick=
"opentac();">Buy Now<br>
<div class="ratebtc"></div></a>
</div>
<br/>
<div class="progress">
<div class="progress-bar active progress-bar-striped active">
<div class="percentage-label"></div>
</div>
</div>
</div>
<div class="progress">
<div class=
"progress-bar progress-bar-success progress-bar-striped active"
style="width:1%">
<div class="goal-label"></div>
</div>
</div>
<div class="funded-label"></div>
</div>
the CSS for the funded-label div should look like this
.funded-label{
color: white;
font-weight: bold;
position: absolute;
bottom: 0px;
background-color: #003a74;
width: 100%;
text-align: left;
padding: 5px;
}
and finally here' the updated JS
$(function(){
$.getJSON("https://www2.shapeshift.io/crowdsales", function (json) {
console.log(json);
var soldT = Math.round(json.sold);
var left = json.remaining;
var total = Math.round(soldT+left);
var ratebtc = json.rateT;
var percent = Math.round(soldT/total*100);
var backers = json.orders;
var raised = Math.round(json.raised);
var raisedtotal = raised + ' BTC';
var goal = Math.round((raised/730) * 100);
console.log(goal);
var percentsold = Math.round(percent) + '%';
var backers = json.orders + ' backers';
var funded = Math.round(raised/730*100);
$('.progress-bar').css('width', percentsold);
console.log(soldT);
console.log(total);
$('.percentage-label').html(soldT + " coins sold ");
$('.ratebtc').html(ratebtc );
$('.backers').html(raisedtotal + " from " + backers );
$('.progress-bar-success').css('width', goal + '%');
$('.goal-label').html(raisedtotal + " towards goal of 730 BTC");
$('.funded-label').html(funded + " % funded");
});
});
here's a working JSFIDDLE. hope this helps.
I have an image zoom property in one of my website.I want to zoom an image with respect to the centre of the div.
<div class="img"><img src="http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/men-wedding-rings.jpg" /></div>
<input class="beta" type="button" onclick="zoom(1.1)" value="+">
<input class="beta" type="button" onclick="zoom(0.9)" value="-">
And the zoom funcction is as follows.
function zoom(zm)
{
img=document.getElementById("pic")
wid=img.width
ht=img.height
img.style.width=(wid*zm)+"px"
img.style.height=(ht*zm)+"px"
}
I want to zoom the image with respect to the centre.
Thanks in advance.
How about this http://jsfiddle.net/sajith/J6Y3X/
JS
function zoom(zm) {
img = document.getElementById("pic")
wid = img.width
ht = img.height
img.style.width = (wid * zm) + "px"
img.style.height = (ht * zm) + "px"
img.style.marginLeft = "-" + (wid * zm)/2 + "px"
img.style.marginTop = "-" + (ht * zm)/2 + "px"
}
CSS
.img {
width:450px;
height:450px;
}
#pic {
position: absolute;
left: 225px;
top: 225px;
margin: -225px 0 0 -225px;
}
HTML
<div class="img"><img id="pic" src="http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/men-wedding-rings.jpg" /></div>
<input class="beta" type="button" onclick="zoom(1.1)" value="+">
<input class="beta" type="button" onclick="zoom(0.9)" value="-">