web DB & Vertical Menu

A vertical menu built on Bootstrap

by zunme

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css">
<script src="https://jquery-xml2json-plugin.googlecode.com/svn/trunk/jquery.xml2json.js"></script>
<link rel="stylesheet" href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.theme.default.min.css">
<script src="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/owl.carousel.js"></script>
<div id="rightMenu">
    
</div>
<div id="leftMenu">
    <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#leftMenu" href="#">
            <i class="icon-home"></i> Dashboard
        </a>
    </div>
    <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#leftMenu" href="#collapseTwo">
            <i class="icon-th"></i> Layout
        </a>
    </div>
    <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#leftMenu" href="#collapseThree">
            <i class="icon-th-list"></i> UI Components
        </a>
    </div>
    <div class="accordion-heading">
        <a class="accordion-toggle active" data-toggle="collapse" data-parent="#leftMenu" href="#collapseFour">
            <i class="icon-list-alt"></i> Forms
        </a>
    </div>
    <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#leftMenu" href="#collapseFive">
            <i class="icon-cog"></i> Plugins
        </a>
    </div>
    
    
    <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#leftMenu" href="#collapseSix">
            <i class="icon-file"></i> Templates
        </a>
    </div>
</div>
<!-- /...

CSS

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css);
@import url(http://fonts.googleapis.com/earlyaccess/hanna.css);
@import url(http://fonts.googleapis.com/earlyaccess/jejugothic.css);

*{font-family: 'Nanum Gothic Coding', serif;}
.hanna {font-family: 'Hanna', serif;}
.jeju{font-family: 'Jeju Gothic', serif;}

html, body{padding:0;margin:0;}

body{zoom:1;}
body, .page-content-wrapper,.container-fluid{
    overflow:hidden;
}

.mainheader{
     height:42px;
    line-height:42px;
    text-align:center;
    vertical-align:middle;
    color:#FFF;
    background-color:#333;
    font-size:30px;
}

.headerdiv {
    height: 42px;
    line-height: 42px;
    text-align: center;
    vertical-align: middle;
}
.maincontents{
    margin:42px 0px 42px 0px;
}
#leftMenu {
    z-index: 1000;
    position: fixed;
    left: 0;
    width: 80vw;
    height: 100%;
    margin-left: 0px;
    overflow: hidden;
    background: #333;
    border-right-width: 1px;
    margin-right: -1px;
    transform: translate3d(-80vw, 0px, 0px);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#rightMenu {
    z-index: 1000;
    position: fixed;
    right: 0;
    width: 90vw;
    height: 100%;
    margin-right: 0px;
    overflow: hidden;
    background: #EEE;
    border-right-width: 1px;
    margin-right: -1px;
    transform: translate3d(90vw, 0px, 0px);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#leftMenu.Ltoggle{
   box-shadow: 5px 0 5px rgba(0, 0, 0, 0.15);
   transform: translate3d(0px, 0px, 0px);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;    
}
#rightMenu.Rtoggle{
   box-shadow: 5px 0 5px rgba(0, 0, 0, 0.15);
   transform: translate3d(0px, 0px, 0px);
    -webkit-transition: all 0.5s ease;
   ...

JavaScript

jQuery.ajax = (function(_ajax){
    var protocol = location.protocol,
        hostname = location.hostname,
        exRegex = RegExp(protocol + '//' + hostname),
        YQL = 'http' + (/^https/.test(protocol)?'s':'') + '://query.yahooapis.com/v1/public/yql?callback=?',
        query = 'select * from xml where url="{URL}"';
    function isExternal(url) {
        return !exRegex.test(url) && /:\/\//.test(url);
    }
    return function(o) {   
        var url = o.url;
        if ( /get/i.test(o.type) && !/json/i.test(o.dataType) && isExternal(url) ) {
            o.url = YQL;
            o.dataType = 'json';
            o.data = {
                q: query.replace(
                    '{URL}',
                    url + (o.data ?
                        (/\?/.test(url) ? '&' : '?') + jQuery.param(o.data)
                    : '')
                ),
                format: 'xml'
            };
            if (!o.success && o.complete) {
                o.success = o.complete;
                delete o.complete;
            }
            o.success = (function(_success){
                return function(data) {
                    
                    if (_success) {
                        _success.call(this, {
                            responseText: (data.results[0] || '')
                                .replace(/<script[^>]+?\/>|<script(.|\s)*?\/script>/gi, '')
                        }, 'success');
                    }
                };
            })(o.success);
        }
        return _ajax.apply(this, arguments);
    };    
})(jQuery.ajax);

//main script
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />');

var db;
var dbcheck = false;
var owl;
if (!window.openDatabase) {
    console.log("false");
    return false;
} else {
    db = openDatabase("Toon", "1.0", "Toon DB", "2*1024*1024");
    db.transaction(function (tx) {
    tx.executeSql( 'CREATE TABLE IF NOT EXISTS wish ( idx INTEGER...