I've been searching for a good way in which to style up a selectbox, and have found a couple of good jQuery plugins that do the trick... However, they replace the selectbox with an input and a list and then give it a specific class which is used to add your custom styling...
This is fine and dandy, but I need to be able to use multiple sizes. The script is adding the same class to all of the replaced elements, so there's no way that I can find to style them with different widths.
Here's the script I'm talking about: http://www.brainfault.com/2008/02/10/new-release-of-jquery-selectbox-replacement
I just need to be able to have two distinct sizes/widths of the custom selectboxes. One for numbers such as 1-1000, and another for longer textual names such as "Transylvania County Home Buyers Association".
Obviously, one size would look ridiculous if I used the larger size to hold a list of numbers that only goes to 1000, and visa versa.
Any ideas how to make it work?
That plugin lets you supply classes via its setup options; can't you just give it whatever classes you need to distinguish big ones from little ones?
Here's the page: http://www.brainfault.com/jquery-plugins/jquery-selectbox-replacement/
Related
I'm looking to put together a dynamic Web form where, when the customer selects options from a series of radio buttons, additional items will be added to the main image.
Think of it as if you had a Photoshop layer and all the other layers above could be hidden or revealed dependent on the customer's input on the form.
So, two questions...
I assume I should be using JavaScript for this form. Being a beginner with JavaScript, is there a way for me to tell it to change the image based on multiple inputs selected by the customer? The base image would be the same but I would be looking to hide/reveal multiple "overlays" on top of the base image.
Is this something that React can handle or should I be looking at something like Angular?
Thanks for your assistance with this question!
I can answer for number one by providing a live example: http://codepen.io/zvona/pen/mVQWvX
It consists of three components, FormControls, Blocks and App. Names are quite self-explanatory and so should be code itself. There may be some minor mistakes in code since it's quite quickly written on the fly, but it should give you insight on how this can be achieved with React.
I was working on a website, and I thought of how funny it would be if I completely randomized the CSS rules on the page as a joke. (Not just the elements' styles, but the CSS rules themselves, because the website has a lot of dynamically created elements.) Each time you loaded the page the result would be completely different, and most of them would look terrible. So my question has two parts:
Using JavaScript/JQuery, How do you programmatically get a list of all CSS rules? As a sort of dictionary, with the rules paired to the selectors.
Then, after you have broken down the list and randomly assigned each rule to a different selector, how do you delete the previous rules and substitute in your own?
NOTE: I mean, using JavaScript/JQuery, how do you randomize the rules on the client side, not just a single CSS file.
You can access and traverse all the stylesheets with document.styleSheets. See the API documentation on MDN
Mind you this is a bit psuedo-ey, also note that you can do this using pure JS.
foreach (var e in document.getElementsByTagName("*")) {
foreach (var p in el.style) {
var r = Math.random(0, 255);
e.style[p] = r;
}
}
also note that not all css properties take 0 - 255 so you might have to create your own algorithm, but this'll sure get you started.
Looping through all the elements in the page would be trivial (document.getElementsByTagName('*')).
Looping through all the styles available for each element would be trivial (element.style).
Setting random values for any given style would be harder.
You would need to have hard-coded lists of styles and possible values for each of them, because the values that can be set vary so wildly. Some can be in a variety of different units (px, em, %). Some of them have pre-defined keywords as the possible values.
And a random value is no good at all if you don't have limits to it. Setting a random width sounds easy, but you have to know what ranges you're going to work to. width:5743731px isn't going to be very useful even for a randomised page.
And then you have the properties that can fetch external resources. A CSS background image is going to be virtually impossible to randomise, and fonts would need to be loaded in a separate #font-face declaration, so you would only be able to randomise fonts that you know are loaded.
And then you have to think about how randomised you're going to be. Are you going to randomise every possible style on every element? (crazy, but hey, this whole thing is crazy so why not) Or just one style per element?
Don't forget that a lot of styles work in conjunction with each other. So text-overflow:ellipsis does nothing unless you also have white-space:nowrap and overflow:hidden. And setting a border-color is pointless unless you've also set the other border attributes.
So yes, I think your first task here would be to go through the list of CSS styles and work out which ones could be randomised and what the possible randomised values for them could be. That's the difficult bit. Once you've got that, hard code it into your program, and the rest should be fairly simple.
I'm looking for a good way to model something keeping track of different overlapping CSS groups, similar to the following:
This is just a test sentence for an example.
(This is) just a (test sentence) for an example.
(This is just) a test (sentence for an example.)
Depending on what radio buttons are selected, I'd like to to enable different CSS styles for each of the groups in parenthesis. So for #2 for example, (This is) will always have a different default style, and will highlight red when moused over, but only when option 2 is selected. There will be a lot of different options, so I'd like to avoid having multiple copies of the source text if necessary.
The problem is that you can't have spans overlap. The only way I could thing of doing this is giving each word multiple css classes, like:
group2_word1,group3_word1, etc..., and then do a lot of javascript coding to simulate the behavior I want. This sounds like a terrible idea to me.
Is there a better way?
I remember a javascript library that was able to do word/letter based inline text styling but I do not remember the name. All I could find out by now is a lib called rangy. Maybe you want to give it a try. I will try to find the other lib too and report back if I find it.
Take a look at the CSSClassApplierModule that could do just what you are looking for.
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 an unusual situation. I have a drop down list that allows my users to select one of a number of different scenarios. My problem is that each scenario is about 100 words long. I want to show the user everything and a radio selection box would not be appropriate. What happens is that because of the very long rows my dropdown list appears so wide that it goes off the edge of the page.
Is there a way that I can split up text (I'm using C#) and add new lines so that dropdown list box contains "multi line" selections?
Hope this makes sense to you.
I don't think it's possible without some scripting. You can add width and white-space:pre-wrap to your select tag, but that only wraps the visible part. You can't, as Madmargigan suggested, use a title to show the complete string (the title won't show).
I have prepared a very basic script to demonstrate how you could do this with javascript. See this fiddle. It may give you ideas?
You cannot do this with the standard html dropdownlist. Some frameworks have workarounds for it (for instance, see ASP.NET's dropdownlist). There are also javascript libraries that offer solutions to this problem as well.