Cara menggunakan OOFSET pada JavaScript

Question

11/07/2015 Maykhel David 2421 Website

Hallo teman-teman dumet school, pada artikel sebelumnya saya sudah memberikan satu trik html css yaitu Menggunakan Property Justify-content Pada CSS3,. Sekarang saya akan memberikan trik css lagi nih, trik kali ini tentang cara menggunakan property outline dan outline offset pada css 3
.

Outline sendiri fungsinya sama dengan border baik cara penulisan dan hasil tampilannya, namun outline sendiri memiliki tambahan property pendukung seperti outline-offset. Apa fungsi outline-offset? Offset sendiri memiliki melompati atau melewati bagian yang ada sebelumnya. Jika masih penasaran bisa langsung lihat demo dan sorce kode berikut.

Pada demo diatas ada 2 warna garis, merah = outline, dan biru = border.

Out line diatas memiliki tambahan property outline-offset:15px yang berarti memiliki jarak sebesar 15 pixel dari border.

Nahh. demikian artikel tentang menggunakan property outline dan outline offset pada css 3. untuk kalian yang masih penasaran silahkan lakukan banyak eksperimen

. Semoga bermanfaat.

No data.

Pada kesempatan kali ini saya akan menjelaskan tentang CaraPenggunaan Offset Pada Kolom Bootstrap, siapa yang tidak kenal dengan bootstrap, framework ini sangat mudah untuk di pelajari baik mudahnya informasi tentang dokumentasi dan forum forum yang sudah banyak tentang bootstrap, nah pada kali ini saya ingin membahas offset pada bootstrap, apa itu offset ?

offset adalah cara mendorong sebuah kolom agak kekanan sesuai dengan grid yang di tentukan, saya kasih contoh seperti ini, ketika saya ingin menempatkan .col-md-6 berada di tengah tengah pada tampilan monitor, maka saya akan menggunakan col-md-offset-3 didalam .col-md-6 contohnya seperti ini ..

Sebelum di offset :

Sesudah di offset

Ingat ! ofsset kolom harus sesuai dengan penempatan pada ukuran pertama, seperti teman teman menggunakan .col-md-6 maka offsetnya pun harus menggunakan md tidak di anjurkan menggunakan selain yang digunakan oleh teman teman walupun akan tetap jalan jika menggunakan yg lain tapi sangat dianjurkan untuk menggunakan kolom yang sama , Dan ini adalah baris programmnya :

<div class="container">
			<div class="row">
				<div class="col-md-6 col-md-offset-3">
					<div class="panel panel-primary">
						<div class="panel-heading"> Dengan Offset</div>
						<div class="panel-body">
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, quidem quam harum vitae numquam minus sequi necessitatibus rerum, ratione eos fugiat amet eaque, perferendis quibusdam nemo nulla doloribus at dignissimos.</p>
						</div>
					</div>
				</div>
			</div>
		</div>

cukup jelaskan bukan? sekian tutorial tentang CaraPenggunaan Offset Pada Kolom Bootstrap, sampai bertemu diartikel selanjutnya dan sampai jumpa.

#KeepLearn

#IsmetMA

