removal of active class from nav tabs - javascript

Well, i tried to create a layout like instagram and faced the following problem. I hope i'll get help from experts in this regard. And i tried various ways to remove the active class after clicking on the nav tab , but everytime there arose a problem. let me know how can i remove the active class from this piece of javascript as attached below.
<div class="menu">
<p data-target="#initial" class="active">Initial</p>
<p data-target="#product">Product</p>
<p data-target="#contact">Contact</p>
</div>
<div class="content">
<div data-content id="initial" class="active">
<div class="cards">
<div class="card">
abc
</div>
<div class="card">
abc
</div>
<div class="card">
abc
</div>
</div>
</div>
<div data-content id="product">
<div class="cards">
<div class="card">
lmn
</div>
<div class="card">
lmn
</div>
<div class="card">
lmn
</div>
</div>
</div>
<div data-content id="contact">
<div class="cards">
<div class="card">
xyz
</div>
<div class="card">
xyz
</div>
<div class="card">
xyz
</div>
</div>
</div>
</div>
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family: Sans-serif;
}
body{
padding: 5%;
}
.menu{
display:flex;
}
.menu p{
margin-right: 2rem;
cursor: pointer;
}
.content{
margin-top:2rem;
}
[data-content]{
display:none;
}
.active[data-content]{
display:block;
}
.menu .active{
text-transform:uppercase;
color:#FFF;
background: #000;
padding: 5px 10px;
margin-top: -5px;
border-radius: 50px;
}
.menu p{
text-transform:uppercase;
}
.cards{
display:flex;
flex:1;
flex-basis: 33.33%;
max-width: 33.33%;
min-width: 33.33%;
height: 100%;
position: relative;
}
.card{
border: 1px solid #ccc;
background: #fff;
}
const targets = document.querySelectorAll('[data-target]');
const content = document.querySelectorAll('[data-content]');
targets.forEach(target => {
target.addEventListener('click',()=>{
content.forEach(c => {
c.classList.remove('active')
})
const t = document.querySelector(target.dataset.target)
t.classList.add('active');
target.classList.add('active');
})
})


Your javascript code is almost working, but there are typos in contents instead content. That typo makes javascript returns an error and the code below doesn't be executed. And you can remove the active class from that tab by targets.forEach(...
const targets = document.querySelectorAll('[data-target]');
const contents = document.querySelectorAll('[data-content]');
targets.forEach(target => {
target.addEventListener('click',()=>{
targets.forEach(t => {
t.classList.remove('active')
})
contents.forEach(c => {
c.classList.remove('active')
})
const t = document.querySelector(target.dataset.target)
t.classList.add('active');
target.classList.add('active');
})
})
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family: Sans-serif;
}
body{
padding: 5%;
}
.menu{
display:flex;
}
.menu p{
margin-right: 2rem;
cursor: pointer;
}
.content{
margin-top:2rem;
}
[data-content]{
display:none;
}
.active[data-content]{
display:block;
}
.menu .active{
text-transform:uppercase;
color:#FFF;
background: #000;
padding: 5px 10px;
margin-top: -5px;
border-radius: 50px;
}
.menu p{
text-transform:uppercase;
}
.cards{
display:flex;
flex:1;
flex-basis: 33.33%;
max-width: 33.33%;
min-width: 33.33%;
height: 100%;
position: relative;
}
.card{
border: 1px solid #ccc;
background: #fff;
}
<div class="menu">
<p data-target="#initial" class="active">Initial</p>
<p data-target="#product">Product</p>
<p data-target="#contact">Contact</p>
</div>
<div class="content">
<div data-content id="initial" class="active">
<div class="cards">
<div class="card">
abc
</div>
<div class="card">
abc
</div>
<div class="card">
abc
</div>
</div>
</div>
<div data-content id="product">
<div class="cards">
<div class="card">
lmn
</div>
<div class="card">
lmn
</div>
<div class="card">
lmn
</div>
</div>
</div>
<div data-content id="contact">
<div class="cards">
<div class="card">
xyz
</div>
<div class="card">
xyz
</div>
<div class="card">
xyz
</div>
</div>
</div>
</div>


You can use classList.remove()
Example:
var element = document.getElementById("targetid");
element.classList.remove("active");
More documentation

Related

addClass/removeClass on click to selected data attr for another div

