jquery $ (উইন্ডো)। প্রস্থ () এবং $ (উইন্ডো) he


105

আমি jQuery যে বারবার আহ্বান ব্যবহার করে কোন সাইট লিখছি $(window).width()এবং $(window).height()ভিউপোর্ট আকারের উপর ভিত্তি করে অবস্থান ও আকার উপাদান।

সমস্যার সমাধানে আমি আবিষ্কার করেছি যে ভিউপোর্টটি পুনরায় আকার দেওয়া না হলে উপরের jquery ফাংশনগুলিতে বারবার কলগুলিতে আমি কিছুটা ভিন্ন ভিউপোর্টের আকারের প্রতিবেদন পাচ্ছি।

অবাক হয়ে যদি এমন কোন বিশেষ কেস থাকে যে কেহ কখন এই ঘটনাটি সম্পর্কে জানে, বা যদি এটি ঠিক তখন হয়। রিপোর্ট করা আকারের পার্থক্যটি 20px বা তার চেয়ে কম হয়, এটি প্রদর্শিত হয়। এটি ম্যাক ওএস এক্স 10.6.2 তে সাফারি 4.0.4, ফায়ারফক্স 3.6.2 এবং ক্রোম 5.0.342.7 বিটাতে ঘটে। আমি এখনও অন্য ব্রাউজারগুলিকে পরীক্ষা করিনি কারণ এটি ব্রাউজারের সাথে সুনির্দিষ্ট বলে মনে হচ্ছে না। আমি পার্থক্যটি কীসের উপর নির্ভর করে তা নির্ধারণ করতেও অক্ষম ছিলাম, যদি এটি ভিউপোর্টের আকার না হয়, তবে ফলাফলকে আলাদা করার মতো আরও কোনও কারণ থাকতে পারে?

যে কোনও অন্তর্দৃষ্টি প্রশংসা করা হবে।


হালনাগাদ:

এটি মান $(window).width()এবং $(window).height()এটি পরিবর্তন হয় না। উপরের মানগুলি সংরক্ষণ করতে আমি যে ভেরিয়েবলগুলির মান ব্যবহার করছি তা এটি।

এটি স্ক্রোলবারগুলি নয় যা মানগুলি চিহ্নিত করে, যখন ভেরিয়েবলের মান পরিবর্তন হয় তখন কোনও স্ক্রোলবার উপস্থিত হয় না। মানগুলি আমার ভেরিয়েবলগুলিতে সংরক্ষণ করার জন্য এখানে আমার কোডটি রয়েছে (যা আমি কেবল তাই করছি যাতে তারা সংক্ষিপ্ত হয়)।

(এই সব ভিতরে আছে $(document).ready())

// প্রাথমিকভাবে ভেরিয়েবলের মধ্যে otehr ফাংশনগুলিতে দৃশ্যমান বলে ঘোষণা করুন .ready()

var windowWidth = $(window).width(); //retrieve current window width
var windowHeight = $(window).height(); //retrieve current window height
var documentWidth = $(document).width(); //retrieve current document width
var documentHeight = $(document).height(); //retrieve current document height
var vScrollPosition = $(document).scrollTop(); //retrieve the document scroll ToP position
var hScrollPosition = $(document).scrollLeft(); //retrieve the document scroll Left position


function onm_window_parameters(){ //called on viewer reload, screen resize or scroll

    windowWidth = $(window).width(); //retrieve current window width
    windowHeight = $(window).height(); //retrieve current window height
    documentWidth = $(document).width(); //retrieve current document width
    documentHeight = $(document).height(); //retrieve current document height
    vScrollPosition = $(document).scrollTop(); //retrieve the document scroll ToP position
    hScrollPosition = $(document).scrollLeft(); //retrieve the document scroll Left position

}; //end function onm_window_parameters()

উপরের ভেরিয়েবলগুলি যে মানগুলি ধারণ করে বলে মনে করা হচ্ছে তার বিরুদ্ধে তদন্ত করতে আমি একটি সতর্কতা বিবৃতি প্রবেশ করিয়েছি। $(item).param()মান সামঞ্জস্যপূর্ণ থাকার, কিন্তু আমার ভেরিয়েবল কারণে আমি চিন্তা করতে পারে না জন্য পরিবর্তন করুন।

আমি এমন জায়গাগুলি সন্ধান করেছি যেখানে আমার কোডগুলি কেবল তাদের নির্ধারিত মানগুলি পুনরুদ্ধার করার বিপরীতে প্রশ্নযুক্ত ভেরিয়েবলের মান পরিবর্তন করতে পারে এবং কোনও কিছুই খুঁজে পেতে পারে না। যদি কোনও সম্ভাবনা থাকে তবে আমি পুরো শেবাং কোথাও পোস্ট করতে পারি।

উত্তর:


98

আমি মনে করি আপনি যা দেখছেন তা হ'ল স্ক্রোলবারগুলি লুকানো এবং প্রদর্শন করা। প্রস্থের পরিবর্তনটি দেখানোর জন্য এখানে একটি দ্রুত ডেমো রয়েছে

