Room count Head Count system w' Bootstrap

Room count Head Count system - w' Bootstrap Andrew Pougher

by Andrew Pougher

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.js"></script>
<i id="pop1" class="icon-user pop" data-placement="bottom"></i>


<div id="pop1_content" class="popSourceBlock">
    <div class="popTitle" style="display:none">
      <i class='icon-remove close'></i>
    </div>
    <!-- start popover -->
    <div class="popContent" style="display:none">
        <div id="hotel-guests"> <span class="wrapper">
    <label for="num-adults">Number of Rooms:</label>
    <select name="hotelroomnumbers" id="num-adults" class="traveler-dropdown btn-mini btn-inverse">

        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>

    </select>
</span> 
    </div>
    <div class="adult">
        <div id="room-1" class="room"><span> Room #1:</span>
 <span class="wrapper">
    <select name="room" class="roomcount btn-mini">
        <option value="0">0</option>
        <option selected value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
  
    </select>
  
</span>

        </div>
    </div>
</div><!-- end popover -->
    
    </div>





<div id="eanrooms" class='well'></div>

CSS

body {
    margin:40px 80px 0px 180px
}
.popover-inner {
    width:145px
}
#num-adults, .roomcount {
    width:120px
}

select.btn {
    -webkit-appearance: button;
       -moz-appearance: button;
            appearance: button;
    width: auto;
}

select.btn-mini {
    height: auto;
    line-height: 14px;
    padding-right: 16px;
}

select.btn-mini + .caret {
    margin-left: -20px;
    margin-top: 9px;
}


.close{margin-top:-6px;margin-right:-6px}
#eanrooms {
    position:absolute;
    top:60%
}

JavaScript

(function ($) {
  
   
         // first Run get t/l rooms from LS
       getTotalRooms(); // how many rooms from LS
       runRooms(); // less or more options 


    $(".pop").each(function() {
    var $pElem= $(this);
    $pElem.popover(
        {
          title: getPopTitle($pElem.attr("id")),
          content: getPopContent($pElem.attr("id")),
            trigger: 'click',
        }
    );
}).click(function() {
        $(this).popover('toggle');
    runRooms(); // less or more options 
    SetCorrectddlVals();// show num ppl in rooms
    });;
	
  

// CONTENT AND TITLE FILL
function getPopTitle(target) {
    return $("#" + target + "_content > div.popTitle").html();
};
		
function getPopContent(target) {
    var $popContent = $("#" + target + "_content > div.popContent").html();
     runRooms(); // less or more options 
    return $popContent;
};

// FNs


function getTotalRooms() {
    if (!localStorage.getItem("rmCnt")) {
        localStorage.setItem('rmCnt', 'room-1=1');
        $("#num-adults option[value='" + count.length + "']").attr("selected", "selected");
    } else {

        var string = localStorage.getItem("rmCnt");
        var count = string.split("&"); // for the room ddl
        // preSelect the # rooms from LS length 
    } // end localCheck
    $("#num-adults option[value='" + count.length + "']").attr("selected", "selected");
}

function SetCorrectddlVals(){
  var string = localStorage.getItem("rmCnt");
        var count = string.split("&");
        $.each(count, function (ele, i) {
            var id = this.split("=")[0];
            var cnt = this.split("=")[1];
            $(".popover #" + id + " option[value='" + cnt + "']").prop("selected", "selected");
        
        });
}//

// DDLs
/*---------------------------------------------------
    DDL changes both setting string : PREPARE THE  ROOM LISTS
    ----------------------------------------------------*/

$(document).on('change', '#num-adults', function (elem, i) {
     ...