Develop Reference

Replace css class using javascipt not working?

i want to change the class of the element when i click on an icon
i click
if the curent class is 'text_area_box' then remove it and add the 'text_area_box_active'
i tested the if(element.classList.contains('text_area_box')) and got true as a result so that means the condition work perfectly... js code is bellow.
Now replacing the classes should work but there is no result on the html page
The problem is on the javascript code where the condition work perfectly but the page does not change
here is my code:
function update_function() {
var element = document.getElementById("text_area_box");
if(element.classList.contains('text_area_box')) /*the condition works perfectly*/
{
element.classList.remove('text_area_box');
element.classList.add('text_area_box_active');
}
else{
element.classList.remove('text_area_box_active');
element.classList.add('text_area_box');
}
}
.text_area_box_active{
position: relative;
}
.text_area_box {
position: relative;
display: none;
}
<div class="swiper-slide">
<i class="fa-regular fa-pen-to-square" id="update_pen" onclick="update_function()"></i> <--- the button
<div class="services-item mb-40 elementor-repeater-item-78d8e80" id="swiper-slide-one">
<div class="services-item__content">
<div class="text_area_box" id="text_area_box"> <--- the class to change
<input type="text" name="" required="">
<label>Titre</label>
</div>
</div>
</div>
</div>
sorry if there is any lack of explanation.

It's working fine, your button was empty, so no click to call the function.
function update_function() {
var element = document.getElementById("text_area_box");
if(element.classList.contains('text_area_box')) /*the condition works perfectly*/
{
element.classList.remove('text_area_box');
element.classList.add('text_area_box_active');
}
else{
element.classList.remove('text_area_box_active');
element.classList.add('text_area_box');
}
}
.text_area_box_active{
position: relative;
}
.text_area_box {
position: relative;
display: none;
font-size: xx-large;
color: red;
}
<div class="swiper-slide">
<i class="fa-regular fa-pen-to-square" id="update_pen" onclick="update_function()">button</i> <--- the button
<div class="services-item mb-40 elementor-repeater-item-78d8e80" id="swiper-slide-one">
<div class="services-item__content">
<div class="text_area_box" id="text_area_box"> <--- the class to change
<input type="text" name="" required="">
<label>Titre</label>
</div>
</div>
</div>
</div>

I actualy was doing it all correctly but one small thing that i did not understend yet was causing the problem:
-When i changed document.getElementById('') to document.querySelector('') it worked fine.
javascript:
function update_function() {
var element = document.querySelector(".text_area_box"); // instead of getElementById
if(element.classList.contains('text_area_box')) /*the condition works perfectly*/
{
element.classList.remove('text_area_box');
element.classList.add('text_area_box_active');
}
else{
element.classList.remove('text_area_box_active');
element.classList.add('text_area_box');
}
}
.text_area_box_active{
position: relative;
}
.text_area_box {
position: relative;
display: none;
}
<div class="swiper-slide">
<i class="fa-regular fa-pen-to-square" id="update_pen" onclick="update_function()"></i> <--- the button
<div class="services-item mb-40 elementor-repeater-item-78d8e80" id="swiper-slide-one">
<div class="services-item__content">
<div class="text_area_box" id="text_area_box"> <--- the class to change
<input type="text" name="" required="">
<label>Titre</label>
</div>
</div>
</div>
</div>

What would be the best way to make a sort of drop-down-more-info div?

I have 4 divs with a more-info button on the bottom of each, like so:
http://codepen.io/anon/pen/VpVbPq
And when a user presses ' more info ' I would like for it to extend to the bottom and show extra info, obviously.
The problem is under the more-info div, text is seen, but what if I want to hide whats under it, even if its opacity is 0.6 ?
I thought it would've been the best if I draw what I need, so here:
Codepen code below:
html
<body>
<div class="wrapper">
<div class="info">
<p>
dummy text
</p>
<div class="more-info">more info</div>
</div>
<div class="info"><div class="more-info">more info</div></div>
<div class="info"><div class="more-info">more info</div></div>
<div class="info"><div class="more-info">more info</div></div>
</div>
</body>
css
.wrapper {
width: 1045px;
margin: 0 auto;
}
.info {
width: 500px; height: 200px;
background-color: #1A5AB6;
display: inline-block;
margin: 10px;
position: relative;
font-size: 20px;
overflow: hidden;
}
.more-info {
width: 100%; height: 40px;
background-color: #0C1B44;
bottom: 0; left: 0;
display: inline-block;
position: absolute;
font-size: 20px;
color: white;
line-height: 35px;
text-align: center;
opacity: 0.6;
}
.more-info:hover {background-color: #010716;}

In order to have the text expand, you can use a little jQuery to set the height to automatically adapt to however much text there is, and hide the 'more info' button entirely:
$(".more-info").on("click", function() {
$(this).css("opacity", "0");
$(this).parent().css("height", "auto");
});
With regards to not having the text visible behind the 'more info' button, you would need to set the opacity to 1:
.more-info {
opacity: 1;
}
This naturally distorts the colour a little, but you can always change the background colour and hover colour to cover this.
I've created an updated pen showcasing this here.
Hope this helps! :)

