vertical center using javascript and css goes wrong - javascript

I'm trying to write a CSS and JavaScript to center divs inside the class viralign vertically.
<div id="welcome" class="width80 pad5">
<div class="col-3 vircon">
<div class="viralign">
<div>
image here
</div>
<div>
text
</div>
</div>
</div>
<div class="col-3 vircon">
<div class="viralign">
<div>
image here
</div>
<div>
text
</div>
</div>
</div>
<div class="col-3 vircon">
<div class="viralign">
<div>
image here
</div>
<div>
text
</div>
</div>
</div>
</div>
css clases
.width80{
width:80%;
margin:0px auto;}
.pad5{padding:5px;}
.col-3{
width:33.33%;
}
JavaScript code
function virAlignNavBar(){
var vircon = document.getElementsByClassName('vircon');
var viralign = document.getElementsByClassName('viralign');
for(var i=0; i < vircon.length; i++){
var x=vircon[i].offsetHeight;
var y=viralign[i].offsetHeight;
viralign[i].style.top=((x/2)-(y/2)+"px");
viralign[i].style.position="absolute";
vircon[i].style.position="relative";
}
}
The problem is that all divs with class vircon appear above each other.
How can I solve this?
jsfiddle
I need the divs to be like this. the col-3 class devides the area between the three divs,and the functoin makes the area above each of the three divs equal to the ares below it.


You must add float="right" to your function.
jsfiddle


Remove position absolute and relative.
function virAlignNavBar(){
var vircon = document.getElementsByClassName('vircon');
var viralign = document.getElementsByClassName('viralign');
for(var i=0; i < vircon.length; i++){
var x=vircon[i].offsetHeight;
var y=viralign[i].offsetHeight;
viralign[i].style.top=((x/2)-(y/2)+"px");
//viralign[i].style.position="absolute";
//vircon[i].style.position="relative";
}
}
virAlignNavBar();
.width80{
width:80%;
margin:0px auto;}
.pad5{padding:5px;}
.col-3{
width:30.33%;
margin-right:10px;
float: left;
text-align: center;
}
<div id="welcome" class="width80 pad5">
<div class="col-3 vircon">
<div class="viralign">
<div>
image here
</div>
<div>
dfghjk
</div>
</div>
</div>
<div class="col-3 vircon">
<div class="viralign">
<div>
image here
</div>
<div>
dfghjk
</div>
</div>
</div>
<div class="col-3 vircon">
<div class="viralign">
<div>
image here
</div>
<div>
dfghjk
</div>
</div>
</div>
</div>
Working JSFilddle http://jsfiddle.net/anqy6Lxo/3/

Related

how to create hide/show toggle

I have two flip cards with a hide/show toggle. but when I click the hide/show button on the second flipcard it doesn't work. How can I make it so that when the hide/show switch on the second flip card is clicked, it starts working. I hope you understand.
this is my flip cards
<div id="main">
<div name="first flip card" style="margin-left: 50px ;padding: ;">
<label>
<input type="checkbox" />
<div class="flip-card">
<div class="front">
<h1>Գերմանիա</h1>
<p style="font-size: 50px;">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
<button id='button' >hide/show</button>
<p id="newpost" style="display: none;" > Test text</p>
<hr />
</div>
</div>
</label>
</div>
<div name="second flip card" style="margin-left: 50px ;">
<label>
<input type="checkbox" />
<div class="flip-card">
<div class="front">
<h1>Գերմանիա</h1>
<p style="font-size: 50px;">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
<button id='button' >hide/show</button>
<p id="newpost" style="display: none;" > Test text</p>
<hr />
</div>
</div>
</label>
</div>
</div>
this is my script for hide/show button
<script>
var button = document.getElementById('button');
button.onclick = function() {
var div = document.getElementById('newpost');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
};
</script>
i hope you can help me
I tried many options, but each had some kind of jamb. For example, I tried other scripts in one, the text was not shown at all, in the second option, when I pressed hide / show on the second flip card, it showed the text on the first flip card.

