Masonry images overlapping above each other - 圖片重疊問題

JS部分

  
<script src="https://code.jquery.com/jquery-1.12.4.min.js"  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<!--先放masonjs 再放imgloadjs,才不會黏再一起，此script要放在網頁下面-->
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script>
// 啟動 Masonry
var $grid = $('.grid').masonry({
 itemSelector: '.grid-item',
 percentPosition: true,
 columnWidth: '.grid-sizer'
 });
 // 當圖片都下載後才開始布局
 $grid.imagesLoaded().progress( function() {
 $grid.masonry();
});   
</script>
  

HTML部分

  
<div class="grid-sizer"></div>
<div class="grid row" data-masonry='{ "itemSelector": ".grid-item" }'>
     <div class="grid-item col-xs-6 col-sm-4 col-md-4">法語課程</div>
     <div class="grid-item col-xs-6 col-sm-4 col-md-4">法語課程2</div>
</div>

jquery 設定螢幕高度

<script>
      $(document).ready(function () {
          y = $(window).innerHeight() - 463;
          $("#viewport, .item").height(y);
          $(window).resize(function () {
              x = $(window).innerHeight() - 463;
              $("#viewport, .item").height(x);
              $("#eDay").text(x);
          });

      });

    </script>

input數量+ -

HTML
<input type='button' value='-' class='qtyminus' field='quantity' />
    <input type='text' name='quantity' value='0' class='qty' />
    <input type='button' value='+' class='qtyplus' field='quantity' />

    <input type='button' value='-' class='qtyminus' field='quantity2' />
    <input type='text' name='quantity2' value='0' class='qty' />
    <input type='button' value='+' class='qtyplus' field='quantity2' />





JS

//用來做訓練人員數量加減
jQuery(document).ready(function(){
    // This button will increment the value
    $('.qtyplus').click(function(e){
        // Stop acting like a button
        e.preventDefault();
        // Get the field name
        fieldName = $(this).attr('field');
        // Get its current value
        var currentVal = parseInt($('input[name='+fieldName+']').val());
        // If is not undefined
        if (!isNaN(currentVal)) {
            // Increment
            $('input[name='+fieldName+']').val(currentVal + 1);
        } else {
            // Otherwise put a 0 there
            $('input[name='+fieldName+']').val(0);
        }
    });
    // This button will decrement the value till 0
    $(".qtyminus").click(function(e) {
        // Stop acting like a button
        e.preventDefault();
        // Get the field name
        fieldName = $(this).attr('field');
        // Get its current value
        var currentVal = parseInt($('input[name='+fieldName+']').val());
        // If it isn't undefined or its greater than 0
        if (!isNaN(currentVal) && currentVal > 0) {
            // Decrement one
            $('input[name='+fieldName+']').val(currentVal - 1);
        } else {
            // Otherwise put a 0 there
            $('input[name='+fieldName+']').val(0);
        }
    });
});


CSS
.qty{
    -webkit-appearance: none;
    border-radius: 0;
    line-height: 2.5;
    width: 36px;
    height: 25px;
    border-left: none;
    border-right: none;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    vertical-align: middle;
    text-align: center;
    background-color: #fff;
    margin: 0;
    margin-left: -3px;
    margin-right: -3px;
}
.qtyminus, .qtyplus {
    -webkit-appearance: none;
    border-radius: 0;
    display: inline-block;
    height: 25px;
    width: 20px;
    vertical-align: middle;
    cursor: pointer;
    box-shadow: none;
    border: solid 1px #ccc;
    padding: 0;
    font-size: 20px;
    background: #EEEEEE;
}

Sticky sidebar 的作法

<main>
<div id="content">文字</div>
<aside id="aside">選單</div>
<main>


#content
#aside
可以更名

參考網站
http://spoiledmilk.com/blog/sticky-sidebar/

另一種做法
http://abgne.tw/jquery/jquery-plugins/sticky-sidebar.html

Bootstrap dropdown menu don't work in IE8, 下拉選單在IE8出不來

解決方法:
加上filter:none !important;

.navbar-inverse .nav li.dropdown.open > .dropdown-toggle,
.navbar-inverse .nav li.dropdown.active > .dropdown-toggle,
.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle,
.nav,
.navbar,
.navbar-inverse .navbar-inner {
filter:none!important;
background-image: none;
}

參考網址:https://github.com/twbs/bootstrap/issues/6548

h1 margin-top 會影響到父層DIV 產生多餘的 margin-top

h1 margin-top 會影響到父層DIV 產生多餘的 margin-top

HTML

<div class="parent"> 

<h1>HI HI HI</h1> 

</div>

css

.parent{margin:0;}
h1{margin: 50px auto; }

解決方案
在父層div加上overflow:auto

.parent{margin:0; overflow:auto;}

參考來源
http://stackoverflow.com/questions/20689575/css-margin-top-of-h1-affects-parents-margin

owlcarousel 100%高的用法

1. 先去GITHUB 下載 owlcarousel 2.0新版
https://github.com/OwlCarousel2/OwlCarousel2

2. 把CSS放到html裡面
CSS 放到<head>裡面

<link rel="stylesheet" href="dist/owlcarousel/owl.carousel.min.css">

<link rel="stylesheet" href="dist/owlcarousel/owl.theme.default.min.css">

3. JS 放到<body>最下面，記得要先引用jquery

<!-- jQuery -->
<script src="//code.jquery.com/jquery.js"></script>

<!--貓頭鷹跑馬燈的JS-->
<script src="dist/owlcarousel/owl.carousel.min.js"></script>

<!--啟用貓頭鷹-->
<script>
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
items:1
})
</script>

4. html 我用背景的跑馬燈

<div class="owl-carousel">
    <div class="item" style="background-image: url(img/b1.jpg);"><h4>1</h4></div>
    <div class="item" style="background-image: url(img/b2.jpg);"><h4>2</h4></div>
</div>

5. 100高的設定 100% height CSS 設定

html,body{height: 100%;}
body{min-height:100%;}
.owl-carousel{height: 100%;}
.owl-carousel .owl-stage-outer{height: 100%;}
.owl-stage{height: 100%;}
.owl-item {height: 100%;}
.owl-item .item{height: 100%; background-size: cover;background-position: center center;}