object Object issue using append - javascript

My goal is to create a to-do list and having the possibility to add more items to the list.
I'm using the .append() method to add content. However, I also need to add a checkbox for every new item added.
Here's what I have so far
(Run the code snippet and add a new item, you'll see the error I'm having)
$(document).ready(function() {
$("#button").click(function() {
var check = $("<input>", { type: "checkbox" });
var toAdd = $("input[name=ListItem]").val();
$("ul").append($("<li>" + check + "<label>" + toAdd + "</label>" + "</li>"));
});
});
#import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
margin: 50px 0;
font-family: 'Josefin Sans', sans-serif;
font-size: 20px;
font-weight: bolder;
}
input {
cursor: pointer;
position: relative;
visibility: hidden;
}
input:after {
border: 3px solid lightblue;
border-radius: 50%;;
content: "";
display: block;
height: 46px;
width: 46px;
text-align: center;
visibility: visible;
transition: all 100ms ease-in-out;
}
input:checked:after {
border: 3px solid lightblue;
color: white;
font-size: 30px;
border-radius: 50%;
content: "✘";
line-height: 43px;
background-color: lightblue;
animation: bounce 300ms ease-in-out forwards;
}
#keyframes bounce {
0% {transform: scale(1, 1);}
70% {transform: scale(1.1, 1.1);}
100% {transform: scale(1, 1);}
}
label {
position: relative;
left: 50px;
top: 18px;!important
}
input[type=text] {
border: 3px solid lightblue;
width: 100px;
height: 50px;
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
<h1>To do list</h1>
<form name="toDoList">
<input type="text" name="ListItem" />
</form>
<div id="button">Add</div>
<ul>
<li>
<input type="checkbox">
<label for="checkbox">Item1</label>
</li>
<li>
<input type="checkbox">
<label for="checkbox">Item2</label>
</li>
<li>
<input type="checkbox">
<label for="checkbox">Item3</label>
</li>
</ul>
</div>


You were appending Object to a string, and hence the error. Below is the updated working version of your code:
$(document).ready(function() {
$("#button").click(function() {
var toAdd = $("input[name=ListItem]").val();
$("ul").append($("<li><input type='checkbox'><label>" + toAdd + "</label>" + "</li>"));
});
});
#import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
margin: 50px 0;
font-family: 'Josefin Sans', sans-serif;
font-size: 20px;
font-weight: bolder;
}
input {
cursor: pointer;
position: relative;
visibility: hidden;
}
input:after {
border: 3px solid lightblue;
border-radius: 50%;
;
content: "";
display: block;
height: 46px;
width: 46px;
text-align: center;
visibility: visible;
transition: all 100ms ease-in-out;
}
input:checked:after {
border: 3px solid lightblue;
color: white;
font-size: 30px;
border-radius: 50%;
content: "✘";
line-height: 43px;
background-color: lightblue;
animation: bounce 300ms ease-in-out forwards;
}
#keyframes bounce {
0% {
transform: scale(1, 1);
}
70% {
transform: scale(1.1, 1.1);
}
100% {
transform: scale(1, 1);
}
}
label {
position: relative;
left: 50px;
top: 18px;
!important
}
input[type=text] {
border: 3px solid lightblue;
width: 100px;
height: 50px;
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
<h1>To do list</h1>
<form name="toDoList">
<input type="text" name="ListItem" />
</form>
<div id="button">Add</div>
<ul>
<li>
<input type="checkbox">
<label for="checkbox">Item1</label>
</li>
<li>
<input type="checkbox">
<label for="checkbox">Item2</label>
</li>
<li>
<input type="checkbox">
<label for="checkbox">Item3</label>
</li>
</ul>
</div>


Keeping most of your code as it was, it is enough to fix the .append command, using the functions get(0).outerHTML() as follows:
$("ul").append($("<li>" + check.get(0).outerHTML() + "<label>" + toAdd + "</label>" + "</li>"));
The function get(0) selects the first (and only) element in the object and .outerHTML() generates HTML from the jQuery object.
Here is the working snippet:
$(document).ready(function() {
$("#button").click(function() {
var check = $("<input>", { type: "checkbox" });
var toAdd = $("input[name=ListItem]").val();
alert(check.get(0).outerHTML);
$("ul").append($("<li>" + check.get(0).outerHTML + "<label>" + toAdd + "</label>" + "</li>"));
});
});
#import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
margin: 50px 0;
font-family: 'Josefin Sans', sans-serif;
font-size: 20px;
font-weight: bolder;
}
input {
cursor: pointer;
position: relative;
visibility: hidden;
}
input:after {
border: 3px solid lightblue;
border-radius: 50%;;
content: "";
display: block;
height: 46px;
width: 46px;
text-align: center;
visibility: visible;
transition: all 100ms ease-in-out;
}
input:checked:after {
border: 3px solid lightblue;
color: white;
font-size: 30px;
border-radius: 50%;
content: "✘";
line-height: 43px;
background-color: lightblue;
animation: bounce 300ms ease-in-out forwards;
}
#keyframes bounce {
0% {transform: scale(1, 1);}
70% {transform: scale(1.1, 1.1);}
100% {transform: scale(1, 1);}
}
label {
position: relative;
left: 50px;
top: 18px;!important
}
input[type=text] {
border: 3px solid lightblue;
width: 100px;
height: 50px;
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
<h1>To do list</h1>
<form name="toDoList">
<input type="text" name="ListItem" />
</form>
<div id="button">Add</div>
<ul>
<li>
<input type="checkbox">
<label for="checkbox">Item1</label>
</li>
<li>
<input type="checkbox">
<label for="checkbox">Item2</label>
</li>
<li>
<input type="checkbox">
<label for="checkbox">Item3</label>
</li>
</ul>
</div>

Related

When mySwitch is untoggled/unchecked, the toggle/checked no longer works, doesn't change my background again

I have 2 toggle switches, the problem I have is sperating each toggle switches to do their own thing. I'm unable to, in javascript, to make a if/else statement for my 2nd toggle switch.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Asignment 3</title>
<link rel="shortcut icon" href="https://cdn-icons-png.flaticon.com/512/136/136724.png" type="image/x-icon">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div id="RainbowId">
<div id="mySidebar" class="sidebar">
<a class="closebtn" onclick="closeNav()">×</a>
<a>RAINBOW MODE</a>
<a><label class="switch"><input type="checkbox"><div class="slider round"><div id="text">OFF</div></div></label></a>
<a><br></a>
<a><br></a>
<a>DO NOT TOUCH</a>
<a><label class="switch2"><input type="checkbox2"><div class="slider2 round2"><div id="text2">OFF</div></div></label></a>
</div>
<button class="openbtn" id="openBtnId" onclick="openNav()">⚙️</button>
</div>
</body>
</html>
the first if statement for the frist switch works but when I copy the code i couldn't make an ID for the CHECKBOX for javascript and CSS.
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
}
document.addEventListener('DOMContentLoaded', function () {
var checkbox = document.querySelector('input[type="checkbox"]');
checkbox.addEventListener('change', function () {
if (checkbox.checked) {
RainbowId.classList.toggle('Rainbow');
document.getElementById('text').innerHTML = 'ON';
}
else {
RainbowId.classList.toggle("Rainbow");
document.getElementById('text').innerHTML = 'OFF';
}
});
});
I gave the 2nd switch its own classes but couldn't give the CHECKBOX its own class.
/* Rainbow background*/
.Rainbow {
height: 100%;
width: 100%;
left:0;
right: 0;
top: 0;
bottom: 0;
background: linear-gradient(#ff0000, #ff4000, #ff8000, #ffbf00, #ffff00, #bfff00, #80ff00, #40ff00, #00ff00, #00ff40, #00ff80, #00ffbf, #00ffff, #00bfff, #0080ff, #0040ff, #0000ff, #4000ff, #8000ff, #bf00ff, #ff00ff, #ff00bf, #ff0080, #ff0040, #ff0000);
position: absolute;
background-size: 1800% 1800%;
-webkit-animation: rainbow 3s ease infinite;
animation: rainbow 3s ease infinite;
}
#keyFrames rainbow {
0%{background-position:0% 82%}
25%{background-position: 50% 9.5%}
50%{background-position:100% 19%}
75%{background-position: 75% 41%}
100%{background-position:0% 82%}
}
/* Sidebar Styles */
.sidebar {
height: 100%;
width: 0;
position: fixed;
top: 0;
left: 0;
background: grey;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
overflow-x: hidden;
transition: 1s;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: white;
display: block;
white-space: nowrap;
transition: 0.3s;
}
.closebtn {
cursor: pointer;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 40px;
}
.openbtn {
font-size: 40px;
cursor: pointer;
border: none;
background: none;
}
.openbtn:hover {
opacity: 50%;
}
br {
user-select: none;
}
/* Toggle Switch Styles */
.switch {
position: absolute;
width: 60px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
}
.switch input {
display:none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
transform: translateX(26px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.switch #text {
user-select: none;
position: absolute;
left: 60px;
margin-left: 10px;
}
/*Toogle Switch 2*/
.switch2 {
position: absolute;
width: 60px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
}
.switch2 input {
display:none;
}
.slider2 {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
}
.slider2:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
}
input:checked + .slider2 {
background-color: #2196F3;
}
input:focus + .slider2 {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider2:before {
transform: translateX(26px);
}
.slider2.round2 {
border-radius: 34px;
}
.slider2.round2:before {
border-radius: 50%;
}
.switch2 #text2 {
user-select: none;
position: absolute;
left: 60px;
margin-left: 10px;
}

