So i'm using three unique IDs "titleselected0", "titleselected1", "titleselected2". Each with an onclick function which runs a function "myFunction0", "myFunction1", "myFunction2". I'm using this to change the styling. My question is whether I can use a loop so i only need to use one function instead of three?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style type="text/css">.collapse {
display: none;
}
.collapse.in {
display: block;
}
.title {
background-color: #005FAA;
border: none;
border-radius: 0;
padding: 30px;
}
.title:hover {
background-color: #009cde;
border: none;
border-radius: 0;
padding: 30px;
}
.container{
margin-top:25px;
float:left;
width: 32%;
margin-right: 2%;
}
.container:last-child{
margin-right:0px;
width:32%;}
#media only screen and (max-width: 800px) {
.container{
margin-top:15px;
width: 100%;
}
.container:last-child{
margin-top:15px;
width: 100%;
}
}
.titleselected{
background-color: #009cde;
border:none;
border-radius:0;
padding: 30px;
}
</style>
<div>
<div class="container">
<div class="title" data-toggle="collapse" href="#collapse" id="titleselected0" onclick="myFunction0()">
<h4>System Information</h4>
</div>
<div class="collapse" id="collapse" style="background-color:#005FAA;transition: width 200ms ease-out, height 200ms ease-out;">
<div style="color:white; padding: 30px;border:none;">
<p><strong>TestingTestingTestingTestingTestingTestingTesting</strong></p>
<ul>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
</ul>
<p><strong>TestingTestingTestingTestingTestingTestingTesting: </strong></p>
<ul>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="title" data-toggle="collapse" href="#collapse2" id="titleselected1" onclick="myFunction1()">
<h4>Product Specification</h4>
</div>
<div class="collapse" id="collapse2" style="background-color:#005FAA;transition: width 200ms ease-out, height 200ms ease-out;">
<div style="color:white; padding: 30px;border:none;">
<p><strong>TestingTestingTestingTestingTestingTestingTesting:</strong></p>
<ul>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="title" data-toggle="collapse" href="#collapse3" id="titleselected2" onclick="myFunction2()">
<h4>Case Study</h4>
</div>
<div class="collapse" id="collapse3" style="background-color:#005FAA;transition: width 200ms ease-out, height 200ms ease-out;">
<div style="color:white; padding: 30px;border:none;">
<p><strong>TestingTestingTestingTestingTestingTestingTesting: </strong></p>
<ul>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
<li>TestingTestingTestingTestingTestingTestingTesting appeared in the CIBSE Journal</li>
</ul>
</div>
</div>
</div>
</div>
<script>
function myFunction0() {
var element = document.getElementById("titleselected0");
element.classList.toggle("titleselected");
}
function myFunction1() {
var element = document.getElementById("titleselected1");
element.classList.toggle("titleselected");
}
function myFunction2() {
var element = document.getElementById("titleselected2");
element.classList.toggle("titleselected");
}
</script>
Those elements already have a class of title, so you can just loop over all .title elements and attach the listener:
document.querySelectorAll('.title').forEach((element) => {
element.addEventListener('click', () => {
element.classList.toggle("titleselected");
});
});
(feel free to delete all of their ids and the inline attribute onclick handlers - best to attach listeners with Javascript, not HTML)
You could also use event delegation on the container which has all .titles:
<div class="container-for-all">
<div class="container">
...
</div>
<div class="container">
...
</div>
<!-- etc -->
and
document.querySelector('.container-for-all').addEventListener('click', ({ target }) => {
const closestTitle = target.closest('.title');
if (!closestTitle) {
return;
}
closestTitle.classList.toggle('titleselected');
});
Related
I want to create a class for adding dropdown to menu even in the other dropdowns. I almost did it, but there is a problem and when I try to close the inner drop-down, the outer drop-down also closes.
When you click on secondary dropdown the first one will also close. What should I do to fix this?
$(".dropdown").each(function() {
$(this).on("click", function() {
if ($(this).attr("data-dropdown") == "closed") {
$(this).attr("data-dropdown", "opened");
$(this).css({
"height": "auto"
});
} else {
$(this).attr("data-dropdown", "closed");
$(this).css({
"height": "35px"
});
}
})
})
#font-face {
font-family: iransans;
src: url(font/IRANSansWeb.ttf);
}
* {
padding: 0;
margin: 0;
font-family: iransans;
}
html,
body {
height: 100%;
}
.menu {
position: absolute;
left: 0;
top: 0;
bottom: 0;
background-color: burlywood;
width: 200px;
}
.dropdown,
.dropdown-child {
height: 35px;
overflow: hidden;
}
.dropdown-item {
display: block;
padding: 6px;
}
.menu .dropdown-item:hover {
background-color: blueviolet;
cursor: pointer;
color: white;
}
<script src="https://kit.fontawesome.com/91f5230546.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="menu">
<div class="menu-item">
<div class="dropdown col-lg-12 col-md-12 col-sm-12 col-12" data-dropdown="closed">
<span class="dropdown-item"> Category <span><i class="fas fa-angle-down"></i></span></span>
<div>
<div>
<span class="dropdown-item">Category</span>
</div>
<div>
<span class="dropdown-item">Category</span>
</div>
<div>
<span class="dropdown-item">Category</span>
</div>
<div class="dropdown col-lg-12 col-md-12 col-sm-12 col-12" data-dropdown="closed">
<span class="dropdown-item"> Category <span><i class="fas fa-angle-down"></i></span></span>
<div>
<div>
<span class="dropdown-item">Category</span>
</div>
<div>
<span class="dropdown-item">Category</span>
</div>
<div>
<span class="dropdown-item">Category</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="menu-item">
<span>Category</span>
</div>
</div>
The main issue is because the event is propagating up the DOM, so although you click to toggle the child dropdown, the event is caught by the parent which then toggles and hides. To fix this problem, amend your click handler function to receive the event as an argument, then call stopPropagation() on it.
Also, note that you don't need to use each() here as jQuery will loop over all elements in the collection and assign the event to them. In addition you can simplify the code massively, just by using toggleClass().
Finally, it would be much better practice to hide/show the child div of the toggled dropdown instead of changing its height. This method allows you to perform more varied animations to transition the content from hidden to visible, and also prevents issues with text being clipped due to changes in font sizes or zoom levels.
Here's a working version:
$(".dropdown").on("click", e => {
e.stopPropagation();
$(e.currentTarget).toggleClass('open');
})
#font-face {
font-family: iransans;
src: url(font/IRANSansWeb.ttf);
}
* {
padding: 0;
margin: 0;
font-family: iransans;
}
html,
body {
height: 100%;
}
.menu {
position: absolute;
left: 0;
top: 0;
bottom: 0;
background-color: burlywood;
width: 200px;
}
.dropdown,
.dropdown-child {
overflow: hidden;
}
.dropdown>div {
display: none;
}
.dropdown.open>div {
display: block;
}
.dropdown-item {
display: block;
padding: 6px;
}
.menu .dropdown-item:hover {
background-color: blueviolet;
cursor: pointer;
color: white;
}
<script src="https://kit.fontawesome.com/91f5230546.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="menu">
<div class="menu-item">
<div class="dropdown col-lg-12 col-md-12 col-sm-12 col-12" data-dropdown="closed">
<span class="dropdown-item"> Category <span><i class="fas fa-angle-down"></i></span></span>
<div>
<div>
<span class="dropdown-item">Category</span>
</div>
<div>
<span class="dropdown-item">Category</span>
</div>
<div>
<span class="dropdown-item">Category</span>
</div>
<div class="dropdown col-lg-12 col-md-12 col-sm-12 col-12" data-dropdown="closed">
<span class="dropdown-item"> Category <span><i class="fas fa-angle-down"></i></span></span>
<div>
<div>
<span class="dropdown-item">Category</span>
</div>
<div>
<span class="dropdown-item">Category</span>
</div>
<div>
<span class="dropdown-item">Category</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="menu-item">
<span>Category</span>
</div>
</div>
Current Behavior
I have the following basic structure:
<section id="containers">
<div class="box" id="box1">
<div class="collapsible"><h2>Box 1</h2></div>
<div class="content">Content</div>
</div>
<div class="box" id="box2">
<div class="collapsible"><h2>Box 2</h2></div>
<div class="content">Content</div>
</div>
<!-- ... dozens of .boxes ... -->
</section>
#containers is .display: flex; flex-wrap: wrap, so the number of boxes on any one row is dynamic. This is an important feature that must be maintained.
Here's a minimal working example:
$(document).ready(function() {
$(".collapsible").click(function() {
$( this ).next().slideToggle();
});
});
#containers {
display: flex;
flex-wrap: wrap;
gap: 1em;
}
.box {
min-width: 15em;
background: #888;
border: #555 1px solid;
overflow: hidden;
border-radius: 0.5em;
}
.collapsible {
background: #ccc;
cursor: pointer;
}
.collapsible h2 {
margin: 0;
margin-left: 16px;
font-size: 2rem;
}
.collapsible:hover {
background: #aaf;
}
.content {
margin: 0.5em;
margin-left: 16px;
display: none; /* Initially collapsed */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<p id="status"></p>
<section id="containers">
<div class="box" id="box1">
<div class="collapsible"><h2>Box 1</h2></div>
<div class="content">Content</div>
</div>
<div class="box" id="box2">
<div class="collapsible"><h2>Box 2</h2></div>
<div class="content">Content</div>
</div>
<div class="box" id="box3">
<div class="collapsible"><h2>Box 3</h2></div>
<div class="content">Content</div>
</div>
<div class="box" id="box4">
<div class="collapsible"><h2>Box 4</h2></div>
<div class="content">Content</div>
</div>
<div class="box" id="box5">
<div class="collapsible"><h2>Box 5</h2></div>
<div class="content">Content</div>
</div>
</section>
</body>
I can easily use .slideToggle() to toggle visibility of a sibling (.content) underneath one of the clickable .collapsible divs:
$(".collapsible").click(function() {
$( this ).next().slideToggle();
});
Desired Behavior and Remarks
What I'd like is, on click of any .collapsible div in a row, the entire row will be toggled. That is, every .content div on the same horizontal row as displayed in the current viewport.
This must handle rows with dynamic number of columns, including viewport resizing. I'm flexible on the precise behavior, though.
Is this possible? And how much will it hurt?🙂 Changes to the document structure (such as adding some sort of row container) are OK, and I don't mind using some JS/jQuery code of course. The main thing I can't do is hard code the number of columns, as I need my site to remain responsive on vertical phones and fullscreen desktop browsers.
Maybe the jQuery slideToggle() function is not the best method.
Since a row will be the same height , you may look at a method to set size from 0 to another value. anybox resized will stretch other boxes on the same row.
here an example of the idea, setting a max-height from 0 to 200px and a transition.
it toggles a class.
$(document).ready(function() {
$(".collapsible").click(function() {
this.classList.toggle('slide');// plain javascript to toggle a class
});
});
*{box-sizing:border-box}
#containers {
display: flex;
flex-wrap: wrap;
gap: 1em;
}
.box {
min-width: 15em;
background: #888;
border: #555 1px solid;
overflow: hidden;
border-radius: 0.5em;
}
.collapsible {
background: #ccc;
cursor: pointer;
}
.collapsible h2 {
margin: 0;
margin-left: 16px;
font-size: 2rem;
}
p{margin-top:0;}
.collapsible:hover {
background: #aaf;
}
.content {
margin:0 0.5em;
margin-left: 16px;
max-height:0; /* Initially collapsed */
transition:0.5s
}
.slide + .content{max-height:400px;/* which one got the class*/ color:darkred}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<p id="status"></p>
<section id="containers">
<div class="box" id="box1">
<div class="collapsible"><h2>Box 1</h2></div>
<div class="content"><p>Content</p></div>
</div>
<div class="box" id="box2">
<div class="collapsible"><h2>Box 2</h2></div>
<div class="content"><p>Content</p><p>Content</p></div>
</div>
<div class="box" id="box3">
<div class="collapsible"><h2>Box 3</h2></div>
<div class="content"><p>Content</p></div>
</div>
<div class="box" id="box4">
<div class="collapsible"><h2>Box 4</h2></div>
<div class="content"><p>Content</p><p>Content</p><p>Content</p></div>
</div>
<div class="box" id="box5">
<div class="collapsible"><h2>Box 5</h2></div>
<div class="content"><p>Content</p></div>
</div>
</section>
</body>
What you are missing here , is to set the height of the row to the height of the taller box, unless they will all be the same height.
For this, you can look for every box at the same top offset that the one clicked, and look for the tallest innercontent of the .contents and use this height .
Here comes the idea looking where each are standing and resets a max-height rule, you can inspire from too:
// defaut : supposed to be with no class 'slide' set on html elements
$(document).ready(function () {
let boxes = document.querySelectorAll(".collapsible");
let contents = document.querySelectorAll(".content");
$(".collapsible").click(function (event) {
let arrayContent = [];//reset
let hide=false;
for (i = 0; i < contents.length; i++) {
contents[i].style.maxHeight = "min-content";
let index = i;
let heightC = contents[i].offsetTop;
let boxOffset = contents[i].parentNode.offsetTop + 1;
// a few infos .add/remove what is needed
arrayContent.push({
index,
heightC,
boxOffset
});
contents[i].setAttribute("style", "");// resets inline style
}
let rowOffset = this.offsetTop;
if(this.classList.contains('slide')) {
hide=true;
}
let classState = this.classList;
arrayContent.forEach(function (obj) {
if (obj.boxOffset == rowOffset) {
if(hide == true) boxes[obj.index].classList.add('slide');/* reset needed if window resized => rows reorganized ? */
boxes[obj.index].classList.toggle("slide");
} else {
boxes[obj.index].classList.remove("slide");
}
});
});
});
* {
box-sizing: border-box
}
#containers {
display: flex;
flex-wrap: wrap;
gap: 1em;
}
.box {
min-width: 15em;
background: #888;
border: #555 1px solid;
overflow: hidden;
border-radius: 0.5em;
}
.collapsible {
background: #ccc;
cursor: pointer;
}
.collapsible h2 {
margin: 0;
margin-left: 16px;
font-size: 2rem;
}
p {
margin-top: 0;
}
.collapsible:hover {
background: #aaf;
}
.content {
margin: 0 0.5em;
margin-left: 16px;
max-height: 0;
/* Initially collapsed */
transition: max-height 0.5s!important
}
.slide~.content {
max-height: 400px;
/* which one got the class*/
color: darkred;
}
.collapsible:before {
content: attr(class)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<p id="status"></p>
<section id="containers">
<div class="box" id="box1">
<div class="collapsible">
<h2>Box 1</h2>
</div>
<div class="content">
<p>Content</p>
</div>
</div>
<div class="box" id="box2">
<div class="collapsible">
<h2>Box 2</h2>
</div>
<div class="content">
<p>Content</p>
<p>Content</p>
</div>
</div>
<div class="box" id="box3">
<div class="collapsible">
<h2>Box 3</h2>
</div>
<div class="content">
<p>Content</p>
</div>
</div>
<div class="box" id="box4">
<div class="collapsible">
<h2>Box 4</h2>
</div>
<div class="content">
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>
<div class="box" id="box5">
<div class="collapsible">
<h2>Box 5</h2>
</div>
<div class="content">
<p>Content</p>
</div>
</div>
</section>
</body>
This question already has an answer here:
javascript setAttribute style
(1 answer)
Closed 3 years ago.
I am trying to place an svg over an image using javascript. However, the position:relative style isn't working. I think it might be due to the style getting overwritten by the style sheet. Is there something im missing?
function button() {
var evenPic = document.querySelectorAll("#userList li:nth-child(even) .avatar");
for (var i = 0; i < evenPic.length; i++) {
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", "100");
svg.setAttribute("height", "100");
svg.setAttribute("position", "absolute");
svg.setAttribute("top", "0");
svg.setAttribute("left", "0");
svg.setAttribute("fill", "yellow");
svg.setAttribute("opacity", "0.5");
var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circle.setAttribute("cx", "30");
circle.setAttribute("cy", "45");
circle.setAttribute("r", "31");
svg.appendChild(circle);
evenPic[i].appendChild(svg);
}
}
#container {
max-width: 400px;
}
header {
text-transform: uppercase;
padding-left: 7%
}
ol {
list-style: none;
}
ol li {
max-width: 400px;
}
.user {
margin: 20px;
padding-left: 20%;
font-family: arial;
}
.name {
/*font-weight: bold;*/
font-size: 120%;
margin-bottom: 10px;
}
.status {
font-size: 110%;
/*font-weight: bold;*/
margin-bottom: 10px;
}
.avatar {
position: relative;
}
.avatar img {
width: 17%;
padding-top: 4%;
float: left;
}
<div id="container">
<header>
Recent Conversations
</header>
<ol id="userList">
<li>
<div class="avatar">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Circle-icons-profile.svg">
</div>
<div class="user">
<div class="name">
Finn
</div>
<div class="status">
I'm a big deal
</div>
<div class="message">
Listen I've had a pretty messed...
</div>
<hr>
</div>
</li>
<li>
<div class="avatar">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Circle-icons-profile.svg">
</div>
<div class="user">
<div class="name">
Finn
</div>
<div class="status">
I'm a big deal
</div>
<div class="message">
Listen I've had a pretty messed...
</div>
<hr>
</div>
</li>
<li>
<div class="avatar">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Circle-icons-profile.svg">
</div>
<div class="user">
<div class="name">
Finn
</div>
<div class="status">
I'm a big deal
</div>
<div class="message">
Listen I've had a pretty messed...
</div>
<hr>
</div>
</li>
</ol>
<div id="buttons">
<button id="btn" onclick="button()">Button</button>
</div>
</div>
With this code, the svg image is created next to the avatar. Is there a way to create it on top of the avatar?
svg.setAttribute("position", "absolute");
position isn't an HTML or SVG attribute, it is a CSS property
svg.style.position = "absolute";
Simply add this CSS to .avatar svg :
position: absolute;
left: 0;
Since position: relative is set on your avatar, your SVG will be placed over it.
You could actually do this using CSS only instead of an SVG (simply by creating a yellow circle and placing it over it using the code below) :
<!DOCTYPE html>
<html>
<head>
<style>
#container {
max-width: 400px;
}
header {
text-transform: uppercase;
padding-left: 7%
}
ol {
list-style: none;
}
ol li {
max-width: 400px;
}
.user {
margin: 20px;
padding-left: 20%;
font-family:arial;
}
.name {
/*font-weight: bold;*/
font-size: 120%;
margin-bottom: 10px;
}
.status {
font-size: 110%;
/*font-weight: bold;*/
margin-bottom: 10px;
}
.avatar {
position:relative;
}
.avatar:after {
content: "";
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
background: yellow;
/* Using the same width and float as your image */
/* Forced to set a height using pixels since its parent has no height */
float: left;
width: 17%;
margin-top: 4%;
height: 62px;
opacity: 0;
transition: opacity 300ms;
}
.avatar.active:after {
opacity: 0.5;
}
.avatar img {
width: 17%;
padding-top:4%;
float: left;
}
</style>
</head>
<body>
<div id = "container">
<header>
Recent Conversations
</header>
<ol id = "userList">
<li>
<div class = "avatar">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Circle-icons-profile.svg">
</div>
<div class = "user">
<div class = "name">
Finn
</div>
<div class = "status">
I'm a big deal
</div>
<div class = "message">
Listen I've had a pretty messed...
</div>
<hr>
</div>
</li>
<li>
<div class = "avatar">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Circle-icons-profile.svg">
</div>
<div class = "user">
<div class = "name">
Finn
</div>
<div class = "status">
I'm a big deal
</div>
<div class = "message">
Listen I've had a pretty messed...
</div>
<hr>
</div>
</li>
<li>
<div class = "avatar">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Circle-icons-profile.svg">
</div>
<div class = "user">
<div class = "name">
Finn
</div>
<div class = "status">
I'm a big deal
</div>
<div class = "message">
Listen I've had a pretty messed...
</div>
<hr>
</div>
</li>
</ol>
<div id = "buttons">
<button id="btn" onclick="button()">Button</button>
</div>
</div>
</body>
<script>
function button(){
var evenPic = document.querySelectorAll("#userList li:nth-child(even) .avatar");
for(var i=0; i<evenPic.length; i++){
evenPic[i].classList.add("active");
}
}
</script>
</html>
I have these progress bars which are suppose to work as ratings and they look good:
I have applied some CSS and I change their width with JavaScript by reading values from text files.
But are not responsive at all and whenever the window is resized:
HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="second-part">
<div class="row">
<div class="side">
<div>5 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar11" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p11">150</div>
</div>
<div class="side">
<div>4 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar12" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p12">63</div>
</div>
<div class="side">
<div>3 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar13" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p13">15</div>
</div>
<div class="side">
<div>2 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar14" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p14">6</div>
</div>
<div class="side">
<div>1 star</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar15" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p15">20</div>
</div>
</div>
</div>
CSS:
* {
box-sizing: border-box;
}
/* Three column layout */
.side {
float: left;
width: 15%;
margin-top:10px;
}
.middle {
margin-top:10px;
float: left;
width: 70%;
}
/* Place text to the right */
.right {
text-align: left;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The bar container */
.bar-container {
width: 90%;
background-color: #f1f1f1;
text-align: center;
color: white;
}
/* Responsive layout - make the columns stack on top of each other instead of next to each other */
#media (max-width: 400px) {
.side, .middle {
width: 100%;
}
.right {
display: none;
}
}
JavaScript to change progress bar width:
var par1 = 4;
for(var i = 10; i < 16; i++) {
$('.p' + (i+1)).text(table[0][par1]);
$('.bar' + (i+1)).css("width", table[0][par1]);
par1++;
}
How could I make it more responsive? Thank you in advance!
I recommend using css flexbox, so the items wrap instead of overlap when the page is resized. You could use media queries with this to adjust the size of the items and container so they don't overlap/wrap. This site has a good explanation of flexbox: A Complete Guide to Flexbox.
I need to add an ease effect to the .dropdown div when it becomes visible with jQuery, but I'd be happy to do it with CSS as well. Any ideas? Thanks in advance :)
$('.btn').bind('click', function (){
$(this).parent().next('.dropdown').toggleClass('open');
});
.top,
.bottom {
background: #333;
height: 50px;
}
.dropdown {
height: 50px;
position: absolute;
color: black;
visibility: hidden;
}
.open {
position: relative;
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="top">
<button class="btn">Show content</button>
</div>
<div class="dropdown">
<p>Hidden content</p>
</div>
<div class="bottom">
</div>
https://jsfiddle.net/319zd1sg/1/
1 second fade in (https://jsfiddle.net/nh2fj27g/1/).
$('.btn').bind('click', function (){
var $dropdown = $(this).parent().next('.dropdown');
$dropdown.hasClass('open') ? $dropdown.toggleClass('open').animate({opacity: 0},1000) : $dropdown.css({opacity: 0}).toggleClass('open').animate({opacity: 1},1000);
});
Hope this helps.
$('.btn').bind('click', function() {
$('#drop').slideDown('slow');
});
.top,
.bottom {
background: #333;
height: 50px;
}
.dropdown {
display: block;
color: black;
width: 100%;
}
.drop {
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top">
<button class="btn">Show content</button>
</div>
<div id="drop" class="drop">
<div class="dropdown">
<p>Hidden content</p>
</div>
</div>
<div class="bottom">
</div>