I try to add/remove -Class with on click event through data-attribute to another div.
When I click to TExt 2 the first FLAF 1 display none; And DOT should change the background. The TExt should be bind with FLAG and DOT elements above.
I've already the selected and active classes.
//plans secetor
var familyTariffSelected = '.boxy';
var builderCheckoutSteP = '.container .box';
var familyTariffSelectedData = $('.builder-tariff-family.selected').attr('data-selected');
var builderCheckoutStePData = $('.builder-checkout-steps .step.active').attr('data-selected');
$(familyTariffSelected).on('click', function() {
$(familyTariffSelected).removeClass('selected');
$(this).addClass('selected');
});
.container{
border: 2px black dotted;
display: flex;
justify-content: space-between;
}
.event-box{
display:flex;
margin: 20px 0;
background-color: gray;
justify-content: space-between;
}
.container .box .flag{
display:none;
}
.container .box .dot{
border: 1px solid green;
color:black;
}
.container .box.active .flag{
display: block;
background-color: green;
color:white;
}
.container .box.active .dot {
background-color: green;
color:white;
}
.boxy {
background-color: yellow;
cursor:pointer;
}
.boxy.selected {
background-color: #64B246;
}
<div class="container">
<div class="box active" data-selected="dalib-1"><p class="flag">FLAG 1</p> <span class=" dot">DOT</span></div>
<div class="box" data-selected="dalib-2"><p class="flag">FLAG 2</p> <span class=" dot">DOT</span></div>
<div class="box" data-selected="dalib-3"><p class="flag">FLAG 3</p> <span class=" dot">DOT</span></div>
<div class="box" data-selected="dalib-4"><p class="flag">FLAG 4</p> <span class=" dot">DOT</span></div>
<div class="box" data-selected="dalib-5"><p class="flag">FLAG 5</p> <span class=" dot">DOT</span></div>
</div>
<div class="event-box">
<div class="boxy" data-selected="dalib-1">TExt 1</div>
<div class="boxy" data-selected="dalib-2">TExt 2</div>
<div class="boxy" data-selected="dalib-3">Text 3</div>
<div class="boxy" data-selected="dalib-4">Text 4</div>
<div class="boxy" data-selected="dalib-5">TExt 5</div>
</div>
<script src="http://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>