Saya ingin menggunakan metode Affix yang dijelaskan dalam dokumentasi Bootstraps ( http://getbootstrap.com/javascript/#affix ), namun navbar yang ingin saya perbaiki ke atas halaman setelah digulirkan ke sana. dapat memiliki nilai offset yang berbeda tergantung pada konten di atasnya.

Berikut ini contoh navbar:

<div class="navbar navbar-default" data-spy="affix" data-offset-top="200">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Link</a></li>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
  </ul>
</div>

Seperti yang Anda lihat, data-offset-top saat ini ditetapkan pada 200. Ini berfungsi baik jika konten di atas adalah 200px tinggi, tetapi konten di atas dinamis dan tinggi di atas navbar ini tidak selalu sama. Bagaimana saya bisa membuat vale untuk data-offset-top menjadi dinamis?

Saya kira saya harus menggunakan cara javascript untuk melakukannya tetapi saya yakin.

Anda bisa menggunakan jQuery untuk mendapatkan ketinggian konten dinamis di atas navbar. Sebagai contoh:

$('#nav').affix({
      offset: {
        top: $('header').height()
      }
});

Demo yang berfungsi: http://bootply.com/69848

Dalam beberapa kasus, offset.bottom juga harus dihitung untuk menentukan kapan "un-imbuhkan" elemen. Berikut adalah contoh imbuhan bawah

Saya benar-benar frustrasi dengan cara ini bekerja, setiap kali melakukan perhitungan kustom dan membangun offset dari ketinggian elemen di atas imbuhan yang diinginkan.

Inilah imbuhan terbaik.

Affix boostrap normal tidak memperhitungkan item posisi offset alami, Anda harus memasukkannya secara manual sebagai atribut. Ini menangani hal itu, dan memperhitungkan perubahan atas offset pada ukuran jendela.

var $attribute = $('[data-smart-affix]');
$attribute.each(function(){
  $(this).affix({
    offset: {
      top: $(this).offset().top,
    }
  })
})
$(window).on("resize", function(){
  $attribute.each(function(){
    $(this).data('bs.affix').options.offset.top = $(this).offset().top
  })
})

Saya juga memposting ini pada review kode .

Jangan lupa untuk menambahkan atribut data-smart-affix ke elemen imbuhan Anda

Coba kode contoh ini: https://jsfiddle.net/NabiKAZ/qyrauogw/
(Dalam sampel ini, ketinggian bagian merah mungkin 100px atau 200px atau 300px dalam lebar perbedaan jendela, Jadi perlu perbedaan data-offset-top ketika digulir.)

Data-smart-imbuhan ThomasReggi tidak bekerja untuk saya dalam beberapa kasus sudut (ketika mengubah ukuran dokumen, atau ketika kolom yang ditempelkan terlalu tinggi). Tapi itu memberi saya ide sederhana: Tambahkan elemen kosong sebelum konten yang ditempelkan, dan gunakan itu untuk mendapatkan offset. Bekerja dengan baik saat diubah ukurannya.

Sementara saya berada di itu, saya juga mengatur lebar elemen menjadi lebar alami di induk aslinya. Inilah solusi saya:

$('[data-affix-after]').each( function() {
  var elem = $(this);
  var parent_panel = elem.parent();
  var prev = $( elem.data('affix-after') );

  if( prev.length != 1 ) {
    /* Create a new element immediately before. */
    prev = elem.before( '<div></div>' ).prev();
  }

  var resizeFn = function() {
      /* Set the width to it's natural width in the parent. */
      var sideBarNavWidth = parent_panel.width()
          - parseInt(elem.css('paddingLeft'))
          - parseInt(elem.css('paddingRight'))
          - parseInt(elem.css('marginLeft'))
          - parseInt(elem.css('marginRight'))
          - parseInt(elem.css('borderLeftWidth'))
          - parseInt(elem.css('borderRightWidth'));
      elem.css('width', sideBarNavWidth);

      elem.affix({
          offset: {
              top: prev.offset().top + prev.outerHeight(true),
              bottom: $('body>footer').outerHeight(true)
          }
      });
  };

  resizeFn();
  $(window).resize(resizeFn);
});

HTML yang menyertainya adalah:

<div id='before-affix'></div><!-- leave this empty -->
<div data-affix-after='#before-affix'>
    Put content to affix here.
</div>

atau

<div data-affix-after='#create'><!-- any ID that doesn't exist -->
    Put content to affix here.
</div>

CSS yang dibutuhkan adalah:

.affix { top: 0px },
.affix-bottom { position: absolute; }

Jika Anda ingin menonaktifkan afiks (mis. Ketika kolom kanan ditumpuk), maka gunakan CSS:

.affix, .affix-bottom { position: static; }

di dalam kueri media yang sesuai.

GI

Saya sarankan Anda untuk menambahkan wrapper di sekitar div yang ditempelkan - untuk menghindari "scroll jump" dengan navbar yang ditempel. Thomas memposting solusi yang bagus, tetapi tidak termasuk ruang colapsed setelah imbuhan dan itu tidak berfungsi dalam versi 2.x boostrap yang harus saya gunakan. Jadi saya memutuskan untuk menulis implementasi baru imbuhan yang lengkap. Tidak perlu boostrap, hanya jquery. Ini javascript pertama saya, jadi mohon ampun :) tapi mungkin itu akan membantu seseorang. Itu selalu baik untuk memiliki solusi tanpa bootstrap

