متحرک اور پکسل پرفیکٹ ویب پیج ڈیزائن بنانے کے لیے، ونڈو کے سائز کی پیمائش سمجھنے اور استعمال کرنے کے لیے بہت اہم ہے۔ اگر ونڈو کی پیمائش نہیں کی گئی یا صحیح طریقے سے استعمال نہیں کی گئی ہے تو مطلوبہ ویب صفحہ لے آؤٹ تیار نہیں ہوسکتا ہے۔ بدقسمتی سے، HTML/CSS نے ونڈو اسکرین کے سائز اور اصل اسکرین کی حدود سے ونڈو کے فاصلے کے بارے میں درست معلومات حاصل کرنے کے لیے کوئی خاصیت یا خاصیت فراہم نہیں کی۔
خوش قسمتی سے! جاوا اسکرپٹ اس مسئلے کو اپنا ' فراہم کرکے حل کرتا ہے window.screenLeft” اور “window.screenTop 'دونوں پر ونڈو کی پوزیشن کی پیمائش کرنے کے لئے خصوصیات' x' اور 'y-axis 'بالترتیب. اس مضمون میں ہماری بنیادی توجہ 'کی مدد سے ایکس محور کے ساتھ پوزیشن حاصل کرنا ہے۔ window.screenLeft ' جائیداد. تو، چلو شروع کریں!
یہ بلاگ JavaScript میں window.screenLeft پراپرٹی کو استعمال کرنے یا اس تک رسائی کے طریقہ کار کی وضاحت کرے گا۔
جاوا اسکرپٹ میں 'window.screenLeft' پراپرٹی تک کیسے رسائی حاصل کی جائے؟
' window.screenLeft جاوا اسکرپٹ کی خاصیت ونڈو کی افقی پوزیشن سے متعلق معلومات کو واپس کرتی ہے، اسکرین کے نسبت۔ یہ خاصیت عددی قدر کو پکسل فارمیٹ میں لوٹاتی ہے، اسکرین سے ونڈو کا افقی فاصلہ دکھاتی ہے۔ نیچے دیئے گئے کوڈ پر جائیں، جس میں ' window.screenLeft جائیداد کا استعمال کیا جا رہا ہے:
< جسم >
< h1 انداز = 'رنگ: سمندری سبز؛' > لینکس < / h1 >
< ص آئی ڈی = 'ہدف' > < / ص >
< سکرپٹ >
let i = window.screenLeft;
document.getElementById('target').innerHTML = 'بائیں: ' + i;
< / سکرپٹ >
< / جسم >
مندرجہ بالا کوڈ کی تفصیل:
- سب سے پہلے، HTML ' ص 'عنصر' کی شناخت کے ساتھ بنایا گیا ہے ہدف '
- اگلا، ' window.screenLeft ' پراپرٹی کو '< کے اندر استعمال کیا جاتا ہے۔ سکرپٹ >' نتیجہ کو متغیر میں ٹیگ اور اسٹور کرتا ہے میں '
- اس کے بعد، ' کی شناخت کے ساتھ عنصر کو منتخب کریں ہدف ' اور کی قدر داخل کریں۔ ' i' کا استعمال کرتے ہوئے متغیر اندرونی ایچ ٹی ایم ایل ' جائیداد.
ویب پیج کا پیش نظارہ اس طرح ہے:
آؤٹ پٹ دکھاتا ہے کہ بائیں اسکرین کی باؤنڈری سے افقی فاصلہ صفر پکسلز ہے۔
مثال: متحرک طور پر افقی قدر کو بازیافت کرنا
اسکرین لیفٹ پراپرٹی کو ' کے ساتھ استعمال کیا جاسکتا ہے۔ سائز تبدیل کریں 'ایونٹ سننے والا ونڈو کی ریئل ٹائم پوزیشن فراہم کرنے کے لیے جو کہ x-axis کے ساتھ اسکرین سے مطابقت رکھتا ہے۔ اسی طرح، y-axis یا عمودی محور کے ساتھ پوزیشن کو بھی 'کا استعمال کرکے بازیافت کیا جا سکتا ہے۔ window.screenTop ' جائیداد. آئیے دیے گئے منظر نامے کے لیے ایک کوڈ رکھتے ہیں:
< جسم >< h1 انداز = 'رنگ: سمندری سبز؛' > Linuxhint < / h1 >
< ص آئی ڈی = 'پرکھ' >< / ص >
< سکرپٹ >
فنکشن متحرک ( ) {
مجھے دو = window.screenLeft;
دو جے = window.screenTop؛
document.getElementById ( 'پرکھ' ) .innerHTML = 'بائیں سمت سے پوزیشن:' + میں + '، اوپر کی سمت سے:' + جے;
}
window.addEventListener ( 'سائز' , متحرک ) ;
< / سکرپٹ >
مندرجہ بالا کوڈ کی وضاحت اس طرح ہے:
- سب سے پہلے، ٹارگٹڈ عنصر بنایا گیا ہے جس کی ایک آئی ڈی ہے ' پرکھ '
- اگلا، '< سکرپٹ >' ٹیگ استعمال کیا جاتا ہے، اور ' متحرک ()' فنکشن اس میں بنتا ہے۔
- فنکشن کے اندر، استعمال کریں ' window.screenLeft” اور “window.screenTop 'پراپرٹیز اور ان کو اسٹور کریں' i' اور 'j 'متغیرات بالترتیب۔
- اس کے بعد ٹارگٹڈ عنصر کو اس کی آئی ڈی حاصل کرکے منتخب کریں۔ پرکھ 'اور' کی مدد سے اندرونی ایچ ٹی ایم ایل 'پراپرٹی دونوں کے لیے اقدار ظاہر کرتی ہے' i' اور 'j ویب صفحہ پر متغیرات۔
- آخر میں، منسلک کریں ' سائز تبدیل کریں ' واقعہ سننے والا ' کے ساتھ کھڑکی 'جو دعوت دیتا ہے' متحرک ()' فنکشن ہر بار جب ونڈو کا سائز تبدیل ہوتا ہے۔
تالیف کے اختتام کے بعد ویب صفحہ کا پیش نظارہ:
مندرجہ بالا آؤٹ پٹ میں، اوپر اور بائیں طرف سے ونڈو کا فرق پکسلز میں موصول ہوتا ہے کیونکہ ونڈو کا سائز تبدیل ہوتا ہے۔
یہ سب کے بارے میں ہے ' window.screeLeft جاوا اسکرپٹ میں پراپرٹی۔
نتیجہ
تک رسائی حاصل کرنے کے لیے ' window.screenLeft جاوا اسکرپٹ میں پراپرٹی اور منسلک کریں سائز تبدیل کریں 'واقعہ سننے والا' کھڑکی ' ہر بار جب ونڈو کا سائز تبدیل ہوتا ہے تو یہ کال بیک فنکشن کو طلب کرتا ہے۔ اس فنکشن کے اندر، ایک متغیر بنائیں جو ' window.screenLeft ' جائیداد. مزید برآں، ہدف شدہ عنصر کا حوالہ بازیافت کریں اور اس متغیر کی اقدار کو اس پر ظاہر کریں۔ اس بلاگ نے جاوا اسکرپٹ میں window.screenLeft پراپرٹی تک رسائی کے عمل کی وضاحت کی ہے۔