Clever Geek Handbook

JQuery Pop Window - Menu / Image Design

enter image description here

I would like to create something like the photo I put above, this gives the basic idea of ​​what I am trying to accomplish. I think something like this will allow users to select based on the appearance of the plates (and categories).

In addition, it shows the user prices upward and allows users to view different plates. I also want that if the user clicks on the plate, they can see the plate in full size.

The gray boxes in my design represent the images for the plates, and below I put the name of the license, and this is the price.

What I came up with is a combination, but I'm trying to figure out something more than this popup. I have radio buttons (Yes / No), if yes, a popup appears similar to the image if nothing happens except to clear the price if the plate is already selected.

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('<h2>' + name + '</h2>')
		.append('<br/>Special Plate Code: <span class="code">' + code + '</span><br/>')
		.append('<p>Image will go here:</p><br/><img alt="" src="' + image + '"/>')
		.append('<br/><br/>Price: <span class="price">' + price + '</span><br/>')
		.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;
}
      

        
        
        
      

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
You are hovered over: <span class="hoveredOver"></span><br/>
You have clicked on option: <span class="clickedOption"></span>

<br/><br/>

<!-- CUSTOM DROP DOWN EXAMPLE -->

<div id="dropdown" class="specialtyPlatesCategories">
    
    <div class="selectHeader">Click to Select Plates:</div>
    
    <!-- THIS IS WHERE YOU WILL PUT YOUR TOP-LEVEL OPTIONS -->
    <div class="drop_down_scroll_container"> 
 <span>Environment / Wildlife</span> 
 <span>Community Interest</span> 
 <span>Health Interest</span> 
 <span>Family / Kids</span> 
 <span>American Heroes</span> 
 <span>Professional Sports</span> 
 <span>Collegiate</span> 
 <span>Motorcycle</span> 
 </div> 

 <!-- THIS IS WHERE YOU WILL PUT YOUR SUB-LEVEL OPTIONS --> 
 <div id="Environment / Wildlife_subcategories" class="dropdown-subcategory"> 
 <span data-code="ANR" data-image="/images/img/AnimalFriend.png" data-price="30">Animal Friend</span> 
 <span data-code="QCR" data-image="/images/img/Aquaculture.png" data-price="30">Aquaculture</span> 
 <span data-code="CER" data-image="/images/img/ProtectOurOceans.png" data-price="30">Protect Our Oceans</span> 
 <span data-code="CWR" data-image="/images/img/ConserveWildlife.png" data-price="30">Conserve Wildlife</span> 
 <span data-code="DFR" data-image="/images/img/DiscoverFloridaOceans.png" data-price="30">Discover Florida Oceans</span> 
 <span data-code="ERR" data-image="/images/img/EvergladesRiverofGrass.png" data-price="25">Everglades River of Grass</span> 
 <span data-code="FVR" data-image="/images/img/FishFlorida.png" data-price="27">Fish Florida</span> 
 <span data-code="INR" data-image="/images/img/IndianRiverLagoon.png" data-price="20">Indian River Lagoon</span> 
 <span data-code="LBR" data-image="/images/img/LargemouthBass.png" data-price="30">Largemouth Bass</span> 
 <span data-code="PAR" data-image="/images/img/ProtectthePanther.png" data-price="30">Protect the Panther</span> 
 <span data-code="PFR" data-image="/images/img/ProtectFloridaSprings.png" data-price="30">Protect Florida Springs</span> 
 <span data-code="WHR" data-image="/images/img/ProtectFloridaWhales.png" data-price="30">Protect Florida Whales</span> 
 <span data-code="POR" data-image="/images/img/ProtectOurReefs.png" data-price="30">Protect Our Reefs</span> 
 <span data-code="PWR" data-image="/images/img/ProtectWildDolphins.png" data-price="25">Protect Wild Dolphins</span> 
 <span data-code="SZR" data-image="/images/img/SaveOurSeas.png" data-price="30">Save Our Seas</span> 
 <span data-code="MTR" data-image="/images/img/SavetheManatee.png" data-price="30">Save the Manatee</span> 
 <span data-code="FBR" data-image="/images/img/SaveWildFlorida.png" data-price="30">Florida Biodiversity - Save Wild Florida</span> 
 <span data-code="STR" data-image="/images/img/SeaTurtle.png" data-price="28">Sea Turtle</span> 
 <span data-code="SNR" data-image="/images/img/WildlifeFoundationofFlorida.png" data-price="30">Wildlife Foundation of Florida</span> 
 <span data-code="FFR" data-image="/images/img/StateWildflower.png" data-price="20">State Wildflower</span> 
 <span data-code="TAR" data-image="/images/img/TampaBayEstuary.png" data-price="20">Tampa Bay Estuary</span> 
 <span data-code="TCR" data-image="/images/img/TreesareCool.png" data-price="30">Trees are Cool</span> 
 </div> 

 <div id="Community Interest_subcategories" class="dropdown-subcategory"> 
 <span data-code="AER" data-image="/images/img/AgriculturalEducation.png" data-price="30">Agricultural Education</span> 
 <span data-code="AGR" data-image="/images/img/Agriculture.png" data-price="25">Agriculture</span> 
 <span data-code="CLR" data-image="/images/img/ChallengerColumbia.png" data-price="30">Challenger/Columbia</span> 
 <span data-code="CFR" data-image="/images/img/CorrectionsFoundation.png" data-price="30">Corrections Foundation</span> 
 <span data-code="ESR" data-image="/images/img/EndlessSummer.png" data-price="30">Endless Summer</span> 
 <span data-code="ARR" data-image="/images/img/FloridaArts.png" data-price="25">Florida Arts</span> 
 <span data-code="HFR" data-image="/images/img/FloridaHorsePark.png" data-price="30">Florida Horse Park (Discover Florida Horses)</span> 
 <span data-code="FYR" data-image="/images/img/FloridaSheriffsYouthRanches.png" data-price="30">Florida Sheriffs Youth Ranches</span> 
 <span data-code="TNR" data-image="/images/img/FloridaTennis.png" data-price="30">Florida Tennis</span> 
 <span data-code="ORR" data-image="/images/img/FraternalOrderofPolice.png" data-price="30">Fraternal Order of Police</span> 
 <span data-code="FQR" data-image="/images/img/FreeMasonry.png" data-price="30">Free Masonry</span> 
 <span data-code="GOR" data-image="/images/img/GolfCapital.png" data-price="30">Golf Capital</span> 
 <span data-code="HAR" data-image="/images/img/HomeOwnership.png" data-price="30">Home Ownership</span> 
 <span data-code="HRR" data-image="/images/img/HorseCountry.png" data-price="30">Horse Country</span> 
 <span data-code="IMR" data-image="/images/img/Imagine.png" data-price="30">Imagine</span> 
 <span data-code="IGR" data-image="/images/img/InGodWeTrust.png" data-price="30">In God We Trust</span> 
 <span data-code="LHR" data-image="/images/img/VisitOurLights.png" data-price="30">Lighthouse Association - Visit Our Lights</span> 
 <span data-code="LDR" data-image="/images/img/LivetheDream.png" data-price="30">Live the Dream</span> 
 <span data-code="AHR" data-image="/images/img/PoliceAthleticLeague.png" data-price="25">Police Athletic League</span> 
 <span data-code="SAR" data-image="/images/img/SharetheRoad.png" data-price="20">Share the Road</span> 
 <span data-code="SPR" data-image="/images/img/SpecialOlympics.png" data-price="20">Special Olympics</span> 
 <span data-code="EDR" data-image="/images/img/SupportEducation.png" data-price="25">Support Education</span> 
 <span data-code="SYR" data-image="/images/img/SupportSoccer.png" data-price="30">Support Soccer</span> 
 <span data-code="SOR" data-image="/images/img/USOlympic.png" data-price="20">US Olympic</span> 

 </div> 

 <div id="Health Interest_subcategories" class="dropdown-subcategory"> 
 <span data-code="RXR" data-image="/images/img/AmericanRedCross.png" data-price="30">American Red Cross</span> 
 <span data-code="CSR" data-image="/images/img/ChooseLife.png" data-price="25">Choose Life</span> 
 <span data-code="DOR" data-image="/images/img/DonateOrgans.png" data-price="30">Donate Organs</span> 
 <span data-code="CRR" data-image="/images/img/EndBreastCancer.png" data-price="30">End Breast Cancer</span> 
 <span data-code="HOR" data-image="/images/img/Hospice.png" data-price="30">Hospice</span> 
 <span data-code="MJR" data-image="/images/img/MoffittCancerCenter.png" data-price="25">Moffitt Cancer Center</span> 
 <span data-code="VIR" data-image="/images/img/StateofVision.png" data-price="30">State of Vision</span> 
 <span data-code="SDR" data-image="/images/img/StopHeartDisease.png" data-price="30">Stop Heart Disease</span> 
 <span data-code="ASR" data-image="/images/img/SupportAutismPrograms.png" data-price="30">Support Autism Programs</span> 
 </div> 
 <div id="Family / Kids_subcategories" class="dropdown-subcategory"> 
 <span data-code="SCR" data-image="/images/img/BoyScouts.png" data-price="25">Boy Scouts</span> 
 <span data-code="CAR" data-image="/images/img/StopChildAbuse.png" data-price="30">Stop Child Abuse</span> 
 <span data-code="FJR" data-image="/images/img/FamilyFirst.png" data-price="30">Family First</span> 
 <span data-code="FUR" data-image="/images/img/FamilyValues.png" data-price="30">Family Values</span> 
 <span data-code="CHR" data-image="/images/img/InvestinChildren.png" data-price="25">Invest in Children</span> 
 <span data-code="KKR" data-image="/images/img/KeepKidsDrugFree.png" data-price="30">Keep Kids Drug Free</span> 
 <span data-code="KDR" data-image="/images/img/KidsDeserveJustice.png" data-price="30">Kids Deserve Justice</span> 
 <span data-code="LKR" data-image="/images/img/LaurensKids.png" data-price="30">Lauren Kids</span> 
 <span data-code="PMR" data-image="/images/img/ParentsMakeaDifference.png" data-price="30">Parents Make a Difference</span> 
 </div> 

 <div id="American Heroes_subcategories" class="dropdown-subcategory"> 
 <span data-code="SPRT01" data-image="" data-price="34.00">Sports 01</span> 
 <span data-code="SPRT02" data-image="" data-price="35.00">Sports 02</span> 
 <span data-code="SPRT03" data-image="" data-price="36.00">Sports 03</span> 
 </div> 

 <div id="Professional Sports_subcategories" class="dropdown-subcategory"> 
 <span data-code="MAR" data-image="/images/img/FloridaMarlins.png" data-price="30">Florida Marlins</span> 
 <span data-code="PTR" data-image="/images/img/FloridaPanthers.png" data-price="30">Florida Panthers</span> 
 <span data-code="JJR" data-image="/images/img/JacksonvilleJaguars.png" data-price="30">Jacksonville Jaguars</span> 
 <span data-code="MDR" data-image="/images/img/MiamiDolphins.png" data-price="30">Miami Dolphins</span> 
 <span data-code="MHR" data-image="/images/img/MiamiHeat.png" data-price="30">Miami Heat</span> 
 <span data-code="OMR" data-image="/images/img/OrlandoMagic.png" data-price="30">Orlando Magic</span> 
 <span data-code="BBR" data-image="/images/img/TampaBayBucs.png" data-price="30">Tampa Bay Bucs</span> 
 <span data-code="DRR" data-image="/images/img/TampaBayRays.png" data-price="30">Tampa Bay Rays</span> 
 <span data-code="TBR" data-image="/images/img/TampaBayLightning.png" data-price="30">Tampa Bay Lightning</span> 
 <span data-code="NZR" data-image="/images/img/Nascar.png" data-price="30">Nascar</span> 
 </div> 
 <div id="Collegiate_subcategories" class="dropdown-subcategory"> 
 <span data-code="ENV01" data-image="" data-price="31.00">Environment 01</span> 
 <span data-code="ENV02" data-image="" data-price="32.00">Environment 02</span> 
 <span data-code="ENV03" data-image="" data-price="33.00">Environment 03</span> 
 </div> 

 <div id="Motorcycle_subcategories" class="dropdown-subcategory"> 
 <span data-code="MYR" data-image="/images/img/MotorcycleSpecialty.png" data-price="22">Motorcycle Specialty</span> 
 <span data-code="MUR" data-image="/images/img/MotorcylceUnderage.png" data-price="22">Motorcylce Underage</span> 
 </div>




