Hello I am trying to highlight the current day in a <Div> table (using css and jQuery) but can't wrap my head around it (I don't want to use php because it must be dynamic)
This is part of what I have done.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name='viewport' content='width=device-width,initial-scale=1'>
<link rel="shortcut icon" href="../themes/images/logo-180x178-52.png" type="image/x-icon">
<link rel="STYLESHEET" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile.structure-1.4.0.min.css" />
<link rel="STYLESHEET" href="../themes/jquery.mobile.icons.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<title>Rooster week 15</title>
<style>
.rTable {
display: table;
width: 100%;
}
.rTableRow {
display: table-row;
}
.rTableHeading {
display: table-header-group;
background-color: orange;
font-weight: bold;
}
.rTableBody {
display: table-row-group;
}
.rTableFoot {
display: table-footer-group;
font-weight: bold;
background-color: orange;
}
.rTableCell,
.rTableHead {
display: table-cell;
}
.cZondag {
display: table-row;
background-color: lightgreen;
font-weight: bold;
}
.cMaandag {
display: table-row;
background-color: lightgreen;
font-weight: bold;
}
//.cDinsdag { display: table-row; background-color: lightgreen; font-weight: bold;}
//.cWoensdag { display: table-row; background-color: lightgreen; font-weight: bold;}
//.cDonderdag { display: table-row; background-color: lightgreen; font-weight: bold;}
//.cVrijdag { display: table-row; background-color: lightgreen; font-weight: bold;}
//.cZaterdag { display: table-row; background-color: lightgreen; font-weight: bold;}
</style>
</head>
<body>
<script>
function myFunction() {
var d = new Date();
var weekday = new Array(7);
weekday[0] = "Zondag";
weekday[1] = "Maandag";
weekday[2] = "Dinsdag";
weekday[3] = "Woensdag";
weekday[4] = "Donderdag";
weekday[5] = "Vrijdag";
weekday[6] = "Zaterdag";
var n = weekday[d.getDay()];
var nTable = document.getElementById('maandag');
// document.write(nTable); // debugging only
}
myFunction()
</script>
<h1>Rooster Week 15</h1> Richard van Soest
<div data-role="navbar">
<ul>
<li>Vorige week
</li>
<li>Volgende week
</li>
<li>Sleutels
</li>
</ul>
</div>
<div role="main" class="ui-content">
<p>
</p>
<div class="rTable">
<div class="rTableHeading">
<div class="rTableHead">Dag</div>
<div class="rTableHead"></div>
<div class="rTableHead">Route</div>
<div class="rTableHead">Aanvang</div>
<div class="rTableHead">Duur</div>
</div>
<div class="rTableBody">
<div class="rTableRow" id="maandag">
<div class="rTableCell">11-04</div>
<div class="rTableCell">Maandag</div>
<div class="rTableCell">EX 3</div>
<div class="rTableCell">15:15</div>
<div class="rTableCell">3:30</div>
</div>
<div class="rTableRow" id="dinsdag">
<div class="rTableCell">12-04</div>
<div class="rTableCell">Dinsdag</div>
<div class="rTableCell">EX 3</div>
<div class="rTableCell">15:15</div>
<div class="rTableCell">3:30</div>
</div>
<div class="rTableRow" id="woensdag">
<div class="rTableCell">13-04</div>
<div class="rTableCell">Woensdag</div>
<div class="rTableCell">EX 3</div>
<div class="rTableCell">15:15</div>
<div class="rTableCell">3:30</div>
</div>
<div class="rTableRow" id="donderdag">
<div class="rTableCell">14-04</div>
<div class="rTableCell">Donderdag</div>
<div class="rTableCell">EX 3</div>
<div class="rTableCell">15:15</div>
<div class="rTableCell">3:30</div>
</div>
<div class="rTableRow" id="vrijdag">
<div class="rTableCell">15-04</div>
<div class="rTableCell">Vrijdag</div>
<div class="rTableCell">EX 3</div>
<div class="rTableCell">15:15</div>
<div class="rTableCell">3:30</div>
</div>
</div>
<div class="rTableFoot">
<div class="rTableHead">Totaal</div>
<div class="rTableHead"></div>
<div class="rTableHead"></div>
<div class="rTableHead"></div>
<div class="rTableHead">14:00</div>
</div>
</div>
<div data-role="footer" data-position="fixed" role="banner" class="ui-header ui-bar-inherit">
Control
<h1 class="ui-title" role="heading" aria-level="1">who you gonne call</h1>
Call CU
</div>
<br />
</div>
</body>
</html>
The code is generated by a VBA script in Excel where the data comes from and is uploaded to a server automatically.
It is supposed to be running on a phone screen (fullscreen)
Please note my code will only highlight when the table contains a date around now.
function pad(num) {
return String("0"+num).slice(-2);
}
$(function() {
var d = new Date(); // test with new Date(2016,3,14); JS months start at 0
var ddmm = ""+pad(d.getDate())+"-"+pad(d.getMonth()+1);
$(".rTableRow:contains('"+ddmm+"')").addClass("highlight");
});
.highlight { background-color:red }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>Rooster Week 15</h1> Richard van Soest
<div data-role="navbar">
<ul>
<li>Vorige week
</li>
<li>Volgende week
</li>
<li>Sleutels
</li>
</ul>
</div>
<div role="main" class="ui-content">
<p>
</p>
<div class="rTable">
<div class="rTableHeading">
<div class="rTableHead">Dag</div>
<div class="rTableHead"></div>
<div class="rTableHead">Route</div>
<div class="rTableHead">Aanvang</div>
<div class="rTableHead">Duur</div>
</div>
<div class="rTableBody">
<div class="rTableRow" id="maandag">
<div class="rTableCell">11-04</div>
<div class="rTableCell">Maandag</div>
<div class="rTableCell">EX 3</div>
<div class="rTableCell">15:15</div>
<div class="rTableCell">3:30</div>
</div>
<div class="rTableRow" id="dinsdag">
<div class="rTableCell">12-04</div>
<div class="rTableCell">Dinsdag</div>
<div class="rTableCell">EX 3</div>
<div class="rTableCell">15:15</div>
<div class="rTableCell">3:30</div>
</div>
<div class="rTableRow" id="woensdag">
<div class="rTableCell">13-04</div>
<div class="rTableCell">Woensdag</div>
<div class="rTableCell">EX 3</div>
<div class="rTableCell">15:15</div>
<div class="rTableCell">3:30</div>
</div>
<div class="rTableRow" id="donderdag">
<div class="rTableCell">14-04</div>
<div class="rTableCell">Donderdag</div>
<div class="rTableCell">EX 3</div>
<div class="rTableCell">15:15</div>
<div class="rTableCell">3:30</div>
</div>
<div class="rTableRow" id="vrijdag">
<div class="rTableCell">15-04</div>
<div class="rTableCell">Vrijdag</div>
<div class="rTableCell">EX 3</div>
<div class="rTableCell">15:15</div>
<div class="rTableCell">3:30</div>
</div>
</div>
<div class="rTableFoot">
<div class="rTableHead">Totaal</div>
<div class="rTableHead"></div>
<div class="rTableHead"></div>
<div class="rTableHead"></div>
<div class="rTableHead">14:00</div>
</div>
</div>
<div data-role="footer" data-position="fixed" role="banner" class="ui-header ui-bar-inherit">
Control
<h1 class="ui-title" role="heading" aria-level="1">who you gonne call</h1>
Call CU
</div>
<br />
</div>
I am not too sure What is Current date field, so I assume that it is a first record. you can do it without jquery. below are code sample
/*Only work hover over element*/
.rTableRow > div:first-child:hover{
background-color:red; }
/* work all the time*/
.rTableRow > div:first-child{
background-color:red; }
Related
I have a list of divs with data. Each div contains a custom data. Each div have data like a table rows and column, but it shows in descending order, I want to show it in ascending order, for example the div which have multiple rows with data, it come first and the div that have less rows come second and so on in dynamically.
The whole process should be dynamically, for example if any div have many rows it come first and the less rows div come to next and so on, the whole process is based on data entry.
Below you can find an example of what I am thinking of, yet it's not working.
image example for the better understanding
.justrow {
display: flex;
justify-content: space-evenly;
}
.table {
display: table;
width: 25%;
border:1px solid #ccc;
height: 100%;
}
.table2 {
display: table;
width: 25%;
border:1px solid #ccc;
height: 100%;
}
.table3{
display: table;
width: 25%;
border:1px solid #ccc;
height: 100%;
}
.header {
display:table-header-group;
font-weight:bold;
}
.rowGroup {
display:table-row-group;
}
.row {
display:table-row;
}
.cell {
display:table-cell;
width:25%;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
text-align: center;
border-left: 1px solid #ccc;
}
<div class="justrow">
<div class="table">
<div class="header">
<div class="cell">Name</div>
<div class="cell">Address</div>
<div class="cell">Action</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">Bob</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">Joe</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
</div>
<div class="table3">
<div class="header">
<div class="cell">Name</div>
<div class="cell">Address</div>
<div class="cell">Action</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">Bob1</div>
<div class="cell">Address1</div>
<div class="cell">Button1</div>
</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">name1</div>
<div class="cell">Address1</div>
<div class="cell">Button1</div>
</div>
<div class="row">
<div class="cell">name1</div>
<div class="cell">Address1</div>
<div class="cell">Button1</div>
</div>
<div class="row">
<div class="cell">name1</div>
<div class="cell">Address1</div>
<div class="cell">Button1</div>
</div>
<div class="row">
<div class="cell">name1</div>
<div class="cell">Address1</div>
<div class="cell">Button1</div>
</div>
<div class="row">
<div class="cell">name1</div>
<div class="cell">Address1</div>
<div class="cell">Button1</div>
</div>
<div class="row">
<div class="cell">name1</div>
<div class="cell">Address1</div>
<div class="cell">Button1</div>
</div>
<div class="row">
<div class="cell">name1</div>
<div class="cell">Address1</div>
<div class="cell">Button1</div>
</div>
</div>
</div>
<div class="table2">
<div class="header">
<div class="cell">Name</div>
<div class="cell">Address</div>
<div class="cell">Action</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">Bob</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">Joe</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">Sue</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">Sue</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">Sue</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
</div>
</div>
You stated that the data is retrieved from a database, so you know how many rows there are in a table and can define a style="--row-count: ..." with each table retrieved.
As each main .table is a flexbox item, you can use the table row count to modify the table flexbox order property and easily change its position inside a .justrow, without Javascript manipulation:
order: 0 or unset -> place table in document creation order
order: negative or lower value -> place table before tables with higher order values
order: positive or higher value -> place table after tables with lower order values
MDN Reference: Ordering flex items
Given the above you can use custom variables for .table --row-count and .justrow --order-sign to set the required sort order for a row of tables.
Essentially, the row count determines the position of a table inside a row and the sign determines the sort direction.
The --order-sign can be defined for each .justrow individually, or just once in :root or body for all .justrow elements (for ease of the demo, in the snippet I used body to define --order-sign).
The equation is easy to understand: order = order-sign x row-count
.justrow {
--order-sign: -1
/*
-1 - Ascending order
0 - no (or document) order
1 - Descending order
*/
}
.table {
order: calc(var(--order-sign) * var(--row-count));
}
<div class="justrow">
<div class="table" style="--row-count: X">table rows</div>
<div class="table" style="--row-count: N">table rows</div>
</div>
In the snippet I added a second two-row table and a few radio buttons to toggle between sort orders:
/* ADDED */
body { --order-sign: 0 }
.table {
order: calc(var(--order-sign) * var(--row-count));
}
/**/
.justrow {
display: flex;
justify-content: space-evenly;
/* added for demo */
flex-flow: row wrap;
gap: 1rem;
}
.table {
flex: 1; /* added for demo */
width: 20%; /* from 25% for demo */
display: table;
border: 1px solid #ccc;
height: 100%;
}
.header {
display: table-header-group;
font-weight: bold;
}
.rowGroup {
display: table-row-group;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
width: 25%;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
text-align: center;
border-left: 1px solid #ccc;
}
fieldset { margin: 0; margin-bottom: 1rem; }
[red] { color: red; font-weight: bold }
<fieldset>
<legend> Sort Order </legend>
<label for="ord1" title="document order">
<input id="ord1" class="radio" type="radio" name="group" checked
oninput="document.body.style.setProperty('--order-sign', 0);">
(None)
</label>
<label for="ord2" title="most rows first">
<input id="ord2" class="radio" type="radio" name="group"
oninput="document.body.style.setProperty('--order-sign', -1);">
(Asc)
</label>
<label for="ord3" title="least rows first">
<input id="ord3" class="radio" type="radio" name="group"
oninput="document.body.style.setProperty('--order-sign', 1);">
(Des)
</label>
<br><br>
<span>MDN Reference: <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordering flex items</a></span>
</fieldset>
<div class="justrow">
<div class="table" style="--row-count: 2">
<div class="header">
<div class="cell">Name</div>
<div class="cell">Address</div>
<div class="cell">Action</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell" red>table 1</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">Joe</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
</div>
<div class="table" style="--row-count: 8">
<div class="header">
<div class="cell">Name</div>
<div class="cell">Address</div>
<div class="cell">Action</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell" red>table 2</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">name</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">name</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">name</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">name</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">name</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">name</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">name</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
</div>
<div class="table" style="--row-count: 5">
<div class="header">
<div class="cell">Name</div>
<div class="cell">Address</div>
<div class="cell">Action</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell" red>table 3</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">Joe</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">Sue</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">Sue</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
<div class="row">
<div class="cell">Sue</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
</div>
<div class="table" style="--row-count: 2">
<div class="header">
<div class="cell">Name</div>
<div class="cell">Address</div>
<div class="cell">Action</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell" red>table 4</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
<div class="rowGroup">
<div class="row">
<div class="cell">Joe</div>
<div class="cell">Address</div>
<div class="cell">Button</div>
</div>
</div>
</div>
</div>
I have the following structure example:
<div class="main">
<div class="image">Image1</div>
<div class="image">Image2</div>
<div class="image">Image3</div>
</div>
<div class="side">
<div class="Banner">Banner1</div>
<div class="Banner">Banner2</div>
<div class="Banner">Banner3</div>
<div class="Banner">Banner4</div>
</div>
I want to make a script that will take each banner and placed under each image.
<div class="main">
<div class="image">Image1</div>
<div class="Banner">Banner1</div>
<div class="image">Image2</div>
<div class="Banner">Banner2</div>
<div class="image">Image3</div>
<div class="Banner">Banner3</div>
<div class="Banner">Banner4</div>
</div>
<div class="side"></div>
Basically there are some images placed one after another and then some banners placed one after another.
Image1
Image2
Image3
Banner1
Banner2
Banner3
Banner4
I need to take each banner and place it under each image so I can have:
Image1
Banner1
Image2
Banner2
Image3
Banner3
Banner4
I cannot change the html to manually placed the banners, I need to use a more advanced script JS and or jquery ..
.content {display:flex; max-width:800px;min-width:300px;gap:20px;margin:auto;}
.main { flex: 70%;}.main2 {max-width:400px;}
.side { flex: 30%; padding:10px;}.img { background:blue;}.banner { background:red;}
.img, .banner { width:100%; min-width:50px; height:50px;display:grid;place-items:center; color: #fff; margin:10px auto;}
<h2>Rearrange content - Place each div (banner) under each image </h2>
<div class="content">
<div class="main">
<div class="img">Image 1</div>
<div class="img">Image 2</div>
<div class="img">Image 3</div>
<div class="img">Image 4</div>
<div class="img">Image 5</div>
<div class="img">Image 6</div>
<p> Multiple DIVs with images ...
<br> ...
</div>
<div class="side">
<div class="banner">Banner1</div>
<div class="banner">Banner2</div>
<div class="banner">Banner3</div>
<div class="banner">Banner4</div>
<div class="banner">Banner5</div>
<div class="banner">Banner6</div>
<div class="banner">Banner7</div>
<div class="banner">Banner8</div>
<div class="banner">Banner9</div>
<div class="banner">Banner10</div>
</div>
</div>
<hr>
<h2> This is how it should look </h2>
<div class="main2">
<div class="img">Image 1</div>
<div class="banner">Banner1</div>
<div class="img">Image 2</div>
<div class="banner">Banner2</div>
<div class="img">Image 3</div>
<div class="banner">Banner3</div>
<div class="img">Image 4</div>
<div class="banner">Banner4</div>
<div class="img">Image 5</div>
<div class="banner">Banner5</div>
<div class="img">Image 6</div>
<div class="banner">Banner6</div>
<div class="banner">Banner7</div>
<div class="banner">Banner8</div>
<div class="banner">Banner9</div>
<div class="banner">Banner10</div>
</div>
To do what you require you can loop through the .banner elements and use their index to place them underneath the related .img element by their indexes using insertAfter(). Something like this:
let $imgs = $('.content .main .img');
$('.content .side .banner').each((i, el) => $(el).insertAfter($imgs[i]));
.content {
display: flex;
max-width: 800px;
min-width: 300px;
gap: 20px;
margin: auto;
}
.main {
flex: 70%;
}
.img,
.banner {
width: 100%;
min-width: 50px;
height: 50px;
display: grid;
place-items: center;
color: #fff;
margin: 10px auto;
}
.img {
background: blue;
}
.banner {
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
<div class="main">
<div class="img">Image 1</div>
<div class="img">Image 2</div>
<div class="img">Image 3</div>
<div class="img">Image 4</div>
<div class="img">Image 5</div>
<div class="img">Image 6</div>
</div>
<div class="side">
<div class="banner">Banner1</div>
<div class="banner">Banner2</div>
<div class="banner">Banner3</div>
<div class="banner">Banner4</div>
<div class="banner">Banner5</div>
<div class="banner">Banner6</div>
</div>
</div>
Well, to answer my own question, it was hard for me since I don't know JS that well.
I managed to make something that also randomizes the banners and I've used jquery.
jQuery("#btn").click(function() {
var cards = jQuery(".side .banner");
for(var i = 0; i < cards.length; i++){
var target = Math.floor(Math.random() * cards.length -1) + 1;
var target2 = Math.floor(Math.random() * cards.length -1) +1;
cards.eq(target).before(cards.eq(target2));
}
cards = jQuery(".side .banner");
var images = jQuery(".content.desk .img");
if (cards.length < images.length) {
for (var i=0; i<cards.length; i++) {
images.eq(i).after(cards.eq(i));
}
} else {
for (var i=0; i<images.length; i++) {
images.eq(i).after(cards.eq(i))
}
for (var i=images.length; i<cards.length; i++){
cards.eq(i-1).after(cards.eq(i));
}
}
});
body {
max-width:1250px;
margin:auto;
}
h1, h2, h3, h4 {
text-align:center;
}
.content {
display:flex;
max-width:800px;
min-width:300px;
gap:20px;
margin:auto;
}
.main {
flex: 70%;
}
.side {
flex: 30%;
background: lightblue;
padding:10px;
}
.img {
background:blue;
}
.banner {
background:red;
}
.img, .banner {
width:100%;
min-width:50px;
height:50px;
display:grid;
place-items: center;
color: #fff;
margin:10px auto;
}
<body>
<h1>Rearrange content</h1>
<div class="content desk">
<div class="main">
<button id="btn">Click to reorder and randomize</button>
<div class="img">Image 1</div>
<div class="img">Image 2</div>
<div class="img">Image 3</div>
<div class="img">Image 4</div>
<div class="img">Image 5</div>
<div class="img">Image 6</div>
<div class="img">Image 7</div>
<div class="img">Image 8</div>
<div class="img">Image 9</div>
<div class="img">Image 10</div>
<div class="img">Image 11</div>
<div class="img">Image 12</div>
<div class="img">Image 13</div>
</div>
<div class="side">
<div class="banner">Banner1</div>
<div class="banner">Banner2</div>
<div class="banner">Banner3</div>
<div class="banner">Banner4</div>
<div class="banner">Banner5</div>
<div class="banner">Banner6</div>
<div class="banner">Banner7</div>
<div class="banner">Banner8</div>
<div class="banner">Banner9</div>
<div class="banner">Banner10</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
</body>
Edit:
Here's another method that's a bit more concise.
const main = document.querySelectorAll('.main .img');
const side = document.querySelectorAll('.side .banner');
let offset;
side.forEach((banner, idx) => {
const img = main[idx] || offset;
img.insertAdjacentElement('afterend', banner);
offset = banner;
});
.content { display: flex }
.main, .side { flex-grow: 1 }
.content,
.main2 {
font-family: sans-serif;
line-height: 2;
color: white;
}
.img { background-color: red; margin: 3px;}
.banner { background-color: blue; margin: 3px;}
<div class="body">
<h2>Rearrange content - Place each div (banner) under each image </h2>
<div class="content">
<div class="main">
<div class="img">Image 1</div>
<div class="img">Image 2</div>
<div class="img">Image 3</div>
<div class="img">Image 4</div>
<div class="img">Image 5</div>
<div class="img">Image 6</div>
</div>
<div class="side">
<div class="banner">Banner1</div>
<div class="banner">Banner2</div>
<div class="banner">Banner3</div>
<div class="banner">Banner4</div>
<div class="banner">Banner5</div>
<div class="banner">Banner6</div>
<div class="banner">Banner7</div>
<div class="banner">Banner8</div>
<div class="banner">Banner9</div>
<div class="banner">Banner10</div>
</div>
</div>
</div>
Original:
You need to loop over the elements and then merge/combine the arrays as you are looping. There are multiple ways this can be done. Here's one way (with comments) that uses reduce to combine the elements.
If you're starting out with JS, I would suggest using a simple for loop to start off.
When you run the code snippet below, the original will be in Red. Clicking the button will merge the elements, append them, and display them in Green.
Good luck!
// I've wrapped this in a function so I can call it.
function rearrange() {
// First I'm going to query all the divs with 'img' class
// From that, I'll call 'Array.from' to create an array.
const images = Array.from(document.querySelectorAll('.img'));
// Similar to above, but for all the 'banner' divs.
const banners = Array.from(document.querySelectorAll('.banner'));
// This is my loop. I'm using .reduce, but for/while/.forEach/etc
// would all have worked.
// I'm going to loop over the images and push image/banner into
// a new container
const container = images.reduce(function (el, image) {
// get the first "banner" div
const banner = banners.shift();
// append the image div, first
el.appendChild(image);
// if a banner exists, append that
if (banner) {
el.appendChild(banner);
}
// as this is a reducer, i return my accumulator of divs
return el;
}, document.createElement('div'));
// As image/banner could differ in length, push any additional
// banner divs to the container
if (banners.length > 0) {
banners.forEach(banner => container.appendChild(banner));
}
// Add the new class name
container.classList.add('main2');
// Finally, append to body
document.querySelector('.body').appendChild(container);
}
// My event handler to run
document.querySelector('#rearrange').addEventListener('click', rearrange);
.content { display: flex }
.main, .side { flex-grow: 1 }
.content,
.main2 {
font-family: sans-serif;
line-height: 2;
color: white;
}
.img { background-color: red; margin: 3px;}
.banner { background-color: blue; margin: 3px;}
<div class="body">
<button id="rearrange">Click here to re-arrange</button>
<h2>Rearrange content - Place each div (banner) under each image </h2>
<div class="content">
<div class="main">
<div class="img">Image 1</div>
<div class="img">Image 2</div>
<div class="img">Image 3</div>
<div class="img">Image 4</div>
<div class="img">Image 5</div>
<div class="img">Image 6</div>
</div>
<div class="side">
<div class="banner">Banner1</div>
<div class="banner">Banner2</div>
<div class="banner">Banner3</div>
<div class="banner">Banner4</div>
<div class="banner">Banner5</div>
<div class="banner">Banner6</div>
<div class="banner">Banner7</div>
<div class="banner">Banner8</div>
<div class="banner">Banner9</div>
<div class="banner">Banner10</div>
</div>
</div>
<h2>Rearranged:</h2>
<hr />
</div>
For some reason when I'm using col-xs-* inside the panel-body, the content overlaps the panel-heading when I scroll down. This doesn't happen when I remove the col-xs-* and row tags.
Before Scrolling down:
After Scrolling down:
Source Code:
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
.navbar-collapse {
background-color: #69899f;
border-color: #425766;
}
.navbar-header {
background-color: #69899f;
border-color: #425766;
}
.navbar-collapse .navbar-text {
color: #d7e2e9;
}
.navbar-header .navbar-toggle .icon-bar {
background-color: #d7e2e9;
}
.affix {
top: 0;
width: 100%;
}
.affix+.container-fluid {
padding-top: 70px;
}
</style>
</head>
<body>
<div class="navbar fixed-top clearfix" style="border:1px solid #000;">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h2 style="margin-top: 8px;margin-bottom: 8px;margin-right: 80px">Title A</h2>
</div>
<nav class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Title B</li>
</ul>
</nav><!--/.nav-collapse -->
</div>
<div class="container-fluid">
<div class="tab-content clearfix">
<div id="menu1" class="tab-pane fade in active">
<h1 class="text-center">Title B</h1><br>
<div class="container" id="niftarim">
<div class="widget">
<div class="panel panel-info">
<div class="panel-heading"><p>Header</p></div>
<div class="panel-body" style="word-wrap: break-word;">
<div class="row">
<div class="col-xs-3">
<img src="http://placehold.it/40x140">
</div>
<div class="col-xs-9">
<p>bla bla bla</p>
</div>
</div>
</div>
</div>
</div>
<div class="widget">
<div class="panel panel-info">
<div class="panel-heading"><p>Header</p></div>
<div class="panel-body" style="word-wrap: break-word;">
<div class="row">
<div class="col-xs-3">
<img src="http://placehold.it/40x140">
</div>
<div class="col-xs-9">
<p>bla bla bla</p>
</div>
</div>
</div>
</div>
</div>
<div class="widget">
<div class="panel panel-info">
<div class="panel-heading"><p>Header</p></div>
<div class="panel-body" style="word-wrap: break-word;">
<div class="row">
<div class="col-xs-3">
<img src="http://placehold.it/40x140">
</div>
<div class="col-xs-9">
<p>bla bla bla</p>
</div>
</div>
</div>
</div>
</div>
<div class="widget">
<div class="panel panel-info">
<div class="panel-heading"><p>Header</p></div>
<div class="panel-body" style="word-wrap: break-word;">
<div class="row">
<div class="col-xs-3">
<img src="http://placehold.it/40x140">
</div>
<div class="col-xs-9">
<p>bla bla bla</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(function() {
$(".navbar").affix({
offset: {
top: $("header").outerHeight(true)
}
});
});
</script>
</body>
</html>
It's an issue with the navigation's z-index. Even just giving .navbar a z-index of 1 fixed the overlap for me. JSYK, the higher the number the less likely it will be under another element, so you should probably make it something like 999. Try these styles instead.
<style>
.navbar {
z-index: 1;
}
.navbar-collapse {
background-color: #69899f;
border-color: #425766;
}
.navbar-header {
background-color: #69899f;
border-color: #425766;
}
.navbar-collapse .navbar-text {
color: #d7e2e9;
}
.navbar-header .navbar-toggle .icon-bar {
background-color: #d7e2e9;
}
.affix {
top: 0;
width: 100%;
}
.affix+.container-fluid {
padding-top: 70px;
}
</style>
I am absolutely baffled bu this. Here's my CSS:
$(window).load(function(){
$('.zichtbaar').removeClass('zichtbaar').addClass('verborgen');
$('#zoekitem').focus();
$('.letter').on('click', function(){
$('.zichtbaar').addClass('verborgen').removeClass('zichtbaar');
var letter = $(this).text();
var klasse = "LETTER-" + letter;
var el = $('.' + klasse);
alert(klasse + " - " + el.length);
$('#alfabet-header').html(letter);
el.addClass('zichtbaar').removeClass('verborgen');
});
});
#zoekitem{
font-size: 1.3em;
}
#letter-header{
height: 32px;
color: royalblue;
font-size: 1.5em;
font-weight: bold;
overflow: hidden;
}
.letter{
float: left;
width: 3.7037037037037%;
cursor: pointer;
text-align: center;
}
#alfabet-header{
font-size: 5em;
font-weight: bold;
}
.inhoud{
margin-left: 10%;
}
.verborgen{
display:none;
}
#zoek-header{
font-size: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="letter-header">
<div class="letter">A</div>
<div class="letter">B</div>
<div class="letter">C</div>
<div class="letter">D</div>
<div class="letter">E</div>
<div class="letter">F</div>
<div class="letter">G</div>
<div class="letter">H</div>
<div class="letter">I</div>
<div class="letter">J</div>
<div class="letter">K</div>
<div class="letter">L</div>
<div class="letter">M</div>
<div class="letter">N</div>
<div class="letter">O</div>
<div class="letter">P</div>
<div class="letter">Q</div>
<div class="letter">R</div>
<div class="letter">S</div>
<div class="letter">T</div>
<div class="letter">U</div>
<div class="letter">V</div>
<div class="letter">W</div>
<div class="letter">X</div>
<div class="letter">Y</div>
<div class="letter">Z</div>
<div class="letter">0-9</div>
</div>
<br/>
<div>
<div id="alfabet-header"></div>
<div id="zoek-header" class="verborgen">Zoekresultaten voor:</div>
<div class="inhoud LETTER-A verborgen">Appels</div>
<div class="inhoud LETTER-B verborgen">Boerenkool</div>
<div class="inhoud LETTER-B verborgen">Bonen</div>
<div class="inhoud LETTER-B verborgen">Bosbessen</div>
<div class="inhoud LETTER-C verborgen">Citrus</div>
<div class="inhoud LETTER-K verborgen">Kappertjes</div>
<div class="inhoud LETTER-T verborgen">Tuinbonen</div>
<div class="inhoud LETTER-W verborgen">Witte kool</div>
</div>
When I click A, B, or T everything is fine; The alert shows the number of elements that have the classname that I'm looking for and displays them. But when I click C, K or W, the elements, although they clearly exist, are not found.
I haven't got the palest shade of a clue as to why this happens.
You've got a lot of Unicode zero-width space characters in your HTML source, and in particular there's one at the beginning of the text for the "C" box. When you access the .text() of the element, therefore, it's not just "C".
i just inspect the element. here i found the solution:
From #Pointy anwswer, you can remove these zero space, without changing the view. The srcipt to remove these space is .replace(/\u200B/g,'');
So your script will be like int his snippet
$(window).load(function () {
$('.zichtbaar').removeClass('zichtbaar').addClass('verborgen');
$('#zoekitem').focus();
$('.letter').on('click', function () {
$('.zichtbaar').addClass('verborgen').removeClass('zichtbaar');
var letter = '' + $(this).text().replace(/\u200B/g,'');
var klasse = "LETTER-" + letter;
var el = $('.' + klasse);
alert(klasse + " - " + el.length);
$('#alfabet-header').html(letter);
el.addClass('zichtbaar').removeClass('verborgen');
});
});
#zoekitem{
font-size: 1.3em;
}
#letter-header{
height: 32px;
color: royalblue;
font-size: 1.5em;
font-weight: bold;
overflow: hidden;
}
.letter{
float: left;
width: 3.7037037037037%;
cursor: pointer;
text-align: center;
}
#alfabet-header{
font-size: 5em;
font-weight: bold;
}
.inhoud{
margin-left: 10%;
}
.verborgen{
display:none;
}
#zoek-header{
font-size: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="letter-header">
<div class="letter">A</div>
<div class="letter">B</div>
<div class="letter">C</div>
<div class="letter">D</div>
<div class="letter">E</div>
<div class="letter">F</div>
<div class="letter">G</div>
<div class="letter">H</div>
<div class="letter">I</div>
<div class="letter">J</div>
<div class="letter">K</div>
<div class="letter">L</div>
<div class="letter">M</div>
<div class="letter">N</div>
<div class="letter">O</div>
<div class="letter">P</div>
<div class="letter">Q</div>
<div class="letter">R</div>
<div class="letter">S</div>
<div class="letter">T</div>
<div class="letter">U</div>
<div class="letter">V</div>
<div class="letter">W</div>
<div class="letter">X</div>
<div class="letter">Y</div>
<div class="letter">Z</div>
<div class="letter">0-9</div>
</div>
<br/>
<div>
<div id="alfabet-header"></div>
<div id="zoek-header" class="verborgen">Zoekresultaten voor:</div>
<div class="inhoud LETTER-A verborgen">Appels</div>
<div class="inhoud LETTER-B verborgen">Boerenkool</div>
<div class="inhoud LETTER-B verborgen">Bonen</div>
<div class="inhoud LETTER-B verborgen">Bosbessen</div>
<div class="inhoud LETTER-C verborgen">Citrus</div>
<div class="inhoud LETTER-K verborgen">Kappertjes</div>
<div class="inhoud LETTER-T verborgen">Tuinbonen</div>
<div class="inhoud LETTER-W verborgen">Witte kool</div>
</div>
Your problem is also solved if you copy my letter-header div here: these are free of NULL bytes.
<div class="letter">A</div>
<div class="letter">B</div>
<div class="letter">C</div>
<div class="letter">D</div>
<div class="letter">E</div>
<div class="letter">F</div>
<div class="letter">G</div>
<div class="letter">H</div>
<div class="letter">I</div>
<div class="letter">J</div>
<div class="letter">K</div>
<div class="letter">L</div>
<div class="letter">M</div>
<div class="letter">N</div>
<div class="letter">O</div>
<div class="letter">P</div>
<div class="letter">Q</div>
<div class="letter">R</div>
<div class="letter">S</div>
<div class="letter">T</div>
<div class="letter">U</div>
<div class="letter">V</div>
<div class="letter">W</div>
<div class="letter">X</div>
<div class="letter">Y</div>
<div class="letter">Z</div>
<div class="letter">0-9</div>
Removed unwanted Unicode characters.. check below snippet
$(window).load(function(){
$('.zichtbaar').removeClass('zichtbaar').addClass('verborgen');
$('#zoekitem').focus();
$('.letter').on('click', function(){
$('.zichtbaar').addClass('verborgen').removeClass('zichtbaar');
var letter = $(this).text();
var klasse = "LETTER-" + letter;
var el = $('.' + klasse);
alert(klasse + " - " + el.length);
$('#alfabet-header').html(letter);
el.addClass('zichtbaar').removeClass('verborgen');
});
});
#zoekitem{
font-size: 1.3em;
}
#letter-header{
height: 32px;
color: royalblue;
font-size: 1.5em;
font-weight: bold;
overflow: hidden;
}
.letter{
float: left;
width: 3.7037037037037%;
cursor: pointer;
text-align: center;
}
#alfabet-header{
font-size: 5em;
font-weight: bold;
}
.inhoud{
margin-left: 10%;
}
.verborgen{
display:none;
}
#zoek-header{
font-size: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="letter-header">
<div class="letter">A</div>
<div class="letter">B</div>
<div class="letter">C</div>
<div class="letter">D</div>
<div class="letter">E</div>
<div class="letter">F</div>
<div class="letter">G</div>
<div class="letter">H</div>
<div class="letter">I</div>
<div class="letter">J</div>
<div class="letter">K</div>
<div class="letter">L</div>
<div class="letter">M</div>
<div class="letter">N</div>
<div class="letter">O</div>
<div class="letter">P</div>
<div class="letter">Q</div>
<div class="letter">R</div>
<div class="letter">S</div>
<div class="letter">T</div>
<div class="letter">U</div>
<div class="letter">V</div>
<div class="letter">W</div>
<div class="letter">X</div>
<div class="letter">Y</div>
<div class="letter">Z</div>
<div class="letter">0-9</div>
</div>
<br/>
<div>
<div id="alfabet-header"></div>
<div id="zoek-header" class="verborgen">Zoekresultaten voor:</div>
<div class="inhoud LETTER-A verborgen">Appels</div>
<div class="inhoud LETTER-B verborgen">Boerenkool</div>
<div class="inhoud LETTER-B verborgen">Bonen</div>
<div class="inhoud LETTER-B verborgen">Bosbessen</div>
<div class="inhoud LETTER-C verborgen">Citrus</div>
<div class="inhoud LETTER-K verborgen">Kappertjes</div>
<div class="inhoud LETTER-T verborgen">Tuinbonen</div>
<div class="inhoud LETTER-W verborgen">Witte kool</div>
</div>
I have the following table, I want to choose an option and toggle the color between them. but can not repeat (only one option should be in green...) I've tried everything... =/
$(".roundedOpt").click(function(){
var opt = $(this);
$(opt).attr("style","background:#4AA14A;");
});
http://jsfiddle.net/HVw7E/326/
To toggle one in each list, do
$(".roundedOpt").on('click', function () {
var opts = $(this).closest('td').find('.roundedOpt');
opts.not(this).css('background', '#337AB7');
$(this).css('background', '#4AA14A');
});
FIDDLE
You don't need a variable for this, just use this. :) And I just reset all your blue items to blue first, then set the this clicked item to green. I upudated your js fiddle with this:
$(".roundedOpt").click(function()
{
$(".roundedOpt").removeAttr("style");
$(this).attr("style","background:#4AA14A;");
});
table {
border: 1px solid #000;
}
.roundedOpt {
border-radius: 50%;
width: 16px;
height: 16px;
background: #337AB7;
color: white;
text-align: center;
position:relative;
z-index:1;
font-size: 11.5px;
font-weight: bold;
cursor: pointer;
}
div.dleft {
position: absolute;
}
div.dright{
width:auto;
padding-left:24px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<table>
<tr id="trDetail1">
<td style="vertical-align: middle;">
<span>Options list #1</span>
</td>
<td class="text-justify" style="">
<div style="float:right;padding-left:5px;">
</div><p>Select an option below:</p>
<div style="padding-top:5px;">
<div class="cont">
<div class="dleft">
<div class="roundedOpt">A</div>
</div>
<div class="dright">Option A.</div>
</div>
<div class="cont">
<div class="dleft">
<div class="roundedOpt">B</div>
</div>
<div class="dright">Option B.</div>
</div>
<div class="cont">
<div class="dleft">
<div class="roundedOpt">C</div>
</div>
<div class="dright">Option C.</div>
</div>
<div class="cont">
<div class="dleft">
<div class="roundedOpt">D</div>
</div>
<div class="dright">Option D.</div>
</div>
<div class="cont">
<div class="dleft">
<div class="roundedOpt">E</div>
</div>
<div class="dright">Option E.</div>
</div>
</div>
</td>
</tr>
<br/>
<tr id="trDetail2">
<td style="vertical-align: middle;">
<span>Options list #2</span>
</td>
<td class="text-justify" style="">
<div style="float:right;padding-left:5px;">
</div><p>Select an option below:</p>
<div style="padding-top:5px;">
<div class="cont">
<div class="dleft">
<div class="roundedOpt">A</div>
</div>
<div class="dright">Option A.</div>
</div>
<div class="cont">
<div class="dleft">
<div class="roundedOpt">B</div>
</div>
<div class="dright">Option B.</div>
</div>
<div class="cont">
<div class="dleft">
<div class="roundedOpt">C</div>
</div>
<div class="dright">Option C.</div>
</div>
<div class="cont">
<div class="dleft">
<div class="roundedOpt">D</div>
</div>
<div class="dright">Option D.</div>
</div>
<div class="cont">
<div class="dleft">
<div class="roundedOpt">E</div>
</div>
<div class="dright">Option E.</div>
</div>
</div>
</td>
</tr>
</table>
Just take off your style on click
$(".roundedOpt").click(function(){
$(".roundedOpt").attr("style","");
var opt = $(this);
$(opt).attr("style","background:#4AA14A;");
});
Look at this Fiddle