Hi Rik! :)
Example 1:
Global filter may have 2-3 fields in block and when user choose one field it is highlighted by css as filled and user see that next field to make choice in!

Main Idea: when user make choice in select field and may be fills text-fields, they are highlighted and may have in css style mini-image Status FILLED

Action: Css style is added to field-wrapper when user makes choice!
Usability: guide user through the form by filled and unfilled fields
The same styles may be done for text-fields, textarea, ... any kind!

Value For Drupal forms:
In forms we may have different big quantity of fields and
to help user fill them such will guide user through the form by filled and unfilled fields in form, step by step, field by field!

CSS can be amazing: there can be background-images like filled, colored options, they may disappear when filled ... so much opportunities!

PS: Imagine, how it would be great! Interactive form!

Comments

RdeBoer’s picture

RdeBoer
Location Melbourne
CreditAttribution: RdeBoer commented

Hi carliton,
Sorry, but I don't understand what it is you want Select with Style to do.
Could you please make a mockup picture or describe it more accurately?

Jarviss’s picture

Jarviss CreditAttribution: Jarviss commented

What should happen:
When user chose option in select, Select with Style module adds css class to option that it is selected!
Without page refresh!

Using power of CSS we can style selected options and filled text-fields as we want.
In addition: for Text-fields, for texareas ... When user fill the field Select with Style module adds css class that field is filled!

RdeBoer’s picture

RdeBoer
Location Melbourne
CreditAttribution: RdeBoer commented

Ok, I get you now.
This will require javascript/jQuery, but not a lot.
I'm not sure it will work as the browser already does its own highlighting when you click an option in a select box. What you are saying is that you want to override that behaviour, using different colours and font styles ?

Jarviss’s picture

Jarviss CreditAttribution: Jarviss commented

Browser usually highlight onmousover event, I am talking about SELECTED.
When I choose select option in Field_1, and select option in Field_2: Field_1 is highlighted that the choice in field_1 was made.
And next after I select option in Field_2 it will highlight that choice is also made.

Like checklist, or behavior in drupal modules section, when you install and uninstall module,

is highlighted with red or green!
step by step, field after field, some kind of controlling weather all or not all fields are selected and filled by user.
RdeBoer’s picture

RdeBoer
Location Melbourne
CreditAttribution: RdeBoer commented

But the browser already does that. When you click an option in a multi-choice select box, for instance, the background of the option goes blue (in most browsers).
Then when you move to the next multi-choice select box on the same page and click an option there, then that one goes blue, while the option in the first select box goes back to grey (or whatever the "selected" color is set to by your browser).

Is what you want to change the "selected" font and color attributes:

select option[selected="selected"] {
  font-style: italic;
  font-weight: bold;
  background-color: red;
  color: green;
}

This works in Firefox only for the font-style and font-weight and not at all in Chrome or Safari.

Jarviss’s picture

Jarviss CreditAttribution: Jarviss commented

Example code:

<select name="select" style="background-color:#F08080;" onChange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor"><option style="background-color:#F08080;" value="1" selected>Booked</option>
<option style="background-color:#FFE289;" value="2">Provisional</option>
<option style="background-color:#98FB98;" value="3">Available</option>
</select>
Jarviss’s picture

Jarviss CreditAttribution: Jarviss commented

Additional Example code: Works in Last versions of Chrome Opera Safari Firefox

