উইন্ডো আকারে jQuery ery

Question

আমার কাছে নিম্নলিখিত জিক্যুরি কোড রয়েছে:

$(document).ready(function () {
    var $containerHeight = $(window).height();
    if ($containerHeight <= 818) {
        $('.footer').css({
            position: 'static',
            bottom: 'auto',
            left: 'auto'
        });
    }
    if ($containerHeight > 819) {
        $('.footer').css({
            position: 'absolute',
            bottom: '3px',
            left: '0px'
        });
    }
});

একমাত্র সমস্যাটি হ'ল এটি কেবল তখনই কাজ করে যখন ব্রাউজারটি প্রথম লোড হয়, আমি containerHeightউইন্ডোটি পুনরায় আকার দেওয়ার সময়ও তা পরীক্ষা করতে চাই ?

কোন ধারনা?

Comments

$(window).resize(function(){...})

— রব ডব্লু

Answer 1

পুনরায় আকারের ইভেন্টগুলি পরিচালনা করতে jQuery, জাভাস্ক্রিপ্ট এবং CSS ব্যবহার করে এখানে একটি উদাহরণ।
(সিএসএস যদি আপনার সেরা বেট হয় তবে আপনি যদি কেবল আকার পরিবর্তন করতে জিনিসগুলিকে স্টাইলাইজ করেন (মিডিয়া ক্যোয়ারী))
http://jsfiddle.net/CoryDanielson/LAF4G/

CSS

.footer 
{
    /* default styles applied first */
}

@media screen and (min-height: 820px) /* height >= 820 px */
{
    .footer {
        position: absolute;
          bottom: 3px;
          left: 0px;
        /* more styles */
    }
}

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

window.onresize = function() {
    if (window.innerHeight >= 820) { /* ... */ }
    if (window.innerWidth <= 1280) {  /* ... */ }
}

jQuery এর

$(window).on('resize', function(){
      var win = $(this); //this = window
      if (win.height() >= 820) { /* ... */ }
      if (win.width() >= 1280) { /* ... */ }
});

আমি কীভাবে আমার পুনরায় আকার কোডটি প্রায়শই সম্পাদন করা থেকে থামিয়ে দেব !?

এটিই প্রথম সমস্যা যা আপনি যখন আকার পরিবর্তন করতে বাধ্য হবেন তখন লক্ষ্য করবেন। ব্যবহারকারী যখন ব্রাউজারটি ম্যানুয়ালি আকারে পরিবর্তন করতে থাকে তখন আকার পরিবর্তন কোডটিকে একটি লট বলা হয় এবং এটি বেশ ঝাঁকুনির মতো অনুভব করতে পারে।

আপনার পুনরায় আকার কোডটি কতবার বলা হয় তা সীমাবদ্ধ করতে, আপনি আন্ডারস্কোর এবং লোড্যাশ লাইব্রেরি থেকে ডিবাউন বা থ্রোটল পদ্ধতি ব্যবহার করতে পারেন ।

• debounceকেবলমাত্র পুনরায় আকারের ইভেন্টের পরে আপনার পুনরায় আকারের কোড এক্স সংখ্যাটি মিলি সেকেন্ডের মধ্যে কার্যকর করা হবে। এটি তখন আদর্শ যখন আপনি ব্রাউজারের আকার পরিবর্তন করার পরে কেবল একবার আপনার পুনরায় আকার কোডটি কল করতে চান। গ্রাফ, চার্ট এবং লেআউটগুলি আপডেট করার জন্য এটি প্রতি একক পুনরায় আকারের ইভেন্টটি আপডেট করার জন্য ব্যয়বহুল হতে পারে good
• throttleকেবলমাত্র আপনার পুনরায় আকার কোডটি প্রতি X সংখ্যক মিলিসেকেন্ডে কার্যকর করা হবে। কোডটি প্রায়শই বলা হয় এটি "থ্রোটলস"। এটি প্রায়শই পুনরায় আকারের ইভেন্টগুলির সাথে ব্যবহার করা হয় না তবে এটি সম্পর্কে সচেতন হওয়া জরুরী।

আপনার যদি আন্ডারস্কোর বা লোড্যাশ না থাকে, আপনি নিজে একটি অনুরূপ সমাধানটি নিজে প্রয়োগ করতে পারেন: জাভাস্ক্রিপ্ট / জিকুয়ারি: $ (উইন্ডো) .আরাইজ করুন কীভাবে পুনরায় আকার সম্পন্ন হওয়ার পরে গুলি চালানো?

Comments

দুর্দান্ত উত্তরের জন্য Thx; এবং ডিবাউন / থ্রোটল তথ্যের জন্য; এবং স্ব-রোল সমাধানের লিঙ্কের জন্য।

— ক্র্যাশ

Answer 2

আপনার জাভাস্ক্রিপ্টটিকে কোনও ফাংশনে সরান এবং তারপরে সেই ফাংশনটিকে উইন্ডো আকার পরিবর্তন করুন।

