jquery home

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">
<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>
<link rel="stylesheet" href="http://www.idangero.us/sliders/swiper/demos/main-demos/css/idangerous.swiper.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>
    <div data-role="page" class="main_page" id="panel-fixed-page1">
    
        <div class="mainhader" data-role="header" data-position="fixed" data-theme="b">
            <div class="headerdiv">
                <img src="http://crayondata.cyworld.com/images/renew_1405_icon/img/txt/logo.png" style="margin-top:-10px;"/>
                <span style="font-size:30px">만화</span>
            </div>
            <a href="#nav-panel" data-icon="bars" data-iconpos="notext" data-iconshadow="false">Menu</a>
            <a href="#add-form" data-icon="search" data-iconpos="notext" data-iconshadow="false">Add</a>
        </div><!-- /header -->
        <div id='main' role="main" class="ui-content jqm-content jqm-fullwidth swiper-container scrollpannel"> 
                <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 owl-theme">
                       ...

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}
.main_page{padding:0;margin:0;}
.jqm-fullwidth{margin:0;padding:0;width:100vw}

.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
}
.headerdiv img{vertical-align:middle}
.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;
}

.row:after {
    content: ".";              /* the period is placed on the page as the last thing before the div closes */
display: block;          /* inline elements don't respond to the clear property */ 
    height: 0;                  /* ensure the period is not visible */
    clear: both;               /* make the container clear the period */
    visibility: hidden;      /* further ensures the period is not visible */
}
 
.row {display: inline-block;}   /* a fix for IE Mac */
* html .clearfix {height: 1%;}
.row {display: block;}
.row {
  width: 100%;
  margin: 0 auto;
}
.row .row { min-width: 0px; }

.col, .cols {
  float: left;
  min-height: 1px;
  position: relative;
}
.col:first-child, .cols:first-child {
  margin-left: 0px;
}
.row .one2.cols { width: 48%; }
.row .one2.cols:first-child {
    margin-left:2%;
}
.row .one2.cols:last-child {
    margin-right:2%;
}
.align-right{text-align:right;}

.authorbox{color:#999;}
.graypanel{background-color:#EEE;}
.darkpanel{background-color:#222}
#main...

JavaScript

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

$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />');
$(".exit-off-canvas").hide();
var owl = $('#owl-demo').owlCarousel({
    loop:true,
    margin:0,
    responsiveClass:true,
    responsive:{
        0:{
            items:1,
            nav:false
        },
        800:{
            items:2,
            nav:false
        },
        1400:{
            items:3,
            nav:true,
            loop: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");
});
$( "#nav-panel" ).panel({
  beforeopen: function( event, ui ) {
      $(".exit-off-canvas").show();
      $('html').css('overflow', 'hidden');
  },
  beforeclose: function( event, ui ) {
      $(".exit-off-canvas").hide();
      $('html').css('overflow', 'auto');
  }    
});
$("#nav-panel a").click( function() {
    $("#main").hide();
    $("#panel-fixed-page2").show();
});
function doDraw() {
    var height = $(window).height();
    var width = $(window).width();
    var topheight = $(".mainhader").height();
    $("#main").width("100vw").height( height - topheight ); 
    mySwiper.resizeFix();
}