Develop Reference

How do I horizontal scroll a div table inside an iframe?

So I have a table, inside an iframe, inside another frame, that I would like to be able to scroll horizontally to designated locations by clicking anchor tags that are outside of the frame that it is in. I originally used an inline js method (when the table was different) that worked but now that I have updated to CSS the method is not working. So I'm reaching out to you pro.s out there for help :) Thanks in advance.
Sample code I'm using:
HTML frame I'm using that refers to the frame the table is in:
<iframe src="PrimaryTables.html" id="FrameTableIsIn" name="FrameTableIsIn" scrolling="yes" align="middle" height="1350" width="100%" marginwidth="0" marginheight="0" frameborder="no"></iframe>
HTML Document inside of iframe (FrameTableIsIn):
<div class="container" id="contained">
<table width="100%" cellspacing="1" cellpadding="0" border="0" id="primerows">
<tr>
<td class="fixed">STUFF HERE</td>
<td class="fixedspecial"align="center" valign="middle">STUFF HERE THAT OVERLAPS THE PREVIOUS TD STUFF NICELY</td>
<td>OTHER STUFF HERE REPEATING COLUMNS</td>
</tr>
</table>
</div>
Lots of rows and columns for a really long table handled and works nicely with CSS thus:
<style>
td, th {
white-space: nowrap;
min-width: 100px;
height:32px;
vertical-align: middle;
}
.container {
overflow-x: scroll;
margin-left: 100px;
}
.fixed {
height:30px;
border: 1px solid #000000;
position: absolute;
left: 0;
display: inline-table;
text-align: center;
vertical-align: middle;
}
.fixedspecial {
border: 1px solid #000000;
position: absolute;
left: 0;
height:35px;
}
</style>
Inline java like this on page outside of iframe (FrameTableIsIn) that I want to effect document inside of iframe (FrameTableIsIn):
Link Text Here
With my old table (html 3 or something) I was able to click the link, the page would scroll(jump) the table horizontally to the location designated, then it would scroll(jump) to the top of the page to see the table in the iframe above the link. Now with css, etc. it will scroll the page up, but not scroll the table in the embedded iframe horizontally because the scroll feature is trapped inside the div element and I don't know the proper handle here...
Inline java preferred if possible, all that java scripting stuff clogs up my already crazy/spaghetti coding and reminds me of Pascal really... :) (for those of you who still know what that is :)

So for those who may need to know, there seems to be no way of calling into an iframe to the div table from outside of the iframe with just an inline javascript method. So my solution, which works as my old table did, was to pull the table out of the iframe, id the div (DivTable) and then I was able to get the inline javascript to work thus:
LINK HERE
Now my links scroll my Div Table with fixed column to the location set by scrollto (x,y). Remember that InitialFrame is the frame that the table and links share now and the target could probably just be (_top) but I haven't messed with it now that it works :). Hope this helps someone in the future...

ember-drag-sort: implementing a sortable list based on an HTML table?

Originally asked by #livfwd on GitHub.
It seems like the :before :after pseudo-elements break the table layout and put the placeholder in unexpected places when dragging rows within a table.
Are there any known workarounds for this?

ember-drag-sort uses a simple CSS technique to render the placeholder: :before and :after pseudoelements.
Unfortunately, this doesn't work with HTML tables because table semantics are very restrictive. To work around this problem, top/bottom padding on table cells can be used instead of selectors.
This is not a great solution because padding appears inside table cells. If you want your cells to have borders, you'll have to apply them to inner elements instead.
Tables are now part of the demo, please have a look.
Here are the CSS overrides used in the demo:
table {
width: 100%;
}
table.dragSortList.-isExpanded {
padding: 15px;
background-color: #f6f6f6;
}
table.dragSortList.-isExpanded.-isDraggingOver {
background-color: #eee;
}
table.dragSortList.-isExpanded.-isDraggingOver:before {
content: none;
}
tr.dragSortItem.-placeholderAbove:before,
tr.dragSortItem.-placeholderBelow:before {
content: none;
}
tr.dragSortItem.-placeholderAbove td {
padding-top: 25px;
}
tr.dragSortItem.-placeholderBelow td {
padding-bottom: 25px;
}
table .the-item {
margin: 0;
}
If this approach does not suit you, unfortunately, this addon currently cannot offer anything else. You'll have to either revert to divs or use another drag-sorting addon.

