Is it possible to have a HTML Select containing elements, not just text values but say an object (specifically i'd like to add a JQuery slider with the text) but if someone could advice me generally how to do this, i could investigate.
No, definitely not. The default select element is rendered by the browser and can not be extended beyond its standard behaviour.
You would need to look into entirely JavaScript-powered SELECT alternatives.
Here's a small list of jQuery based SELECT alternatives; there are many, many more.
If you want to do this, don't use an HTML select element. Use a div or whatever, and implement the whole thing in javascript. Then you can add whatever functionality you like.
Related
This could be an fun question. I'm planning to make a select box that looks like normal html at first, but when you open it there will be two exciting things:
The box will contain 2 different text-aligns making two neat rows.(see picture)
At the end of each line of the list item contained in the box, there will be a like/dislike button system.(see picture)
Some of you already know where this is going, I'll need to make the thing like you'd make any such menu in GUI programming. I assume some object oriented Javascript programming?
(I'm looking for technical details as I'm novice at Javascript and jQuery(but not at programming), I'm basically interested in info about transferring such a pseudocode construct into Javascript/jQuery or another more usable framework if really need be. I'm also perfectly aware that I'm normally not going to be using any actual html in this GUI.)
So my question is, how should I set out to do this according to you?
You will not be able to modify a normal select element to achieve this, you will have to
Create a proxy-pro-select-element and hide the original one.
Copy option elements and create equivalent one in your proxy
You will have to also keep both selects in sync.
Once you have that you can do anything in your proxy-pro-select-element, simplest would be to on click show a table with select able rows, with table it would be very easy to align all columns.
Technical details:
Read how to implement a jQuery plugin
In your plugin's init loop through options in target select and create corresponding rows in a div say dropdown, hide original select and replace it with your control which will be a select-div
onclick on select-div, show dropdown div after re-positioning correctly
See code like this and modify
You should be able to accomplish something similar to this with jQuery and jQuery UI comboboxing, http://jqueryui.com/demos/autocomplete/#combobox
And then modify _renderItem to change the layout of results in the dropdown. You can search for the following in the view source:
input.data( "autocomplete" )._renderItem
However, I would try to avoid having like/dislike buttons in a combo box because it goes against normal web conventions.
It is apparently not possible to give inividual <option> tags different font-family values. I would like to achieve this effect somehow. I've tried the jQuery selectbox plugin, but this doesn't seem to allow me to style the individual options. Can anyone suggest a solution?
Thanks
It's not 100% perfect, but this fiddle will get you 90% of the way there:
http://jsfiddle.net/Y39HQ/
Select a different item from the drop down and then switch back, you'll see the font change for the selected item.
Basically no, you can't do this with the default <select>, but the JavaScript, combined with a plugin such as selectBox is not that difficult.
Additionally, styling the individual items in the list you can manage with the css pseudo-selector nth-child(). This will allow you to style each item in the list. Naturally, if you're manually constructing the items in the drop down, it'd be a lot cleaner to just set the font at the point of creation for the list item....
Good luck!
this plugin changes the selectbox into a ul li tree, so you can set the font-family on the li's
http://www.devirtuoso.com/2009/08/styling-drop-down-boxes-with-jquery/
A complete DIY solution perhaps? When the element is clicked show a tag with some custom styled <li> items.
The standard HTML <select><option>...</option></select> does not allow you to change the font between options. It simply isn't possible.
The jQuery Selectbox plugin which you're using starts off with a standard HTML <select> and reskins it.
In theory, because of the reskinning, it would therefore be possible to change the font, but it appears that this plugin limits itself in this area to the standard functionality (perhaps to make it a smoother experience for users that fall-back to the standard HTML); it doesn't appear to support changing fonts.
You might want to consider an alternative plug-in. There are a large number of jQuery plugins to choose from that deal with select box functionality, so you should be able to find one that suits your needs. This one seems to support modifying the font, for example, but there are plenty of others out there too.
Hope that helps.
I have some jQuery code that finds elements with the shaded CSS class and adds a div element after it. It is run in the document ready event handler.
$(".shaded").after("<div class='shader'></div>");
The shader class provides styling to make the above element look raised.
My problem is that we started using Ajax to populate content, so now I need to run the code above each time new content is retrieved using Ajax.
What I want to know is how I can detect if this dynamically added "shader" div has previously been added. I know I can find those next elements using this:
$(".shaded").next("div").hasClass("shader")
But how do I elegantly add the "shader" only to the elements that have not been shaded yet?
Thanks in advance.
$(".shaded + :not(.shader)").prev().after("<div class='shader'></div>");
works and tested
First of all, you should really solve this with CSS. But I can imagine situations where that is hard to do (*cough*IE6*cough*).
You could do it the nasty jQuery way and derive which elements already have a shader, like Mrchief's solution.
Or you take the responsible solution and keep a list of elements that have been shaded, and even better, a list of elements that still need to be shaded.
jQuery encourages you to 'abuse' your DOM for storing information about your model, while you really should just make a model and use jQuery based on the information in the model. This is exactly the reason why I'm no longer using jQuery for anything that doesn't involve very complex tasks (I still use it for animations and fancy plugins like lightboxes).
You can try something like this (untested though):
$(".shaded + :not('div.shader')").prev().after("<div class='shader'></div>");
It finds all divs with class shaded and filters out the ones that do not have a div with class .shader after them.
Thanks to #Joseph for pointing out the .prev()
I'm looking for a way to apply some formatting to a single-line text input field in JavaScript. It would work like this:
The user types in a formula, such as:
(7 + 3) ^ x
As the user types, my code would format it using colour to look like this:
I can do the necessary parsing but I don't know how to apply these styles to the user's text as they edit.
I've been struggling to find the right thing to Google for. My searches mostly lead me to full-blown text editors.
Is there such a component? If not, can I achieve this with a <input type="text"...> field?
Out of curiosity I built this: http://jsfiddle.net/hunter/npbDL/
This catches key strokes and inserts a span-wrapped character into an element. If the character maps to an item in the character-to-class collection it also gives that span the class specified.
It also handles enter and backspace.
You can probably take it from there...
I think the only way you can achieve the styling you want is by wrapping HTML tags around individual characters then styling the tags, and I don’t think you can do that inside an <input type="text">.
There is the widely-supported contenteditable attribute which makes most elements editable, but I’m not sure that it allows this either. If no-one else provides a better answer, you might want to view source on the last example here: http://www.hyperwrite.com/Articles/contenteditable.aspx
You can't format a text field with various colors. You might be able to use colors in WYSIWYG editors... or Flash.
I don't think you can change of individual characters in any <input> nor <textarea>. Look into source code of Etherpad for example - it uses similar system (not exactly the same - it highlights other stuff) and it might help you.
I have a form which presents the user a list of checkboxes, some of which have the text label struckthrough some don't depending on initial conditions. This is functioning fine. During the form validation however, I would like to be able to detect which are struckthrough. I can figure out how to check if they're enabled, but whether the label is struckthrough is eluding me. Any ideas?
You'll have to use the DOM methods (or jQuery) to look at the parent element of the text to see if its a <del> tag.
Can you provide some sample source so I might be able to elaborate with an example.
Doing this with jQuery just makes so much more sense then trying to mess around with plain Javascript. Here is what you need, basically:
striked = $("strike"); // As mentioned, you should use `del` .. strike is depreciated
$.each(striked, function(i, el) {
alert($(el).html() + " is striked through. What do you want to do with it?");
});
Not sure what you want, but that would detect all elements with strike/del on your page. You can also change the search a bit, to restrict it to only within a certain form/div/whatever like so:
striked = $("strike", $("#myform_id"));
Hope that's what you were looking for.
If the strikeout (your struckthrough) is assigned via a CSS class, you can simple detect the class (since you can already detect enabled/disabled). Else like Darrell mentioned, jQuery will be a great method.
You basically have two categories of checkboxes which you are defining by their display qualities (struckthrough and not). This kind of "what does it look like" detection creates an artificial code-dependency which could cause a lot of trouble later:
The strikethrough effect can be accomplished in several ways (the del tag, the strike tag, CSS text-decoration: line-through, and possibly others in future versions of HTML/CSS). If you later change which way you do the effect, you'll have to update your js code to match
If you ever choose to reformat the list and stop using the strikethrough effect (e.g. you decide to make it invisible, or faded out, or have a red x over it), you will lose your ability to distinguish between the two types of checkboxes.
Instead, you should either assign a CSS class (like "nonUsableCheckboxes") to all strikethrough checkboxes, or generate a hidden field indicating if it is strikethrough or not. That way your javascript stays independent of your display code, and less prone to fail.