change your class selector definition as shown below:
.more-info {
width: 100%; height: 20%;
background-color: #0C1B44;
font-size: 20px;
color: white;
display: block;
text-align: center;
opacity: 0.6;
}
Then add this css for your paragraph element:
p {
height: 75%;
overflow: hidden;
margin: 5px;
}

Your question: "what would be the best way to make a sort of drop-down-more-info div?"
There is a built in function in Boot Strap that allows you to use a "data" class that does all the crunching for you. Just call on their css and js files externally or host on your server. Familiarize yourself with their data classes and call on their css/js classes to simplify previously arduous coding, like revealing a hidden DIV on click!
Note the data-toggle="collapse" and data-target="#more_info" lines in my div that holds the span tag that is the control for revealing the hidden <div id="more_info">:
`<div data-toggle="collapse" data-target="#more_info"><span class="glyphicon glyphicon-search"></span> <span title="Click for more info">more info</span></div>`
Then note the class in my hidden div. Note the id of the hidden div and the data-target #more_info. This can be used for classes as well, ie: .more_info. Everything is explained in more detail at bootstrap Github or their official site: http://getbootstrap.com/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
</head>
<body>
<div class="wrapper">
<div class="info">
<p>
Honestly, Bootstrap would be the easiest way to accomplish this without a doubt. Just click the more info button below.
</p>
<div data-toggle="collapse" data-target="#more_info"><span class="glyphicon glyphicon-search"></span> <span title="Click for more info">more info</span></div>
<div id="more_info" class="collapse">Some hidden infomration you ony want to be seen when the user click on the control link.</div>
</div>
or add three divs floating perfectly without all the css, each with drop downs more info.
<body>
<div class="wrapper row">
<div class="col-md-4">
<p>
Honestly, Bootstrap would be the easiest way to accomplish this without a doubt. Just click the more info button below.
</p>
<div data-toggle="collapse" data-target="#more_info">
<span class="glyphicon glyphicon-search"></span>
<span title="Click for more info">more info</span> </div>
<div id="more_info" class="collapse">
Some hidden information you only want to be seen when the user click on the control link.
</div>
</div>
<div class="col-md-4">
<p>
Some other information we want to have a hidden drop down with more info for.
</p>
<div data-toggle="collapse" data-target="#more_info2">
<span class="glyphicon glyphicon-search"></span>
<span title="Click for more info">more info</span>
</div>
<div id="more_info2" class="collapse">
Some hidden information you only want to be seen when the user click on the control link.</div>
</div>
<div class="col-md-4">
<p>
Yet another div with info that has a drop down menu for more info included below.
</p>
<div data-toggle="collapse" data-target="#more_info3">
<span class="glyphicon glyphicon-search"></span>
<span title="Click for more info">more info</span>
</div>
<div id="more_info3" class="collapse">
Some hidden infomration you ony want to be seen when the user click on the control link.
</div>
</div>
Best of luck.

How to style radio buttons differently if they fit in a single row?