Center textarea text vertically if only one row with text

I got a textarea that is 2 rows high. When there is just one row of text in the textarea it looks like this:
What I'm looking for is a way to make it look like this if only one row got text:
When there are 2 rows in the textarea with text, I want it to look normal like this:
Here is the code:
<textarea class='input_box_menu'>Test text</textarea>
.input_box_menu {
text-align: center;
width: 217px;
height: 35px;
resize: none;
float: left;
}
Help really appreciated!
Thanks,
Tompa

Here is a little jQuery snippet to do exactly what you wish to do:
$(function () {
fixVAlign($('.input_box_menu'));
$('.input_box_menu').on('keyup', function () {
fixVAlign($(this))
});
});
function fixVAlign(field) {
if (field.val().length < 27) {
field.css('line-height', '35px');
} else {
field.css('line-height', 'normal');
}
}
And here the jsfiddle

Ok so my first train of thought was to look up the css property vertical-align here.
Applies to: inline-level and table-cell elements
So looking at your example, inline-level objects seem to be out of the question -- so why not table cell?
Try this out:
.box {
display: table-cell;
height: 200px;
width: 400px;
background: #d4d4d4;
text-align: center;
vertical-align: middle;
}
<div class="box">
Text Text Text
</div>
Just a side note, there are ways to do this with a span within a div or a div withing a div, this is just how I chose to interpret the question.
EDIT
Ignore my answer because it doesn't do anything about textareas.
See this pen on CodePen for an example of a good fix.

Because you say you can use JavaScript, the simplest way to do this would be to set the initial line-height of the <textarea> equal to its initial height. Then onkeypress or a similar JavaScript event you can check textarea.value.length and if it's long enough to wrap, then you would set the line-height back to the font-size.

JQuery autocomplete result style

