border between two columns without height speified - html

I've got two columns and i need to add line between them. This is 1px solid color so i would love to achieve this with css.
The trick is that content is dynamicaly loaded, so sometimes the left column can have more text and sometimes right column can have more text. Of course if the size of coulmn would be always the same i would add the border to bigger one. But unfortunatly i don't.
So is there a way to achieve this or do i have combine it with php and maybe strlen or something?
You can find simple code for this problem here http://jsfiddle.net/M9TSs/

One way of doing it would be to have a border on both, and use a negative 1px margin to pull the right column over so that the borders overlap:
http://jsfiddle.net/7GCff/

I already solved this using JQuery...
I used this code and it worked great.
function equalHeight(group) {
var tallest = 0;
group.each(function() {
var thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
Source : http://www.cssnewbie.com/equal-height-columns-with-jquery/
Makes all columns have the same height as the longest.

Related

Offset seems to be drasticly different per item i click

I have been working with creating a selection box around some cells, The selection box is absolute so it can reach everywhere it needs to, to create a click and drag box around some cells.
It seems that based on the mousedown event, the position of the box is set correctly for class hour but not for half-hour. While it is the same code, hour offset will return me the corrdinates of the item. relative to the doc, whereas the half-hour will return approx (0,6) which sets the top:left to the upper right corner.
Right now, my dom looks like this:
<div class="row">
<div class="cell hour">
<div class="half-hour"></div>
<div class="half-hour"></div>
</div>
</div>
and the CSS is:
.hour{
position:relative;
}
.half-hour{
display:inline-block;
float:left;
width: 50%;
height: 100%;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
border: solid 1px black;
width: 20px;
text-align: center;
cursor: pointer;
}
From what it looks like is that the offset I am getting when selecting the half-hour is the offset to the parent hour and the hour i think is getting his relative to the page?
After looking at these, I was thinking that setting half-hour to: *position:relative;` might do the trick, but it didnt do anything. it is the same.
I am thinking i need to modify something. im just not sure what.
I will eventually be doing this same design for a class called: quarter-hour which will have 2 in each of the half-hour divs.
Edit based on the question below, I just have a simple: ` which is on the page, and then on mousedown it would:
1- Set Top:Left values based on mouse.target.offsetTop && mouse.target.offsetLeft respectively.
2- Set position absolute (though it should be already)
3- set dimensions, Height and Width accordingly.
Edit 2 I managed to recreate my issue with this fiddle https://jsfiddle.net/838vqboe/ I am currently giving 3 options in the DDL. Hour works as expected, but not HH or QH.
I ended up coming up with a solution which worked in Javascript, but when converting it to Dart, specifically with Polymer, the concepts behind shadowdom was alien to me. This I think is the issue I was having as it was determining a local root it was applying positions to while the mouse gave me positions in relation to the screen.
To resolve this, I noticed that something which extends PolymerElement has get getBoundingClientRect(), so i ended up doing something like the following in javascript:
var _mouseDown = function(e){
var selectedHtml = e.target;
var left = selectedHtml.getBoundingClientRect().left - getBoundingClientRect().left
var top = selectedHtml.getBoundingClientRect().top - getBoundingClientRect().top
_selectionDiv.css({left:left, top:top});
}
$selection.on("mousedown", _mouseDown);
and in Dart:
Function _mouseDown(MouseEvent mouse){
HtmlElement selectedElement =- mouse.target;
var left = selectedHtml.getBoundingClientRect().left - getBoundingClientRect().left;
var top = selectedHtml.getBoundingClientRect().top - getBoundingClientRect().top ;
_selectionDiv.style.top = "${top}px";
_selectionDiv.style.left = "${left}px";
}

Resizing floated first div's based on second floated div contents?

I want to have to floated columns side-by side. If second column has contents then the first column should resize its content based on the second column, is that possible with CSS? Widths are not defined.
It's possible using javascript but not with straight CSS. Here are some ways to do it:
Using javascript:
var rightDiv = document.getElementById("straightJ2");
var rightWidth = rightDiv.clientWidth;
var leftDiv = document.getElementById("straightJ1");
if($('#straightJ2').text() || rightDiv.hasChildNodes()) {
leftDiv.style.width = rightWidth + "px";
}
Or more minimal (and possibly overwhelming/hard to follow) javascript:
if($('#minimal2').text() || $('#minimal2').firstChild) {document.getElementById("minimal1").style.width = document.getElementById("minimal2").clientWidth + "px";}
Using jQuery:
if($('#secondColumnId').html() != '')
{
$('#firstColumnId').width($('#secondColumnId').width());
}
Each of these check the second div for text or a child element and change the width of the first if one of those conditions is met
All examples can be found used in this jsFiddle

How do I set up my multiline wordWrap TextField to automatically resize its width when height is set?

I want to create a textfield extension that:
When width is set, automatically resize height by the content of text. Easy done by autosize left, word wrap true, multiline true.
When height is set, automatically resize width by the content of text. Here is my problem.
When both width and height set aren't a case I am interested in.
I've tried several things off the internet, I am stumped.
General solution is impossible, as if the text field contains too many newlines to display within a given height, no matter what width you assign, the text field will be unable to display all the lines. Partial solution is presented by greetification, but it lacks some features one should be aware of. First, no matter what you do, you should not set height to value less than font height, or the text field will not be able to display a single line. Second, if wordWrap is set to false, and multiline to true, the resultant textWidth is the largest desirable width for your text field, so if you adjust the width like greetification advises, stop once you reach the recorded textWidth, as further increases are pointless.
function setHeight(newHeight:Number):void {
var tw:Number;
var th:Number;
if (myTextField.wordwrap) {
myTextField.wordwrap=false;
tw=myTextField.textWidth;
th=myTextField.textHeight;
myTextField.wordwrap=true;
} else {
tw=myTextField.textWidth;
th=myTextField.textHeight;
}
if (newHeight<th) newHeight=th+2; // as below
myTextField.height = newHeight;
while((myTextField.textHeight > myTextField.height)&&(myTextField.width<tw)) {
myTextField.width += 100;
}
if (myTextField.width>tw) myTextField.width=tw+2; // "2" depends on text format
// and other properties, so either play with it or assume a number big enough
}
Not the most elegant solution, but it should work:
function setHeight(newHeight:Number):void {
myTextField.height = newHeight;
while(myTextField.textHeight > myTextField.height) {
myTextField.width += 100;
}
}

Canvas dimensions based on outer div measurements (js?)

I am having a bit of a layout nightmare. I've been trying for days to fix it on my own but now it's come to this....
http://jsfiddle.net/Osceana/yQ3As/2/
I am just trying to get the canvas to span the entire length of that timeline, and I want it to end just above the "All Sites" div, regardless of the window it is moved to. I cannot seem to achieve this though. I've tried in javascript to no avail.
$("#chart").height(
canvasHeight);
$("#chart").width(
timelineWidth);
P.S. The timeline is supposed to have a left-margin which I implement in js:
$("#timeline").css(
"margin-left", namesWidth);
^ this shows up in MY project, but not here on jsfiddle for some reason. However in my project the left-margin seems to be causing horizontal overflow. I just want that timeline to be moved over enough for the names, then it spans the entire rest of the horizontal length of the screen. I've set the CSS for the width at 100%, 92%, etc., and my results are always strange. Is it because of the left-margin the percentage isn't working?
timeline CSS:
#timeline {
font-size:15px;
color:black;
font-family:Calibri;
text-align:center;
margin-top:60px;
width:100%;
}
#timeline td {
width: 4%;
}
timeline js:
var namesWidth = $("#names").width()
$("#timeline").css(
"margin-left", namesWidth);
*Thank you so much for any and all insight. I hope I'm not asking too much.
Live Demo
Editor
You didn't have your fiddle set to use jQuery. Below should get you close to what you need.
var $chart = $("#chart"),
spacing = 40,
canvasHeight = $("#company").position().top - $chart.position().top - spacing,
windowWidth = $(window).width(),
namesWidth = $("#names").width();
$chart.width($("#timeline").width());
$chart.height(canvasHeight);
$("#timeline").css("margin-left", namesWidth);
$chart.css("margin-left", namesWidth);
// change on resize
$(window).resize(function () {
canvasHeight = $("#company").position().top - $chart.position().top - spacing;
$chart.height(canvasHeight);
});

Is there any way to set a CSS min-width on an element that is floated?

I have this html:
<div id="subNav"></div>
<div id="feed"></div>
<div id="feedBar"></div>
I have floated all of these divs left. I set the width of #subNav and #feedBar, but on #feed I set its min-width . It takes the min-width even though the window is larger. Is there any way that with floating you can make the min-width work? I am trying to make a flexible layout on the page.
The following answer uses a JavaScript solution, in response to #Chromedude's comment (to the original question):
#David Is there any way to override this behavior? with javascript?
I'm sure there's a far more simple way of doing this (certainly with a JavaScript library), but this was the best I could come up with at this time of morning (in the UK):
var feed = document.getElementById('feed');
var width = document.width;
var feedBarWidth = document.getElementById('feedBar').clientWidth;
var subNavWidth = document.getElementById('subNav').clientWidth;
feed.setAttribute('style', 'width: ' + (width - (subNavWidth + feedBarWidth)) + 'px');
JS Fiddle demo.
Using jQuery (just as a suggestion as to the ease offered by a library):
var bodyWidth = $(document).width();
var subNavWidth = $('#subNav').width();
var feedBarWidth = $('#feedBar').width();
$('#feed').css('width', bodyWidth - (subNavWidth + feedBarWidth));
Use a grid system such as the one in Foundation 3. When placed on a div representing an element of the grid, min-width behaves just fine.
To get min-width to work without a grid, use a CSS rule that inserts an invisible pseudo-element with the desired minimum paragraph width.
p:before {
content: "";
width: 10em;
display: block;
overflow: hidden;
}
Further details are at the source where I learned this.