<style>
* {padding: 0; margin: 0;}
#game {width: 300px; height: 400px; border: 2px solid #222; background-color: #ccc; margin: 50px; position: relative; overflow: hidden;}
#character {width: 20px; height: 20px; background-color: #ffc554; border: 2px solid #222; position: absolute; bottom: 0; left: 0;}
.block {width: 10px; height: 10px; background-color: #ff5252; border-radius: 50%; border: 2px solid #222; position: absolute; top: -50px; left: -20px;}
.falling {animation: fall 2s infinite linear;}
#keyframes fall {
0% {top: -50px}
100% {top: 450px;}
}
</style>
<body>
<div id="game">
<div id="character"></div>
</div>
</body>
SCRIPT
var block = [];
function createEnemy(nth) {
var divAddText = '<div class="block ' + nth + '"></div>'
document.getElementById('game').innerHTML += divAddText;
block[nth] = document.getElementsByClassName(nth)[0];
block[nth].classList.add("falling");
setInterval(function() {
block[nth].style.left = Math.floor(Math.random() * 290) + "px";
}, 2000);
}
As you can see in the SCRIPT part, I tried to write a block creating and falling code.
It worked well when I executed createEnemy(1) in chrome console.
The first block created went smoothly falling from random left points as I expected.
But as soon as I added createEnemy(2), the first block started to fall from the same left point while the second block was just fine falling from random left points.
Could any of you guys give me some insight into this issue?
Don't use innerHTML when displaying your enemies, instead use createElement and appendChild.
const enemies = [];
const game = document.getElementById("game");
function createEnemy(name) {
const enemy = document.createElement("div");
enemy.classList.add("block", "falling", name);
enemies.push(enemy);
game.appendChild(enemy);
setInterval(function() {
enemy.style.left = Math.floor(Math.random() * 290) + "px";
}, 2000);
}
createEnemy(1);
createEnemy(2);
* {
padding: 0;
margin: 0;
}
#game {
width: 300px;
height: 400px;
border: 2px solid #222;
background-color: #ccc;
margin: 50px;
position: relative;
overflow: hidden;
}
#character {
width: 20px;
height: 20px;
background-color: #ffc554;
border: 2px solid #222;
position: absolute;
bottom: 0;
left: 0;
}
.block {
width: 10px;
height: 10px;
background-color: #ff5252;
border-radius: 50%;
border: 2px solid #222;
position: absolute;
top: -50px;
left: -20px;
}
.falling {
animation: fall 2s infinite linear;
}
#keyframes fall {
0% {
top: -50px;
}
100% {
top: 450px;
}
}
<div id="game">
<div id="character"></div>
</div>
PS: I'm not sure why your code is not working as expected, I believe it has something to do with innerHTML. Hopefully someone could explain.
Related
While transform rotate in javascript whenever I add anything to 360 drgree, it again starts counting from 0 degree and my rotated div reverts backwards to 0 deg if I use transition. I want my rotation to continue in same direction. Please help
i tried my issue separately... and it is working...
<style>
.container-div {
width: 300px;
height: 300px;
border-radius: 50%;
border: 2px solid #000;
position: relative;
}
.center-div {
position: absolute;
margin: auto;
top:0;
bottom: 0;
width: 100%;
height: 50px;
border: 1px solid #f00;
transform: rotate(0deg);
transition: all 0.3s linear;
}
.rotate-click {
display: inline-block;
width: 100px;
height: 30px;
line-height: 30px;
background-color: #000;
color: #fff;
text-align: center;
cursor: pointer;
}
</style>
<div class="container-div">
<div class="center-div"></div>
</div>
<div class="rotate-click">rotate</div>
<script>
let angle = 0;
document.querySelector(".rotate-click").addEventListener("click", ()=>{
angle += 45;
document.querySelector(".center-div").style.transform = `rotate(${angle}deg)`;
console.log(angle);
});
</script>
thanks to #ControlAltDel and #Barmar
I am trying to create a linear animation with pipes just like the flappy bird game. When I have one single pipe, I see a random gap and it works well, but when I clone all the pipes, there is no longer a gap at a random position.
How can I give the gaps in the pipe a random position when I have multiple pipes, and why is it not working as expected?
var block = document.getElementById("block");
//clone the pipe multiples times
var blockClone;
for (var i = 0; i < 4; i++) {
blockClone = block.cloneNode(true);
// the true is for deep cloning
//append all clones to original pipe
block.appendChild(blockClone);
//remove animtion from clones
blockClone.style.animationName = "none";
}
//gap inbetween each pipe
var hole = document.getElementById("hole");
var holeClone;
for (var i = 0; i < 4; i++) {
holeClone = hole.cloneNode(true);
// the true is for deep cloning
//append all clones to original pipe
blockClone.appendChild(hole);
block.appendChild(hole);
//remove animtion from clones
holeClone.style.animationName = "none";
hole.addEventListener('animationiteration', () => {
var random = -((Math.random() * 300) + 150);
hole.style.top = random + "px";
});
}
body {
text-align: center;
position: fixed;
width: 100%;
height: 100%;
}
* {
padding: 0;
margin: 0;
}
#game {
width: 100%;
height: 500px;
border: 1px solid red;
margin: auto;
overflow: hidden;
}
/* pipe version 1 */
#block {
width: 60px;
height: 500px;
background-color: green;
background-image: url("https://l.dropbox.com/s/4jz7uq4e25o8su5/sketch-1664244879.png?dl=0");
background-size: cover;
position: absolute;
left: 100px;
animation: block 5s infinite linear;
}
#hole {
width: 60px;
height: 210px;
background-color: red;
position: absolute;
left: 0px;
top: -10px;
/* animation: block 5s infinite
linear;*/
background-image: url("https://dldropbox.com/s/j7enawgtuepj7au/sketch-166428805830.png?dl=0");
background-size: cover;
}
#character {
width: 40px;
height: 40px;
background-color: none;
position: absolute;
top: 100px;
left: 40px;
border-radius: ;
z-index: 1;
background-color: red;
}
}
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: black;
cursor: none;
opacity: 0.3;
text-align: center;
}
/* used to prevent user from tapping even after the game has ended*/
.mainoverlay {
position: fixed;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: none;
opacity: 0;
}
#blokhold {
animation: block 5s infinite linear;
}
#keyframes block {
0% {
left: 350px
}
100% {
left: -890px
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="game">
<div id="blokhold">
<div id="block">
<div id="hole"></div>
</div>
</div>
<div id="character"></div>
</div>
I need get hover effect in a div from the cursor position.
I have this html and css
.f {
width: 200px;
height: 200px;
background-color: grey;
position: fixed;
border-radius: 100px;
}
.s {
width: 50px;
height: 50px;
background-color: black;
border-radius: 100px;
margin: 75px 0px 0px 75px;
transition: width 1s, height 1s, margin 1s;
}
.s:hover {
width: 100px;
height: 100px;
background-color: black;
margin: 50px 0px 0px 50px;
}
<div class="f">
<div class="s"></div>
</div>
And I need something like this:
I'm open to js or jquery solutions.
EDIT
I have a jquery solution:
$("div.f").mousemove(function(e) {
$('div.s').css({
left: e.clientX - 28,
top: e.clientY - 24
});
});
.f {
width: 200px;
height: 200px;
background-color: grey;
position: fixed;
border-radius: 100px;
/* comment or remove the overflow if necessary */
overflow: hidden;
}
.s {
position: absolute;
width: 50px;
height: 50px;
background-color: black;
border-radius: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="f">
<div class="s"></div>
</div>
But i need the circle make the over animation like first snippet.
Original question here
To change position of inner circle you can use pageX and pageY on mousemove. To change size of inner circle you can create one class that will scale div and toggle that class on hover over .f.
var s = $('.s')
var f = $('.f')
var oTop = f.offset().top + (s.height() / 2);
var oLeft = f.offset().left + (s.width() / 2);
f.hover(function() {
s.toggleClass('change')
})
f.mousemove(function(e) {
var x = e.pageY - oTop
var y = e.pageX - oLeft
s.css({
top: x + 'px',
left: y + 'px'
})
})
.f {
width: 200px;
height: 200px;
background-color: grey;
position: fixed;
overflow: hidden;
border-radius: 100px;
}
.s {
width: 50px;
height: 50px;
background-color: black;
border-radius: 100px;
position: absolute;
pointer-events: none;
opacity: 0;
transition: transform 0.5s linear, opacity 0.3s linear;
}
.change {
transform: scale(2);
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="f">
<div class="s"></div>
</div>
Here is a jQuery solution.
$("div.f").mousemove(function(e) {
$('div.s').css({
left: e.clientX - 28,
top: e.clientY - 24
});
});
.f {
width: 200px;
height: 200px;
background-color: grey;
position: fixed;
border-radius: 100px;
/* comment or remove the overflow if necessary */
overflow: hidden;
}
.s {
position: absolute;
width: 50px;
height: 50px;
background-color: black;
border-radius: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="f">
<div class="s"></div>
</div>
$('.f').on('mousemove', function(e){
var par = $(this);
if((e.pageX <= par.width() && e.pageX >= 0) && e.pageY <= par.height() && e.pageY >= 0){
$('.s').css({
position: 'relative',
left: e.pageX - (par.width() / 2),
top: e.pageY - (par.height() / 2)
});
} else {
$('.s').css({
position: 'initial'
});
}
});
.f {
width: 200px;
height: 200px;
background-color: grey;
position: fixed;
border-radius: 100px;
}
.s {
width: 50px;
height: 50px;
background-color: black;
border-radius: 100px;
margin: 75px 0px 0px 75px;
transition: width 1s, height 1s, margin 1s;
}
.s:hover {
width: 100px;
height: 100px;
background-color: black;
margin: 50px 0px 0px 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="f">
<div class="s"></div>
</div>
function moveInner(e)
{
var inner = document.getElementById('inner');
inner.style.top = (e.clientY-100)+"px";
inner.style.left= (e.clientX-100)+"px";
}
.f {
width: 200px;
height: 200px;
background-color: grey;
position: fixed;
border-radius: 100px;
}
.s {
width: 100px;
height: 100px;
background-color: black;
border-radius: 100px;
margin: 75px 0px 0px 75px;
position: absolute;
}
Please put the inner div outside the parent div
And set the onmouseover for parent div to change inner div's position
<div class="f" id="parent" onmousemove="moveInner(event)">
</div><div class="s" id="inner"></div>
var ol_x= null;
var ol_y= null;
function moveInner(me, e)
{
if(ol_x!=null)
{
var ctx = me.getContext("2d");
ctx.arc(ol_x, ol_y, 42, 0, 2 * Math.PI, false);
ctx.fillStyle='grey';
ctx.fill();
ctx.restore();
}
ol_x = e.clientX+20;
ol_y = e.clientY+20;
var ctx = me.getContext("2d");
ctx.beginPath();
ctx.arc(ol_x, ol_y, 40, 0, 2*Math.PI, false);
ctx.fillStyle ='black';
ctx.fill();
ctx.stroke();
}
.f {
width: 200px;
height: 200px;
background-color: grey;
position: fixed;
border-radius: 100px;
}
Hi this is my solution for EDIT<BR>
I use 2D context to draw inner DIV inside parent DIV
<canvas class="f" id="parent" onmousemove="moveInner(this, event)">
</canvas>
I am trying to do my very first simple game.
My question is: why is my game loop not working? If you see the code, I tried to put all the game code inside an if. The idea is: "if game over is false, execute the game, else (when my humanHungerBar reaches 0) the game is over".
Can you help me here? Thanks a lot
<!doctype html>
<html>
<head>
<style>
body {
-webkit-user-select: none;
}
#screen {
position: relative;
left: 480px;
top: 30px;
border: 2px solid black;
height: 500px;
width: 400px;
display: block;
}
#myCash {
position: relative;
width: 90px;
height: 40px;
top: 7px;
left: 5px;
border: 5px solid lightgreen;
text-align: center;
vertical-align: middle;
line-height: 40px;
color: green;
font-weight: bolder;
font-size: 20px;
}
#humanHunger {
position: relative;
width: 90px;
height: 90px;
top: 20px;
left: 280px;
border: 1px solid black;
}
#humanHungerContainer {
position: relative;
width: 100%;
height: 20px;
top: 20px;
border: 1px solid black;
background-color: red;
}
#humanHungerBar {
position: absolute;
width: 76%;
height: 18px;
border: 1px solid green;
background-color: green;
}
#moneyMaker {
position: relative;
width: 300px;
height: 450px;
top: -850px;
left: 100px;
border: 3px solid green;
background-image: url("moneyMakerBackground.png");
}
#jobInstructions {
position: absolute;
width: 250px;
height: 50px;
border: 3px solid orange;
top: 20px;
left: 22px;
background-color: lightgreen;
text-align: center;
}
#workingHours {
position: absolute;
width: 250px;
height: 50px;
border: 3px solid orange;
top: 90px;
left: 22px;
background-color: lightgreen;
text-align: center;
vertical-align: middle;
line-height: 50px;
}
#workCounter {
position: absolute;
width: 60px;
height: 50px;
border: 3px solid orange;
top: 250px;
left: 22px;
background-color: lightgreen;
text-align: center;
}
#clickingArea {
position: absolute;
width: 250px;
height: 50px;
border: 3px solid orange;
top: 170px;
left: 22px;
background-color: lightgreen;
filter: saturate(100%);
}
#clickingArea:hover {
filter: saturate(190%);
}
#dollar {
position: relative;
left: 80px;
top: 5px;
}
#nakedHuman {
position: absolute;
top: 25px;
left: 120px;
}
#clothesScreen {
position:relative;
top: -400px;
left: 900px;
border: 2px solid black;
width: 300px;
height: 400px;
overflow: auto;
}
#lumberShirt {
position: absolute;
top: 165px;
left: 120px;
display:none;
}
#coffeeStainedTShirt {
position: absolute;
top: 165px;
left: 120px;
display:none;
}
#regularJeans {
position: absolute;
top: 328px;
left: 145px;
display:none;
}
#lumberShirtMiniContainer {
position: relative;
top: 10px;
left: 10px;
}
#coffeeStainedTShirtMiniContainer {
position: relative;
top: 30px;
left: 10px;
}
#regularJeansMiniContainer {
position: relative;
top: 60px;
left: 20px;
}
#burgerMiniContainer {
position: relative;
top: 90px;
left: 10px;
}
#lumberShirtPrice {
position: absolute;
top: 20px;
left: 100px;
border: 3px solid orange;
width: 50px;
height: 20px;
text-align: center;
vertical-align: middle;
line-height: 20px;
background-color: orange;
}
#buyButtonLumber {
position: absolute;
top: 60px;
left: 100px;
border: 3px solid lightgreen;
width: 30px;
height: 15px;
}
#buyButtonCoffee {
position: absolute;
top: 60px;
left: 100px;
border: 3px solid lightgreen;
width: 30px;
height: 15px;
}
#buyButtonRegularJeans {
position: absolute;
top: 60px;
left: 100px;
border: 3px solid lightgreen;
width: 30px;
height: 15px;
}
#buyButtonBurger {
position: absolute;
top: 60px;
left: 100px;
border: 3px solid lightgreen;
width: 30px;
height: 15px;
}
</style>
</head>
<body>
<div id="screen">
<img id="nakedHuman" src="nakedHuman2.png" width="139.46" height="450">
<img id="lumberShirt" src="lumberShirt.png" width="139.46" height="158.51">
<img id="coffeeStainedTShirt" src="coffeeStainedTShirt.png" width="139.46" height="158.51">
<img id="regularJeans" src="regularJeans.png" width="89" height="152.72">
<div id="myCash"></div>
<div id="humanHunger">
<div id="humanHungerContainer">
<div id="humanHungerBar"></div>
</div>
</div>
</div>
<div id="clothesScreen">
<div id="lumberShirtMiniContainer">
<img id="lumberShirtMini" src="lumberShirt.png" width="70.38" height="80">
<div id="lumberShirtPrice"></div>
<div id="buyButtonLumber">Buy</div>
</div>
<div id="coffeeStainedTShirtMiniContainer">
<img id="coffeeStainedTShirtMini" src="coffeeStainedTShirt.png" width="70.38" height="80">
<div id="buyButtonCoffee">Buy</div>
</div>
<div id="regularJeansMiniContainer">
<img id="regularJeansMini" src="regularJeans.png" width="46.62" height="80">
<div id="buyButtonRegularJeans">Buy</div>
</div>
<div id="burgerMiniContainer">
<img id="burger" src="burger.png" width="94.11" height="80">
<div id="buyButtonBurger">Buy</div>
</div>
</div>
<div id="moneyMaker">
<div id="jobInstructions">You work on a click factory, so get to clickin'!!</div>
<div id="workingHours"></div>
<div id="clickingArea"><img src="dollar.png" id="dollar" width="82.55" height="42"></div>
<div id="workCounter"></div>
</div>
<script>
window.onload = function () {
var gameOver = false;
if (!gameOver) {
var lumberShirtPrice = document.getElementById("lumberShirtPrice");
lumberShirtPrice.innerHTML = 7;
var myCash = document.getElementById("myCash");
myCash.innerHTML = 45;
var buyButtonLumber = document.getElementById("buyButtonLumber");
buyButtonLumber.addEventListener("click", substractItemPriceFromMyCash);
var negateFX = new Audio('negate1.wav');
function substractItemPriceFromMyCash() {
var a = parseInt(lumberShirtPrice.innerHTML);
var b = parseInt(myCash.innerHTML);
if (a > b) {
negateFX.play();
}
else {
myCash.innerHTML -= lumberShirtPrice.innerHTML;
console.log("you bought the lumber shirt");
}
}
var workingHoursScreen = document.getElementById("workingHours");
workingHoursScreen.innerHTML = 0;
var workCounter = document.getElementById("workCounter");
workCounter.innerHTML = 0;
var allowedToWork = false;
var workingHoursChronometer = setInterval(incrementWorkingHoursChronometer, 1000);
function incrementWorkingHoursChronometer () {
var a = parseInt(workingHoursScreen.innerHTML);
if(a < 10) {
workingHoursScreen.innerHTML++;
}
else if (a == 10) {
workingHoursScreen.innerHTML = 0;
workCounter.innerHTML++;
}
var b = parseInt(workCounter.innerHTML);
if (b == 4) {
workCounter.innerHTML = 0;
}
if (b % 2 == 0) {
allowedToWork = true;
}
else if (b % 2 == 1) {
allowedToWork = false;
}
}
var coinFX = new Audio('coin1.wav');
var clickingAreaBox = document.getElementById("clickingArea");
clickingAreaBox.addEventListener("click", giveMeMoney);
function giveMeMoney() {
if(allowedToWork) {
myCash.innerHTML++;
coinFX.play();
}
else {
negateFX.play();
}
}
var humanHungerBar = document.getElementById("humanHungerBar");
var barWidth = 76;
humanHungerBar.style.width = barWidth + '%';
var humanHungerBarDecrement = setInterval (decreaseHumanHungerBar, 700);
function decreaseHumanHungerBar () {
if (barWidth > 0) {
humanHungerBar.style.width = barWidth + '%';
barWidth--;
}
}
var buyButtonBurger = document.getElementById("buyButtonBurger");
var burgerPrice = 15;
buyButtonBurger.addEventListener("click", buyBurgerRestoreLifeAndDecreaseMoney);
function buyBurgerRestoreLifeAndDecreaseMoney() {
var a = parseInt(myCash.innerHTML);
if (a >= burgerPrice){
if(barWidth < 92) {
barWidth += 10;
myCash.innerHTML -=burgerPrice;
}
else if (barWidth == 1) {
gameOver = true;
console.log("bar is 1");
}
else {
negateFX.play();
}
}
else {
negateFX.play();
}
}
}
else {
document.getElementById("screen").style.display = 'none';
}
}
</script>
</body>
</html>
So you have written a script that executes one time. It goes from beginning to end, and then stops. So what you want to do is write a script that repeats over and over until the game ends. So here's a super brief example of how you might do that in javascript:
while (!gameOver) {
// do game code
}
BUT WAIT!!!
So the code inside that while loop will keep on happening over and over until the gameOver variable is true. But if you try to use that code, your game will probably freeze! Why? Because the browser is executing the code inside the while loop as fast as it possibly can. But if you'd like your game to run at a certain frame-per-second rate, you probably want to use a javascript timeout. So try something like this:
setInterval(function() {
// do game code
}, 1000/60);
That is the absolutely bare minimum that you'll need for a technical "game loop". However, this is not really the recommended approach for starting to create a browser-based game. Try doing some research and checking out things like this and this.
I have existing HTML/CSS/JavaScript that works fine for a "click to open" sliding panel from the top of the page, like this:
<div id="machineSelectorContainer">
<div id="machineSelectorTray">
<table id="machineSelector">
<tr id="machineSelectorThumbnailTextRow">
<td class="machineSelectorThumbnailText">VM1</td>
<td class="machineSelectorThumbnailText">VM2</td>
</tr>
<tr>
<td class="machineSelectorThumbnailPicture">
<img src="images/placeholderThumbnail.png" />
</td>
<td class="machineSelectorThumbnailPicture">
<img src="images/placeholderThumbnail.png" />
</td>
</tr>
</table>
</div>
<div id="machineSelectorThumb">
<div id="machineSelectorThumbText">
•••
</div>
</div>
</div>
with
*, body {
margin: 0;
height: 100%;
}
#machineSelectorContainer {
width: 100%;
height: 150px;
text-align: center;
z-index: 100;
position: absolute;
top: -120px;
}
#machineSelectorThumb {
width: 60px;
height: 30px;
line-height: 30px;
font-family: sans-serif;
font-size: 12pt;
text-align: center;
position: relative;
top: 120px;
border: 1px solid;
background-color: lightblue;
-ms-opacity: 0.4;
opacity: 0.4;
margin: auto;
z-index: 100;
}
#machineSelectorTray {
position: absolute;
height: 120px;
z-index: 100;
margin: auto;
left: 50%;
}
#machineSelector {
background-color: lightblue;
font-family: sans-serif;
font-size: 8pt;
text-align: center;
position: relative;
left: -50%;
margin: 0;
padding: 0;
height: 120px;
border: 1px solid black;
}
#machineSelector > table {
height: auto;
}
#machineSelectorThumbnailTextRow {
height: auto;
}
.machineSelectorThumbnailPicture > img {
width: 100px;
border: 1px solid black;
height: auto;
}
.machineSelectorThumbnailText {
position: relative;
bottom: 0;
width: 100px;
height: 20px;
line-height: 20px;
}
and
$("#machineSelectorThumb").click(function () {
var element = $("#machineSelectorContainer");
var currentTop = element.offset().top;
var newTop = -(currentTop + 120);
element.animate({
top: newTop
}, 200, function () {
});
});
(I put a jsfiddle at http://jsfiddle.net/mikebaz/rtTe5/1/ but note that the styling does not work correctly there for some reason - it's not worth messing with it as it's close enough, but be aware the thumb button doesn't overlap the tab in a normal browser setup.)
This works exactly how I want. I would like to have the same kind of behavior and design for a panel that slides out from the right, with the open button vertically centered and rotated, sliding open from off the right side of the window into view (right to left slide).
I have found a lot of different answers around pieces of this, such as CSS- hide element off the right of the screen to get the off-screen positioning, and I looked at Can't get Slide Out Tab on the right hand side of my page but that uses an image for the rotated text, which I don't want to do (among other differences). It seems that the script would be similar, but I'm stuck on how to build the CSS properly. I can't seem to get the combination of rotation, off-screen portion, and dynamic height working. In particular, I can't seem to get the contents to show or the thumb text to properly center in the thumb button. Here is what I have right now that is getting there:
<div id="machineControlsOuterContainer">
<div id="machineControlsContainer">
<div id="machineControlsTray">
<table id="machineControls">
<tr>
<td class="machineButton">Button</td>
</tr>
<tr>
<td>Button</td>
</tr>
<tr>
<td>Button</td>
</tr>
<tr>
<td>Button</td>
</tr>
<tr>
<td>Button</td>
</tr>
</table>
</div>
<div id="machineControlsThumb">
<div id="machineControlsRotatedContainer">
<div id="machineControlsThumbText">•••</div>
</div>
</div>
</div>
</div>
and
#machineControlsOuterContainer {
position: relative;
overflow: hidden;
}
#machineControlsContainer {
position: absolute;
height: 100%;
z-index: 100;
width: 150px;
right: -120px;
}
#machineControlsThumb {
width: 30px;
height: 60px;
font-family: sans-serif;
font-size: 12pt;
border: 1px solid;
background-color: lightblue;
-ms-opacity: 0.25;
opacity: 0.25;
margin: auto;
position: absolute;
left: 0px;
top: 50%;
}
#machineControlsRotatedContainer {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
margin: auto;
padding: 0;
line-height: 30px;
}
#machineControlsTray {
position: absolute;
right: -120px;
height: 100%;
}
#machineControlsThumbText {
}
#machineControls {
background-color: lightblue;
-ms-opacity: 0.5;
opacity: 0.5;
width: 120px;
font-family: sans-serif;
font-size: 12pt;
text-align: left;
border: 1px solid;
}
.machineButton {
border: 1px solid;
padding: 0px;
margin: 0px;
}
with the script:
$("#machineControlsThumb").click(function () {
var element = $("#machineControlsContainer");
var windowWidth = $(window).width();
var currentLeft = element.offset().left;
var currentRight = -150 + (windowWidth - currentLeft);
var newRight = -(currentRight + 120);
element.animate({
right: newRight
}, 200, function () {
});
});
I can tell I'm close, but I just can't finish closing the loop.
Thanks!
OK, so I finally figured this out. I had to do a little bit more manipulation of different pieces, and add some vertical centering script (I can't get the CSS to cooperate).
CSS:
#machineControlsOuterContainer {
position: relative;
overflow: hidden;
}
#machineControlsContainer {
position: absolute;
height: 100%;
z-index: 100;
width: 150px;
right: -120px;
}
#machineControlsThumb {
width: 30px;
height: 60px;
font-family: sans-serif;
font-size: 12pt;
border: 1px solid;
background-color: lightblue;
-ms-opacity: 0.4;
opacity: 0.4;
margin: auto;
position: absolute;
left: 0px;
}
#machineControlsRotatedContainer {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
margin: auto;
padding: 0;
line-height: 30px;
}
#machineControlsTray {
position: absolute;
right: 0;
height: auto;
}
#machineControlsThumbText {
line-height: 60px;
text-align: center;
}
#machineControls {
background-color: lightblue;
-ms-opacity: 0.5;
opacity: 0.5;
width: 120px;
font-family: sans-serif;
font-size: 12pt;
text-align: left;
border: 2px solid black;
border-spacing: 0;
}
#machineControls td {
height: 30px;
border: 1px solid black;
padding-left: 4px;
}
Adjustment script:
$(window).resize(function () {
verticallyCenterElement("machineControlsThumb");
verticallyCenterElement("machineControlsTray");
});
verticallyCenterElement("machineControlsThumb");
verticallyCenterElement("machineControlsTray");
function verticallyCenterElement(elementName) {
var element = $("#" + elementName);
var height = element.height();
var windowHeight = $(window).height();
var newTop = (windowHeight - height) / 2;
element.css("top", newTop);
}