javascript - জাভাস্ক্রিপ্ট বাংলা বই




নির্দিষ্ট হেডারের জন্য সামঞ্জস্য করতে একটি এইচটিএমএল অ্যাঙ্কর অফসেট করা (19)

এই প্রশ্নটি ইতিমধ্যে একটি উত্তর আছে:

আমি আমার নোংরা কাজ উপায় পরিষ্কার করার চেষ্টা করছি। আমার পৃষ্ঠার উপরের অংশে একটি শিরোনাম রয়েছে, তাই যখন আপনি পৃষ্ঠাটিতে অন্য কোথাও একটি নোঙ্গর লিঙ্ক করেন, পৃষ্ঠাটি উপরের পৃষ্ঠার উপরে অ্যাংকারটি সংযুক্ত করে, নির্দিষ্ট শিরোনামের পিছনে সামগ্রীটি ছেড়ে দেয় (আমি আশা করি এটা বোধগম্য). হেডারের উচ্চতা থেকে 25px দ্বারা নোঙ্গর অফসেট করার জন্য আমার একটি উপায় দরকার। আমি এইচটিএমএল বা সিএসএস পছন্দ করি, তবে জাভাস্ক্রিপ্টও গ্রহণযোগ্য হবে।


আপনি js ছাড়া এবং এইচটিএমএল পরিবর্তন ছাড়া এটি করতে পারেন। এটা শুধুমাত্র CSS-।

a[id]:before {
    content:"";
    display:block;
    height:50px;
    margin:-30px 0 0;
}

এটি একটি আইডি দিয়ে প্রতিটি ট্যাগের আগে একটি ছদ্ম-উপাদান যুক্ত করবে। আপনার শিরোলেখ উচ্চতা মেলে মান সামঞ্জস্য করুন।


@ আলেকজান্ডারভিইন এর সমাধান আমার জন্য WebKit ব্রাউজারে দুর্দান্ত কাজ করে।

আমি অতিরিক্তভাবে ব্যবহার করতে হয়েছিল : টার্গেট ছদ্ম-শ্রেণী যা FF , Opera এবং IE9 প্যাডিং সামঞ্জস্য করতে নির্বাচিত অ্যাঙ্করের স্টাইল প্রয়োগ করে:

a:target {
  padding-top: 40px
}

মনে রাখবেন যে এই শৈলীটি Chrome / Safari জন্য নয় তাই আপনাকে সম্ভবত CSS-hacks, conditional comments ইত্যাদি ব্যবহার করতে হবে।

এছাড়াও আমি লক্ষ্য করতে চাই যে আলেকজান্ডারের সমাধানটি লক্ষ্য করে যে লক্ষ্যবস্তুটি inline । আপনি যদি লিঙ্কটি না চান তবে আপনি কেবল display সম্পত্তি পরিবর্তন করতে পারেন:

<div id="myanchor" style="display: inline">
   <h1 style="padding-top: 40px; margin-top: -40px;">My anchor</h1>
</div>

@ ময়েফুজের পরামর্শ অনুসারে, এটি সিএসএস দিয়ে অর্জন করা যেতে পারে। যে বিষয়টি আমি দৌড়েছি (যা আমি অবাক হয়েছি তা আমি আলোচনা করে দেখিনি) হল প্যাডিংয়ের সাথে পূর্ববর্তী উপাদানগুলিকে ওভারল্যাপ করার কৌশল বা একটি স্বচ্ছ সীমানা হভারকে আটকায় এবং সেগুলির নীচে নিচের পদক্ষেপগুলিতে ক্লিক করুন কারণ নিম্নোক্ত একটিটি Z-অর্ডার।

আমি পাওয়া সবচেয়ে ভাল ফিক্স z-index: 1 তে একটি বিভাগে বিভাগের সামগ্রী স্থাপন করা ছিল z-index: 1 :

// Apply to elements that serve as anchors
.offset-anchor {
  border-top: 75px solid transparent;
  margin: -75px 0 0;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
}

// Because offset-anchor causes sections to overlap the bottom of previous ones,
// we need to put content higher so links aren't blocked by the transparent border.
.container {
  position: relative;
  z-index: 1;
}

FWIW এটি আমার জন্য কাজ করেছে:

*[id]:before { 
  display: block; 
  content: " "; 
  margin-top: -75px; 
  height: 75px; 
  visibility: hidden; 
}

