How to add padding to each dynamically added sibling? - javascript

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;
}
});

Related

Simple javascript click to add class not working

I am trying to add / remove a class on an element that is clicked liek this
function myFunction() {
this.classList.add("myclass");
}
#first {
height: 100px;
width: 100px;
background: yellow;
color: black;
}
.myclass {
background: red;
color: white;
}
<div id="first" onclick="myFunction(this)">
Click
<div class="second">
</div>
<div class="third">
</div>
</div>
Why is this not working?
You need to pass reference this into function too like:
function myFunction(el) {
el.classList.add("myclass");
}
#first {
height: 100px;
width: 100px;
background: yellow;
color: black;
}
.myclass {
background: red!important;
color: white!important;
}
<div id="first" onclick="myFunction(this)">
Click
<div class="second">
</div>
<div class="third">
</div>
</div>
PS. add !important into css
Pass the this to the defined function too and check the existence of the class. Try this.
function myFunction(el) {
if(!el.classList.contains("myclass")) {
el.classList.add("myclass");
console.log("added");
} else {
el.classList.remove("myclass");
console.log("removed");
}
}
#first {
height: 100px;
width: 100px;
background: yellow;
color: black;
}
.myclass {
background: red;
color: white;
}
<div id="first" onclick="myFunction(this)">
Click
<div class="second">
</div>
<div class="third">
</div>
</div>
It doesn't work because this for inline handlers works differently. You can use .call, and that works... but that's still not good.
function myFunction() {
this.classList.add("myclass");
}
#first {
height: 100px;
width: 100px;
background: yellow;
color: black;
}
.myclass {
background: red !important;
color: white;
}
<div id="first" onclick="myFunction.call(this)">
Click
<div class="second">
</div>
<div class="third">
</div>
</div>
You should avoid inline script altogether and also avoid id selectors in CSS.
Change your id selector to a class selector and change your inline handler to an event listener.
Also, stray strings like "content" are a real pain as your project grows in size. Wrap them in a <span>
const myButton = document.querySelector(".first");
myButton.addEventListener("click", ({
target
}) => target.classList.add("myclass"))
.first {
height: 100px;
width: 100px;
background: yellow;
color: black;
}
.myclass {
background: red;
color: white;
}
<div class="first">
<span>Click</span>
<div class="second"></div>
<div class="third"></div>
</div>
You are facing 2 issues :
you pass this as a parameter to the onclick event, but don't get it in the function definition (), so you can fix it like below ;
id selector is more specific than class selector, so it always take precedence. You can use a class instead of an id for first div, and then your css rule works :)
function myFunction(el) {
el.classList.add("myclass");
}
.first {
height: 100px;
width: 100px;
background: yellow;
color: black;
}
.myclass {
background-color: red;
color: white;
}
<div class="first" onclick="myFunction(this);">
Click
<div class="second">
</div>
<div class="third">
</div>
</div>

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/

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>

Resize divs related to parent divs with jQuery

So I have 4 divs. I want to change the size of the inner divs compared to parent divs.
I want to dynamically change the child div size related to parent's one.
Now I've added .top class, but I don't really know if its needed or if it will be useful.
Here is the fiddle I'm testing with
http://jsfiddle.net/y3597/171/
jQuery below
$(".top").each(function () {
$('.object').width($(".inner").parent().width());
});
CSS below:
.container1 { width: 200px; background: red; padding: 2px; }
.container2 { width: 225px; background: purple; padding: 2px; }
.container3 { width: 250px; background: blue; padding: 2px; }
.container4 { width: 275px; background: black; padding: 2px; }
/* top ? */
.inner { width: 150px; background: gray; }
.object { width: 100px; background: green; }
HTML below:
<div class="container1 top">
<div class="inner">
<div class="object">Text 1</div>
</div>
<div class="container2 top">
<div class="inner">
<div class="object">Text 2</div>
</div>
<div class="container3 top">
<div class="inner">
<div class="object">Text 3</div>
</div>
<div class="container4 top">
<div class="inner">
<div class="object">Text 4</div>
</div>
I think that you are trying to achieve this:
$(".top").each(function () {
$(this).find(".object").width($(this).width());
});
In your code jQuery will check for every element with .object class in DOM on each loop. When you use (this) you are refering to element that is currently "selected" in loop.
Better way to achive this is to set widths od children to 100%, so they will inherit the witdhs from parents.

