Active on next div and on another remove

Active on next div and on another remove - javascript

I have this solution for simple slider, but I need to preserve class .active like as the first class .row
And the buttons will switch .active class like as the first class .row
Currently, it only switches to the .row class but I need to switch to the .first and .second class.
Here is my actual solution:
$(function(){
$("#next").click(function(e) {
var activeelement = $('.active');
if(activeelement.next().length)
activeelement.removeClass('active').next(".row").addClass('active');
else
activeelement.removeClass('active').closest('.main').find('> .row:first').addClass('active');
});
$("#back").click(function(e) {
var activeelement = $('.active');
if(activeelement.prev().length)
activeelement.removeClass('active').prev().addClass('active');
else
activeelement.removeClass('active').closest('.main').find('> .row:last').addClass('active');
});
});
.main .row {
display: none;
}
.main .row .active {
color: blue;
}
.main .active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="main">
<div class="row active">
<div class="first active">sss</div>
<div class="second active">ss</div>
</div>
<div class="row">
<div class="first">sss2</div>
<div class="second">ss</div>
</div>
<div class="row">
<div class="first">sss3</div>
<div class="second">ss</div>
</div>
<div class="row">
<div class="first">sss4</div>
<div class="second">ss</div>
</div>
</div>
Back
Next
Thanks.

Use children()
$(function(){
$("#next").click(function(e) {
var activeelement = $('.active');
if(activeelement.next().length-1){
activeelement.removeClass('active').next(".row").addClass('active').children().addClass('active').parent().prev(".row");
activeelement.children().removeClass('active');
}
else{
activeelement.removeClass('active').closest('.main').find('> .row:first').addClass('active').children().addClass('active');
activeelement.children().removeClass('active');
}
});
$("#back").click(function(e) {
var activeelement = $('.active');
if(activeelement.prev().length-1){
activeelement.removeClass('active').prev(".row").addClass('active').children().addClass('active');
activeelement.children().removeClass('active');
}
else{
activeelement.removeClass('active').closest('.main').find('> .row:last').addClass('active').children().addClass('active');
activeelement.children().removeClass('active');
}
});
});
.main .row {
display: none;
}
.main .row .active {
color: blue;
}
.main .active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="main">
<div class="row active">
<div class="first active">sss</div>
<div class="second active">ss</div>
</div>
<div class="row">
<div class="first">sss2</div>
<div class="second">ss</div>
</div>
<div class="row">
<div class="first">sss3</div>
<div class="second">ss</div>
</div>
<div class="row">
<div class="first">sss4</div>
<div class="second">ss</div>
</div>
</div>
Back
Next

Related

Remove a className only the sam parent div