আপনার নোঙ্গর একটি টেবিল উপাদান বা একটি টেবিল (সারি বা কোষ) মধ্যে যদি উপরের পদ্ধতি খুব ভাল কাজ করে না।

আমাকে জাভাস্ক্রিপ্ট ব্যবহার করতে হবে এবং উইন্ডো hashchange ইভেন্টে hashchange হবে ( demo ):

function moveUnderNav() {
    var $el, h = window.location.hash;
    if (h) {
        $el = $(h);
        if ($el.length && $el.closest('table').length) {
            $('body').scrollTop( $el.closest('table, tr').position().top - 26 );
        }
    }
}

$(window)
    .load(function () {
        moveUnderNav();
    })
    .on('hashchange', function () {
        moveUnderNav();
    });

* দ্রষ্টব্য: hashchange ইভেন্টটি সমস্ত ব্রাউজারে উপলব্ধ নয়।


আপনি a[name]:not([href]) CSS সিলেক্টর ব্যবহার করে a[name]:not([href]) আইডি ছাড়াই এটি অর্জন করতে পারেন। এটি কেবল একটি নামের লিঙ্কগুলির সন্ধান করে এবং কোনও href যেমন <a name="anc1"></a>

একটি উদাহরণ নিয়ম হতে পারে:

a[name]:not([href]){
    display: block;    
    position: relative;     
    top: -100px;
    visibility: hidden;
}

আপনি শুধু কোন জাভাস্ক্রিপ্ট ছাড়া সিএসএস ব্যবহার করতে পারে।

আপনার নোঙ্গর একটি বর্গ দিন:

<a class="anchor" id="top"></a>

তারপরে আপনি নোঙ্গরটিকে একটি ব্লক উপাদান তৈরি করে এবং এটি অপেক্ষাকৃত পজিশনিং করে এটি পৃষ্ঠাতে আসলে যেখানে প্রদর্শিত হয় তার তুলনায় উচ্চতর বা কম। -250 পিএক্স 250px আপ নোঙ্গর অবস্থান করবে

a.anchor {
    display: block;
    position: relative;
    top: -250px;
    visibility: hidden;
}

আমার সমাধান টার্গেট এবং আমাদের সিএমএস জন্য নির্বাচক আগে। অন্যান্য কৌশল নোঙ্গর টেক্সট জন্য অ্যাকাউন্ট না। আপনি প্রয়োজন অফসেট উচ্চতা এবং নেতিবাচক মার্জিন সামঞ্জস্য করুন ...

:target:before {
    content: "";
    display: inline-block;
    height: 180px;
    margin: -180px 0 0;
}

আমি TYPO3 ওয়েবসাইটে এই সমস্যাটি সম্মুখীন করছি, যেখানে সমস্ত "সামগ্রী উপাদানগুলি" এমন কিছু দিয়ে আবৃত হয়:

<div id="c1234" class="contentElement">...</div>

এবং আমি রেন্ডারিং পরিবর্তিত তাই এটি এই মত renders:

<div id="c1234" class="anchor"></div>
<div class="contentElement">...</div>

এবং এই সিএসএস:

.anchor{
    position: relative;
    top: -50px;
}

নির্দিষ্ট টপবার 40px উচ্চ, এখন নোঙ্গর আবার কাজ এবং শীর্ষ বারের অধীনে 10px শুরু।

এই কৌশলটি শুধুমাত্র অপূর্ণতা আপনি আর ব্যবহার করতে পারেন :target


আমি এই একই সমস্যা মধ্যে দৌড়ে এবং ক্লিক ইভেন্ট পরিচালনার শেষ পর্যন্ত ম্যানুয়াল, যেমন:

