We Keep Coding

Move one div after another div (near) and set float property

I have divs on my page. There is div .rightColumnBar and .divAttributes
HTML
<div class="mainContent">
<div class="pageContent">
<form id="createLead" class="frmDiv clear" action="/leads/create_lead.html?lead_id=3287" name="createLead" method="post">
<div class="divEditLead sldf_columnsContainer">
<div id="hot_div">
<div id="errorBlock">
<div class="leftColumnBr">
<div class="centerColumnBr">
<div class="rightColumnBr">
</div>
<div class="createLeadButtons">
<input id="saveLeadBtn" class="bigButton redButton" name="save" value="Save" type="submit">
</div>
</form>
</div>
<div class="divAttributes frmDiv">
<div id="specHeightIncreaser"></div>
</div>
CSS
.divAttributes {
border: 1px solid #d1ddd4;
min-height: 200px;
padding-top: 10px;
width: 280px;
}
.rightColumnBr {
float: left;
margin-top: 15px;
width: 377px;
}
How can I move (only for front, not insert as html element) rightColumnBr to divAttributes and set for divAttributes float property in left?
Thanks.

If you are aiming script, than you can do CSS changes and DOM manipulation this way:
$('.divAttributes').css({
'border-color': 'red'
}).after( $('.rightColumnBr') );
.divAttributes {
border: 1px solid #d1ddd4;
min-height: 100px;
padding-top: 10px;
width: 280px;
}
.rightColumnBr {
float: left;
margin-top: 15px;
width: 377px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pageContent">
<div class="rightColumnBr">
RCB
</div>
<p>
Text
</p>
<div class="divAttributes frmDiv">
ATTR
</div>
</div>
Also on JSFiddle.

Is this what you want?
<div class="pageContent">
<form id="createLead" class="frmDiv clear">
<div class="divEditLead sldf_columnsContainer">
</div>
<div class="leftColumnBr">
</div>
<div class="centerColumnBr">
</div>
<div class="createLeadButtons">
</div>
</form>
</div>
<div class="divAttributes frmDiv">
</div>
<div class="rightColumnBr">
</div>
.divAttributes {
border: 1px solid #d1ddd4;
min-height: 200px;
padding-top: 0px;
width: 200px;
float:left;
}
.rightColumnBr {
border: 1px solid #d1ddd4;
float: left;
margin-top: 0px;
width:200px;
height:200px;
}
Also please go through jsfiddle link: https://jsfiddle.net/mayurdandekar/0soLrqv0/

Multiple drag & drop buttons and target DIVs with HTML5

I have a couple of buttons, which stand for available webservices in form of maps or graphs. The user would be able to drag the buttons in different DIVs of various sizes on the screen, in order to compose for himself a context on the GUI which fits his needs.
I am not very familiar with the drag-and-drop functionalities of HTML5 and jQuery. I have set up an example, which works fine for a single button and single DIV. But working with multiple buttons and multiple DIVs, I wonder if that workflow of mine is the right one.
I have set up a Fiddle here. The first button can be dragged to the first DIV, and an image (just a placeholder) appears. The others don't work yet.
As the DIVs and Buttons are called by IDs, I could now just have four different IDs for the buttons and four different IDs for the DIVs. But that would that mean that I have to write four times the same javascript code, with the different IDs hard-coded into it? I guess there is a more flexible solution to this, no? Especially, as the target DIVs must stay flexible...
I wonder too how I can avoid of having the button disappear, once it is being dragged. I would rather want to make it grey or so.
Thanks for any hints!
The GUI would look like this:
For the buttons, I have this:
<div id="a-draggable-div" draggable="true" ondragend="onDragEnd(event)" ondragstart="onDragStart(event)" style="float: left">
<h4 style="float: left">Map :: Precipitation</h4>
</div>
<div style="float: left">
<h4 style="float: left">Map :: Temperature</h4>
</div>
<div style="float: left">
<h4 style="float: left">Graph :: Precipitation</h4>
</div>
<div style="">
<h4 style="float: left">Graph :: Temperature</h4>
</div>
<br clear="all" />
<div id="dropzone1" class="static" ondrop="onDrop(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)"></div>
<div id="dropzone2" class="static" ondrop="onDrop(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)"></div>
<div id="dropzone3" class="static" ondrop="onDrop(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)"></div>
For the javascript part:
function onDragOver(e) {
e.preventDefault();
e.target.className = "over-me";
}
function onDragLeave(e) {
e.target.className = "static";
}
function onDragStart(e) {
e.target.innerHTML = "<h4>You are Dragging me</h4>";
document.getElementById('dropzone1').className = 'drop-into-me'
}
function onDragEnd(e) {
e.target.innerHTML = "<h4>Drag Me into the Box :)</h4>";
document.getElementById('dropzone1').className = 'static'
if (e.target.parentElement.id === "dropzone1") {
e.target.innerHTML = "<img src='http://ede.grid.unep.ch/images/logo_geo.gif'>";
}
}
function onDrop(e) {
e.preventDefault();
var draggableDiv = document.getElementById("a-draggable-div");
draggableDiv.setAttribute("draggable", "false");
e.target.appendChild(draggableDiv);
}
For the CSS:
#dropzone1, #dropzone2, #dropzone3 {
width: 350px;
height: 70px;
padding: 10px;
}
.static {
border: 1px solid #aaaaaa;
}
.drop-into-me {
border: 1px dotted #aaaaaa;
}
.over-me {
background-color: yellow;
border: 1px dotted #aaaaaa;
}
h4 {
background-color: #44c767;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border: 1px solid #18ab29;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Verdana;
font-size: 15px;
padding: 7px 31px;
text-decoration: none;
text-shadow: 0px 1px 6px #0e2b0a;
margin-right: 20px
}