Welcome to stackoverflow.
According to the W3C Markup Validation Service tool, this document contains a number of errors, including a "Duplicate ID" error. (See: W3C Validator)
Note: The id global attribute defines an identifier (ID) which must be
unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS). (See: HTML id at MDN)
So we need to use a class instead of ‍newpost id to target those elements.
Change the HTML to the following content — by formatting the code and fixing those errors:
<div id="main">
<div style="margin-left: 50px;">
<input type="checkbox" />
<div class="flip-card">
<div class="front">
<h1>Գերմանիա</h1>
<p style="font-size: 50px;">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
<button type="button">hide/show</button>
<p class="newpost" style="display: none;"> Test text</p>
<hr />
</div>
</div>
</div>
<div style="margin-left: 50px ;">
<input type="checkbox" />
<div class="flip-card">
<div class="front">
<h1>Գերմանիա</h1>
<p style="font-size: 50px;">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
<button type="button">hide/show</button>
<p class="newpost" style="display: none;"> Test text</p>
<hr />
</div>
</div>
</div>
</div>
Script:
This script scans the entire DOM for all button elements. Then whenever you click on a button, it first finds the parentElement of that button and then toggles the first element with a newpost class inside the corresponding parentElement.
<script>
document.querySelectorAll('button').forEach((button) => {
button.addEventListener('click', (event) => {
const newpostElement = event.target.parentElement.querySelector('.newpost');
if (newpostElement.style.display !== 'none')
newpostElement.style.display = 'none';
else
newpostElement.style.display = 'block';
})
});
</script>
Learn about HTML errors:
Invalid use of name attribute for div element
Invalid use of padding: ;
Element div not allowed as child of element label
The label element may contain at most one button, input, meter, output, progress, select, or textarea descendant.
Duplicate ID button.

According to your Question , What I Understand you want something like this:=
$("h1").on("click", function(){
console.log($(this).children("div"));
$(this).siblings("div.content").slideToggle();
});​
.content{
display:none;
margin: 10px;
}
h1{
font-size: 16px;
font-wieght: bold;
color: gray;
border: 1px solid black;
background: #eee;
padding: 5px;
}
h1:hover{
cursor: pointer;
color: black;
}
<div class="article">
<h1>TITLE 1</h1>
<div class="content">content 1</div>
</div>
<div class="article">
<h1>TITLE 2</h1>
<div class="content">content 2</div>
</div>
<div class="article">
<h1>TITLE 3</h1>
<div class="content">content 3</div>
</div>
<div class="article">
<h1>TITLE 4</h1>
<div class="content">content 4</div>
</div>
http://jsfiddle.net/Rwx7P/3/

You have two blocks with same ID (button and newpost), it must be always diffrent on one page.
function toggle(id) {
var div = document.getElementById(id);
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
}
<div id="main">
<div name="first flip card" style="margin-left: 50px; padding: ">
<label>
<input type="checkbox" />
<div class="flip-card">
<div class="front">
<h1>Գերմանիա</h1>
<p style="font-size: 50px">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
<button onclick="toggle('newpost1')">hide/show</button>
<p id="newpost1" style="display: none">Test text</p>
<hr />
</div>
</div>
</label>
</div>
<div name="second flip card" style="margin-left: 50px">
<label>
<input type="checkbox" />
<div class="flip-card">
<div class="front">
<h1>Գերմանիա</h1>
<p style="font-size: 50px">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
<button onclick="toggle('newpost2')">hide/show</button>
<p id="newpost2" style="display: none">Test text</p>
<hr />
</div>
</div>
</label>
</div>
</div>

How to equally space out divs after certain elements have a set width

I must create table without using <table>; only <div>. How I can set width (in percent) on some blocks so that others divide the rest of the space equally.
I can do it with JS but I think its possible with html/css only.

With flexbox it's rather easy to create a table like structure. Specify a flex basis for the table cells (boxes) + a grow and shrink to make them resize properly.
Check this fiddle with the demo :)
https://jsfiddle.net/xs0pmgbL/
HTML code:
<div id="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
And the CSS code:
#container {
display: flex;
flex-wrap: wrap;
}
.box {
border: 1px solid gray;
background: orange;
flex: 1 1 200px;
height: 100px;
}

How to create a Xpath of the clicked element using Javascript or Jquery?