DIV's reorder by themselves upon expand - how do I keep the same order?

I've got a grid of items that upon click expand to show a table below it. It works fine, but it reorders the DIV's positions as per my illustration below.
I need them to keep their respective position in their "columns".
Here's the illustration to make it clear:
And here is my HTML code:
<div
class="item-component"
ng-controller="CollapseCtrl"
ng-repeat="component in components.components | filter : components.filterByFilter | filter : searchText"
>
<div class="component-wrapper" ng-click="isCollapsed = !isCollapsed">
Item - click to expand
</div>
<div class="codes-wrapper" collapse="isCollapsed">
<table class="table table-striped table-condensed">
Expanded content here
</table>
</div>
</div>
And here is the .item-component class:
.item-component {
width: 33.33333333333333%;
float: left;
padding-left: 15px;
}
How would I achieve the "expected result" in my illustration?
Use display:inline-block instead of float:left on your .item-component
Living Demo
.item-component {
width: 33.33333333333333%;
display: inline-block;
padding-left: 15px;
}
Or, you can take a look at BootStrap and do it by using the :before element maintaning the float:left as you had it before.
You would also need to wrap each row:
.col{
float:left;
width: 32.33%;
min-height: 50px;
background: #ccc;
padding: 20px;
box-sizing: border-box;
}
.row{
display:block;
}
/* This do the trick */
.row:before{
content: " ";
display: table;
box-sizing: border-box;
clear: both;
}
Living example
Update
If you don't want the gap you will have to look for another HTML markup. You will have to print first each column with each rows.
This is the needed html markup:
<div class="col">
<div class="row" id="demo">1</div>
<div class="row">4</div>
<div class="row">7</div>
</div>
<div class="col">
<div class="row">2</div>
<div class="row">5</div>
<div class="row">8</div>
</div>
<div class="col">
<div class="row">3</div>
<div class="row">6</div>
<div class="row">9</div>
</div>
And the needed css:
.col{
float:left;
width: 32.33%;
}
.row{
display:block;
padding: 20px;
box-sizing: border-box;
background: #ccc;
min-height: 50px;
}
#demo{
height: 150px;
background: red;
}
Living demo
You can do it in the following way.
HTML:
<div class="container">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<br class="clear" />
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
<br class="clear" />
<div class="col">7</div>
<div class="col">8</div>
<div class="col">9</div>
<div>
CSS:
.col {
float: left;
width: 100px;
min-height: 100px;
background: #ccc;
padding: 20px;
margin: 10px;
cursor: pointer;
}
.col:hover {
background: yellow;
}
JS:
$('.col').click(function() {
if ($(this).is('.clicked')) {
$(this).removeClass('clicked');
} else {
$(this).addClass('clicked')
}
});
Live demo: http://jsfiddle.net/S7r3D/1/
ETA: the problem with this solution is that it moves entire row down. I don't really see how to nicely achieve what you want...You could try to overflow the other divs, but it depends on your needs. Is such solution acceptable?
ETA2: actually I made it perfect I think! Have a look here: http://jsfiddle.net/S7r3D/3/
The crucial change was rearranging divs and putting them in columns instead.
HTML:
<div class="container">
<div class="fleft">
<div class="col">1</div>
<div class="col">4</div>
<div class="col">7</div>
</div>
<div class="fleft">
<div class="col">2</div>
<div class="col">5</div>
<div class="col">8</div>
</div>
<div class="fleft">
<div class="col">3</div>
<div class="col">6</div>
<div class="col">9</div>
</div>
<div>
CSS:
.col {
clear: both;
width: 100px;
min-height: 100px;
background: #ccc;
padding: 20px;
margin: 10px;
cursor: pointer;
}
.col:hover {
background: yellow;
}
.col.clicked {
height: 300px;
background-color: red;
}
.fleft
{
float: left;
}
JS: /* same as above */
Create three container divs, and afterwards, put {1, 4, 7} into div1, {2, 5, 8} into div2, and {3, 6, 9} into div3.
Otherwise you will have it very difficult to control their positioning.

Categories