m.gis v0.2

by lukerichison

HTML

<div id="overlay">
    <a id="O"><span class="icon-options"></span></a>
    <a id="X"><span class="icon-x"></span></a>
    <input id="search" type="text" placeholder="Search"/>
    <div id="results">
        <div class="header"><span>view on map</span><span>view full listing</span></div>
        <ul>
            <li>
                <img src="http://static.squarespace.com/static/503b5a2084ae55f9f01f95e2/t/505170a024ac3544de31344c/1347514530764/House%20thumbnail%20copy.jpeg" alt="missing photo"/>
                <ul>
                    <li>Property title 1</li>
                    <li>attribute</li>
                    <li>second attribute</li>
                </ul>
            </li>
            <li>
                <img src="http://static.squarespace.com/static/503b5a2084ae55f9f01f95e2/t/505170a024ac3544de31344c/1347514530764/House%20thumbnail%20copy.jpeg" alt="missing photo"/>
                <ul>
                    <li>Property title 2</li>
                    <li>attribute</li>
                    <li>second attribute</li>
                </ul>
            </li>
            <li>
                <img src="http://static.squarespace.com/static/503b5a2084ae55f9f01f95e2/t/505170a024ac3544de31344c/1347514530764/House%20thumbnail%20copy.jpeg" alt="missing photo"/>
                <ul>
                    <li>Property title 3</li>
                    <li>attribute</li>
                    <li>second attribute</li>
                </ul>
            </li>
            <li>
                <img src="http://static.squarespace.com/static/503b5a2084ae55f9f01f95e2/t/505170a024ac3544de31344c/1347514530764/House%20thumbnail%20copy.jpeg" alt="missing photo"/>
                <ul>
                    <li>Property title 4</li>
                    <li>attribute</li>
                    <li>second attribute</li>
                </ul>
            </li>
            <li>
                <img...

CSS

</style><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><style>
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400);
body, input {
    font: normal normal 300 1em/1.5em "Source Sans Pro", sans-serif;
    color: #444;
}
body {
    margin: 0;
    padding: 0;
    background: url(http://2.bp.blogspot.com/-daQMoDFpFI0/TyEiztqsjTI/AAAAAAAABtE/Cn_b3rRJu5A/s1600/google-maps-ubertechblog.png);
}
span.icon-x,
span.icon-options,
span.icon-return {
    display: inline-block;
    width: 0.75em;
    height: 0.75em;
    padding: 0.75em 0 0 0.75em;
    background-image: url(http://development.advncs.com/dev/GIS/mapviewer/assets/icons/icons2.png);
    background-origin: content-box;
    background-size: 8em 8em;
    background-repeat: no-repeat;
}
span.icon-options { background-position: -1em -4em; }
span.icon-x       { background-position: -4em -4em; }
span.icon-return  { background-position: -7em -4em; }
#overlay,
#results {
    overflow: hidden;
}
#overlay,
#search {
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0,0,0,0.6);
}
#overlay {
    margin: 0.5em;
    background-color: rgba(235,235,235,0.8);
    position: relative;
}
#search {
    margin: 0;
    border: 0;
    padding: 0.5em 4em 0.5em 1em;
    width: 100%;
    background: none;
    box-sizing: border-box;
}
#search:focus {
    outline: none;
}
#search::-webkit-input-placeholder {
    color: #888;
}
#O, #X {
    position:absolute;
    top: 0;
    right: 0;
    padding: 0.5em;
}
#X {
    right: 2.5em;
    margin-right: 1px;
}
#O:after {
    position: absolute;
    content: '';
    display: block;
    top: 20%;
    right: 100%;
    height: 60%;
    border-left: 1px solid #777;
}
#O, #O span,
#X, #X span {
    display: block;
}
#results,
#X {
    display:none;
}
#results .header {
    background-color: #666;
    color: #d4d4d4;
}
#results .header span {
    width: 40%;
    display:inline-block;
    text-align: center;
    font-size: 0.625em;
   ...

JavaScript

$('#overlay').css('max-height', $(window).height() - (2*$('#overlay').offset().top));
$('#results').children('ul').css('max-height', $(window).height() - $('#overlay').offset().top - $('#results').children('ul').offset().top);
/* ============================================================
 * Search function
 * ============================================================ */
// when user types in #Search field
$('#search').keyup(function(){
    // if user presses enter, return, go, submit, etc.
    if((event.keyCode ? event.keyCode : event.which) == '13') {
        // perform search
        $('#results').show('drop', {direction: 'up'});
        // lose focus
        $(this).blur();
    }
    // all other keys
    else {
        // ...if search input is empty, hide top button
        if ($('#search').val() === '') { $('#X').hide('fade'); }
        // ...else, show top button
        else { $('#X').show('fade'); }
    }
});

$('#X').click(function(){
    $('#search').val('').focus();
    $('#results').hide('drop', {direction: 'up'});
    $(this).hide('fade');
});