i have created a virtual numberic keypad by javascript. this keypad position attribute is fixed (or can be absolute) and it's top and left attributes have determind in css. when user focuses a text input, (by a function that fires by "onfocus" event) the key pad appears in page and the user can type numbers in the focused input (like secure virtual keypads in Banks payment gateways but numbers place of my keypad aren't as random).
my keypad container tag css codes is as following codes:
#numPadContainer {
display: none; /* Hidden by default */
position: absolute; /* Stay in place */
z-index: 1; /* Sit on top */
right: 1000px;
top: 260px;
text-align: center;
}
with this css code the place of keypad is same for all of inputs. but i like my virtual key pad appears under the focused input. for this issue i need to get the place of focused input in javascript (the top and right attribiutes of focuased input) then change them. but following js code doesn't return these atributes. (my inputs position attribute is static)
let x=document.getElementByID("firstInput").style.right;
let y=document.getElementByID("firstInput").style.top;
can you present me a js method to get x and y attribute of focuased input or another way to appear my virtual keypad under the focused text input?
const elem = document.getElementByID("firstInput")
const { top, right, left, bottom } = elem.getBoundingClientRect();
Tip: Always use const when declaring variables, change it to let only when you have to reassign the value
You can't rely on style to give you the actual value cos styles are declared rules, they don't change if the position of the elements changes on the page (with JS).
getBoundingClientRect returns the actual position of the element.
hi one of friends Mr Vivek K request for my virtual keypad codes. this is my codes but not professional.
as the first step put this tag in page that you want use keypad there:
<div id="numPadContainer"></div>
now you need 3 file.a css file a js file and a php file as model that recives ajax request and create the keypad html code for insert to above div tag. these three file codes :
javascript:
function appearNumPad(obj){
let numPadContainer=document.getElementById("numPadContainer");
//--------- this part is for set the keypad under focused input ----------
//-- if dont use this code the keypad appear in a stable point of page --
// let elem = document.getElementById(obj.id);
// let { top, right, left, bottom } = elem.getBoundingClientRect();
//
// let x= Math.floor(left)+90;
// let y= Math.floor(top)+60;
//
// numPadContainer.style.top=y+"px";
// numPadContainer.style.left=x+"px";
//------------------------------------------------------------------------
numPadContainer.style.display = "block";
//step1:
let request = new XMLHttpRequest;
//step2:
request.open("GET", "../common/numPad.php?inputID="+obj.id);
//step3:
request.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("numPadContainer").innerHTML=this.responseText;
dispatchKeyUpEventToTextInput(obj.id);
}
};
//step4:
request.send();
}
function typeDigit(pushedKeyValue,inputID){
dispatchKeyUpEventToTextInput(inputID);
document.getElementById(inputID).focus();
let inputValue=document.getElementById(inputID).value;
let maximumLength=document.getElementById(inputID).maxLength;
if(isNaN(pushedKeyValue)){
if(pushedKeyValue=="backspace"){
inputValue=inputValue.slice(0,-1);
document.getElementById(inputID).value=inputValue;
}
if(pushedKeyValue=="delete"){
document.getElementById(inputID).value="";
}
}else{
if(inputValue.length<maximumLength) {
inputValue = inputValue + pushedKeyValue;
document.getElementById(inputID).value = inputValue;
}
}
}
function disappearNumPad(){
document.getElementById("numPadContainer").innerHTML='';
document.getElementById("numPadContainer").style.display = "none";
}
function dispatchKeyUpEventToTextInput(inputID){ // keyup handler fire by click on keypad buttons
let myInput = document.querySelector('#'+inputID);
let keyupEvent = new KeyboardEvent("keyup");
myInput.dispatchEvent(keyupEvent);
}
css:
#numPadContainer {
direction: ltr;
display: none; /* Hidden by default */
position: absolute; /* Stay in place */
z-index: 1; /* Sit on top */
left: 1000px;
top: 225px;
text-align: center;
}
#numPad{
text-align: center;
box-shadow: var(--object-shadow-size) var(--formsAndMenus-shadow-color);
border: solid var(--object-border-size) var(--formsAndMenus-border-color);
border-radius: var(--box-border-radius);
background: var(--form-background-color);
}
#numPad td{
padding: 5px;
}
.numPadBtn,#closeNumPadBtn,#deleteBtn,#backspaceBtn{
padding: 0px;
width: 45px;
height: 45px;
background-size:45px 45px;
cursor: pointer;
font-family: "B Koodak";
border: none;
border-radius: var(--box-border-radius);
color: white;
}
.numPadBtn{
font-size: 25px;
background: url("../images/numPad_blue.png") no-repeat;
background-size:45px 45px;
}
.numPadBtn:hover{
background: url("../images/numPad_green.png") no-repeat;
background-size:45px 45px;
}
#closeNumPadBtn{ /* verify key pad button */
width: 159px;
height: 40px;
font-size: 20px;
background: url("../images/numPad_wide_blue.png") no-repeat;
background-size:159px 40px;
}
#closeNumPadBtn:hover{ /* verify key pad button on hover */
background: url("../images/numPad_wide_green.png") no-repeat;
background-size:159px 40px;
}
#deleteBtn{ /* clear key pad button */
background: url("../images/numPad_delete.png") no-repeat center;
background-size:45px 45px;
}
#deleteBtn:hover{ /* clear key pad button on hover */
background: url("../images/numPad_delete_green.png") no-repeat center;
background-size:45px 45px;
}
#backspaceBtn{ /* backspace key pad button */
background: url("../images/numPad_backspace.png") no-repeat center;
background-size:45px 45px;
}
#backspaceBtn:hover{ /* backspace key pad button on hover */
background: url("../images/numPad_backspace_green.png") no-repeat center;
background-size:45px 45px;
}
php (& html):
<?php
if(isset($_GET["inputID"])){
?>
<table border="0px" id="numPad">
<?php
$digit=0;
for($i=1;$i<=3;$i++){
?>
<tr>
<?php
for($j=0;$j<=2;$j++){
$digit++;
?>
<td>
<input type="button" class="numPadBtn" value="<?php echo $digit;?>"
onclick="typeDigit(this.value,'<?php echo $_GET["inputID"] ?>')" />
</td>
<?php
}
?>
</tr>
<?php
}
?>
<tr>
<td>
<input type="button" id="backspaceBtn" onclick="typeDigit('backspace','<?php echo $_GET["inputID"] ?>')"/>
</td>
<td>
<input type="button" class="numPadBtn" value="0" onclick="typeDigit(this.value,'<?php echo $_GET["inputID"] ?>')"/>
</td>
<td>
<input type="button" id="deleteBtn" onclick="typeDigit('delete','<?php echo $_GET["inputID"] ?>')"/>
</td>
</tr>
<tr>
<td colspan="3">
<input type="button" id="closeNumPadBtn" value="verify" onclick="disappearNumPad();"/>
</td>
</tr>
</table>
<?php
}
some notice for codes:
this way is mine and not profassional and i sure there is so beter way to create virtual key pad.
i use some image for keys of keypad background that you use your desire background picture. notice to css styles for name of this images.
you most add an event to the text inputs that you want this keypad use for them. add following event to inputs:
onfocus="appearNumPad(this);"
i have needed to do some validations in my inputs by keyup events. so i send keyup event by dispatchEvent method to inputs by click on keypad buttons. the last function of js codes is for this issue.
in javascript code i have used ajax object and have sent ajax request to a php file that contains php codes. the url is the addres of this file .
i hope it be useful for you. tnx
I have a plugin that creates and, on an interval, populates a <p> with the content of a <textarea>. The plugin positions the <p> underneath the <textarea>, and styles the elements so that their "boxes" are identical. Additionally, the background and text of the <textarea> are defined as transparent so that the content of the <p> can be seen.
Ideally, the elements and their contents will mirror one another at all times. And in most cases, they do. However, when both elements are made to be scrollable, the dynamic breaks; this is due to a difference in the scrollHeight of the two elements (the scrollHeight of <textArea> is larger than that of the <p>)
Here is the code:
var $shadowParagraphObj = $("#shadowParagraph");
var $contentTextAreaObj = $("#contentTextArea").scroll(scrollShadowParagraph);
function scrollShadowParagraph(event)
{
var textAreaScrollLeft = $contentTextAreaObj.scrollLeft();
var textAreaScrollTop = $contentTextAreaObj.scrollTop();
if($shadowParagraphObj.scrollLeft() != textAreaScrollLeft)
$shadowParagraphObj.scrollLeft(textAreaScrollLeft)
if($shadowParagraphObj.scrollTop() != textAreaScrollTop)
$shadowParagraphObj.scrollTop(textAreaScrollTop)
}
var intervalId = setInterval(function(){$shadowParagraphObj.html($contentTextAreaObj.val())}, 100);
#containerDiv {
position: relative;
left: 50%;
margin-left: -250px;
width: 510px;
height: 200px;
}
#shadowParagraph, #contentTextArea {
width: inherit;
height: inherit;
overflow: scroll !important;
padding: 4px;
border : none;
outline: none;
margin: 0px;
white-space: pre-wrap;
word-wrap: pre-wrap;
font: 1em Arial, sans-serif;
}
#shadowParagraph {
position: absolute;
z-index: 0;
background: white;
color: blue;
}
#contentTextArea {
position: relative;
z-index: 1;
background: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='containerDiv'>
<p id='shadowParagraph'></p>
<textarea id='contentTextArea'></textarea>
</div>
Overflowing the <textarea> should produce the issue (the text of the <textarea> has been given color to make the issue easy to see).
Have I forgot to declare some properties that are causing this discrepancy between scrollHeight values? If so, what are they and how should I declare them? If not, is there any way to ensure that the scrollHeight of the two elements is equal at all times?
Okay so using .replace(/\n\r?g, '<br />') to convert updated values, your line breaks will be converted into html line breaks. Additionally, html tends to ignore lone <br /> line breaks, so you will want to add an additional <br /> to the value to ensure the last line break is rendered.
Put together this would look something like:
var textAreaHTML = $myTextArea.val().replace(/\n\r?g, '<br />')+'<br />';
Additionally, I would recommend updating your textarea values AND scroll position on the .keyup() event, .keypress() event, or both events using .on('keyup keypress', function() {...}).
To see this in action check out this jsFiddle example
My code is:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Inventory-Tags</title>
<script src="http://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
<style>
/* Appearance */
body, table { font-family: sans-serif; }
table { border-collapse: collapse; }
td, th { padding: 6px; }
th { background: #333; color: white; }
tbody tr:nth-child(odd) { background: #dfdfdf; }
table { border: 1px solid red; }
/* Scrollability of table */
table { width: 610px; } /* fixed width table */
thead tr { display: block; } /* makes it sizeable */
tbody {
display: block; /* makes it sizeable */
height: 262px; /* height of scrollable area */
overflow: auto; /* scroll rather than overflow */
width: 100%; /* fill the box */
}
thead th { width: 197px; } /* fixed width for THs */
tbody td { width: 185px; } /* fixed width for TDs */
</style>
</head>
<body>
<script>
function myFunction(Move2) {
document.getElementById("table1").style = "position: absolute; top: 40px"
document.getElementById("table2").style ="position:absolute; top: -9999px"
}
</script>
<script>
function myFunction(Move2) {
document.getElementById("table1").style = "position: absolute; top: -9999px"
document.getElementById("table2").style ="position:absolute; top: 40px"
}
</script>
<a onclick="function(Move)">Hi</a>
<div style="left: 40px">
<a onclick="function(Move2)">Hi2</a>
</div>
<div id="table1"; style="position: absolute; top: 40px">
<h1><div id=user_name>'s Inventory- Tags</h1>
<table class="sortable">
<thead><tr><th>Name</th><th>Explanation</th><th>Rarity</th></thead>
<tbody>
<tr><td>(the Halfbaked)</td><td>It looks kinda... under-cooked</td><td>R2</td></tr>
<tr><td>(Ninja)</td><td>Hiding in the night, you approach.</td><td>R6</td></tr>
<tr><td>(the Foul)</td><td>Foresee the future.</td><td>R7</td></tr>
<tr><td>(the Master)</td><td>Make le gold.</td><td>R6</td></tr>
<tr><td>(the Photographer)</td><td>Where's the camera?</td><td>R5</td></tr>
<tr><td>(the Canonical)</td><td>We all ship it.</td><td>R5</td></tr>
<tr><td>(the Punching Bag)</td><td>Looks like that hurt.</td><td>R3</td></tr>
<tr><td>(the Fancy)</td><td>I swear, if you start singing that song...</td><td>R5</td></tr>
<tr><td>(the Knight)</td><td>You live by the code of chivalry.</td><td>R6</td></tr>
<tr><td>(the Samurai)</td><td>Your enemy is the ninja.</td><td>R6</td></tr>
<tr><td>(the Loser)</td><td>You're not a winner.</td><td>R2</td></tr>
<tr><td>(the Outlaw)</td><td>You done somethin' bad, son.</td><td>Unique</td></tr>
<tr><td>(the Lord)</td><td>We bow to you humbly.</td><td>R9</td></tr>
<tr><td>(the Fugitive)</td><td>Always running, always hiding.</td><td>Unique</td></tr>
<tr><td>(the Egg)</td><td>Yes, that's right. An egg.</td><td>R4</td></tr>
</tbody>
</table>
</div>
<div id="table2"; style="position: absolute; top: -9999px">
<h1><div id=user_name>'s Inventory- Specials</h1>
<table class="sortable">
<thead><tr><th>Name</th><th>Explanation</th><th>Rarity</th></thead>
<tbody>
<tr><td>/slap</td><td>Allows you to slap any player for up to 15 damage.</td><td>R8</td> </tr>
<tr><td>/heal</td><td>Allows you to automatically heal yourself.</td><td>R9</td></tr>
<tr><td>/buildmode</td><td>Grants immunity to damage and permanent lighting; meant for use during building.</td><td>R9</td></tr>
<tr><td>/buff</td><td>Allows you to give yourself buffs.</td><td>R4</td></tr>
<tr><td>/invasion</td><td>Allows you to start an invasion.</td><td>R8</td></tr>
<tr><td>/gbuff</td><td>Allows you to give buffs to all players.</td><td>R9</td></tr>
<tr><td>/spawnmob</td><td>Allows you to spawn in any mob.</td><td>R9</td></tr>
<tr><td>/command1</td><td>Allows you to use /command1.</td><td>R8</td></tr>
<tr><td>/command2</td><td>Allows you to use /command2.</td><td>R8</td></tr>
<tr><td>HouseName</td><td>Gives ownership to HouseName.</td><td>House</td></tr>
<tr><td>HouseName2</td><td>Gives ownership to HouseName2.</td><td>House</td></tr>
</tbody>
</table>
</div>
</body>
</html>
From my code, I'm sure you can see what I want. I want to be able to click on my 'a' divs. When they click on 'Hi' the first table goes to the visible area, and the second table goes away. When you click on 'Hi2' the first table goes away, and the second table goes to the visual area. I know that onclick won't work with <style>, so I tried using the ParseInt method, but that will continue to move. Note that I will have four tables in my full code, and four buttons. I don't make it so that if you click 'Hi,' and then 'Hi3,' you have to click 'Hi2' or 'Hi4' to display their respective tables.
In short, I want to be able to click a button, or an <a>, and move the four tables to my own specified coordinates, without using <style>.
To answer to fixing your problem is to understand the use of basic javascript.
You cannot change an elements style like this
document.getElementById("table1").style = "position: absolute; top: -9999px"
document.getElementById("table2").style ="position:absolute; top: 40px"
Each different style change has to be set individually. Like this.
document.getElementById("table1").style.top = "-9999px"; //also don't forget the semicolon
When you are setting multiple styles on an element, it is best to set the element as a variable and setting a style to this variable each time.
var elem = document.getElementById("table1");
elem.style.position = "absolute";
elem.style.top = "-9999px";
MOST styles can be placed after the elem.style.top using their normal style name such as top, height, color, etc.. Except z-index which can be defined as zIndex
I need to place a <div> with fixed height (100px) and full width (100% of the parent <td>) within a <td> on the bottom. The <td> could be higher than the browsers viewport height as the content of the other <td>s are probably huge.
I already tried some solutions like this (link), which is actually placing the div at the bottom of the browsers viewport.
Edit:
Here's a snippet of what is NOT working (according to the link above):
td {
position: relative;
}
div {
position: absolute;
bottom: 0;
}
Is there any option to fix a <div> to the total bottom of a <td> using PHP, HTML, CSS or JavaScript (jQuery also)?
Edit 3:
Another problem occuring, when I use the solution as showed above is, that if I assign the div the property "position: absolute;" the "width: 100%;" relates to the viewport width, not the td width.
Edit 4:
The actual code of my page:
html:
<tr>
<td id="content">
</td>
<td class="sidebar">
<div class="internal">Notice</div>
</td>
</tr>
css:
#content{
height: 1000px;
}
.sidebar{
width: 10%;
min-width: 200px;
position: relative;
}
div.internal{
position: absolute;
bottom:0;
width:100%;
height: 100px;
}
jsFiddle: Source
Here's a working example
Use this to place the div at the bottom
td{
position: absolute;
}
div{
position: absolute;
bottom: 0px;
}
UPDATE
This is an example with your code working link
It work's for me in Chrome and IE. The Red section is your div. Is this the layout you want?
UPDATE 2
If you want to use a table layout you can try doing that: table layout
UPDATE 3: working only with tables
If the previous solution didn't work for you I'm guessing your code isn't modular enough. If you want to use tables, you might want to use only tables. Add another table inside the requested cell like this: table inside the cell . As much as I'm against it, I still think it's better than using JS to solve your problem. It will be easier to maintain in the future.
You need using something like:
<table>
<tr>
<td class="sidebar">
<div class="internal">Notice</div>
</td>
</tr>
</table>
CSS:
.sidebar{
width: 10%;
min-width: 200px;
height: 1000px;
background-color: green;
}
div.internal{
position: absolute;
height: 100px;
background-color: yellow;
}
Javascript:
$(document).ready(function () {
var $div = $('div.internal');
var $td = $div.closest('td');
$div.width($td.width() + 2);
$div.css('top', ($td.height() - $div.height() + 12) + 'px');
});
http://jsfiddle.net/Z58ZW/5/
try adding
div.myClass{
position: absolute;
bottom:0;
width:100%;
}
to the div.
Example with the div positioned only on td bottom.
JSFiddle
I have two divs inside of a container. One on the left, one on the right, side by side. How am I able to make each one be of equal height, even though they have different content.
For example, the right div has a lot of content, and is double the height of the left div, how do I make the left div stretch to the same height of the right div?
Is there some JavaScript (jQuery) code to accomplish this?
You could use jQuery, but there are better ways to do this.
This sort of question comes up a lot and there are generally 3 answers...
1. Use CSS
This is the 'best' way to do it, as it is the most semantically pure approach (without resorting to JS, which has its own problems). The best way is to use the display: table-cell and related values. You could also try using the faux background technique (which you can do with CSS3 gradients).
2. Use Tables
This seems to work great, but at the expense of having an unsemantic layout. You'll also cause a stir with purists. I have all but avoided using tables, and you should too.
3. Use jQuery / JavaScript
This benefits in having the most semantic markup, except with JS disabled, you will not get the effect you desire.
Here's a way to do it with pure CSS, however, as you'll notice in the example (which works in IE 7 and Firefox), borders can be difficult - but they aren't impossible, so it all depends what you want to do. This example assumes a rather common CSS structure of body > wrapper > content container > column 1 and column 2.
The key is the bottom margin and its canceling padding.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Equal Height Columns</title>
<style type="text/css">
<!--
* { padding: 0; margin: 0; }
#wrapper { margin: 10px auto; width: 600px; }
#wrapper #main_container { width: 590px; padding: 10px 0px 10px 10px; background: #CCC; overflow: hidden; border-bottom: 10px solid #CCC; }
#wrapper #main_container div { float: left; width: 263px; background: #999; padding: 10px; margin-right: 10px; border: 1px solid #000; margin-bottom: -1000px; padding-bottom: 1000px; }
#wrapper #main_container #right_column { background: #FFF; }
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="main_container">
<div id="left_column">
<p>I have two divs inside of a container. One on the left, one on the right, side by side. How am I able to make each one be of equal height, even though they have different content.</p>
</div><!-- LEFT COLUMN -->
<div id="right_column">
<p>I have two divs inside of a container. One on the left, one on the right, side by side. How am I able to make each one be of equal height, even though they have different content.</p>
<p> </p>
<p>For example, the right div has a lot of content, and is double the height of the left div, how do I make the left div stretch to the same height of the right div?</p>
<p> </p>
<p>Is there some JavaScript (jQuery) code to accomplish this?</p>
</div><!-- RIGHT COLUMN -->
</div><!-- MAIN CONTAINER -->
</div><!-- WRAPPER -->
</body>
</html>
This is what it looks like:
you can get it working with js:
<script>
$(document).ready(function() {
var height = Math.max($("#left").height(), $("#right").height());
$("#left").height(height);
$("#right").height(height);
});
</script>
I've seen many attempts to do this, though none met my OCD needs. You might need to dedicate a second to get your head around this, though it is better than using JavaScript.
Known downsides:
Does not support multiple element rows in case of a container with dynamic width.
Does not work in IE6.
The base:
red is (auxiliary) container that you would use to set margin to the content.
green is position: relative; overflow: hidden and (optionally, if you want columns to be centered) text-align: center; font-size: 0; line-height: 0;
blue display: block; float: left; or (optionally, if you want columns to be centered) display: inline-block; vertical-align: top;
So far nothing out of ordinary. Whatever content that blue element has, you need to add an absolutely positioned element (yellow; note that the z-index of this element must be lower than the actual content of the blue box) with this element and set top: 0; bottom: 0; (don't set left or right position).
All your elements now have equal height. For most of the layouts, this is already sufficient. My scenario required to have dynamic content followed by a static content, where static content must be on the same line.
To achieve this, you need to add padding-bottom (dark green) eq to the fixed height content to the blue elements.
Then within the yellow elements create another absolutely positioned (left: 0; bottom: 0;) element (dark blue).
Supposedly, if these boxes (yellow) had to be active hyperlinks and you had any style that you wanted to apply to the original blue boxes, you'd use adjacent sibling selector:
yellow:hover + blue {}
Here is a the code and demo:
HTML:
<div id="products">
<ul>
<li class="product a">
<a href="">
<p class="name">Ordinary product description.</p>
<div class="icon-product"></div>
</a>
<p class="name">Ordinary product description.</p>
</li>
<li class="product b">
<a href="">
<p class="name">That lenghty product description or whatever else that does not allow you have fixed height for these elements.</p>
<div class="icon-product"></div>
</a>
<p class="name">That lenghty product description or whatever else that does not allow you have fixed height for these elements.</p>
</li>
<li class="product c">
<a href="">
<p class="name">Another ordinary product description.</p>
<div class="icon-product"></div>
</a>
<p class="name">Another ordinary product description.</p>
</li>
</ul>
</div>
SCSS/LESS:
#products {
ul { position: relative; overflow: hidden; text-align: center; font-size: 0; line-height: 0; padding: 0; margin: 0;
li { display: inline-block; vertical-align: top; width: 130px; padding: 0 0 130px 0; margin: 0; }
}
li {
a { display: block; position: absolute; width: 130px; background: rgba(255,0,0,.5); z-index: 3; top: 0; bottom: 0;
.icon-product { background: #ccc; width: 90px; height: 90px; position: absolute; left: 20px; bottom: 20px; }
.name { opacity: 1; }
}
.name { position: relative; margin: 20px 10px 0; font-size: 14px; line-height: 18px; opacity: 0; }
a:hover {
background: #ddd; text-decoration: none;
.icon-product { background: #333; }
}
}
}
Note, that the demo is using a workaround that involves data-duplication to fix z-index. Alternatively, you could use pointer-events: none and whatever solution for IE.
here is very simple solution with a short css display:table
<div id="main" class="_dt-no-rows">
<div id="aside" contenteditable="true">
Aside
<br>
Here's the aside content
</div>
<div id="content" contenteditable="true">
Content
<br>
geht's pellentesque wurscht elementum semper tellus s'guelt Pfourtz !. gal hopla
<br>
TIP : Just clic on this block to add/remove some text
</div>
</div>
here is css
#main {
display: table;
width: 100%;
}
#aside, #content {
display: table-cell;
padding: 5px;
}
#aside {
background: none repeat scroll 0 0 #333333;
width: 250px;
}
#content {
background: none repeat scroll 0 0 #E69B00;
}
its look like this
Well, I don't do a ton of jQuery, but in the CSS/Javascript world I would just use the object model and write a statement as follows:
if(leftDiv.style.height > rightDive.style.height)
rightDiv.style.height = leftDiv.style.height;
else
leftDiv.style.height = rightDiv.style.height)
There's also a jQuery plugin called equalHeights that I've used with some success.
I'm not sure if the one I'm using is the one from the filament group mentioned above, or if it's this one that was the first google result... Either way a jquery plugin is probably the easiest, most flexible way to go.
Use this in jquery document ready function. Considering there are two divs having ids "left" and "right."
var heightR = $("#right").height();
var heightL = $("#left").height();
if(heightL > heightR){
$("#right").css({ height: heightL});
} else {
$("#left").css({ height: heightR});
}
Although many disagree with using javascript for this type of thing, here is a method that I used to acheive this using javascript alone:
var rightHeight = document.getElementById('right').clientHeight;
var leftHeight = document.getElementById('left').clientHeight;
if (leftHeight > rightHeight) {
document.getElementById('right').style.height=leftHeight+'px';
} else {
document.getElementById('left').style.height=rightHeight+'px';
}
With "left" and "right" being the id's of the two div tags.
This is what I use in plain javascript:
Seems long, but is very uncomplicated!
function equalizeHeights(elements){
//elements as array of elements (obtain like this: [document.getElementById("domElementId"),document.getElementById("anotherDomElementId")]
var heights = [];
for (var i=0;i<elements.length;i++){
heights.push(getElementHeight(elements[i],true));
}
var maxHeight = heights[biggestElementIndex(heights)];
for (var i=0;i<elements.length;i++){
setElementHeight(elements[i],maxHeight,true);
}
}
function getElementHeight(element, isTotalHeight){
// isTotalHeight triggers offsetHeight
//The offsetHeight property is similar to the clientHeight property, but it returns the height including the padding, scrollBar and the border.
//http://stackoverflow.com/questions/15615552/get-div-height-with-plain-javascript
{
isTotalHeight = typeof isTotalHeight !== 'undefined' ? isTotalHeight : true;
}
if (isTotalHeight){
return element.offsetHeight;
}else{
return element.clientHeight;
}
}
function setElementHeight(element,pixelHeight, setAsMinimumHeight){
//setAsMinimumHeight: is set, we define the minimum height, so it can still become higher if things change...
{
setAsMinimumHeight = typeof setAsMinimumHeight !== 'undefined' ? setAsMinimumHeight : false;
}
var heightStr = "" + pixelHeight + "px";
if (setAsMinimumHeight){
element.style.minHeight = heightStr; // pixels
}else{
element.style.height = heightStr; // pixels
}
}
function biggestElementIndex(arr){
//http://stackoverflow.com/questions/11301438/return-index-of-greatest-value-in-an-array
var max = arr[0];
var maxIndex = 0;
for (var i = 1; i < arr.length; i++) {
if (arr[i] > max) {
maxIndex = i;
max = arr[i];
}
}
return maxIndex;
}
I agree with initial answer but the JS solution with equal_heights() method does not work in some situations, imagine you have products next to each other. If you were to apply it only to the parent container yes they will be same height but the product name sections might differ if one does not fit to two line, this is where i would suggest using below
https://jsfiddle.net/0hdtLfy5/3/
function make_children_same_height(element_parent, child_elements) {
for (i = 0; i < child_elements.length; i++) {
var tallest = 0;
var an_element = child_elements[i];
$(element_parent).children(an_element).each(function() {
// using outer height since that includes the border and padding
if(tallest < $(this).outerHeight() ){
tallest = $(this).outerHeight();
}
});
tallest = tallest+1; // some weird shit going on with half a pixel or something in FF and IE9, no time to figure out now, sowwy, hence adding 1 px
$(element_parent).children(an_element).each(function() {
$(this).css('min-height',tallest+'px');
});
}
}