HTML Düğmelerini Kullanarak Yazma Oyununun JavaScript Zamanlayıcı Değeri Nasıl Değiştirilir

HTML Düğmelerini Kullanarak Yazma Oyununun JavaScript Zamanlayıcı Değeri Nasıl Değiştirilir
HTML Düğmelerini Kullanarak Yazma Oyununun JavaScript Zamanlayıcı Değeri Nasıl Değiştirilir

Düğmeleri Kullanarak Oyun Yazmak için Dinamik Zamanlayıcı Ayarı

Bir yazma oyununda, ilgi çekici bir kullanıcı deneyimi sağlamak için oyunun hızını kontrol etmek çok önemlidir. Önemli faktörlerden biri, kullanıcının oyunu veya yazma mücadelesini ne kadar sürede tamamlaması gerektiğini belirleyen zamanlayıcıdır. Kullanıcıların oyun zamanlayıcısını basit HTML düğmeleri aracılığıyla ayarlamasına izin vererek, onlara oyunları üzerinde daha fazla kontrol verebilirsiniz.

Bu makale, oyuncuların düğmeleri kullanarak farklı zamanlayıcı ayarları arasında seçim yapmasına olanak tanıyan JavaScript'te bir çözümün nasıl oluşturulacağını gösterecektir. Örneğin, '30'lar' düğmesinin seçilmesi zamanlayıcıyı 30 saniyeye ayarlayacaktır, '60'lar' düğmesinin tıklanması ise 60 saniyeye değiştirecektir.

JavaScript işlevi, tıklanan düğmeden değeri alacak ve hem zamanlayıcıyı hem de oyunun başlığını dinamik olarak güncelleyecektir. Bu tür bir esneklik, kullanıcı deneyimini geliştirerek oyunu farklı beceri seviyeleri için daha özelleştirilebilir ve eğlenceli hale getirebilir.

Bu kılavuzun sonunda HTML ve JavaScript kullanarak tamamen işlevsel bir zamanlayıcı ayarlama özelliğine sahip olacaksınız. Ayrıca, seçilen zamanlayıcı süresini yansıtacak şekilde sayfa başlığında görüntülenen zamanlayıcı değerinin nasıl güncelleneceğini de ele alacağız.