<html>
<head>
<STYLE TYPE="TEXT/CSS">
.with_bg{background-color:#e7fcde; display: block; font-size: 14px; border: 2px solid #5ed230; cursor: pointer;}
.without_bg{background-color:#FFFFFF; cursor: pointer;}
</STYLE>
</head>
<body >

<select name="select"   style="background-color:#FFFFFF;display: block; font-size: 14px;" onmouseover="this.className='with_bg'; "  onChange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor">
<option value="0">none</option>
<option style="background-color:#8ded67;" value="1" selected>Booked</option>
<option style="background-color:#8ded67;" value="2">Provisional</option>
<option style="background-color:#8ded67;" value="3">Available</option>
</select>
</body>
</html>
Jarviss’s picture

Jarviss CreditAttribution: Jarviss commented

Can be interesting in addition:
Select Dropdown Onmouseover
Works in Last versions of Chrome Opera Safari Firefox

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Drop on Hover</title>
    <script type="text/javascript">
        function DropList() {
            var n = document.getElementById("sel").options.length;
            document.getElementById("sel").size = n;
        }
    </script>
</head>
<body>
    <div>
       <select id="sel" onmouseover="DropList()" onmouseout="this.size=1;">
            <option>One</option>
            <option>Two</option>
            <option>Three</option>
            <option>Four</option>
            <option>Five</option>
            <option>Six</option>
            <option>Seven</option>
            <option>Eight</option>
        </select>
    </div> 
</body>
</html>
RdeBoer’s picture

RdeBoer
Location Melbourne
CreditAttribution: RdeBoer commented

Hi Carliton,
On what browser(s) did you try this?
Rik

Jarviss’s picture

Jarviss CreditAttribution: Jarviss commented

Works in Last versions of Chrome Opera Safari Firefox

RdeBoer’s picture

RdeBoer
Location Melbourne
CreditAttribution: RdeBoer commented

I tried these and they look good.
I'm not sure what to do about incorporating these into Select with Style module.
There's actually no PHP code required.
We could pretty much just add a stylesheet.
Suggestions?

Jarviss’s picture

Jarviss CreditAttribution: Jarviss commented

PHP may be necessary to insert class (for css-wrapper and for option) that option or textfield that is selected or not empty,
And then css will do the styling automatically!

RdeBoer’s picture

RdeBoer
Location Melbourne
CreditAttribution: RdeBoer commented

So what exactly should go in SwS and how is the user going to specify it, ie UI?

Jarviss’s picture

Jarviss CreditAttribution: Jarviss commented

Valuable code is in #7 comment, In UI admin may for example change class-names but it not so necessary, css may be styled by default and rewritten by designer!

RdeBoer’s picture

RdeBoer
Location Melbourne
CreditAttribution: RdeBoer commented

So I simplified your examples a bit and put them into one:

<html>
<body>

<select  multiple size="1" onmouseover="this.size=this.options.length" onmouseout="this.size=1">
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
    <option>Four</option>
    <option>Five</option>
    <option>Six</option>
    <option>Seven</option>
    <option>Eight</option>
</select>
<p>
<select onchange="this.style.border='2px solid #5ed230'">
  <option value="0">none</option>
  <option value="1">Booked</option>
  <option value="2">Provisional</option>
  <option value="3">Available</option>
</select>

</body>
</html>

There is still little need for Select with Style to do anything.
The second one, for example you can achieve simply by importing the following piece of code, or even inserting it in the content of the page that has the selects that you want to add a green border to when clicked:

<script>
   $("select").change(function() {
      this.style.border = '2px solid #5ed230';
   })
</script>
Jarviss’s picture

Jarviss CreditAttribution: Jarviss commented

I don't understand!
when I put on my page.tpl.html it doesn't work, no color no bgcolor change?

<script>
   $("select").change(function() {
      this.style.border = '2px solid #5ed230';
   })
</script>
Jarviss’s picture

Jarviss CreditAttribution: Jarviss commented

Select with style could give opportunity to post #color and option to open list on hover using UI! For quick solution!

RdeBoer’s picture

RdeBoer
Location Melbourne
CreditAttribution: RdeBoer commented

Hi Carliton,

Re #16:

When doing this in Drupal forget about the code of part 1 in #15.
Copy exactly the script code from the 2nd part of #15 and paste that in the body of the Edit form (including the <script> tags) of a page that has some select (drop-down) on.

It will just do the green border color -- I kept it simple.

Rik

RdeBoer’s picture

RdeBoer
Location Melbourne
CreditAttribution: RdeBoer commented

Re #17:
I don't think I understand you...

Jarviss’s picture

Jarviss CreditAttribution: Jarviss commented

Re: #18 paste code in the body of the Edit form How to do that simply?
Re: #17 it is optional for simple use when admin can past his color to Select with Style form and it will be simply applied to fields!

RdeBoer’s picture

RdeBoer
Location Melbourne
CreditAttribution: RdeBoer commented

I think what I'll do is put the javascript required for the examples in #15 in a little select_with_style.js file that Select with Style will automatically include with every page load.
The javascript code in that file will initially be commented out and administrators can then uncomment the features they like. These features will work for all targeted HTML elements, not just for the <select>'s that belong to Select with Style.

Good idea?

RdeBoer’s picture

RdeBoer
Location Melbourne
CreditAttribution: RdeBoer commented
Assigned: Unassigned » RdeBoer

Done #21 and released as 7.x-1.0-beta4.
Suggestions for more effects welcome.

RdeBoer’s picture

RdeBoer
Location Melbourne
CreditAttribution: RdeBoer commented
Status: Active » Fixed
Jarviss’s picture

Jarviss CreditAttribution: Jarviss commented

Need Css class .required for Select with style widget if field is required! In each kind of field, select, text, texarea!

RdeBoer’s picture

RdeBoer
Location Melbourne
CreditAttribution: RdeBoer commented

Already done. Part of core.

Jarviss’s picture

Jarviss CreditAttribution: Jarviss commented

Rik, do you mean core of Select with style? because I don't see .required class when I use Select with style widget?
Usually we have class="form-select required" when I use Select with style I get class="with-style" and no required

RdeBoer’s picture

RdeBoer
Location Melbourne
CreditAttribution: RdeBoer commented

Select with Style 7.x-1.0, just released :-)

Jarviss’s picture

Jarviss CreditAttribution: Jarviss commented

Really Thank you Rik for your activity and energy, it is valuable!

RdeBoer’s picture

RdeBoer
Location Melbourne
CreditAttribution: RdeBoer commented
Status: Fixed » Closed (fixed)

Much appreciated.

RdeBoer’s picture

RdeBoer
Location Melbourne
CreditAttribution: RdeBoer commented
Issue summary: View changes

...