HTML بٹنوں کا استعمال کرتے ہوئے ٹائپنگ گیم کے لیے جاوا اسکرپٹ ٹائمر ویلیو کو کیسے تبدیل کریں۔

HTML بٹنوں کا استعمال کرتے ہوئے ٹائپنگ گیم کے لیے جاوا اسکرپٹ ٹائمر ویلیو کو کیسے تبدیل کریں۔
HTML بٹنوں کا استعمال کرتے ہوئے ٹائپنگ گیم کے لیے جاوا اسکرپٹ ٹائمر ویلیو کو کیسے تبدیل کریں۔

بٹنوں کا استعمال کرتے ہوئے ٹائپنگ گیم کے لیے ڈائنامک ٹائمر ایڈجسٹمنٹ

ٹائپنگ گیم میں، صارف کے پرکشش تجربے کو یقینی بنانے کے لیے گیم کی رفتار کو کنٹرول کرنا بہت ضروری ہے۔ ایک اہم عنصر ٹائمر ہے، جو اس بات کا تعین کرتا ہے کہ صارف کو گیم یا ٹائپنگ چیلنج کو کب تک مکمل کرنا ہے۔ صارفین کو سادہ HTML بٹنوں کے ذریعے گیم ٹائمر کو ایڈجسٹ کرنے کی اجازت دے کر، آپ انہیں ان کے گیم پلے پر مزید کنٹرول دے سکتے ہیں۔

یہ مضمون آپ کو دکھائے گا کہ جاوا اسکرپٹ میں ایک ایسا حل کیسے بنایا جائے جو کھلاڑیوں کو بٹنوں کا استعمال کرتے ہوئے مختلف ٹائمر سیٹنگز کے درمیان انتخاب کرنے کی اجازت دیتا ہے۔ مثال کے طور پر، '30s' بٹن کو منتخب کرنے سے ٹائمر 30 سیکنڈز میں ایڈجسٹ ہو جائے گا، جب کہ '60s' بٹن پر کلک کرنے سے یہ 60 سیکنڈز میں بدل جائے گا۔

JavaScript فنکشن کلک کردہ بٹن سے قیمت لے گا اور ٹائمر اور گیم کے ٹائٹل دونوں کو متحرک طور پر اپ ڈیٹ کرے گا۔ اس قسم کی لچک صارف کے تجربے کو بڑھا سکتی ہے، جس سے گیم کو مزید حسب ضرورت اور مختلف مہارت کی سطحوں کے لیے لطف اندوز ہو سکتا ہے۔

اس گائیڈ کے اختتام تک، آپ کے پاس HTML اور JavaScript کا استعمال کرتے ہوئے مکمل طور پر فعال ٹائمر ایڈجسٹمنٹ کی خصوصیت ہوگی۔ ہم اس بات کا بھی احاطہ کریں گے کہ صفحہ کے عنوان پر دکھائے گئے ٹائمر کی قدر کو کیسے اپ ڈیٹ کیا جائے تاکہ منتخب ٹائمر کی مدت کو ظاہر کیا جا سکے۔