$(document).ready(function () {
    updateContainer();
    $(window).resize(function() {
        updateContainer();
    });
});
function updateContainer() {
    var $containerHeight = $(window).height();
    if ($containerHeight <= 818) {
        $('.footer').css({
            position: 'static',
            bottom: 'auto',
            left: 'auto'
        });
    }
    if ($containerHeight > 819) {
        $('.footer').css({
            position: 'absolute',
            bottom: '3px',
            left: '0px'
        });
    }
}

Answer 3

jQuery এর একটি আকার পরিবর্তন ইভেন্ট হ্যান্ডলার রয়েছে যা আপনি উইন্ডোতে .resize () এ সংযুক্ত করতে পারেন । সুতরাং, যদি আপনি রাখা$(window).resize(function(){/* YOUR CODE HERE */}) তবে প্রতিবার উইন্ডোটির আকার পরিবর্তন করার সাথে সাথে আপনার কোডটি চালানো হবে।

সুতরাং, আপনি যা চান তা হ'ল প্রথম পৃষ্ঠার লোডের পরে কোডটি চালানো এবং যখনই উইন্ডোটি পুনরায় আকার দেওয়া হয়। সুতরাং আপনার নিজের কোডটিকে কোডটি নিজের মধ্যে টানতে হবে এবং উভয় ক্ষেত্রেই সেই ফাংশনটি চালানো উচিত।

// This function positions the footer based on window size
function positionFooter(){
    var $containerHeight = $(window).height();
    if ($containerHeight <= 818) {
        $('.footer').css({
            position: 'static',
            bottom: 'auto',
            left: 'auto'
        });
    }
    else {
        $('.footer').css({
            position: 'absolute',
            bottom: '3px',
            left: '0px'
        });
    } 
}

$(document).ready(function () {
    positionFooter();//run when page first loads
});

$(window).resize(function () {
    positionFooter();//run on every window resize
});

দেখুন: ক্রস ব্রাউজার উইন্ডো পুনরায় আকার দিন ইভেন্ট - জাভাস্ক্রিপ্ট / jQuery

Comments

... বা আপনি দস্তাবেজ প্রস্তুত হ্যান্ডলার হিসাবে আবার লিখতে পারেন$(function() { $(window).resize(positionFooter).triggerHandler('resize'); });

— WynandB

Answer 4

এই সমাধান চেষ্টা করুন। পৃষ্ঠাটি লোড হয়ে গেলে কেবল তখনই আগুন জ্বলে ওঠে এবং তারপরে উইন্ডোর পুনরায় আকারের পূর্বনির্ধারিত সময়ে resizeDelay।

$(document).ready(function()
{   
   var resizeDelay = 200;
   var doResize = true;
   var resizer = function () {
      if (doResize) {

        //your code that needs to be executed goes here

        doResize = false;
      }
    };
    var resizerInterval = setInterval(resizer, resizeDelay);
    resizer();

    $(window).resize(function() {
      doResize = true;
    });
});

Comments

এটা আমার জন্য কাজ করে, আপনাকে ধন্যবাদ। তবে আপনি কি দয়া করে ব্যাখ্যা করতে পারেন যে আপনার "var resizer = ফাংশন ()" আসলে বরখাস্ত হয় কেন? আমার বোঝার মধ্যে আপনি কেবল $ (উইন্ডো) .resize ইভেন্টে পরিবর্তনশীল doResize সেট করেছেন তবে নিজেই ফাংশনটি কল করবেন না।

— আলেকজান্ডার

ফাংশনে একটি কল রয়েছে: resizer();বিরতি ঠিক করার ঠিক পরে। এবং doResizeসেটটি সেট করা হওয়ার কারণে true, নথি প্রস্তুত হয়ে গেলে এটি বরখাস্ত হয়ে যায়।

— ভিট্রো

হ্যাঁ, আমার জন্য এটি বোধগম্য যে ফাংশনটি ডকুমেন্টের সাথে সম্পাদিত হয়েছে ready প্রস্তুতি নিয়ে। তবে আমি বুঝতে পারি না যে পুনরায় আকার দেওয়ার পরে কেন ফাংশনটি কার্যকর করা হয়, কারণ আমার বোঝার মধ্যে কেবল পরিবর্তনশীল সেট করা আছে। আমার জন্য এটি তখনই বোধগম্য হবে যদি ডকুমেন্টটির আকার পরিবর্তন করার পরে পুনরায় বরখাস্ত করা হয়, যাতে ফাংশনটি আবার শুরু হয় (তবে এটি হওয়া উচিত নয়?)।

— আলেকজান্ডার

ইন্টারভাল সেট রয়েছে যা ভেরিয়েবল সেট করা resizeDelayথাকলে প্রতিবার বারবার চেক করে । এবং সেট করা হয় । সুতরাং আপনি উইন্ডোটি পুনরায় আকার দিন, যা পরবর্তী চেক ফাংশনটিতে সেট করা হয় এবং তার সময় সেট হয় । doResizetruedoResizetrue$(window).resize()doResizetrueresizer()