Here is a solution for which you need not to use id You can have as many number of buttons and corresponding number of divs to drop in.
Have given ids to divs where you will be dropping the buttons just to show in which div the button have been dropped in.
Here is the updated Fiddle.
//just to know which button is being dragged we will use this variable
var draggingDiv;
function onDragOver(e) {
e.preventDefault();
e.target.classList.add("over-me");
}
function onDragLeave(e) {
e.target.classList.add("static");
e.target.classList.remove("over-me");
}
function onDragStart(e) {
draggingDiv=e.target;
e.target.innerHTML = "<h4>You are Dragging me</h4>";
}
function onDragEnd(e) {
e.target.innerHTML = "<h4>Drag Me into the Box :)</h4>";
e.target.parentElement.classList.add("static");
draggingDiv.innerHTML="<h4>Dragged once Can't drag me now:)</h4>";
// e.target.innerHTML = "<h4>You Dropped Me In "+e.target.parentElement.id+"</h4>";
}
function onDrop(e) {
e.preventDefault();
e.target.classList.remove("over-me");
//uncommment the below line if want that the button should not be draggable once it has been dropped in a div already
//draggingDiv.draggable=false;
//e.target.appendChild(draggingDiv);/commented as this will take the button to the div but we want it to at the original pposition
e.target.innerHTML="<span>Please Change My innerHTML or call some function that loads data That handles the graph/map creation in this Div</span>";
}
.dropzone {
width: 350px;
height: 70px;
padding: 10px;
}
.static {
border: 1px solid #aaaaaa;
}
.drop-into-me {
border: 1px dotted #aaaaaa;
}
.over-me {
background-color: yellow;
border: 1px dotted #aaaaaa;
}
h4 {
background-color: #44c767;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border: 1px solid #18ab29;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Verdana;
font-size: 15px;
padding: 7px 31px;
text-decoration: none;
text-shadow: 0px 1px 6px #0e2b0a;
margin-right: 20px
}
<div draggable="true" ondragend="onDragEnd(event)" ondragstart="onDragStart(event)" style="float: left">
<h4 style="float: left">Map :: Precipitation</h4>
</div>
<div style="float: left" draggable="true" ondragend="onDragEnd(event)" ondragstart="onDragStart(event)">
<h4 style="float: left">Map :: Temperature</h4>
</div>
<div style="float: left" draggable="true" ondragend="onDragEnd(event)" ondragstart="onDragStart(event)">
<h4 style="float: left">Graph :: Precipitation</h4>
</div>
<div style="float: left" draggable="true" ondragend="onDragEnd(event)" ondragstart="onDragStart(event)">
<h4 style="float: left">Graph :: Temperature</h4>
</div>
<br clear="all" />
<div id="dropzone1" class="static dropzone" ondrop="onDrop(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)"></div>
<div id="dropzone2" class="static dropzone" ondrop="onDrop(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)"></div>
<div id="dropzone3" class="static dropzone" ondrop="onDrop(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)"></div>
<div id="dropzone4" class="static dropzone" ondrop="onDrop(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)"></div>
Hope it helps :)