حکم استعمال کی مثال
document.querySelector() براؤزر ٹیب کے عنوان کو متحرک طور پر اپ ڈیٹ کرنے کے لیے HTML عنصر کو منتخب کرنے کے لیے استعمال کیا جاتا ہے۔ یہ طریقہ ان کے CSS سلیکٹر کی بنیاد پر عناصر کو منتخب کرنے کے لیے مخصوص ہے، اور یہاں یہ منتخب ٹائمر ویلیو کی بنیاد پر صفحہ کے عنوان کو تبدیل کرنے میں مدد کرتا ہے۔</td> </tr> <tr> <td>addEventListener()</td> <td>بٹن کے عنصر سے ایک مخصوص ایونٹ (مثلاً کلک) کو جوڑتا ہے۔ اس تناظر میں، یہ changeTimer() فنکشن کو متحرک کرنے کے لیے استعمال ہوتا ہے جب کوئی صارف بٹن پر کلک کرتا ہے، جس سے ٹائمر کی ترتیبات کے ساتھ متحرک تعامل ہوتا ہے۔</td> </tr> <tr> <td>innerText</td> <td>یہ خاصیت HTML عنصر کے اندر نظر آنے والے متن میں ترمیم کرنے کی اجازت دیتی ہے۔ اس حل میں، یہ صفحہ کے عنوان میں ٹائمر کی قدر کو اپ ڈیٹ کرنے کے لیے استعمال ہوتا ہے جب بٹن پر کلک کیا جاتا ہے۔</td> </tr> <tr> <td>onClick</td> <td>ایک ان لائن ایونٹ ہینڈلر انتساب جو متبادل اپروچ میں استعمال کیا جاتا ہے تاکہ changeTimer() فنکشن کو براہ راست بٹن کے کلک ایونٹ سے منسلک کیا جا سکے۔ یہ ٹائمر کو متحرک طور پر اپ ڈیٹ کرنے کے آسان، کم ماڈیولر طریقے کی اجازت دیتا ہے۔</td> </tr> <tr> <td>test()</td> <td>یہ طریقہ جیسٹ کے ساتھ یونٹ ٹیسٹنگ میں استعمال ہوتا ہے۔ یہ ایک ٹیسٹ کیس کی وضاحت کرتا ہے جہاں ٹیسٹ کیے جانے والے فنکشن (مثال کے طور پر، changeTimer()) کا جائزہ لیا جاتا ہے تاکہ ٹائمر کو درست طریقے سے اپ ڈیٹ کیا جا سکے۔ یہ یقینی بناتا ہے کہ کوڈ مختلف منظرناموں میں توقع کے مطابق برتاؤ کرتا ہے۔</td> </tr> <tr> <td>expect()</td> <td>ایک جیسٹ کمانڈ جو چیک کرتی ہے کہ آیا اصل قدر (جیسے اپ ڈیٹ شدہ ٹائمر) متوقع قدر سے میل کھاتی ہے۔ یہ یونٹ ٹیسٹوں میں اس بات کی تصدیق کے لیے استعمال کیا جاتا ہے کہ گیم ٹائم اور document.title بٹن پر کلک کرنے کے بعد درست طریقے سے اپ ڈیٹ ہو گئے ہیں۔</td> </tr> <tr> <td>toBe()</td> <td>ایک اور جیسٹ کمانڈ جو سخت مساوات کی جانچ کرتی ہے۔ یہ یقینی بناتا ہے کہ changeTimer() کو کال کرنے کے بعد، گیم کا وقت بالکل وہی ہے جس کی توقع کی جاتی ہے (مثال کے طور پر، 30 سیکنڈز کے لیے 30,000 ms)۔</td> </tr> <tr> <td>getElementById()</td> <td>مخصوص بٹنوں کو ان کی IDs کے ذریعے منتخب کرنے کے لیے استعمال کیا جاتا ہے (جیسے 'تیس'، 'ساٹھ')۔ یہ طریقہ ایونٹ کے سننے والوں کو بٹنوں سے منسلک کرنے اور صارف کی بات چیت کے جواب میں ٹائمر کی متحرک تبدیلی کو متحرک کرنے کے لیے اہم ہے۔</td> </tr></table><h3 id="dev1">جاوا اسکرپٹ اور ایچ ٹی ایم ایل بٹن کا استعمال کرتے ہوئے ڈائنامک ٹائمرز بنانا</h3><div class="bordersh3"></div><p>اوپر فراہم کردہ اسکرپٹس کو اس لیے ڈیزائن کیا گیا ہے کہ صارف HTML بٹنوں پر کلک کرکے ٹائپنگ گیم میں گیم ٹائمر کو متحرک طور پر ایڈجسٹ کر سکے۔ ابتدائی طور پر، ہم ایک متغیر کا اعلان کرتے ہیں۔ <b>کھیل کا وقت</b>، جو وقت کو ملی سیکنڈ میں رکھتا ہے (30 سیکنڈز بطور ڈیفالٹ، ملی سیکنڈز میں تبدیل کرنے کے لیے 1000 سے ضرب)۔ کلیدی فعالیت میں مضمر ہے۔ <b>چینج ٹائمر</b> فنکشن، جو کلک کیے گئے بٹن کی بنیاد پر ٹائمر ویلیو کو اپ ڈیٹ کرتا ہے۔ یہ طریقہ بٹن کی قدر حاصل کرتا ہے (جیسے 30، 60، یا 90) اور اپ ڈیٹ کرتا ہے کھیل کا وقت اس کے مطابق متغیر. مزید برآں، اسکرپٹ صفحہ کے عنوان کو اپ ڈیٹ کرتا ہے تاکہ منتخب کردہ ٹائمر کی مدت کو ظاہر کیا جا سکے، جس سے صارفین کو یہ واضح ہو جاتا ہے کہ ان کے پاس کتنا وقت ہے۔</p><p>متحرک رویے کے لیے، ہم ایونٹ سننے والوں کو استعمال کرتے ہیں، خاص طور پر <b>EventListener شامل کریں۔</b> حکم یہ اسکرپٹ کو اس وقت رد عمل ظاہر کرنے کی اجازت دیتا ہے جب صارف کسی بھی بٹن پر کلک کرتا ہے۔ ہر بٹن کو ایک ID تفویض کیا جاتا ہے اور جب کلک کیا جاتا ہے تو اسے متحرک کرتا ہے۔ <b>چینج ٹائمر</b> فنکشن، متعلقہ وقت کی قدر کو پاس کرنا۔ یہ نقطہ نظر HTML ڈھانچے میں بار بار ان لائن جاوا اسکرپٹ کی ضرورت کے بغیر متعدد بٹنوں کو مؤثر طریقے سے سنبھالنے کے لیے مفید ہے۔ اسکرپٹ میں فال بیک آپشن بھی شامل ہے جہاں آپ ان لائن ایونٹ ہینڈلرز جیسے استعمال کر سکتے ہیں۔ <b>پر کلک کریں۔</b> اگر ماڈیولرٹی پر سادگی کو ترجیح دی جائے۔</p><p>متبادل حل میں، ہم براہ راست باندھتے ہیں۔ <b>پر کلک کریں۔</b> بٹن پر واقعہ. یہ طریقہ کار انجام دیتا ہے۔ <b>چینج ٹائمر</b> کام براہ راست بٹن پر کلک کیا جا رہا ہے. یہ ایک سیدھا سادا طریقہ ہے لیکن اس میں واقعہ سننے کے طریقہ کار کی لچک کا فقدان ہے۔ اس طریقہ کی سادگی چھوٹی، کم پیچیدہ ایپلی کیشنز کے لیے مفید ہے۔ تاہم، مزید توسیع پذیر کوڈ کے لیے، ایونٹ کے سامعین زیادہ لچک پیش کرتے ہیں اور HTML ڈھانچے میں براہ راست ترمیم کیے بغیر اسکرپٹ میں آسان اپ ڈیٹس کی اجازت دیتے ہیں۔ دونوں طریقوں کا مقصد ایک ہی مسئلہ کو حل کرنا ہے، جو کہ صارف کے انتخاب کی بنیاد پر ٹائمر کو ایڈجسٹ کرنا اور ٹائٹل کو متحرک طور پر اپ ڈیٹ کرنا ہے۔</p><p>آخر میں، ہم جاوا اسکرپٹ ٹیسٹنگ فریم ورک Jest کا استعمال کرتے ہوئے یونٹ ٹیسٹ نافذ کرتے ہیں۔ دی <b>ٹیسٹ</b> اس بات کی توثیق کرنے کے لیے فنکشنز اہم ہیں کہ ٹائمر صحیح طریقے سے اپ ڈیٹ ہوتا ہے۔ متعدد منظرناموں کی جانچ کرکے، جیسے کہ آیا ٹائمر 30 سیکنڈ، 60 سیکنڈ، یا 90 سیکنڈ میں ایڈجسٹ ہوتا ہے، یہ یونٹ ٹیسٹ اسکرپٹ کی درستگی کو یقینی بناتے ہیں۔ جیسے احکامات <b>توقع</b> اور <b>ہونا</b> اس بات کی تصدیق کے لیے استعمال کیا جاتا ہے کہ ٹائمر کی اصل قدر اور صفحہ کا عنوان متوقع نتائج سے مماثل ہے۔ یہ جانچ کا مرحلہ اس بات کو یقینی بناتا ہے کہ آپ کی ٹائمر منطق مختلف استعمال کے معاملات میں صحیح طریقے سے کام کر رہی ہے، جو آپ کے حل کی مضبوطی پر اعتماد فراہم کرتی ہے۔<div id="script0"><h3>ٹائپنگ گیم کے لیے HTML بٹنوں کے ساتھ ٹائمر ویلیو کو تبدیل کرنا</h3><div class="bordersh3"></div><p class="langprog">متحرک ٹائم اپ ڈیٹ اور ٹائٹل ایڈجسٹمنٹ کے ساتھ جاوا اسکرپٹ پر مبنی فرنٹ اینڈ اپروچ</p><pre class="language-javascript"><code>// Solution 1: Using event listeners to change timer value dynamically</code> <code>let gameTime = 30 * 1000; // Default timer set to 30 seconds</code> <code>const titleElement = document.querySelector('title');</code> <code>function changeTimer(value) {</code> <code> gameTime = value * 1000; // Update timer to selected value</code> <code> titleElement.innerText = value + 's'; // Update the title</code> <code>}</code> <code>// Attach event listeners to buttons</code> <code>document.getElementById('thirty').addEventListener('click', () => changeTimer(30));</code> <code>document.getElementById('sixty').addEventListener('click', () => changeTimer(60));</code> <code>document.getElementById('ninety').addEventListener('click', () => changeTimer(90));</code> <code>// HTML Buttons:</code> <code>// <button id="thirty" type="button">30s</button></code> <code>// <button id="sixty" type="button">60s</button></code> <code>// <button id="ninety" type="button">90s</button></code> </pre></div><div id="script1"><h3>متبادل نقطہ نظر: ان لائن ایچ ٹی ایم ایل اور جاوا اسکرپٹ فنکشنز کا استعمال</h3><div class="bordersh3"></div><p class="langprog">HTML میں ان لائن جاوا اسکرپٹ کو بٹن پر کلک کرنے پر ڈائریکٹ فنکشن کالز کے ساتھ</p><pre class="language-javascript"><code><script></code> <code>let gameTime = 30 * 1000;</code> <code>function changeTimer(value) {</code> <code> gameTime = value * 1000;</code> <code> document.title = value + 's';</code> <code>}</code> <code></script></code> <code><button onClick="changeTimer(30)">30s</button></code> <code><button onClick="changeTimer(60)">60s</button></code> <code><button onClick="changeTimer(90)">90s</button></code> </pre></div><div id="script2"><h3>مختلف ماحول میں ٹائمر ویلیو کی تبدیلیوں کے لیے یونٹ ٹیسٹنگ</h3><div class="bordersh3"></div><p class="langprog">جاوا اسکرپٹ پر مبنی یونٹ کے ٹیسٹس کا استعمال کرتے ہوئے سامنے کے آخر میں ماحول کی توثیق کے لیے</p><pre class="language-javascript"><code>// Jest Test Cases</code> <code>test('Timer should update to 30 seconds', () => {</code> <code> changeTimer(30);</code> <code> expect(gameTime).toBe(30000);</code> <code> expect(document.title).toBe('30s');</code> <code>});</code> <code>test('Timer should update to 60 seconds', () => {</code> <code> changeTimer(60);</code> <code> expect(gameTime).toBe(60000);</code> <code> expect(document.title).toBe('60s');</code> <code>});</code> <code>test('Timer should update to 90 seconds', () => {</code> <code> changeTimer(90);</code> <code> expect(gameTime).toBe(90000);</code> <code> expect(document.title).toBe('90s');</code> <code>});</code> </pre></div></p><h3>ٹائمر حسب ضرورت کے ساتھ گیم کے تعامل کو بڑھانا</h3><div class="bordersh3"></div><p>ٹائپنگ گیم میں ٹائمر کو تبدیل کرتے وقت غور کرنے کا ایک اور پہلو صارف کا مجموعی تجربہ اور انٹرفیس ہے۔ بٹنوں کے ذریعے گیم ٹائمر کو ایڈجسٹ کرنے کے علاوہ، کھلاڑیوں کو ان کے منتخب کردہ ٹائمر پر بصری فیڈ بیک دینا بھی ضروری ہے۔ یہ صفحہ پر دیگر عناصر کو اپ ڈیٹ کر کے حاصل کیا جا سکتا ہے، جیسے کہ الٹی گنتی ڈسپلے۔ ٹائمر سیٹ کرنے کے لیے بٹن پر کلک کرنے کے بعد، الٹی گنتی کا ٹائمر فوراً شروع ہو جانا چاہیے، جو صارف کو ریئل ٹائم فیڈ بیک فراہم کرتا ہے۔ یہ اس بات کو یقینی بناتا ہے کہ تعامل ہموار اور بدیہی ہے، گیم کو مزید دلفریب بناتا ہے۔</p><p>اس کو نافذ کرنے کے لیے، آپ JavaScript کا استعمال کر سکتے ہیں۔ <b>مقررہ وقفہ</b> فنکشن ٹائمر سیٹ ہونے کے بعد، مقررہ وقفہ ایک الٹی گنتی بنانے کے لیے استعمال کیا جا سکتا ہے جو ہر سیکنڈ میں ٹائمر کی قدر کو کم کرتا ہے۔ جب ٹائمر صفر تک پہنچ جاتا ہے، فنکشن یا تو گیم کو روک سکتا ہے یا صارف کو متنبہ کر سکتا ہے کہ وقت ختم ہو گیا ہے۔ یہ فعالیت، بٹنوں کا استعمال کرتے ہوئے ٹائمر کو متحرک طور پر تبدیل کرنے کی صلاحیت کے ساتھ مل کر، گیم پلے کے تجربے کو نمایاں طور پر بڑھا دیتی ہے۔ ایک ریسپانسیو انٹرفیس کھلاڑیوں کو مصروف رکھنے کی کلید ہے، اور ریئل ٹائم فیڈ بیک اس کو حاصل کرنے کا ایک طریقہ ہے۔</p><p>اس کے علاوہ، غلطی سے نمٹنے پر غور کیا جانا چاہئے. مثال کے طور پر، اگر کوئی صارف ٹائمر سیٹ کیے بغیر گیم شروع کرنے کی کوشش کرتا ہے، تو آپ اسے ایک درست وقت منتخب کرنے کے لیے پیغام کے ساتھ کہہ سکتے ہیں۔ توثیق کے طریقہ کار کو شامل کرکے، آپ اس بات کو یقینی بناتے ہیں کہ گیم آسانی سے چلتی ہے اور ممکنہ مسائل کو کم کرتی ہے۔ اس قسم کی توثیق نہ صرف صارف کے تجربے کو بہتر بناتی ہے بلکہ آپ کے گیم کے قابل اعتماد ہونے میں بھی معاون ہوتی ہے، اس بات کو یقینی بناتے ہوئے کہ کھلاڑیوں کو غیر ضروری الجھن کا سامنا نہ کرنا پڑے۔</p><div id="newfaq"><div id="adsense-article-faq"></div><h4 id="faq">جاوا اسکرپٹ میں ٹائمر حسب ضرورت کے بارے میں عام سوالات</h4><div class="bordersh4"></div><ol> <li>میں کیسے استعمال کروں <strong>setInterval</strong> ایک الٹی گنتی بنانے کے لئے؟</li> <li>آپ استعمال کر سکتے ہیں۔ <strong>setInterval</strong> اسے ہر 1000 ملی سیکنڈ (1 سیکنڈ) پر عمل کرنے کے لیے ترتیب دے کر اور ہر بار ٹائمر کی قدر کو کم کر کے۔ جب قدر صفر تک پہنچ جاتی ہے، تو آپ الٹی گنتی کو استعمال کر کے روک سکتے ہیں۔ <strong>clearInterval</strong>.</li> <li>کا مقصد کیا ہے <strong>clearInterval</strong>?</li> <li><strong>clearInterval</strong> الٹی گنتی کو روکنے کے لیے استعمال کیا جاتا ہے یا کسی دوسری بار بار چلنے والی کارروائی شروع کی جاتی ہے۔ <strong>setInterval</strong>. صفر تک پہنچنے پر الٹی گنتی کے رک جانے کو یقینی بنانا بہت ضروری ہے۔</li> <li>میں HTML ٹائٹل کو متحرک طور پر کیسے اپ ڈیٹ کر سکتا ہوں؟</li> <li>استعمال کریں۔ <strong>document.title</strong> صفحہ کے عنوان کا متن ترتیب دینے کے لیے۔ یہ آپ کے اندر اپ ڈیٹ کیا جا سکتا ہے <strong>changeTimer</strong> فنکشن منتخب وقت کی قدر پر مبنی ہے۔</li> <li>کیا میں ٹائمر کا انتخاب کرتے وقت صارف کی غلطیوں کو سنبھال سکتا ہوں؟</li> <li>ہاں، آپ یہ چیک کر کے توثیق شامل کر سکتے ہیں کہ آیا الٹی گنتی شروع کرنے سے پہلے ٹائمر کا درست آپشن منتخب کیا گیا ہے۔ اگر کوئی درست وقت منتخب نہیں کیا جاتا ہے، تو آپ الرٹ یا پرامپٹ ڈسپلے کر سکتے ہیں۔</li> <li>جب بٹن پر کلک کیا جاتا ہے تو میں فنکشن کو کیسے ٹرگر کروں؟</li> <li>آپ کا استعمال کرتے ہوئے ایک بٹن کے ساتھ ایک فنکشن منسلک کر سکتے ہیں <strong>addEventListener</strong> یا براہ راست استعمال کرتے ہوئے <strong>onClick</strong> بٹن کے HTML عنصر میں۔</li></ol></div><div id="summary"><h4>ٹائمر حسب ضرورت پر حتمی خیالات</h4><div class="bordersh4"></div><p>ٹائپنگ گیم میں ڈائنامک ٹائمر ایڈجسٹمنٹ کو شامل کرنے سے کھلاڑی کا تجربہ نمایاں طور پر بہتر ہوتا ہے۔ صارفین کو سادہ HTML بٹنوں کا استعمال کرتے ہوئے ٹائمر تبدیل کرنے اور گیم کے انٹرفیس کو ریئل ٹائم میں اپ ڈیٹ کرنے کی اجازت دے کر، ڈویلپر اپنے گیمز کو زیادہ انٹرایکٹو اور لچکدار بنا سکتے ہیں۔ اس قسم کا کنٹرول مہارت کی مختلف سطحوں کو ایڈجسٹ کرنے میں مدد کرتا ہے۔</p><p>ایونٹ سننے والوں، غلطیوں سے نمٹنے اور یونٹ ٹیسٹ جیسے بہترین طریقوں کا استعمال اس بات کو یقینی بناتا ہے کہ گیم آسانی سے چلتا ہے اور صارف کو قابل اعتماد تجربہ فراہم کرتا ہے۔ ان خصوصیات کو نافذ کرنے سے نہ صرف گیم کی فعالیت میں اضافہ ہوگا بلکہ کھلاڑیوں کو جوابدہ، صارف دوست میکینکس کے ساتھ مزید مشغول رکھا جائے گا۔</p><div id="source"> <h6>ٹائمر حسب ضرورت کے لیے ذرائع اور حوالہ جات</h6> <div class="bordersh2"></div> <ol> <li>DOM ہیرا پھیری اور ایونٹ ہینڈلنگ کے لیے JavaScript کے استعمال کے بارے میں تفصیلی معلومات پر مل سکتی ہے۔ <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide" target="_blank">MDN ویب دستاویزات</a> .</li> <li>کو سمجھنے کے لیے <a href="https://jestjs.io/docs/getting-started" target="_blank">طنز</a> جاوا اسکرپٹ ایپلی کیشنز میں یونٹ ٹیسٹنگ کے لیے فریم ورک اور اس کا نفاذ۔</li> <li>استعمال کرنے کے بارے میں جامع بصیرت <a href="https://www.w3schools.com/js/js_htmldom_eventlistener.asp" target="_blank">EventListener شامل کریں۔</a> جاوا اسکرپٹ میں ایونٹس سے نمٹنے کے لیے W3Schools پر دستیاب ہیں۔</li> <li>ٹائمرز سمیت ویب ایپلیکیشنز میں ریئل ٹائم اپ ڈیٹس کی اہمیت پر بات کی گئی ہے۔ <a href="https://www.smashingmagazine.com/2020/02/real-time-app-web/" target="_blank">مسمار کرنے والا میگزین</a> .</li> </ol></div></div> </article> </div> <!-- WIDGET RIGHT SIDE SCREEN --> <div id="article-right" class="col-lg-3 ol-md-12 col-sm-12 col-xs-12"> <aside aria-label="sidebar" id="article-sidebar" class="sidebar sidebar-right"> <div id="adsense-right" class="widget sidebaritem d-none d-md-none d-lg-block adsense-right-vertical-div" page="0"> <!-- <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3922865260272328" crossorigin="anonymous"></script> <ins class="adsbygoogle adsense-right-vertical" style="" data-ad-client="ca-pub-3922865260272328" data-ad-slot="9756184449"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> --> </div> <div id="tempmail-slogan" class="widget w-about widget-sidebar sidebaritem" style="z-index:4;position:relative;background-color: white;margin-top:-30px;"> <div class="widget-title">Tempmail.us.com</div> <div class="bordersh4"></div> <p id="promotext">انٹرنیٹ پر بہترین کارکردگی کا مظاہرہ کرنے والے گمنام عارضی میل کی تلاش ہے؟ ہماری مفت عارضی ای میل سروس سب سے مکمل ہے، ای میل وصول کریں اور بھیجیں، اپنے پسندیدہ ای میلز پر ری ڈائریکشن بنائیں۔ اپنا پاس ورڈ رکھیں اور اپنی عارضی ای میل کو تاحیات استعمال کریں۔ POP3، IMAP اور SMTP مفت میں دستیاب ہیں۔</p> <div style="width:100%;text-align:right;"> <a class="read-more--with-arrow" href="https://www.tempmail.us.com/ur/"> Temp mail </a> </div> </div> <div id="adsense-article-square"></div> <div id="blog-ajax" style="margin-top:5px;"></div> </aside> </div> </div> </div> </section> <!-- Footer --> <svg width="100%" height="4px" xmlns="http://www.w3.org/2000/svg" class="border-footer"> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:#EB177D;stop-opacity:1" /> <stop offset="25%" style="stop-color:#F9A933;stop-opacity:1" /> <stop offset="50%" style="stop-color:#3BC7EB;stop-opacity:1" /> <stop offset="75%" style="stop-color:#28C182;stop-opacity:1" /> </linearGradient> </defs> <rect width="100%" height="5px" fill="url(#grad1)" /> </svg> <!-- Balise div pour stocker le numéro de page initial --> <div id="content"> <!-- Contenu de votre page principale --> <div id="page_count"></div> </div> </div> <!-- ... end Footer --> <div id="javascript-mobile"></div> <script> // Fonction pour charger le script Hotjar function loadHotjar() { (function(h,o,t,j,a,r){ h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)}; h._hjSettings={hjid:5178820,hjsv:6}; a=o.getElementsByTagName('head')[0]; r=o.createElement('script');r.async=1; r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv; a.appendChild(r); })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv='); } // Écouteur d'événements pour la souris et le toucher if (typeof interactionDetected === 'undefined') { let interactionDetected = false; // Déclaration de la variable // Détecter les mouvements de souris sur desktop window.addEventListener('mousemove', function() { if (!interactionDetected) { interactionDetected = true; loadHotjar(); // Charge le script Hotjar } }); // Détecter les interactions tactiles sur mobile window.addEventListener('touchstart', function() { if (!interactionDetected) { interactionDetected = true; loadHotjar(); // Charge le script Hotjar } }); } </script> <script> // Function to load a script and return a Promise that resolves when the script is loaded function loadScript(src) { return new Promise((resolve, reject) => { const script = document.createElement('script'); script.src = src; script.onload = () => resolve(); script.onerror = () => reject(new Error(`Failed to load script: ${src}`)); document.getElementById('javascript-mobile').appendChild(script); }); } // Async function to sequentially load scripts with a delay after jQuery async function loadScriptsSequentially() { try { // Load jQuery first await loadScript('https://www.tempmail.us.com/js/jquery.min.js'); // Optional: Verify that jQuery is loaded if (typeof jQuery === 'undefined') { throw new Error('jQuery did not load correctly.'); } // Delay of 500ms after jQuery is loaded //await new Promise(resolve => setTimeout(resolve, 100)); // Load the remaining scripts sequentially await loadScript('https://www.tempmail.us.com/js/lazysizes.min.js'); //await new Promise(resolve => setTimeout(resolve, 100)); //await loadScript('https://www.tempmail.us.com/js/load-bg-and-webp.js'); await loadScript('https://www.tempmail.us.com/js/prism.js'); // All scripts loaded successfully console.log('All scripts loaded successfully.'); // You can now execute any code that depends on the loaded scripts // For example: $(document).ready(function() { console.log('jQuery is ready.'); // Your jQuery-dependent code here }); } catch (error) { console.error(error); } } pageCount = document.querySelectorAll('#content #page_count').length; //console.log('Nombre de pages chargées:', pageCount); // Initiate the script loading based on the window width if (window.innerWidth < 900) { loadScriptsSequentially(); } </script> <script> setTimeout(function() { $(document).ready(function() { //permettre le copier-coller // Sélectionnez tous les éléments <pre> dans le document document.addEventListener('mousemove', function() { const pageCount = document.querySelectorAll('#content #page_count').length; //console.log('Nombre de pages chargées:', pageCount); pageNum = pageCount-1; var preElements = document.querySelectorAll('div[page="'+ pageNum +'"] pre'); // Parcourez chaque élément <pre> preElements.forEach(function(preElement, index) { var preId = "pre" + (index + 1); // ID unique, par exemple : pre1, pre2, pre3, ... // Créez un élément <img> avec un attribut onclick qui appelle copyCode avec l'ID correspondant var img = document.createElement("img"); img.src = "https://www.tempmail.us.com/img/copypaste4.png"; // Remplacez par le chemin de votre image img.alt = "کاپی اور پیسٹ"; img.setAttribute("width", "28.698"); img.setAttribute("height", "35"); img.classList.add("lazyload"); img.setAttribute("onclick", "copyCode('" + preId + "', this)"); // Créez un élément div pour contenir l'image var imgContainer = document.createElement("div"); imgContainer.appendChild(img); imgContainer.classList.add("article-copypaste"); // Ajoutez la classe "article-copypaste" à la div // Insérez le imgContainer avant l'élément <pre> preElement.parentNode.insertBefore(imgContainer, preElement); // Attribuez l'ID à l'élément <pre> preElement.id = preId; }); var count = 1; $('.article-copypaste').each(function() { // Vérifie si la div langprog existe juste au-dessus de chaque div article-copypaste if ($(this).prev('.langprog').length === 0) { // Si elle n'existe pas, créez-la $(this).before('<p class="langprog"><br></p>'); } }); $('div[page="0"] .langprog').each(function() { //console.log("test"); // Créez une nouvelle div var newDiv = $('<div>').text(''); // Ajoutez des classes ou des styles à la nouvelle div si nécessaire newDiv.attr('id', "pre"+count+"-alert"); //newDiv.attr('display', "none"); // Ajoutez la nouvelle div en haut de la div actuelle $(this).prepend(newDiv); count++; }); document.removeEventListener('mousemove', arguments.callee); }); }); }, 1000); //copier les pre & code function copyCode(preId, button) { var pre = document.getElementById(preId); var range = document.createRange(); range.selectNode(pre); // Supprimer les espaces en début de chaque ligne var cleanedText = pre.textContent.replace(/^\s+/gm, ""); // Créer un élément temporaire pour copier le texte nettoyé var temp = document.createElement("textarea"); temp.value = cleanedText; document.body.appendChild(temp); temp.select(); document.execCommand("copy"); document.body.removeChild(temp); button.innerHTML = "Copié !"; setTimeout(function() { button.innerHTML = "Copier"; }, 1000); var boxe = "#"+preId+"-alert"; console.log(boxe); showCopyPaste(boxe,"مواد کلپ بورڈ پر کاپی ہو گیا!","success"); } function showCopyPaste(id,textbox,info) { var message = $('div[page="0"] ' + id); message.text(textbox); message.removeClass(); if (info=="general") { message.addClass('alert alert-secondary'); } if (info=="warning") { message.addClass('alert alert-warning'); } if (info=="danger") { message.addClass('alert alert-danger'); } if (info=="success") { message.addClass('alert alert-success'); } message.fadeIn(); setTimeout(function() { message.fadeOut(); }, 3000); // 2000 millisecondes = 2 secondes } </script> <script> setTimeout(function() { $(document).ready(function () { pageCount = document.querySelectorAll('#content #page_count').length; //console.log('Nombre de pages chargées:', pageCount); pageNum = pageCount-1; if ( pageNum==0) { //console.log("repasser par la "); initPositioning(0); // Initial call for the first page } setTimeout(function() { //parce que le prism est en defer Prism.highlightAll(); }, 500); }); $(document).ready(function () { var ajaxAborted = false; var page = 1; // Numéro de la page actuelle var loading = false; // Pour éviter les chargements multiples en même temps var articlesLoaded = false; function loadMoreArticles(unusedHeight) { if (loading || articlesLoaded) return; // Déclenche la requête AJAX pour charger plus d'articles $.ajax({ url: 'https://www.tempmail.us.com/02blog-ajax.php', // L'URL du script PHP pour charger les articles method: 'POST', data: { action: 'getArticles', lang: 'ur', addQueryCat: "AND catclean='javascript'", page: page, currentid: "100107", unusedHeight: unusedHeight // Utilisez la valeur de hauteur non utilisée ici }, dataType: 'html', beforeSend: function (xhr) { loading = true; if (ajaxAborted) { xhr.abort(); // Annuler la requête } }, success: function (response) { // Insérez les nouveaux articles dans la partie vide de la page if ($(response).find('div').length > 0) { const pageCount = document.querySelectorAll('#content #page_count').length; //console.log('Nombre de pages chargées:', pageCount); pageNum = pageCount-1; // La division en particulier est trouvée, continuez le traitement var parentDiv = $('div[page="' + pageNum + '"]'); var blogAjaxElement = parentDiv.find('#blog-ajax'); blogAjaxElement.append(response); } else { ajaxAborted = true; //console.log("aborded"); } // Incrémente le numéro de page page++; loading = false; articlesLoaded = true; }, error: function (xhr, status, error) { // Gérez les erreurs si nécessaire console.error(error); } }); } // Fonction pour calculer la hauteur non utilisée de manière synchrone function calculateUnusedHeight() { const pageCount = document.querySelectorAll('#content #page_count').length; //console.log('Nombre de pages chargées:', pageCount); pageNum = pageCount-1; var parentDiv = $('div[page="' + pageNum + '"]'); var sidebar = parentDiv.find('#article-right')[0]; var sidebarItems = parentDiv.find('.sidebaritem'); var $page = $('[page="' + pageNum + '"]'); var $article = $page.find('#article'); var $newfaq = $page.find('#newfaq'); var totalfaq = $newfaq.outerHeight(); $page.find('[id^=script]').each(function(index) { totalfaq += $(this).outerHeight(); }); //console.log("total height"+totalfaq ) // Comparer avec la hauteur de #article et ajuster si nécessaire var $article = $page.find('#article'); var realarticleheight = $article.outerHeight() - (totalfaq); var totalHeight = realarticleheight; if (totalfaq>realarticleheight) { totalHeight = totalfaq; } //console.log("test"+totalHeight); var itemsHeight = 0; for (var i = 0; i < sidebarItems.length; i++) { itemsHeight += sidebarItems[i].offsetHeight; } var $article = $page.find('#article'); var unusedHeight = $article.outerHeight() - 1600; //var unusedHeight = (totalHeight+400) - (itemsHeight); return unusedHeight; } // Chargez les premiers articles au chargement de la page if ($(window).width() > 991) { setTimeout(function() { var unusedHeight = calculateUnusedHeight(); //console.log("unUsed"+unusedHeight); loadMoreArticles(unusedHeight); }, 1500); } }); }, 1000); </script> <script> setTimeout(function() { $(document).ready(function() { // Fonction pour vérifier le statut de la publicité AdSense après un délai de 2 secondes setTimeout(function() { $(".adsbygoogle").each(function() { var self = $(this); var adStatus = self.attr("data-ad-status"); //console.log("test"+adStatus); if (adStatus === "unfilled") { removeParentDiv(self); // Appel de la fonction pour manipuler la div parent } }); }, 2000); // Attendre 2 secondes // Fonction pour manipuler la div parent function removeParentDiv(element) { var parentDiv = element.closest('#adsense-right'); if (parentDiv.length > 0) { parentDiv.remove(); // Supprimer la div parent si elle est trouvée } } }); }, 1000); // Écoute de l'événement de mouvement de la souris pour charger le script Google AdSense lorsque l'utilisateur effectue une action document.addEventListener('mousemove', function() { // Chargement du script Google AdSense //chargerScriptGoogleAdsenseVertical(); var script = document.createElement('script'); script.src = 'https://www.googletagmanager.com/gtag/js?id=G-ESDTKX54VK'; script.async = true; // Ajoutez le script à l'en-tête du document document.head.appendChild(script); // Initialisez Google Tag Manager lorsque le script est chargé script.onload = function() { window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-ESDTKX54VK'); }; chargerScriptGoogleAdsenseSquare(); // Suppression de l'écouteur d'événements après le premier déclenchement pour éviter de charger le script à nouveau document.removeEventListener('mousemove', arguments.callee); }); // Fonction pour charger le script Google AdSense function chargerScriptGoogleAdsenseSquare() { // Créez un élément script var script = document.createElement('script'); script.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3922865260272328"; script.async = true; script.crossOrigin = "anonymous"; // Ajoutez une fonction pour exécuter lorsque le script est chargé script.onload = function() { // Créez un élément ins (bloc de publicité AdSense) var ins = document.createElement('ins'); ins.className = "adsbygoogle adsense-right-square"; ins.style = ""; ins.setAttribute('data-ad-client', 'ca-pub-3922865260272328'); ins.setAttribute('data-ad-slot', '2613927101'); // ins.setAttribute('data-ad-format', 'auto'); // ins.setAttribute('data-full-width-responsive', 'true'); // Ajoutez le bloc de publicité à l'emplacement désiré var parentElement = document.querySelector('div[page="0"] .widget.adsenselink.d-none.d-md-none.d-lg-block'); parentElement.appendChild(ins); // Appelez la fonction push() pour afficher la publicité (adsbygoogle = window.adsbygoogle || []).push({}); // Surveillez les changements de l'attribut data-ad-status de l'élément ins var observer = new MutationObserver(function(mutationsList, observer) { mutationsList.forEach(function(mutation) { if (mutation.attributeName === "data-ad-status") { // Récupérez la valeur de l'attribut data-ad-status var status = ins.getAttribute("data-ad-status"); //console.log("Attribut data-ad-status a changé :", status); // Faites ce que vous devez avec la valeur récupérée if (status != "filled") { $('#adsense-right').remove(); // Appel de la fonction pour manipuler la div parent } } }); }); // Configurez l'observateur pour surveiller les changements d'attribut de l'élément ins observer.observe(ins, { attributes: true }); }; // Ajoutez le script à l'emplacement désiré var parentElement = document.querySelector('div[page="0"] .widget.adsenselink.d-none.d-md-none.d-lg-block'); parentElement.appendChild(script); } function chargerScriptGoogleAdsenseVertical() { // Création de l'élément script var script = document.createElement('script'); script.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3922865260272328"; script.async = true; script.crossOrigin = "anonymous"; // Ajout d'une fonction à exécuter lorsque le script est chargé script.onload = function() { // Création de l'élément ins (bloc de publicité AdSense) var ins = document.createElement('ins'); ins.className = "adsbygoogle adsense-right-vertical"; ins.style = ""; ins.setAttribute('data-ad-client', 'ca-pub-3922865260272328'); ins.setAttribute('data-ad-slot', '9756184449'); // Ajout du bloc de publicité à l'emplacement désiré var parentElement = document.querySelector('div[page="0"] .widget.sidebaritem.d-none.d-md-none.d-lg-block.adsense-right-vertical-div'); parentElement.appendChild(ins); // Appel de la fonction push() pour afficher la publicité (adsbygoogle = window.adsbygoogle || []).push({}); var observer = new MutationObserver(function(mutationsList, observer) { mutationsList.forEach(function(mutation) { if (mutation.attributeName === "data-ad-status") { // Récupérez la valeur de l'attribut data-ad-status var status = ins.getAttribute("data-ad-status"); console.log("Attribut data-ad-status a changé :", status); // Faites ce que vous devez avec la valeur récupérée if (status != "filled") { document.querySelector('div[page="0"] .widget.sidebaritem.d-none.d-md-none.d-lg-block.adsense-right-vertical-div').remove(); // Appel de la fonction pour manipuler la div parent } } }); }); // Configurez l'observateur pour surveiller les changements d'attribut de l'élément ins observer.observe(ins, { attributes: true }); }; // Ajout du script à l'emplacement désiré var parentElement = document.querySelector('div[page="0"] .widget.sidebaritem.d-none.d-md-none.d-lg-block.adsense-right-vertical-div'); parentElement.appendChild(script); } </script> <script> function handleScroll() { var scrollPosition = window.scrollY; // Position de défilement par rapport au haut de la page var targetDiv = document.getElementById('navigation'); // Remplacez 'votre-div' par l'ID de votre div cible // Si la position de défilement est supérieure à 0, ajoutez la classe if (scrollPosition > 0) { targetDiv.classList.add('header--fixed'); // Remplacez 'votre-classe' par le nom de la classe que vous souhaitez ajouter } else { // Sinon, supprimez la classe targetDiv.classList.remove('header--fixed'); } } // Écoutez l'événement de défilement window.addEventListener('scroll', handleScroll); </script> <script> setTimeout(function() { $(document).ready(function () { // Définir une variable globale pour vérifier si la nouvelle page a été chargée let nouvellePageChargee = false; // Fonction pour charger la page suivante function chargerPageSuivante(url) { // Charger le contenu de la page suivante via AJAX ou fetch fetch(url) .then(response => response.text()) .then(data => { // Créer un nouvel élément div pour contenir le contenu HTML const tempDiv = document.createElement('div'); tempDiv.innerHTML = data; var navigationLogoElements = tempDiv.querySelectorAll('.navigation-logo'); // Parcourir tous les éléments trouvés et ajouter un style pour les cacher navigationLogoElements.forEach(function(element) { element.style.display = 'none'; }); var h1ArticleElement = tempDiv.querySelector('#h1article'); // Appliquer le style à l'élément sélectionné if (h1ArticleElement) { h1ArticleElement.style.marginBottom = '46px'; h1ArticleElement.style.marginTop = '0px'; h1ArticleElement.style.marginLeft = '10px'; } var articleheader = tempDiv.querySelector('#article-header'); if (articleheader) { articleheader.style.paddingBottom = '20px'; articleheader.style.paddingTop = '20px'; } var h1header = tempDiv.querySelector('#h1article'); if (h1header) { h1header.style.maxWidth = '70%'; } var screenWidth = window.innerWidth; var imgElement = tempDiv.querySelector('.article-main-img'); if (screenWidth > 900 && imgElement) { imgElement.src = 'https://www.tempmail.us.com/images/80/80738e14f3a3bf39f19b55b8d7992fe0.png/%D8%A7%DB%8C%D8%A6%D8%B1-%D9%81%D9%84%D9%88-dags-%DA%A9%DB%92-%D8%B0%D8%B1%DB%8C%D8%B9%DB%92-snowflake-%D9%85%DB%8C%DA%BA-javascript-%D9%BE%D8%B1-%D9%85%D8%A8%D9%86%DB%8C-%D8%B0%D8%AE%DB%8C%D8%B1%DB%81-%D8%B4%D8%AF%DB%81-%D8%B7%D8%B1%DB%8C%D9%82%DB%81-%DA%A9%D8%A7%D8%B1-%DA%A9%D9%88-%D8%A7%D9%86%D8%AC%D8%A7%D9%85-%D8%AF%DB%8C%D9%86%DB%92-%DA%A9%DB%92-%DA%86%DB%8C%D9%84%D9%86%D8%AC%D8%B2.png'; } var desktoplogo = tempDiv.querySelector('.newlogo-desktop'); if (desktoplogo) { var imgElement = document.createElement("img"); imgElement.className = "lazyload"; imgElement.alt = "Temp mail SuperHeros"; if (window.innerWidth > 900) { imgElement.src = "https://www.tempmail.us.com/images/site/tempmail-superheros.webp"; imgElement.width = 343; imgElement.height = 350; desktoplogo.appendChild(imgElement); } } var adsensearticle = tempDiv.querySelector('#adsense-article'); if (adsensearticle) { var scriptElement = document.createElement('script'); scriptElement.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3922865260272328"; scriptElement.async = true; scriptElement.crossorigin = "anonymous"; var insElement = document.createElement('ins'); insElement.className = "adsbygoogle"; insElement.style.display = "block"; insElement.setAttribute('data-ad-client', 'ca-pub-3922865260272328'); insElement.setAttribute('data-ad-slot', '4326653974'); insElement.setAttribute('style', 'display:inline-block;max-width:100%;width:100%;min-height:140px;max-height:140px;padding-top:10px;padding-bottom:0px;'); // Insertion des éléments dans la div #index-adsense var adsContainer = tempDiv.querySelector('#adsense-article'); // adsContainer.style.border = "2px solid #dfe6ec"; // adsContainer.style.paddingTop = "5px"; //adsContainer.style.marginTop = "5px"; // adsContainer.style.height = "110px"; // adsContainer.style.paddingBottom = "0px"; //adsContainer.style.marginBottom = "5px"; // adsContainer.style.backgroundColor = "#f7f8fa"; // adsContainer.style.borderRadius = "5px"; adsContainer.appendChild(scriptElement); adsContainer.appendChild(insElement); } var adsensearticlefaq = tempDiv.querySelector('#adsense-article-faq'); if (adsensearticlefaq) { var scriptElement = document.createElement('script'); scriptElement.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3922865260272328"; scriptElement.async = true; scriptElement.crossorigin = "anonymous"; var insElement = document.createElement('ins'); insElement.className = "adsbygoogle"; insElement.style.display = "block"; insElement.setAttribute('data-ad-client', 'ca-pub-3922865260272328'); insElement.setAttribute('data-ad-slot', '4326653974'); insElement.setAttribute('style', 'display:inline-block;max-width:100%;width:100%;min-height:140px;max-height:140px;padding-top:10px;padding-bottom:0px;'); // Insertion des éléments dans la div #index-adsense var adsContainer = tempDiv.querySelector('#adsense-article-faq'); // adsContainer.style.border = "2px solid #dfe6ec"; // adsContainer.style.paddingTop = "5px"; //adsContainer.style.marginTop = "5px"; // adsContainer.style.height = "110px"; // adsContainer.style.paddingBottom = "0px"; //adsContainer.style.marginBottom = "5px"; // adsContainer.style.backgroundColor = "#f7f8fa"; // adsContainer.style.borderRadius = "5px"; adsContainer.appendChild(scriptElement); adsContainer.appendChild(insElement); } var adsensearticlefaq = tempDiv.querySelector('#adsense-article-square'); if (adsensearticlefaq) { var scriptElement = document.createElement('script'); scriptElement.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3922865260272328"; scriptElement.async = true; scriptElement.crossorigin = "anonymous"; var insElement = document.createElement('ins'); insElement.className = "adsbygoogle"; insElement.style.display = "block"; insElement.setAttribute('data-ad-client', 'ca-pub-3922865260272328'); insElement.setAttribute('data-ad-slot', '4326653974'); insElement.setAttribute('style', 'display:inline-block;width:100%;height:auto;max-width:100%;min-height:350px;max-height:350px;margin-top:10px;margin-bottom:8px;'); // Insertion des éléments dans la div #index-adsense var adsContainer = tempDiv.querySelector('#adsense-article-square'); // adsContainer.style.border = "2px solid #dfe6ec"; // adsContainer.style.paddingTop = "5px"; //adsContainer.style.marginTop = "5px"; // adsContainer.style.height = "110px"; // adsContainer.style.paddingBottom = "0px"; //adsContainer.style.marginBottom = "5px"; // adsContainer.style.backgroundColor = "#f7f8fa"; // adsContainer.style.borderRadius = "5px"; adsContainer.appendChild(scriptElement); adsContainer.appendChild(insElement); } const pageCount = document.querySelectorAll('#content #page_count').length; //console.log('Nombre de pages chargées:', pageCount); // Récupérer tous les éléments avec l'attribut page=1 dans tempDiv const elementsWithPageAttribute = tempDiv.querySelectorAll('[page="0"]'); // Mettre à jour les attributs de ces éléments avec la valeur de pageCount elementsWithPageAttribute.forEach(element => { element.setAttribute('page', pageCount); }); // Extraire et exécuter les scripts de la nouvelle page const scripts = tempDiv.querySelectorAll('script'); scripts.forEach(script => { if (script.type !== 'application/ld+json') { const newScript = document.createElement('script'); // Modifier le contenu du script pour mettre à jour les sélecteurs let scriptContent = script.textContent; // Vérifier si le script contient 'page="0"' et le remplacer par la nouvelle valeur de pageCount // Si le script a un attribut src, le copier if (script.src) { newScript.src = script.src; } else { // Sinon, copier le contenu du script let scriptContent = script.textContent; // Remplacer toutes les occurrences de 'div[page="0"]' par 'div[page="' + pageCount + '"]' scriptContent = scriptContent.replace(/div\[page="0"\]/g, 'div[page="' + pageCount + '"]'); // Assigner le nouveau contenu au script newScript.textContent = scriptContent; } console.log(newScript) document.body.appendChild(newScript); } }); // Ajouter le contenu de la nouvelle page à la page actuelle document.getElementById('content').appendChild(tempDiv); if (pageCount!=0) { initPositioning(pageCount); (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({}); } // Compter le nombre de div avec l'ID "page_count" }) .catch(error => { console.error('Erreur lors du chargement de la page suivante:', error); }); } // Événement de défilement de la fenêtre window.addEventListener('scroll', function() { // Vérifier si l'utilisateur a atteint le bas de la page var distanceRestante = document.body.offsetHeight - (window.innerHeight + window.scrollY); // Vérifier si l'utilisateur est près du bas de la page if (!nouvellePageChargee && ($(window).scrollTop() + $(window).height()) >= $(document).height() - 100) { // Mettre à jour l'URL dans la barre d'adresse du navigateur avec l'URL de la page suivante window.history.pushState({}, '', 'https://www.tempmail.us.com/ur/snowflake/%D8%A7%DB%8C%D8%A6%D8%B1-%D9%81%D9%84%D9%88-dags-%DA%A9%DB%92-%D8%B0%D8%B1%DB%8C%D8%B9%DB%92-snowflake-%D9%85%DB%8C%DA%BA-javascript-%D9%BE%D8%B1-%D9%85%D8%A8%D9%86%DB%8C-%D8%B0%D8%AE%DB%8C%D8%B1%DB%81-%D8%B4%D8%AF%DB%81-%D8%B7%D8%B1%DB%8C%D9%82%DB%81-%DA%A9%D8%A7%D8%B1-%DA%A9%D9%88-%D8%A7%D9%86%D8%AC%D8%A7%D9%85-%D8%AF%DB%8C%D9%86%DB%92-%DA%A9%DB%92-%DA%86%DB%8C%D9%84%D9%86%D8%AC%D8%B2'); // Charger la page suivante chargerPageSuivante('https://www.tempmail.us.com/ur/snowflake/%D8%A7%DB%8C%D8%A6%D8%B1-%D9%81%D9%84%D9%88-dags-%DA%A9%DB%92-%D8%B0%D8%B1%DB%8C%D8%B9%DB%92-snowflake-%D9%85%DB%8C%DA%BA-javascript-%D9%BE%D8%B1-%D9%85%D8%A8%D9%86%DB%8C-%D8%B0%D8%AE%DB%8C%D8%B1%DB%81-%D8%B4%D8%AF%DB%81-%D8%B7%D8%B1%DB%8C%D9%82%DB%81-%DA%A9%D8%A7%D8%B1-%DA%A9%D9%88-%D8%A7%D9%86%D8%AC%D8%A7%D9%85-%D8%AF%DB%8C%D9%86%DB%92-%DA%A9%DB%92-%DA%86%DB%8C%D9%84%D9%86%D8%AC%D8%B2'); // Désactiver le gestionnaire d'événements de défilement window.removeEventListener('scroll', arguments.callee); } }); }); }, 1000); </script> <script> setTimeout(function() { $(document).ready(function() { //mobile image top load after pour le page speed var imageLoaded = false; // Pour vérifier si l'image a déjà été chargée $(document).on('touchstart', '*', function(event) { if (!imageLoaded) { var $image = $('#lazyImage'); var imageSrc = $image.data('src'); // Récupère l'URL de l'image depuis data-src // Modifie le src de l'image pour charger l'image $image.attr('src', imageSrc); $image.css('min-width', '109%').css('!important', true); $image.css('height', '250px').css('!important', true); // Marque l'image comme chargée imageLoaded = true; // Optionnel : Désactiver l'écoute de l'événement après chargement pour éviter les appels répétés $(document).off('touchstart'); } }); }); }, 1000); function initPositioning(pageCount) { if ($(window).width() > 1700) { var $page = $('[page="' + pageCount + '"]'); console.log("page count"+pageCount); var $newfaq = $page.find('#newfaq'); if ($newfaq.length) { var topOffset = 75 + $newfaq.outerHeight() - 30; var leftOffset = $newfaq.position().left + 30; //fixed mac issues if ($(window).width()==2072) { leftOffset = $newfaq.position().left + 180; } if ($(window).width()==1792) { leftOffset = $newfaq.position().left + 90; } if ($(window).width()==1728) { leftOffset = $newfaq.position().left + 130; } if ($(window).width()==2030) { leftOffset = $newfaq.position().left + 190; } // Calculer la hauteur totale de #newfaq et des scripts var totalHeight = $newfaq.outerHeight(); console.log("CALCUL LA HAUTEUR DU FAQ TOTALHEIGHT"+totalHeight) var $article = $page.find('#article'); var realarticleheight = $article.outerHeight() - totalHeight; //console.log("REGARDER LA HAUTEUR DE L'ARTICLE SANS FAQ"+realarticleheight) //si ya plus de contenue à droite on update sont height if (totalHeight > realarticleheight) { // $article.css('height', totalHeight + 'px'); } var $summary = $page.find('#summary'); if ($summary.length) { var summaryHeight = $summary.outerHeight(); //console.log("SUMMARY HAUTEUR SI DISPONIBLE "+summaryHeight) } // Réinitialiser topOffset après ajustement de #article topOffset = $newfaq.position().top + $newfaq.outerHeight() - 50; // Positionner les divs script pour chaque page $page.find('[id^=script]').each(function(index) { $(this).css({ 'position': 'absolute', 'top': topOffset + 'px', 'left': leftOffset + 'px' }); topOffset += $(this).outerHeight(); }); var totalHeight = $newfaq.outerHeight(); $page.find('[id^=script]').each(function(index) { if ($(this).css('position') === 'absolute') { totalHeight += $(this).outerHeight(); } }); //console.log("CALCUL LA HAUTEUR DU FAQ + SCRIPT absolute TOTALHEIGHT"+totalHeight) setTimeout(function() { if ($("#source").length) { var source = $page.find('#source'); var sourceHeight = source.outerHeight(); } var realarticleheight = $article.outerHeight(); var totalleft = realarticleheight; var totalright = totalHeight-700; console.log("total left "+totalleft) console.log("total right"+totalright) console.log("summary height"+summaryHeight) console.log("source height"+sourceHeight) if ($("#source").length) { if ((totalleft-totalright)>(summaryHeight+sourceHeight)) { $summary.css({ 'position': 'absolute', 'top': (topOffset-50) + 'px', 'left': leftOffset + 'px', 'max-width': '950px' }); source.css({ 'max-width': '950px' }); if ($(window).width()<2000) { $summary.css({ 'max-width': '750px' }); source.css({ 'max-width': '750px' }); } var newrightheight = topOffset+summaryHeight+550; console.log("new right height"+newrightheight) console.log("totalleft"+totalleft) if (newrightheight>totalleft) { console.log("test") // $article.css('height', newrightheight-500 + 'px'); } } } else { if ((totalleft-totalright)>(summaryHeight)) { $summary.css({ 'position': 'absolute', 'top': (topOffset-50) + 'px', 'left': leftOffset + 'px', 'max-width': '950px' }); if ($(window).width()<2000) { $summary.css({ 'max-width': '750px' }); } var newrightheight = topOffset+summaryHeight+550; console.log("new right height"+newrightheight) console.log("totalleft"+totalleft) if (newrightheight>totalleft) { console.log("test") // $article.css('height', newrightheight-500 + 'px'); } } } }, 1000); //si le summary est disponible et que le totalheight+smuaarry sont plus petit on le déplace a droite //SI LE SUMMARY À DROITE PEUT ETRE MISE À GAUCHE POUR BALANCER LA PAGE /* if ((totalHeight+summaryHeight) < ((realarticleheight-summaryHeight))) { } var $source = $page.find('#source'); if ($(window).width()>2000) { $source.css({ 'position': 'absolute', 'top': (topOffset-50) + 'px', 'left': leftOffset + 'px', 'max-width': '950px' }); } else { $source.css({ 'position': 'absolute', 'top': (topOffset-50) + 'px', 'left': leftOffset + 'px', 'max-width': '750px' }); } */ //------------------------------------------------------------------------ //ON RECALCUL LE CÖTÉ DROITE APRÈS LES MODIFICATION ET ON CONFIRME LE GAUCHE var totalHeight = $newfaq.outerHeight(); $page.find('[id^=script]').each(function(index) { if ($(this).css('position') === 'absolute') { totalHeight += $(this).outerHeight(); } }); if ($summary.length) { totalHeight = totalHeight+$('#summary').outerHeight(); } var elements = []; $page.find('[id^=script]').each(function() { elements.push($(this)); }); // Sort the array by ID in descending order elements.sort(function(a, b) { var aNum = parseInt(a.attr('id').replace('script', '')); var bNum = parseInt(b.attr('id').replace('script', '')); return bNum - aNum; }); //console.log("TOTAL HEIGHT VALUE 1 -> "+totalHeight) var $article = $page.find('#article'); realarticleheight = $article.outerHeight(); //console.log("realarticleheight VALUE 1 -> "+realarticleheight ) //-------------------------------------------------------------------- //-------------------------------------------------------------------- SI LE CÖTÉ DROITE EST PLUS LONG QUE LE CÖTÉ GAUCHE if (totalHeight > realarticleheight) { //console.log("TOTAL HEIGHT + GRAND QUE realarticleheight") var difference = totalHeight - realarticleheight; var lastStaticElement = null; if (difference > 500) { elements.forEach(function(item) { if ((difference - item.outerHeight()) > 0) { // Mark the last element that should be static lastStaticElement = item; item.css({ 'position': 'static', 'top': '', 'left': '' }); } // Update the difference for the next iteration difference -= item.outerHeight(); }); // Apply 'static' only to the last element if it exists if (lastStaticElement) { lastStaticElement.css({ 'position': 'static', 'top': '', 'left': '' }); } } var totalHeight = $newfaq.outerHeight(); $page.find('[id^=script]').each(function(index) { if ($(this).css('position') === 'absolute') { totalHeight += $(this).outerHeight(); } }); var $article = $page.find('#article'); realarticleheight = $article.outerHeight(); var difference = totalHeight - realarticleheight; setTimeout(function() { console.log("difference "+difference); /*if (difference > 500) { $summary.css({ 'position': 'absolute', 'top': topOffset + 'px', 'left': leftOffset + 'px' }); } */ // if (difference > 500) { $summary.css({ 'position': 'static', 'top': '', 'left': '' }); //} console.log("passer par la") var $article = $page.find('#article'); // $article.css('height', '11px'); if ($summary.length) { var summaryHeight = $summary.outerHeight(); if ($summary.css('position') === 'absolute') { totalHeight = totalHeight; // $article.css('height', totalHeight + 'px'); } } //console.log("TOTAL HEIGHT APRÈS DÉPLACEMENT VERS LA DROITE "+totalHeight) var $article = $page.find('#article'); //console.log("ARTICLE HEIGHT APRÈS DÉPLACEMENT VER LA DROITE "+$article.outerHeight()) if (totalHeight>$article.outerHeight()) { // $article.css('height', totalHeight+800 + 'px'); } }, 2000); } //-------------------------------------------------------------------- } } } </script> <script> document.addEventListener("DOMContentLoaded", function() { var imgElement = document.createElement("img"); imgElement.className = "lazyload"; imgElement.alt = "Temp mail SuperHeros"; if (window.innerWidth > 900) { imgElement.src = "https://www.tempmail.us.com/images/site/tempmail-superheros.webp"; imgElement.width = 343; imgElement.height = 350; document.querySelector(".newlogo-desktop").appendChild(imgElement); var img = document.getElementById("article-logo"); if (img) { img.src = "https://www.tempmail.us.com/images/site/logo-95px.webp"; img.width = 95; img.height = 90; } } else { imgElement.src = "https://www.tempmail.us.com/images/site/tempmail-superheros-mobile.webp"; imgElement.width = 147; imgElement.height = 150; document.querySelector(".newlogo").appendChild(imgElement); } }); document.addEventListener("DOMContentLoaded", function() { var imageBackgroundDiv = document.getElementById('image-background'); if (!imageBackgroundDiv) return; // Exit if the div doesn't exist var bg320 = imageBackgroundDiv.getAttribute('data-bg-320'); var bg540 = imageBackgroundDiv.getAttribute('data-bg-540'); var bg768 = imageBackgroundDiv.getAttribute('data-bg-768'); var bg1366 = imageBackgroundDiv.getAttribute('data-bg-1366'); var bg1536 = imageBackgroundDiv.getAttribute('data-bg-1536'); var bg1920 = imageBackgroundDiv.getAttribute('data-bg-1920'); var bg2732 = imageBackgroundDiv.getAttribute('data-bg-2732'); var screenWidth = window.innerWidth; if (screenWidth <= 320) { imageBackgroundDiv.style.backgroundImage = `url(${bg320})`; } else if (screenWidth <= 540) { imageBackgroundDiv.style.backgroundImage = `url(${bg540})`; } else if (screenWidth <= 768) { imageBackgroundDiv.style.backgroundImage = `url(${bg768})`; } else if (screenWidth <= 1366) { imageBackgroundDiv.style.backgroundImage = `url(${bg1366})`; } else if (screenWidth <= 1536) { imageBackgroundDiv.style.backgroundImage = `url(${bg1536})`; } else if (screenWidth <= 1920) { imageBackgroundDiv.style.backgroundImage = `url(${bg1920})`; } else { imageBackgroundDiv.style.backgroundImage = `url(${bg2732})`; } }); </script> <script> document.addEventListener("DOMContentLoaded", function() { var screenWidth = window.innerWidth; var imgElement = document.querySelector('.article-main-img'); if (screenWidth > 900 && imgElement) { imgElement.src = 'https://www.tempmail.us.com/images/9a/9a679053963ebb61b232c79134b8a627-766px.webp/html-%D8%A8%D9%B9%D9%86%D9%88%DA%BA-%DA%A9%D8%A7-%D8%A7%D8%B3%D8%AA%D8%B9%D9%85%D8%A7%D9%84-%DA%A9%D8%B1%D8%AA%DB%92-%DB%81%D9%88%D8%A6%DB%92-%D9%B9%D8%A7%D8%A6%D9%BE%D9%86%DA%AF-%DA%AF%DB%8C%D9%85-%DA%A9%DB%92-%D9%84%DB%8C%DB%92-%D8%AC%D8%A7%D9%88%D8%A7-%D8%A7%D8%B3%DA%A9%D8%B1%D9%BE%D9%B9-%D9%B9%D8%A7%D8%A6%D9%85%D8%B1-%D9%88%DB%8C%D9%84%DB%8C%D9%88-%DA%A9%D9%88-%DA%A9%DB%8C%D8%B3%DB%92-%D8%AA%D8%A8%D8%AF%DB%8C%D9%84-%DA%A9%D8%B1%DB%8C%DA%BA-766px.webp'; } }); </script> <script> document.addEventListener("DOMContentLoaded", function() { document.addEventListener('mousemove', function() { var windowWidth = window.innerWidth; if (windowWidth > 900) { var scriptElement = document.createElement('script'); scriptElement.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3922865260272328"; scriptElement.async = true; scriptElement.crossorigin = "anonymous"; var insElement = document.createElement('ins'); insElement.className = "adsbygoogle"; insElement.style.display = "block"; insElement.setAttribute('data-ad-client', 'ca-pub-3922865260272328'); insElement.setAttribute('data-ad-slot', '4326653974'); insElement.setAttribute('style', 'display:inline-block;max-width:100%;width:100%;min-height:140px;max-height:140px;padding-top:10px;padding-bottom:0px;'); // Insertion des éléments dans la div #index-adsense var adsContainer = document.getElementById("adsense-article"); // adsContainer.style.border = "2px solid #dfe6ec"; // adsContainer.style.paddingTop = "5px"; //adsContainer.style.marginTop = "5px"; // adsContainer.style.height = "110px"; // adsContainer.style.paddingBottom = "0px"; //adsContainer.style.marginBottom = "5px"; // adsContainer.style.backgroundColor = "#f7f8fa"; // adsContainer.style.borderRadius = "5px"; adsContainer.appendChild(scriptElement); adsContainer.appendChild(insElement); (adsbygoogle = window.adsbygoogle || []).push({}); // Création des éléments script et ins var scriptElement = document.createElement('script'); scriptElement.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3922865260272328"; scriptElement.async = true; scriptElement.crossorigin = "anonymous"; var insElement = document.createElement('ins'); insElement.className = "adsbygoogle"; insElement.style.display = "block"; insElement.setAttribute('data-ad-client', 'ca-pub-3922865260272328'); insElement.setAttribute('data-ad-slot', '4395216949'); insElement.setAttribute('style', 'display:block;width:100%;height:auto;max-width:100%;min-height:140px;max-height:140px;margin-top:10px;margin-bottom:8px;'); var adsContainer = document.getElementById("adsense-article-faq"); // adsContainer.style.border = "2px solid #dfe6ec"; // adsContainer.style.paddingTop = "10px"; // adsContainer.style.paddingBottom = "0px"; // adsContainer.style.marginBottom = "10px"; // adsContainer.style.height = "110px"; // adsContainer.style.backgroundColor = "#f7f8fa"; // adsContainer.style.borderRadius = "5px"; if (adsContainer) { adsContainer.appendChild(scriptElement); adsContainer.appendChild(insElement); // Rechargez les annonces pour qu'elles soient affichées correctement (adsbygoogle = window.adsbygoogle || []).push({}); } // Création des éléments script et ins var scriptElement = document.createElement('script'); scriptElement.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3922865260272328"; scriptElement.async = true; scriptElement.crossorigin = "anonymous"; var insElement = document.createElement('ins'); insElement.className = "adsbygoogle"; insElement.style.display = "block"; insElement.setAttribute('data-ad-client', 'ca-pub-3922865260272328'); insElement.setAttribute('data-ad-slot', '4395216949'); insElement.setAttribute('style', 'display:inline-block;width:100%;height:auto;max-width:100%;min-height:350px;max-height:350px;margin-top:10px;margin-bottom:8px;'); var adsContainer = document.getElementById("adsense-article-square"); // adsContainer.style.border = "2px solid #dfe6ec"; // adsContainer.style.paddingTop = "10px"; // adsContainer.style.paddingBottom = "0px"; // adsContainer.style.marginBottom = "10px"; // adsContainer.style.height = "110px"; // adsContainer.style.backgroundColor = "#f7f8fa"; // adsContainer.style.borderRadius = "5px"; if (adsContainer) { adsContainer.appendChild(scriptElement); adsContainer.appendChild(insElement); // Rechargez les annonces pour qu'elles soient affichées correctement (adsbygoogle = window.adsbygoogle || []).push({}); } } document.removeEventListener('mousemove', arguments.callee); }); }); setTimeout(function() { var pubLoaded = false; // Pour vérifier si l'image a déjà été chargée $(document).on('touchstart', '*', function(event) { if (!pubLoaded) { // Marque la pub comme chargée pubLoaded = true; // Optionnel : Désactiver l'écoute de l'événement après chargement pour éviter les appels répétés $(document).off('touchstart'); var windowWidth = window.innerWidth; if (windowWidth < 900) { var scriptElement = document.createElement('script'); scriptElement.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3922865260272328"; scriptElement.async = true; scriptElement.crossorigin = "anonymous"; var insElement = document.createElement('ins'); insElement.className = "adsbygoogle"; insElement.style.display = "block"; insElement.setAttribute('data-ad-client', 'ca-pub-3922865260272328'); insElement.setAttribute('data-ad-slot', '4326653974'); insElement.setAttribute('style', 'display:inline-block;max-width:100%;width:100%;min-height:140px;max-height:140px;padding-top:10px;padding-bottom:0px;'); // Insertion des éléments dans la div #index-adsense var adsContainer = document.getElementById("adsense-article"); // adsContainer.style.border = "2px solid #dfe6ec"; // adsContainer.style.paddingTop = "5px"; //adsContainer.style.marginTop = "5px"; // adsContainer.style.height = "110px"; // adsContainer.style.paddingBottom = "0px"; //adsContainer.style.marginBottom = "5px"; // adsContainer.style.backgroundColor = "#f7f8fa"; // adsContainer.style.borderRadius = "5px"; adsContainer.appendChild(scriptElement); adsContainer.appendChild(insElement); (adsbygoogle = window.adsbygoogle || []).push({}); // Création des éléments script et ins var scriptElement = document.createElement('script'); scriptElement.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3922865260272328"; scriptElement.async = true; scriptElement.crossorigin = "anonymous"; var insElement = document.createElement('ins'); insElement.className = "adsbygoogle"; insElement.style.display = "block"; insElement.setAttribute('data-ad-client', 'ca-pub-3922865260272328'); insElement.setAttribute('data-ad-slot', '4395216949'); insElement.setAttribute('style', 'display:block;width:100%;height:auto;max-width:100%;min-height:140px;max-height:140px;margin-top:10px;margin-bottom:8px;'); var adsContainer = document.getElementById("adsense-article-faq"); // adsContainer.style.border = "2px solid #dfe6ec"; // adsContainer.style.paddingTop = "10px"; // adsContainer.style.paddingBottom = "0px"; // adsContainer.style.marginBottom = "10px"; // adsContainer.style.height = "110px"; // adsContainer.style.backgroundColor = "#f7f8fa"; // adsContainer.style.borderRadius = "5px"; if (adsContainer) { adsContainer.appendChild(scriptElement); adsContainer.appendChild(insElement); // Rechargez les annonces pour qu'elles soient affichées correctement (adsbygoogle = window.adsbygoogle || []).push({}); } // Création des éléments script et ins var scriptElement = document.createElement('script'); scriptElement.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3922865260272328"; scriptElement.async = true; scriptElement.crossorigin = "anonymous"; var insElement = document.createElement('ins'); insElement.className = "adsbygoogle"; insElement.style.display = "block"; insElement.setAttribute('data-ad-client', 'ca-pub-3922865260272328'); insElement.setAttribute('data-ad-slot', '4395216949'); insElement.setAttribute('style', 'display:inline-block;width:100%;height:auto;max-width:100%;min-height:350px;max-height:350px;margin-top:10px;margin-bottom:8px;'); var adsContainer = document.getElementById("adsense-article-square"); // adsContainer.style.border = "2px solid #dfe6ec"; // adsContainer.style.paddingTop = "10px"; // adsContainer.style.paddingBottom = "0px"; // adsContainer.style.marginBottom = "10px"; // adsContainer.style.height = "110px"; // adsContainer.style.backgroundColor = "#f7f8fa"; // adsContainer.style.borderRadius = "5px"; if (adsContainer) { adsContainer.appendChild(scriptElement); adsContainer.appendChild(insElement); // Rechargez les annonces pour qu'elles soient affichées correctement (adsbygoogle = window.adsbygoogle || []).push({}); } } } }); }, 1000); </script> </body> </html>