— ভিট্রো

Answer 5

আপনার বেনামে ফাংশনটির একটি নাম দিন, তারপরে:

$(window).on("resize", doResize);

http://api.jquery.com/category/events/

Answer 6

এটি ব্যবহার করতে পারেন

        function getWindowSize()
            {
                var fontSize = parseInt($("body").css("fontSize"), 10);
                var h = ($(window).height() / fontSize).toFixed(4);
                var w = ($(window).width() / fontSize).toFixed(4);              
                var size = {
                      "height": h
                     ,"width": w
                };
                return size;
            }
        function startResizeObserver()
            {
                //---------------------
                var colFunc = {
                     "f10" : function(){ alert(10); }
                    ,"f50" : function(){ alert(50); }
                    ,"f100" : function(){ alert(100); }
                    ,"f500" : function(){ alert(500); }
                    ,"f1000" : function(){ alert(1000);}
                };
                //---------------------
                $(window).resize(function() {
                    var sz = getWindowSize();
                    if(sz.width > 10){colFunc['f10']();}
                    if(sz.width > 50){colFunc['f50']();}
                    if(sz.width > 100){colFunc['f100']();}
                    if(sz.width > 500){colFunc['f500']();}
                    if(sz.width > 1000){colFunc['f1000']();}
                });
            }
        $(document).ready(function() 
            {
                startResizeObserver();
            });

Comments

কোডটি আরও কিছু কী করে তা দয়া করে ব্যাখ্যা করুন। আপনি সত্যিই খুব বেশি উত্তর দিচ্ছেন না।

— সিরিয়ালারসেনি

Answer 7

function myResizeFunction() {
  ...
}

$(function() {
  $(window).resize(myResizeFunction).trigger('resize');
});

এটি আপনার পুনরায় আকার হ্যান্ডলারটির কারণে উইন্ডো পুনরায় আকার এবং দস্তাবেজ প্রস্তুতে ট্রিগার করতে পারে। আপনি যদি .trigger('resize')পরিবর্তে পৃষ্ঠা লোডে চালাতে চান তবে অবশ্যই আপনি দস্তাবেজ প্রস্তুত হ্যান্ডলারের বাইরে আপনার আকার পরিবর্তনকারী হ্যান্ডলারটি সংযুক্ত করতে পারেন ।

আপডেট : আপনি যদি অন্য কোনও তৃতীয় পক্ষের লাইব্রেরি ব্যবহার করতে না চান তবে এখানে অন্য একটি বিকল্প রয়েছে।

এই কৌশলটি আপনার লক্ষ্য উপাদানগুলিতে একটি নির্দিষ্ট শ্রেণি যুক্ত করে যাতে আপনার কাছে কেবল সিএসএসের মাধ্যমে স্টাইলিং নিয়ন্ত্রণ করার সুবিধা রয়েছে (এবং ইনলাইন স্টাইলিং এড়ানো)।

এটিও নিশ্চিত করে যে ক্লাসটি কেবল যুক্ত বা মুছে ফেলা হবে যখন আসল প্রান্তিক বিন্দুটি ট্রিগার করা হয় এবং প্রতিটি আকারে নয়। এটি কেবলমাত্র এক দোরের পয়েন্টে চালিত হবে : যখন উচ্চতা <= 818 থেকে> 819 বা তদ্বিপরীত পরিবর্তন হবে এবং প্রতিটি অঞ্চলে একাধিকবার নয়। এটি প্রস্থের কোনও পরিবর্তন নিয়ে উদ্বিগ্ন নয় ।

function myResizeFunction() {
  var $window = $(this),
      height = Math.ceil($window.height()),
      previousHeight = $window.data('previousHeight');

  if (height !== previousHeight) {
    if (height < 819)
      previousHeight >= 819 && $('.footer').removeClass('hgte819');
    else if (!previousHeight || previousHeight < 819)
      $('.footer').addClass('hgte819');

    $window.data('previousHeight', height);
  }
}

$(function() {
  $(window).on('resize.optionalNamespace', myResizeFunction).triggerHandler('resize.optionalNamespace');
});

উদাহরণ হিসাবে, আপনার কয়েকটি সিএসএস বিধি হিসাবে নিম্নলিখিতগুলি থাকতে পারে:

.footer {
  bottom: auto;
  left: auto;
  position: static;
}

.footer.hgte819 {
  bottom: 3px;
  left: 0;
  position: absolute;
}

Answer 8

এটা ব্যবহার কর:

window.onresize = function(event) {
    ...
}

Answer 9

ব্রাউজারের আকার পরিবর্তন করা হলে আপনি নিজের কোড resizeব্যবহার করে বাইন্ডিং .resize()চালাতে পারেন । elseআপনার ifবিবৃতিতে আপনাকে একটি শর্তও যুক্ত করতে হবে যাতে আপনার সিএসএসের মানগুলি নতুন সেট করার পরিবর্তে পুরানো এবং নতুনকে টগল করে।