Emretmek Kullanım örneği
document.querySelector() Tarayıcı sekmesinin başlığını dinamik olarak güncellemek amacıyla HTML öğesini seçmek için kullanılır. Bu yöntem, öğelerin CSS seçicilerine göre seçilmesine özeldir ve burada sayfa başlığının seçilen zamanlayıcı değerine göre değiştirilmesine yardımcı olur.</td> </tr> <tr> <td>addEventListener()</td> <td>Belirli bir olayı (ör. tıklama) bir düğme öğesine bağlar. Bu bağlamda, kullanıcı bir düğmeyi tıklattığında changeTimer() işlevini tetiklemek için kullanılır ve zamanlayıcı ayarlarıyla dinamik etkileşime olanak tanır.</td> </tr> <tr> <td>innerText</td> <td>Bu özellik, bir HTML öğesi içindeki görünür metnin değiştirilmesine olanak tanır. Bu çözümde, bir butona tıklandığında sayfa başlığındaki zamanlayıcı değerinin güncellenmesi için kullanılır.</td> </tr> <tr> <td>onClick</td> <td>changeTimer() işlevini doğrudan düğmenin click olayına eklemek için alternatif yaklaşımda kullanılan bir satır içi olay işleyicisi niteliği. Bu, zamanlayıcıyı dinamik olarak güncellemenin daha basit, daha az modüler bir yolunu sağlar.</td> </tr> <tr> <td>test()</td> <td>Bu yöntem Jest ile birim testinde kullanılır. Zamanlayıcının doğru şekilde güncellendiğinden emin olmak için test edilen işlevin (örneğin, changeTimer()) değerlendirildiği bir test durumunu tanımlar. Kodun farklı senaryolarda beklendiği gibi davranmasını sağlar.</td> </tr> <tr> <td>expect()</td> <td>Gerçek değerin (güncellenmiş zamanlayıcı gibi) beklenen değerle eşleşip eşleşmediğini kontrol eden bir Jest komutu. Birim testlerinde gameTime ve document.title öğelerinin bir düğme tıklatıldıktan sonra doğru şekilde güncellendiğini doğrulamak için kullanılır.</td> </tr> <tr> <td>toBe()</td> <td>Kesin eşitliği kontrol eden başka bir Jest komutu. ChangeTimer() çağrıldıktan sonra oyun süresinin tam olarak beklendiği gibi olmasını sağlar (örneğin, 30 saniye boyunca 30.000 ms).</td> </tr> <tr> <td>getElementById()</td> <td>Belirli düğmeleri kimliklerine göre seçmek için kullanılır (örneğin, 'otuz', 'altmış'). Bu yöntem, olay dinleyicilerini düğmelere eklemek ve kullanıcı etkileşimine yanıt olarak zamanlayıcının dinamik değişimini tetiklemek için önemlidir.</td> </tr></table><h3 id="dev1">JavaScript ve HTML Düğmelerini Kullanarak Dinamik Zamanlayıcılar Oluşturma</h3><div class="bordersh3"></div><p>Yukarıda sağlanan komut dosyaları, kullanıcının bir yazma oyununda HTML düğmelerini tıklatarak oyun zamanlayıcısını dinamik olarak ayarlamasına olanak tanımak için tasarlanmıştır. Başlangıçta bir değişken tanımlıyoruz <b>oyunZamanı</b>, zamanı milisaniye cinsinden tutar (varsayılan olarak 30 saniye, milisaniyeye dönüştürmek için 1000 ile çarpılır). Temel işlevsellik, <b>değişiklikZamanlayıcı</b> Tıklanan düğmeye göre zamanlayıcı değerini güncelleyen işlev. Bu yöntem, düğmenin değerini (örneğin 30, 60 veya 90) alır ve oyunZamanı buna göre değişkenlik gösterir. Ayrıca komut dosyası, seçilen zamanlayıcı süresini yansıtacak şekilde sayfanın başlığını güncelleyerek kullanıcıların ne kadar zamanları olduğunu açıkça belirtir.</p><p>Dinamik davranış için olay dinleyicilerini, özellikle de <b>addEventListener</b> emretmek. Bu, kullanıcı düğmelerden herhangi birini tıklattığında betiğin tepki vermesini sağlar. Her düğmeye bir kimlik atanır ve tıklandığında <b>değişiklikZamanlayıcı</b> İlgili zaman değerini ileten fonksiyon. Bu yaklaşım, HTML yapısında tekrarlanan satır içi JavaScript'e ihtiyaç duymadan birden fazla düğmeyi verimli bir şekilde kullanmak için kullanışlıdır. Komut dosyası ayrıca aşağıdaki gibi satır içi olay işleyicilerini kullanabileceğiniz bir geri dönüş seçeneği de içerir <b>onClick</b> eğer modülerlik yerine basitlik tercih ediliyorsa.</p><p>Alternatif çözümde doğrudan bağlarız. <b>onClick</b> olayı düğmelere aktarın. Bu yöntem, <b>değişiklikZamanlayıcı</b> tıklanan düğmenin hemen ardından çalışır. Bu basit bir yaklaşımdır ancak olay dinleyicisi yönteminin esnekliğinden yoksundur. Bu yöntemin basitliği daha küçük ve daha az karmaşık uygulamalar için kullanışlıdır. Bununla birlikte, daha ölçeklenebilir kod için, olay dinleyicileri daha fazla esneklik sunar ve HTML yapısını doğrudan değiştirmeden komut dosyasında daha kolay güncelleme yapılmasına olanak tanır. Her iki yöntem de aynı sorunu çözmeyi amaçlamaktadır; yani zamanlayıcıyı ayarlamak ve başlığı kullanıcının seçimine göre dinamik olarak güncellemek.</p><p>Son olarak, bir JavaScript test çerçevesi olan Jest'i kullanarak birim testleri uyguluyoruz. <b>test</b> Zamanlayıcının düzgün bir şekilde güncellendiğini doğrulamak için işlevler çok önemlidir. Bu birim testleri, zamanlayıcının 30 saniyeye, 60 saniyeye veya 90 saniyeye ayarlanıp ayarlanmayacağı gibi birden fazla senaryoyu test ederek komut dosyasının doğruluğunu sağlar. Gibi komutlar <b>beklemek</b> Ve <b>olmak</b> gerçek zamanlayıcı değerinin ve sayfa başlığının beklenen sonuçlarla eşleştiğini doğrulamak için kullanılır. Bu test aşaması, zamanlayıcı mantığınızın farklı kullanım durumlarında düzgün şekilde çalışmasını sağlayarak çözümünüzün sağlamlığına güven sağlar.<div id="script0"><h3>Yazma Oyunu için Zamanlayıcı Değerini HTML Düğmeleriyle Değiştirme</h3><div class="bordersh3"></div><p class="langprog">Dinamik zaman güncellemesi ve başlık ayarlaması ile JavaScript tabanlı ön uç yaklaşımı</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>Alternatif Yaklaşım: Satır İçi HTML ve JavaScript İşlevlerini Kullanmak</h3><div class="bordersh3"></div><p class="langprog">Düğme tıklatıldığında doğrudan işlev çağrılarıyla HTML'de satır içi JavaScript</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>Farklı Ortamlarda Zamanlayıcı Değeri Değişiklikleri İçin Birim Testi</h3><div class="bordersh3"></div><p class="langprog">Ön uç ortam doğrulaması için Jest'i kullanan JavaScript tabanlı birim testleri</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>Zamanlayıcı Özelleştirmesi ile Oyun Etkileşimini Geliştirme</h3><div class="bordersh3"></div><p>Yazma oyununda zamanlayıcıyı değiştirirken göz önünde bulundurulması gereken bir diğer husus, genel kullanıcı deneyimi ve arayüzdür. Oyun zamanlayıcısını düğmeler aracılığıyla ayarlamanın yanı sıra, oyunculara seçtikleri zamanlayıcıyla ilgili görsel geri bildirimde bulunmak da önemlidir. Bu, geri sayım ekranı gibi sayfadaki diğer öğelerin güncellenmesiyle sağlanabilir. Zamanlayıcıyı ayarlamak için bir düğmeye tıklandıktan sonra geri sayım sayacı hemen başlamalı ve kullanıcıya gerçek zamanlı geri bildirim sağlanmalıdır. Bu, etkileşimin sorunsuz ve sezgisel olmasını sağlayarak oyunu daha ilgi çekici hale getirir.</p><p>Bunu uygulamak için JavaScript'i kullanabilirsiniz. <b>setInterval</b> işlev. Zamanlayıcı ayarlandıktan sonra, setInterval zamanlayıcı değerini her saniye azaltan bir geri sayım oluşturmak için kullanılabilir. Zamanlayıcı sıfıra ulaştığında, işlev oyunu durdurabilir veya kullanıcıyı sürenin dolduğu konusunda uyarabilir. Bu işlevsellik, düğmeleri kullanarak zamanlayıcıyı dinamik olarak değiştirme yeteneğiyle birleştiğinde oyun deneyimini önemli ölçüde artırır. Duyarlı bir arayüz, oyuncuların ilgisini canlı tutmanın anahtarıdır ve gerçek zamanlı geri bildirim bunu başarmanın bir yoludur.</p><p>Ayrıca hata yönetimi de dikkate alınmalıdır. Örneğin, bir kullanıcı bir zamanlayıcı ayarlamadan oyunu başlatmaya çalışırsa, ona bir mesaj göndererek geçerli bir zaman seçmesini sağlayabilirsiniz. Doğrulama mekanizmalarını dahil ederek oyunun sorunsuz çalışmasını sağlar ve olası sorunları azaltırsınız. Bu tür bir doğrulama yalnızca kullanıcı deneyimini geliştirmekle kalmaz, aynı zamanda oyununuzun güvenilirliğine de katkıda bulunarak oyuncuların gereksiz kafa karışıklığıyla karşılaşmamasını sağlar.</p><div id="newfaq"><div id="adsense-article-faq"></div><h4 id="faq">JavaScript'te Zamanlayıcı Özelleştirmesi Hakkında Sık Sorulan Sorular</h4><div class="bordersh4"></div><ol> <li>Nasıl kullanırım <strong>setInterval</strong> geri sayım oluşturmak için?</li> <li>Kullanabilirsin <strong>setInterval</strong> her 1000 milisaniyede (1 saniye) çalışacak şekilde ayarlayarak ve her seferinde zamanlayıcı değerini azaltarak. Değer sıfıra ulaştığında geri sayımı kullanarak durdurabilirsiniz. <strong>clearInterval</strong>.</li> <li>Amacı nedir? <strong>clearInterval</strong>?</li> <li><strong>clearInterval</strong> tarafından başlatılan bir geri sayımı veya yinelenen herhangi bir eylemi durdurmak için kullanılır. <strong>setInterval</strong>. Sıfıra ulaştığında geri sayımın durmasını sağlamak çok önemlidir.</li> <li>HTML başlığını dinamik olarak nasıl güncelleyebilirim?</li> <li>Kullanmak <strong>document.title</strong> sayfa başlığının metnini ayarlamak için. Bu sizin içinde güncellenebilir <strong>changeTimer</strong> seçilen zaman değerine göre işlev.</li> <li>Bir zamanlayıcı seçerken kullanıcı hatalarını halledebilir miyim?</li> <li>Evet, geri sayımı başlatmadan önce geçerli bir zamanlayıcı seçeneğinin seçilip seçilmediğini kontrol ederek doğrulama ekleyebilirsiniz. Geçerli bir zaman seçilmemişse bir uyarı veya bilgi istemi görüntüleyebilirsiniz.</li> <li>Bir düğmeye tıklandığında bir işlevi nasıl tetiklerim?</li> <li>kullanarak bir düğmeye bir işlev ekleyebilirsiniz. <strong>addEventListener</strong> veya doğrudan kullanarak <strong>onClick</strong> düğmenin HTML öğesinde.</li></ol></div><div id="summary"><h4>Zamanlayıcı Özelleştirmesine İlişkin Son Düşünceler</h4><div class="bordersh4"></div><p>Bir yazma oyununa dinamik zamanlayıcı ayarlarının dahil edilmesi, oyuncu deneyimini önemli ölçüde artırır. Geliştiriciler, kullanıcıların basit HTML düğmelerini kullanarak zamanlayıcıyı değiştirmesine olanak tanıyarak ve oyunun arayüzünü gerçek zamanlı olarak güncelleyerek oyunlarını daha etkileşimli ve esnek hale getirebilirler. Bu tür kontrol, farklı beceri seviyelerinin uyumlaştırılmasına yardımcı olur.</p><p>Olay dinleyicileri, hata işleme ve birim testleri gibi en iyi uygulamaları kullanmak, oyunun sorunsuz çalışmasını ve güvenilir bir kullanıcı deneyimi sunmasını sağlar. Bu özelliklerin uygulanması yalnızca oyunun işlevselliğini geliştirmekle kalmayacak, aynı zamanda oyuncuların hızlı tepki veren, kullanıcı dostu mekaniklerle daha fazla etkileşimde kalmasını sağlayacak.</p><div id="source"> <h6>Zamanlayıcı Özelleştirmesine İlişkin Kaynaklar ve Referanslar</h6> <div class="bordersh2"></div> <ol> <li>DOM manipülasyonu ve olay işleme için JavaScript kullanımına ilişkin ayrıntılı bilgi şu adreste bulunabilir: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide" target="_blank">MDN Web Belgeleri</a> .</li> <li>Anlamak için <a href="https://jestjs.io/docs/getting-started" target="_blank">Alay</a> JavaScript uygulamalarında birim testi için çerçeve ve bunun uygulanması.</li> <li>Kullanıma ilişkin kapsamlı bilgiler <a href="https://www.w3schools.com/js/js_htmldom_eventlistener.asp" target="_blank">addEventListener</a> JavaScript'te etkinlikleri yönetmek için W3Schools'ta mevcuttur.</li> <li>Zamanlayıcılar da dahil olmak üzere web uygulamalarında gerçek zamanlı güncellemelerin önemi şurada tartışılmaktadır: <a href="https://www.smashingmagazine.com/2020/02/real-time-app-web/" target="_blank">Çarpıcı Dergi</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">İnternetteki en iyi performanslı anonim geçici postayı mı arıyorsunuz? Ücretsiz geçici e-posta hizmetimiz en eksiksiz olanıdır, E-posta alın ve gönderin, Favori e-postalarınıza yönlendirmeler oluşturun. Şifrenizi saklayın ve geçici e-postanızı ömür boyu kullanın. POP3, IMAP ve SMTP ücretsiz olarak kullanılabilir.</p> <div style="width:100%;text-align:right;"> <a class="read-more--with-arrow" href="https://www.tempmail.us.com/tr/"> 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 = "Kopyala ve yapıştır"; 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,"İçerik panoya kopyalandı!","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: 'tr', addQueryCat: "AND catclean='javascript'", page: page, currentid: "100105", 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/airflow-dag-ler-araciligiyla-snowflake-te-javascript-tabanli-sakli-prosedurleri-yurutmede-zorluklar.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/tr/snowflake/airflow-dag-ler-araciligiyla-snowflake-te-javascript-tabanli-sakli-prosedurleri-yurutmede-zorluklar'); // Charger la page suivante chargerPageSuivante('https://www.tempmail.us.com/tr/snowflake/airflow-dag-ler-araciligiyla-snowflake-te-javascript-tabanli-sakli-prosedurleri-yurutmede-zorluklar'); // 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; } // 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-dugmelerini-kullanarak-yazma-oyununun-javascript-zamanlayici-degeri-nasil-degistirilir-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>