<!-- BOOTSTRAP MODAL FOR SPECIAL PLATES -->
<div class="modal fade" id="modal_special" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
        	<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
         </button>
        <h4 class="modal-title" id="myModalLabel">Specialty Plate</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-primary accept">Accept</button>
      </div>
    </div>
  </div>
</div>
Run codeHide result


+3


source to share


1 answer


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

YOU CAN VIEW A MOCKUP DAY ON JSFIDDLE

The main idea was to convert the custom dropdown to a custom application.

First I converted all yours <optgroup></optgroup>

to this format:

<div class="licenseSection" id="licenseSection0">
    <!-- buttons for this section go here -->
</div>

And each of the tags has <option></option>

been converted to this:

<div class="licenseButton" data-price="30" data-code="2" data-name="Aquaculture">
    <div class="selectedLicenseFlag"></div>
    <div class="licenseImage">
        <img src="/images/img/Aquaculture.png" alt="Aquaculture" />
    </div>
    <div class="licenseInfoName">Aquaculture</div>
    <div class="licenseInfoPrice">$30</div>
</div>

And now, since each "category" is now in its own licenseSection

div, it's just a matter of getting jQuery to show or hide the corresponding sections. For example:

$("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 license price appears when the license thumbnail has fluctuated.
  • The selected license appears below the license selection so that the user can continue browsing before accepting
  • The entire modal is a bootstrap component, so it can be easily opened and closed.


How to integrate this collector into your application:


1. Launching a 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 user-selected data:

This app sets a variable named selectedLicense

to keep track of which license was selected, so when the user clicks the Accept button on the form, you can do whatever you want with the object selectedLicense

(update the 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:\n\n"+selectedLicense.name+" $"+selectedLicense.price);
});

So this is the main idea. Read the JSFiddle demo and feel free to ask any questions you may have.

Hope this helps!

+1


source






More articles:


All Articles