www.webdeveloper.com
Results 1 to 6 of 6

Thread: Select.js help

  1. #1
    Join Date
    May 2013
    Posts
    10

    Select.js help

    Hello everyone, I am new here and I have a question that I hope someone can assist me with.

    I have this script I found that acts like select.js making it so that you can style a select box. I have everything styled and in place but when I click the select boxes I want it to be able to close the previous one when you click another box.

    Currently it closes the box when you select an option which works fine. However, if you have a box open and click another select it overlaps and gets all screwy.

    Here is the site I am working on and its on the left hand side: http://benjaminvilina.com/gr/

    Here is the jsFiddle to the code so you can see whats going on: http://jsfiddle.net/b4kZj/3/

    Any chance any of you know how to clean this up so that if you click one the other closes and it does not open the rest.

    try clicking them from the bottom to the top and then from the top to the bottom.

    Thank you all again in advance.

  2. #2
    Join Date
    Nov 2010
    Posts
    1,084
    without looking at it too closely, I notice that the boxes close when you click on them a second time. Possibly an easy solution would be to keep a reference to which box is open and then trigger a simulated click on that box when another one is clicked?

  3. #3
    Join Date
    May 2013
    Posts
    10
    Quote Originally Posted by xelawho View Post
    without looking at it too closely, I notice that the boxes close when you click on them a second time. Possibly an easy solution would be to keep a reference to which box is open and then trigger a simulated click on that box when another one is clicked?
    Any chance you could provide an example, I seem to be having no luck.

    Thank you man.

  4. #4
    Join Date
    Nov 2010
    Posts
    1,084
    Quote Originally Posted by bvilina View Post
    Any chance you could provide an example, I seem to be having no luck.
    sure. if the solution you're getting offered here doesn't work out, let us know

  5. #5
    Join Date
    May 2013
    Posts
    10
    Quote Originally Posted by xelawho View Post
    sure. if the solution you're getting offered here doesn't work out, let us know
    I changed what he said and I replied to him with this.

    "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?"

    I still seem to be having no luck, hopefully I can figure this out on one of these forums.

  6. #6
    Join Date
    May 2013
    Posts
    10
    *UPDATE

    So I was unable to find a solution in the script so I just did this lol and it works perfect.

    Thank you everyone for your help

    Code:
    $( ".d2" ).click(function() {
      		$('.d3 .dropcontainer').css("display", "none");
    	});
    
    	$( ".d1" ).click(function() {
      		$('.d2 .dropcontainer').css("display", "none");
    	});
    
    	$( ".d3" ).click(function() {
      		$('.d1 .dropcontainer').css("display", "none");
    	});
    
    	$( ".d3" ).click(function() {
      		$('.d2 .dropcontainer').css("display", "none");
    	});
    
    
    	$('.d3').click(function() {
    		$('.d3 .dropcontainer').css("display", "block");
    	});
    
    	$('.d2').click(function() {
    		$('.d2 .dropcontainer').css("display", "block");
    	});
    
    	$('.d1').click(function() {
    		$('.d1 .dropcontainer').css("display", "block");
    	});

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles