Is this possible? I need this so if one div would become bigger in height, the other one should do the same. Both divs have different parents though. This is my mark-up:
<div class="aProductHeader">
<div class="omschrijving">
<h3>omschrijving</h3>
</div>
</div>
<div class="aProduct">
<div class="omschrijving">
<span class="entry inner">
Toddler bestek blauw
</span>
</div>
</div>
Any suggestions?
I would like .aProductHeader .omschrijving and .aProduct .omschrijving to keep the same height.
You could use javascript
Example
HTML:
<div id="yes">
something here<br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div id="nope">
<h1>text</h1>
</div>
JavaScript
var one = document.getElementById("yes"),
two = document.getElementById("nope");
if (one.offsetHeight > two.offsetHeight)
{
two.style.height = one.offsetHeight+"px";
}else{
one.style.height = two.offsetHeight+"px";
}
For using getElementsByClassName:
Example
var one = document.getElementsByClassName("yes"),
two = document.getElementsByClassName("nope");
for (i = 0; i < one.length; i++)
{
if (one[i].offsetHeight > two[i].offsetHeight)
{
two[i].style.height = one[i].offsetHeight+"px";
}else{
one[i].style.height = two[i].offsetHeight+"px";
}
}
The second option will always be as long as its 'pair', so if it's higher or smaller, one of the will adjust accordingly.
If they aren't side by side, this may be a challenge. If they are side by side, you can put them in a parent div. Otherwise, you would likely have to use javascript to sync them up.
With javascript it would be something like this code.
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
div1.style.height = div2.style.height;
can't you just use .omschrijving only?
Like this:
.omschrijving{
height: 100%;
}
Related
I hope you are good.
I'm having trouble to customise my label with amcharts.
I'm trying to put on a map, the date and the place of an event as a label like that:
https://codepen.io/acivita/pen/BarvPzZ
<div class="main2">
<div class="container">
<div class="element">713</div>
<div class="element2">Pampelune</div>
</div>
</div>
When I exported this code on amcharts, it works well but it's too big:
https://codepen.io/acivita/pen/KKobeXm
var label = labelSeries.mapImages.create();
label.latitude = element.latitude;
label.date = tmpData[0].eventInfo.date;
label.city = tmpData[0].eventInfo.specific;
label.longitude = element.longitude;
label.interactionsEnabled = false;
label.children.getIndex(0).html = `
<div class="main2">
<div class="container">
<div class="element">713</div>
<div class="element2">Pampelune</div>
</div>
</div>`
Example :
I added a red background to see why it wasn't aligned with the dot.
https://codepen.io/acivita/pen/vYRmzgO
So when I try to reduce it, there are some issues:
the text is not vertically aligned anymore.
it seems to have some margin .
It looks like if I put too small properties for my text the behaviour get weird.
It may be a css/html error because I'm not very good at positioning stuff.
Thanks for the help and have a nice day.
I have the following HTML markup in my .NET MVC project:
<div class="row">
<div class="span6">#Model.Data</div>
<div class="span6">#Model.OtherData</div>
</div>
I'm getting data from server. So I want to do the following:
If data is empty then show other data with width = 100%.
Just to clarify I want to do something like that:
<div class="row">
<div class="span12">#Model.OtherData</div>
</div>
Or vice versa.
Is there a way to do that? Maybe with using different HTML tags / CSS classes.
Essentially you just want conditionally display the #Model.Data only if it isn't null. You can also set the col class with a variable, and conditionally change that variable depending if #Model.Data exists or not. Try something like this:
# {
var colClass = 'span6';
if (#Model.Data == null) {
colClass = 'span12';
}
}
<div class="row">
#if (#Model.Data != null) {
<div class="#colClass">#Model.Data</div>
}
<div class="#colClass">#Model.OtherData</div>
</div>
I was wondering if it was possible to create a sort of HTML object instead of copy pasting stuff, I thought of doing it via javascript but wondered if there was an easier way to do it (writing html in JS is a bit tedious).
Basically let's say a have a div like that:
<div class ="col">
<div class="Title">
Title
</div>
<div class="Text">
Text
</div>
</div>
Which is the best way, to have some sort of function where you can objectName.create(title, text) or to have a javascript function like Function(title, text) create the element?
You could take the outer element and clone it, change its content and append it back to where you want it. Be advised that this may duplicate ids if your elements should have one.
function createHtml(title, text) {
const el = document.querySelector('.col').cloneNode(true);
el.querySelector('.Title').innerText = title;
el.querySelector('.Text').innerText = text;
document.body.appendChild(el);
}
createHtml("Foo", "Bar");
<div class="col">
<div class="Title">
Title
</div>
<div class="Text">
Text
</div>
</div>
Another option would be to create the element from scratch
function createElement(title, text) {
const el = document.createElement('div');
el.clasName = 'col';
const titleDiv = document.createElement('div');
titleDiv.className = 'Title';
titleDiv.appendChild(document.createTextNode(title));
const textDiv = document.createElement('div');
textDiv.className = 'Text';
textDiv.appendChild(document.createTextNode(text));
el.appendChild(titleDiv);
el.appendChild(textDiv);
document.body.appendChild(el);
}
createElement("Foo", "Bar");
Note that there are many frameworks out there (like angular, react, vue, ...) that would do things like that easier/better.
It is not so bad to write html in js after template literals became a thing in js, you could do something like this
function addCol(title, text){
document.querySelector(".list").innerHTML += `
<div class="col">
<div class="Title">
${title}
</div>
<div class="Text">
${text}
</div>
</div>
`;
}
addCol("hello", "world");
addCol("foo", "bar");
<div class="list"></div>
I'm learning the basics of Bootstrap and I'm stuck when it comes to creating margins. I want to give space between the quote and the thumbnails. I've looked up tutorials and even searched Stack overflow and haven't found a solution. It's as if all the elements are stuck together. Can someone please tell me what I need to do to create a margin? Thanks in advance.
<div>
<h1 class = 'text-center'> Bob Dylan </h1>
<img width = '80%' class = 'img-responsive center-block' src ="http://www.billboard.com/files/media/bob-dylan-portrait-bw-1966-billboard-1548.jpg" alt = 'Bob Dylan'></img>
<h3 class = "text-center">". . . he not busy being born is busy dying."</h3>
</div>
<div class = 'row'>
<div class="col-xs-2">
<img width = "100%" src = 'https://upload.wikimedia.org/wikipedia/en/thumb/6/60/Bob_Dylan_-_Bob_Dylan.gif/220px-Bob_Dylan_-_Bob_Dylan.gif'>
<p class = 'center-block'> 1962 </p>
</div>
https://codepen.io/jwdwsn/pen/awaGdv
To solve this, instead create a new class "bottom-margin" that adds the standard margin that you need.
.bottom-margin { margin-bottom:30px; }
Then add a div after the quote div as below
<div class = "row bottom-margin">
<div class = "col-md-12">
</div>
</div>
I tried it works.
Hope this helps.
i'm trying to make some special menu but i have a problem with selecting the most nested element (div) . Menu will be dynamic so it can change how much divs will be nested in one div. (parents will be created with new childs) so i need to select the last one (the most nested) without using more classes od Ids.
Here is a code i wrote until now:
<div id="strategy">
<div class="selected">
0
<div class="selected">
some text
<div class="selected"> this is the last div, but it can be anytime changed and more childs of this element can be created</div>
</div>
</div>
<div class="selected">
1
</div>
<div>
2
</div>
</div>
and something of css i tried:
div.selected:only-of-type {background: #F00;}
also tried nth:last-child, only-child.. i think everything but there must be some way how to do it.
if you're open to jQuery...
$(document).ready(function() {
var $target = $('#strategy').children();
while( $target.length ) {
$target = $target.children();
}
var last = $target.end(); // You need .end() to get to the last matched set
var lastHtml = last.html();
$('body').append('<strong>deepest child is: ' + lastHtml + '</strong>');
last.css('color', 'blue');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="strategy">
<div class="selected">
0
<div class="selected">
some text
<div class="selected"> this is the last div, but it can be anytime changed and more childs of this element can be created</div>
</div>
</div>
<div class="selected">
1
</div>
<div>
2
</div>
</div>