$('#mynav a').click(() ->
  $('html, body').animate({
      scrollTop: $($(this).attr('href')).offset().top - 40
  }, 200
  return false
)

স্ক্রল অ্যানিমেশন ঐচ্ছিক, অবশ্যই।


আমি পাশাপাশি এই একটি সমাধান খুঁজছেন ছিল। আমার ক্ষেত্রে এটা বেশ সহজ ছিল।

আমার সব লিঙ্ক সহ একটি তালিকা মেনু আছে:

<ul>
<li><a href="#one">one</a></li>
<li><a href="#two">two</a></li>
<li><a href="#three">three</a></li>
<li><a href="#four">four</a></li>
</ul>

এবং নীচের শিরোনাম যেখানে এটি যেতে হবে।

<h3>one</h3>
<p>text here</p>

<h3>two</h3>
<p>text here</p>

<h3>three</h3>
<p>text here</p>

<h3>four</h3>
<p>text here</p>

এখন আমার পৃষ্ঠার শীর্ষে একটি নির্দিষ্ট মেনু আছে তাই আমি এটি আমার ট্যাগে যেতে পারব না কারণ এটি মেনুটির পিছনে থাকবে।

পরিবর্তে আমি সঠিক আইডি দিয়ে আমার ট্যাগের ভিতরে একটি স্প্যান ট্যাগ রাখি।

<h3><span id="one"></span>one</h3>

এখন সঠিকভাবে তাদের অবস্থান করতে CSS 2 লাইন ব্যবহার করুন।

h3{ position:relative; }
h3 span{ position:absolute; top:-200px;}

আপনার নির্দিষ্ট শিরোনামের উচ্চতা (বা আরও) এর সাথে মেলে মান শীর্ষ পরিবর্তন করুন। এখন আমি এই অন্যান্য উপাদানের সাথে কাজ করবে অনুমান।


আলেকজান্ডার সাভিন দ্বারা অনুপ্রাণিত বিশুদ্ধ CSS সমাধান:

a[name] {
  padding-top: 40px;
  margin-top: -40px;
  display: inline-block; /* required for webkit browsers */
}

টার্গেটটি এখনও স্ক্রীন বন্ধ থাকলে বিকল্পভাবে আপনি নিম্নলিখিতগুলি যুক্ত করতে চাইতে পারেন:

  vertical-align: top;

একই সমস্যার জন্য, আমি একটি সহজ সমাধান ব্যবহার করেছি: প্রতিটি নোঙ্গরতে 40px এর প্যাডিং-শীর্ষ রাখুন।


এটি পূর্বের উত্তরগুলি থেকে অনেক উপাদান গ্রহণ করে এবং একটি ক্ষুদ্র (194 বাইট minified) বেনামী jQuery ফাংশন মধ্যে একত্রিত করে। আপনার মেনু বা ব্লকিং উপাদান উচ্চতা জন্য fixedElementHeight সামঞ্জস্য করুন।

    (function($, window) {
        var adjustAnchor = function() {

            var $anchor = $(':target'),
                    fixedElementHeight = 100;

            if ($anchor.length > 0) {

                $('html, body')
                    .stop()
                    .animate({
                        scrollTop: $anchor.offset().top - fixedElementHeight
                    }, 200);

            }

        };

        $(window).on('hashchange load', function() {
            adjustAnchor();
        });

    })(jQuery, window);

যদি আপনি অ্যানিমেশন পছন্দ না, প্রতিস্থাপন

$('html, body')
     .stop()
     .animate({
         scrollTop: $anchor.offset().top - fixedElementHeight
     }, 200);

সঙ্গে:

window.scrollTo(0, $anchor.offset().top - fixedElementHeight);

উল্লিখিত সংস্করণ:

 !function(o,n){var t=function(){var n=o(":target"),t=100;n.length>0&&o("html, body").stop().animate({scrollTop:n.offset().top-t},200)};o(n).on("hashchange load",function(){t()})}(jQuery,window);

জিয়াভের উত্তর যোগ করা (আলেকজান্ডার সাভিনের ধন্যবাদ নিয়ে), আমাকে পুরানো স্কুল <a name="...">...</a> ব্যবহার করতে হবে যেমনটি আমরা <div id="...">...</div> ব্যবহার করছি <div id="...">...</div> আমাদের কোডে আরেকটি উদ্দেশ্যে। ডিসপ্লে ব্যবহার করে আমার কিছু ডিসপ্লে সমস্যা ছিল display: inline-block - প্রতিটি <p> উপাদানটির প্রথম লাইন সামান্য ডান-ইন্ডেন্ট হওয়া (ওয়েবকিট এবং ফায়ারফক্স ব্রাউজার উভয়ই) চালু করা হয়েছিল। আমি অন্যান্য display মান চেষ্টা এবং display: table-caption চেষ্টা শেষ display: table-caption আমার জন্য পুরোপুরি কাজ করে।

.anchor {
  padding-top: 60px;
  margin-top: -60px;
  display: table-caption;
}

দুর্ভাগ্যবশত আমি উপরের সব সমাধান বাস্তবায়নের পরেও একই রকম সমস্যার সম্মুখীন হয়েছি, আমি নিম্নলিখিত উপসংহারে এসেছি।

  1. আমার অভ্যন্তরীণ উপাদানের একটি ভঙ্গুর সিএসএস গঠন এবং একটি অবস্থান আপেক্ষিক / পরম খেলা বাস্তবায়ন, সম্পূর্ণরূপে পাতা নকশা ভঙ্গ ছিল।
  2. সিএসএস আমার দৃঢ় মামলা নয়।

আমি এই সরল স্ক্রোলিং জেএস লিখেছিলাম, যা হেডসারের কারণে অফসেটের জন্য অ্যাকাউন্ট তৈরি করে এবং 125 পিক্সেল নীচের ডিভিটিকে স্থানান্তরিত করে। আপনি ফিট দেখতে হিসাবে এটি ব্যবহার করুন।

এইচটিএমএল

<div id="#anchor"></div> <!-- #anchor here is the anchor tag which is on your URL -->

জাভাস্ক্রিপ্ট

 $(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
&& location.hostname == this.hostname) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 125 //offsets for fixed header
        }, 1000);
        return false;
      }
    }
  });
  //Executed on page load with URL containing an anchor tag.
  if($(location.href.split("#")[1])) {
      var target = $('#'+location.href.split("#")[1]);
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 125 //offset height of header here too.
        }, 1000);
        return false;
      }
    }
});

