File manager - Edit - /home/webapp69.cm.in.th/u69319090011/portfolio/ธนเทพ 011/script.js
Back
document.addEventListener('DOMContentLoaded', () => { // 1. Mobile Hamburger Menu Toggle const hamburgerBtn = document.getElementById('hamburger-btn'); const mobileNavMenu = document.getElementById('mobile-nav-menu'); const mobileLinks = document.querySelectorAll('.mobile-link, .mobile-cta'); const toggleMenu = () => { hamburgerBtn.classList.toggle('active'); mobileNavMenu.classList.toggle('active'); // Prevent body scrolling when menu is open if (mobileNavMenu.classList.contains('active')) { document.body.style.overflow = 'hidden'; } else { document.body.style.overflow = ''; } }; hamburgerBtn.addEventListener('click', toggleMenu); // Close mobile menu when clicking links mobileLinks.forEach(link => { link.addEventListener('click', () => { if (mobileNavMenu.classList.contains('active')) { toggleMenu(); } }); }); // 2. Active Menu Link Highlighting on Scroll const sections = document.querySelectorAll('section[id]'); const scrollActive = () => { const scrollY = window.pageYOffset; sections.forEach(current => { const sectionHeight = current.offsetHeight; const sectionTop = current.offsetTop - 80; // offset navbar height const sectionId = current.getAttribute('id'); const navLink = document.querySelector(`.nav-menu a[href*=${sectionId}]`); const bottomLink = document.querySelector(`.sticky-bottom-nav a[href*=${sectionId}]`); if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) { if (navLink) navLink.classList.add('active'); if (bottomLink) bottomLink.classList.add('active'); } else { if (navLink) navLink.classList.remove('active'); if (bottomLink) bottomLink.classList.remove('active'); } }); }; window.addEventListener('scroll', scrollActive); // 3. Contact Form Submission Handling const contactForm = document.getElementById('contact-form'); const formFeedback = document.getElementById('form-feedback'); if (contactForm) { contactForm.addEventListener('submit', (e) => { e.preventDefault(); // Simulate form sending animation/delay const submitBtn = contactForm.querySelector('.btn-submit'); const originalBtnContent = submitBtn.innerHTML; submitBtn.disabled = true; submitBtn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> กำลังส่งข้อความ...'; setTimeout(() => { // Show success feedback contactForm.style.opacity = '0'; setTimeout(() => { contactForm.style.display = 'none'; formFeedback.classList.add('show'); }, 400); // Reset form values contactForm.reset(); }, 1800); }); } // 4. Header Background Change on Scroll const header = document.querySelector('.navbar-header'); const scrollHeader = () => { if (window.scrollY >= 50) { header.classList.add('scrolled'); } else { header.classList.remove('scrolled'); } }; window.addEventListener('scroll', scrollHeader); scrollHeader(); // Run on init // 5. Theme Light/Dark Toggle Logic const toggleDesktopBtn = document.getElementById('theme-toggle-desktop'); const toggleMobileBtn = document.getElementById('theme-toggle-mobile'); const getCurrentTheme = () => { try { let theme = localStorage.getItem('theme'); if (!theme) { // Check system preference theme = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'; } return theme; } catch (e) { console.warn('localStorage is not accessible, defaulting to prefers-color-scheme or dark', e); return window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'; } }; const updateThemeIcons = (theme) => { const desktopIcon = toggleDesktopBtn ? toggleDesktopBtn.querySelector('i') : null; const mobileIcon = toggleMobileBtn ? toggleMobileBtn.querySelector('i') : null; if (theme === 'light') { if (desktopIcon) { desktopIcon.className = 'fa-solid fa-sun'; } if (mobileIcon) { mobileIcon.className = 'fa-solid fa-sun'; } } else { if (desktopIcon) { desktopIcon.className = 'fa-solid fa-moon'; } if (mobileIcon) { mobileIcon.className = 'fa-solid fa-moon'; } } }; const applyTheme = (theme) => { console.log('Applying theme:', theme); if (theme === 'light') { document.body.classList.add('light-theme'); } else { document.body.classList.remove('light-theme'); } updateThemeIcons(theme); }; const toggleTheme = (e) => { if (e) { e.preventDefault(); e.stopPropagation(); } const currentTheme = document.body.classList.contains('light-theme') ? 'light' : 'dark'; const newTheme = currentTheme === 'light' ? 'dark' : 'light'; console.log('Toggling theme from', currentTheme, 'to', newTheme); try { localStorage.setItem('theme', newTheme); } catch (e) { console.warn('Could not save theme to localStorage:', e); } applyTheme(newTheme); }; // Add listeners if (toggleDesktopBtn) { toggleDesktopBtn.addEventListener('click', toggleTheme); } if (toggleMobileBtn) { toggleMobileBtn.addEventListener('click', toggleTheme); } // Initial load applyTheme(getCurrentTheme()); });
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.46 |
proxy
|
phpinfo
|
Settings