I have the following:
<div id="main" class="col-lg-7 col-md-6 col-sm-12 col-md-push-3 col-lg-push-3">
<div id="inner">
</div>
</div>
How would I take the classes from #main and add them to #inner. These classes change from page to page but they need to match. So I guess I will need addClass to be a variable?
The reason I am trying to achieve this is #inner becomes fixed and therefore looses the inheritance.
You have to get those classes on the load of the page. So, you have to add such script,
$(document).ready(function(){
var mainClasses = $("#main").attr("class");
$("#inner").addClass(mainClasses);
});
If you need to remove the classes from #main and add it to #inner, just add the line below .addClass();
$("#main").removeClass(mainClasses);
firstly you have to get the element by Id and store it in any variable.
var li = document.getElementById('main');
then add that variable classes into another div id:
$('#inner').addClass(li.className);
Related
So, I have been using my own CSS class named myclass and Bootstrap built-in class container. My question is while declaring a with both classes.
Should I use
<div class="myclass container">some code</div>
this format, or:
<div class="myclass">
<div class="container">
some code
</div>
</div>
Does both work in the same way? Or these two are different?
They are different, first one you have 2 classes for the same element, and you can select the element by using the following rules:
.container {}
.myclass{}
.myclass.container{} or .container.myclass{}
The second example you have a parent and a child elemtns
which you can use the following rule:
.myclass .container {}
Both are totally different.
<!-- Here you're declaring ONE div element with two values on class atribute -->
<div class="myclass container">some code</div> this format
<!-- Here you're declaring TWO elements with a different class each one -->
<div class="myclass">
<div class="container">
</div>
</div>
Why this is so different?
HTML tags/eelements have default properties with default values, plus the properties and values that you put in addition.
For example:
if you set globally:
div{padding:5px;}
On the first example, the content inside the div will be padded 5px.
On the second example, the content inside container will be padded 10px.
That can happen with default properties rendered by the browser or globally applied by frameworks as bootstrap.
I am building a page preloader with ReactJS. The Codepen snippet I am using is written in HTML and I need help converting it into HTML ready for React.
Part of the snippet
<div class="socket">
<div class="gel center-gel">
<div class="hex-brick h1"></div>
<div class="hex-brick h2"></div>
<div class="hex-brick h3"></div>
</div>
</div>
Conversion to React
<div className={s.socket}>
<div className={s.gel s.center-gel}>
<div className={s.hex_brick s.h1}></div>
<div className={s.hex_brick s.h2}></div>
<div className={s.hex_brick s.h3}></div>
</div>
</div>
So I have replaced hyphens with underscores, used curly brackets instead of quotes, and added Name to the class. However, I don't know how to add the second div modifier (for example in div gel there is element center-gel). When a second element is added to a React div, it fails to compile.
React does not allow these second div elements. After testing, my loading animation does not look correct if I separate out the elements, the structure needs to stay the same.
Snippet Used
When you write JSX code in React you are actually writing JavaScript code. Let's say you put those expression into a variable like so:
var styles = s.gel s.center-gel;
It just doesn't make any sense in JS. You need to write a valid expression like this:
var styles = [s.gel, s['center-gel']].join(' ');
Keeping that in mind, your code should work this way:
<div className={s.socket}>
<div className={[s.gel, s['center-gel']].join(' ')}>
<div className={[s.hex_brick, s.h1].join(' ')}></div>
<div className={[s.hex_brick, s.h2].join(' ')}></div>
<div className={[s.hex_brick, s.h3].join(' ')}></div>
</div>
</div>
index.ts
bubbles: any [][] = [['80%','Meeting'],['20%','Meeting']]
index.html
<div *ngFor="let bubble of bubbles">
<div class="bubble" style="margin-left:{{bubble[0]}};">
</div>
</div>
I am trying to have the margin-left style use the data from the array bubbles[0].
The for loop gives ['80%','Meeting'] in that layout so I have tried to set the 0 element of that array to the margin-left style but this isn't working. Is there another way to do this process?
use [ngStyle] instead of style. documentation here.
<div class="bubble" [ngStyle]="{'margin-left': bubble[0]}">
In addition to #Pengyy's answser, you can also use
<div class="bubble" [style.margin-left]="bubble[0]">
I have html code on my site:
<div id="main" class="col-md-9 col-xs-12"></div>
<div id="right" class="col-md-3 col-xs-12"></div>
It's possible to hide 'right' column if empty in 'md' size ? And resize 'main' to col-md-12
thx
I found a similar question : Bootstrap 3 - hide empty grid column
Normally you'd use PHP (or your particular server-side language) logic to apply the appropriate Bootstrap classes depending on whether there's content in the column or not. This probably shouldn't be done with CSS.
(You could also use JavaScript/jQuery)
You can test if the tag is empty with Javascript and then hide the element.
function myfunc(){
var rightDiv = document.getElementById("right").value;
if(rightDiv == ""){
rightDiv.style.visibility="hidden";
}
}
window.onload=myfunc;
Suppose I have a hierarchy like this:
<div class="first_level">
<div class="second_level_1">
<div class="third_level_1">
<div class="fourth_level_1">
<ul><li></li><li></li></ul>
</div>
<div class="fourth_level_2">
<div class="fifth_level_1">
</div>
<div class="fifth_level_2">
<ul><li></li><li></li></ul>
</div>
</div>
</div>
</div>
<div class="second_level_2">
<ul><li></li><li></li></ul>
</div>
</div>
I want to select all those divs, which contain at least one ul in them. So in the above example code, that would be divs second_level_2, fourth_level_1 and fifth_level_2 ..
What CSS selector can I use to get this result ?
EDIT:
If it's not possible with CSS alone, you can suggest answers using JavaScript, although due to the nature of my actual code, I would really like to avoid that if possible ..
jsfiddle
Here are two options - both have downsides, but you can consider them:
You can either manually add a second class to the divs with a ul:
<div class="fourth_level_1 div_with_ul_class">
Note: If you are using some dynamic language on the server, such as PHP, this could actually be implemented fairly easily, without manual coding.
Or if you want to be dynamic I recommend jQuery:
$("div > ul").parent().addClass("div_with_ul_class");
Parent selector isn't available in CSS, despite a lot of requests to add it.
jQuery has a nice selector, know as :has; http://api.jquery.com/has-selector/
$('div:has(ul)');
Would be the jQuery selector.