এখানে একটি বাস্তব বাস্তবায়ন দেখুন।


পৃষ্ঠার অবশিষ্ট অংশটি (সম্পূর্ণ পৃষ্ঠার শরীর স্ক্রোলযোগ্য হওয়ার সাথে সাথে) স্থির-অবস্থানের নয়বারের পরিবর্তে, স্ট্যাটিক নেভিবারের সাথে একটি স্ক্রোলযোগ্য শরীরের পরিবর্তে এবং তারপরে পৃষ্ঠাতে বিষয়বস্তু থাকা বিবেচনা করুন। নিচে একেবারে অবস্থান স্ক্রোলযোগ্য div।

যে, এই মত এইচটিএমএল আছে ...

<div class="static-navbar">NAVBAR</div>
<div class="scrollable-content">
  <p>Bla bla bla</p>
  <p>Yadda yadda yadda</p>
  <p>Mary had a little lamb</p>
  <h2 id="stuff-i-want-to-link-to">Stuff</h2>
  <p>More nonsense</p>
</div>

... এবং CSS এর মত

.static-navbar {
  height: 100px;
}
.scrollable-content {
  position: absolute;
  top: 100px;
  bottom: 0;
  overflow-y: scroll;
  width: 100%;
}

এটি একটি সহজবোধ্য, অ-হ্যাকি উপায়ে পছন্দসই ফলাফল অর্জন করে। উপরের এবং এর মধ্যে কয়েকটি চতুর সিএসএস হ্যাকগুলির মধ্যে আচরণের মধ্যে কেবলমাত্র পার্থক্য হল যে স্ক্রলবার (ব্রাউজারগুলিতে একটি রেন্ডার করা) পৃষ্ঠাটির সমগ্র উচ্চতার তুলনায় সামগ্রী বিভাগে সংযুক্ত করা হবে। আপনি এই ইচ্ছাকৃত বিবেচনা করতে পারে না বা হতে পারে।

এখানে একটি JSFiddle কর্মে এই প্রদর্শন।


লিঙ্কযুক্ত আইডিগুলির সাথে লুকানো স্প্যান ট্যাগগুলি সম্পর্কে যা Navbar এর উচ্চতা প্রদান করে:

#head1 {
  padding-top: 60px;
  height: 0px;
  visibility: hidden;
}


<span class="head1">somecontent</span>
<h5 id="headline1">This Headline is not obscured</h5>

বেহালার http://jsfiddle.net/N6f2f/7


এখানে সমাধান যে আমরা আমাদের সাইটে ব্যবহার। headerHeightআপনার শিরোনাম উচ্চতা যাই হোক না কেন পরিবর্তনশীল সামঞ্জস্য করুন । js-scrollক্লিক স্ক্রোল করা উচিত যে নোঙ্গর ক্লাস যোগ করুন।

// SCROLL ON CLICK
// --------------------------------------------------------------------------
$('.js-scroll').click(function(){
    var headerHeight = 60;

    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top - headerHeight
    }, 500);
    return false;
});




offset