Im pretty new to Web Development, so I am sorry for this stupid question.
I have 4 Divs with different classes.
Icon-feature1 - 4 and each of them has a different active class.
I want that my JS is removing all actives and adding active on the targeted (clicked) div.
The class "master-feature" I added to have all of the Divs something in common and be able to be selected. It's maybe not the best way, but I came up with this and thought it's okay.
let swapactive = document.getElementsByClassName('master-feature');
for (let i = 0; i < swapactive.length; i++) {
swapactive[i].addEventListener('click', activateClass);
}
function activateClass(e) {
for (let i = 0; i < swapactive.length; i++) {
swapactive[i].classList.remove('active');
}
e.target.classList.add('active');
}
.icon-feature1 {
margin-right: 10px;
margin-top: 20px;
float: left;
content: url("/static/img/feature1_blue.svg");
animation: pulsate 3s ease-out infinite;
}
.icon-feature1.active {
content: url("/static/img/feature1.svg");
animation-play-state: paused;
}
<div class="row">
<div class="col-sm-6 pb-10">
<div class="active icon-feature1 master-feature">
</div>
<div class="p-3 pt-3 col-content-box col-features-active col-features-not-active col-round-border col-feature">
<p id="fs-16">
<b id="fs-18">Feature 1</b><br/> Feature 1 Description
</p>
</div>
<div class="row">
<div class="col-sm-12">
<div class="icon-feature2 master-feature">
</div>
<div class="p-3 pt-3 col-content-box col-features-not-active col-round-border col-feature">
<p id="fs-16">
<b id="fs-18">Feature 2</b><br/> Feature 2 Description
</p>
</div>
</div>
<div class="col-sm-12">
<div class="icon-feature3 master-feature">
</div>
<div class="p-3 pt-3 col-content-box col-features-not-active col-round-border col-feature">
<p id="fs-16">
<b id="fs-18">Feature 3</b><br/> Feature 3 Description
</p>
</div>
</div>
<div class="col-sm-12">
<div class="icon-feature4 master-feature">
</div>
<div class="p-3 pt-3 col-content-box col-features-not-active col-round-border col-feature">
<p id="fs-16">
<b id="fs-18">Feature 4</b><br/> Feature 4 Description
</p>
</div>
</div>
</div>
</div>
</div>
If I click a div, nothing is happening. What did I made wrong?
Any ideas?
Thank you in advance.
Use e.currentTarget instead of e.target and your code works.
Related
I have 4 divs with bootstrap col-md-3 class. When clicked on any Div, I am expanding width of that div to 100%, showing expanded contents and hiding(display:none) other divs.
On close button, I want to reverse changes, so I am trying to assign 25% width, hinding expanded contents and making other divs visible(display:block).
But changes are not getting reflected.
function openTab(tab) {
var i, x, y;
x = document.getElementsByClassName("containerTab");
y = document.getElementsByClassName("OuterTab");
for (i = 0; i < x.length; i++)
{
if(i==tab-1)
{
y[i].style.width="100%";
y[i].style.transition= "width 0.5s ease-in";
x[i].style.maxHeight="5000px";
x[i].style.transition= "max-height 1s ease-in";
}
else
{
y[i].style.display="none";
}
}
}
function closeTab(tab)
{
var i, x, y,z, a;
x = document.getElementsByClassName("containerTab");
y = document.getElementsByClassName("OuterTab");
for (i = 0; i < x.length; i++)
{
if(i==tab-1)
{
y[i].style.width= "25%";
y[i].style.transition= "width 0.5s ease-in";
x[i].style.maxHeight = "0px";
x[i].style.transition= "max-height 1s ease-in";
}
else
{
y[i].style.display = "block";
}
}
}
.border1{border: 1px solid; border-radius: 5px;padding:2px}
.border2{border: 1px solid; border-radius: 7px;padding:10px}
.containerTab {
cursor: pointer;
color: black;
max-height: 0;
min-height:0;
overflow: hidden;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid" style="padding:10px">
<div class="row">
<div class="col-md-3 col-xs-12 text-center OuterTab" onclick="openTab(1);" style="">
<div class="border1">
<div class="border2">
content 1
</div>
<div id="b1" class="containerTab" style="">
Expanded content 1
<div><button onclick="closeTab(1)">Close</button></div>
</div>
</div>
</div>
<div class="col-md-3 col-xs-12 text-center OuterTab" onclick="openTab(2);" style="">
<div class="border1">
<div class="border2">
content 2
</div>
<div id="b2" class="containerTab" style="width:100%;">
Expanded content 2
<div><button onclick="closeTab(1)">Close</button></div>
</div>
</div>
</div>
<div class="col-md-3 col-xs-12 text-center OuterTab" onclick="openTab(3);" style="">
<div class="border1">
<div class="border2">
content 3
</div>
<div id="b3" class="containerTab" style="width:100%;">
Expanded content 3
<div><button onclick="closeTab(1)">Close</button></div>
</div>
</div>
</div>
<div class="col-md-3 col-xs-12 text-center OuterTab" onclick="openTab(4);" style="">
<div class="border1">
<div class="border2">
content 4
</div>
<div id="b3" class="containerTab" style="width:100%;">
Expanded content 4
<div><button onclick="closeTab(1)">Close</button></div>
</div>
</div>
</div>
</div>
Instead of re-applying the individual styles. Apply the new styles by simply adding a CSS class. Then on the click of the Close button, simply remove that class, which will cause the affected elements to revert to their previous style.
addClass and removeClass in jQuery - not removing class
Got answer in this post. Seems the problem was due to event bubbling as close button was inside clickable div, both closetab tab and opentab events were getting called. Worked fine when moved "close" button outside div.
I am using Vue JS and Bulma Frameworks. To show the modal I am using .
I have list of items(10) which is displayed in a For Loop. In every item I have a button which opens the sweet modal. No matter which button I click, the modal is displayed at the top of the page always. Can anyone help me how to show the modal near to the clicked button?
Template index.html
<div class="content column is-full-mobile no-devices-found-wraper">
<div class="columns is-mobile">
<div class="column is-full-mobile ">
<div class="columns is-mobile is-marginless">
<div class="column is-half-mobile padding-bottom-
zero padding-top-3">mobile devices:</div>
<div class="column padding-bottom-zero padding-top-3">
<a #click.stop.prevent="openDeviceModal()"
class="add_icon is-pulled-right add-location-btn level-
item">
<i class="fa fa-plus"></i>ADD ITEMS
</a>
</div>
</div>
</div>
</div>
</div>
sweet-modal outside for loop
<sweet-modal class="Add mobile device" ref="deviceAddLocation"
von:close="closeModal">
<form #submit.prevent="saveDeviceToLocation">
<div class="field add-devices-height-with-error">
<label class="label" >mobile device Name</label>
</div>
</form>
</sweet-modal>
//index.vue-- openDeviceModal()//
openDeviceModal() {
this.isModalOpen = true;
this.$refs.deviceAddLocation.blocking = true;
this.$refs.deviceAddLocation.open();
}
//CSS//
.isModalOpen {
height: 100vh;
overflow: hidden;
}
.sweet-modal {
overflow: inherit;
}
.sweet-modal-overlay {
background: transparent !important;
height: 100% !important;
}
.sweet-modal .sweet-content {
padding-top: 10px;
}
.sweet-modal.is-visible {
transform: translate(-62%, -50%) !important
}
sweet-modal .sweet-box-actions {
top: 15px !important;
}
I have this bootstrap carousel with arrows at the top right corner. I have set data-wrap="false" so that it stops when it reaches the end of the Carousel. Also, the left arrow becomes active when the first carousel starts.
Here's what I want to do: I want the class class-fade to change to class-active when the slide becomes active. And then change to class-fade when it becomes non-active again.
I hope this makes sense.
JSFIDDLE: https://jsfiddle.net/6kjnmbcb/
HTML:
<div class="container">
<p>When the carousel comes to an end, change the class <strong>"class-active"</strong> to <strong>"class-fade"</strong>.
<span class="pull-right">
<a class="" href="#CaseCarousel" data-slide="prev"><i class="class-fade"> << </i></a>
<a class="" href="#CaseCarousel" data-slide="next"><i class="class-active"> >> </i></a>
</span>
</p>
<hr />
<div class="row">
<div class="carousel slide" data-interval="false" data-wrap="false" id="CaseCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-6">
<p>
Slide1 goes here
</p>
</div>
<div class="col-xs-6">
<p>
Slide2 goes here
</p>
</div>
</div>
<div class="item">
<div class="col-xs-6">
<p>
Slide3 goes here
</p>
</div>
<div class="col-xs-6">
<p>
Slide4 goes here
</p>
</div>
</div>
<div class="item">
<div class="col-xs-6">
<p>
Slide5 goes here
</p>
</div>
<div class="col-xs-6">
<p>
Slide6 goes here
</p>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.class-fade {
color: grey;
}
.class-active {
color: red;
}
You need to use slide.bs.carousel event described in bootstrap
$('#CaseCarousel').on('slide.bs.carousel', function (e) {
var controls = document.querySelectorAll('.controls');
if (e.direction === 'left') {
controls[0].className = 'controls class-active';
}
if (e.direction === 'right') {
controls[1].className = 'controls class-active'
}
var inner = document.querySelector('.carousel-inner');
if (e.relatedTarget == inner.lastElementChild) {
controls[1].className = 'controls class-fade'
}
if (e.relatedTarget == inner.firstElementChild) {
controls[0].className = 'controls class-fade'
}
})
There is a full solution
https://jsfiddle.net/oeraa2kL/2/
You can handle the slide.bs.carousel event :
Take a look at this fiddle : https://jsfiddle.net/BaobabCoder/7756yuzb/1/
$(document).on('slide.bs.carousel', '.carousel', function(e) {
var slidesLength = $(this).find('.item').length;
var slideFrom = $(this).find('.active').index();
var slideTo = $(e.relatedTarget).index();
if(slideFrom === 0 || slideTo === 0) {
$('a[href="#CaseCarousel"][data-slide="prev"] i:eq(0)').toggleClass('class-fade');
$('a[href="#CaseCarousel"][data-slide="prev"] i:eq(0)').toggleClass('class-active');
}
else if(slideFrom === slidesLength || slideTo === slidesLength) {
$('a[href="#CaseCarousel"][data-slide="next"] i:eq(0)').toggleClass('class-fade')
$('a[href="#CaseCarousel"][data-slide="next"] i:eq(0)').toggleClass('class-active');
}
});
I've added three pictures. Look at them please.
What is the best solution to create something like this? I would create after each row a big container and this container is collapsed. After clicking on one of the 3 overlying containers I would fill the container with the text and show it. But what happens when the display can't show 3 divs in a row, because I will use flex boxes? Is there a better solution with much less jquery?
Maybe something like this is a good place to start:
https://jsfiddle.net/547ec3bx/
HTML
<div class="wrapper">
<div class="row">
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
</div>
<div class="row">
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
</div>
<div class="row">
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
</div>
</div>
Javascript
document.querySelectorAll('.row').forEach((element, index) => {
element.style.order = index * 2;
});
document.querySelectorAll('.element').forEach(element => {
element.addEventListener('click', event => {
var newRow = document.createElement('div');
newRow.classList.add('row');
newRow.style.order = +event.currentTarget.parentNode.style.order + 1;
var newElement = document.createElement('div');
newElement.classList.add('element');
newRow.appendChild(newElement);
event.currentTarget.parentNode.parentNode.appendChild(newRow);
});
});
CSS
.element {
min-width: 100px;
height: 50px;
flex: 1;
border: 1px solid black;
flex-wrap: nowrap;
}
.row {
width: 350px;
display: flex;
flex-direction: row;
}
.wrapper {
display: flex;
flex-direction: column;
}
you can use javascript to solve this problem , like this ....
html code:
<div id="a">
<h3>wellcome</h3>
</div>
<div id="b">
<h3>hello...</h3>
</div>
javascript code in external file
function goB()
{
document.getElementById("a").style.display="none";
document.getElementById("b").style.display="block";
}
function
{
document.getElementById("b").style.display="none";
document.getElementById("a").style.display="block";
}
Add a div and set its display to Hidden.
Get onclick event for a particular div and set the display property to block
window.addEventListener("load", function(){
document.getElementById("click").onclick = function(){
document.getElementById("div-1").style.display = "block";
};
});
.row
{
width:100%;
}
.one-third
{
width:33.33333%;
float:left;
padding:30px 0;
}
.full-width
{
display:none;
width:100%;
text-align:center;
}
<div class=wrap>
<div class="row">
<div id="click" class="one-third">
Column 1-Click Me
</div>
<div class="one-third">
Column 2
</div>
<div class="one-third">
Column 3
</div>
</div>
<div class="full-width" id="div-1">Full width Div</div>
<div class="row">
<div class="one-third">
Column 1
</div>
<div class="one-third">
Column 2
</div>
<div class="one-third">
Column 3
</div>
</div>
I have a bootstrap row which will be populated by, let's say, blog post thumbnails.
<section class="container">
<div class="row thumbs">
<div class="col-sm-3">content</div>
<div class="col-sm-3">content</div>
<div class="col-sm-3">content</div>
<div class="col-sm-3">content</div>
<div class="col-sm-3">content</div>
</div>
<hr class="divider" />
<div class="navigation">navigation</div>
</section
I want to close a row, insert hr tag and open a new bootstrap row after every 4th post thumbnail.
<section class="container">
<div class="row thumbs">
<div class="col-sm-3">content</div>
<div class="col-sm-3">content</div>
<div class="col-sm-3">content</div>
<div class="col-sm-3">content</div>
</div>
<hr class="divider" />
<div class="row">
<div class="col-sm-3">content</div>
</div>
<hr class="divider" />
<div class="navigation">navigation</div>
</section>
Is there a way to do this with jquery?
Can do something like this:
var $mainElem = $('.row'),/* adjust selector to suit page*/
$parent = $mainElem.parent(),
/* remove children after 4th from existing row */
$items = $mainElem.children(':gt(3)').detach();
if ($items.length) {
/* create new row for every 4 items removed above */
for (var i = 0; i < $items.length; i = i + 4) {
var $row = $('<div class="row">').append($items.slice(i, i + 4));
$parent.append('<hr class="divider">').append($row);
}
}
DEMO
This worked best for me:
var $d = $('.thumbs');
var $p = $('.col-sm-3:gt(3)', $d);
if ($p.length) {
$('<div class="row thumbs">').insertAfter($d).append($p);
$('<hr class="divider">').insertAfter($d);
}
Depending on your motivation to wrap each set of columns in a new row, you can style every nth row with straight CSS.
In bootstrap, if you have extra columns that spillover past 12, they just wrap into a new line anyway, so having the new row is usually redundant, although you might have some external reason to keep it in your case.
Either way, here's a CSS solution that adds a page wide horizontal divider every 4 divs:
Demo in jsFiddle & Stack Snippets
.container .row.thumbs div:nth-child(4n) {
position: static;
}
.container .row.thumbs div:nth-child(4n):after {
content: ' ';
border-top: 1px solid black;
display: block;
position: absolute;
width: 95%;
margin-left: 2.5%;
left: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<section class="container">
<div class="row thumbs">
<div class="col-sm-3">content</div>
<div class="col-sm-3">content</div>
<div class="col-sm-3">content</div>
<div class="col-sm-3">content</div>
<div class="col-sm-3">content</div>
<div class="col-sm-3">content</div>
<div class="col-sm-3">content</div>
<div class="col-sm-3">content</div>
<div class="col-sm-3">content</div>
</div>
<div class="navigation">navigation</div>
</section>
Also, bear in mind that this won't be natively supported in < IE8