jqm test

by zunme

HTML

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<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>
<link rel="stylesheet" href="http://www.idangero.us/sliders/swiper/demos/main-demos/css/idangerous.swiper.css">
<script src="http://www.idangero.us/sliders/swiper/js/idangerous.swiper.js"></script>
<script src="http://www.idangero.us/sliders/swiper/js/idangerous.swiper.scrollbar.js"></script>
<!-- /header START-->
<div class="mainhader" data-role="header" data-position="fixed" data-theme="b" id='mainheader' data-url="#home">
    <div class="headerdiv">
        <a href="http://jsfiddle.net/m/vjd/">
        <img src="http://crayondata.cyworld.com/images/renew_1405_icon/img/txt/logo.png" style="margin-top:-10px;"/></a>
        <span style="font-size:30px">만화</span>
    </div>
    <a href="#nav-panel" data-icon="bars" data-iconpos="notext" data-iconshadow="false">Menu</a>
    <a href="#search-panel" data-icon="search" data-iconpos="notext" data-iconshadow="false">Add</a>
</div>
<!-- /header END-->
<!--home page-->
<div data-role="page" class="jqm-demos" id="nhome" style='padding-bottom:0'>
    <div class="ui-content jqm-content jqm-fullwidth scrollpannel" role="main">
        <a class="exit-off-canvas"></a>
                        <div class="swiper-wrapper ">
                    <div class="swiper-slide">
                        <div class="slide-inner">            
<!--scroll start-->                            
                            <div style="width:100vw">                        
                                <div id="owl-demo" class="owl-carousel...

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;}

body{zoom:1;}
.scrollpannel,.jqm-demos, .jqmdemos {background-color:#222;}
.main_page{padding:0;margin:0;}
.jqm-fullwidth{margin:0;padding:0;width:100vw}
.exit-off-canvas {
-webkit-backface-visibility: hidden;
transition: background 300ms ease;
cursor: pointer;
box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5);
display: block;
position: absolute;
background: rgba(90, 90, 90, 0.3);
top: 0;
bottom: 0;
left: 0;
right: 0;
width:100vw;height:100vh;
z-index: 3002;
-webkit-tap-highlight-color: transparent;
}

.middle_title{
    font-family: 'Hanna', serif;
    padding:1.5vw 0;font-size:3.5vw;
    border-top: solid 1px #888;
    border-bottom: solid 1px #888;
    color:#555;background-color:#FFF;
}
.headerdiv{
    height:42px;text-align:center;vertical-align:middle;line-height: 42px; overflow:hidden;
}
.headerdiv img{vertical-align:middle}
.swapopenarea{width:100vw;padding:0;margin:0}
.ttop {line-height: 42px, font-size:120px;}
.middle_titleB{
    font-family: 'Hanna', serif;
    padding:1.5vw 0;font-size:3.5vw; 
    padding:1.5vw 0;font-size:3.5vw;    
    background-color:#444;
    color:#AAA;
}

.align-right{text-align:right;}
.titlebox{font-size:3.3vw}
.authorbox{color:#777;font-size:3vw;}
.graypanel{background-color:#EEE;}
.darkpanel{background-color:#222}

.ellipsis{
    display:block;
    overflow: hidden;
    width:95%;
    white-space:nowrap; 
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
    padding-left:2%;
    padding-right;2%;
}
.banner2{
    background-color:#444;
    margin:0px;padding:0px;font-size:1px;
    font-family: serif;
}
.banner2 img{
 width:100vw;   
}

 #owl-demo .item{
       ...

JavaScript

$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />');
$( document ).on( "mobileinit", function() {
  $.mobile.defaultPageTransition = "flow";
})

$(document).ready(function() {
    $("[data-role='navbar']").navbar();
    $("[data-role='header'], [data-role='footer']").toolbar();
    $( "body>[data-role='panel']" ).panel();    
    
    $( "#nav-panel , #search-panel" ).panel({
      beforeopen: function( event, ui ) {
          $(".exit-off-canvas").show();
          $('html').css('overflow', 'hidden');
      },
      close: function( event, ui ) {
          $(".exit-off-canvas").hide();
          $('html').css('overflow', 'auto');
      }    
    });
    
    $(".exit-off-canvas").hide();
});


var waitForFinalEvent = (function () {
  var timers = {};
  return function (callback, ms, uniqueId) {
    if (!uniqueId) {
      uniqueId = "Don't call this twice without a uniqueId";
    }
    if (timers[uniqueId]) {
      clearTimeout (timers[uniqueId]);
    }
    timers[uniqueId] = setTimeout(callback, ms);
  };
})();

var owl = $('#owl-demo').owlCarousel({
    loop:true,
    margin:0,
    responsiveClass:true,
    autoplay:true,
    autoplayTimeout:2000,
    autoplayHoverPause:true,
    lazyLoad : true,
    responsive:{
        0:{ items:1,nav:false },
        800:{ items:2, nav:false },
        1400:{ items:3, nav:false}
    }
});

var mySwiper = new Swiper('.scrollpannel', {
    scrollContainer:true,
    mousewheelControl : false,
    mode:'vertical',
    autoResize:true,
    //Enable Scrollbar
    scrollbar: {
      container :'.swiper-scrollbar',
      hide: true,
      draggable: false  
    }
  });
doDraw();

$(window).resize(function () {
    waitForFinalEvent(function(){
      doDraw();
    }, 500, "resizeid");
});

function doDraw() {
    var height = $(window).height();
    var width = $(window).width();
    var topheight = $("#mainhader").height();
    var bottomheight =...