function myaffix() {

var affixoffset = $('.navbar').offset().top

$('#nav-wrapper').height($(".navbar").height());

$(window).scroll(function () {

    if ($(window).scrollTop() <= affixoffset) {
        $('.navbar').removeClass('affix');
    } else {
        $('.navbar').addClass('affix');
    }
});

};

$(document).ready(function () {

   myaffix();

   $(window).on("resize", function () {
       myaffix();
   });

});

Anda dapat menemukan contoh di sini: http://jsfiddle.net/3ss7fk92/

Saya mengalami banyak masalah dengan ini sebelumnya, dan untuk beberapa alasan saya tidak bisa mendapatkan solusi yang disarankan orang lain untuk bekerja. Saya relatif baru di Bootstrap dan JQuery, jadi saya mungkin melakukan sesuatu yang tidak beres. Terlepas dari itu, saya menemukan solusi yang bekerja dengan sangat baik, meskipun tidak sepenuhnya menggunakan fungsi imbuhan seperti yang Bootstrap maksudkan. Saya tetap mempertahankan #thisElement.affix {top: desiredFixedPosition;} CSS saya, tetapi menyingkirkan atribut data-spy dan data-offset-top dari # tag HTML thisElement. Saya kemudian mengkodekan ini dengan keras di JQuery:

var newAffix = function() {
    if($("otherElementsAboveThisElement").height() <= $(window).scrollTop()) {
        $("#thisElement").addClass("affix");
    } else {
        $("#thisElement").removeClass("affix");
    }
}

$(document).ready(function() {
    $(window).resize(newAffix);
    $(window).scroll(newAffix);
}

Sejauh yang saya uji, ini berfungsi terlepas dari seberapa besar Anda mengubah ukuran halaman atau gulir, dan jika Anda menjadi kreatif dengan bagaimana Anda menyebutnya dalam fungsi $(document).ready() Anda bahkan dapat memiliki menu tetap di posisi yang tepat selama animasi tinggi. Seperti yang disebutkan, ini secara teknis tidak sepenuhnya "Bootstrap disetujui" solusi, tetapi cukup terintegrasi ke dalam situs Bootstrap yang seharusnya bekerja untuk beberapa :)

Skelly di atas benar dan tidak ada cara yang lebih baik untuk melakukannya. Satu-satunya solusi yang mungkin dengan bootstrap "asli" adalah melampirkan opsi imbuhan dengan panggilan JavaScript (seperti yang disebutkan di atas di https://stackoverflow.com/a/18702972/2546679 ).

Terutama tidak mungkin untuk menggunakan atribut data-offset untuk mencapai efek yang sama (bahkan jika ini akan jauh lebih nyaman, dan bahkan jika dokumentasi untuk Affix di http://getbootstrap.com/2.3.2 /javascript.html#affix memunculkan harapan orang bisa melakukannya).

Jadi orang bisa menulis

data-offset='{"top":42}'

tetapi satu tidak diizinkan untuk menulis mis .:

data-offset='{"top":$("#banner").height()}'

Alasannya adalah bahwa atribut data diuraikan melalui API .data() JQuery yang hanya memungkinkan nilai JSON murni untuk diuraikan, lihat https://api.jquery.com/data/ .

Thnx ThomasReggi untuk sebuah ide. Tetapi mungkin lebih tepat untuk menulis:

$(this).data('bs.affix').options.offset.top = $(this).offset().top

untuk orang-orang seperti saya yang membutuhkan nilai terbawah juga yang akan menulis secara analog.

BTW juga saya pikir membungkusnya dalam dekorator berdasarkan setTimeout (agak seperti debounce).

kode javascript

Cara menggunakan OOFSET pada JavaScript

Pos Terkait

Periklanan

BERITA TERKINI

Toplist Popular

Periklanan

Terpopuler

Token Data

Periklanan

Tentang Kami

Legal

Dukungan

Social