Change your code as follows - use querySelectorAll to find all .checkbox
You'll see that both id="text" (and text2) are now class="text" this is important, since we can get the parent of the clicked checkbox and use querySelector to find the appropriate text
document.addEventListener('DOMContentLoaded', function() {
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(checkbox => {
checkbox.addEventListener('change', function() {
checkbox.parentElement.querySelector('.text').innerHTML =
checkbox.checked ? 'ON' : 'OFF';
if (this.dataset.action === 'rainbow') {
RainbowId.classList.toggle('Rainbow');
} else {
console.log('DO NOT TOUCH as TOUCHED');
}
});
});
});
I also tidied the code a bit to be more DRY
And your html - I've put line breaks in to make it readable, but I know that may cause issues, but at least you can see easily what has changed
<div id="RainbowId">
<div id="mySidebar" class="sidebar">
<a class="closebtn" onclick="closeNav()">×</a>
<a>RAINBOW MODE</a>
<a>
<label class="switch">
<input type="checkbox" data-action="rainbow">
<div class="slider round">
<!-- added class here -->
<div id="text" class="text">OFF</div>
</div>
</label>
</a>
<a><br></a>
<a><br></a>
<a>DO NOT TOUCH</a>
<a>
<label class="switch2">
<input type="checkbox" data-action="not a rainbow">
<div class="slider2 round2">
<!-- added class here -->
<div id="text2" class="text">OFF</div>
</div>
</label>
</a>
</div>
<button class="openbtn" id="openBtnId" onclick="openNav()">⚙️</button>
</div>

My dropdown from nav bar goes behind the slideshow. Could someone help me figure it out?