It's a lot easier when you don't complicate it?
You have to get the data attribute inside the event handler, and then just target the .box with the same data attribute
$('.boxy').on('click', function() {
$('.boxy').removeClass('selected');
$(this).addClass('selected');
$('.box').removeClass('active')
.filter('[data-selected="' + $(this).data('selected') + '"]')
.addClass('active');
});
.container {
border: 2px black dotted;
display: flex;
justify-content: space-between;
}
.event-box {
display: flex;
margin: 20px 0;
background-color: gray;
justify-content: space-between;
}
.container .box .flag {
display: none;
}
.container .box .dot {
border: 1px solid green;
color: black;
}
.container .box.active .flag {
display: block;
background-color: green;
color: white;
}
.container .box.active .dot {
background-color: green;
color: white;
}
.boxy {
background-color: yellow;
cursor: pointer;
}
.boxy.selected {
background-color: #64B246;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="box active" data-selected="dalib-1">
<p class="flag">FLAG 1</p> <span class=" dot">DOT</span></div>
<div class="box" data-selected="dalib-2">
<p class="flag">FLAG 2</p> <span class=" dot">DOT</span></div>
<div class="box" data-selected="dalib-3">
<p class="flag">FLAG 3</p> <span class=" dot">DOT</span></div>
<div class="box" data-selected="dalib-4">
<p class="flag">FLAG 4</p> <span class=" dot">DOT</span></div>
<div class="box" data-selected="dalib-5">
<p class="flag">FLAG 5</p> <span class=" dot">DOT</span></div>
</div>
<div class="event-box">
<div class="boxy" data-selected="dalib-1">TExt 1</div>
<div class="boxy" data-selected="dalib-2">TExt 2</div>
<div class="boxy" data-selected="dalib-3">Text 3</div>
<div class="boxy" data-selected="dalib-4">Text 4</div>
<div class="boxy" data-selected="dalib-5">TExt 5</div>
</div>

responsive grid using display table and float

DEMO : http://jsfiddle.net/5adjhd1x/2/
How can I make below dialpad responsive? I tried to use width 33% and some JS in demo 1 : http://jsfiddle.net/5adjhd1x/, but I couldn't have margin for them.
.key {
width:40px;
height:40px;
background:red;
float:left;
border-radius:50%;
cursor:pointer;
text-align: center;
display:table;
margin:1%;
}
.key > span {
display:table-cell;
vertical-align:middle;
}
.clearFloat {
clear:both;
}
<div class="keyWrap">
<div class="key"><span>1</span>
</div>
<div class="key"><span>2</span>
</div>
<div class="key"><span>3</span>
</div>
<div class="clearFloat"></div>
<div class="key"><span>4</span>
</div>
<div class="key"><span>5</span>
</div>
<div class="key"><span>6</span>
</div>
<div class="clearFloat"></div>
<div class="key"><span>7</span>
</div>
<div class="key"><span>8</span>
</div>
<div class="key"><span>9</span>
</div>
<div class="clearFloat"></div>
<div class="key"><span>0</span>
</div>
<div class="key dlt"><span>Del</span>
</div>
</div>
<br> <br>
How can I make them to have margin in percentage and responsive?

Answer at here dude:
http://jsfiddle.net/5adjhd1x/6/
Give me a like !
.key {overflow: hidden; display: block; background: grey; padding: 0;}
.key li {width: 32%; margin-right: 2%; margin-bottom: 10px; float: left; display: inline-block; background: red;}
.key li:nth-child(3n) {margin-right: 0%;}

White space and background moves

There is a faq on my website for a school project created with Javascript animations.
The problem is:
1; The background moves when 2 or more faqs are opened.
2; There is a white space beneath the background.
The faq on my website (click for the image)
The javascript
var main = function() {
$('.article').click(function() {
$('.article').removeClass('current');
$('.description').hide();
$(this).addClass('current');
$(this).children('.description').show();
});
$(document).keypress(function(event) {
if(event.which === 111) {
$('.current').children('.description').toggle();
}
else if(event.which === 110) {
var currentArticle = $('.current');
var nextArticle = currentArticle.next();
currentArticle.removeClass('current');
nextArticle.addClass('current');
}
});
};
$(document).ready(main);
The Css
Body {
background: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/black-thread.png');
}
.articles_title {
color:white;
font-size: 250%;
position: fixed;
top: 30px;
right: 50%;
}
p {
margin: 0;
}
.row {
margin: 0;
}
.articles {
margin-top: 16px;
margin-bottom: 16px;
}
.article {
color: #222;
background: rgba(255,255,255,.9);
border-spacing: 2px;
border-color: gray;
font-family: arial,sans-serif;
border-bottom: 1px #e5e5e5 solid;
}
.current .item {
background: rgba(206,220,206,.9);
}
.item {
cursor: pointer;
padding-top: 7px;
padding-bottom: 7px;
}
.item .source {
margin-left: 16px;
}
.item .title {
font-weight: bold;
}
.item .pubdate {
margin-right: 16px;
}
.item .pubdate {
text-align: right;
}
.description {
display: none;
padding-top: 10px;
padding-bottom: 10px;
}
.description h1 {
margin-top: 0px;
font-size: 16px;
}
/* the index.php css */
body {
left: 0;
margin: 0;
overflow: hidden;
position: relative;
}
/* Initial menu */
.menu {
background: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/black-thread.png') repeat left top;
left: -285px; /* start off behind the scenes */
height: 100%;
position: fixed;
width: 285px;
}
/* Basic styling */
.jumbotron {
background-image: url('http://i.imgur.com/JvdPG8h.png?1');
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.menu ul {
border-top: 1px solid #636366;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #636366;
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
}
.icon-menu {
color: #fff;
cursor: pointer;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
padding-bottom: 25px;
padding-left: 25px;
padding-top: 25px;
text-decoration: none;
text-transform: uppercase;
}
.icon-menu i {
margin-right: 5px;
}
The index.php in the faq.php
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="styles/faq.css">
</head>
<body>
<div class="articles container">
<div class="article current">
<div class="item row">
<div class="col-xs-3">
<p class="source">FLIGHT</p>
</div>
<div class="col-xs-6">
<p class="title">Embraer adds third Legacy 500 prototype to flight test campaign</p>
</div>
<div class="col-xs-3">
<p class="pubdate">Mar 23</p>
</div>
</div>
<div class="description row">
<div class="col-xs-3"> </div>
<div class="col-xs-6">
<h1>Embraer adds third Legacy 500 prototype to flight test campaign</h1>
<p>The third Legacy 500 has joined Embraer's flight test programme aimed at delivering the midsize business jet in 2014. The airtcraft, serial number 003...</p>
</div>
<div class="col-xs-3"> </div>
</div>
</div>
<div class="article">
<div class="item row">
<div class="col-xs-3">
<p class="source">AW Commercial Aviation</p>
</div>
<div class="col-xs-6">
<p class="title">CSeries Supplier Scramble</p>
</div>
<div class="col-xs-3">
<p class="pubdate">Mar 22</p>
</div>
</div>
<div class="description row">
<div class="col-xs-3"> </div>
<div class="col-xs-6">
<h1>CSeries Supplier Scramble</h1>
<p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p>
</div>
<div class="col-xs-3"> </div>
</div>
</div>
<div class="article">
<div class="item row">
<div class="col-xs-3">
<p class="source">AW Commercial Aviation</p>
</div>
<div class="col-xs-6">
<p class="title">CSeries Supplier Scramble</p>
</div>
<div class="col-xs-3">
<p class="pubdate">Mar 22</p>
</div>
</div>
<div class="description row">
<div class="col-xs-3"> </div>
<div class="col-xs-6">
<h1>CSeries Supplier Scramble</h1>
<p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production
</div>
<div class="col-xs-3"> </div>
</div>
</div>
<div class="article">
<div class="item row">
<div class="col-xs-3">
<p class="source">AW Commercial Aviation</p>
</div>
<div class="col-xs-6">
<p class="title">CSeries Supplier Scramble</p>
</div>
<div class="col-xs-3">
<p class="pubdate">Mar 22</p>
</div>
</div>
<div class="description row">
<div class="col-xs-3"> </div>
<div class="col-xs-6">
<h1>CSeries Supplier Scramble</h1>
<p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/faq.js"></script>
</body>
</html>

I jsfiddle your question http://jsfiddle.net/wz7eojqp/
I couldn't find the problems you described.
but I think that regarding the white space in the bottom of your page the problem is default browser margin. try to body{margin: 0;} or even better reset code.
http://meyerweb.com/eric/tools/css/reset/

Please close all (!) your html tags. It will fix many problems.
I've created a jsfiddle: http://jsfiddle.net/7ypk522y/
I have deleted your css class .jumbotron because you don't use it and changed it with the following lines. I hope this fixes your problem.
body {
background: url("http://i.imgur.com/JvdPG8h.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
padding: 20px;
}

CSS - positioning a scroll div

HTML:
<div class="wrapper">
<div class="scrolls">
<img src="http://avatar.hivemc.com/avatar/aruturek/100" />aruturek
<img src="http://avatar.hivemc.com/avatar/aruturek/100" />aruturek
<img src="http://avatar.hivemc.com/avatar/aruturek/100" />aruturek
<img src="http://avatar.hivemc.com/avatar/aruturek/100" />aruturek
</div>
</div>
CSS:
.wrapper {
background:#EFEFEF;
margin: auto;
;
text-align: center;
position: relative;
margin-bottom: 20px !important;
width: 540px;
padding-top: 5px;
}
.scrolls {
overflow-x: scroll;
overflow-y: hidden;
height: 150px;
white-space:nowrap
}
.imageDiv img {
margin: 2px;
max-height: 100px;
cursor: pointer;
display: inline;
*display:inline;
*zoom:1;
vertical-align:top;
}
This is the result:
qshg7muq9vam.png http://jsfiddle.net/masgp4fg/
But I want to text "aruturek" was under the image, and is centered.
______________
| |
| |
| HEAD | and more...
| |
| |
______________
NICK
How I can position this?
Sorry for my english, I am from Poland! D:
Fiddle here: http://jsfiddle.net/masgp4fg/

Try this css:
.wrapper {
background:#EFEFEF;
margin: auto;
;
text-align: center;
position: relative;
margin-bottom: 20px !important;
width: 540px;
padding-top: 5px;
}
.scrolls {
overflow-x: scroll;
overflow-y: hidden;
height: 150px;
white-space:nowrap
}
.scrolls div{
display: inline-block;
margin-right: 2em;
margin-left: 2em;
}
.imageDiv img {
margin: 2px;
max-height: 100px;
cursor: pointer;
display: inline;
*display:inline;
*zoom:1;
vertical-align:top;
}
And this html:
<div class="wrapper">
<div class="scrolls">
<div>
<img src="http://avatar.hivemc.com/avatar/aruturek/100" /><br>aruturek
</div>
<div>
<img src="http://avatar.hivemc.com/avatar/aruturek/100" /><br>aruturek
</div>
<div>
<img src="http://avatar.hivemc.com/avatar/aruturek/100" /><br>aruturek
</div>
<div>
<img src="http://avatar.hivemc.com/avatar/aruturek/100" /><br>aruturek
</div>
</div>
</div>
JSfiddle example here: http://jsfiddle.net/btz4sfsr/

You can update your html and css as per the below fiddle.
http://jsfiddle.net/kiranvarthi/v859mz30/
.scrolls .imagediv {
height: 150px;
float: left;
}

Your english is much better than my Polish
Just make a div for your images and the description.
<style>
.avatar {text-align:center;}
.avatarname {}
</style>
<div class="wrapper">
<div class="scrolls">
<div class="avatar">
<img src="http://avatar.hivemc.com/avatar/aruturek/100" />
<div class="avatarname">
aruturek
</div>
</div>
...

Put your image and name in a div floating left, and add a br between img and name :
HTML:
<div class="wrapper">
<div class="scrolls">
<div class="one-avatar">
<img src="http://avatar.hivemc.com/avatar/aruturek/100" /><br/>aruturek
</div>
<div class="one-avatar">
<img src="http://avatar.hivemc.com/avatar/aruturek/100" /><br/>aruturek
</div>
<div class="one-avatar">
<img src="http://avatar.hivemc.com/avatar/aruturek/100" /><br/>aruturek
</div>
<div class="one-avatar">
<img src="http://avatar.hivemc.com/avatar/aruturek/100" /><br/>aruturek
</div>
</div>
</div>
CSS (add this class):
.one-avatar {
float:left;
}
JSFIDDLE UPDATED : http://jsfiddle.net/ghorg12110/masgp4fg/3/

Is this what you want?
.wrapper {
background:#EFEFEF;
margin: auto;
;
text-align: center;
position: relative;
margin-bottom: 20px !important;
width: 540px;
padding-top: 5px;
}
.scrolls {
overflow-x: scroll;
overflow-y: hidden;
height: 150px;
white-space:nowrap
}
.cont {
float: left;
padding: 10px;
}
<div class="wrapper">
<div class="scrolls">
<div class="cont">
<img src="http://avatar.hivemc.com/avatar/aruturek/100" />
<div class="lbl">aruturek</div>
</div>
<div class="cont">
<img src="http://avatar.hivemc.com/avatar/aruturek/100" />
<div class="lbl">aruturek</div>
</div>
<div class="cont">
<img src="http://avatar.hivemc.com/avatar/aruturek/100" />
<div class="lbl">aruturek</div>
</div>
<div class="cont">
<img src="http://avatar.hivemc.com/avatar/aruturek/100" />
<div class="lbl">aruturek</div>
</div>
</div>
</div>

How to change css on multiple elements

I want to make so that each 3 elements (top, middle and bottom) of my polygon changes color when you hover over it. I would normally do it with css: xxx:hover but since it involves 3 different elements that need to change at the same time, I can only assume that I need take a different approach. I assume some sort of javascript? Ideas?
CODEPEN: http://codepen.io/anon/pen/shfge
HTML
<div class="hex-row even">
<div class="hex">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
<div class="hex">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
<div class="hex">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
</div>
<div class="hex-row">
<div class="hex">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
<div class="hex">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
<div class="hex">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
<div class="hex">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
</div>
CSS:
.hex {
float: left;
margin-left: 3px;
margin-bottom: -26px;
}
.hex:hover {
cursor: pointer;
}
.hex .top {
width: 0;
border-bottom: 30px solid #6C6;
border-left: 52px solid transparent;
border-right: 52px solid transparent;
}
.hex .middle {
width: 104px;
height: 60px;
background: #6C6;
}
.hex .bottom {
width: 0;
border-top: 30px solid #6C6;
border-left: 52px solid transparent;
border-right: 52px solid transparent;
}
.hex-row {
clear: left;
}
.hex-row.even {
margin-left: 53px;
}

Not too hard, just target the .hex container and it's children like so:
.hex:hover .top {
border-bottom-color: red;
}
.hex:hover .middle {
background: Red;
}
.hex:hover .bottom {
border-top-color: red;
}
http://codepen.io/anon/pen/GboDw

Categories

Resources