I'm fairly new at learning to code and I'm just playing around with something. I have a panel and I have a button above it to resize the panel.
Here is my code:
var panel = document.getElementById("panel");
function panelResize() {
if (panel.style.width >= "75%") {
panel.style.width = "50%";
} else {
panel.style.width = "75%";
}
}
<button style="margin:10px" onclick="panelResize()">button</button>
<div class="col-md-12">
<div class="col-md-6" id="panel">
<div class="panel panel-default">
<div class="panel-heading">
<p>panel heading</p>
</div>
<div class="panel-body">
<p>panel body</p>
</div>
</div>
</div>
</div>
I know this code may not be 100% so I apologize.
I would like the button to be able to increase the width of the panel to col-md-8 for example, then to return back to col-md-6 with the same button if possible.
You can do this
var panel = document.getElementById("panel");
if(panel.classList.contains('col-md-6')){
panel.classList.remove('col-md-6');
panel.classList.add('col-md-8');
} else {
panel.classList.remove('col-md-8');
panel.classList.add('col-md-6');
}
Related
I wish to create two containers with the first containing elements to be dragged and dropped to the second when the user wishes. I actually succeed in displaying the two containers with the respective elements, but when I try dragging one of them to the second container separately, the whole block moves on.
Below is my code :
$(document).ready(function () {
$('.box-item').draggable({
cursor: 'move',
helper: "clone"
});
$("#container1").droppable({
drop: function (event, ui) {
var itemid = $(event.originalEvent.toElement).attr("itemid");
$('.box-item').each(function () {
if ($(this).attr("itemid") === itemid) {
$(this).appendTo("#container1");
}
});
}
});
$("#container2").droppable({
drop: function (event, ui) {
var itemid = $(event.originalEvent.toElement).attr("itemid");
$('.box-item').each(function () {
if ($(this).attr("itemid") === itemid) {
$(this).appendTo("#container2");
}
});
}
});
});
/* Styles go here */
.box-container {
height: 200px;
}
.box-item {
width: 100%;
z-index: 1000
}
<div class="row">
<div class="col-lg-11">
<div class="row">
<div class="col-lg-12">
#using (Html.BeginForm("", "", FormMethod.Post, new { id = "formAssignVehicles" }))
{
<fieldset>
<legend>Affecter des voitures par glisser-déposer</legend>
#{ }
<div class="col-xs-3">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Liste des véhicules</h3>
</div>
<div id="container1" class="panel-body box-container">
#foreach (var voiture in Model.ListeVoituresAffectees)
{
<div itemid="itm-1" class="btn btn-default box-item">
#Html.DisplayFor(model => voiture.MarqueVoiture.Libelle)
</div>
}
</div>
</div>
</div>
<div class="col-xs-3">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Liste des véhicules affectées</h3>
</div>
<div id="container2" class="panel-body box-container"></div>
</div>
</div>
<input type="button" value="Affecter les voitures" />
</fieldset>
}
</div>
</div>
</div>
</div>
Can't figure out where's the typo. Kindly help, please!
In your #foreach statement, all the elements are being given the same itemid "itm-1" so they are all affected the same way. Find a way to give each a unique itemid and that should solve the problem.
I have 4 divs with bootstrap col-md-3 class. When clicked on any Div, I am expanding width of that div to 100%, showing expanded contents and hiding(display:none) other divs.
On close button, I want to reverse changes, so I am trying to assign 25% width, hinding expanded contents and making other divs visible(display:block).
But changes are not getting reflected.
function openTab(tab) {
var i, x, y;
x = document.getElementsByClassName("containerTab");
y = document.getElementsByClassName("OuterTab");
for (i = 0; i < x.length; i++)
{
if(i==tab-1)
{
y[i].style.width="100%";
y[i].style.transition= "width 0.5s ease-in";
x[i].style.maxHeight="5000px";
x[i].style.transition= "max-height 1s ease-in";
}
else
{
y[i].style.display="none";
}
}
}
function closeTab(tab)
{
var i, x, y,z, a;
x = document.getElementsByClassName("containerTab");
y = document.getElementsByClassName("OuterTab");
for (i = 0; i < x.length; i++)
{
if(i==tab-1)
{
y[i].style.width= "25%";
y[i].style.transition= "width 0.5s ease-in";
x[i].style.maxHeight = "0px";
x[i].style.transition= "max-height 1s ease-in";
}
else
{
y[i].style.display = "block";
}
}
}
.border1{border: 1px solid; border-radius: 5px;padding:2px}
.border2{border: 1px solid; border-radius: 7px;padding:10px}
.containerTab {
cursor: pointer;
color: black;
max-height: 0;
min-height:0;
overflow: hidden;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid" style="padding:10px">
<div class="row">
<div class="col-md-3 col-xs-12 text-center OuterTab" onclick="openTab(1);" style="">
<div class="border1">
<div class="border2">
content 1
</div>
<div id="b1" class="containerTab" style="">
Expanded content 1
<div><button onclick="closeTab(1)">Close</button></div>
</div>
</div>
</div>
<div class="col-md-3 col-xs-12 text-center OuterTab" onclick="openTab(2);" style="">
<div class="border1">
<div class="border2">
content 2
</div>
<div id="b2" class="containerTab" style="width:100%;">
Expanded content 2
<div><button onclick="closeTab(1)">Close</button></div>
</div>
</div>
</div>
<div class="col-md-3 col-xs-12 text-center OuterTab" onclick="openTab(3);" style="">
<div class="border1">
<div class="border2">
content 3
</div>
<div id="b3" class="containerTab" style="width:100%;">
Expanded content 3
<div><button onclick="closeTab(1)">Close</button></div>
</div>
</div>
</div>
<div class="col-md-3 col-xs-12 text-center OuterTab" onclick="openTab(4);" style="">
<div class="border1">
<div class="border2">
content 4
</div>
<div id="b3" class="containerTab" style="width:100%;">
Expanded content 4
<div><button onclick="closeTab(1)">Close</button></div>
</div>
</div>
</div>
</div>
Instead of re-applying the individual styles. Apply the new styles by simply adding a CSS class. Then on the click of the Close button, simply remove that class, which will cause the affected elements to revert to their previous style.
addClass and removeClass in jQuery - not removing class
Got answer in this post. Seems the problem was due to event bubbling as close button was inside clickable div, both closetab tab and opentab events were getting called. Worked fine when moved "close" button outside div.
I need some help implementing jQuery cookies.
I made a masonry grid in codepen where you can minimize and maximize the div blocks.
<div class="container">
<br>
<div class="row">
<div id="panel1" class="col-xs-6 col-lg-4">
<div id="title"><b>Block 1</b>
<div class="button" onclick="Close1()">-</div>
</div>
1</div>
<div id="panel2" class="col-xs-6 col-lg-4 tall">
<div id="title"><b>Block 2</b>
<div class="button" onclick="Close2()">-</div>
</div>
2</div>
<div class="col-xs-6 col-lg-4">3</div>
<div class="col-xs-6 col-lg-4 tall">4</div>
<div class="col-xs-6 col-lg-4 taller">5</div>
<div class="col-xs-6 col-lg-4">6</div>
<div class="col-xs-6 col-lg-4 tall">7</div>
<div class="col-xs-6 col-lg-4">8</div>
<div class="col-xs-6 col-lg-4">9</div>
<div class="col-xs-6 col-lg-4 taller">10</div>
</div>
</div>
<div id="footer">
<div id="icon1" class="icon" onclick="Open1()">Open 1</div>
<div id="icon2" class="icon" onclick="Open2()">Open 2</div>
</div
$('.row').masonry({
itemSelector : '.col-xs-6'
});
"use strict";
// End of what's configurable.
var clicked = null;
var pane = document.getElementById('panel1');
function Close1() {
document.getElementById("panel1").style.opacity = "0";
document.getElementById("panel1").style.display = "none";
document.getElementById("icon1").style.display = "inline-block";
}
function Open1() {
document.getElementById("panel1").style.opacity = "1";
document.getElementById("panel1").style.display = "block";
document.getElementById("icon1").style.display = "none";
}
function Close2() {
document.getElementById("panel2").style.opacity = "0";
document.getElementById("panel2").style.display = "none";
document.getElementById("icon2").style.display = "inline-block";
}
function Open2() {
document.getElementById("panel2").style.opacity = "1";
document.getElementById("panel2").style.display = "block";
document.getElementById("icon2").style.display = "none";
}
https://codepen.io/ariellbell/pen/bQMyOX
I want to be able to store these settings using jquery cookies (and/or html web storage) and after the user clicks on the button maybe add an (ajax) refresh setting to reorganize the div blocks in the masonray.
I am new to using jquery (and also cookie settings).
So i have difficulty implementing this in the code.
Any help is appreciated!
Thanks
So i made a new pen with cleaned up jquery functions and added the cookies. However the cookies work partly. I have trouble setting it for multiple divs.
What goes wrong?
if(Cookies.get("cohide")=="Enabled"){
$(".block1").addClass('minimalize');
$(".icon").addClass('inline');
}
if(Cookies.get("coshow")=="Enabled"){
$(".block1").removeClass('minimalize');
$(".icon").removeClass('inline');
}
"use strict";
// End of what's configurable.
//var clicked = null;
$('.block1').click(function(){
// remove set darkmode cookie, add lightmode cookie
Cookies.remove('coshow');
Cookies.set('cohide', 'Enabled');
$(this).addClass('minimalize');
var id1 = $(this).data().value;
//var y = document.getElementById(id1);
document.getElementById(id1).classList.add("inline");
console.log("Setted Cookie cohide");
});
$('.icon').click(function(){
Cookies.remove('cohide');
Cookies.set('coshow', 'Enabled');
$(this).removeClass('inline');
var id2 = $(this).data().value;
document.getElementById(id2).classList.remove("minimalize");
// document.getElementById(id1).style.display = "inline";
console.log("Setted Cookie coshow");
});
https://codepen.io/ariellbell/pen/jQKYaz
My question is abou make "continue" button appear when items selected and disappear when items unselected using JavaScript.
var typpro = document.getElementsByClassName("typpro"),
continubutton = document.getElementsByClassName("continue");
var w;
for (w = 0; w < typpro.length; w++) {
typpro[w].onclick = function () {
'use strict';
this.classList.toggle("active");
if (this.classList.contains("active")) {
continubutton[0].style.height = "100px";
} else {
continubutton[0].style.height = "0px";
}
};
}
<div class=" col-md-3 col-sm-4 col-xs-6">
<div class="typpro">
<button>Volume Button</button>
</div>
</div>
<div class=" col-xs-12">
<div class="typpro">
<button style="width:98%">Other</button>
</div>
</div>
<div class=" col-xs-12">
<div class="inputpro">
<input type="text" placeholder="your Problem">
</div>
</div>
<div class=" col-xs-12">
<div class="continue">
<button>Continue</button>
</div>
</div>
</div>
</div>
So, you've got a couple of things working against you with your code as it stands.
Firstly, you need to actually define your continubutton variable, like so:
HTML
<button id="continubutton" style="display: none;">Continue</button>
JS:
var continubutton = document.getElementById('continubutton');
Then, you also need to define your typpro variable, like so:
JS:
var typpro = document.getElementsByClassName('typpro');
For what you're trying to do, I went with display: inline and display: none, instead of the height change because there would be a fair amount of additional CSS you would need to do to accomplish this. But here is the final result:
HTML:
<div class=" col-md-3 col-sm-4 col-xs-6">
<div class="typpro">
<button>Screnen</button>
</div>
</div>
<div class=" col-md-3 col-sm-4 col-xs-6">
<div class="typpro">
<button>Battery</button>
</div>
</div>
<button id="continubutton" style="display: none;">Continue</button>
</div>
And the JS:
var w;
var typpro = document.getElementsByClassName('typpro');
var continubutton = document.getElementById('continubutton');
for (w = 0; w < typpro.length; w++){
typpro[w].onclick = function () {
'use strict';
this.classList.toggle("active");
if(this.classList.contains("active")){
continubutton[0].style.display = "inline";
} else {
continubutton[0].style.display = "none";
}
};
}
EDIT: Since using height seems to be the route we need to go, here is updated code:
var w;
var typpro = document.getElementsByClassName('typpro');
var continubutton = document.getElementsByClassName('continue');
for (w = 0; w < typpro.length; w++){
typpro[w].onclick = function () {
'use strict';
this.classList.toggle("active");
if(this.classList.contains("active")){
continubutton[0].style.height = "100px";
} else {
continubutton[0].style.height = "0px";
}
};
}
<div class=" col-md-3 col-sm-4 col-xs-6">
<div class="typpro">
<button>Screnen</button>
</div>
</div>
<div class=" col-md-3 col-sm-4 col-xs-6">
<div class="typpro">
<button>Battery</button>
</div>
</div>
<div class="continue" style="height: 0;overflow:hidden;">
<button id="continubutton">Continue</button>
</div>
</div>
It's important that you set the initial height on your <div class="continue"></div> container, and that you set it to overflow: hidden; so anything that falls outside of the bounding box is hidden from view. This will allow you to animate the height so the button appears "hidden" until an option is selected.
the solution is
for (let btn of typpro) {
btn.addEventListener('click', function() {
let token = 0;
this.classList.toggle('active');
for (let i = 0; i < typpro.length; i += 1) {
if (typpro[i].classList.contains('active')) {
token += 1;
}
}
if (token > 0) {
continubutton[0].style.height = '100px';
} else {
continubutton[0].style.height = '0';
}
});
}
I have following condition in which what i want is when my child div's first class col-md-4 and beneath div class's numeric digits 4+4+4 >= 12 then wrap those in div having class row.Fidle of my problem Fiddle
<div class="row questionsRows">
<div class="col-md-4 coulmnQuestions"></div>
<div class="col-md-4 coulmnQuestions"></div>
<div class="col-md-4 coulmnQuestions"></div>
<div class="col-md-4 coulmnQuestions"></div>
<div class="col-md-4 coulmnQuestions"></div>
</div>
now i want to wrap divs in a row when my count of inner div's class is 12.
like this
<div class="row questionsRows">
<div class="row">
<div class="col-md-4 coulmnQuestions"></div>
<div class="col-md-4 coulmnQuestions"></div>
<div class="col-md-4 coulmnQuestions"></div>
</div>
<div class="row">
<div class="col-md-4 coulmnQuestions"></div>
<div class="col-md-4 coulmnQuestions"></div>
</div>
</div>
Code i have tried :
function WrapRows() {
var RowComplete = 0;
var divs;
$('.questionsRows').children('.coulmnQuestions').each(function () {
debugger;
var classes = $(this).attr("class").split(" ");
var getFirstClass = classes[0];
var value = getFirstClass.slice(7);
RowComplete = RowComplete + value;
divs = $(this).add($(this).next());
if (RowComplete >= 12)
{
divs.wrapAll('<div class="row"></div>');
RowComplete = 0;
}
});
and its not giving desired result , its not adding first row .
<div class="row questionsRows">
<div class="col-md-4 coulmnQuestions"></div>
<div class="row">
<div class="col-md-4 coulmnQuestions"></div>
<div class="col-md-4 coulmnQuestions"></div>
</div>
</div>
I got it:
var RowComplete = 0;
var divs;
$('.questionsRows').children('.coulmnQuestions').each(function () {
var classes = $(this).attr("class").split(" ");
var getFirstClass = classes[0];
var value = parseInt(getFirstClass.slice(7));
if(RowComplete==0) {
divs = $(this);
} else {
divs = divs.add($(this))
}
RowComplete = RowComplete + value;
console.log(RowComplete)
if (RowComplete >= 12)
{
console.log(divs)
divs.wrapAll('<div class="wrapper"></div>');
RowComplete = 0;
}
});
My guess is that in this line:
divs = $(this).add($(this).next());
you are catching the next tag of <div class="col-md-4 coulmnQuestions"></div>, and you should get the same tag, I mean <div class="col-md-4 coulmnQuestions"></div> tag. So I'd do:
divs = $(this).add($(this));
Anyway, if you add the code at http://jsfiddle.net it would be easier to see for us.