jQuery Pop Window - Menu/Image Design

Question

enter image description here

I would like to design something like the photo I placed above, it gives the basic idea of what I am trying to accomplish. I think something like this would allow the users to select based on the appearance of the plates (and category).

Also, it shows the user the prices up front and allows users to browse the different plates. I also want where if the user clicks the plate they can see the plate in full size.

The gray boxes in my design represent the images for the plates and undderneath I put the license name, and it's price.

What I had come up with is a combination drop down but I am trying to figure something more like this pop up window instead. Ill have to radio buttons ( Yes / No )if yes the pop up window like the image appears if no nothing happens except clears the price if a plate was already chosen.

Any help would be greatly appreciated!

http://jsfiddle.net/j585zy0y/4/

$(document).ready(function(){
		
    // When the header for the custom drop-down is clicked
    $(".selectHeader").click(function() {

        // cache the actual dropdown scroll container
        var dropdown = $(this).parent().find(".drop_down_scroll_container");

        // Toggle the visibility on click
        if (dropdown.is(":visible")) {
            dropdown.slideUp();
            $(this).parent().find(".dropdown-subcategory").fadeOut();
        } else {
            dropdown.slideDown();
        }

    });



	// When a top-level menu item is hovered, decide if its
	// coorespnding submenu should be visible or hidden
    $(".drop_down_scroll_container span").hover(

        // hover on
        function() {

            // Remove the "highlighted class from all other options
            $(this).parent().find("span").removeClass("highlighted").removeClass("selected");
            $(this).addClass("highlighted").addClass("selected");

            // Get the index of the hovered span
            var index = $(this).index();

            // Use the hovered index to reveal the 
            // dropdown-subcategory of the same index
            var subcategorydiv = $(this).parent().parent().find(".dropdown-subcategory").eq(index);
            hideallSubmenusExceptMenuAtIndex($(this).parent().parent(), index);
            subcategorydiv.slideDown();
        },

        // hover off
        function() {
            if (!$(this).hasClass("highlighted")) {
                var index = $(this).index();
                var subcategorydiv = $(this).parent().parent().find(".dropdown-subcategory").eq(index);
                subcategorydiv.slideUp();
            }
    });

	// Hide all submenu items except for the submenu item at _index
	// This will hide any of the previously opened submenu items
    function hideallSubmenusExceptMenuAtIndex(formElement, _index) {
        formElement.find(".dropdown-subcategory").each(
            function(index) {
                if (_index != index) {
                    $(this).hide();
                }
            }
        );
    }

	// When any menu item is hovered
    $("span").hover(
        function() {
            $(".hoveredOver").text($(this).text());
        },
        function() {
            $(".hoveredOver").text("");
        }
    );


    // When a sub-menu option is clicked
    $(".dropdown-subcategory span").click(function() {
        $(".dropdown-subcategory span").removeClass("selected");
        $(".clickedOption").text($(this).text());
        $(this).addClass("selected");
        $(this).parent().parent().find(".selectHeader").text($(this).text());
        closeDropDown($(this).parent().parent());
        showSpecialPlateModal($(this).text(), $(this).attr("data-image"), $(this).attr("data-price"), $(this).attr("data-code"));
    });

    // Close the dropdowns contained in divToSearch
    function closeDropDown(divToSearch) {
        divToSearch.find(".drop_down_scroll_container").fadeOut();
        divToSearch.find(".dropdown-subcategory").fadeOut();
    };
	
    // Populate and Launch the bootstrap Modal Dialog Specialty Plates 
    function showSpecialPlateModal(name, image, price, code) {
	  $('#modal_special').find('.modal-body')
		.html('' + name + '')
		.append('
Special Plate Code: ' + code + '
')
		.append('Image will go here:

')
		.append('

Price: ' + price + '
')
		.end().modal('show');
    }

    // When the modal "Accept" button is pressed
    $('.accept').on('click', function() {
		var modal_element = $('#modal_special');
		var name = modal_element.find("h2").text();
		var price = modal_element.find("span.price").text();
		var code = modal_element.find("span.code").text();
		$('#modal_special').modal('hide').end(alert(name + " was selected for a price of " + price));
    });

});

#dropdown {
width:175px;
height:200px;
position:relative;
font-size:12px;
}

.selectHeader {
height:20px;
width:100%;
background-color:#fff;
border:solid thin #ccc;
color:#000;
cursor:pointer;
padding:0 3px;
}

#dropdown span {
display:block;
background-color:#fff;
color:#000;
cursor:pointer;
font-weight:400;
font:inherit;
padding:0 3px;
}

#dropdown span:hover {
background-color:#1C7BD2;
color:#fff;
}

.drop_down_scroll_container {
display:none;
width:100%;
height:100%;
overflow:scroll;
border:solid thin #ccc;
}

.dropdown-subcategory {
display:none;
position:absolute;
top:20px;
left:100%;
z-index:100;
width:100%;
border:solid thin #ccc;
}

.selected {
background-color:#1C7BD2!important;
color:#fff!important;
}

.boxshadow {
box-shadow:0 2px 7px 1px rgba(119,119,119,0.68);
-moz-box-shadow:0 2px 7px 1px rgba(119,119,119,0.68);
-webkit-box-shadow:0 2px 7px 1px rgba(119,119,119,0.68);
}