I already tried to mess up the position of each elements(gallery container, aka slideshow and navbar), but im not getting any result. Could you help me figure out what kind of property could i use to get a different result? Thanks alot in advance for whom help me.
A screenshot of my dropdown navbar behind the slideshow
// FUNCAO RELOGIO
function time() {
today=new Date();
now=new Date();
hours=today.getHours();
minutes=today.getMinutes();
seconds=today.getSeconds();
if(hours < 10) {
hours = "0" + hours;
}
if(minutes < 10) {
minutes = "0" + minutes;
}
if(seconds < 10) {
seconds = "0" + seconds;
}
document.getElementById('tempoActual').innerHTML=now.getDate() + "/" + (now.getMonth()+1) + "/" + now.getFullYear()+" "+ hours + ":" + minutes + ":" + seconds;
setTimeout('time()',500);
}
// FUNCAO TOOGLE
function toggle(ID){
var element = document.getElementById(ID);
if(element.style.display === "none"){
element.style.display = "block";
} else {
element.style.display = "none";
}
}
// FUNCOES SLIDESHOW
var slideIndex,slides,dots,captionText;
function initGallery(){
slideIndex = 0;
slides=document.getElementsByClassName("imageHolder");
slides[slideIndex].style.opacity=1;
captionText=document.querySelector(".captionTextHolder .captionText");
captionText.innerText=slides[slideIndex].querySelector(".captionText").innerText;
//disable nextPrevBtn if slide count is one
if(slides.length<2){
var nextPrevBtns=document.querySelector(".leftArrow,.rightArrow");
nextPrevBtns.style.display="none";
for (i = 0; i < nextPrevBtn.length; i++) {
nextPrevBtn[i].style.display="none";
}
}
//add dots
dots=[];
var dotsContainer=document.getElementById("dotsContainer"),i;
for (i = 0; i < slides.length; i++) {
var dot=document.createElement("span");
dot.classList.add("dots");
dotsContainer.append(dot);
dot.setAttribute("onclick","moveSlide("+i+")");
dots.push(dot);
}
dots[slideIndex].classList.add("active");
}
initGallery();
function plusSlides(n) {
moveSlide(slideIndex+n);
}
function moveSlide(n){
var i;
var current,next;
var moveSlideAnimClass={
forCurrent:"",
forNext:""
};
var slideTextAnimClass;
if(n>slideIndex) {
if(n >= slides.length){n=0;}
moveSlideAnimClass.forCurrent="moveLeftCurrentSlide";
moveSlideAnimClass.forNext="moveLeftNextSlide";
slideTextAnimClass="slideTextFromTop";
}else if(n<slideIndex){
if(n<0){n=slides.length-1;}
moveSlideAnimClass.forCurrent="moveRightCurrentSlide";
moveSlideAnimClass.forNext="moveRightPrevSlide";
slideTextAnimClass="slideTextFromBottom";
}
if(n!=slideIndex){
next = slides[n];
current=slides[slideIndex];
for (i = 0; i < slides.length; i++) {
slides[i].className = "imageHolder";
slides[i].style.opacity=0;
dots[i].classList.remove("active");
}
current.classList.add(moveSlideAnimClass.forCurrent);
next.classList.add(moveSlideAnimClass.forNext);
dots[n].classList.add("active");
slideIndex=n;
captionText.style.display="none";
captionText.className="captionText "+slideTextAnimClass;
captionText.innerText=slides[n].querySelector(".captionText").innerText;
captionText.style.display="block";
}
}
var timer=null;
function setTimer(){
timer=setInterval(function () {
plusSlides(1) ;
},3000);
}
setTimer();
function playPauseSlides() {
var playPauseBtn=document.getElementById("playPause");
if(timer==null){
setTimer();
playPauseBtn.style.backgroundPositionY="0px"
}else{
clearInterval(timer);
timer=null;
playPauseBtn.style.backgroundPositionY="-33px"
}
}
body {
/*background-image: url(../images/ilhas.jpg);*/
background-color: #3f4043;
background-repeat: no-repeat;
background-size: 100%;
/*max-width: 100%;
height: 100%
width: 100%;
height: 100%;*/
font-family: Verdana, sans-serif;
margin:0;
}
/*TITULO*/
#barNav {
margin-top: 3%;
width:100%;
}
header{
background-image: url(../images/banner1.png);
background-repeat: no-repeat;
height: 20%;
width: 100%;
position: absolute;
z-index: auto;
text-decoration: none;
text-align: left;
}
header .logo{
float: left;
width: 3.5%;
min-width: 40px;
margin-top: 0.2%;
margin-left: 28%;
margin-right: 2%;
}
#tituloPrincipal {
color: lightgray;
text-decoration: none;
}
#tituloAzores {
padding: 30px;
text-align: center;
background: lightblue;
color: black;
font-size: 30px;
}
#tituloSantaMaria {
padding: 30px;
text-align: center;
background: rgba(223, 201, 11, 0.952);
color: black;
font-size: 30px;
}
ul {
margin-left: 1.2%;
padding: 0px;
list-style: none;
font-family: arial;
}
ul li {
float: left;
width: 11%;
height: 40px;
background-color: black;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
/* CORES BARRA NAV PARA CADA ILHA */
#ilhaSantaMaria {
background:#efef32;
color:#3f4043;
}
#ilhaSantaMaria a:hover {
background:#e4d637;
color: #3f4043;
}
#ilhaSaoMiguel {
background:#4cd33d;
color:#fff;
}
#ilhaSaoMiguel a:hover {
background:#3fbf34;
color:#fff;
}
#ilhaTerceira {
background:#c66ca0;
color:#fff;
}
#ilhaTerceira a:hover {
background:#ad5788;
color:#fff;
}
#ilhaGraciosa {
background:#fbfbfb;
color:#333;
}
#ilhaGraciosa a:hover {
background:#dadada;
color:#333;
}
#ilhaSaoJorge {
background:#f4949b;
color:#fff;
}
#ilhaSaoJorge a:hover {
background:#d6878d;
color:#fff;
}
#ilhaPico {
background:#7c837a;
color:#fff;
}
#ilhaPico a:hover {
background:#666c64;
color:#fff;
}
#ilhaFaial {
background:#317eb2;
color:#fff;
}
#ilhaFaial a:hover {
background:#296a95;
color:#fff;
}
#ilhaFlores {
background:#84e275;
color:#fff;
}
#ilhaFlores a:hover {
background:#74cc67;
color:#fff;
}
#ilhaCorvo {
background:#7a6148;
color:#fff;
}
#ilhaCorvo a:hover {
background:#654f39;
color:#fff;
}
/* FIM CORES BARRA NAV PARA CADA ILHA */
ul li ul li{
display: none;
}
ul li:hover ul li {
display: block;
width:100%;
}
/* SLIDESHOW */
html,body{
padding: 10px 0 0 0;
margin: 0;
}
.galleryContainer{
width: 100%;
height: 500px;
max-width: 1000px;
margin: auto;
user-select: none;
box-shadow: 0px 0px 3px 1px #00000078;
padding: 10px;
box-sizing: border-box;
}
.galleryContainer .slideShowContainer{
width: 100%;
height: 90%;
overflow: hidden;
background-color: gainsboro;
position: relative;
}
.galleryContainer .slideShowContainer #playPause{
width: 32px;
height: 32px;
position: absolute;
background-image: url("../icons/playPause.png");
background-repeat: no-repeat;
z-index: 5;
background-size: cover;
margin: 5px;
cursor: pointer;
}
.galleryContainer .slideShowContainer #playPause:hover{
opacity: .7;
}
.galleryContainer .slideShowContainer .imageHolder{
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
}
.galleryContainer .slideShowContainer .imageHolder img{
width: 100%;
height: 100%;
}
.galleryContainer .slideShowContainer .imageHolder .captionText{
display: none;
}
.galleryContainer .slideShowContainer .leftArrow,.galleryContainer .slideShowContainer .rightArrow{
width: 50px;
background: #00000036;
position: absolute;
left: 0;
z-index: 1;
transition: background 0.5s;
height: 72px;
top: 50%;
transform: translateY(-50%);
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.galleryContainer .slideShowContainer .rightArrow{
left: auto;
right: 0;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.galleryContainer .slideShowContainer .leftArrow:hover,.galleryContainer .slideShowContainer .rightArrow:hover{
background: #000000a8;
cursor: pointer;
}
.galleryContainer .arrow{
display: inline-block;
border: 3px solid white;
width: 10px;
height: 10px;
border-left: none;
border-bottom: none;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.galleryContainer .arrow.arrowLeft{
transform: rotateZ(-135deg);
}
.galleryContainer .arrow.arrowRight{
transform: rotateZ(45deg);
}
.galleryContainer .slideShowContainer>.captionTextHolder {
position: absolute;
bottom: 0;
z-index: 1;
color: white;
font-family: sans-serif;
font-size: 20px;
text-align: center;
width: 100%;
background: none;
height: 50px;
line-height: 50px;
overflow: hidden;
}
.galleryContainer .slideShowContainer>.captionTextHolder>.captionText{
margin: 0;
}
.galleryContainer #dotsContainer{
width: 100%;
height: 10%;
text-align: center;
padding-top: 20px;
box-sizing: border-box;
}
.galleryContainer #dotsContainer .dots{
display: inline-block;
width: 15px;
height: 15px;
border-radius: 50%;
margin-left: 5px;
background-color: #bbb;
cursor: pointer;
transition:background-color 0.5s;
}
.galleryContainer #dotsContainer .dots:first-child{
margin-left: 0;
}
.galleryContainer #dotsContainer .dots:hover,.galleryContainer #dotsContainer .dots.active{
background-color: #717171;;
}
.galleryContainer .moveLeftCurrentSlide{
animation-name: moveLeftCurrent;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-fill-mode:forwards;
}
.galleryContainer .moveLeftNextSlide{
animation-name: moveLeftNext;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-fill-mode:forwards;
}
#keyframes moveLeftCurrent {
from {margin-left: 0;opacity: 1;}
to {margin-left: -100%;opacity: 1;}
}
#keyframes moveLeftNext {
from {margin-left: 100%;opacity: 1;}
to {margin-left: 0%;opacity: 1;}
}
.galleryContainer .moveRightCurrentSlide{
animation-name: moveRightCurrent;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-fill-mode:forwards;
}
.galleryContainer .moveRightPrevSlide{
animation-name: moveRightPrev;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-fill-mode:forwards;
}
#keyframes moveRightCurrent {
from {margin-left: 0;opacity: 1;}
to {margin-left: 100%;opacity: 1;}
}
#keyframes moveRightPrev {
from {margin-left: -100%;opacity: 1;}
to {margin-left: 0%;opacity: 1;}
}
.slideTextFromBottom {
animation-name: slideTextFromBottom;
animation-duration: 0.7s;
animation-timing-function: ease-out;
}
#keyframes slideTextFromBottom {
from {opacity: 0;margin-top: 100px}
to {opacity: 1;margin-top: 0px;}
}
.slideTextFromTop {
animation-name: slideTextFromTop;
animation-duration: 0.7s;
animation-timing-function: ease-out;
}
#keyframes slideTextFromTop {
from {opacity: 0;margin-top: -100px}
to {opacity: 1;margin-top: 0px;}
}
/* FIM SLIDESHOW */
/*Toogle */
#botaoUpDown {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: orange;
margin-top: 20px;
}
/*Fim Toogle */
/*Paginas com click drop*/
.h2_drop {
margin-bottom: 0;
}
.click_and_drop {
margin-top: 5%;
margin-left: 10%;
margin-right: 10%;
}
.click_and_drop li {
list-style: none;
font-family: 'Courier New', Courier, monospace;
font-size: 5vmin;
border-top: solid rgb(189, 189, 189);
margin-left: -4.1%;
display: block;
}
.elementoLista {
padding: 1%;
overflow: auto;
display: block;
position: relative;
}
.title {
float: left;
}
.seta {
float: right;
margin-right: 0%;
}
.pEscondido {
text-align: left;
float: left;
margin-left: 1%;
width: 50%
}
.mapaEscondido {
float: right;
width: 400px;
height: 350px;
border: 0;
}
.esconde {
font-size: 3vmin;
display: none;
overflow: auto;
}
h5 {
font-size: 4vmin;
font-family: 'Courier New', Courier, monospace;
margin-bottom: -3%;
margin-top: 0%;
}
.estrelas {
margin-left: 5%;
}
/*FIM Paginas click drop*/
/*FOOTER*/
footer {
background: rgba(255, 255, 255, 0.74);
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
width: 100%;
height: 60px;
bottom: 0;
position: relative;
clear: both;
}
/*FIM FOOTER*/
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="João Lopes, Wilson Lima, Cristina Santos">
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" lang="pt">
<meta name="viewport" content="width=device-width" initial-scale="1.0">
<meta name="description" content="O que conhecer e fazer no arquipelago dos Açores">
<meta name="keywords" content="Açores, Gastronomia, Transportes..."> <!--TODO-->
<link rel="stylesheet" type="text/css" href="CSS/styles.css">
<link rel="shortcut icon" type="image/jpeg" href="icons/azoresIcon.jpeg"/>
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<title>Ilha de Santa Maria</title>
</head>
<body onload="time()">
<main id="topo">
<header>
<img src="icons/azoresIcon.png" class="logo"/><h1 id="tituloPrincipal">Santa Maria</h1>
</header>
<br><br><br><br><br>
<!--BARRA NAVEGAÇÃO-->
<div id="barNav">
<ul>
<li id="ilhaSantaMaria">Santa Maria
<ul>
<li>Alojamento</li>
<li>Gastronomia</li>
<li>Transportes</li>
<li>Animação</li>
</ul>
</li>
<li id="ilhaSaoMiguel">São Miguel
<ul>
<li>Alojamento</li>
<li>Gastronomia</li>
<li>Transportes</li>
<li>Animação</li>
</ul>
</li>
<li id="ilhaTerceira">Terceira
<ul>
<li>Alojamento</li>
<li>Gastronomia</li>
<li>Transportes</li>
<li>Animação</li>
</ul>
</li>
<li id="ilhaGraciosa">Graciosa
<ul>
<li>Alojamento</li>
<li>Gastronomia</li>
<li>Transportes</li>
<li>Animação</li>
</ul>
</li>
<li id="ilhaSaoJorge">São Jorge
<ul>
<li>Alojamento</li>
<li>Gastronomia</li>
<li>Transportes</li>
<li>Animação</li>
</ul>
</li>
<li id="ilhaPico">Pico
<ul>
<li>Alojamento</li>
<li>Gastronomia</li>
<li>Transportes</li>
<li>Animação</li>
</ul>
</li>
<li id="ilhaFaial">Faial
<ul>
<li>Alojamento</li>
<li>Gastronomia</li>
<li>Transportes</li>
<li>Animação</li>
</ul>
</li>
<li id="ilhaFlores">Flores
<ul>
<li>Alojamento</li>
<li>Gastronomia</li>
<li>Transportes</li>
<li>Animação</li>
</ul>
</li>
<li id="ilhaCorvo">Corvo
<ul>
<li>Alojamento</li>
<li>Gastronomia</li>
<li>Transportes</li>
<li>Animação</li>
</ul>
</ul>
</div>
<!--FIM BARRA NAVEGAÇÃO-->
<!--SLIDESHOW-->
<div class="galleryContainer">
<div class="slideShowContainer">
<div id="playPause" onclick="playPauseSlides()"></div>
<div onclick="plusSlides(-1)" class="nextPrevBtn leftArrow"><span class="arrow arrowLeft"></span></div>
<div onclick="plusSlides(1)" class="nextPrevBtn rightArrow"><span class="arrow arrowRight"></span></div>
<div class="captionTextHolder"><p class="captionText slideTextFromTop"></p></div>
<div class="imageHolder">
<img src="images/smaria1.jpg">1366X768
<p class="captionText"></p>
</div>
<div class="imageHolder">
<img src="images/smaria2.jpg">
<p class="captionText"></p>
</div>
<div class="imageHolder">
<img src="images/smaria3.jpg">
<p class="captionText"></p>
</div>
</div>
<div id="dotsContainer"></div>
</div>
<!--FIM SLIDESHOW-->
<!--TOOGLE-->
<button id="botaoUpDown" onclick="toggle('alojamento')">ALOJAMENTO</button>
<div id="alojamento">
ALOJAMENTO
</div>
<br>
<button id="botaoUpDown" onclick="toggle('gastronomia')">GASTRONOMIA</button id="botaoUpDown">
<div id="gastronomia">
GASTRONOMIA
</div>
<br>
<button id="botaoUpDown" onclick="toggle('transporte')">TRASNPORTE</button id="botaoUpDown">
<div id="transporte">
TRASNPORTE
</div>
<br>
<button id="botaoUpDown" onclick="toggle('animacao')">ANIMAÇÃO</button>
<div id="animacao">
ANIMAÇÃO
</div>
<br>
<!--
<button id="botaoUpDown" onclick="toogle()">ALOJAMENTO</button>
<div class="gaveta">
Pousada de Viseu
<br>
Rua do Hospital
<br>
3500-161 Viseu
<br>
Portugal
<br>
<br>
Email: guest#pousadas.pt
<br>
Telefone:(+351) 232 457 320
<br>
Fax: (+351) 232 421 128
<br>
<br>
Website: www.pousadadeviseu.com
</p>
</div>
<button id="botaoUpDown" onclick="toogle()">GASTRONOMIA</button>
<div class="gaveta">
Pousada de Viseu
<br>
Rua do Hospital
<br>
3500-161 Viseu
<br>
Portugal
<br>
<br>
Email: guest#pousadas.pt
<br>
Telefone:(+351) 232 457 320
<br>
Fax: (+351) 232 421 128
<br>
<br>
Website: www.pousadadeviseu.com
</div>
-->
<footer>
<br><br>
contactos
<a id="tempoActual" style="float: right; font-size: 1.6vmin; line-height: 0; margin-top: -1%; margin-right: 2%;"></a>
</footer>
</main>
<script type="text/javascript" src="js/javascript.js"></script>
</body>
</html>
.

