Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Dec 2012
    Posts
    24
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Selectyze plugin - Give rows different colors

    Hi,

    I have a little problem with the select-box plugin Selectyze. The Selectyze is a plugin that change the appearance of checkboxes via CSS and jQuery.

    The link below contains some examples of the plugin, in the first checkbox there is two rows in the checkbox with different background/font etc that says "optgroup":

    http://demos.myjqueryplugins.com/selectyze/

    The optgroup is a class that groups many <option> and creates a headline/title row with different background, font etc. The problem with using optgroup is that the row itself issent clickable and the groups create empty space before and after the group in the list (in the example above "California" have much space).

    This is how to create a headline/title in the standard selectboxes (without Selectyze), a class that given to those rows that will have different background color:

    Code:
    <select>
        <option class="class_with_different_background">Option1</option>
        <option>Option2</option>
        <option>Option3</option>
        <option class="class_with_different_background">Option4</option>
    </select>

    This is how to create a headline/title using optgroup in Selectyze:

    Code:
    <select>
        <optgroup label="Title/Headline">
            <option>Option1</option>
            <option>Option2</option>
            <option>Option3</option>
        </optgroup>
    </select>
    Notice that in the optgroup the title/headline is not a select-option itself, so it cant be a selectable option. This can be nessecary if the "selected" option says for exemple "Search all options".

    I wounder if there is any posiblity to add a class that change background just like a standard selectbox but still use the Selectyze plugin. If I just add a class to a row/option it dont changes anything, so something in the Selectyze script have to refuse this, I cant figure out what in the script that can cause this and thats why I hope somebody have the solution.

    Here is the script and css files:

    https://github.com/alpixel/Selectyze

    I hope somebody can take a look at it and answer my question, thanks!

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    The optgroup is not clickable intentionally. You could just use another option, with or without the attribute disabled.

    But this plugin comes with a css file that you can modify freely. Presumably you are using a particular theme, so just find the css for this theme - they are commented in the css file - and modify it(?).

    If your are unable to use a class for some reason then you could use the CSS3 nth-child selector to target particular options.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    New Coder
    Join Date
    Dec 2012
    Posts
    24
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by AndrewGSW View Post
    The optgroup is not clickable intentionally. You could just use another option, with or without the attribute disabled.

    But this plugin comes with a css file that you can modify freely. Presumably you are using a particular theme, so just find the css for this theme - they are commented in the css file - and modify it(?).

    If your are unable to use a class for some reason then you could use the CSS3 nth-child selector to target particular options.
    The problem is if a selectbox have a "search all" selected option becuse then that option cant be a selection choice, example:

    This "Search all options" can be selected.

    Code:
    <select>
    	<option>Search all options</option>
    	<option>Option1</option>
    	<option>Option2</option>
    	<option>Option3</option>
    </select>
    This "Search all options" cant be selected.

    Code:
    <select>
        <optgroup label="Search all options">
            <option>Option1</option>
            <option>Option2</option>
            <option>Option3</option>
        </optgroup>
    </select>
    Thats why I want standard <option> list without the optgroup, there is no problem edit the appearence of the selectbox or list but I dont understand why I just cant add a class to a row when I am not using optgroup.
    Last edited by Webbot; 12-28-2012 at 06:21 PM.

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    You should be able to add a class; it would be very unusual for a plug-in to remove a class. It is more likely that the plug-ins' css has a higher specificity than the css you are adding for your class. That is, their css selectors are more specific than yours and so over-rule them.

    Try creating more specific css or, if necessary, add, and target, id-numbers.

    Code:
    <select>
        <optgroup id="mainopt" label="Search all options">
            <option>Option1</option>
            <option>Option2</option>
            <option>Option3</option>
        </optgroup>
    </select>
    
    #mainopt {
        /* your css properties here.. */
    }
    .. remembering that ids must be unique on the page.
    Last edited by AndrewGSW; 12-28-2012 at 06:30 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #5
    New Coder
    Join Date
    Dec 2012
    Posts
    24
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by AndrewGSW View Post
    You should be able to add a class; it would be very unusual for a plug-in to remove a class. It is more likely that the plug-ins' css has a higher specificity than the css you are adding for your class. That is, their css selectors are more specific than yours and so over-rule them.

    Try creating more specific css or, if necessary, add, and target, id-numbers.

    Code:
    <select>
        <optgroup id="mainopt" label="Search all options">
            <option>Option1</option>
            <option>Option2</option>
            <option>Option3</option>
        </optgroup>
    </select>
    
    #mainopt {
        /* your css properties here.. */
    }
    .. remembering that ids must be unique on the page.
    But with this solution the problem still exist that "Search all options" issent a selectable option, thats the main problem.

    The reason I cant add a class to a row is propably becuse the Selectyze hides the standard selecbox and replace it with css grapichs and a images, so the row that gets a class with other background infact have that background but that selectbox and list is hidden and replaced with Selectyze graphics.

    What I think is needed is to modify the script so its possible to add background colors to specify rows, this is what I cant figure out how to do.

  • #6
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    The selects and options that you create are hidden and replaced by divs and ul/lis by the plugin. But you can still target the resultant divs, etc., in the plugins' css file:

    Code:
    /***************************/
    /** Common to every theme **/
    /***************************/
    .DivSelectyze {
    	position:relative;
    	width:253px;
    	float:left;
    	margin-top:15px;
    }
    
    .DivSelectyze .selectyzeValue {
    	position:relative;
    	z-index:10;
    	display:block;
    	text-decoration:none;
    }
    
    .DivSelectyze ul {list-style:none;}
    .DivSelectyze .UlSelectize {
    	position:absolute;
    	z-index:9999;
    	display:none;
    }
    
    .DivSelectyze li a {
    	display:block;
    	text-decoration:none;
    }
    
    .optgroupTitle {
    	display:block;
    }
    Try adding
    Code:
    .DivSelectyze li {
        color: red;
    }
    to this, or your own, css file. You'll probably need to experiment a little and even (unfortunately) resort to !important.
    Last edited by AndrewGSW; 12-28-2012 at 07:03 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #7
    New Coder
    Join Date
    Dec 2012
    Posts
    24
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by AndrewGSW View Post
    The selects and options that you create are hidden and replaced by divs and ul/lis by the plugin. But you can still target the resultant divs, etc., in the plugins' css file:
    Try adding
    Code:
    .DivSelectyze li {
        color: red;
    }
    to this, or your own, css file. You'll probably need to experiment a little and even (unfortunately) resort to !important.
    When adding the class below all the rows are red. The problem is how to make specifyed rows red/colored becuse adding a class to <select> rows dont make any differens.

    Code:
    .DivSelectyze li {
        background-color: red;
    }

  • #8
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    You could use the nth-child selector.

    Code:
    .DivSelectyze li:nth-child(3n+3) {  
      color: red; /* colour every third child */
    }
    Or the :first-child or :last-child selector.

    Added: You might need:
    Code:
    .DivSelectyze ul li:nth-child(3n+3) {  
      color: red; /* colour every third child */
    }
    (I haven't checked..)
    Last edited by AndrewGSW; 12-28-2012 at 07:37 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #9
    New Coder
    Join Date
    Dec 2012
    Posts
    24
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by AndrewGSW View Post
    You could use the nth-child selector.

    Code:
    .DivSelectyze li:nth-child(3n+3) {  
      color: red; /* colour every third child */
    }
    Or the :first-child or :last-child selector.

    Added: You might need:
    Code:
    .DivSelectyze ul li:nth-child(3n+3) {  
      color: red; /* colour every third child */
    }
    (I haven't checked..)
    Hmm dont really understand. If I put this class in the CSS, what should I then write in the rows I want to color?

    Just <select class="DivSelectyze">

    Or?

  • #10
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    The code avoids the need to specify your own class because it will apply to the first, last, every third, etc., etc., list-item that is generated by the plugin(?).

    Erm, did you not read the links I provided?
    Last edited by AndrewGSW; 12-28-2012 at 07:49 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    Webbot (12-28-2012)

  • #11
    New Coder
    Join Date
    Dec 2012
    Posts
    24
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by AndrewGSW View Post
    The code avoids the need to specify your own class because it will apply to the first, last, every third, etc., etc., list-item that is generated by the plugin(?).

    Erm, did you not read the links I provided?
    I missed one of the links. Thanks for this solution!

  • #12
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    I missed one of the links. Thanks for this solution!
    No worries. Andy.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •