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);
}
Related
/*when you click on the picture it should open an overlay, which closes if you click anywhere*/
<script type="text/javascript">
function on() {document.getElementById("over1").style.display="block";}
function off() {
document.getElementById("over1").style.display = "none";
}
function on() {document.getElementById("over2").style.display="block";}
function off() {
document.getElementById("over2").style.display = "none";
} </script>
<style>
.container{
background-color: #94AB98;
height:370px;
width:280px;
margin: 30px;
margin-bottom: 60px;
float: left;
display: inline-block;
}
.container .bildbt1{
width: 230px;
height: 230px;
margin: 25;
border: none;
background: url(pic1);
}
.container .bildbt2{
width: 230px;
height: 230px;
margin: 25;
border: none;
background: url(pic2);}
#over1{
display: none;
width: 100%;
height: 100%;
background-color: rgba(65, 84, 80, 0.95);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: :0;
line-height: 130%;
}
#over2{
display: none;
width: 100%;
height: 100%;
background-color: rgba(65, 84, 80, 0.95);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: :0;
line-height: 130%;
}
#text1{
position: absolute;
top:50%;
left:50%;
color: white;
font-size: 20;
transform: translate(-50%,-50%);
-ms-transform: translate (-50%,-50%);
}
#text2{
position: absolute;
top:50%;
left:50%;
color: white;
font-size: 20;
transform: translate(-50%,-50%);
-ms-transform: translate (-50%,-50%);
}
</style>
/*those are my containers, with buttons*/
<body>
<div class="container">
<div id="over1" onclick="off()">
<a id="text1">some text</a></div>
<button class="bildbt1" onclick="on()">
</button>
<h2>text too</h2>
</div>
<div class="container">
<div id="over2" onclick="off()">
<a id="text2">
also text</a>
</div>
<button class="bildbt2" onclick="on()"></button>
<h2>and there is also text</h2>
</div>
</body>
It only shows Overlay 2, i tried various options but it doesn't work.
Can you help me?
I'don't know why I can't poste this question...
It looks like your post is mostly code; add some more details...
i think there are enough details.
<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.
So what I'm trying to do is create two functions that each go along with their respective buttons. The purpose of the function is to make divs containing images rotate through a number images. When 3 is rotated to the right it leaves the stack of visible images on the page, and when 1 is rotated to the left the same happens. When 1 is rotated to the right, a new image pops into the visible stack. I have the basic JavaScript written out, however when I click the buttons nothing happens. Can anyone help me out with this? Thank you!!
#img1 {
position: absolute;
background-color: lightblue;
height: 70px;
width: 50px;
z-index: 5;
margin: auto;
right: 45px;
}
#img2 {
position: absolute;
background-color: lightcoral;
height: 70px;
width: 50px;
z-index: 10;
left: 70px;
right: 70px;
top: 100px;
margin: auto;
}
#img3 {
position: absolute;
background-color: lightgreen;
height: 70px;
width: 50px;
z-index: 5;
margin: auto;
left: 45px;
}
#rightArrow {
position: absolute;
left: 15px;
bottom: 45px;
width: auto;
font-size: 24px;
transform: rotate(180deg);
}
#rightArrow:hover {
color: yellow;
}
#leftArrow {
position: absolute;
right: 15px;
bottom: 45px;
width: auto;
font-size: 24px;
transform: rotate(180deg);
}
#leftArrow:hover {
color: yellow;
}
<div>
<p id='leftArrow'>↶</p>
<div id='img1' style="border: 2px solid blue;">1</div>
<div id='img2' style="border: 2px solid red;">2</div>
<div id='img3' style="border: 2px solid green;">3</div>
<p id='rightArrow'>↷</p>
var myLeftArrow = document.querySelector("#rightArrow");
var myRightArrow = document.querySelector("#leftArrow");
myLeftArrow.addEventListener("click", rotateLeft(), false);
function rotateLeft()
{
var set1 = document.getElementById('img1');
var set2 = document.getElementById('img2');
var set3 = document.getElementById('img3');
set1.id = ('img3');
set2.id = ('img1');
set3.id = ('img2');
}
myRightArrow.addEventListener("click", rotateRight(), false);
function rotateRight()
{
var set1 = document.getElementById('img1');
var set2 = document.getElementById('img2');
var set3 = document.getElementById('img3');
set1.id = ('img2');
set2.id = ('img3');
set3.id = ('img1');
}
The problem was in your even listeners. You were passing rotateLeft() and rotateRight() when you should have passed them without the parenthesis. See working code below.
var myLeftArrow = document.querySelector("#rightArrow");
var myRightArrow = document.querySelector("#leftArrow");
myLeftArrow.addEventListener("click", rotateLeft, false);
function rotateLeft()
{
var set1 = document.getElementById('img1');
var set2 = document.getElementById('img2');
var set3 = document.getElementById('img3');
set1.id = ('img3');
set2.id = ('img1');
set3.id = ('img2');
}
myRightArrow.addEventListener("click", rotateRight, false);
function rotateRight()
{
var set1 = document.getElementById('img1');
var set2 = document.getElementById('img2');
var set3 = document.getElementById('img3');
set1.id = ('img2');
set2.id = ('img3');
set3.id = ('img1');
}
#img1 {
position: absolute;
background-color: lightblue;
height: 70px;
width: 50px;
z-index: 5;
margin: auto;
right: 45px;
}
#img2 {
position: absolute;
background-color: lightcoral;
height: 70px;
width: 50px;
z-index: 10;
left: 70px;
right: 70px;
top: 100px;
margin: auto;
}
#img3 {
position: absolute;
background-color: lightgreen;
height: 70px;
width: 50px;
z-index: 5;
margin: auto;
left: 45px;
}
#rightArrow {
position: absolute;
left: 15px;
bottom: 45px;
width: auto;
font-size: 24px;
transform: rotate(180deg);
}
#rightArrow:hover {
color: yellow;
}
#leftArrow {
position: absolute;
right: 15px;
bottom: 45px;
width: auto;
font-size: 24px;
transform: rotate(180deg);
}
#leftArrow:hover {
color: yellow;
}
<p id='leftArrow'>↶</p>
<div id='img1' style="border: 2px solid blue;">1</div>
<div id='img2' style="border: 2px solid red;">2</div>
<div id='img3' style="border: 2px solid green;">3</div>
<p id='rightArrow'>↷</p>
I made a content tile that when clicked, activates another part of the screen. On the tile, I have a couple links that, when clicked, go to new pages. I made a non-javascript version that works fine.
No javascript:
https://jsfiddle.net/raazqqks/2/
HTML:
<div class="tile activeTile" id="response0">
<div class="responseContainer">
<div class="left">
<h4 class="title">
<a class="topLink" href="javascript:alert('Link clicked')">Title</a>
</h4>
<p>Foo bar</p>
<p>Foo bar?</p>
<p class="extra">
<a class="topLink" href="javascript:alert('Link clicked')">Extra foo bar!</a>
</p>
</div>
<div class="bonus">
<p>Bonus</p>
</div>
<a class="noJavaLink" id="0" href="javascript:alert('Tile clicked');"></a>
</div>
</div>
CSS:
.responseContainer {
position: relative;
overflow: hidden;
z-index: 0;
transition: all linear .2s;
border: 1px solid grey;
border-radius: 4px;
background-color: white;
}
.responseContainer p {
margin: 0;
}
.tile {
width: 80%;
text-align: left;
margin: 16px 48px 16px 32px;
margin-top: 0;
transition: all linear .2s;
z-index: 0;
border-radius: 4px;
background-repeat: no-repeat;
}
.activeTile {
width: 90%;
border-radius: 4px;
color: white;
}
.activeTile > div {
background-color: rgba(33, 33, 33, .5);
}
.left {
float: left;
margin: 10px;
margin-top: -10px;
max-width: 50%;
}
.title {
font-size: 1.2em;
}
.title h4 {
margin: 20px 0 20px;
}
.bonus {
float: right;
margin-top: 10px;
margin: 10px;
font-size: 1.5em;
max-width: 50%;
}
.topLink {
position: relative;
z-index: 100;
}
.noJavaLink {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-decoration: none;
z-index: 10;
background-color: white;
border-radius: 4px;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer;
}
.active .noJavaLink {
pointer-events: none;
cursor: default;
}
I want to add simple animations to it, so if javascript is available, this version loads.
Javascript:
https://jsfiddle.net/n4svaLut/
Javascript:
document.addEventListener("DOMContentLoaded", setJavascriptTileAnimation(), false );
/* Set onclick events for tile animation
|
*/
function setJavascriptTileAnimation() {
var tiles = document.getElementsByClassName('tile')
var links = document.getElementsByClassName('noJavaLink');
for (var i = 0; i < tiles.length; i++) {
var tile = tiles[i];
var id = tile['id'];
tile.onclick = function() {
changeActiveTile(this.id);
//return false;
};
links[i].removeAttribute('href');
};
}
/* Toggle active tile
|
*/
function changeActiveTile(id) {
id_number = getIdNumber(id);
active_tile = document.getElementsByClassName('tile activeTile')[0];
active_tile.classList.remove('activeTile');
setTimeout(function() {
tile = document.getElementById(id);
tile.classList.add('activeTile');
}, 300);
}
function getIdNumber(id) {
return id.replace( /^\D+/g, '');
}
Notice how the links only work on a double click. Ive been playing around with this for two days and havent made any progress at all. Any ideas?
SOLUTION: Remove 'return false' from the onclick setter.
I've made a side - dot - navigation. It works fine, except for the active dot. I want the active dot to be filled, but I can't get it to work.
here's the JSFiddle
http://jsfiddle.net/R8f2j/
I know I need Javascript but I've tried several things from other tutorials. Can't figure out what I need.
this is the HTML
<div id="cbp-fbscroller" class="cbp-fbscroller">
<nav>
Handgemaakte meubelen door een Groninger vakman
De mogelijkheden
Restauratie
Het Proces
</nav>
</div>
<div id="page1">een</div>
<div id="page2">twee</div>
<div id="page3">drie</div>
<div id="page4">vier</div>
this is the CSS
.cbp-fbscroller > nav {
position: fixed;
z-index: 9999;
right: 50px;
top: 50%;
width: 10px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.cbp-fbscroller > nav a {
display: block;
position: relative;
z-index: 999;
color: transparent;
width: 10px;
height: 10px;
outline: none;
margin: 10px 0;
border-radius: 50%;
border: 1px solid #666;
}
.cbp-fbscroller > nav a:hover {
display: block;
position: relative;
z-index: 999;
color: transparant;
width: 10px;
height: 10px;
outline: none;
margin: 10px 0;
border-radius: 50%;
border: 1px solid #d7d7d7;
}
#page1 {
width: 100%;
height: 400px;
background-color: red;
}
#page2 {
width: 100%;
height: 400px;
background-color: #98ffbc;
}
#page3 {
width: 100%;
height: 400px;
background-color: #a5d1ff;
}
#page4 {
width: 100%;
height: 400px;
background-color: #ffc1ff;
}
First define your current class CSS:
.cbp-fbcurrent {
background: #ffffff;
}
Then add an event listener to each navigation item that will remove the current class and add it to the clicked element:
var currentClass = "cbp-fbcurrent",
navLinks = document.querySelectorAll('nav a');
for(var i = 0; i < navLinks.length; i++){
navLinks[i].onclick = function(){
var current = document.querySelector("." + currentClass)
current.className = current.className.replace(/(\s)?cbp-fbcurrent/ig, "");
this.className += " " + currentClass;
};
}
Example: http://jsfiddle.net/R8f2j/3/
You can do this with jquery like this:
$('a').click(function(){
$('a').removeAttr('style');
$(this).css('background-color', 'yellow');
});
Here's demo