I'm trying to create a user experience that looks like this:
Basically, there is a <span> of non-editable text followed by a textarea/input and some other non-editable <span>s. A simple textarea/input poses no problem when the length of the gap is short, but when it's long, the layout gets pretty awkward. I've looked into contentEditable, but I'm not sure if it's what I need (I've also read several posts suggesting it's evil).
Do I have any other options?
Perhaps the contentEditable property can help you. Have a look here https://www.w3schools.com/JSREF/prop_html_contenteditable.asp
There is a tipical example
https://www.w3schools.com/JSREF/tryit.asp?filename=try_dom_body_contenteditable
You may switch on an editable mode for a span or inline div, for instance.
It is not possible to have an input as you're suggesting.
If you are having an issue with the layout at different sizes, perhaps look into media queries with CSS, which will allow you to alter the layout at different viewport sizes.
It might be easier for you to use a framework like bootstrap to help you layout your web page, although in my opinion frameworks like bootstrap can start to interfere with a custom design, but this will only be a problem when you are a little more experienced.
Related
I'm in the process of making an HTML text parser and I would like to be able to determine when a text node appears as a header (visually, not HTML headers).
One thing that can usually be said about headers are that they are emphasized - usually in one of two ways: Bold font or larger font size.
I could get both corresponding CSS values using getComputedStyle(), but I want to avoid this because the parser needs high performance (has to run smoothly on, for example, Chromebooks) and getComputedStyle() is not particularly fast when looking through hundreds or thousands of nodes.
Figuring out a font size isn't too hard - I can just select the node with range and check its client rects from range.getClientRects().I haven't figured out a smart way to check font weight though, which is why I'm here.
Can anyone think of higher-performance way of doing this than by using getComputedStyle()?
I'm aware this might not be possible - just looking to see if someone can think of an ingenious way to solve this problem.
Edit
This is for a Google Chrome extension only.
What you're aiming to do here is really messy. Since you want to determine if text is bold visually, on some devices, depending on how they render text, the whole system may just break!
A suggestion I have is to use the HTML5 Data atrributes - find out more here - and use it like so:
<div class="header" data-bold="yes">This will appear bold?</div>
Then, using JavaScript you can just go over all div elements with the data-bold attribute.
I hope this helped ;)
I'm wanting to rearrange table columns dynamically.
I can do the actual rearrange but for the dragging of the header cells I'm wanting something that feels like jqueryui's sortable elements with the placeholder http://jqueryui.com/demos/sortable/#placeholder (obviously horizontally rather than vertically though)
The problem is that I don't want to use jquery (javascript is fine but jquery is too heavy), does anyone know of something more lightweight that does the same thing?
Anything that can handle the complexities of drag-and-drop is going to be big. JavaScript libraries usually try to solve simple things, like DOM selectors and AJAX, then other UI functionality, like sliders, animation and drag-drop are added on top of these.
So finding small a library that does the drag-and-drop alone is unlikely. There are alternatives, such as Scriptaculous, but you'll find they aren't smaller.
Keep in mind that jQuery isn't all that big - smaller than many images you'd use on your site. It is also cached by the browser, so it doesn't have to be downloaded with every page load.
Check out http://microjs.com/ Type in what you need and it will help you narrow down a list of libraries.
Take a look at this:
http://www.switchonthecode.com/sites/default/files/99/source/SOTC-DnDLists.js
It's not horizontal but I'm sure it can be worked with...
[update: Indeed, minor modifications made this work like a charm - code will follow]
I have been looking at http://www.nytimes.com/chrome and wondering how I can achieve a similar functionality to theirs. More specifically, notice that when you re-size your browser window, the amount of stories and their dimensions change dynamically.
In my case, I have a fluid-width <div> with an unordered list inside and I would like to dynamically adjust number of elements being displayed (<li>) based on the browser window dimensions.
Is there a Javascript library that can help me achieve this?
I use these three articles as references for this type of thing:
Responsive Web Design
Fluid Images
Fluid Grids
The two main techniques for really fluid websites are:
Different themes depending on the size of the browser (this can be implemented with CSS meda queries, JavaScript, etc.)
Each of those themes are defined with percentages/ems, not pixels. (This goes for everything in the theme: text, boxes, images, everything.)
Ethan Marcotte, the guy who wrote all those articles, has an example site employing these ideas.
It's called responsive design. There also css frameworks that supports this type of design like Less Framework 3 or Flaw{LESS} CSS Framework.
You also might want to check out this plugin: Smart Columns. I have used it and it is excellent for this type of layout.
I was looking at what YUI had, http://developer.yahoo.com/yui/examples/button/btn_example07.html
Can anyone recommend a library/plugin they used to progressively enhance native select element dropdowns at the request of a client? I know it's impossible to style a dropdown in IE, so it's either this or Flash which I don't want to get into.
I'll still leave the regular dropdown in the source for non-JS users and serve the dropdown replica built out of non-form control elements.
Assuming you mean a different library than YUI, I like dojo's dijit.form.FilteringSelect.
Turns out it wasn't all that difficult, pretty much the same logic as a dropdown menu except with a little extra for the toggling bit.
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.