How to hide various span tags with a known id leaving just one visible

I have this page where I have some span tags that works like a link, inside it I have some hidden divs, what I want to do is when I click in one of these links the div inside of the clicked one is shown and the other spans receive the property display:none.
Like this:
<style>
#divHidden{display:none;}
</style>
<span id="link_01" onclick="myfunction()"> <!--<<= when clicked-->
<div id="divHidden">Content</div> <!--<<= this comes visible-->
</span>
<span id="link_02" onclick="myfunction()"> <!--<<= then this-->
<div id="divHidden">Content</div>
</span>
<span id="link_03" onclick="myfunction()"> <!--<<= and this goes hidden-->
<div id="divHidden">Content</div>
</span>
how do I code this in javascript?

Something like this?
UPDATE: to work as request, hope this is ok
codepen version
$('.content-wrapper').on('click','.tag', function(evt){
evt.preventDefault();
var selectedDiv = $(this).prop('id');
$('.content-wrapper span:not(#' + selectedDiv + ')').hide();
$(this).find('.content').addClass('show');
})
span.tag .content {
padding-top: 10px;
text-align: center;
display: none;
}
span.tag .content.show {
display: block;
}
span.tag {
margin: 0 auto;
padding: 6px 0;
border-bottom: 1px #ddd solid;
width: 200px;
cursor: pointer;
color: #444;
height: 40px;
background: #eee;
transition: background 600ms;
display: block;
}
span.tag:hover {
background: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content-wrapper">
<span class="tag" id="tag-one">
<div class="content">Content A</div>
</span>
<span class="tag" id="tag-two">
<div class="content">Content B</div>
</span>
<span class="tag" id="tag-thre">
<div class="content">Content C</div>
</span>
</div>

How to add padding to each dynamically added sibling?

I have to make a hierarchical system as
list
item1
item2
item3
My HTML is as follows :
<div class="first">
<div class="second">
<span class="third">Hello World</span>
</div>
<div class="second">
<span class="third">Hello World2</span>
</div>
<div class="second">
<span class="third">Hello World3</span>
</div>
</div>
How can I edit my CSS to give a padding to everytime a second div is added dynamically (using Javascript).
My CSS is :
.first{
display: inline-block;
width: 300px;
height: 300px;
border: 1px solid red;
}
.second{
width: 100px;
height: 20px;
border: 1px solid green;
}
Link to Code
I can edit the html and CSS entirely. Thanks in Advance.

You can use padding:10px; to your .second css class.
.second{
width: 100px;
height: 20px;
padding:10px;
border: 1px solid green;
}
If you want a hierarchy, you might want to change your html to something like this
<div class="first">
<div class="second">
<span class="third">Hello World</span>
<div class="second">
<span class="third">Hello World2</span>
<div class="second">
<span class="third">Hello World3</span>
</div>
</div>
</div>
</div>
and then add
.second{
width: 100px;
height: 20px;
border: 1px solid green;
margin-left:20px;
}
Notice the margin-left:20px;.

If you are using Jquery you can add the code below which will add padding for each div.
$(document).ready(function(){
$("div").each(function(index, item){
$(item).css('padding-left', (index * 10 ) + "px");
});
});

Try this code once may help for you.
$(document).ready(function(){
var l = $('.second').length;
for(var i=0; i<=l;i++){
.second:nth-child(i).css('padding',i+10);
i = i+10;
}
});

Add scrollbar to table in angular

I have following code for table in angular. I want a vertical scroll bar only for table body (table rows excluding header) how can I do that?
Since All rows are generated by ng-repeat. I don't know how to add overflow style.
html:
<div class="nu-table">
<div class="nu-table-row nu-header">
<div class="nu-table-cell">A</div>
<div class="nu-table-cell" style="width: 33%">B</div>
<div class="nu-table-cell" style="width: 34%">C</div>
</div>
<div class="nu-table-row nu-striped pointer-cursor" ng-repeat=" map in mapList">
<div class="nu-table-cell" ng-bind="map.A"></div>
<div class="nu-table-cell">{{map.B}}</div>
<div class="nu-table-cell" ng-bind="map.C"></div>
</div>
</div>
Following is the CSS content:
.nu-border-table{
border: solid 1px #ccc;
}
.nu-border{
border: solid 1px #ccc;
}
.nu-table{
background-color: #fff;
padding: 5px;
overflow: scroll;
display: table;
table-layout: fixed;
width: 100%;
}
.nu-table-row{
display: table-row;
position: relative;
width: 100%;
}
.nu-table-row:hover{
background-color: #cee6fa;
}
.nu-table-row.nu-striped.selected{
background-color: #cee6fa;
}
.nu-table-row:last-child{
border-bottom: none;
}
.nu-margin{
margin:5px;
}
.nu-table-cell{
display: table-cell;
border-right: solid 1px #ccc;
border-top: solid 1px #ccc;
min-height: 2em;
padding-top: .3em;
position: relative;
word-wrap: break-word;
padding-left: 2px;
}
.nu-table-cell:last-child{
border-right: none;
}
.nu-striped:nth-child(even) {
background-color: #f9f9f9;
}
.nu-striped:nth-child(even):hover{
background-color: #cee6fa;
}
.nu-header {
background-color: #dedede;
border-bottom: solid 2px #bebebe;
font-weight: bold;
}

Try to add a div around the rows (not tested):
<div class="nu-table">
<div class="nu-table-row nu-header">
<div class="nu-table-cell">A</div>
<div class="nu-table-cell" style="width: 33%">B</div>
<div class="nu-table-cell" style="width: 34%">C</div>
</div>
<div class="nu-table-body">
<div class="nu-table-row nu-striped pointer-cursor" ng-repeat=" map in mapList">
<div class="nu-table-cell" ng-bind="map.A"></div>
<div class="nu-table-cell">{{map.B}}</div>
<div class="nu-table-cell" ng-bind="map.C"></div>
</div>
</div>
</div>
and css (set the height you want)
.nu-table-body {
overflow-y:auto;
max-height:500px;
}

You can place two div where 1st div (Header) will have transparent scroll bar and 2nd div will be have data with visible/auto scroll bar. Sample has angular code snippet for looping through the data.
Below code worked for me -
<div id="transparentScrollbarDiv" class="container-fluid" style="overflow-y: scroll;">
<div class="row">
<div class="col-lg-3 col-xs-3"><strong>{{col1}}</strong></div>
<div class="col-lg-6 col-xs-6"><strong>{{col2}}</strong></div>
<div class="col-lg-3 col-xs-3"><strong>{{col3}}</strong></div>
</div>
</div>
<div class="container-fluid" style="height: 150px; overflow-y: auto">
<div>
<div class="row" ng-repeat="row in rows">
<div class="col-lg-3 col-xs-3">{{row.col1}}</div>
<div class="col-lg-6 col-xs-6">{{row.col2}}</div>
<div class="col-lg-3 col-xs-3">{{row.col3}}</div>
</div>
</div>
</div>
Additional style to hide header scroll bar -
<style>
#transparentScrollbarDiv::-webkit-scrollbar {
width: inherit;
}
/* this targets the default scrollbar (compulsory) */
#transparentScrollbarDiv::-webkit-scrollbar-track {
background-color: transparent;
}
/* the new scrollbar will have a flat appearance with the set background color */
#transparentScrollbarDiv::-webkit-scrollbar-thumb {
background-color: transparent;
}
/* this will style the thumb, ignoring the track */
#transparentScrollbarDiv::-webkit-scrollbar-button {
background-color: transparent;
}
/* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
#transparentScrollbarDiv::-webkit-scrollbar-corner {
background-color: transparent;
}
/* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
</style>