Hotel Room (Adult + THREE Children) 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="room1" 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><i class="icon-plus-sign addkids" rel="tooltip" title="Click to add Child" data-placement='left'></i>
   
<div class='childwrap' style='display:none'><!--  -->
 

    <span>Child Age:</span>
                <select name="children" class="childrencount btn-mini">
                    <option selected value="0">0</option>
                    <option 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>
                    <option value="7">7</option>
          ...

CSS

body {
    margin:40px 280px 60px 280px
}
.popover-inner {
    width:385px
}
.pop {
    cursor:pointer
}
#num-adults {
    width:100%
}
label, .room span {
    font-size:9px
}
.roomcount, .childrencount, .childrencount1,.childrencount2 {
    width:43px;
    display:inline-block;
}
.childwrap, .childwrap1 , .childwrap2 {
    display:inline;
    visibility:hidden
}
.addkids, .addkids1, .addkids2 {
    margin-left:7px;
    margin-top:-4px;
    cursor:pointer;
}
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 ($) {

    var pplcnt;
    if (localStorage.getItem("rmCnt") === null) {
        pplcnt = 'room1=1';
        localStorage.setItem('rmCnt', pplcnt);
    };


    // 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
        $(".popover  [rel=tooltip]").tooltip(); // trigger tool tip
        $('.childrencount').filter(function () {
            if ($(this).val() > 0) {
                $(this).closest('.childwrap').css({
                    opacity: 0.0,
                    visibility: "visible"
                }).animate({
                    opacity: 1.0
                }).show();
            }
        });
        // Child1 show on load with val
   $('.childrencount1').filter(function () {
            if ($(this).val() > 0) {
                $(this).closest('.childwrap1').css({
                    opacity: 0.0,
                    visibility: "visible"
                }).animate({
                    opacity: 1.0
                }).show();
            }
        });
                // Child2 show on load with val
   $('.childrencount2').filter(function () {
            if ($(this).val() > 0) {
                $(this).closest('.childwrap2').css({
                    opacity: 0.0,
                    visibility: "visible"
                }).animate({
                    opacity: 1.0
                }).show();
            }
        });
        
    });//end



    // CONTENT AND TITLE FILL
    function getPopTitle(target) {
        return $("#" + target + "_content > div.popTitle").html();
    };

  ...