PLAYGROUND HERE
I'd like to style radio buttons differently if they fit in a single row. For example:
The first container doesn't have enough space to fit all the radio buttons in a single row. Therefore, they appear vertically as normal radio buttons.
The second container has enough space. Therefore, the radio buttons appear as buttons.
Is that possible to achieve this behaviour using CSS only?
If not, Javascript "hack" is welcome.
PLAYGROUND HERE
HTML
<div class="container radio">
<div>
<input id="a1" type="radio" name="radio">
<label for="a1">Yes,</label>
</div>
<div>
<input id="a2" type="radio" name="radio">
<label for="a2">it</label>
</div>
<div>
<input id="a3" type="radio" name="radio">
<label for="a3">is</label>
</div>
<div>
<input id="a4" type="radio" name="radio">
<label for="a4">possible</label>
</div>
<div>
<input id="a5" type="radio" name="radio">
<label for="a5">to</label>
</div>
<div>
<input id="a6" type="radio" name="radio">
<label for="a6">achieve</label>
</div>
<div>
<input id="a7" type="radio" name="radio">
<label for="a7">this</label>
</div>
</div>
<div class="container buttons">
<div>
<input id="b1" type="radio" name="buttons">
<label for="b1">Yes,</label>
</div>
<div>
<input id="b2" type="radio" name="buttons">
<label for="b2">it</label>
</div>
<div>
<input id="b3" type="radio" name="buttons">
<label for="b3">is</label>
</div>
<div>
<input id="b4" type="radio" name="buttons">
<label for="b4">possible</label>
</div>
</div>
CSS (LESS)
.container {
display: flex;
width: 220px;
padding: 20px;
margin-top: 20px;
border: 1px solid black;
&.radio {
flex-direction: column;
}
&.buttons {
flex-direction: row;
> div {
input {
display: none;
&:checked + label {
background-color: #ADFFFE;
}
}
label {
padding: 5px 10px;
margin: 0 1px;
background-color: #ccc;
}
}
}
}

Not possible in CSS, but it doesn't take much JavaScript.
In CSS, add flex-shrink: 0 to > div. This will prevent .container's children from shrinking smaller than their extent.
In JavaScript:
Apply the buttons class.
Use Element.getBoundingClientRect to determine if the last child of .container is outside the extent of .container. If so, switch to the radio class. (You also need to take the right padding into account. Thanks to #Moob for pointing that out.)
Javascript
var container = document.querySelector('.container'),
lastChild= document.querySelector('.container > :last-child'),
paddingRight= parseInt(window.getComputedStyle(container, null).getPropertyValue('padding-right')),
timer;
window.onresize = function() {
clearTimeout(timer);
timer= setTimeout(function() {
container.classList.remove('radio');
container.classList.add('buttons');
if (container.getBoundingClientRect().right-paddingRight <
lastChild.getBoundingClientRect().right) {
container.classList.add('radio');
container.classList.remove('buttons');
}
});
}
Updated JSBin

I can't think of a CSS only solution but you could use JS to test if the items would fit in a row and apply the 'radio' or 'buttons' classname accordingly:
Forgive my rough JS - its inelegant and for modern browsers only but you get the idea:
var containers = document.querySelectorAll(".container"),
test = function(){
for (i = 0; i < containers.length; ++i) {
var container = containers[i],
divs = container.querySelectorAll("div"),
iw = 0;
container.classList.remove("radio");
container.classList.add("buttons");
//get the sum width of the div
for (d = 0; d < divs.length; ++d) {
iw+=divs[d].offsetWidth;
}
var style = window.getComputedStyle(container, null);
var ow = parseInt(style.getPropertyValue("width"));
if(ow<=iw){
container.classList.add("radio");
container.classList.remove("buttons");
}
}
};
window.onresize = function(event) {
test();
};
test();
http://jsbin.com/zofixakama/3/edit?html,css,js,output
(resize the window / panel to see the effect)
Update: If you add .container div {flex-shrink:0;} to the style the JS can be much simpler as we don't have to measure the combined width of the divs (thanks #rick-hitchcock). However, although the code is more elegant, it does not take the container's padding into account.
See: http://jsbin.com/zofixakama/5/edit?html,css,js,output

If I understand what you're asking correctly, you can change your flex-direction portion to row instead of column. This will cause them to align inside the box.
You'll have to do some more styling to properly get the labels to appear the way you want, but this should put them in the row for you. I've updated the playground with my changes.

Try the following example..............
------------HTML-----------
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="table-row">
<div class="col">
<input type="Radio">This
</div>
<div class="col" style="padding-top: 2px;">
<input type="Radio">Is
</div>
<div class="col">
<input type="Radio">Simply
</div>
<div class="col" style="padding-top: 2px;">
<input type="Radio">Possible
</div>
</div>
</body>
</html>
-------CSS-------------
.table-row{
display:table-row;
/* text-align: center; */
}
.col{
display:table-cell;
/* border: 1px solid #CCC; */
}

Wouldn't it work to test for width then if necessary remove the radio button icon and replace with a graphic or shape?
.checkbox {
display:none;
}
.label {
display: inline-block;
height: 20px;
background: url('picture.png');
}
It's probably not that simple but I use that for check boxes and it seems to work in that situation.

You can achieve this only by using css and no need of scripting.
HTML: You have to place the input within tag which will contain the text.
<div>
<label for="a1">
<input id="a1" type="radio" name="radio">Yes,
</label> </div>
CSS: Here in CSS we will have to hide the radio button, so that only the text will be visible. When the user clicks on the text, it actually clicks the radio button.
div lable input#a1{
display:none;
}