I'm trying to change the style from my AutoComplete result.
I tried:
// Only change the inputs
$('.ui-autocomplete-input').css('fontSize', '10px');
$('.ui-autocomplete-input').css('width','300px');
I searches and could not find out what the class used by the result is, so that I can change its font size and maybe its width.
Thanks.
Using:
jQuery-UI AutoComplete
EDIT: I need change the css from my result, that comes from my JSON, not from the input. The code you posted, only changes the input, not the result. This is why I asked for the class used by the result list (at least, I believe that is a list). I tried to use fb from ff and could not find it. Thanks again for your patience.
EDIT2: I'll use the autocomplete from jQuery UI as example.
Check this to see the jQuery-UI auto-complete page
After I type "Ja" in the textbox from the front-page sample, Java and JavaScript will appear as Results, in the little box below the textbox.
This little box is what I want to change the CSS of. My code in the sample above only changes my textbox CSS (which I don't need at all).
I don't know if I'm being clear now. I hope so, but if not, please let me know; I'll try harder if needed to show my problem.
The class for the UL that will contain the result items is what I need.
SOLUTION
As Zikes said in his comment on the accepted answer, here is the solution. You just need to put ul.ui-autocomplete.ui-menu{width:300px} in your CSS file.
This will make all the the results box css have width:300px (like the sample).
I forgot that the results object does not exist on page load, and therefor would not be found and targetted by a call to $('...').css(). You'll actually need to put ul.ui-autocomplete.ui-menu{width:300px} in your CSS file, so that it will take effect when the results are generated and inserted into the page.
– Zikes

Information on styling the Autocomplete widget can be found here: http://docs.jquery.com/UI/Autocomplete#theming
Fiddle
HTML
<input type="text" id="auto">
jQuery
$('#auto').autocomplete({'source':
['abc','abd','abe','abf','jkl','mno','pqr','stu','vwx','yz']
});
CSS
ul.ui-autocomplete.ui-menu{width:400px}
/*
targets the first result's <a> element,
remove the a at the end to target the li itself
*/
ul.ui-autocomplete.ui-menu li:first-child a{
color:blue;
}

I was able to adjust by adding this css to the <head> of the document (above the autocomplete javascript).
Some of the following may be more relevant than others. You could make it specific to the autocomplete input if changing these affects other elements you don't want affected.
<style type="text/css">
/* http://docs.jquery.com/UI/Autocomplete#theming*/
.ui-autocomplete { position: absolute; cursor: default; background:#CCC }
/* workarounds */
html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */
.ui-menu {
list-style:none;
padding: 2px;
margin: 0;
display:block;
float: left;
}
.ui-menu .ui-menu {
margin-top: -3px;
}
.ui-menu .ui-menu-item {
margin:0;
padding: 0;
zoom: 1;
float: left;
clear: left;
width: 100%;
}
.ui-menu .ui-menu-item a {
text-decoration:none;
display:block;
padding:.2em .4em;
line-height:1.5;
zoom:1;
}
.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
font-weight: normal;
margin: -1px;
}
</style>

If you are using the official jQuery ui autocomplete (i'm on 1.8.16) and would like to define the width manually, you can do so.
If you're using the minified version (if not then find manually by matching _resizeMenu), find...
_resizeMenu:function(){var a=this.menu.element;a.outerWidth(Math.max(a.width("").outerWidth(),this.element.outerWidth()))}
...and replace it with (add this.options.width|| before Math.max) ...
_resizeMenu:function(){var a=this.menu.element;a.outerWidth(this.options.width||Math.max(a.width("").outerWidth(),this.element.outerWidth()))}
... you can now include a width value into the .autocomplete({width:200}) function and jQuery will honour it. If not, it will default to calculating it.

Just so you know you have two options for optimizing your code:
Instead of this:
$('.ui-autocomplete-input').css('fontSize', '10px');
$('.ui-autocomplete-input').css('width','300px');
You can do this:
$('.ui-autocomplete-input').css('fontSize', '10px').css('width','300px');
Or even better you should do this:
$('.ui-autocomplete-input').css({fontSize: '10px', width: '300px'});

Making a Table Row clickable

I wonder what the best way to make an entire tr clickable would be?
The most common (and only?) solution seems to be using JavaScript, by using onclick="javascript:document.location.href('bla.htm');" (not to forget: Setting a proper cursor with onmouseover/onmouseout).
While that works, it is a pity that the target URL is not visible in the status bar of a browser, unlike normal links.
So I just wonder if there is any room for optimization? Is it possible to display the URL that will be navigated to in the status bar of the browser? Or is there even a non-JavaScript way to make a tr clickable?

If you don't want to use javascript, you can do what Chris Porter suggested by wrapping each td element's content in matching anchor tags. Then set the anchor tags to display: block and set the height and line-height to be the same as the td's height. You should then find that the td's touch seamlessly and the effect is that the whole row is clickable. Watch out for padding on the td, which will cause gaps in the clickable area. Instead, apply padding to the anchor tags as it will form part of the clickable area if you do that.
I also like to set the row up to have a highlight effect by applying a different background color on tr:hover.
Example
For the latest Bootstrap (version 3.0.2), here's some quick CSS to show how this can be done:
table.row-clickable tbody tr td {
padding: 0;
}
table.row-clickable tbody tr td a {
display: block;
padding: 8px;
}
Here's a sample table to work with:
<table class="table table-hover row-clickable">
<tbody>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
</tbody>
</table>
Here's an example showing this in action.

With jQuery you can do something along these lines:
$('tr').click(function () {
$(this).toggleClass('highlight_row');
});
Then add a highlight_row to your CSS file and that row will change its class to highlight_row. You could swap out whatever you want to do in that line (as well as change $('tr') to fit your specific row.

I have found this solution which works quite well:
$(document).ready(function() {
$('#example tr').click(function() {
var href = $(this).find("a").attr("href");
if(href) {
window.location = href;
}
});
});
Just don't forget to style the cursor as a pointer on tr:hover
#table tr:hover {cursor: pointer;}
Source: http://www.electrictoolbox.com/jquey-make-entire-table-row-clickable/

"
The most common (and only?) solution seems to be using JavaScript, by using onclick="javascript:document.location.href('bla.htm');" (not to forget: Setting a proper cursor with onmouseover/onmouseout).
"
The onclick-command should look like this:
onclick="window.location.href='bla.html';"
And it isn't necessary to do anything onmouseover/-out about the cursor as a cursor-property only works when the mouse is hovering the element:
style="cursor:pointer;"

Another approach is to actually linkify the contents of each cell. You could change the style if necessary so they don't look like traditional links.
Note that what you are trying to do does break the intuitive user experience a little bit. It needs to be clear that clicking on a row does something. I usually prefer to put an icon at the edge of each row (a magnifying glass, etc.) which drills into a new page.

Fortunately or unfortunately, most modern browsers do not let you control the status bar anymore (it was possible and popular back in the day) because of fraudulent intentions.
Your better bet would be a title attribute or a javascript tooltip.

If your table does not have links inside, following trick should work.
Put entire table into a link and change the href attribute of the link in rows onmouseover events.
Demo code:
<script type="text/javascript">
function setLink(elRow) {
var elLink = document.getElementById('link');
elLink.href = elRow.rowIndex + ".com";
}
</script>
...
<a id=link>
<table>
<tr onMouseOver="setLink(this);"><td>first row</td></tr>
<tr onMouseOver="setLink(this);"><td>second row</td></tr>
</table>
</a>

I realise this is an old thread with a perfectly legit solution in Alice's answer. There is however also a way to do this without javascript AND without duplicating your link * the number of columns AND keeping your markup/CSS valid. It took me a while to figure out, so I thought I'd post it here for others that also happen to end up on this thread like I did.
Put the link in the first column:
<table class="search_results">
<tr>
<td>Some text</td>
<td>more text</td>
<td>more text</td>
</tr>
</table>
This is perfectly fine markup, so your only real issue is getting that link to span the width of your table. I did it like this using pretty standard CSS:
table.search_results a {position:absolute;display:block;width:98%;}
Change the width to whatever you want and in principle you are done and dusted. So that is all relatively easy, however if you, like me, have a fluid/responsive layout, and also some standard styling on your links plus some padding on your tables, you are going to need these rules (copied necessary from above and added extra).
table.search_results td:first-child {padding:0;}
table.search_results a {position:absolute;display:block;width:98%;max-width:1272px;font-weight:normal;color:#000;padding:.5em;}
table.search_results a:hover {background:none;}
table.search_results tr:hover {border-color:#25505b;background:#b5d6dd;}
To explain:
The first rule removes all padding on my first td ONLY. By default the padding on my td is .5em.
The second rule adds the same padding back on the link, otherwise you end up with misaligned cell contents. It also corrects a few standard styles I have on my a to ensure the columns all look the same. You could do this the other way around too (add the link styles to your td).
With the last two rules I get rid of the default hover effect on my links, then put it on the tr for any tables with the right class.
This works in the browsers I care about, but you should of course test in those you care about :) Hope I help save someone some minutes with this writeup!

It's a hack but you can add this to your tr:
onmouseover="window.status='http://bla.com/bla.htm'"
don't forget to style your fake links:
tr.clickable {
cursor: hand;
cursor: pointer;
}

You might also try wrapping the content of your row's cells in an href and using CSS to push the href height/width to the internal bounds of each cell. The row itself wouldn't be clickable (unless you added additional html to the row) but most of the content space of the row would act like a normal link (cursor, status bar, etc). I can't remember off hand exactly how I did this before but I was reasonably successful getting this to work.
Edit: A comment asked for more details and they were covered by a later post from another user but I didn't realize that until I looked further into this suggestion and tested it.
If you add "display: block" CSS style tag to the anchor objects in the cells that you want to be clickable it will make the entire cell (minus any padding) act like a button. The cursor is displayed correctly and it previews the link destination in the status bar. This is all done with zero javascript. Good luck.

I had that same problem, I solved it by using CSS only. I think it was the best solution for me, because I was using it in JSF also.
Just assign the style class to the table and you are good to go....
Here it goes:
CSS:
.myDataTable {
background: 444;
width: 100%;
}
.myDataTable thead tr {
background-image: url('../img/tableHeader.jpg');
}
.myDataTable thead tr th {
height: 28px;
font-size: 14px;
font-family: tahoma, helvetica, arial, sans-serif;
padding-left: 5px;
}
.myDataTable thead tr th img {
padding-right: 5px;
padding-top: 1px;
}
.myDataTable thead tr td {
height: 15px;
font-size: 11px;
font-weight: bold;
font-family: tahoma, helvetica, arial, sans-serif;
padding-left: 5px;
}
.myDataTable tbody {
background: #f2f5f9;
}
.myDataTable tbody tr:nth-child(even) td,tbody tr.even td {
background: #e2ebf4;
font-size: 12px;
padding-left: 5px;
height: 14px;
}
.myDataTable tbody tr:nth-child(odd) td,tbody tr.odd td {
background: #f7faff;
font-size: 12px;
padding-left: 5px;
height: 14px;
}
.myDataTable tbody tr:hover td {
background-color: #e7e7e7;
}
.myDataTable tbody tr td {
height: 14px;
padding-left: 5px;
font-size: 12px;
}
.myDataTable tbody tr td a {
color: black;
text-decoration: none;
font-size: 12px;
display: block;
}
.myDataTable thead tr th a {
color: black;
text-decoration: none;
font-size: 12px;
display: inline;
}
Your table structure should be:
<table class="myDataTable">
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1 </td>
<td>Data 2 </td>
</tr>
</tbody>
</table>

If your targeted browsers all support CSS Table display styles, you can use Javascript to wrap each row in an <a> tag styled to function as a <tbody>.
Here's some JS code using jQuery to make it happen: (jsfiddle)
$(function() {
$('.table-linked').each(function() {
var table, tbody;
table = this;
tbody = $('tbody', this);
tbody.children().each(function() {
var href, row;
row = $(this);
href = row.attr('data-href');
$('<a href="' + href + '" style="display: table-row-group" />').append(row).appendTo(table);
});
tbody.remove();
});
});
This code will transform a table that looks like this:
<table class="table-linked">
<tbody>
<tr data-href="/a"><td>a</td><td>1</td></tr>
<tr data-href="/b"><td>b</td><td>2</td></tr>
</tbody>
</table>
Into this DOM structure in the browser:
<table>
<a href="/a" style="display: table-row-group">
<tr><td>a</td><td>1</td></tr>
</a>
<a href="/b" style="display: table-row-group">
<tr><td>b</td><td>1</td></tr>
</a>
</table>
Browsers don't seem to be capable of parsing this structure as HTML code (and needless to say it won't validate), it needs to be constructed using JS

Marko Dugonjic, in his blog maratz.com, explained how you detect a table row index with Javascript. In his example, when you mouse over any cell in a row, the entire row is highlighted.
See example,
http://webdesign.maratz.com/lab/row_index/
and his article,
http://www.maratz.com/blog/archives/2005/05/18/detect-table-row-index-with-javascript/
With a change, you can adapt this further by placing an onclick action.

If you're already relying on javascript for the click, then you can also use javascript to show the url in status area, change the cursor, or do other things so it looks more like a link. Of course, the browser may ignore the code that sets the status area.