do you know how to keep selected a div in a different column, right every time I click on a div it remove the previous selected. I would like to keep the user choice selected on each different column : [https://codepen.io/dodgpine/pen/bGaqWVG][1]
const subTitleBuild = document.querySelectorAll(".sub-title-build");
const subTitleOs = document.querySelectorAll(".sub-title-os");
const subTitlePackage = document.querySelectorAll(".sub-title-package");
const subTitleLanguage = document.querySelectorAll(".sub-title-language");
const subTitleCuda = document.querySelectorAll(".sub-title-cuda");
const selections = [
subTitleBuild,
subTitleOs,
subTitlePackage,
subTitleLanguage,
subTitleCuda,
];
selections.forEach((selection) => {
selection.forEach((title) => {
title.addEventListener("click", () => {
removeSelectedClasses();
title.classList.add("selected");
});
});
});
function removeSelectedClasses() {
selections.forEach((selection) => {
selection.forEach((title) => {
console.log(title);
title.classList.remove("selected");
});
});
}

I've made two changes to your javascript, which I think achieve what you want (if I have understood correctly, you want a click to apply the class selected without affecting previously selected options, and, presumably, be able to remove earlier selections with another click on them).
Firstly, I commented out (removed) title.classList.remove("selected"); from your removeSelectedClasses() function, as this is what was clearing earlier selections.
Secondly, I modified, title.classList.add("selected"); in your event listeners to instead toggle the selected class on and off using: title.classList.toggle("selected");. This enables a single click to apply the selected class, while a second click on the same box removes it.
The snippet below works to show the effect.
I note you probably need column selections to be limited to a single choice, so you will have to fiddle with how the changes I suggested are applied. But the principle should help you do that.
const subTitleBuild = document.querySelectorAll(".sub-title-build");
const subTitleOs = document.querySelectorAll(".sub-title-os");
const subTitlePackage = document.querySelectorAll(".sub-title-package");
const subTitleLanguage = document.querySelectorAll(".sub-title-language");
const subTitleCuda = document.querySelectorAll(".sub-title-cuda");
const selections = [
subTitleBuild,
subTitleOs,
subTitlePackage,
subTitleLanguage,
subTitleCuda,
];
selections.forEach((selection) => {
selection.forEach((title) => {
title.addEventListener("click", () => {
removeSelectedClasses();
title.classList.toggle("selected");
});
});
});
function removeSelectedClasses() {
selections.forEach((selection) => {
selection.forEach((title) => {
console.log(title);
//title.classList.remove("selected");
});
});
}
.container-master {
width: 1200px;
margin: auto;
}
.container {
display: flex;
justify-content: space-between;
}
.column {
width: 170px;
}
.container-btn {
padding: 20px;
border: 2px solid black;
text-align: center;
margin-top: 10px;
}
.title {
margin-bottom: 30px;
background-color: #3e4652;
color: #ffffff;
}
.sub-title,
.sub-title-build {
cursor: pointer;
}
.row-cmd {
width: 1200px;
margin: 50px auto;
}
.container-btn-cmd {
padding: 20px;
border: 2px solid black;
text-align: center;
margin-top: 10px;
}
.command-container {
padding: 20px;
border: 2px solid black;
text-align: center;
margin-top: 10px;
}
.selected {
background-color: orangered;
color: #ffffff;
}
<div class="container-master">
<div class="container">
<div class="column ptbuild">
<div class="container-btn title">
<div class="btn">PyTorch Build</div>
</div>
<div class="container-btn sub-title-build" id="stable">
<div class="btn">Stable (1.11.0)</div>
</div>
<div class="container-btn sub-title-build" id="preview">
<div class="btn">Preview (Nightly)</div>
</div>
<div class="container-btn sub-title-build" id="lts">
<div class="btn">LTS (1.8.2)</div>
</div>
</div>
<div class="column os">
<div class="container-btn title">
<div class="btn">Your OS</div>
</div>
<div class="container-btn sub-title-os" id="linux">
<div class="btn">Linux</div>
</div>
<div class="container-btn sub-title-os" id="macos">
<div class="btn">Mac</div>
</div>
<div class="container-btn sub-title-os" id="windows">
<div class="btn">Windows</div>
</div>
</div>
<div class="column package">
<div class="container-btn title">
<div class="btn">Package</div>
</div>
<div class="container-btn sub-title-package" id="conda">
<div class="btn">Conda</div>
</div>
<div class="container-btn sub-title-package" id="pip">
<div class="btn">Pip</div>
</div>
<div class="container-btn sub-title-package" id="libtorch">
<div class="btn">LibTorch</div>
</div>
<div class="container-btn sub-title-package" id="source">
<div class="btn">Source</div>
</div>
</div>
<div class="column language">
<div class="container-btn title">
<div class="btn">Language</div>
</div>
<div class="container-btn sub-title-language" id="python">
<div class="btn">Python</div>
</div>
<div class="container-btn sub-title-language" id="cplusplus">
<div class="btn">C++ / Java</div>
</div>
</div>
<div class="column cuda">
<div class="container-btn title">
<div class="btn">Compute Platform</div>
</div>
<div
class="container-btn sub-title-cuda"
id="cuda10.2"
style="text-decoration: line-through"
>
<div class="btn">CUDA 10.2</div>
</div>
<div
class="container-btn sub-title-cuda"
id="cuda11.x"
style="text-decoration: line-through"
>
<div class="btn">CUDA 11.3</div>
</div>
<div
class="container-btn sub-title-cuda"
id="rocm4.x"
style="text-decoration: line-through"
>
<div class="btn">ROCM 4.2 (beta)</div>
</div>
<div class="container-btn sub-title-cuda" id="accnone">
<div class="btn">CPU</div>
</div>
</div>
</div>
<div class="row-cmd">
<div class="container-btn-cmd title">
<div class="option-text">Run this Command:</div>
</div>
<div class="command-container">
<div class="cmd-text" id="command">
<pre># MacOS Binaries dont support CUDA, install from source if CUDA is needed<br>conda install pytorch torchvision torchaudio -c pytorch</pre>
</div>
</div>
</div>
</div>

Have dragula show drop position on hover over element

I have got a drag and drop functionality working with dragula so that it creates elements to drop the element into as a child. The idea is that you can make any element become a container to hold child items.
The problem I am having is that I don't want the drop locations to be visible until I have hovered my draggable element over. When dragging an element around the page, it renders all the parent containers - but i only really want that to appear when hovering over a spot where it can be created. Not so much of a problem with a small amount of items but when you got 100+ items its causes the page to grow and is quite jarring.
Below is what I have got so far. Any help is greatly appreciated!
var drake;
function setupDragula() {
var containers = Array.prototype.slice.call(document.querySelectorAll(".js-structure-parent"));
var item = Array.prototype.slice.call(document.querySelectorAll(".js-structure-item"));
var opts = {
allowNestedContainers: true
};
opts = {
accepts: function(el, target, source, sibling) {
// prevent dragged containers from trying to drop inside itself
return !contains(el, target);
}
};
drake = dragula(
containers,
opts
).on('drag', function(el) {
prepareEmptyDropZones();
el.classList.remove('ex-moved');
}).on('drop', function(el, container, source) {
el.classList.add('ex-moved');
removeEmptyDropZones();
}).on('cancel', function(el, container, source) {
removeEmptyDropZones();
}).on('over', function(el, container) {
container.classList.add('editing');
el.classList.add('el-over');
}).on('out', function(el, container) {
container.classList.remove('editing');
el.classList.remove('el-over');
});
}
function contains(a, b) {
return a.contains ?
a != b && a.contains(b) :
!!(a.compareDocumentPosition(b) & 16);
}
function prepareEmptyDropZones() {
var item = querySelectorAllArray(".js-structure-item");
item.forEach(function(el) {
var firstParent = el.querySelector('.js-structure-parent');
if (firstParent === null) {
//el.classList.add('empty');
var emptyParent = document.createElement('div');
emptyParent.className = "js-structure-parent";
//emptyParent.classList.add('empty-drop-zone');
el.appendChild(emptyParent);
} else {
el.classList.remove('empty');
}
});
resetContainers();
}
function removeEmptyDropZones() {
var dropZones = querySelectorAllArray(".js-structure-parent");
dropZones.forEach(function(dropZone) {
if (dropZone.children.length == 0) {
dropZone.remove();
}
});
}
function resetContainers() {
drake.containers = Array.prototype.slice.call(document.querySelectorAll(".js-structure-parent"));
}
function querySelectorAllArray(selector) {
return Array.prototype.slice.call(document.querySelectorAll(selector))
}
document.addEventListener("DOMContentLoaded", function(event) {
setupDragula();
});
.js-structure-item {
cursor: move;
}
.js-structure-item .container {
margin-bottom: 10px;
}
/*parent*/
.js-structure-parent {
padding: 0px 0px 0px 30px;
/*border: 1px solid red;
position: relative;*/
}
.js-structure-parent:empty,
.empty-drop-zone {
min-height: 20px;
border: 1px dashed #ccc;
}
.el-over {
background-color: green;
}
.js-structure-item.empty {
color: #666;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.min.js"></script>
<div class="js-structure-parent">
<div class="js-structure-item">
<div class="container">
File Folder
</div>
<div class="js-structure-parent">
<div class="js-structure-item">
<div class="container">
File 1
</div>
</div>
<div class="js-structure-item">
<div class="container">
File 2
</div>
</div>
<div class="js-structure-item">
<div class="container">
File 3
</div>
</div>
<div class="js-structure-item">
<div class="container">
File 4
</div>
</div>
</div>
</div>
<div class="js-structure-item">
<div class="container">
Image Folder
</div>
<div class="js-structure-parent">
<div class="js-structure-item">
<div class="container">
Image file 1
</div>
</div>
<div class="js-structure-item">
<div class="container">
Image file 2
</div>
</div>
<div class="js-structure-item">
<div class="container">
Image file 3
</div>
</div>
<div class="js-structure-item">
<div class="container">
Image file 4
</div>
</div>
</div>
</div>
<div class="js-structure-item">
<div class="container">
Document folder
</div>
<div class="js-structure-parent">
<div class="js-structure-item">
<div class="container">
Document file 1
</div>
</div>
<div class="js-structure-item">
<div class="container">
Document file 2
</div>
</div>
<div class="js-structure-item">
<div class="container">
Document file 3
</div>
</div>
<div class="js-structure-item">
<div class="container">
Document file 4
</div>
</div>
</div>
</div>
</div>

var drake;
function setupDragula() {
var containers = Array.prototype.slice.call(document.querySelectorAll(".js-structure-parent"));
var item = Array.prototype.slice.call(document.querySelectorAll(".js-structure-item"));
var opts = {
allowNestedContainers: true
};
opts = {
accepts: function(el, target, source, sibling) {
// prevent dragged containers from trying to drop inside itself
return !contains(el, target);
}
};
drake = dragula(
containers,
opts
).on('drag', function(el) {
prepareEmptyDropZones();
el.classList.remove('ex-moved');
}).on('drop', function(el, container, source) {
el.classList.add('ex-moved');
removeEmptyDropZones();
}).on('cancel', function(el, container, source) {
removeEmptyDropZones();
}).on('over', function(el, container) {
container.classList.add('editing');
el.classList.add('el-over');
}).on('out', function(el, container) {
container.classList.remove('editing');
el.classList.remove('el-over');
});
}
function contains(a, b) {
return a.contains ?
a != b && a.contains(b) :
!!(a.compareDocumentPosition(b) & 16);
}
function prepareEmptyDropZones() {
var item = querySelectorAllArray(".js-structure-item");
item.forEach(function(el) {
var firstParent = el.querySelector('.js-structure-parent');
if (firstParent === null) {
//el.classList.add('empty');
var emptyParent = document.createElement('div');
emptyParent.className = "js-structure-parent";
//emptyParent.classList.add('empty-drop-zone');
el.appendChild(emptyParent);
} else {
el.classList.remove('empty');
}
});
resetContainers();
}
function removeEmptyDropZones() {
var dropZones = querySelectorAllArray(".js-structure-parent");
dropZones.forEach(function(dropZone) {
if (dropZone.children.length == 0) {
dropZone.remove();
}
});
}
function resetContainers() {
drake.containers = Array.prototype.slice.call(document.querySelectorAll(".js-structure-parent"));
}
function querySelectorAllArray(selector) {
return Array.prototype.slice.call(document.querySelectorAll(selector))
}
document.addEventListener("DOMContentLoaded", function(event) {
setupDragula();
});
.js-structure-item {
cursor: move;
}
.js-structure-item .container {
margin-bottom: 10px;
}
/*parent*/
.js-structure-parent {
padding: 0px 0px 0px 30px;
/*border: 1px solid red;
position: relative;*/
}
.el-over {
background-color: green;
}
.js-structure-item.empty {
color: #666;
}
.gu-mirror {
position: fixed !important;
margin: 0 !important;
z-index: 9999 !important;
opacity: 0.8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
}
.gu-hide {
display: none !important;
}
.gu-unselectable {
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
user-select: none !important;
}
.js-structure-parent:empty,
.empty-drop-zone {
min-height: 6px;
}
.gu-transit {
opacity: 0.2;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.min.js"></script>
<div class="js-structure-parent">
<div class="js-structure-item">
<div class="container">
File Folder
</div>
<div class="js-structure-parent">
<div class="js-structure-item">
<div class="container">
File 1
</div>
</div>
<div class="js-structure-item">
<div class="container">
File 2
</div>
</div>
<div class="js-structure-item">
<div class="container">
File 3
</div>
</div>
<div class="js-structure-item">
<div class="container">
File 4
</div>
</div>
</div>
</div>
<div class="js-structure-item">
<div class="container">
Image Folder
</div>
<div class="js-structure-parent">
<div class="js-structure-item">
<div class="container">
Image file 1
</div>
</div>
<div class="js-structure-item">
<div class="container">
Image file 2
</div>
</div>
<div class="js-structure-item">
<div class="container">
Image file 3
</div>
</div>
<div class="js-structure-item">
<div class="container">
Image file 4
</div>
</div>
</div>
</div>
<div class="js-structure-item">
<div class="container">
Document folder
</div>
<div class="js-structure-parent">
<div class="js-structure-item">
<div class="container">
Document file 1
</div>
</div>
<div class="js-structure-item">
<div class="container">
Document file 2
</div>
</div>
<div class="js-structure-item">
<div class="container">
Document file 3
</div>
</div>
<div class="js-structure-item">
<div class="container">
Document file 4
</div>
</div>
</div>
</div>
</div>
Try this :::
var drake;
function setupDragula() {
var containers = Array.prototype.slice.call(document.querySelectorAll(".js-structure-parent"));
var item = Array.prototype.slice.call(document.querySelectorAll(".js-structure-item"));
var opts = {
allowNestedContainers: true
};
opts = {
accepts: function(el, target, source, sibling) {
// prevent dragged containers from trying to drop inside itself
return !contains(el, target);
}
};
drake = dragula(
containers,
opts
).on('drag', function(el) {
prepareEmptyDropZones();
el.classList.remove('ex-moved');
}).on('drop', function(el, container, source) {
el.classList.add('ex-moved');
removeEmptyDropZones();
}).on('cancel', function(el, container, source) {
removeEmptyDropZones();
}).on('over', function(el, container) {
container.classList.add('editing');
el.classList.add('el-over');
}).on('out', function(el, container) {
container.classList.remove('editing');
el.classList.remove('el-over');
});
}
function contains(a, b) {
return a.contains ?
a != b && a.contains(b) :
!!(a.compareDocumentPosition(b) & 16);
}
function prepareEmptyDropZones() {
var item = querySelectorAllArray(".js-structure-item");
item.forEach(function(el) {
var firstParent = el.querySelector('.js-structure-parent');
if (firstParent === null) {
//el.classList.add('empty');
var emptyParent = document.createElement('div');
emptyParent.className = "js-structure-parent";
//emptyParent.classList.add('empty-drop-zone');
el.appendChild(emptyParent);
} else {
el.classList.remove('empty');
}
});
resetContainers();
}
function removeEmptyDropZones() {
var dropZones = querySelectorAllArray(".js-structure-parent");
dropZones.forEach(function(dropZone) {
if (dropZone.children.length == 0) {
dropZone.remove();
}
});
}
function resetContainers() {
drake.containers = Array.prototype.slice.call(document.querySelectorAll(".js-structure-parent"));
}
function querySelectorAllArray(selector) {
return Array.prototype.slice.call(document.querySelectorAll(selector))
}
document.addEventListener("DOMContentLoaded", function(event) {
setupDragula();
});
.js-structure-item {
cursor: move;
}
.js-structure-item .container {
margin-bottom: 10px;
}
/*parent*/
.js-structure-parent {
padding: 0px 0px 0px 30px;
/*border: 1px solid red;
position: relative;*/
}
.el-over {
background-color: green;
}
.js-structure-item.empty {
color: #666;
}
.gu-mirror {
position: fixed !important;
margin: 0 !important;
z-index: 9999 !important;
opacity: 0.8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
}
.gu-hide {
display: none !important;
}
.gu-unselectable {
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
user-select: none !important;
}
.gu-transit {
opacity: 0.2;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.min.js"></script>
<div class="js-structure-parent">
<div class="js-structure-item">
<div class="container">
File Folder
</div>
<div class="js-structure-parent">
<div class="js-structure-item">
<div class="container">
File 1
</div>
</div>
<div class="js-structure-item">
<div class="container">
File 2
</div>
</div>
<div class="js-structure-item">
<div class="container">
File 3
</div>
</div>
<div class="js-structure-item">
<div class="container">
File 4
</div>
</div>
</div>
</div>
<div class="js-structure-item">
<div class="container">
Image Folder
</div>
<div class="js-structure-parent">
<div class="js-structure-item">
<div class="container">
Image file 1
</div>
</div>
<div class="js-structure-item">
<div class="container">
Image file 2
</div>
</div>
<div class="js-structure-item">
<div class="container">
Image file 3
</div>
</div>
<div class="js-structure-item">
<div class="container">
Image file 4
</div>
</div>
</div>
</div>
<div class="js-structure-item">
<div class="container">
Document folder
</div>
<div class="js-structure-parent">
<div class="js-structure-item">
<div class="container">
Document file 1
</div>
</div>
<div class="js-structure-item">
<div class="container">
Document file 2
</div>
</div>
<div class="js-structure-item">
<div class="container">
Document file 3
</div>
</div>
<div class="js-structure-item">
<div class="container">
Document file 4
</div>
</div>
</div>
</div>
</div>

Searching for the same div

I need to compare which div in an orderd list is the one clicked.
Because I then need to show another div which has the index in a different list.
Everything's properly written, but the comparison is failing (if (ten == $(this))). (Now is chenged for: if (ten.is(this)) {. Works fine)
$(document).ready(function() {
$(".divs2 .os").each(function(e) {
if (e != 0)
$(this).hide();
});
var wybrany;
$(".bt-o").click(function() {
$(".divs2 .os").each(function() { $(this).hide(); });
var ten = $(this);
$(".divs .bt-o").each(function(e) {
if (ten.is(this)) {
$(this).css('background-image', 'url(themes/o2.png)');
wybrany = e;
} else {
$(this).css('background-image', 'url(themes/o1.png)');
}
});
$(".divs2 .os").each(function(e) {
if (e == wybrany)
$(this).show();
});
});
});
// EXTRA ADD FOR YOUR HELP (script for next & prev
$(document).ready(function(){
$(".divs div").each(function(e) {
if (e != 0)
$(this).hide();
});
$("#next").click(function(){
if ($(".divs div:visible").next().length != 0)
$(".divs div:visible").next().fadeIn("slow").prev().fadeOut("slow");
else {
$(".divs div:visible").fadeOut("slow");
$(".divs div:first").fadeIn("slow");
}
return false;
});
$("#prev").click(function(){
if ($(".divs div:visible").prev().length != 0)
$(".divs div:visible").prev().fadeIn("slow").next().fadeOut("slow");
else {
$(".divs div:visible").fadeOut("slow");
$(".divs div:last").fadeIn("slow");
}
return false;
});
});
.bt {
position:absolute;
left: 60px;
}
.bt-o {
padding:35px 50px;
width:54px;
height:29px;
display:inline-block;
font-size: 24px;
color: black;
cursor:pointer;
}
.last {
position:absolute;
left: 1000px;
background-image:url('themes/o22.png');
}
.os {
position:relative;
left: 30px;
top: 75px;
z-index:2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="linia">
<a id="prev">PREV</a>
<div class="divs">
<div class="bt"><a class="bt-o">2007</a><a class="bt-o">2008</a><a class="bt-o">2009</a><a class="bt-o">2010</a></div>
<div class="bt"><a class="bt-o">2011</a><a class="bt-o">2012</a><a class="bt-o">2016</a></div>
<div class="bt"><a class="bt-o">2000</a><a class="bt-o">2001</a></div>
</div>
<a id="next">NEXT</a>
</div>
<div class="divs2">
<div class="os"><div class="rok">2007</div>sample</div>
<div class="os"><div class="rok">2008</div>sample</div>
<div class="os"><div class="rok">2009</div>sample</div>
<div class="os"><div class="rok">2010</div>sample</div>
<div class="os"><div class="rok">2011</div>sample</div>
<div class="os"><div class="rok">2012</div>sample</div>
<div class="os"><div class="rok">2016</div>sample</div>
<div class="os"><div class="rok">2000</div>sample</div>
<div class="os"><div class="rok">2001</div>sample</div>
</div>
For Your help I added full working scripts if someone need to use feel free.

Use .is() instead of == to test the equality of two elements.
If you simply try to compare ten to a newly-constructed jQuery object around this, the comparison will fail -- they are distinct objects, created at different times.
is() does a logical comparison of two objects -- do they represent the same DOM element? That's why you don't need to wrap this in $() before comparing.
$(document).ready(function() {
$(".divs2 .os").each(function(e) {
if (e != 0)
$(this).hide();
});
var wybrany;
$(".bt-o").click(function() {
var ten = $(this);
$(".divs .bt-o").each(function(e) {
// test for DOM equality with is()
//
if (ten.is(this)) {
$(this).css('background-color', 'red');
wybrany = e;
} else {
$(this).css('background-color', 'transparent');
}
});
$(".divs2 .os").each(function(e) {
if (e == wybrany)
$(this).show();
});
});
});
.bt-o {
margin: .25em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="linia">
<a id="prev"></a>
<div class="divs">
<div class="bt"><a class="bt-o">2007</a><a class="bt-o">2008</a><a class="bt-o">2009</a><a class="bt-o">2010</a><a class="bt-o">2011</a><a class="bt-o">2012</a><a class="bt-o">2016</a></div>
<div class="bt"><a class="bt-o">2000</a><a class="bt-o">2001</a></div>
</div>
<a id="next"></a>
</div>
<div class="divs2">
<div class="os"><div class="rok">2007</div>sample</div>
<div class="os"><div class="rok">2008</div>sample</div>
<div class="os"><div class="rok">2009</div>sample</div>
<div class="os"><div class="rok">2010</div>sample</div>
<div class="os"><div class="rok">2011</div>sample</div>
<div class="os"><div class="rok">2012</div>sample</div>
<div class="os"><div class="rok">2016</div>sample</div>
<div class="os"><div class="rok">2000</div>sample</div>
<div class="os"><div class="rok">2001</div>sample</div>
</div>

You should add an id or any attribute for each div and adjust a little bit your code like this:
//id could be repleace by attribute what you set
if (ten.attr('id') == $(this).attr('id'){
........
}

If you can change the structure of div.divs so that all div.bts are in the same div.bt then this would be really easy :)
$(function() {
$(".bt").on("click", "a", function(e) { // add a click handler on div.bt which only executes the function if the clicked element has the class "bt-o"
// https://learn.jquery.com/events/event-delegation/
var os = $(".os"); // get all elements with class "os"
os.hide(); // hide all of them
var clickedElementIndex = $(this).index(); // get the position of the clicked element relative to its sibling elements
// https://api.jquery.com/index/
os.eq(clickedElementIndex) // get the "os" element at the same position as the clicked "bt-o" element
// https://api.jquery.com/eq/
.show(); // and show it
});
});
/* this rules are only for visual effects :) */
.bt-o {
border: solid 1px black;
cursor: pointer;
}
.os {
display: none;
color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="linia">
<a id="prev"></a>
<div class="divs">
<div class="bt"> <!-- only one div.bt for all the a.bt-o -->
<a class="bt-o">2007</a>
<a class="bt-o">2008</a>
<a class="bt-o">2009</a>
<a class="bt-o">2010</a>
<a class="bt-o">2011</a>
<a class="bt-o">2012</a>
<a class="bt-o">2016</a>
<a class="bt-o">2000</a>
<a class="bt-o">2001</a>
</div>
</div>
<a id="next"></a>
</div>
<div class="divs2">
<div class="os"><div class="rok">2007</div>sample</div>
<div class="os"><div class="rok">2008</div>sample</div>
<div class="os"><div class="rok">2009</div>sample</div>
<div class="os"><div class="rok">2010</div>sample</div>
<div class="os"><div class="rok">2011</div>sample</div>
<div class="os"><div class="rok">2012</div>sample</div>
<div class="os"><div class="rok">2016</div>sample</div>
<div class="os"><div class="rok">2000</div>sample</div>
<div class="os"><div class="rok">2001</div>sample</div>
</div>

Slightly simpler method with a little less code, you don't need the event handler e, :
$(".bt-o").on('click', function() {
$(".bt-o").css({ background: 'transparent' }); // clear all backgrounds
$(this).css({ background: '#f90' }); // colour this one
var info = $(this).text(); // get the click text
$('.os').hide(); // hide everything
$('.os').each(function() { // cycle through everything
if ($('.rok', this).text() === info) { // check each targets text
$(this).css({
background: '#bbb'
}).fadeIn('fast'); // colour and reveal
}
});
});
.bt {
position: relative;
width: 80%;
margin-bottom: 10px;
}
.bt-o {
border: 1px solid #f90;
margin-right: 5px;
}
.os {
display: none;
position: relative;
width: 80%;
border: 1px solid #09f;
margin-bottom: 10px;
}
.os div {
display: inline-block;
margin-right: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divs">
<div class="bt"><a class="bt-o">2007</a><a class="bt-o">2008</a><a class="bt-o">2009</a><a class="bt-o">2010</a><a class="bt-o">2011</a><a class="bt-o">2012</a><a class="bt-o">2016</a>
</div>
<div class="bt"><a class="bt-o">2000</a><a class="bt-o">2001</a>
</div>
</div>
<div class="divs2">
<div class="os">
<div class="rok">2007</div>sample</div>
<div class="os">
<div class="rok">2008</div>sample</div>
<div class="os">
<div class="rok">2009</div>sample</div>
<div class="os">
<div class="rok">2010</div>sample</div>
<div class="os">
<div class="rok">2011</div>sample</div>
<div class="os">
<div class="rok">2012</div>sample</div>
<div class="os">
<div class="rok">2016</div>sample</div>
<div class="os">
<div class="rok">2000</div>sample</div>
<div class="os">
<div class="rok">2001</div>sample</div>
</div>

Unable to show/hide using Javascript and CSS

Following some examples Ive seen, I am trying to be able to click to show/hide a Div ID. Content is hidden but when I click AFC Playoff Race,
nothing happens. Any ideas what I am doing wrong?
CSS Style sheet includes:
.hidden { visibility: hidden; }
.unhidden { visibility: visible; }
Here is the javascript:
<script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>
Here is the HTML Code:
<div class="panel panel-afc nopad playoffs">
<div class="panel-heading">
AFC Playoffs
</div>
<div class="panel-body">
<div id="afc-playoff-container" class="hidden">
<div id="afc playoff">
<table class="data-table1" border="0" width="100%"></table>
</div>
</div>
</div>
</div>

function unhide() {
var item = document.querySelector(this.dataset.target);
if (item) {
item.classList.toggle('hidden');
}
}
window.onload = function() {
var toggleDivs = document.getElementsByClassName('toggleDiv');
if (toggleDivs) {
for (var i = 0; i < toggleDivs.length; i++) {
toggleDivs[i].addEventListener('click', unhide);
}
}
};
.hidden {
display: none;
}
#afc-playoff-container {
width: 120px;
height: 120px;
background: #DDDDDD;
}
<div class="panel panel-afc nopad playoffs">
<div class="panel-heading">
AFC Playoffs
</div>
<div class="panel-body">
<div id="afc-playoff-container" class="hidden">
<div id="afc playoff">
<table class="data-table1" border="0" width="100%"></table>
</div>
</div>
</div>
</div>

It works, you just didn't apply styles to the classes hidden and unhidden. See this codepen for what I mean.
Good luck!

bootstrap square and rectangle responsive with the same height

Is it possible via css to have a square and a rectangle with the same height within a row in bootstrap?
I need javascript to achieve this goal or I can with only css?
something like this http://codepen.io/mp1985/pen/VvrWbQ but as you can see the 2 elements haven't the same height.
<div class="col-sm-8">
<div class="rect-responsive">
<div class="content">
Hello rectangle
</div>
</div>
</div>
<div class="col-sm-4">
<div class="square-responsive">
<div class="content">
Hello square
</div>
</div>
</div>

I saw a similar problem somewhere here. You might find it useful.
Not an exact solution but you can also try something like this:
<style type="text/css">
div[class*="col-"] > .square-responsive,
span[class*="col-"] > .square-responsive,
ol[class*="col-"] > .square-responsive,
ul[class*="col-"] > .square-responsive,
li[class*="col-"] > .square-responsive{
padding-bottom:100%;
}
div[class*="col-"] > .rect-responsive,
span[class*="col-"] > .rect-responsive,
ol[class*="col-"] > .rect-responsive,
ul[class*="col-"] > .rect-responsive,
li[class*="col-"] > .rect-responsive{
padding-bottom:50%;
}
.square-responsive,
.rect-responsive{
position:relative;
overflow:hidden;
background-color: red;
}
.square-responsive > *,
.rect-responsive > *{
position:absolute;
}
.square-responsive > .content,
.rect-responsive > .content {
width:100%;
height:100%;
}
</style>
<div class="row">
<div class="col-sm-6">
<div class="square-responsive">
<div class="content">
Hello
</div>
</div>
</div>
<div class="col-sm-6">
<div class="square-responsive">
<div class="content">
Hello
</div>
</div>
</div>
</div>

check this
CSS:
.rect-responsive {
background-color: red;
}
.square-responsive {
background-color: yellow;
}
JS:
$(window).ready(function(){
$(".square-responsive").height($(".square-responsive").width());
$(".rect-responsive").height($(".square-responsive").width());
console.log($(".rect-responsive").height() + " " + $(".square-responsive").height())
});
$(window).resize(function () {
$(".square-responsive").height($(".square-responsive").width());
$(".rect-responsive").height($(".square-responsive").width());
console.log($(".rect-responsive").height() + " " + $(".square-responsive").height())
});
DEMO:
JSFIDDLE
$(window).ready(function() {
$(".square-responsive").height($(".square-responsive").width());
$(".rect-responsive").height($(".square-responsive").width());
console.log($(".rect-responsive").height() + " " + $(".square-responsive").height())
});
$(window).resize(function() {
$(".square-responsive").height($(".square-responsive").width());
$(".rect-responsive").height($(".square-responsive").width());
console.log($(".rect-responsive").height() + " " + $(".square-responsive").height())
});
.rect-responsive {
background-color: red;
}
.square-responsive {
background-color: yellow;
}
<head>
<title>Example of Twitter Bootstrap 3 Grid System</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style type="text/css">
p {
padding: 50px;
font-size: 32px;
font-weight: bold;
text-align: center;
background: #f2f2f2;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-8 col-xl-8 col-xs-8">
<div class="rect-responsive">
<div class="content">Hello rectangle</div>
</div>
</div>
<div class="col-sm-4 col-md-4 col-xl-4 col-xs-4">
<div class="square-responsive">
<div class="content">Hello square</div>
</div>
</div>
</div>
</div>
</body>
</html>

We Keep Coding

JavaScript is the programming language of the Web.

Active on next div and on another remove - javascript

Related

Remove a className only the sam parent div

Have dragula show drop position on hover over element

Searching for the same div

Unable to show/hide using Javascript and CSS

bootstrap square and rectangle responsive with the same height

Categories

Resources