My company had a website we're working on redone by a designer. It looks much better, but I've hit a snag implementing their design in HTML+CSS. They have a heavily styled <select> box, so much so that I couldn't recreate it with pure CSS. I found a solution that uses Javascript to replace the <select> box with a <ul>. This works almost perfectly, but there are two problems with it:
It doesn't scroll when there are many elements.
It doesn't close when you click outside of the dropdown.
I've played around with it in Firebug, but becuase the <li>s are styled with display:block, they don't seem to be contained by the surrounding <ul>, which means I can't set a maximum height.
Issue #2 is not as important, but it would be nice to know how to fix that as well.
Here's a link to the problem page: http://www.truwindshield.com/test2/
Since you're using jQuery and the solution isn't, you could consider replacing it with a relevant jQuery plugin. This one seems to be working and degrading nicely: jQuery SelectBox
This implementation also solves the two issues you're having and might save you some working trying to hack the other solution into doing what you want it to.
Related
I was practicing some jQuery when I found this tutorial. It does the exact same thing as I was trying with JavaScript but uses pure CSS3. I figure it is best to learn what's right then to have to relearn, so that is why I am asking if there is a benefit of one to another or is it just preference?
The CSS solution may be easier and will probably be more efficient, but it produces a much more basic solution.
For example, with the pure CSS solution, as soon as you move the mouse outside of an item, it loses focus and closes. This can be annoying for users if the menu has many levels or the items are small enough that the mouse may accidentally stray outside.
Using javascript, it is possible to keep menu items open even if the mouse moves outside. It also allows for more customization of options like animations and delays. There are plenty of jQuery plugins that make dropdown menus easy.
Always use CSS when given the opportunity except in cases where you need to use logic/arithmetic.
A similar question was asked here: Responsive design method for collapsing a div
I want to write a sortable list using jQuery.
My thought is as follows: As the li element moves with mouse, a placeholder will be placed dymatically where the li element will be placed when mouseup event happens.
But I don't get one thing: How to make the other li elements move up and down appropriately as the placeholder moves. I don't think I should use CSS 'top' property to move these elements as this method actually doesn't change the index of each element in the list automatically. Could someone give me some idea on this? Thanks.
Actually jQuery UI allows you to choose which parts of it you want in your script. So you can choose only sortable (it will have three other dependencies, but nothing particulary large). Just go to jQuery UI homepage and click build custom download. You can get a very lightweight script this way (which you can further strip down if you choose readable code in your download).
It helps your code cross-browser compatibility and jQuery UI code is actually readable and easy to strip down of any unnecessary functionality (you can probably remove for example scrollSensitivity setter).
I'm a beginner WWW-developer and I'm wondering whether the dropdown menus should be written in CSS or JavaScript. What are the pros and cons between two techniques?
You'll need to use CSS for the styling. That is what it is for.
When it comes to the logic of when to show and hide them, then you need JavaScript unless you want:
The menus to be inaccessible to focused based navigation
Keyboard
Breath switch
etc
The menus to require precision mouse control
e.g. if you have a shaky hand (e.g. from arthritis) and you slip outside the edge of the menu, then a :hover based solution will cause it to vanish without giving time to get back inside
Personally, I'd avoid drop down menus for most situations.
I would like to recommend using just CSS as much as you can. As these will eliminate issues such as if someone got JS disabled and any other possible accessibility issues. Since menus are an integral part of you site navigation, it is important these are accessible to all the user segments. You can use this for pure CSS but also there are lots of tutorials online if you google "pure css menus". Also you can see here for jQuery & CSS menu example
They can be written using solely CSS. Check out this Pure CSS hover list.
JavaScript is often disabled by users, as a security measure, and the necessary code for drop-down menus can be quite involved. Also, a pure JavaScript menu is not available for browsers that don't support it, such as text-only browsers. CSS-based menus are always available, even with JavaScript disabled — browsers that don't handle it will just render a list.
With this technique, adding a menu to a page is as easy as creating an unordered list of links, with nested lists for the sub-menus, and including the appropriate style-sheet.
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.
I've been googling and trying this for a good while now, but comes nowhere. So here goes:
What I want to do is to drop text on a DIV tag and handle that with JavaScript. Something along these lines:
<script type="text/javascript">
function handleDrop(sender, args)
{
$('#theDiv').html(args.textfromdrop);
}
</script>
<div id="theDiv" ondrop="handleDrop()" />
<br/>
<p>
This is some simple text. Draggable?
</p>
So, on this page I want to be able to drag contents from the paragraph for example to the div and it would handle the drop and change it's appearance accordingly (Or maybe just display that text, as long as it would handle it!). I've been trying with jQuery, but it seems to be a whole other model, and I can't set all my potential draggables as such because they should be able to come from everywhere. Is this even possible?
EDIT: Please correct me if I'm wrong, but these droppables all require a draggable to be dropped at it, right? What I would want is that you can drop text, pure text, from a page that you don't have any control of. This might sound weird, but it's for a firefox extension where you can drag content from a page to another page that resides in the side bar.
I would recommend using an established Javascript Library such as jQuery or YUI.
Have you considered creating a hidden textarea (ie with css style visibility:hidden) overlapping the div in question? Then check for drops with the onchange JavaScript event, or if that doesn't work, periodically the textarea's value for non-empty strings. I'm guessing your mileage will vary depending on the browser and operating system.
Or if you prefer Prototype like I do: http://wiki.github.com/madrobby/scriptaculous/droppables
EDIT: Based on your revised question: No, there's no way to allow a user to drop text from one page to another page. Not unless you do decide to build a FireFox extension like you were saying. Even if you could find a way around the security issue where you cannot script a page that's not under the same domain, you can only drag and drop DOM elements within the window/iFrame they're in.
I have done this before and it CAN be done without any library with some effort.
I've built the following methods:
Method that tracks your mouse movements.
Method to read and pass the content when you drop.
Used onmousemove and onclick events for the drag and drop methods.
OnMouseOver for the div area where you'd like to drop the text - to detect whether the pointer is over the container (div) or not.
Finally after dropping the text I deleted the original content (if needed) using innerHTML so it looks like it has been moved.
You can pretty much achieve a Windows like drag and drop functionality with this. I used it for drag and drop images, icons, etc.
If you need help with the coding I can give you some guidance, but most of it you will find if you Google around a little, then all you need to do is make them work together.