একদিকে যেমন: আপনার কি নিয়মিত পোলিং করা দরকার? পুনরায় আকারের ইভেন্টটিতে চালানোর জন্য আপনি নিজের কোডটি অনুকূলিত করতে সক্ষম হবেন:

$(window).resize(function() {
  //update stuff
});

1
বিটিডব্লিউ, আপনি ঠিক ছিলেন ... সমস্যা সমাধানের সময় আমি লক্ষ্য করেছি সেখানে স্ক্রোলবার রয়েছে। তারা এত সংক্ষিপ্তভাবে উপস্থিত হয়েছিল যে স্ক্রিপ্টটি মধ্য-মৃত্যুদন্ডে বিরতি দিয়ে ডিবাগ মোড ব্যতীত তাদের দেখা যায় না। একবার আমি উপরের ভেরিয়েবলগুলি এবং ফাংশনটি সরিয়ে ফেললাম, কিছু উপাদান এখনও অবস্থান থেকে ঝাঁপিয়ে পড়েছিল - এটি স্ক্রিপ্ট পদক্ষেপের ক্রম সহ করতে হয়েছিল - আমার সবেমাত্র নিশ্চিত করা হয়েছিল যে আমি আমার সন্নিবেশিত চিত্রগুলি সিএসএস বামে পুনরায় সেট করেছি: 0 চিত্র সন্নিবেশ করার আগে । গল্পটি নৈতিক: কেবলমাত্র স্ক্রোলবারগুলি দেখার মতো দীর্ঘ সময় উপস্থিত হয় না, এর অর্থ এই নয় যে তারা সেখানে ছিল না!
মানকা উইকস

আমি এই প্রশ্নটিও ব্যবহার করব: stackoverflow.com/questions/2854407/… যাতে আপনি কিছু করার আগে পুনরায় আকারের ইভেন্টটি শেষ হয়ে গেলে পরীক্ষা করতে পারেন। আপনার স্ক্রিপ্টটি প্রতি পিক্সেলকে পুনরায় আকার দেওয়ার জন্য .resize () ফাংশনে যা যা চালানো হবে, তাই অপেক্ষা করার জন্য আরও ভাল অনুশীলন।
মার্কপি

9

ব্যবহার করার চেষ্টা করুন

  • $(window).load ঘটনা

অথবা

  • $(document).ready

    কারণ পার্সিংয়ের সময় বা ডোম লোড চলাকালীন পরিবর্তিত পরিবর্তনগুলির কারণে প্রাথমিক মানগুলি বিরক্তিকর হতে পারে।


3

মনে রাখবেন যে সমস্যাটি যদি স্ক্রোলবারগুলি উপস্থিত করে, চাপিয়ে দেওয়া হচ্ছে

body {
  overflow: hidden;
}

আপনার সিএসএসে একটি সহজ ফিক্স হতে পারে (যদি আপনার পৃষ্ঠাটি স্ক্রোল করার প্রয়োজন না হয়)।


1

আমার খুব অনুরূপ সমস্যা ছিল। আমি আমার পৃষ্ঠাটি রিফ্রেশ করার সময় আমি বেমানান উচ্চতা () মান পাচ্ছিলাম। (সমস্যাটি সৃষ্টির জন্য এটি আমার পরিবর্তনশীল নয়, এটি আসল উচ্চতার মান ছিল))

আমি লক্ষ্য করেছি যে আমার পৃষ্ঠার শিরোনামে আমি আমার স্ক্রিপ্টগুলি প্রথমে কল করেছিলাম, তারপরে আমার সিএসএস ফাইলটি। আমি স্যুইচ করেছি যাতে সিএসএস ফাইলটি প্রথমে লিঙ্ক হয়, তারপরে স্ক্রিপ্ট ফাইলগুলি এবং এটি এখনও পর্যন্ত সমস্যার সমাধান করেছে বলে মনে হয়।

আশা করি এইটি কাজ করবে.


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

1
আমি একই জিনিসটি স্ক্রোল বারগুলির সাথে নিশ্চিত করতে পারি। আমি ব্রাউজারটি আকার দেওয়ার পরে $ (উইন্ডো)। উচ্চতা () পড়ি এবং এটি 500 এর মতো কিছু দেখাতে পারে Then তবে আমি রিফ্রেশ করব (ব্রাউজারের আকার পরিবর্তন না করে) এবং এটি 700 এর মতো আরও বড় কিছু দেখাব my আমার কেস, আমি কেবল ওভারফ্লো করে এটি ঠিক করতে সক্ষম হয়েছি: শরীরে লুকানো, কারণ আমি কখনই স্ক্রোলবারগুলি চালু করতে চাই না। একবার আমি এটি করেছি, উচ্চতা রিপোর্ট সামঞ্জস্যপূর্ণ ছিল।
sbuck
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.