Home 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>
    <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:32px">만화</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">
                                    <div class="item"><a href="#toon" ><img class="owl-lazy" data-src="http://crayondata.cyworld.com/upload/segment/201411/15024741800000.jpg" /></a></div>
                                    <div class="item"><a href="#toon" ><img...

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; overflow:hidden;
}
.headerdiv img{vertical-align:middle}
.swapopenarea{width:100vw;padding0;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;
}

.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 {
   ...

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,
    
    autoplay:true,
    autoplayTimeout:2000,
    autoplayHoverPause:true,
    
    lazyLoad : true,
    responsive:{
        0:{
            items:1,
            nav:false
        },
        800:{
            items:2,
            nav:false
        },
        1400:{
            items:3,
            nav:true,
            loop:false
        }
    }
      
      });


$(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();
});
$( window ).hashchange(function() {
    var hash = location.hash;
     console.log(hash);
  });