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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    New Coder
    Join Date
    Jun 2014
    Location
    Minnesota
    Posts
    31
    Thanks
    4
    Thanked 4 Times in 4 Posts

    Script select.js Help

    Hello everyone,

    I am new here and I have stumbled up this version of select.js. I am styling my select boxes for a website and I have everything working but I need to do one thing. When you click a box it drops down, when you click another it drops down...I need to have it where when you click one box it opens and if you click another the previous one closes.

    Can anyone assist me with this? I just can't seem to get it.

    Here is the codepen, thank you in advance.

    CodePen - A Pen by Benjamin Vilina

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,534
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    	function ts_swapclass(o,c1,c2)
    	{
    		var cn=o.className
            if (o.nodeName.toUpperCase()=='A'&&ts_check(o,c1)){
             if (ts_swapclass.lst&&ts_swapclass.lst!=o){
    		  ts_swapclass(ts_swapclass.lst,ts_triggeroff,ts_triggeron);
    		  ts_swapclass(ts_swapclass.lst.parentNode.getElementsByTagName('ul')[0],ts_dropdownclosed,ts_dropdownopen);
             }
             ts_swapclass.lst=o;
    		}
            o.className=!ts_check(o,c1)?cn.replace(c2,c1):cn.replace(c1,c2);
    	}
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    bvil (06-23-2014)

  • #3
    New Coder
    Join Date
    Jun 2014
    Location
    Minnesota
    Posts
    31
    Thanks
    4
    Thanked 4 Times in 4 Posts
    Quote Originally Posted by vwphillips View Post
    Code:
    	function ts_swapclass(o,c1,c2)
    	{
    		var cn=o.className
            if (o.nodeName.toUpperCase()=='A'&&ts_check(o,c1)){
             if (ts_swapclass.lst&&ts_swapclass.lst!=o){
    		  ts_swapclass(ts_swapclass.lst,ts_triggeroff,ts_triggeron);
    		  ts_swapclass(ts_swapclass.lst.parentNode.getElementsByTagName('ul')[0],ts_dropdownclosed,ts_dropdownopen);
             }
             ts_swapclass.lst=o;
    		}
            o.className=!ts_check(o,c1)?cn.replace(c2,c1):cn.replace(c1,c2);
    	}

    Thank you buddy but It isn't quite working. For some reason my css wasn't updated in that pen. It works but when I go to click the bottom select the one above it drops with it.

    Here is the updated pen without your code so you can see the functionality.

    *UPDATED PEN: CodePen - A Pen by Benjamin Vilina

    I just need the other menus to collapse when selecting a different list.


    Thank you so far, you are great.

  • #4
    New Coder
    Join Date
    Jun 2014
    Location
    Minnesota
    Posts
    31
    Thanks
    4
    Thanked 4 Times in 4 Posts
    Edit* if you click from bottom to top and then click the bottom one it will open the top two.

    very odd.

  • #5
    New Coder
    Join Date
    Jun 2014
    Location
    Minnesota
    Posts
    31
    Thanks
    4
    Thanked 4 Times in 4 Posts
    vw, here is the site I am trying to get it working on with your code implemented. It is on the left in the sidebar.

    APi Group Starter Kit

  • #6
    New Coder
    Join Date
    Jun 2014
    Location
    Minnesota
    Posts
    31
    Thanks
    4
    Thanked 4 Times in 4 Posts
    Quote Originally Posted by bvil View Post
    vw, here is the site I am trying to get it working on with your code implemented. It is on the left in the sidebar.

    APi Group Starter Kit
    Anyone?

  • #7
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,534
    Thanks
    3
    Thanked 513 Times in 500 Posts
    you have changed the CSS

    Code:
    .dropdownvisible {
         height: 200px;
        overflow-y: scroll;
        position: absolute !important;
         left: 0 !important;
        box-shadow: none !important;
        clear: right;
        z-index:999999;
        width: 100% !important;
        background: #000;
        }
    with the dropdown position set as absolute the dropdowns overlay each other

    with the position as relative and the modified function it works fine for me testing with IE and FF
    from top to bottom and bottom to top
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #8
    New Coder
    Join Date
    Jun 2014
    Location
    Minnesota
    Posts
    31
    Thanks
    4
    Thanked 4 Times in 4 Posts
    Quote Originally Posted by vwphillips View Post
    you have changed the CSS

    Code:
    .dropdownvisible {
         height: 200px;
        overflow-y: scroll;
        position: absolute !important;
         left: 0 !important;
        box-shadow: none !important;
        clear: right;
        z-index:999999;
        width: 100% !important;
        background: #000;
        }
    with the dropdown position set as absolute the dropdowns overlay each other

    with the position as relative and the modified function it works fine for me testing with IE and FF
    from top to bottom and bottom to top
    Ok, so I changed the positioning which fixes the overlapping but this is the issue that is of my main concern.

    see video: http://benjaminvilina.com/issue/issue.mov

    When you click one and the click another then another some close but the recent one opens back up.

    Any thoughts?

  • #9
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,460
    Thanks
    11
    Thanked 600 Times in 580 Posts
    simply hide them all the the start of the show one routine, nobody will notice the "extra blink"...
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • Users who have thanked rnd me for this post:

    bvil (06-23-2014)

  • #10
    New Coder
    Join Date
    Jun 2014
    Location
    Minnesota
    Posts
    31
    Thanks
    4
    Thanked 4 Times in 4 Posts
    Quote Originally Posted by rnd me View Post
    simply hide them all the the start of the show one routine, nobody will notice the "extra blink"...
    Any chance you could explain a little better?

    Thanks, this issue is just killing me.

  • #11
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,460
    Thanks
    11
    Thanked 600 Times in 580 Posts
    update a codepen or fiddle with what you got and i'll get it working.
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #12
    New Coder
    Join Date
    Jun 2014
    Location
    Minnesota
    Posts
    31
    Thanks
    4
    Thanked 4 Times in 4 Posts
    Quote Originally Posted by rnd me View Post
    update a codepen or fiddle with what you got and i'll get it working.
    Here you go buddy, I appreciate it if you can get it working, it would be epic.

    select.js Custom Dropdowns - CodePen

  • #13
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,460
    Thanks
    11
    Thanked 600 Times in 580 Posts
    Quote Originally Posted by bvil View Post
    Here you go buddy, I appreciate it if you can get it working, it would be epic.

    select.js Custom Dropdowns - CodePen
    man, that's a lot of spaghetti. i thought it would be a bit simpler to fix. usually i can do stuff like that in a few mins...

    i'm sure it's possible, but i'll have to look into this deeper when i get a chance, which might not be until later today or tomorrow.
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • Users who have thanked rnd me for this post:

    bvil (06-23-2014)

  • #14
    New Coder
    Join Date
    Jun 2014
    Location
    Minnesota
    Posts
    31
    Thanks
    4
    Thanked 4 Times in 4 Posts
    Quote Originally Posted by rnd me View Post
    man, that's a lot of spaghetti. i thought it would be a bit simpler to fix. usually i can do stuff like that in a few mins...

    i'm sure it's possible, but i'll have to look into this deeper when i get a chance, which might not be until later today or tomorrow.
    No worries, thanks for looking. Its the weekend anyway I wont be back at it till Monday morning.

    Its a difficult code, I have never come across something like it before.

    Thanks again man.

  • #15
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Quote Originally Posted by rnd me View Post
    man, that's a lot of spaghetti. i thought it would be a bit simpler to fix. usually i can do stuff like that in a few mins...

    i'm sure it's possible, but i'll have to look into this deeper when i get a chance, which might not be until later today or tomorrow.
    This is like taming the "Taming Select" script.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________


  •  
    Page 1 of 2 12 LastLast

    LinkBacks (?)

    1. 06-19-2014, 06:13 PM

    Posting Permissions

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