.hoveredOver,.clickedOption {
font-weight:700;
}


You are hovered over: 

You have clicked on option: 








    
    Click to Select Plates:
    
    
     
 Environment / Wildlife 
 Community Interest 
 Health Interest 
 Family / Kids 
 American Heroes 
 Professional Sports 
 Collegiate 
 Motorcycle 
  

  
  
 Animal Friend 
 Aquaculture 
 Protect Our Oceans 
 Conserve Wildlife 
 Discover Florida Oceans 
 Everglades River of Grass 
 Fish Florida 
 Indian River Lagoon 
 Largemouth Bass 
 Protect the Panther 
 Protect Florida Springs 
 Protect Florida Whales 
 Protect Our Reefs 
 Protect Wild Dolphins 
 Save Our Seas 
 Save the Manatee 
 Florida Biodiversity - Save Wild Florida 
 Sea Turtle 
 Wildlife Foundation of Florida 
 State Wildflower 
 Tampa Bay Estuary 
 Trees are Cool 
  

  
 Agricultural Education 
 Agriculture 
 Challenger/Columbia 
 Corrections Foundation 
 Endless Summer 
 Florida Arts 
 Florida Horse Park (Discover Florida's Horses) 
 Florida Sheriffs Youth Ranches 
 Florida Tennis 
 Fraternal Order of Police 
 Free Masonry 
 Golf Capital 
 Home Ownership 
 Horse Country 
 Imagine 
 In God We Trust 
 Lighthouse Association - Visit Our Lights 
 Live the Dream 
 Police Athletic League 
 Share the Road 
 Special Olympics 
 Support Education 
 Support Soccer 
 US Olympic 

  

  
 American Red Cross 
 Choose Life 
 Donate Organs 
 End Breast Cancer 
 Hospice 
 Moffitt Cancer Center 
 State of Vision 
 Stop Heart Disease 
 Support Autism Programs 
  
  
 Boy Scouts 
 Stop Child Abuse 
 Family First 
 Family Values 
 Invest in Children 
 Keep Kids Drug Free 
 Kids Deserve Justice 
 Lauren's Kids 
 Parents Make a Difference 
  

  
 Sports 01 
 Sports 02 
 Sports 03 
  

  
 Florida Marlins 
 Florida Panthers 
 Jacksonville Jaguars 
 Miami Dolphins 
 Miami Heat 
 Orlando Magic 
 Tampa Bay Bucs 
 Tampa Bay Rays 
 Tampa Bay Lightning 
 Nascar 
  
  
 Environment 01 
 Environment 02 
 Environment 03 
  

  
 Motorcycle Specialty 
 Motorcylce Underage 
 






  
    
      
        
        Specialty Plate
      
      
        ...

radiovisual · Accepted Answer

Ok, so I see what you are trying to do, you are trying to create a fancy selection window, instead of trying to use a custom "dropdown" menu. So I rose to the challenge and created a mockup for you.

YOU CAN REVIEW THE MOCKUP DEMO ON JSFIDDLE

The basic idea is was converting your custom dropdown into a custom application.

First, I converted all your to this format:

And each one of the tags were converted to this:


    
    
        
    
    Aquaculture
    $30

And now, since every "category" is now in it's own licenseSection div, it was just a matter of getting jQuery to show or hide the appropriate sections. Like this:

$("ul.SL_category_buttons li").click(function(){

    var buttonIndex = $(this).index();

    // Handle the button highlighting if the button is already selected
    if ($(this).hasClass("selectedLicenseCategory") == false){
        $("ul.SL_category_buttons li").removeClass("selectedLicenseCategory");
        $("ul.SL_category_buttons li").removeClass("hoverLicenseCategory");
        $(this).addClass("selectedLicenseCategory");

        // Reveal the category options
        revealLicenseCategoryPageAtIndex(buttonIndex);  
    }   
});

function revealLicenseCategoryPageAtIndex(index){
    $(".licenseSection").fadeOut().end(
        $(".licenseSection").eq(index).delay(300).fadeIn()
    );
}

Some of the features of this demo include:

The price of the license appears when the license thumbnail is hovered.
The selected license appears below the license picker so the user can keep review before accepting
The entire modal window is a bootstrap component, so it can be easily opened and closed.

How to integrate this picker into your application:

1. Launching the modal window:

// Option #01
$('#modal_special').modal('show');

// Option #02
// Assign a button with the id of launchLicenseModalSelect to reach this code
$("#launchLicenseModalSelect").click(function(){
    $('#modal_special').modal('show');  
});

1. Getting the user-selected data:

This application sets a variable called selectedLicense to keep track of which license was selected, so when the user clicks the "Accept" button on the form, you can do anything you want with the selectedLicense object (update your UI, update your calculations, etc):

$(".accept").click(function(){
    // Hide the modal
    $('#modal_special').modal('hide');

    // Access the selectedLicense object.
    console.log("The following license was selected:", selectedLicense);
    alert("The following license was accepted:

"+selectedLicense.name+" $"+selectedLicense.price);
});

So that is basic idea. Please review the JSFiddle demo, and feel free to ask any questions you might have.

Hope this helps!

jQuery Pop Window - Menu/Image Design

Answers (1)

YOU CAN REVIEW THE MOCKUP DEMO ON JSFIDDLE

How to integrate this picker into your application:

Related Questions