I have a board with sortable swim lanes that contain multiple div items (think of a horizontal kanban board). When I grab an item to move it though all of the items in the swim lane are pushed down. I've been banging my head on this so I'm hoping you guys can help me.
Here's a link to my JSFiddle
$(function() {
$(".swim-lane-wrapper")
.sortable({
axis: "Y",
handle: ".category-box",
connectWith: ".swim-lane-wrapper",
})
.disableSelection();
});
$(function() {
$(".sortable")
.sortable({
connectWith: ".sortable",
})
.disableSelection();
});
.swim-lane {
display: inline-block;
white-space: nowrap;
float: left;
width: 90%;
height: 100px;
border: 1px solid red;
}
.category-box {
display: inline-block;
white-space: nowrap;
float: left;
background-color: #FFF3CC;
border: #DFBC6A 1px solid;
width: 75px;
height: 50px;
margin: 5px;
padding: 10px;
font-size: 12px;
white-space: normal;
text-align: center;
box-shadow: 2px 2px 2px #999;
cursor: move;
}
.item-box {
display: inline-block;
background-color: #edf3ff;
border: #6d71db 1px solid;
width: 75px;
height: 50px;
margin: 5px;
padding: 10px;
font-size: 12px;
white-space: normal;
text-align: center;
box-shadow: 2px 2px 2px #999;
cursor: move;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylsheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<div class="swim-lane-wrapper">
<!-- Row One -->
<div class="swim-lane">
<div class="category-box">"Category 1"</div>
<div class="sortable">
<div class="item-box">"Wrap this long string of text please!"</div>
<div class="item-box">"Wrap this long string of text please!"</div>
<div class="item-box">"Wrap this long string of text please!"</div>
</div>
</div>
<!-- Row Two -->
<div class="swim-lane">
<div class="category-box">"Category 2"</div>
<div class="sortable">
<div class="item-box">"Wrap this long string of text please!"</div>
<div class="item-box">"Wrap this long string of text please!"</div>
<div class="item-box">"Wrap this long string of text please!"</div>
</div>
</div>
</div>
Add vertical-align: top; to .item-box
$(function() {
$(".swim-lane-wrapper")
.sortable({
axis: "Y",
handle: ".category-box",
connectWith: ".swim-lane-wrapper",
})
.disableSelection();
});
$(function() {
$(".sortable")
.sortable({
connectWith: ".sortable",
})
.disableSelection();
});
.swim-lane {
display: inline-block;
white-space: nowrap;
float: left;
width: 90%;
height: 100px;
border: 1px solid red;
}
.category-box {
display: inline-block;
white-space: nowrap;
float: left;
background-color: #FFF3CC;
border: #DFBC6A 1px solid;
width: 75px;
height: 50px;
margin: 5px;
padding: 10px;
font-size: 12px;
white-space: normal;
text-align: center;
box-shadow: 2px 2px 2px #999;
cursor: move;
}
.item-box {
display: inline-block;
vertical-align: top;
background-color: #edf3ff;
border: #6d71db 1px solid;
width: 75px;
height: 50px;
margin: 5px;
padding: 10px;
font-size: 12px;
white-space: normal;
text-align: center;
box-shadow: 2px 2px 2px #999;
cursor: move;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylsheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<div class="swim-lane-wrapper">
<!-- Row One -->
<div class="swim-lane">
<div class="category-box">"Category 1"</div>
<div class="sortable">
<div class="item-box">"Wrap this long string of text please!"</div>
<div class="item-box">"Wrap this long string of text please!"</div>
<div class="item-box">"Wrap this long string of text please!"</div>
</div>
</div>
<!-- Row Two -->
<div class="swim-lane">
<div class="category-box">"Category 2"</div>
<div class="sortable">
<div class="item-box">"Wrap this long string of text please!"</div>
<div class="item-box">"Wrap this long string of text please!"</div>
<div class="item-box">"Wrap this long string of text please!"</div>
</div>
</div>
</div>
I agree with the answer of #manuel but I wrtie this solution for who looks for the reason behind this problem. The UI sortable uses a temporary placeholder with the class name of .ui-sortable-placeholder in the place of the hanged element. This is a hidden element with the same width and height of main element. It has no extra styles and is not defined in the UI CSS file.
You can specify the height of this hidden element by this hacky style and prevent neighbor elements to loose their position:
.ui-sortable-placeholder {
display:inline-block;
height: 1px;
}
Related
VIDEO I made it so when ever you a click a button the user is able to duplicate the note div but the copied not div do not function as the original it's not draggable and also when ever I change the color of the copied note it changes the original note color is there a way I could fix this and make it the duplicated notes work exactly like the original note?
Online Editor For The Project
I use jquery to make my div with the id note draggable and and also clone
$('#note').draggable({
handle: "#headeR"
});
//this will duplicate the note container
function dup(){
$(function(){
$('#note').clone().appendTo('#notecopy');
});
the div that I'm duplicating
<!-- my note area container-->
<div class="NoteSection" id="note">
<!--text container-->
<!--text header with colors-->
<div id="headeR">
<button id="color#1" class="BtnColor1" onclick="greennote()"></button>
<!--buttons to change color-->
<button id="color#1" class="BtnColor2" onclick="bluecolor()"></button>
<button id="color#1" class="BtnColor3" onclick="redcolor()"></button>
<button id="color#1" class="BtnColor4" onclick="purplecolor()"></button>
<button class="BtnColor5" onclick="deleteR()"><span class="black"></span><span
class="material-symbols-outlined">Delete</span></button>
</div>
<!--text header with colors-->
<!--text area-->
<div class="textspot" id="NOTEE">
<textarea id="notepage" name="notes" row="20" cols="20" maxlength="67"></textarea>
</div>
<!--text area-->
</div>
Full Code
<!DOCTYPE html>
<html>
<title>Online HTML Editor</title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<style>.NoteSection {
font-family: 'Combo', cursive;
background-color: #E2F1FF;
height: 50px;
width: 245px;
color: black;
font-size: 25px;
outline: none;
box-shadow: 4px 4px 15px 2px #AFC4D7;
opacity: 0.9;
position: relative;
left: 250px;
}
textarea {
font-family: 'Combo', cursive;
background-color: #E2F1FF;
height: 240px;
width: 240px;
position: relative;
bottom: 83%;
color: black;
font-size: 25px;
outline: none;
box-shadow: 4px 4px 15px 2px #AFC4D7;
opacity: 0.9;
resize: none;
}
.BtnColor1 {
background-color: #C2EA92;
width: 30px;
border: none;
border-radius: 2px;
height: 30px;
box-shadow: 1px 1px 15px #728F4E;
}
.BtnColor2 {
background-color: #92EADD;
width: 30px;
border: none;
border-radius: 2px;
height: 30px;
box-shadow: 1px 1px 15px #4E8F8C;
}
.BtnColor3 {
background-color: #EA92A5;
width: 30px;
border: none;
border-radius: 2px;
height: 30px;
box-shadow: 1px 1px 15px #8F4E55;
}
</style>
<body>
<div class="Container" id="'note'">
<div class="addnote">
<button onclick="dup()" class="Btn3" type="button"> <span class="black">N</span>ote
<span class="material-symbols-outlined">
add_box
</span></button>
</div>
<!-- my note area container-->
<div class="NoteSection" id="note">
<!--text container-->
<!--text header with colors-->
<div id="headeR">
<button id="color#1" class="BtnColor1" onclick="greennote()"></button>
<!--buttons to change color-->
<button id="color#1" class="BtnColor2" onclick="bluecolor()"></button>
<button id="color#1" class="BtnColor3" onclick="redcolor()"></button>
<button id="color#1" class="BtnColor4" onclick="purplecolor()"></button>
<button class="BtnColor5" onclick="deleteR()"><span class="black"></span><span
class="material-symbols-outlined">Delete</span></button>
</div>
<!--text header with colors-->
<!--text area-->
<div class="textspot" id="NOTEE">
<textarea id="notepage" name="notes" row="20" cols="20" maxlength="67"></textarea>
</div>
<!--text area-->
</div>
<div id="notecopy" style="width:0px; height:0px;">
</div>
<script>
$('#note').draggable({
handle: "#headeR"
});
//this will duplicate the note container
function dup(){
$(function(){
$('#note').clone().appendTo('#notecopy');
});
}
// changes notes colors
function greennote(){
document.getElementById("notepage").style.backgroundColor = "#C2EA92";
}
function bluecolor(){
document.getElementById("notepage").style.backgroundColor = "#92EADD";
}
function redcolor(){
document.getElementById("notepage").style.backgroundColor = "#EA92A5";
}
function purplecolor(){
document.getElementById("notepage").style.backgroundColor = "#EA92E9";
}
</script>
</body>
</html>
You need to understand that ID tags have to be unique. You are reusing them each time you make your clone and that is partly why this isn't working for you.
I show below a few ways of working around this and optimizing your code. Notice I don't use ID's at all in the javascript. I left the references in HTML because I didn't want to clean all the excess .. just show the JS. Notice how i use element.closest(ref) to find a container so I know which buttons affect which notepad. I also show how you can use that same logic for a delete function
$('.NoteSection').draggable({
handle: ".headeR"
});
// get the 'master' refrerence so we can use it to make copies easily
let masterCopy = $('.NoteSection').first()
//this will duplicate the note container
function dup() {
masterCopy.clone().appendTo('#notecopy');
}
// changes notes colors
let colors = {
green: '#C2EA92',
blue: "#92EADD",
red: "#EA92A5",
purple: "#EA92E9"
}
function deleteR(el) {
el.closest('.NoteSection').remove()
}
function changeColor(el, color) { el.closest('.NoteSection').querySelector(".notepage").style.backgroundColor = colors[color];
}
.NoteSection {
font-family: 'Combo', cursive;
background-color: #E2F1FF;
height: 50px;
width: 245px;
color: black;
font-size: 25px;
outline: none;
box-shadow: 4px 4px 15px 2px #AFC4D7;
opacity: 0.9;
position: relative;
left: 250px;
}
textarea {
font-family: 'Combo', cursive;
background-color: #E2F1FF;
height: 240px;
width: 240px;
position: relative;
bottom: 83%;
color: black;
font-size: 25px;
outline: none;
box-shadow: 4px 4px 15px 2px #AFC4D7;
opacity: 0.9;
resize: none;
}
.BtnColor1 {
background-color: #C2EA92;
width: 30px;
border: none;
border-radius: 2px;
height: 30px;
box-shadow: 1px 1px 15px #728F4E;
}
.BtnColor2 {
background-color: #92EADD;
width: 30px;
border: none;
border-radius: 2px;
height: 30px;
box-shadow: 1px 1px 15px #4E8F8C;
}
.BtnColor3 {
background-color: #EA92A5;
width: 30px;
border: none;
border-radius: 2px;
height: 30px;
box-shadow: 1px 1px 15px #8F4E55;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="Container">
<div class="addnote">
<button onclick="dup()" class="Btn3" type="button"> <span class="black">N</span>ote
<span class="material-symbols-outlined">
add_box
</span></button>
</div>
<!-- my note area container-->
<div class="NoteSection">
<!--text container-->
<!--text header with colors-->
<div class="headeR">
<button class="BtnColor1" onclick="changeColor(this,'green')"></button>
<!--buttons to change color-->
<button id="color#1" class="BtnColor2" onclick="changeColor(this,'blue')"></button>
<button id="color#1" class="BtnColor3" onclick="changeColor(this,'red')"></button>
<button id="color#1" class="BtnColor4" onclick="changeColor(this,'purple')"></button>
<button class="BtnColor5" onclick="deleteR(this)"><span class="black"></span><span
class="material-symbols-outlined">Delete</span></button>
</div>
<!--text header with colors-->
<!--text area-->
<div class="textspot" id="NOTEE">
<textarea class="notepage" name="notes" row="20" cols="20" maxlength="67"></textarea>
</div>
<!--text area-->
</div>
<div id="notecopy" style="width:0px; height:0px;">
</div>
I'm attempting to create a function that sorts elements based on their numerical separation from the data-attribute value of a designated "leader."
Here's what I'm trying to achieve:
If the participant data-title value is less than or equal to 4 from the data-title of the "leader" then they are appended to playoffs
If the data-title value is greater than 4 from the data-title of the "leader" than they are appended to out.
I'm hoping to keep the leader in place and only sort/append the elements that are equal to or larger than the leader data-title into their respective categories. How can I adjust the code below to facilitate something like this?
var participant = $('.participant')
var leader = $('#leader')
$(participant).sort(function (a, b) {
var contentA = parseInt( $('.participant').data('title'));
var contentB = parseInt( $(leader).data('title'));
if (contentA - contentB <= 4) {
$(participant).appendTo('#in-race');
}
else {
$(participant).appendTo('#out');
}
});
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
.section-hold {
margin: 2em 0;
min-height: 40px;
padding: 15px;
display: block;
}
.participant{
background-color: #EEE;
padding: 20px;
width: 70vw;
margin: 10px auto;
display: inline-block;
}
.name{
float: left;
}
.score{
float: right;
}
.section-title{
margin: 10px 0;
color: #FFF;
}
#participant-hold{
outline: solid 1px grey;
}
#in-race{
outline: solid 1px yellow;
}
#out{
outline: solid 1px red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section-hold" id="participant-hold">
<h3 class="section-title">PARTICIPANTS</h3>
<div class="participant">
<div class="name">LEADER</div>
<div class="score" id="leader" data-title="18"><em>18</em></div>
</div>
<div class="participant">
<div class="name">TEST 1</div>
<div class="score" data-title="21.5"><em>21.5</em></div>
</div>
<div class="participant">
<div class="name">TEST 2</div>
<div class="score" data-title="28"><em>28</em></div>
</div>
</div>
<div class="section-hold" id="in-race">
<h3 class="section-title">PLAYOFFS</h3>
</div>
<div class="section-hold" id="out">
<h3 class="section-title">OUT</h3>
</div>
To keep the leader in place and only sort the other participants you can do this:
var participant = $('.participant:not(:has(#leader))');
var leader = $('#leader')
participant.each(function() {
var contentA = parseInt($(this).find(".score").data("title"));
var contentB = parseInt(leader.data("title"));
if (contentA - contentB <= 4) {
$(this).appendTo('#in-race');
} else {
$(this).appendTo('#out');
}
});
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
.section-hold {
margin: 2em 0;
min-height: 40px;
padding: 15px;
display: block;
}
.participant{
background-color: #EEE;
padding: 20px;
width: 70vw;
margin: 10px auto;
display: inline-block;
}
.name{
float: left;
}
.score{
float: right;
}
.section-title{
margin: 10px 0;
color: #FFF;
}
#participant-hold{
outline: solid 1px grey;
}
#in-race{
outline: solid 1px yellow;
}
#out{
outline: solid 1px red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section-hold" id="participant-hold">
<h3 class="section-title">PARTICIPANTS</h3>
<div class="participant">
<div class="name">LEADER</div>
<div class="score" id="leader" data-title="18"><em>18</em></div>
</div>
<div class="participant">
<div class="name">TEST 1</div>
<div class="score" data-title="21.5"><em>21.5</em></div>
</div>
<div class="participant">
<div class="name">TEST 2</div>
<div class="score" data-title="28"><em>28</em></div>
</div>
</div>
<div class="section-hold" id="in-race">
<h3 class="section-title">PLAYOFFS</h3>
</div>
<div class="section-hold" id="out">
<h3 class="section-title">OUT</h3>
</div>
Before I developed a functionality for when you have only one set of tabs. Now the aApp is growing and that tabs functionality is failing since there are more sets of tabs.
The first time the function was like this:
var iconTabs = function () {
$('#icons-tabs a:not(:first)').addClass('inactive');
$('.icons-container').hide();
$('.icons-container:first').show();
$('#icons-tabs a').click(function(){
var t = $(this).attr('id');
if($(this).hasClass('inactive')) {
$('#icons-tabs a').addClass('inactive');
$(this).removeClass('inactive');
$('.icons-container').hide();
$('#'+ t + 'C').fadeIn('slow');
}
});
};
And the html:
<div id="fragment-1" class="fragments text-center">
<div class="icons-container" id="tab1C">
{{!-- Content --}}
</div>
<div class="icons-container" id="tab2C">
{{!-- Content --}}
</div>
<div class="fragments-parent">
<div class="fragments-icons fragments-parent--child">
<div class="items" id="icons-tabs">
</div>
</div>
</div>
</div>
Now the html has a second section and I still have to add 3 more, so now it is like this:
<div id="fragment-1" class="fragments text-center">
<div class="icons-container" id="tab1C">
{{!-- Content --}}
</div>
<div class="icons-container" id="tab2C">
{{!-- Content --}}
</div>
<div class="fragments-parent">
<div class="fragments-icons fragments-parent--child">
<div class="items" id="icons-tabs">
</div>
</div>
</div>
</div>
<div id="fragment-2" class="fragments text-center">
<div class="icons-container" id="tab5C">
{{!-- Content --}}
</div>
<div class="icons-container" id="ta62C">
{{!-- Content --}}
</div>
<div class="fragments-parent">
<div class="fragments-icons fragments-parent--child">
<div class="items" id="icons-tabs">
</div>
</div>
</div>
</div>
I have created a JSFiddle in case you want to play:
http://jsfiddle.net/ju3a9zx5/
My mission is to do it dynamic and that every set of tabs has separate behaviour. As you may see in the JSFiddle: the second set of tabs doesn't work, and I want them to have the same behaviour as the first one, but separate, one set of tabs don't have to interfere with the others.
You are going to want to use classes instead of ids to target your tabs. If you see my example below, there are only a few changes:
I replaced id="tabs" and id="tabs2" with class="tabs"
I changed the event handlers to target the class instead of the ids
When finding the related a tags I use siblings()
When finding the related .container I use .nextUntil() to find the container beneath in the DOM
When showing the initial container classes. I use $('.tabs').next('.container')
$(document).ready(function() {
$('.tabs a:not(:first)').addClass('inactive');
$('.container').hide();
$('.tabs').next('.container').show();
$('.tabs a').click(function() {
var t = $(this).attr('id');
if ($(this).hasClass('inactive')) { //this is the start of our condition
$(this).siblings('a').addClass('inactive');
$(this).removeClass('inactive');
$(this).parent().nextUntil(':not(.container)').hide();
$('#' + t + 'C').fadeIn('slow');
}
});
});
.tabs {
width: 100%;
height: 30px;
border-bottom: solid 1px #CCC;
padding-right: 2px;
margin-top: 30px;
}
a {
cursor: pointer;
}
.tabs a {
float: left;
list-style: none;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
margin-right: 5px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
outline: none;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
font-weight: bold;
color: #5685bc;
;
padding-top: 5px;
padding-left: 7px;
padding-right: 7px;
padding-bottom: 8px;
display: block;
background: #FFF;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
text-decoration: none;
outline: none;
}
.tabs a.inactive {
padding-top: 5px;
padding-bottom: 8px;
padding-left: 8px;
padding-right: 8px;
color: #666666;
background: #EEE;
outline: none;
border-bottom: solid 1px #CCC;
}
.tabs a:hover,
.tabs a.inactive:hover {
color: #5685bc;
outline: none;
}
.container {
clear: both;
width: 100%;
border-left: solid 1px #CCC;
border-right: solid 1px #CCC;
border-bottom: solid 1px #CCC;
text-align: left;
padding-top: 20px;
}
.container h2 {
margin-left: 15px;
margin-right: 15px;
margin-bottom: 10px;
color: #5685bc;
}
.container p {
margin-left: 15px;
margin-right: 15px;
margin-top: 10px;
margin-bottom: 10px;
line-height: 1.3;
font-size: small;
}
.container ul {
margin-left: 25px;
font-size: small;
line-height: 1.4;
list-style-type: disc;
}
.container li {
padding-bottom: 5px;
margin-left: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="tabs">
<a id="tab1">test1</a>
<a id="tab2">test2</a>
<a id="tab3">test3</a>
<a id="tab4">test4</a>
</div>
<div class="container" id="tab1C">1Some content</div>
<div class="container" id="tab2C">2Some content</div>
<div class="container" id="tab3C">3Some content</div>
<div class="container" id="tab4C">4Some content</div>
<div class="tabs">
<a id="tab5">test1</a>
<a id="tab6">test2</a>
<a id="tab7">test3</a>
<a id="tab8">test4</a>
</div>
<div class="container" id="tab5C">5Some content</div>
<div class="container" id="tab6C">6Some content</div>
<div class="container" id="tab7C">7Some content</div>
<div class="container" id="tab8C">8Some content</div>
Ok played around with your fiddle. First remark: change id="tabs" to class="tabs", also change the selectors in your javascript and css. With that change it should get you up and running.
From a developer point of view I would create a jQuery plugin and throw the code in an each() function to make this even more flexible, better scalable and maintanable.
Guys I am new to jQuery...please help me to learn this. I want to expand the div(#center) taking width:100% on click that in turn closes the other 2 divs (#left and #right) in my case.
Please someone help me to solve this. And the most imp thing is that the transition should be swift nd not at once. Reply is appreciated. And its not lyk i dint try it first. I tried using click function to make it happen..bt dint work as desired
body {
width: 100%;
height: auto;
}
#taskDetails {
width: 900px;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#description {
width: 900px;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#details {
float: left;
width: 900px;
margin: 0 auto;
height: auto;
border: 2px solid #a1a1a1;
display: inline-block;
}
#left {
float: left;
width: 250px;
margin: 0 auto;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#center {
width: 370px;
float: left;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
margin-left: 9px;
}
#right {
float: right;
width: 250px;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#head {
top: 0;
width: 100%;
height: 30px;
background: #8CBF26;
border-radius: 2px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a {
padding: 0 10px;
border-radius: 8px;
display: block;
width: 60px;
height: 25px;
border: 2px solid #a1a1a1;
background-color: #00ABA9;
text-decoration: none;
}
.heading {
padding: 5px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="abc.css">
<script href="abc.js"></script>
</head>
<body>
<div id="main">
<div id="taskDetails">
<div id="head">
<div class="heading">FORM</div>
</div>
<div id="formTab">
<div id="form">
</div>
</div>
</div>
<div id="description">
<div id="head">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</div>
<div id="content">
<div class="rte">
</div>
<div class="text">
</div>
</div>
</div>
<div id="details">
<div id="left">
<div id="head">
<div class="heading">Projects</div>
</div>
<div class="data">
</div>
</div>
<div id="center">
<div id="head">
<div class="heading">Details</div>
</div>
<div class="data">
</div>
</div>
<div id="right">
<div id="head">
<div class="heading">Tab 3</div>
</div>
<div class="data">
</div>
</div>
</div>
</div>
</body>
You can use this example for "tab2"
$("#tab2").click(function () {
$("#center").css("width", "100%");
$("#left").fadeOut("slow");
$("#right").fadeOut("slow");
});
check my fiddle: http://jsfiddle.net/u87z1m3n/1/
And put id's to the li's in order to be able to select them:
<li id="tab1">Tab 1
</li>
<li id="tab2">Tab 2
</li>
<li id="tab3">Tab 3
</li>
The example is very coarse as the code needs a lot more refining...
But I think that it gives an answer to your question...
Study the example below. Let me know if you have any questions.
$("#head li").click(function () {
$("#center, #left, #right").eq($(this).index()).css("width", "100%");
$("#center, #left, #right").not($(this)).hide();
});
body {
width: 100%;
height: auto;
}
.current {
width: 100%
}
#taskDetails {
width: 900px;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#description {
width: 900px;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#details {
float: left;
width: 900px;
margin: 0 auto;
height: auto;
border: 2px solid #a1a1a1;
display: inline-block;
}
#left {
float: left;
width: 250px;
margin: 0 auto;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#center {
width: 370px;
float: left;
height: 200px;
border: 2px solid #a1a1a1;
background: red;
margin-left: 9px;
}
#right {
float: right;
width: 250px;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#head {
top: 0;
width: 100%;
height: 30px;
background: #8CBF26;
border-radius: 2px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a {
padding: 0 10px;
border-radius: 8px;
display: block;
width: 60px;
height: 25px;
border: 2px solid #a1a1a1;
background-color: #00ABA9;
text-decoration: none;
}
.heading {
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div id="taskDetails">
<div id="head">
<div class="heading">FORM</div>
</div>
<div id="formTab">
<div id="form">
</div>
</div>
</div>
<div id="description">
<div id="head">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</div>
<div id="content">
<div class="rte">
</div>
<div class="text">
</div>
</div>
</div>
<div id="details">
<div id="left">
<div id="head">
<div class="heading">Projects</div>
</div>
<div class="data">
</div>
</div>
<div id="center">
<div id="head">
<div class="heading">Details</div>
</div>
<div class="data">
</div>
</div>
<div id="right">
<div id="head">
<div class="heading">Tab 3</div>
</div>
<div class="data">
</div>
</div>
</div>
</div>
Here's a CodePen demo showing the final result of everything below. Please read it carefully so you can learn the process and understand everything that's happening.
First of all, your HTML needed a lot of cleanup. You called head as an ID, but used it multiple times throughout your code. If you're going to use a selector more than once, it should be a class instead. I changed it in the HTML and the CSS.
HTML
<div id="main">
<div id="taskDetails">
<div class="head">
<div class="heading">FORM</div>
</div>
<div id="formTab">
<div id="form"></div>
</div>
</div>
<div id="description">
<div class="head">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</div>
<div id="content">
<div class="rte"></div>
<div class="text"></div>
</div>
</div>
<div id="details">
<div id="left">
<div class="head">
<div class="heading">Projects</div>
</div>
<div class="data"></div>
</div>
<div id="center">
<div class="head">
<div class="heading">Details</div>
</div>
<div class="data"></div>
</div>
<div id="right">
<div class="head">
<div class="heading">Tab 3</div>
</div>
<div class="data"></div>
</div>
</div>
</div>
Next, in your CSS, you hadn't set the widths of your containers correctly, so adding something like width:100% wasn't doing anything because there was no max width to fill. I added that to your styles. Remember, I also updated the markup from changing your head id to a class.
Additionally, I removed the floats from you left,right, and center divs because that removes the blocks from the flow of the document, which can lead to funny behavior. Instead, I changed them to display:inline-block and set their widths relative to the container.
Finally, I added a .wide class at the end which will set the width of the center div.
CSS
body {
margin:0;
padding:0;
width: 100%;
height: auto;
}
#main {
width:100%;
}
#taskDetails {
width:auto;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#description {
width:auto;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#details {
width:100%;
margin: 0 auto;
height: auto;
border: 2px solid #a1a1a1;
display: inline-block;
}
#left {
display:inline-block;
margin:0;
padding:0;
width:20%;
margin: 0 auto;
height: 200px;
border: 1px solid #a1a1a1;
background: #dddddd;
}
#center {
display:inline-block;
margin:0;
padding:0;
width:50%;
height: 200px;
border: 1px solid #a1a1a1;
background: red;
}
#right {
display:inline-block;
margin:0;
padding:0;
width:20%;
height: 200px;
border: 1px solid #a1a1a1;
background: #dddddd;
}
.head {
top: 0;
width: 100%;
height: 30px;
background: #8CBF26;
border-radius: 2px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a {
padding: 0 10px;
border-radius: 8px;
display: block;
width: 60px;
height: 25px;
border: 2px solid #a1a1a1;
background-color: #00ABA9;
text-decoration: none;
}
.heading {
padding: 5px;
}
.wide {
width:100% !important;
transition:.5s;
}
Now, this can be done with jQuery, so make sure you add the script in the head of your HTML.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
The jQuery script is pretty simple, and does three things:
1. When you click on any of the tab buttons, it will hide the #left and #right divs.
2. The #center div expands to 100% of the container.
3. When you click on the tab again, it will shrink the #center div and bring the other two back.
jQuery
$(".head ul li").click(function() {
$("#left, #right").animate({width:"toggle"});
$("#center").toggleClass('wide');
})
I used toggle in both of the calls because it gives a fairly nice animation without making you code in specifics. It also handles adding or removing a class, so your script can stay simple if all you want to do is add or remove that class with each click.
If you want something more complex, you'll definitely want to look at JavaScript instead of jQuery as #Katana314 mentioned above. They're for two different things, so make sure you understand the difference between the two.
I'm creating a progress bar, currently the percentage are shown in right side, but now I want the percentage able to follow the bar, no matter the blue bar is short or long.
Example that I expect
.popup_survey_whitebox_percent {
font-size: 12px;
font-weight: bold;
font-style: italic;
color: #F30;
float: right;
margin-top: 10px;
}
.popup_survey_whitebox_progressbar {
background: #444;
width: 100%;
height: 5px;
border-radius: 10px;
}
.popup_survey_whitebox_progressbar_inner {
background: #0CF;
width: 100%;
height: 5px;
border-radius: 10px;
box-shadow: 0 3px 7px rgba(0, 0, 0, .25);
margin-top: 5px;
}
<div id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">75%</div>
<br>
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:75%;"></div>
</div>
<div id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">15%</div>
<br>
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:15%;"></div>
</div>
HTML:
Move popup_survey_whitebox_percent inside popup_survey_whitebox_progressbar_inner:
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:75%;">
<div id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">75%</div>
</div>
</div>
CSS:
Change margin-top of popup_survey_whitebox_percent:
.popup_survey_whitebox_percent{
float:right;
margin-top: -15px;
font-size:12px;
font-weight:bold;
font-style:italic;
color:#F30;
}
See Fiddle
You could set the margin-left of the percentage values equal to the width of the progress bar.
$('.popup_survey_whitebox_percent').each(function() {
$(this).css('margin-left', $(this).next().next().find('.popup_survey_whitebox_progressbar_inner').css('width'));
});
.popup_survey_whitebox_percent {
font-size: 12px;
font-weight: bold;
font-style: italic;
color: #F30;
margin-top: 5px;
}
.popup_survey_whitebox_progressbar {
background: #444;
width: 100%;
height: 5px;
border-radius: 10px;
}
.popup_survey_whitebox_progressbar_inner {
background: #0CF;
width: 100%;
height: 5px;
border-radius: 10px;
box-shadow: 0 3px 7px rgba(0, 0, 0, .25);
margin-top: -10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="popup_survey_whitebox_percent">75%</div>
<br />
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:75%;"></div>
</div>
<div class="popup_survey_whitebox_percent">15%</div>
<br />
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:15%;"></div>
</div>
<div class="test"></div>
try this
you only need to put your text percentage tag inside the progressbar html tag
div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:75%;">
<span id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">75%</span>
<br>
</div>
</div>
<br>
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:15%;">
<span id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">15%</span>
</div>
</div>
try this
http://jsfiddle.net/e4wvyamh/