add position: relative; and z-index: 11 to ul.
ul {
margin-left: 1.2%;
padding: 0px;
list-style: none;
font-family: arial;
position: relative;
z-index: 11;
}
I hope this will works for you.
Thank you...

Add this code ul li{position:relative; z-index: 1}

How do I make my multiple choice code written in CSS & JS to only select one option? Currently I can select both

I am having a bit of trouble here, and I am sure this is an easy fix. I am very inexperienced in Javascript & I am trying to learn how to code better looking sites.
Basically I am using this code for selecting iOS or Android, but I want to be able to only select one or the other. Instead I am able to select both. Could someone please help explain how to select either one or the other? Preferably when selecting one it automatically deselects the other if the other is already selected. I would really appreciate help! Thank you very much.
https://codepen.io/cmpackagingllc/pen/JVLPjq
HTML
<h1>Device</h1>
<div class="wrap">
<ul>
<li><i class="fa fa-apple"></i></li>
<li><i class="fa fa-android"></i></li>
</ul>
</div>
CSS
#import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700);
* {
box-sizing: border-box;
}
body {
font-family: 'Lato', sans-serif;
background: #222;
}
h1 {
text-align: center;
margin-top: 50px;
color: tomato;
font-weight: 300;
word-spacing: 14px;
text-transform: uppercase;
}
.wrap {
width: 400px;
height: 300px;
margin: 0px auto;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
height: 100%;
}
ul li {
display: block;
width: 50%;
height: 50%;
line-height: 150px;
font-size: 40px;
color: #fff;
text-align: center;
float: left;
position: relative;
}
.borderOverlay {
width: 70%;
height: 70%;
background: rgba(255, 255, 255, .1);
border: 3px solid tomato;
border-radius: 10px;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
margin: auto;
animation: 0.25s enter;
}
.borderOverlay i {
position: absolute;
font-size: 29px;
color: #222;
top: -15px;
right: -13px;
background: #fff;
padding: 1px;
border-radius: 50%;
animation: 0.75s enter2;
}
#keyframes enter {
0% {
transform: scale(0) rotate(-90deg);
}
100% {
transform: scale(1);
}
}
#keyframes enter2 {
0% {
transform: scale(0);
}
50% {
transform: scale(0);
}
75% {
transform: scale(1.25);
}
100% {
transform: scale(1);
}
}
Javascript
$("li").click(function () {
if($(this).find('.borderOverlay').length) {
$(this).find('.borderOverlay').remove();
} else {
$(this).append('<div class="borderOverlay"><i class="fa fa-check"></i></div>');
}
});

