I have a multiple divs each has its own position. what I want is to toggle each div when a text inside the div is clicked I am new in Javascript so please bear with me. I know how to do it by just toggling one div like i did below.
var para = document.querySelectorAll('.wrap div p');
for (var i = 0; i < para.length; i++) {
para[i].addEventListener('click', expand);
}
function expand(e) {
if ((e.target === para[2]) && (document.querySelector('.wrap #three').style.width === '15%')) {
document.querySelector('.wrap #three').style.width = '100%';
}else{
document.querySelector('.wrap #three').style.width = '15%';
}
}
I also tried using if else statement but it just expands the div I couldn't shrink it back to its position.. I know there is an easy way to achieve this but I couldn't figure out.
var para = document.querySelectorAll('.wrap div p');
for (var i = 0; i < para.length; i++) {
para[i].addEventListener('click', expand);
}
function expand(e) {
if (e.target === para[0]) {
document.querySelector('.wrap #one').style.width = '100%';
} else if (e.target === para[1]) {
document.querySelector('.wrap #two').style.width = '100%';
} else if (e.target === para[2]) {
document.querySelector('.wrap #three').style.width = '100%';
} else if (e.target === para[3]) {
document.querySelector('.wrap #four').style.width = '100%';
} else if (e.target === para[4]) {
document.querySelector('.wrap #five').style.width = '100%';
} else if (e.target === para[5]) {
document.querySelector('.wrap #six').style.width = '100%';
} else if (e.target === para[6]) {
document.querySelector('.wrap #seven').style.width = '100%';
}
}
.wrap {
position: relative;
width: 100%;
height: 100vh;
background: white;
display: flex;
flex-direction: row;
}
.wrap div {
position: relative;
height: 100%;
overflow: hidden;
background: #fdfdfd;
transition: 0.2s ease-in;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.7);
}
.wrap div:before {
content: '';
position: absolute;
width: 250px;
height: 250px;
right: -150px;
top: 27%;
background: red;
border-radius: 50%;
cursor: pointer;
}
.wrap p {
position: absolute;
top: 40%;
cursor: pointer;
transform: rotate(-90deg);
font-size: 25px;
font-weight: bold;
color: white;
font-family: 'Halvetica', sans-serif;
}
.wrap #one {
position: absolute;
width: 21%;
}
.wrap #one:before {
background: #FF1D55;
}
.wrap #one p {
right: -8px;
}
.wrap #two {
position: absolute;
width: 18%;
}
.wrap #two:before {
background: #FFE31A;
}
.wrap #two p {
right: -23px;
}
.wrap #three {
position: absolute;
width: 15%;
}
.wrap #three:before {
background: #00E2AA;
}
.wrap #three p {
right: 2px;
}
.wrap #four {
position: absolute;
width: 12%;
}
.wrap #four:before {
background: #B90CB4;
}
.wrap #four p {
right: -13px;
}
.wrap #five {
position: absolute;
width: 9%;
}
.wrap #five:before {
background: #FF3400;
}
.wrap #five p {
right: -5px;
}
.wrap #six {
position: absolute;
width: 6%;
}
.wrap #six:before {
background: #30B7E2;
}
.wrap #six p {
right: -18px;
}
.wrap #seven {
position: absolute;
width: 3%;
}
.wrap #seven:before {
background: #220054;
}
.wrap #seven p {
right: -12px;
}
<div class="wrap">
<div id="one">
<p>About</p>
</div>
<div id="two">
<p>Services</p>
</div>
<div id="three">
<p>Blog</p>
</div>
<div id="four">
<p>Follow</p>
</div>
<div id="five">
<p>Team</p>
</div>
<div id="six">
<p>Contact</p>
</div>
<div id="seven">
<p>History</p>
</div>
</div>
I hope I explain everything clearly. any help would be greatly appreciated
Use classList.add/remove instead of adding inline style through javascript.
In your code you are attaching event to p which occupy a very small area, I have added a class p so that it's background can be visible and it will be easy to click.
Also you dont need to target each element and add class to it.
In this example get the target element and it's parent and toggle class
var para = document.querySelectorAll('.wrap div p');
for (let i = 0; i < para.length; i++) {
para[i].addEventListener('click', expand);
}
function expand(e) {
if (e.target.parentNode.classList.contains('fullWidth')) {
e.target.parentNode.classList.remove('fullWidth')
} else {
e.target.parentNode.classList.add('fullWidth')
}
}
.wrap {
position: relative;
width: 100%;
height: 100vh;
background: white;
display: flex;
flex-direction: row;
}
.wrap div {
position: relative;
height: 100%;
overflow: hidden;
background: #fdfdfd;
transition: 0.2s ease-in;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.7);
}
.wrap div:before {
content: '';
position: absolute;
width: 250px;
height: 250px;
right: -150px;
top: 27%;
background: red;
border-radius: 50%;
cursor: pointer;
}
.wrap p {
position: absolute;
top: 40%;
cursor: pointer;
transform: rotate(-90deg);
font-size: 25px;
font-weight: bold;
color: white;
font-family: 'Halvetica', sans-serif;
}
.wrap #one {
position: absolute;
width: 21%;
}
.wrap #one:before {
background: #FF1D55;
}
.wrap #one p {
right: -8px;
}
.wrap #two {
position: absolute;
width: 18%;
}
.wrap #two:before {
background: #FFE31A;
}
.wrap #two p {
right: -23px;
}
.wrap #three {
position: absolute;
width: 15%;
}
.wrap #three:before {
background: #00E2AA;
}
.wrap #three p {
right: 2px;
}
.wrap #four {
position: absolute;
width: 12%;
}
.wrap #four:before {
background: #B90CB4;
}
.wrap #four p {
right: -13px;
}
.wrap #five {
position: absolute;
width: 9%;
}
.wrap #five:before {
background: #FF3400;
}
.wrap #five p {
right: -5px;
}
.wrap #six {
position: absolute;
width: 6%;
}
.wrap #six:before {
background: #30B7E2;
}
.wrap #six p {
right: -18px;
}
.wrap #seven {
position: absolute;
width: 3%;
}
.wrap #seven:before {
background: #220054;
}
.wrap #seven p {
right: -12px;
}
p {
background: greenyellow
}
.fullWidth {
width: 100% !important;
}
<div class="wrap">
<div id="one">
<p>About</p>
</div>
<div id="two">
<p>Services</p>
</div>
<div id="three">
<p>Blog</p>
</div>
<div id="four">
<p>Follow</p>
</div>
<div id="five">
<p>Team</p>
</div>
<div id="six">
<p>Contact</p>
</div>
<div id="seven">
<p>History</p>
</div>
</div>
Related
I created a modal and I had to do some extra work because ios is a pain with modals and setting overflow: hidden is not enough. The workaround on ios is to set the body to position: fixed when the modal is open and you can also set the top property to however far the page is scrolled like I did in the below example.
The thing that is tripping me up here is that the header should stay as it is wherever the user is on the page. When the body is set to fixed the header thinks that the page is not scrolled and always becomes transparent.
How can we fix the header logic so that when the modal is open, the header class does not change?
let scrollY
window.addEventListener('scroll', e => {
if (window.scrollY > 100) {
document.querySelector('.header').classList.remove('header--is-transparent')
} else {
document.querySelector('.header').classList.add('header--is-transparent')
}
})
const btn = document.querySelector('.btn')
btn.addEventListener('click', openModal)
function openModal() {
scrollY = window.scrollY
document.body.style.position = 'fixed'
document.body.style.overflow = 'hidden'
document.body.style.width = '100%'
document.body.style.top = `-${scrollY}px`
document.querySelector('.main').insertAdjacentHTML('beforeend', `
<div class="modal">
<div class="modal-backdrop"></div>
<div class="modal-content">
<h3>Modal content</h3>
<button class="closeBtn">X</button>
</div>
</div>
`)
}
function closeModal() {
document.body.style.position = ''
document.body.style.overflow = ''
document.body.style.width = ''
document.querySelector('.modal').remove()
}
document.addEventListener('click', e => {
if (e.target.closest('.closeBtn')) {
closeModal()
}
})
.main {
height: 2000px;
width: 100%;
}
.header {
position: fixed;
top: 0;
width: 100%;
height: 50px;
background-color: rgba(255, 255, 255);
opacity: 1;
}
.header.header--is-transparent {
opacity: 0.5;
}
li {
height: 300px;
list-style: none;
}
.li1 {
background: red;
}
.li2 {
background: blue;
}
.li3 {
background: green;
}
.btn {
color: #fff;
background: #000;
height: 60px;
width: 100px;
position: fixed;
bottom: 20px;
left: 20px;
}
.modal {
position: fixed;
top: 0;
right: 0;
height: 100%;
width: 100%;
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
}
.modal-wrapper {
display: flex;
align-items: center;
justify-content: center;
}
.modal-content {
height: 200px;
width: 200px;
background: #fff;
position: absolute;
}
.modal-backdrop {
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
}
<div class="main">
<div class="header header--is-transparent">HEADER</div>
<li class="li1"></li>
<li class="li2"></li>
<li class="li3"></li>
<button class="btn">open modal</button>
</div>
Just check if the body position is fixed when adding the transparent class, I would suggest to check out https://developer.mozilla.org/en-US/docs/Web/CSS/:modal the :modal property and how to set up your dialog so you can use it
let scrollY
window.addEventListener('scroll', e => {
if (window.scrollY > 100 || document.body.style.position == "fixed") {
document.querySelector('.header').classList.remove('header--is-transparent')
} else {
document.querySelector('.header').classList.add('header--is-transparent')
}
})
const btn = document.querySelector('.btn')
btn.addEventListener('click', openModal)
function openModal() {
scrollY = window.scrollY
document.body.style.position = 'fixed'
document.body.style.overflow = 'hidden'
document.body.style.width = '100%'
document.body.style.top = `-${scrollY}px`
document.querySelector('.main').insertAdjacentHTML('beforeend', `
<div class="modal">
<div class="modal-backdrop"></div>
<div class="modal-content">
<h3>Modal content</h3>
<button class="closeBtn">X</button>
</div>
</div>
`)
}
function closeModal() {
document.body.style.position = ''
document.body.style.overflow = ''
document.body.style.width = ''
document.querySelector('.modal').remove()
}
document.addEventListener('click', e => {
if (e.target.closest('.closeBtn')) {
closeModal()
}
})
.main {
height: 2000px;
width: 100%;
}
.header {
position: fixed;
top: 0;
width: 100%;
height: 50px;
background-color: rgba(255, 255, 255);
opacity: 1;
}
.header.header--is-transparent {
opacity: 0.5;
}
li {
height: 300px;
list-style: none;
}
.li1 {
background: red;
}
.li2 {
background: blue;
}
.li3 {
background: green;
}
.btn {
color: #fff;
background: #000;
height: 60px;
width: 100px;
position: fixed;
bottom: 20px;
left: 20px;
}
.modal {
position: fixed;
top: 0;
right: 0;
height: 100%;
width: 100%;
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
}
.modal-wrapper {
display: flex;
align-items: center;
justify-content: center;
}
.modal-content {
height: 200px;
width: 200px;
background: #fff;
position: absolute;
}
.modal-backdrop {
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
}
<div class="main">
<div class="header header--is-transparent">HEADER</div>
<li class="li1"></li>
<li class="li2"></li>
<li class="li3"></li>
<button class="btn">open modal</button>
</div>
I'm writing a webpage where you have a line of text with a few different letters and when you hover over some a drop down appears and you can click things in the drop down in order to change the letters.
The problem: When the letters are changed the text on the screen moves around making it very hard to read.
Question: Is it possible to disable this feature and have the letters change without moving all the other text around?
function changeU() {
document.getElementById("lang").textContent = "U";
}
function changeOH2() {
document.getElementById("con").textContent = "OH2";
}
function changeOHP() {
document.getElementById("con").textContent = "OHP";
}
function changeOH1() {
document.getElementById("con").textContent = "OH1";
}
function changeNCG() {
document.getElementById("con").textContent = "NCG";
}
function changeNC5() {
document.getElementById("con").textContent = "NC5";
}
function changeC73() {
document.getElementById("con").textContent = "C73";
}
function changeCLI() {
document.getElementById("con").textContent = "CLI";
}
function changeCSA() {
document.getElementById("con").textContent = "CSA";
}
function changeAMI() {
document.getElementById("con").textContent = "AMI";
}
function changeBSB() {
document.getElementById("con").textContent = "BSB";
}
function changeDIS() {
document.getElementById("con").textContent = "DIS";
}
function changeQ() {
document.getElementById("x").textContent = "Q";
}
function changeD() {
document.getElementById("x").textContent = "D";
}
function changeO2() {
document.getElementById("g").textContent = "O";
}
function changeA() {
document.getElementById("g").textContent = "A";
}
function changeV() {
document.getElementById("g").textContent = "V";
}
function change2() {
document.getElementById("g").textContent = "2";
}
function changeC2() {
document.getElementById("g").textContent = "C";
}
body {
background-color: lightgray;
font-size: 20px;
}
.dropbtn {
position: relative;
background-color: lightgray;
color: black;
top: 1px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
position: relative;
display: none;
position: absolute;
top: 195px;
left: 645px;
z-index: 1;
}
.dropdown-content a {
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {}
.dropbtn2 {
position: relative;
background-color: lightgray;
color: black;
top: 1px;
font-size: 16px;
border: none;
}
.dropdown2 {
position: relative;
display: inline-block;
}
.dropdown-content2 {
position: relative;
display: none;
position: absolute;
top: 195px;
left: 700px;
z-index: 1;
}
.dropdown-content2 a {
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown2:hover .dropdown-content2 {
display: block;
}
.dropdown2:hover .dropbtn2 {}
.dropbtn3 {
position: relative;
background-color: lightgray;
color: black;
top: 1px;
font-size: 16px;
border: none;
}
.dropdown3 {
position: relative;
display: inline-block;
}
.dropdown-content3 {
position: relative;
display: none;
position: absolute;
top: 195px;
left: 632px;
z-index: 1;
}
.dropdown-content3 a {
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown3:hover .dropdown-content3 {
display: block;
}
.dropdown3:hover .dropbtn3 {}
.dropbtn4 {
position: relative;
background-color: lightgray;
color: black;
top: 1px;
font-size: 16px;
border: none;
}
.dropdown4 {
position: relative;
display: inline-block;
}
.dropdown-content4 {
display: none;
position: absolute;
top: 195px;
left: 696px;
}
.dropdown-content4 a {
text-decoration: none;
display: block;
}
.dropdown4:hover .dropdown-content4 {
display: block;
}
.dropdown4:hover .dropbtn4 {}
#code {
position: relative;
top: 300px;
left: 600px;
}
#lang {
position: relative;
top: 125px;
left: 655px;
font-size: 38px;
}
#con {
position: relative;
top: 125px;
left: 700px;
font-size: 38px;
}
#x {
position: relative;
top: 125px;
left: 632px;
font-size: 38px;
}
#g {
position: relative;
top: 125px;
left: 696px;
font-size: 38px;
}
#hl {
position: relative;
top: 229px;
left: 1025px;
font-size: 38px;
}
.square {
position: relative;
border: solid 5px #000;
width: 300px;
height: 200px;
float: right;
top: 500px;
}
.language {
position: absolute;
top: 650px;
left: 50px;
}
.coninfo {
position: absolute;
top: 650px;
left: 200px;
}
[contenteditable] {
outline: 0px solid transparent;
}
.xinfo {
position: absolute;
top: 650px;
left: 520px;
}
.ginfo {
position: absolute;
top: 650px;
left: 780px;
}
.save {
position: absolute;
left: 1px;
top: 1px;
font-size: 30px;
}
<h1 id="code">NL⠀⠀-⠀⠀⠀⠀⠀⠀⠀-⠀⠀⠀-</h1>
<h1 id="hl" contenteditable="true">HLHLHL</h1>
<div class="dropdown">
<button class="dropbtn"><h1 id="lang">L</h1></button>
<div class="dropdown-content">
<button id="U" onclick="changeU()">U=NFPA (USA)</button>
</div>
</div>
<div class="dropdown2">
<button class="dropbtn2"><h1 id="con">CON⠀C</h1></button>
<div class="dropdown-content2">
<button id="OH2" onclick="changeOH2()">Diamond 2/3/Diamond Care</button>
<button id="OHP" onclick="changeOHP()">Diamond 2/3/DC-Plug & Play</button>
<button id="OH1" onclick="changeOH1()">Diamond 1</button>
<button id="NCG" onclick="changeNCG()">Chemetron 400</button>
<button id="NC5" onclick="changeNC5()">Chemetron 500</button>
<button id="C73" onclick="changeC73()">Series 73</button>
<button id="CLI" onclick="changeCLI()">Litharge Series</button>
<button id="CSA" onclick="changeCSA()">Series A</button>
<button id="AMI" onclick="changeAMI()">Amico</button>
<button id="BSB" onclick="changeBSB()">Beacon Series B</button>
<button id="DIS" onclick="changeDIS()">D.I.S.S</button>
</div>
</div>
<div class="dropdown3">
<button class="dropbtn3"><h1 id="x">X</h1></button>
<div class="dropdown-content3">
<button id="Q" onclick="changeQ()">Ohmeda</button>
<button id="D" onclick="changeD()">DISS</button>
</div>
</div>
<div class="dropdown4">
<button class="dropbtn4"><h1 id="g">G</h1></button>
<div class="dropdown-content4">
<button id="O2" onclick="changeO2()">OXY</button>
<button id="A" onclick="changeA()">MEDICAL AIR</button>
<button id="V" onclick="changeV()">VAC (2 PORT ONLY)</button>
<button id="2" onclick="change2()">N20</button>
<button id="C2" onclick="changeC2()">CO2</button>
</div>
</div>
<p class="square"><br><br>Note: Conversation tool requirement <br> O-VC-OH1-TOOL for OH1, NCG <br> O-CPB-TOOLKIT for C73</p>
<p class="language">L=Language<br>U=NFPA(USA)
<p class="coninfo">CON = Conversion Type<br>OH2 = Diamond 2/3/Diamond Care<br>OHP = Diamond 2/3/DC-Plug & Play<br>OH1 = Diamond 1<br>NCG = Chemetron 400<br>NC5 = Chemetron 500<br>C73 = Series 73<br>CLI = Litharge Series<br>CSA = Series A<br>AMI = Amico<br>BSB = Beacon
Series B<br>DIS = D.I.S.S</p>
<p class="xinfo">X = Front Connection Type<br>Q = Ohmeda<br>D = DISS
<p class="ginfo">G = Gas<br>O = OXY<br>A = MEDICAL AIR<br>V = VAC(2 PORT ONLY)<br>2 = N2O<br>C = CO2</p>
<button class="save" onclick="window.print()">Save</button>
I would like to add inline CSS to the left and right messages that are generated, for example the left text is red and the right text is blue. (I know it's best to style in the CSS, but I'm testing something else). So I will have this HTML:
<ul class="messages">
<li class="message left appeared">
<div class="text_wrapper">
<p class="text" style="color:red;">blabla</p>
</div>
</li>
<li class="message right appeared">
<div class="text_wrapper">
<p class="text" style="color:blue;">blabla</p>
</div>
</li>
</ul>
Please see the code as reference for the functionality. Many thanks for your help.
(function() {
var Message;
Message = function({
text: text1,
message_side: message_side1
}) {
this.text = text1;
this.message_side = message_side1;
this.draw = () => {
var $message;
$message = $($('.message_template').clone().html());
$message.addClass(this.message_side).find('.text').html(this.text);
$('.messages').append($message);
return setTimeout(function() {
return $message.addClass('appeared');
}, 0);
};
return this;
};
$(function() {
var getMessageText, message_side, sendMessage;
message_side = 'right';
getMessageText = function() {
var $message_input;
$message_input = $('.message_input');
return $message_input.val();
};
sendMessage = function(text) {
var $messages, message;
if (text.trim() === '') {
return;
}
$('.message_input').val('');
$messages = $('.messages');
message_side = message_side === 'left' ? 'right' : 'left';
message = new Message({text, message_side});
message.draw();
return $messages.animate({
scrollTop: $messages.prop('scrollHeight')
}, 300);
};
$('.send_message').click(function(e) {
return sendMessage(getMessageText());
});
$('.message_input').keyup(function(e) {
if (e.which === 13) { // enter key
return sendMessage(getMessageText());
}
});
});
}).call(this);
* {
box-sizing: border-box;
}
.chat_window {
position: absolute;
width: calc(100% - 20px);
max-width: 600px;
height: 440px;
background-color: #fff;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
border: 1px solid #ddd;
overflow: hidden;
}
.messages {
position: relative;
list-style: none;
padding: 20px 10px 0 10px;
margin: 0;
height: 347px;
overflow: scroll;
}
.messages .message {
clear: both;
overflow: hidden;
margin-bottom: 20px;
transition: all 0.5s linear;
opacity: 0;
}
.messages .message.left .text_wrapper {
background-color: #ddd;
margin-left: 20px;
}
.messages .message.left .text_wrapper::after, .messages .message.left .text_wrapper::before {
right: 100%;
border-right-color: #ddd;
}
.messages .message.left .text,
.messages .message.right .text {
color: #000;
margin: 0;
}
.messages .message.right .text_wrapper {
background-color: #ddd;
margin-right: 20px;
float: right;
}
.messages .message.right .text_wrapper::after, .messages .message.right .text_wrapper::before {
left: 100%;
border-left-color: #ddd;
}
.messages .message.appeared {
opacity: 1;
}
.messages .message .text_wrapper {
display: inline-block;
padding: 20px;
width: calc(100% - 85px);
min-width: 100px;
position: relative;
}
.messages .message .text_wrapper::after, .messages .message .text_wrapper:before {
top: 18px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.messages .message .text_wrapper::after {
border-width: 13px;
margin-top: 0px;
}
.messages .message .text_wrapper::before {
border-width: 15px;
margin-top: -2px;
}
.messages .message .text_wrapper .text {
font-size: 18px;
font-weight: 300;
}
.bottom_wrapper {
position: relative;
width: 100%;
background-color: #fff;
padding: 20px 20px;
position: absolute;
bottom: 0;
}
.bottom_wrapper .message_input_wrapper {
display: inline-block;
height: 50px;
border: 1px solid #bcbdc0;
width: calc(100% - 160px);
position: relative;
padding: 0 20px;
}
.bottom_wrapper .message_input_wrapper .message_input {
border: none;
height: 100%;
box-sizing: border-box;
width: calc(100% - 40px);
position: absolute;
outline-width: 0;
color: gray;
}
.bottom_wrapper .send_message {
width: 140px;
height: 50px;
display: inline-block;
background-color: #ddd;
border: 2px solid #ddd;
color: #000;
cursor: pointer;
transition: all 0.2s linear;
text-align: center;
float: right;
}
.bottom_wrapper .send_message:hover {
color: #000;
background-color: #fff;
}
.bottom_wrapper .send_message .text {
font-size: 18px;
font-weight: 300;
display: inline-block;
line-height: 48px;
}
.message_template {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chat_window">
<ul class="messages"></ul>
<div class="bottom_wrapper clearfix">
<div class="message_input_wrapper">
<input class="message_input" placeholder="Type here..." />
</div>
<div class="send_message">
<div class="icon"></div>
<div class="text">
Send
</div>
</div>
</div>
</div>
<div class="message_template">
<li class="message">
<div class="text_wrapper">
<p class="text"></p>
</div>
</li>
</div>
You can also add:
$(".left").css("color", "yellow");
$(".right").css("color", "blue");
$("li.message.left > div.text_wrapper > p").css('color', 'red');
$("li.message.right > div.text_wrapper > p").css('color', 'blue');
Using jQuery you can add inline style to an element
$(".left").attr("style","whatever");
$(".right").attr("style","whatever");
You can use the classList of every HTML component. Simply, select the DOM element with class left (or right) and use the add method to assign whatever class:
var elementLeft = $('.left')
elementLeft.classList.add('yourClass')
You can also use the methods remove to remove any class, or toggle to toggle some class..
elementLeft.classList.remove('yourClass')
elementLeft.classList.toggle('yourClass')
The Element.classList contains more examples. This solution works without jQuery or others javascript library, but use the standard API.
Here, I have a very small module. In which I have a timeline and slideshow.
In my timeline, Everything works fine. But when I going to the slideshow.
It also works fine using on click function on the class name.
But I want to use bind and unbind function on next and previous button click.
Here, is my code please review it and help will be appreaciated.
var divSlide = document.querySelectorAll('#slide');
var myNodeList = divSlide.length;
let slideNo = 1;
for(var i = 0; i < myNodeList; i++) {
var type = divSlide[i].getAttribute("type");
if (type == "timeline") {
} else if (type == "slideshow") {
var timeline = divSlide[i];
let sliderData = timeline.getElementsByTagName("section");
$("[type=slideshow] section").addClass('hide');
$("[type=slideshow]").each( function(i,ele){
$(ele).children("section:first").removeClass("hide").addClass('active');
});
timeline.insertAdjacentHTML("afterbegin",'<a class="left uc_prev color_arrow carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span><span class="sr-only">Previous</span></a>');
timeline.insertAdjacentHTML('afterbegin','<a class="right uc_next color_arrows carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span><span class="sr-only">Next</span></a>');
}
}
$(document).on ('click','.uc_prev',function() {
let select = $(this).parent();
let totChild = select.children("section");
for(let i=0;i<totChild.length;i++){
if(totChild[i].getAttribute('class').indexOf('active')!=-1){
slideNo=i+1;
}
}
totChild.children('br').remove();
let current = select.children('.active');
let prevEl = current.prev('section');
if(slideNo === totChild.length || slideNo > 1){
select.children(".next").show();
if(prevEl.length !== 1){
prevEl = current.prev().prev();
current.removeClass('active');
current.addClass('hide');
prevEl.addClass('active');
prevEl.addClass('animated');
prevEl.addClass('fadeInLeft');
prevEl.removeClass('hide');
}
} else {
select.children(".prev").hide();
}
});
$(document).on ('click','.uc_next',function() {
let select = $(this).parent();
let totChild = select.children("section");
for(let i=0;i<totChild.length;i++){
if(totChild[i].getAttribute('class').indexOf('active')!=-1){
slideNo=i+1;
}
}
totChild.children('br').remove();
let current = select.children('.active');
let prevEl = current.next('section');
if(slideNo ===1 || slideNo < totChild.length){
select.children(".prev").show();
if(prevEl.length !== 1){
prevEl = current.next().next();
current.removeClass('active');
current.addClass('hide');
prevEl.addClass('animated');
prevEl.addClass('fadeInRight');
prevEl.addClass('active');
prevEl.removeClass('hide');
}
} else {
select.children(".next").hide();
}
});
}
div[type="slideshow"] {
height:471px;
position: relative;
top: 100px;
}
div[type="slideshow"] > section:not(.hide) {
margin: auto;
width: 900px;
max-height: 265px;
z-index: 100;
border-top: 1px solid grey;
border-left: 4px solid #00BCD4;
min-height:250px;
background-color: #b3e5fc2b;
border-radius: 4px;
margin-bottom: 55px;
position: absolute;
overflow-x: hidden;
top: 21.4%;
left: 168px;
box-shadow: rgb(136, 136, 136) 3px 3px 1px;
}
div[type="slideshow"] > section:not(.hide) > header {
font-weight: 600;
color: cadetblue;
transform: translate(93px, 32px);
font-size: 34px;
font-family: arial;
position: relative;
word-wrap: break-word;
}
div[type="slideshow"] > section:not(.hide) > article {
transform: translate(87px,39px);
max-width: 800px;
color: black;
font-size: 22px;
font-family: arial;
position: relative;
padding: 10px;
word-wrap: break-word;
}
.active{
opacity: 1 !important;
}
.hide {
opacity: 0;
min-height: 0 !important;
margin: 0 !important;
}
.hide header, .hide article {
display: none;
}
#keyframes fadein {
0% { opacity: 0 }
50% { opacity: 0.5 }
100% {opacity: 1}
}
br {
display:none;
}
progress {
height: 4px;
top: 46px;
left: 0px;
width: 100%;
position: fixed;
margin-left: -1px;
margin-top: -1px;
}
.color_arrow {
position: relative;
top: 228px;
color: #085153;
left: 93px;
}
.color_arrows {
position: relative;
top: 228px;
color: #085153;
left: 94% !important;
}
#media only screen and (max-width: 992px) {
div[type="timeline/slideshow"] > section , div[type="timeline"] > section {
width: 650px;
}
.color_arrow {
left: -18px;
}
div[type="slideshow"] > section:not(.hide) {
width: 640px;
left: 14px;
}
.color_arrows {
left: 99% !important;
}
}
#media only screen and (max-width: 992px) {
div[type="slideshow"] > section {
width: 650px;
}
div[type="slideshow"] > section:not(.hide) {
width: 640px;
left: 18px;
}
}
#media only screen and (min-width: 1201px) and (max-width: 1299px) {
div[type="slideshow"] > section:not(.hide) {
width: 845px;
left: 154px;
}
}
#media only screen and (min-width: 992px) and (max-width: 1200px) {
div[type="slideshow"] > section:not(.hide) {
width: 698px;
left: 136px;
}
}
<div type="slideshow" id="slide"><br />
<section><header>Title One</header><br />
<article>Content</article>
</section>
<br />
<section><header>Title Two</header><br />
<article>Content</article>
</section>
<br />
<section><header>Title Three</header><br />
<article>Content</article>
</section>
<br />
<section><header>Title Four</header><br />
<article>Content</article>
</section>
</div>
I placed a negative z-index property on my image section to prevent it from overlapping the navigation bar, which caused the hyperlinks to not function properly. After I fixed that problem, I realized that my left and right buttons for my slideshow would not work. Any help enabling the buttons to work even with a negative z-index? All the code that I have pasted below is necessary.
HTML
<div id="container">
<header>
<h1><b>Seattle</b>&Metropolitan</h1>
<nav>
<ul>
<li>About</li>
<li>Buildings</li>
<li id="contact">Contact Us</li>
</ul>
</nav>
</header>
</div>
<div class="image-section">
<img src="img/seattleskyline.jpg" alt="Seattle Skyline" id="center-image" />
<div id="caption"><div id="caption-text">A panoramic view of 1201 Third Avenue at night</div></div>
<button id="sliderLeft" onclick="left();"></button>
<button id="sliderRight" onclick="right();"></button>
</div>
<br><br>
<div class="content">
Seattle's history can be traced back to the 1850s, when pioneers and natives started building a great city filled with a diverse culure, beautiful scenery, and a vibrant enviornment. The metropolitan area of Seattle now is a high-tech hub, in which four Fortune 500 companies reside: <b>Amazon.com (#49)</b>, <b>Starbucks (#208)</b>, <b>Nordstrom (#227)</b>, and <b>Expeditors International (#428)</b>.
</div>
CSS
#charset "utf-8";
#container
{
width: 75%;
margin-left: auto;
margin-right: auto;
}
header h1
{
font-size: 38px;
float: left;
font-weight: 100;
}
header nav ul
{
list-style-type: none;
margin: 0;
vertical-align: middle;
line-height: normal;
float: right;
z-index: 999;
}
header nav ul li
{
line-height: 105px;
display: inline;
padding: 45px;
font-size: 22px;
font-weight: 100;
}
header nav ul li a
{
color: black;
text-decoration: none;
}
#center-image
{
width: 100%;
height: 480px;
}
#contact
{
padding-right: 0;
}
.image-section
{
margin-left: auto;
margin-right: auto;
width: 75%;
position: relative;
text-align: center;
}
.image-section #caption
{
position: absolute;
display: none;
bottom: 4px;
width: 100%;
text-align: center;
color: white;
background: #474747;
height: 50px;
line-height: 50px;
opacity: 0.8;
font-size: 20px;
}
.image-section button
{
outline: 0;
}
.image-section #sliderLeft
{
position: absolute;
display: none;
width: 25px;
height: 100px;
top: 50%;
margin-bottom: 50px;
left: 0;
opacity: 0.7;
filter: alpha(opacity=70);
border: 0;
}
.image-section #sliderRight
{
position: absolute;
display: none;
width: 25px;
height: 100px;
top: 50%;
margin-bottom: 50px;
right: 0;
opacity: 0.7;
filter: alpha(opacity=70);
border: 0;
}
JS
var images = ["img/seattleskyline.jpg", "img/spaceneedle.jpg", "img/ferriswheel.jpg"]
var captions = ["A panoramic view of 1201 Third Avenue at night", "The Seattle's landmark Space Needle", "The Iconic Great Wheel"]
var index = 0;
function left() {
index -= 2;
if (index < 0) {
index = images.length;
}
changeImage();
}
function right() {
changeImage();
}
function changeImage() {
index++;
if (index > images.length - 1) {
index = 0;
}
var targetImage = document.getElementById("center-image");
var caption = document.getElementById("caption-text");
$("#center-image").fadeOut(1000, function() {
targetImage.src = images[index];
$("#center-image").fadeIn(1000);
});
$("#caption-text").fadeOut(1000, function() {
caption.innerHTML = captions[index];
$("#caption-text").fadeIn(1000);
});
}
$(document).ready(function() {
$("#sliderRight").fadeIn(1000);
$("#sliderLeft").fadeIn(1000);
$("#caption").fadeIn(1000);
setInterval(changeImage, 7000);
});
z-index take effect when position is relative or absolute so if you want use it with your css
add position: relative; as following so z-indexs take effect
header nav ul
{
position: relative;
z-index: 9999;
}
.image-section
{
position: relative;
}
.image-section #sliderLeft
{
z-index: 999;
}
.image-section #sliderRight
z-index: 999;
}
Correct CodePen
Change your CSS for header nav ul to :
header nav ul
{
list-style-type: none;
margin: 0;
vertical-align: middle;
line-height: normal;
float: right;
z-index: 999;
position: relative; /* add this */
}
Working jSfiddle