I have a webpage where I bind a click event on the element. When user clicks on the particular element. I want to get generate the XPath of the element starting from html or body tag. i.e "The Absolute Xpath"
Suppose in below html sample I click on span having text as "USA" so the Absolute Xpath would be
/html[1]/body[1]/div[2]/div[1]/div[1]/span[1]
<html>
<body>
<div class="header">Countries</div>
<div class="row">
<div class="row_in">
<div class="row_in_in">
<span>India</span>
</div>
</div>
</div>
<div class="row">
<div class="row_in">
<div class="row_in_in">
<span>USA</span>
</div>
</div>
</div>
<div class="row">
<div class="row_in">
<div class="row_in_in">
<span>UK</span>
</div>
</div>
</div>
<div class="row">
<div class="row_in">
<div class="row_in_in">
<span>France</span>
</div>
</div>
</div>
</body>
</html>
Do we have any library where it can help me generate the XPath where I pass the element Dom and it can generate it?
I came across few libraries but that help detect the Content inside the html based on provided Xpath.

You need to loop through clicked element and it parents to do this work. So you can call a function nesting to do this work.
var xpath;
$("*").click(function(e){
xpath = '';
addXpath($(this));
console.log(xpath);
e.stopPropagation();
});
function addXpath($ele){
var tagName = $ele[0].tagName.toLowerCase();
var index = $ele.parent().children(tagName).index($ele)+1;
xpath = '/'+tagName +'['+index+']'+ xpath;
!$ele.parent().is(document) ? addXpath($ele.parent()) : "";
}
body {background: green}
.header {background: orange}
.row_in {background: yellow}
.row_in_in {background: blue}
span {background: red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">Countries</div>
<div class="row">
<div class="row_in">
<div class="row_in_in">
<span>India</span>
</div>
</div>
</div>
<div class="row">
<div class="row_in">
<div class="row_in_in">
<span>USA</span>
</div>
</div>
</div>
<div class="row">
<div class="row_in">
<div class="row_in_in">
<span>UK</span>
</div>
</div>
</div>
<div class="row">
<div class="row_in">
<div class="row_in_in">
<span>France</span>
</div>
</div>
</div>

How to hide a parent div if an inner div has a certain class, with javascript

Ok so say I have many divs. Some of the divs, the children have one class, other divs the children have a different class.
I want to hide only the divs which have a child with a certain class.
For example,
<div class="mainDiv">
<div class="kulkul">
<div class="childA">
</div>
</div>
</div>
<div class="mainDiv">
<div class="lalala">
<div class="childB">
</div>
</div>
</div>
<div class="mainDiv">
<div class="kulkul">
<div class="childA">
</div>
</div>
</div>
<div class="mainDiv">
<div class="lalala">
<div class="childA">
</div>
</div>
</div>
<div class="mainDiv">
<div class="kulkul">
<div class="childB">
</div>
</div>
</div>
<div class="mainDiv">
<div class="lalala">
<div class="childA">
</div>
</div>
</div>
Now above, let's say that I only want to hide the parent divs which have a child div with the class .childB
This can't be done with CSS as far as I know (CSS3 anyway), because CSS doesn't allow you to style the parent div, only a child div. And the parent .mainDiv divs (the ones I want to hide) are all exactly the same.
So that leaves javascript.
Using the example above, how can I hide all the .mainDiv divs which contain a child div with the class .childB?

HIDING PARENT ELEMENT based on its direct descendant
//Update the **sample-element-to-hide** with whatever you wanted to use as a child class with the parent element you wanted to hide e.g., 'childB'
var elementToHideList = document.getElementsByClassName("sample-element-to-hide");
for (var i = elementToHideList.length; i--;)
elementToHideList[i].parentNode.style.display = "none";
HIDING PARENT ELEMENT based on its child element.
//Solution for the OP
//Update the **childB** with whatever you wanted to use as a child class with the parent element you wanted to hide.
//Note that this would only works if the parent element has a **className** mainDiv. You can change mainDiv with your own parent className.
$('.classB').closest('.mainDiv').hide();

You can do this with pure javascript:
var elementsChildB = document.getElementsByClassName("childB")
for(var i = 0 ; i < elementsChildB.length ; i++){
elementsChildB[i].parentNode.style.display = "none" ;
}
<div class="mainDiv">
<div class="childA">
a
</div>
</div>
<div class="mainDiv">
<div class="childA">
a
</div>
</div>
<div class="mainDiv">
<div class="childB">
b
</div>
</div>
<div class="mainDiv">
<div class="childA">
a
</div>
</div>
<div class="mainDiv">
<div class="childB">
b
</div>
</div>
<div class="mainDiv">
<div class="childA">
a
</div>
</div>
Or with Jquery:
$(".childB").parent().hide()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainDiv">
<div class="childA">
a
</div>
</div>
<div class="mainDiv">
<div class="childA">
a
</div>
</div>
<div class="mainDiv">
<div class="childB">
b
</div>
</div>
<div class="mainDiv">
<div class="childA">
a
</div>
</div>
<div class="mainDiv">
<div class="childB">
b
</div>
</div>
<div class="mainDiv">
<div class="childA">
a
</div>
</div>

Javascript Method
var childB = document.getElementsByClassName("childB");
for(var e = 0; e <= childB.length; e++){
childB[e].parentNode.style.display = "none";
}
JQuery Method
$('.childB').parent().hide();

Using jQuery you could use the following selector. This will hide all mainDiv containing childB but not mainDiv that contain other elements or childB without a mainDiv as its parent (in whichever level , by the use of closest - https://api.jquery.com/closest/ ) :
$(".childB").closest(".mainDiv").hide();
Fiddle:
$(function() {
$(".childB").closest(".mainDiv").hide();
});
.childB {
background-color: red;
border: 1px solid black;
height: 50px;
margin-left:20px;
}
.childA {
background-color: green;
border: 1px solid black;
height: 50px;
margin-left:10px;
}
.mainDiv {
background-color: yellow;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainDiv">
<div class="childA">
</div>
</div>
<div class="mainDiv">
<div class="childA">
</div>
</div>
<div class="mainDiv">
<div class="childB">
</div>
</div>
<div class="mainDiv">
PARENT
<div class="childA">Don't hide
</div>
</div>
<div class="mainDiv">
PARENT
<div class="childB">To be hidden
</div>
</div>
<div class="mainDiv">
This contains a child A which contains a child B: <br />
<div class="childA">It is a child A
<div class="childB">To be hidden
</div>
</div>
</div>
<div class="mainDiv">
<div class="childA">
</div>
</div>
<div class="childB">Should not be hidden
</div>

Well, you can use .parent() method to select the parent node of specified child nodes, and use .hide() to hide the selected parent nodes.
$('.childB').each(function() {
$(this).parent().hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="mainDiv">
<div class="childA">
A
</div>
</div>
<div class="mainDiv">
<div class="childA">
A
</div>
</div>
<div class="mainDiv">
<div class="childB">
B
</div>
</div>
<div class="mainDiv">
<div class="childA">
A
</div>
</div>
<div class="mainDiv">
<div class="childB">
B
</div>
</div>
<div class="mainDiv">
<div class="childA">
A
</div>
</div>

Using jQuery, $('.childA').parent().hide();

Grab all div of mainDiv class and loop for each can check children class has specific class !!
var main = document.getElementsByClassName("mainDiv");
for(var i = 0; i < main.length ; i++){
if(main[i].children[0].classList[0] == "childB"){ //assure only has one children
main[i].style.display = "none";
}
}

Go through each row and make p tag same height

I need some advice with this one:
<div class="container p-rows">
<div class="row">
<div class="col-lg-6">
<p class="ck-edit-col-bodytext">some text</div>
</div>
<div class="col-lg-6">
<p class="ck-edit-col-bodytext">some more more text</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<p class="ck-edit-col-bodytext">some text</div>
</div>
<div class="col-lg-6">
<p class="ck-edit-col-bodytext">some more more text</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<p class="ck-edit-col-bodytext">some text</div>
</div>
<div class="col-lg-6">
<p class="ck-edit-col-bodytext">some more more text</div>
</div>
</div>
<!-- some more rows -->
</div>
each p tag within each row has a different height, depending on how much text is in it. What I want to do is go through each row and detect which p tag has the most height. Then make all other p tags within the row the same height.
My attempt:
var pTagHeight = -1;
jQ('.p-rows .row').each(function() {
pTagHeight = pTagHeight > jQ('.ck-edit-col-bodytext').height() ? pTagHeight : jQ('.ck-edit-col-bodytext').height();
jQ('.ck-edit-col-bodytext').height(pTagHeight);
pTagHeight = -1;
});
but I can't get it to work. Any ideas?

You need to first loop through each row and work out the highest p tag within that row, then apply that height to all the relevant p.
Try this:
jQ('.p-rows .row').each(function() {
var $p = jQ(this).find('p');
var heights = $p.map(function(i, e) { return jQ(e).height(); }).get();
$p.height(Math.max.apply(this, heights));
});

Categories

Resources