$("li").click(function () {
var isActive = $(this).find('.borderOverlay').length;
$('.borderOverlay').remove();
if(!isActive) {
$(this).append('<div class="borderOverlay"><i class="fa fa-check"></i></div>');
}
});

You just have to remove the other's .borderOverlay.
You can do that by using $(this).siblings() and this will select all other li except the one that was clicked on.
$("li").click(function () {
if($(this).find('.borderOverlay').length) {
$(this).find('.borderOverlay').remove();
} else {
$(this).append('<div class="borderOverlay"><i class="fa fa-check"></i></div>');
$(this).siblings().find('.borderOverlay').remove();
}
});
#import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700);
* {
box-sizing: border-box;
}
body {
font-family: 'Lato', sans-serif;
background: #222;
}
h1 {
text-align: center;
margin-top: 50px;
color: tomato;
font-weight: 300;
word-spacing: 14px;
text-transform: uppercase;
}
.wrap {
width: 400px;
height: 300px;
margin: 0px auto;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
height: 100%;
}
ul li {
display: block;
width: 50%;
height: 50%;
line-height: 150px;
font-size: 40px;
color: #fff;
text-align: center;
float: left;
position: relative;
}
.borderOverlay {
width: 70%;
height: 70%;
background: rgba(255, 255, 255, .1);
border: 3px solid tomato;
border-radius: 10px;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
margin: auto;
animation: 0.25s enter;
}
.borderOverlay i {
position: absolute;
font-size: 29px;
color: #222;
top: -15px;
right: -13px;
background: #fff;
padding: 1px;
border-radius: 50%;
animation: 0.75s enter2;
}
#keyframes enter {
0% {
transform: scale(0) rotate(-90deg);
}
100% {
transform: scale(1);
}
}
#keyframes enter2 {
0% {
transform: scale(0);
}
50% {
transform: scale(0);
}
75% {
transform: scale(1.25);
}
100% {
transform: scale(1);
}
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<h1>Device</h1>
<div class="wrap">
<ul>
<li><i class="fa fa-apple"></i></li>
<li><i class="fa fa-android"></i></li>
</ul>
</div>

