It's a recurring question since, like, forever: how to keep the headers fixed on top when scrolling down a table?
Yes, I know that the web isn't designed to show long spreadsheet-like tables, but when a client asks for something like that (because s/he used to those old Excel documents...), you have no choice but comply.
This is to sum up the major problems and attempted solutions with fixing the headers of a table:
a <thead> element can be relatively postioned, but it won't move from its position;
with position: absolute or fixed, the head is "detached" from the rest of the table, and the column widths doesn't match anymore; moreover, you have to reserve some space above the table body;
this can be solved using a different table for just the headers, leaving the body in the other, but won't fix the problem of the different widths of the columns;
you can set the columns with fixed widths, but it's not always applicable depending on your needs - i.e. in case of dynamic or unknown content;
Javascript can adjust the widths of the columns, but accessing to properties like offsetWidth causes a reflow, which is a quite heavy task even for a browser like Chrome or Firefox, and adds an annoying rendering lag with even not-so-large tables but with dynamic content;
you can create a copy of the table, using the first to show the headers and the other to show the body, but this makes the DOM twice as heavy and should rely on Javascript to copy the changes of the content;
using <div>s with display: table-whatever won't actually solve a thing, and deprives you of the chance to add rowspans and colspans.
With the latest technologies of the web, maybe we can try something new. I've experimented a solution using transform: translate which behaves acceptably good (see the fiddle here), and keeps the space above the table body, and the columns width still match.
This of course won't work in IE8 and lower. But it works fine in Chrome, Safari and Firefox. It doesn't work in Opera 12.x and below, but it does work in Opera 15 thanks of its brand new Blink render engine. I've noticed this works better or at least as well with translate than with translate3d: it shows a bit less flickering.
Unfortunately, this doesn't work in IE9 and IE10, and the headers are kept in their positions. It's really a shame since there's no way to detect this behaviour (that I know of).
So, what are your most recent solutions for this problem? I'm looking for CSS and pure Javascript solutions.
I recently had to do this exact thing for a client and found it be next to impossible. I did find a really good library called SlickGrid, however when it came to translating that to mobile, it just wouldn't work (performance was too big of an issue). If mobile is not a concern of yours then I definitely suggest checking it out. https://github.com/mleibman/SlickGrid
I always come to stackoverflow to check for answers; however, for the current question I have not found any relevant information yet.
I have a Mobile Windows 6.1 PDA and I want to create a simple HTML page for it. I want specific divs of the page to have a specific height, based on the text that are inside these divs.
Maximum I want 2 rows of text.
The text can contain HTML code. I want to slice the text but do not hurt the HTML code.
Before you think "there are 100 different solutions with CSS or Javascript for this" I would like to mention that 6.1 uses a mixture of IE4 with some features of IE5. The browser supports only CCS1 (so no max-height, no overflow:hidden, no position: absolute, no top, bottom etc).
Also the browser supports a very limited range of Javascript functions. I thought to parse the DOM of Javascript and constantly check if the text inside the div is bigger than 28pt (this is two rows) and cut it. However, most of the DOM functions do not work. createElement() does not work, appendChild either. Only getElementById and innerHTML work.
I found this solution https://code.google.com/p/cut-html-string/ for Javascript, which works perfectly with modern browsers, however, since it contains functions such createElement(), appendChild(), cloneNode() etc. it does not work with IE4. Work-around to the createElement() is the innerHTMl which works perfectly but then the browser reports errors for the DOM functions that the code uses.
P.S: Please do not answer "change PDA etc.". I know that the OS is very old but I have to use it.
Ok so if your only dealing with 1 style of device could you use a javascript viewport sniff maybe and use the inner html adjustments to adjust to a new style sheet so that you can have it work for said device, if you have to program for multiple devices you can create multiple style sheets. I would advise for testing purposes to see if anyone has an android or iOs device with similar screen sizes so you can use something like edge inspect from adobe creative cloud that you can adjust and see the changes.
Someone has a thing on viewport find here
Find the exact height and width of the viewport in a cross-browser way (no Prototype/jQuery)
that may be of use.
Since your dealing with basic javascript you should just be able to change the address of a css link and that may be a solution. If i mistook any of the functionality of the device im sorry however it has been a while since I had a windows mobile 6.x phone.
I'm wanting to provide a resizing textarea control for users. I've given this a go and looked at a number of other implementations, but I can't seem to find one that meets all my requirements. Specifically I want a control that:
Works in IE6, IE7, IE8 on Windows and Firefox 3 and 3.5 on Windows and OS X when the page is rendered in standards compliant mode (i.e. not in quirks mode).
Does not mess up the undo buffer/undo stack. This is a particularly nasty issue with IE - adding nodes, removing nodes and some other DOM operations will reset the input buffer meaning that if an implementation relies on these techniques an undo will not behave like it does in a standard textarea control. I haven't been able to find much information about this bug except for this note. Implementations like the jQuery Auto Growing Plugin suffer from this problem - try undoing changes in IE and compare how this works to a standard textarea. I've added an example page demonstrating this problem to JSBin.
Has a maximum height beyond which the control cannot grow.
Shrinks appropriately when content is deleted.
Does not flicker or act strangely on keypress. e.g. jQuery Auto Growing Textarea control behaves strangely with, at least IE7, when the control has grown beyond it's initial size.
Does not require the control to use a fixed-width/monospace font.
The closest I've seen to something that works like this is Facebook's status update field, which is implemented as a content editable div element, but I have some reservations about using such an element because using a div means:
Need to explicitly style the border which means we could end up with a border that looks different to a native textarea.
Need to sync content with the real textarea (possibly in both directions?).
Adds complexity when placing hints and other elements relative to position of a textarea.
While this approach works for something like a Facebook status update, how well would it work in a form containing hundreds of standard input elements?
What I've set out above represents the "ultimate resizing textarea" - addressing what I perceive to be issues with existing approaches. Does such a control exist? Is it possible to write such a control?
Check out DOJO tools text area control
see more on this demo page (text area At the end of the form )
This closely come to your requirements.
You may need to roll your own to meet those requirements.
These could be a start.
http://tuckey.org/textareasizer/ (though try and avoid eval() in yours)
http://www.felgall.com/jstip45.htm
http://viralpatel.net/blogs/2009/06/textarea-resize-javascript-jquery-plugin-resize-textarea-html.html
This actually seems like a good jQuery plugin. I might have a tackle at developing something like this. If I get it done, I'll post it here.
I spent a few hours developing something, but then I found this one that seems to be really good.
http://www.aclevercookie.com/demos/autogrow_textarea.html
You want to auto-size the display? but leave the content the same?
That is all the scripts can do, adjust the display, and let you see more of your own text...
This A List Apart post contains an implementation that looks pretty close to meeting your criteria and contains a good explanation of what's going on.
Are any of these useful?
Textarea Resize JavaScript: Resize textarea using jQuery plugin
Smart Area: A Lightweight Resizing Text Area Plugin for jQuery
How to Build an Auto-Expanding Textarea jQuery Plugin, Part 1
How to Build an Auto-Expanding Textarea jQuery Plugin, Part 2
How to Build an Auto-Expanding Textarea jQuery Plugin, Part 3
Resizable Body
I have been using nicEdit. It seems to have all that you need and the script is only 1700 lines with an MIT license so you could make any changes you need.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
While developing for multiple sets of browsers, what issues have you faced while development due to differences in browser implementation?
To start with I am listing some of those which i faced:
A text node in Firefox allows only 4K data. So an XML Ajax response gets split up into multiple text child nodes instead of only one node. Its fine in Internet Explorer. For Firefox, to get the full data you either need to use node.normalize before you call node.firstChild or use node.textContent, both of which are Mozilla specific methods
Internet Explorer does not replace or HTML char code 160, you need to replace its Unicode equivalent \u00a0
In Firefox a dynamically created input field inside a form (created using document.createElement) does not pass its value on form submit.
document.getElementById in Internet Explorer will return an element even if the element name matches. Mozilla only returns element if id matches.
In Internet Explorer if a select box has a value not represented by any of the options, it will display blank, Firefox displays the first option.
The only one that really gets to me:
IE6 is still used by ~18% of the web -- that's nearly 1 in 5 -- and addressing its issues is time consuming, hackish, and frustrating. ;) The issues are really too numerous to list here.
If you're interested in the issues themselves, QuirksMode.org is an amazing resource I used every day before making the leap to client-side libraries. Also check out John Resig's The DOM is a Mess presentation at yahoo, which gives a lot of theory about how to deal with cross-browser topics efficiently.
However, if you're interested in simply having them solved, your question is an excellent example of why many consider using client-side libraries like jQuery, YahooUI, MooTools, Dojo, etc. With a thriving community, talented people and corporate backing projects like those allow you to focus on your app rather than these issues.
Here are some jQuery examples that avoid much of the cross-browser frustration and can really make all of this.. fun.
Cross-browser mouse click binding
$('#select anything + you[want=using] ~ css:selectors').click(
function(){
alert('hi');
}
);
Cross-browser HTML Injection
$('#anElementWithThisId').html('<span>anything you want</span>');
Cross-browser Ajax (all request objects are still made available to you)
$('p.message').load('/folder/file.html');
And what really blows me away, load a data subset with selectors (see manual for details)
$('p.message').load('/folder/file.html body p:first-child');
Now, how all this really starts to get fun: chaining methods together
$('ul.menu a').click( // bind click event to all matched objects
function(evt){ // stnd event object is the first parameter
evt.preventDefault(); // method is cross-browser thx to jquery
$(this) // this = the clicked 'a' tag, like raw js
.addClass('selected') // add a 'selected' css class to it
.closest('ul.menu') // climb the dom tree back up to the ul
.find('a.selected') // find any existing selected dom children
.not(this) // filter out this element from matches
.removeClass('selected'); // remove 'selected' css class
}
)
Reminds me of Joel's Can Your Programming Language Do This? article.
Taking all this to a theoretical level, true advancement doesn't come from what you can do with conscious thought and effort, but rather what you can do automatically (without thought or effort). Joel has a segment on this in Smart And Gets Things Done regarding interviewing questions and smart developers, completely changed my approach to programming.
Similar to a pianist who can just 'play' the music because she knows all the keys, your advancement comes not from doing more things that require thought but rather more things that require no thought. The goal then becomes making all the basics easy.. natural.. subconscious.. so we can all geek out on our higher level goals.
Client side libraries, in a way, help us do just that. ;)
Most of the problems I have are with IE, specifically IE6. Problems I personally deal with that have left a memorable impression (in no particular order):
Having to use frameworks to do basic things because each browser implements the DOM a little differently. This is especially heinous with IE and AJAX, which necessitates multiple if-blocks just to get the call started. In an ideal world I'd be able to work in JavaScript without the framework to do basic things.
onChange on selects in IE are implemented wrong, and fire before the select loses focus (which is incorrect). This means you can never use onChange with selects due to IE, since keyboard-only users will be crippled by this implementation issue.
You mentioned it in your post, but it's a huge pain when IE grabs an element by name when using getElementById().
When in an RTL locale (Arabic, Hebrew, etc.), Firefox implements "text-align: right;" incorrectly. If the container overflows for some reason, the text aligns to the right side of the viewable container, rather than the right side of the container itself (even if it makes part of it invisible).
Different browsers have differing levels of pickiness with regards to how you end arrays and objects. For example, Firefox is more than okay with an array looking like this: [ item0, item1, ]". However, this same code will make Opera barf because it hates the trailing comma. IE will make the array a three-item array, with the third item undefined! This is bad code for sure, but there's been dynamically generated javascript I've worked on that was a huge pain to rewrite - would've been nice if this just worked.
Everything having to do with IE's hasLayout. So much awful pain has revolved around this attribute, especially when I didn't know it existed. So many problems fixed by using hacks to add hasLayout. So many more problems created as a result of the hacks.
Floats in IE rarely work the way you hope they do. They also tend to be annoying in other browsers, but they at least conform to a particular behavior. ;)
IE adding extra white space between list items has caused me no end of pain, since YUI uses lists to make their menus. (To fully grasp the issue, you have to view that link in IE and another browser side by side.)
I have lots of issues getting text not to wrap in containers in IE. Other browsers listen to "white-space: nowrap" a lot better. This has been a problem with a UI I worked on that has a resizable sidebar; in IE, the sidebar items will start to wrap if you resize it too much.
The lack of many CSS selector types in IE6 means you have to class-up your DOM more than necessary. For example, the lack of +, :hover, :first-child.
Different browsers treat empty text nodes differently. Specifically, when traversing the DOM with Opera, I have to worry about empty text nodes when browsing a node's children. This isn't a problem if you're looking for a particular item, but it is if you're writing code that expects a particular input and the way the browser views that input differs.
In IE6, when you dynamically generate an iframe via javascript, the iframe sometimes doesn't fill its container automatically (even with width and height set to max). I still don't know how to solve this issue, and have been thinking of posting a question about it.
In IE, you can't set overflow CSS on the <tbody> element. This means that scrollable tables (with a concrete <thead> and <tfoot>) are impossible to make in a simple manner.
I will probably add more to this list later, since (to me) the worst part of web development are cross-browser issues. Also, I doubt I'll ever edit out the "I will probably add more to this list later", since these problems are endless. :)
IE6? Meh. You guys have got it easy! You've never had to make CSS layout work in Netscape 4 (without crashing the entire browser)? You've never had to write for appliance browsers that don't support tables? You've never had to write for IE Mobile?
there is no support for JavaScript-assigned event handlers; you can only write an event handler through setting “onclick="somestring"” in innerHTML;
most basic DOM Level 1 properties (eg. nodeName, nodeType, nodeValue, firstChild, lastChild, nextSibling, previousSibling, data, value, HTMLElement.getElementsByTagName, all HTMLTableElement members, most CSSStyleDeclaration members) simply do not exist;
most CSS layout properties do not work; many simply CSS properties like ‘width’ don't work on some elements such as form fields;
setting many other CSS properties on elements like tables and form fields causes an instant browser hang, which, since Windows Mobile has no built-in task manager, means you have to soft-reset the device;
oh, and putting anything but text inside a <button> is insta-crash too;
huge chunks of basic JavaScript methods and “DOM Level 0” methods going back as far as Netscape 2 (!) are missing.
And this is the most up-to-date release of Microsoft's flagship Windows Mobile browser in 2009.
Sure, it supports XMLHttpRequest, but writing AJAX code on a browser whose CSS and script support is less than IE3 (!) is bizarrely schizophrenic, like you're working with a weird amalgam of 21st-century and 19th-century technologies.
I wouldn't recommend it.
Been doing this too long to have many problems, but it still drives me nuts that I have to hack around IE's non-support for CSS things like display:table, :last-child, and :hover outside of anchors.
All the IE stuff is still insane, but it's just background insanity now :)
Biggest Cross-Browser Issue? - Internet Explorer!
<start_grumpy>
IE is solely responsible for "holding back the web" - us developers can't create amazing sites using HTML5, or SVG, or XFORMS, or CANVAS... not because of Firefox,Safari or Chrome, but because 2/3s of the Internet is still stuck on IE. Not to mention that ~20% of the web is still stuck on IE6! IE8 is the first version of IE to at least try to be standards compatible (2001's standards that is), which means it will be at least 2018 before we can finally start dropping all support for IE7.
</start_grumpy>
Otherwise name a DOM method that IE fully supports... the fact that this is a hard question to answer is my biggest CrossBrowser issue.
getElementById() - badly broken
getElementsByName() - buggy
getElementsByTagName() - buggy
getAttribute() - buggy
setAttribute() - majorly broken
createElement() - buggy
appendChild() - buggy
even things IE invented are messed up...
innerHTML (getting) - returns the worst markup possible
innerHTML (setting) - doesn't work on the elements you'd want to dump a bunch of data into (e.g. Tables and Selects)
While developing a system tests framework for a web app we had to simulate various events such as clicks. I remember that we couldn't find any normal way to do it in IE and FF and had to implement it in two different ways with a lot of voodoo around.
I don't remember the specifics, but I remember that it was really annoying.
This, basically.
Modern javascript frameworks (jQuery, prototype, etc) have done wonders for getting code working in lots of browsers at once.
The biggest problem I have now is the fact that any sort of rich UI behaviour runs amazingly slowly. IE7 is bad. IE6 is worse. IE8 is buggy, half finished, and really no better than IE7.
The worst thing is that I don't think we'll ever be free of IE6. It was so ubiquitous, and so damn quirky. Loads of 'enterprise' (and by that I mean big web apps made by one big company for another big company) applications used highly specific IE6 javascript that doesn't even work in IE7, never mind anything else.
Companies can't afford to completely replace these apps - we're trying to sell them new ones and that means IE6 support is mandatory. The way it is right now, with credit-crunched companies cutting costs, I reckon we'll still be supporting IE6 in 2015 :-(
In internet explorer (note: older versions of IE, not necessarily versions 9/10+), if you create form elements using document.createElement, the field won't be submitted with the form. The only workaround is to use
element.innerHTML = "<input type='text' value="+val+" name="+name+">";
In IE, you can not hide select option elements, only the select element itself. This makes it difficult to dynamically change the contents of select options using Javascript.
This problem also exists in Safari and Chrome.
There are many other issues with IE, but this one has caused me the most frustration recently.
IE's restrictions on using DOM manipulations on tables forced me to take a completely different approach to something. Very frustrating at the start, but the positive out of it was that the second approach was ultimately better, so I suppose I should be grateful to IE. ;)
For Firefox, to get the full data you either need to use node.normalize before you call node.firstChild or use node.textContent, both of which are Mozilla specific methods
Actually all of those are W3C DOM methods supported by the vast majority of browsers. I think you'll find they also work in IE.
My biggest cross-browser issue is that there are people out there still using IE.
Second biggest is that even in standards-following browsers, doing some things in CSS is still impossible; for instance tbody {overflow:auto} does nothing useful in anything but Gecko, and even there it has bugs.
Firefox and IE ahve different table setups in the DOM, in one, all siblings of a cell are the other cells, whilst the other has elements between the cells. I can't remember which way around it is, but it gave me a real headache in one application.
My biggest problem are browser makers. Arrogant little *^&%s. I mean, you can't sell a browser to anybody, yet everyone is in their little corner trying to out do each other, only creating division. Oh and Chrome. Chrome still doesn't know what it wants to be, Safari or Firefox. Aside from its one parlor trick, its practically useless. I blame all you guys who kept googling just because you hate monopolies. Guess what, they're the monopoly now. Now we can all enjoy second rate, prematurely launched software.
This mostly stems from a bug* I had in Chrome today, it never dawned on me to query the browser. Both Safari and Chrome were failing so I figured hey, once I fixed the Safari problem Chrome would be fixed automatically, but oh no no. Mr."I run tabs in seperate processes" AKA "Sr. No full screen" just had to hold me in the lizard lock with its mind boggling implementation.
I also detest Firefox. I can't tell whether I have a virus infestation or Firebug running. Now until Adobe decides to release a browser that makes Flash practical for things other than movie clips I'm pretty much going to have something to bitch about for a long time. And we all know that's what life is all about.
Also, I only enjoy programming when I encounter ridiculous bugs that make my brain juices run.
Inconsistencies in the CSS box model when dealing with forms. In particular it's irritating how each browser handles the <select> Box
my only nightmare is IE6 you should always look for hacks but everytime you face a problem with it there is someone who ran into it before you and blogged about it (and we will never get away from it )
I was working on CSS layout written by someone who thought that the size given to an element is size+padding+border like in IE5 and not only the content box as explained in official specification. It was written only a few month ago so he did dirty hacks to make it look well in IE7. It took me several hours with FireBug to track down the source of the problem and by the time I realized it I was really annoyed.
If you open site with "floating" CSS written for IE5 in Firefox the boxes just do not have enough space to fit and fall down the page. If you open it in IE7 it looks nice as IE7 lets the borders overlap so it looks almost correct. For someone as inexperienced as me it was hard to note.
To remove iframe borders in Internet Explorer you have to specify the frameborder attribute as camelCase format, which is non xhtml compliant.
<iframe frameBorder="0"/>
An easy way to help with the pesky IE display issues is to use firebug, Yep enen in IE 6/7/8 Just use Firebug Lite
If you add the following as a bookmark and stick it on your tool bar it will enable firebug lite off any webpage with a single click. (only check this in IE and it works fine.)
javascript:var%20firebug=document.createElement('script');firebug.setAttribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js');document.body.appendChild(firebug);(function(){if(window.firebug.version){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);