there is pretty solution CSS only, but you have to know maximum amount of elements in row. It is based on counter, but not on real size.
For example, if you are sure, that you can put 4 elements into a row, in any case, you may use following selector:
if amount is more less or equal 4:
div:nth-last-child(-n+5):first-child,
div:nth-last-child(-n+5):first-child ~ div {
}
if amount is more then 4:
div:nth-last-child(n+5),
div:nth-last-child(n+5) ~ div {
}
try this: http://jsbin.com/fozeromezi/2/edit (just remove/add divs)

JSon Output jQuery div Containers with Children & Attributes

I am currently working with jsPlumb & got stuck at saving & loading the containers. I figured out how to save the endpoints, connections & positions.
But I can't figure out, how to save the div containers, including their attributes, children & the children's attrubites.
Here's a snippet of the containers, any ideas how to stringify them?
<div class="window main node ui-draggable _jsPlumb_endpoint_anchor_" id="maincontainer1" data-nodetype="main" style="left: 663px; top: 200px; width: 230px; height: 200px;">
<div class="ctrl_container">
<div class="button_rm">x</div>
</div>
<div class="layer" id="layercontainer1_1" style="height: 80px; width: 100%; background: none repeat scroll 0% 0% transparent;">
<div class="window filter node" style="left:25px; top:5px;" name="3#2#ABC#" id="filtercontainer2_1_1">
<div class="ctrl_container">
<a class="filter_caption edit" href="#">Edit</a>
<div class="button_rm">x</div>
</div>
<div class="details_container">
<span id="filter_label" class="filter_label jtextfill" style="font-size: 22px;">PrimarySupportGrp = 123</span>
</div>
</div>
</div>
<div class="layer" id="layercontainer1_2" style="height: 90px; width: 100%; background: none repeat scroll 0% 0% rgba(0, 255, 255, 0.4);"><div class="line-separator"></div>
<div class="window filter node" style="left:25px; top:5px;" name="5#4#Yes#" id="filtercontainer2_2_1">
<div class="ctrl_container">
<a class="filter_caption edit" href="#">Edit</a>
<div class="button_rm">x</div>
</div>
<div style="" class="details_container">
<span id="filter_label" class="filter_label jtextfill" style="font-size: 14px;"> Site > Yes</span>
</div>
</div>
</div>
</div>

I don't suggest saving the complete children hierarchy, but if you want - why not use .html()
var data = [];
$(".layer").each(function(){
var html = $(this).html();
data.push(html);
});
OR
Just save what is required to re-render them at the correct position - left, top etc.
for(var i=0 ; i<length; i++){
var layerTemplate = "...div template html goes here";
var $layerTemplate = $(layerTemplate);
$layerTemplate.css({top : data[i].top , left : data[i].left});
$("#maincontainer1").append($layerTemplate);
}
Some time back I wrote a script for saving & re-rendering jsPlumb - https://github.com/nitinsurana/jsPlumb-Persistence

Iscroll div not working