There is a reason semantic HTML is a thing - there is an element that does this natively - the input type="radio".
<h1>Device</h1>
<div class="wrap">
<label>
<input type="radio" class="myRadio" name="myRadio"/>
<i class="fa fa-apple"></i>
<div class="borderOverlay"></div>
</label>
<label>
<input type="radio" class="myRadio" name="myRadio"/>
<i class="fa fa-android"></i>
<div class="borderOverlay"></div>
</label>
</div>
We place them within a label, so clicking anywhere within the label triggers the radio.
When a radio is pressed, all other radios with the same 'name' will be updated.
This will also accept input from space/enter not only click (as do <button> elements). Simply adding an 'click' eventListener will also apply for these keys.
And are also focusable by keyboard navigation (using the Tab Key), which is quite important but gets omitted way too much.
You can easily hide the actual buttons:
.wrap > label{
position: relative;
}
.myRadio {
position: absolute;
opacity: 0;
z-index: -1;
}
And also style them directly with pure CSS:
.myRadio:checked ~ .borderOverlay {
/* rules for showing borderOverlay animation */
}
And loop them when a change occurs:
var radioButtons = Array.from(document.getElementsByClassName('myRadio'));
radioButtons.map(function(radio){
radio.addEventListener('change', function(e){
var selectedTarget = radioButtons.filter(btn => btn.checked)[0];
// do something with **selectedTarget**
};
});

Clicking on an element is triggering all the same class instead of the one clicked on

I am creating a sort-of popup menu that is specific to each .smallCatalogBlock div. The circle you see under the title is the trigger. The issue I am having is that if you click on the blue circle, both popup menus fadeIn, when it should only be that specific one.
The same applies to the popup title. It uses only the first .smallCatalogBlock information, opposed to the one clicked on.
Does anyone know how I can leave this in the dynamic setup I am going for, while populating the specific information for the one clicked on?
var catalogName = $('.smallCatalogBlock').data('fill-specs');
//Filling Circle
$('.catalogSmallCircle').html(
'<div class="catalogSmallCircleIn" data-catalog-name=' + catalogName + '><div class="total-center"><div class="circlePlus"></div></div></div><div class="catalogCircleExpand"><div class="catalogExpandClose">x</div><div class="total-center expandText"><span class="catalogName pdfSubHeader"></span><p class="dGw circleExpandText"></p><button class="catalogDownload downloadButton" name="Profile_Catalog" data-catalog-now="Profile Small Catalog Button" data-catalog-view-name="Profile Catalog">View</button><button class="catalogDownload requestButton" data-catalog-name="Profile Catalog">Request</button></div></div>'
)
//Circle Expand
$('.catalogSmallCircleIn').on('click', function() {
// old $('.catalogSmallCircle').addClass('rectangle').find('.catalogSmallCircleIn').hide();
$(this).closest('.catalogSmallCircle').addClass('rectangle').find('.catalogSmallCircleIn').hide();
// old $('.catalogCircleExpand').fadeIn(100).addClass('rectangle');
//$(this).closest('.catalogCircleExpand').fadeIn(100).addClass('rectangle');
$('.catalogCircleExpand').fadeIn(100).addClass('rectangle');
//Getting Catalog Name
let catalogChoice = $(this).data('catalog-name');
$('.catalogName').html(catalogChoice);
event.stopPropagation();
});
//Close Circle
$('.catalogExpandClose').on('click', function(event) {
$('.catalogSmallCircle').removeClass('rectangle').find('.catalogSmallCircleIn').fadeIn();
$('.catalogCircleExpand').hide().removeClass('rectangle');
});
.smallCatalogWrap {
width: 100%;
height: auto;
margin: 60px 0;
}
.smallCatalogBlock {
width: 25%;
height: auto;
display: inline-block;
vertical-align: top;
margin: 20px auto;
text-decoration: none;
}
.smallCatalogTitle {
font-family: 'Nunito', sans-serif;
color: #4d4d4d;
font-size: 1.3rem;
text-align: center;
display: block;
font-weight: 400;
}
.smallCatalogButtonWrap {
margin-top: 15px;
width: 100%;
position: relative;
}
.catalogSmallCircle {
background: #225DB8;
width: 70px;
height: 70px;
position: absolute;
margin: 10px auto;
left: 90%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
border-radius: 100%;
box-shadow: 0 0 20px rgba(0, 0, 0, .9);
border: 2px solid #FFF;
webkit-transition: all 1s;
transition: all 1s;
cursor: pointer;
}
.catalogSmallCircle.rectangle {
border-radius: 0;
border: 2px solid #094765;
background: linear-gradient(to bottom right, #225DB8, #4174C2);
width: 400px;
min-height: 200px;
webkit-transition: all 1s;
transition: all 1s;
transform: translate(-45%, -45%);
-webkit-transform: translate(-45%, -45%);
z-index: 1;
cursor: auto;
}
.catalogSmallCircleIn {
width: 100%;
height: 100%;
position: relative;
}
.circlePlus {
background-size: 30px 30px;
width: 30px;
height: 30px;
display: block;
margin: 0 auto;
z-index: 1;
}
.catalogCircleExpand {
height: 0;
display: none;
opacity: 0;
webkit-transition: all .5s;
transition: all .5s;
}
.catalogCircleExpand.rectangle {
opacity: 1;
height: auto;
webkit-transition: all .5s;
transition: all .5s;
transition-delay: .4s;
-webkit-transition-delay: .4s;
padding: 10px 0;
}
.expandText .catalogDownload {
font-size: 1.1rem;
padding: .7em 1.1em;
}
.expandText .pdfSubHeader {
font-size: 1.1rem;
}
.catalogExpandClose {
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="smallCatalogWrap">
<div class="smallCatalogBlock" data-fill-specs="Catalog">
<span class="smallCatalogTitle">Catalog</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div>
<div class="smallCatalogBlock" data-fill-specs="Technology">
<span class="smallCatalogTitle">Technology</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div>
</div>

You have to loop over the smallCatalogBlocks and build them individually, otherwise they will all have the same catalog name. And then in your event handlers, you have to make all your selectors be contextual lookups.
I ran the modified code, and it appears to be building the circles correctly, however for some reason the text is not showing up on them, even though the text is there if you inspect the element. Didn't figure that part out, but this should show you at least how to do the contextual logic and the looping to build the elements.
$('.smallCatalogBlock').each(function(index, catalogBlock){
var catalogName = $(catalogBlock).data('fill-specs');
console.log(catalogName);
//Filling Circle
$('.catalogSmallCircle', catalogBlock).html(
'<div class="catalogSmallCircleIn" data-catalog-name='+ catalogName +'><div class="total-center"><div class="circlePlus"></div></div></div><div class="catalogCircleExpand"><div class="catalogExpandClose">x</div><div class="total-center expandText"><span class="catalogName pdfSubHeader"></span><p class="dGw circleExpandText"></p><button class="catalogDownload downloadButton" name="Profile_Catalog" data-catalog-now="Profile Small Catalog Button" data-catalog-view-name="Profile Catalog">View</button><button class="catalogDownload requestButton" data-catalog-name="Profile Catalog">Request</button></div></div>'
)
});
//Circle Expand
$('.catalogSmallCircleIn').on('click', function(event) {
var $smallCircle = $(this).closest('.catalogSmallCircle');
$smallCircle
.addClass('rectangle')
.find('.catalogSmallCircleIn')
.hide();
$smallCircle
.find('.catalogCircleExpand')
.fadeIn(100)
.addClass('rectangle');
//Getting Catalog Name
let catalogChoice = $(this).data('catalog-name');
console.log(catalogChoice);
$smallCircle.find('.catalogName').html(catalogChoice);
event.stopPropagation();
});
//Close Circle
$('.catalogExpandClose').on('click', function(event) {
var $smallCircle = $(this).closest('.catalogSmallCircle');
$smallCircle
.removeClass('rectangle')
.find('.catalogSmallCircleIn')
.fadeIn();
$smallCircle
.find('.catalogCircleExpand')
.hide()
.removeClass('rectangle');
});
.smallCatalogWrap {
width: 100%;
height: auto;
margin: 60px 0;
}
.smallCatalogBlock {
width: 25%;
height: auto;
display: inline-block;
vertical-align: top;
margin: 20px auto;
text-decoration: none;
}
.smallCatalogTitle {
font-family: 'Nunito', sans-serif;
color: #4d4d4d;
font-size: 1.3rem;
text-align: center;
display: block;
font-weight: 400;
}
.smallCatalogButtonWrap {
margin-top: 15px;
width: 100%;
position: relative;
}
.catalogSmallCircle {
background: #225DB8;
width: 70px;
height: 70px;
position: absolute;
margin: 10px auto;
left: 90%;
-webkit-transform: translateX(-50%);transform: translateX(-50%);
border-radius: 100%;
box-shadow: 0 0 20px rgba(0,0,0,.9);
border: 2px solid #FFF;
webkit-transition: all 1s;transition: all 1s;
cursor: pointer;
}
.catalogSmallCircle.rectangle {
border-radius: 0;
border: 2px solid #094765;
background: linear-gradient(to bottom right,#225DB8,#4174C2);
width: 400px;
min-height: 200px;
webkit-transition: all 1s; transition: all 1s;transform: translate(-45%, -45%);-webkit-transform: translate(-45%, -45%);
z-index: 1;
cursor: auto;
}
.catalogSmallCircleIn {
width: 100%;
height: 100%;
position: relative;
}
.circlePlus {
background-size: 30px 30px;
width: 30px;
height: 30px;
display: block;
margin: 0 auto;
z-index: 1;
}
.catalogCircleExpand {
height: 0;
display: none;
opacity: 0;
webkit-transition: all .5s;
transition: all .5s;
}
.catalogCircleExpand.rectangle {
opacity: 1;
height: auto;
webkit-transition: all .5s;
transition: all .5s;
transition-delay: .4s;
-webkit-transition-delay: .4s;
padding: 10px 0;
}
.expandText .catalogDownload {
font-size: 1.1rem;
padding: .7em 1.1em;
}
.expandText .pdfSubHeader {
font-size: 1.1rem;
}
.catalogExpandClose {
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="smallCatalogWrap">
<div class="smallCatalogBlock" data-fill-specs="Catalog">
<span class="smallCatalogTitle">Catalog</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div><div class="smallCatalogBlock" data-fill-specs="Technology">
<span class="smallCatalogTitle">Technology</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div>
</div>

Why scroll event fires along with focus

When I was working with focus event and scroll event I saw when I focus an element by TAB key from keyboard at the same time scroll event which I bind with window also gets fired. To accomplish my requirement I have to stop firing scroll event when i focus with TAB key.
Can anyone help me out ?
Thanks in advance for any type of suggestion regarding this issue.
The code snippet is given below :
function toggleSection() {
var elm = document.getElementById("support-bar");
if(elm.style.right === "") {
elm.style.right = "0";
} else {
elm.style.right = "";
}
}
function expandIfNot() {
console.log('Focussed');
var elm = document.getElementById("support-bar");
if(elm.style.right === "") {
elm.style.right = "0";
}
}
document.addEventListener("scroll", function(){
console.log('Scrolled New');
var elm = document.getElementById("support-bar");
elm.style.right = "";
});
body {
height: 100vh;
overflow-y: visible;
overflow-x: hidden;
}
div.container {
width: 100%;
height: 100%;
}
header, footer {
padding: 1em;
color: white;
background-color: black;
clear: left;
text-align: center;
}
footer {
position: absolute;
bottom : 0;
width:100%;
}
#support-bar {
display: table;
overflow: hidden;
position: absolute;
top: 50%;
right:-330px;
transition: margin-left ease 0.2s;
}
#support-bar-toggle {
position: relative;
box-sizing: content-box;
display: inline-block;
height: 100%;
width: 35px;
line-height: 35px;
margin-right: -1px;
padding: 25px 0;
color: white;
text-transform: uppercase;
background: #42b4e6;
border: 0;
cursor: pointer;
z-index: 0;
}
#support-bar-toggle > span {
display: inline-block;
color: #fff;
white-space: nowrap;
font-size: 16px;
text-transform: uppercase;
font-weight: normal;
-webkit-transform: translate(0, 100%) rotate(-90deg);
-ms-transform: translate(0, 100%) rotate(-90deg);
transform: translate(0, 100%) rotate(-90deg);
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
}
#support-bar-toggle > span:after {
content: "";
float: left;
margin-top: 100%;
}
#support-bar-icons {
display: table-cell;
vertical-align: middle;
position: relative;
z-index: 1;
}
#support-bar-icons ul {
display: table;
padding: 0;
margin: 0;
}
#support-bar-icons li {
display: table-cell;
width: 110px;
text-align: center;
text-transform: uppercase;
color: #333333;
line-height: 1.5em;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="container">
<header>
<h1>Test Gallery</h1>
</header>
<br/>
<label>Test Label</label>
<input type="text"></input>
<button name="button">Click Me</button>
<div id="support-bar">
<div id="support-bar-toggle" onclick="toggleSection()">
<span>
<span>Google Apps</span>
</span>
</div>
<div id="support-bar-icons">
<ul>
<li>Email</li>
<li>Drive</li>
<li>YouTube</li>
</ul>
</div>
</div>
<footer>Copyright © </footer>
</div>
</body>
</html>

Categories