| 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>이 방법은 Jest를 사용한 단위 테스트에 사용됩니다. 타이머가 올바르게 업데이트되는지 확인하기 위해 테스트 중인 함수(예:changeTimer())를 평가하는 테스트 케이스를 정의합니다. 다양한 시나리오에서 코드가 예상대로 작동하도록 보장합니다.</td> </tr> <tr> <td>expect()</td> <td>업데이트된 타이머와 같은 실제 값이 예상 값과 일치하는지 확인하는 Jest 명령입니다. 이는 버튼 클릭 후 gameTime 및 document.title이 올바르게 업데이트되는지 확인하기 위해 단위 테스트에 사용됩니다.</td> </tr> <tr> <td>toBe()</td> <td>엄격한 평등을 확인하는 또 다른 Jest 명령입니다. ChangeTimer()를 호출한 후 게임 시간이 정확히 예상한 시간(예: 30초 동안 30,000ms)인지 확인합니다.</td> </tr> <tr> <td>getElementById()</td> <td>ID로 특정 버튼을 선택하는 데 사용됩니다(예: '30', '60'). 이 메서드는 이벤트 리스너를 버튼에 연결하고 사용자 상호 작용에 대한 응답으로 타이머의 동적 변경을 트리거하는 데 중요합니다.</td> </tr></table><h3 id="dev1">JavaScript 및 HTML 버튼을 사용하여 동적 타이머 만들기</h3><div class="bordersh3"></div><p>위에 제공된 스크립트는 사용자가 HTML 버튼을 클릭하여 타이핑 게임에서 게임 타이머를 동적으로 조정할 수 있도록 설계되었습니다. 처음에는 변수를 선언합니다. <b>게임시간</b>, 밀리초 단위로 시간을 유지합니다(기본적으로 30초, 밀리초로 변환하려면 1000을 곱함). 핵심 기능은 다음과 같습니다. <b>변경타이머</b> 클릭한 버튼에 따라 타이머 값을 업데이트하는 함수입니다. 이 메소드는 버튼 값(예: 30, 60 또는 90)을 수신하고 <b>게임 시간</b> 그에 따라 가변적입니다. 또한 스크립트는 선택한 타이머 기간을 반영하도록 페이지 제목을 업데이트하여 사용자에게 시간이 얼마나 있는지 명확하게 보여줍니다.</p><p>동적 동작을 위해 이벤트 리스너, 특히 <b>addEventListener</b> 명령. 이를 통해 사용자가 버튼을 클릭할 때 스크립트가 반응할 수 있습니다. 각 버튼에는 ID가 할당되어 있으며 클릭하면 <b>변경타이머</b> 함수, 해당 시간 값을 전달합니다. 이 접근 방식은 HTML 구조에서 반복적인 인라인 JavaScript가 필요 없이 여러 버튼을 효율적으로 처리하는 데 유용합니다. 스크립트에는 다음과 같은 인라인 이벤트 핸들러를 사용할 수 있는 대체 옵션도 포함되어 있습니다. <b>클릭 시</b> 모듈성보다 단순성을 선호하는 경우.</p><p>대체 솔루션에서는 <b>클릭 시</b> 버튼에 대한 이벤트입니다. 이 메소드는 <b>변경타이머</b> 버튼을 클릭하면 바로 작동합니다. 이는 간단한 접근 방식이지만 이벤트 리스너 메서드의 유연성이 부족합니다. 이 방법의 단순성은 더 작고 덜 복잡한 애플리케이션에 유용합니다. 그러나 확장 가능한 코드의 경우 이벤트 리스너를 사용하면 더 많은 유연성을 제공하고 HTML 구조를 직접 수정하지 않고도 스크립트를 더 쉽게 업데이트할 수 있습니다. 두 가지 방법 모두 동일한 문제를 해결하는 것을 목표로 합니다. 즉, 사용자의 선택에 따라 타이머를 조정하고 제목을 동적으로 업데이트하는 것입니다.</p><p>마지막으로 JavaScript 테스트 프레임워크인 Jest를 사용하여 단위 테스트를 구현합니다. 그만큼 <b>시험</b> 기능은 타이머가 제대로 업데이트되는지 확인하는 데 중요합니다. 타이머가 30초, 60초 또는 90초로 조정되는지 여부와 같은 여러 시나리오를 테스트함으로써 이러한 단위 테스트는 스크립트의 정확성을 보장합니다. 다음과 같은 명령 <b>예상하다</b> 그리고 <b>장차 ~ 가 되는</b> 실제 타이머 값과 페이지 제목이 예상 결과와 일치하는지 확인하는 데 사용됩니다. 이 테스트 단계에서는 타이머 로직이 다양한 사용 사례에서 제대로 작동하는지 확인하여 솔루션의 견고성에 대한 확신을 제공합니다.<div id="script0"><h3>타이핑 게임용 HTML 버튼으로 타이머 값 변경</h3><div class="bordersh3"></div><p class="langprog">동적 시간 업데이트 및 제목 조정을 갖춘 JavaScript 기반 프런트 엔드 접근 방식</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>대체 접근 방식: 인라인 HTML 및 JavaScript 함수 사용</h3><div class="bordersh3"></div><p class="langprog">버튼 클릭 시 직접 함수 호출이 가능한 HTML의 인라인 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>다양한 환경에서의 타이머 값 변경에 대한 단위 테스트</h3><div class="bordersh3"></div><p class="langprog">프론트 엔드 환경 검증을 위해 Jest를 사용한 JavaScript 기반 단위 테스트</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> 기능. 타이머가 설정되면, 간격 설정 매초 타이머 값을 줄이는 카운트다운을 만드는 데 사용할 수 있습니다. 타이머가 0에 도달하면 이 기능은 게임을 중지하거나 사용자에게 시간이 다되었음을 알릴 수 있습니다. 버튼을 사용하여 타이머를 동적으로 변경하는 기능과 결합된 이 기능은 게임 플레이 경험을 크게 향상시킵니다. 반응형 인터페이스는 플레이어의 참여를 유지하는 데 핵심이며 실시간 피드백은 이를 달성하는 한 가지 방법입니다.</p><p>또한 오류 처리도 고려해야 합니다. 예를 들어 사용자가 타이머를 설정하지 않고 게임을 시작하려고 하면 유효한 시간을 선택하라는 메시지를 표시할 수 있습니다. 유효성 검사 메커니즘을 통합하면 게임이 원활하게 작동하고 잠재적인 문제를 줄일 수 있습니다. 이러한 유형의 검증은 사용자 경험을 향상시킬 뿐만 아니라 게임의 안정성에도 기여하여 플레이어가 불필요한 혼란에 직면하지 않도록 보장합니다.</p><div id="newfaq"><div id="adsense-article-faq"></div><h4 id="faq">JavaScript의 타이머 사용자 정의에 대한 일반적인 질문</h4><div class="bordersh4"></div><ol> <li>어떻게 사용하나요? <strong>setInterval</strong> 카운트다운을 만들려고?</li> <li>당신은 사용할 수 있습니다 <strong>setInterval</strong> 1000밀리초(1초)마다 실행되도록 설정하고 매번 타이머 값을 줄입니다. 값이 0에 도달하면 다음을 사용하여 카운트다운을 중지할 수 있습니다. <strong>clearInterval</strong>.</li> <li>목적은 무엇입니까? <strong>clearInterval</strong>?</li> <li><strong>clearInterval</strong> 카운트다운이나 시작된 기타 반복 작업을 중지하는 데 사용됩니다. <strong>setInterval</strong>. 0에 도달하면 카운트다운이 중단되도록 하는 것이 중요합니다.</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> JavaScript 애플리케이션의 단위 테스트를 위한 프레임워크 및 구현입니다.</li> <li>사용에 대한 포괄적인 통찰력 <a href="https://www.w3schools.com/js/js_htmldom_eventlistener.asp" target="_blank">addEventListener</a> JavaScript로 이벤트를 처리하는 방법은 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/ko/">
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: 'ko',
addQueryCat: "AND catclean='javascript'",
page: page,
currentid: "100087",
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%EB%A5%BC-%ED%86%B5%ED%95%B4-snowflake%EC%97%90%EC%84%9C-javascript-%EA%B8%B0%EB%B0%98-%EC%A0%80%EC%9E%A5-%ED%94%84%EB%A1%9C%EC%8B%9C%EC%A0%80%EB%A5%BC-%EC%8B%A4%ED%96%89%ED%95%98%EB%8A%94-%EA%B3%BC%EC%A0%9C.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/ko/snowflake/airflow-dag%EB%A5%BC-%ED%86%B5%ED%95%B4-snowflake%EC%97%90%EC%84%9C-javascript-%EA%B8%B0%EB%B0%98-%EC%A0%80%EC%9E%A5-%ED%94%84%EB%A1%9C%EC%8B%9C%EC%A0%80%EB%A5%BC-%EC%8B%A4%ED%96%89%ED%95%98%EB%8A%94-%EA%B3%BC%EC%A0%9C');
// Charger la page suivante
chargerPageSuivante('https://www.tempmail.us.com/ko/snowflake/airflow-dag%EB%A5%BC-%ED%86%B5%ED%95%B4-snowflake%EC%97%90%EC%84%9C-javascript-%EA%B8%B0%EB%B0%98-%EC%A0%80%EC%9E%A5-%ED%94%84%EB%A1%9C%EC%8B%9C%EC%A0%80%EB%A5%BC-%EC%8B%A4%ED%96%89%ED%95%98%EB%8A%94-%EA%B3%BC%EC%A0%9C');
// 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-%EB%B2%84%ED%8A%BC%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC-%ED%83%80%EC%9D%B4%ED%95%91-%EA%B2%8C%EC%9E%84%EC%9D%98-javascript-%ED%83%80%EC%9D%B4%EB%A8%B8-%EA%B0%92%EC%9D%84-%EC%88%98%EC%A0%95%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95-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>
|