I have a web application which lets you select various bits of furniture using checkboxes, then displays links to the exercises you can do with that piece of furniture. As i am using phonegap i have been trying to use iScroll for the divs that are displayed when the checkbox is ticked.
The Scroll div works perfectly with a simple paragraph, however when i try to add the code for the checkbox divs it does not work.
JAVASCRIPT
//CHECKBOX SHOW/HIDE
function showHideChair(box,id)
{
var chairData = document.getElementById(id)
chairData.style.display = box.checked? "inline":"none"
}
function showHideMatt(box,id)
{
var mattData = document.getElementById(id)
mattData.style.display = box.checked? "inline":"none"
}
function showHideBook(box,id)
{
var bookData = document.getElementById(id)
bookData.style.display = box.checked? "inline":"none"
}
function showHideBunjee(box,id)
{
var bunjeeData = document.getElementById(id)
bunjeeData.style.display = box.checked? "inline":"none"
}
function showHideBottle(box,id)
{
var bottleData = document.getElementById(id)
bottleData.style.display = box.checked? "inline":"none"
}
var myScroll;
function loaded() {
myScroll = new IScroll('#wrapper');
}
HTML
<body onload="loaded()">
<header>
<h1>Home Fitness</h1>
</header>
<section>
<h3>Abdominals</h3>
</section>
<p>Please select the the equipment you have available from the choices</p>
<div class="container">
<form >
<div class="chairCheckbox">
<label for="chair">Chair</label>
<input style="display:inline" type="checkbox" id="chair" value="chair" name="option" onClick="showHideChair(this,'myChair')">
<label for "floorMatt">Floor Matt</label>
<input style="display:inline" type="checkbox" id="floorMatt" value="floorMatt" name="option" onClick="showHideMatt(this,'myMatt')">
<label for "book">Hard Back Book</label>
<input style="display:inline" type="checkbox" id="book" value="book" name="option" onClick="showHideBook(this,'myBook')">
<label for "bunji">Bunji Cord</label>
<input style="display:inline" type="checkbox" id="bunji" value="bunji" name="option" onClick="showHideBunjee(this,'myBunjee')">
<label for "bottle">Water Bottle</label>
<input style="display:inline" type="checkbox" id="bottle" value="bottle" name="option" onClick="showHideBottle(this,'myBottle')">
</div>
</form>
</div>
<div id="wrapper">
<div id="scroller">
<!--ABS CHAIR-->
<div id="myChair" style="display:none;">
<div class="subBanner" >
<h4>Chair</h4>
</div>
<a class="Exercisebutton icon chair" href="ChairCrunch.html"><span>Chair Crunch</span></a>
<a class="Exercisebutton icon chair" href="ElevatedCrunch.html"><span>Elevated Crunch</span></a>
</div>
<!--ABS MATT-->
<div id="myMatt" style="display:none;">
<div class="subBanner" >
<h4>Matt</h4>
</div>
<a class="Exercisebutton icon matt" href="BWLegRaises.html"><span>Bodyweight Leg Raises</span></a>
<a class="Exercisebutton icon matt" href="BWPlank.html"><span>Bodyweight Plank</span></a>
</div>
<!--ABS BOOK-->
<div id="myBook" style="display:none;">
<div class="subBanner" >
<h4>Book</h4>
</div>
<a class="Exercisebutton icon book" href="BookTwists.html"><span>Book Twists</span></a>
<a class="Exercisebutton icon book" href="BookBridge.html"><span>Book Bridge</span></a>
</div>
<!--ABS BUNJEE-->
<div id="myBunjee" style="display:none;">
<div class="subBanner" >
<h4>Bunjee</h4>
</div>
<a class="Exercisebutton icon bunjee" href="BCPLank.html"><span>Bunjee Cord Plank</span></a>
<a class="Exercisebutton icon bunjee" href="BCHipRaise.html"><span>Bunjee Cord Hip Raise</span></a>
</div>
<!--ABS BOTTLE-->
<div id="myBottle" style="display:none;">
<div class="subBanner" >
<h4>Bottle</h4>
</div>
<a class="Exercisebutton icon bottle" href="BSitup.html"><span>Bottle Situp</span></a>
<a class="Exercisebutton icon bottle" href="BSidePress.html"><span>Bottle Side Press</span></a>
</div>
</div>
</div>
CSS
/*ISCROLL*/
#wrapper {
position: relative;
width: 90%;
height: 300px;
overflow: hidden;
/* Prevent native touch events on Windows */
-ms-touch-action: none;
/* Prevent the callout on tap-hold and text selection */
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#scroller {
position: absolute;
/* Prevent elements to be highlighted on tap */
-webkit-tap-highlight-color: rgba(0,0,0,0);
/* Put the scroller into the HW Compositing layer right from the start */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
I understand this is a lot of code, im sorry! but any help would be greatly be appreciated.!!

You HTML has lot of errors. Some of the tags inclusing input tags are not closed, label tags are not syntax correct. eg: <label for "book"> should be <label for="book">
You can validate your HTML code using online tools such as http://validator.w3.org/check
See if this helps you in recovering from error
Iscroll is invoked like myScroll = new iScroll('wrapper');
Here is a working example: http://lab.cubiq.org/iscroll/examples/simple/
and offcourse there are lot of SO questions on iScroll difficulties that users encountered, Please try them, and still if you are not getting through, then try a simple example with checkboxes, and if you are stuck, create a jsfiddle and post it here. we can help