Page load Function (js) is not working when Web page loads - javascript

I have been trying to find out how to call my function that is inside a function that is started on page load to set darkmode.
If anyone could help me with this I would be very grateful.
Here is my js file:
(function() {
var darkSwitch = document.getElementById("darkSwitch");
if (darkSwitch) {
initTheme();
darkSwitch.addEventListener("change", function(event) {
resetTheme();
});
function initTheme() {
var darkThemeSelected =
localStorage.getItem("darkSwitch") !== null &&
localStorage.getItem("darkSwitch") === "dark";
darkSwitch.checked = darkThemeSelected;
darkThemeSelected
? document.body.setAttribute("data-theme", "dark")
: document.body.removeAttribute("data-theme");
}
function resetTheme() {
if (darkSwitch.checked) {
document.body.setAttribute("data-theme", "dark");
localStorage.setItem("darkSwitch", "dark");
} else {
document.body.removeAttribute("data-theme");
localStorage.removeItem("darkSwitch");
}
}
}
})();
The js file comes from this GitHub:
https://github.com/coliff/dark-mode-switch

I think you try when the page is load is in dark mode.
here is the solution of your problem.
Here its Documentation :
Here's a link! This code is from Codepen.
HTML:
<script>
// Include this script near the top of your html
var app = document.getElementsByTagName("BODY")[0];
if (localStorage.lightMode == "dark") {
app.setAttribute("data-light-mode", "dark");
}
</script>
<h1>
Dark Mode Toggle
</h1>
<p>Uses localStorage to store and apply the set light mode when page is loaded</p>
<button onclick="toggle_light_mode()">
Toggle Light Mode
</button>
CSS
body {
transition: background-color 0.3s;
text-align: center;
font-family: sans-serif;
padding-top: 3em;
}
h1 {
font-weight: normal;
}
button {
padding: 1em;
font-size: 1em;
background: #000;
color: #fff;
border: none;
cursor: pointer;
transition: .3s;
}
button:hover {
opacity:.5;
}
body[data-light-mode="dark"] {
background-color: #000;
color: #eee;
}
body[data-light-mode="dark"] button {
background-color: #fff;
color: #000;
}
JS
function toggle_light_mode() {
var app = document.getElementsByTagName("BODY")[0];
if (localStorage.lightMode == "dark") {
localStorage.lightMode = "light";
app.setAttribute("data-light-mode", "light");
} else {
localStorage.lightMode = "dark";
app.setAttribute("data-light-mode", "dark");
}
console.log("lightMode = " + localStorage.lightMode);
}

Related

How to delete unique item from local storage array? (Nothing has worked so far)

I am totally stuck.
I am working on the Library project from The Odin Project's JavaScript course, and I am trying to use localStorage so that the user can save their "library" to, well, their local storage.
I've never been able to 100% successfully use localStorage before. It seems simple enough, but for some reason, there was some kind of block in my brain about how to utilize it correctly. This time, however, I was able to get my program to be able to 1) save the user's data (via a button click), 2) load it correctly into the individual "cards" on the page, and 3) delete the entire storage (via another button click). I am extremely excited about this... it feels so good to not know how to do something and then get it to work.
The one thing that has me totally confused is being able to delete a unique item from the localStorage array. When you click the "New Book" button on my page, a modal comes up, and you're required to enter a book's title, author, # of pages, and whether or not you have read it. There's also an option to set the background color. Clicking Submit will then generate a "card" with the book's information on it.
Each card has an X button in the corner. When the X button is clicked, the card is deleted from the page. I want it so that it (meaning that card's book's object) is also deleted from the local storage array (preferably without the user having to press the "Save to local storage" button again, although it isn't a dealbreaker).
Each time the user creates a new book, the book's details are saved as an object into an array called libraryBooks (which I then stringify so I can use localStorage). From my understanding, in order to be able to delete individual parts of the array, I need to use code that is something like this:
libraryBooks.splice(libraryBooks.indexOf(item), 1);
I think my issue is that I don't know how to get the item's index number. I'm not sure how to make it so that the program follows the instructions "When this X button is clicked, find that book's object in the array" if that makes sense. At this point, I've tried several things, and I'm just totally confused.
So yeah! Any help would be wonderful. I've gone through and commented my code to try to help clarify what everything does. I've included the entire thing so that I don't potentially leave something important out related to my problem, and so that it works in the code snippet. But in case it doesn't, here are links to the code repo and the live demo:
Live demo
Code repo
// Link DOM elements
const newBookBtn = document.querySelector('.newbook'); // New Book button
const showBooks = document.querySelector('.show-books'); // div container
const cardClose = document.querySelectorAll('.cardclose'); // button to close card
const openEls = document.querySelectorAll("[data-open]"); // for popup boxes
const closeEls = document.querySelectorAll("[data-close]"); // for popup boxes
const submitBtn = document.querySelector('.submitbtn'); // Submit button (in popup boxes)
const formBoxes = document.querySelectorAll('.form-box'); // Form box within popup box
const formRadio1 = document.querySelector('#bookreadyes'); // Form radio buttons within popup box
const isVisible = "is-visible"; // for popup boxes
const colorDropdown = document.querySelector('select'); // Color-picking dropdown in popup boxes
let libraryBooks = [];
// localstorage buttons (save and delete)
const saveStorage = document.getElementById('save-storage');
const deleteStorage = document.getElementById('delete-storage');
// Button event listeners
saveStorage.addEventListener('click', updateLocalStorage);
deleteStorage.addEventListener('click', deleteLocalStorage);
submitBtn.addEventListener('click', addBookToLibrary);
// If the 'books' key is empty, simply set libraryBooks to empty array.
if (localStorage.getItem('books') === null) {
libraryBooks = [];
// Otherwise, set library books array to get items from the 'books' key
} else {
const booksFromStorage = JSON.parse(localStorage.getItem('books'));
libraryBooks = booksFromStorage;
}
// The Book constructor
function Book(title, author, pages, read) {
this.title = title
this.author = author
this.pages = pages
this.read = read
this.info = function() {
return `${this.title} by ${this.author}, ${this.pages} pages, ${read}`;
}
}
// Add book to library function.
function addBookToLibrary() {
let bookTitle = document.querySelector('#book-title');
let bookAuthor = document.querySelector('#book-author');
let bookPages = document.querySelector('#book-pages');
let bookReadYes = document.querySelector('#bookreadyes')
let bookReadNo = document.querySelector('#bookreadno');
let alertWords = document.querySelector('.alertwords'); // Alert if form elements are empty
let bookRead;
if (bookReadYes.checked) {
bookRead = 'Read';
} else if (bookReadNo.checked) {
bookRead = 'Not read';
}
// Creating a new book object via the Book constructor
let newBook = new Book(bookTitle.value, bookAuthor.value, bookPages.value, bookRead);
// If any form elements are empty, throw error and don't submit book. If none of them are empty, proceed.
if (bookTitle.value.length === 0 || bookAuthor.value.length === 0 || bookPages.value.length === 0) {
alertWords.textContent = 'Please fill in all fields.';
} else {
alertWords.textContent = '';
document.querySelector('.modal.is-visible').classList.remove(isVisible); // Closes the modal
formBoxes.forEach(formBox => {
formBox.value = ""; // Sets the form values so they're blank the next time the New Book button is pressed
});
formRadio1.checked = true; // Set the radio buttons so that the "Yes" button is automatically selected (otherwise, the user's last choice will be selected)
// Push the new book object into libraryBooks array
libraryBooks.push(newBook);
// The rest of the lines of code in this function create the actual book card on page
const newCard = document.createElement('div');
const newCardTitle = document.createElement('h4');
const newCardAuthor = document.createElement('p');
const newCardPages = document.createElement('p');
const newCardRead = document.createElement('span');
newCardTitle.setAttribute('class', 'title-style');
newCardAuthor.setAttribute('class', 'author-style');
newCardPages.setAttribute('class', 'pages-style');
newCardRead.setAttribute('class', 'read-style');
newCard.classList.add('isVisible', 'cardbox', colorPicker());
showBooks.appendChild(newCard);
for (let i = 0; i < libraryBooks.length; i++) {
newCardTitle.innerHTML = `${libraryBooks[i].title}`;
let closeBtn = "<button type='button' class='close-default' onclick='$(this).parent().parent().remove();'>x</button>";
newCardTitle.innerHTML += closeBtn;
newCardAuthor.innerHTML = `by ${libraryBooks[i].author}`;
newCardPages.innerHTML = `<strong>Pages</strong>: ${libraryBooks[i].pages}`;
newCardRead.innerHTML = `<strong>Status</strong>: ${libraryBooks[i].read}`;
}
newCard.appendChild(newCardTitle);
newCard.appendChild(newCardAuthor);
newCard.appendChild(newCardPages);
newCard.appendChild(newCardRead);
}
}
// Stuff for popup capability
for (const el of openEls) {
el.addEventListener("click", function() {
const modalId = this.dataset.open;
document.getElementById(modalId).classList.add(isVisible);
});
}
for (const el of closeEls) {
el.addEventListener("click", function() {
this.parentElement.parentElement.parentElement.classList.remove(isVisible);
});
}
document.addEventListener("click", e => {
if (e.target == document.querySelector(".modal.is-visible")) {
document.querySelector(".modal.is-visible").classList.remove(isVisible);
}
});
// Keyboard shortvut for modal: ESC key to close
document.addEventListener("keyup", e => {
// if we press the ESC
if (e.key == "Escape" && document.querySelector(".modal.is-visible")) {
document.querySelector(".modal.is-visible").classList.remove(isVisible);
}
});
cardClose.forEach(card => {
card.addEventListener('click', function() {
this.parentNode.parentNode.removeChild(this.parentNode.parentNode);
return false;
});
})
// Switch function for setting the background color of the book's card
function colorPicker() {
switch (colorDropdown.value) {
case 'red':
return 'cardback-red';
break;
case 'orange':
return 'cardback-orange';
break;
case 'yellow':
return 'cardback-yellow';
break;
case 'green':
return 'cardback-green';
break;
case 'blue':
return 'cardback-blue';
break;
case 'purple':
return 'cardback-purple';
break;
case 'dark':
return 'cardback-dark';
break;
case 'grey':
return 'cardback-grey';
break;
default:
return 'cardback-white';
break;
}
}
// Update local storage
function updateLocalStorage() {
localStorage.setItem('books', JSON.stringify(libraryBooks));
}
// Delete local storage
function deleteLocalStorage() {
window.localStorage.clear();
showBooks.textContent = "";
}
// Get localStorage data and set it to the variable "data"
const data = JSON.parse(localStorage.getItem('books'));
// Load the saved local storage objects into cards (almost identical to addBookToLibrary())
function loadLocalStorage(array, book) {
let bookTitle;
let bookAuthor;
let bookPages;
let bookRead;
for (let i = 0; i < array.length; i++) {
bookTitle = book.title;
bookAuthor = book.author;
bookPages = book.pages;
bookRead = book.read;
}
// Create book card on page
const newCard = document.createElement('div');
const newCardTitle = document.createElement('h4');
const newCardAuthor = document.createElement('p');
const newCardPages = document.createElement('p');
const newCardRead = document.createElement('span');
newCardTitle.setAttribute('class', 'title-style');
newCardAuthor.setAttribute('class', 'author-style');
newCardPages.setAttribute('class', 'pages-style');
newCardRead.setAttribute('class', 'read-style');
newCard.classList.add('isVisible', 'cardbox', colorPicker());
showBooks.appendChild(newCard);
for (let i = 0; i < array.length; i++) {
newCardTitle.innerHTML = `${bookTitle}`;
let closeBtn = "<button type='button' class='close-default' onclick='$(this).parent().parent().remove();'>x</button>";
newCardTitle.innerHTML += closeBtn;
newCardAuthor.innerHTML = `by ${bookAuthor}`;
newCardPages.innerHTML = `<strong>Pages</strong>: ${bookPages}`;
newCardRead.innerHTML = `<strong>Status</strong>: ${bookRead}`;
}
newCard.appendChild(newCardTitle);
newCard.appendChild(newCardAuthor);
newCard.appendChild(newCardPages);
newCard.appendChild(newCardRead);
}
// Required in order to load saved books onto page
for (let i = 0; i < data.length; i++) {
loadLocalStorage(data, data[i]);
}
* {
margin: 0;
padding: 0;
}
body,
html {
display: flex;
align-items: center;
flex-direction: column;
background-color: #cedee9;
height: 100vh;
padding: 10px;
font-family: 'Rubik', sans-serif;
}
body {
max-height: 100%;
}
input {
padding: 5px;
}
label {
margin-bottom: 5px;
margin-top: 10px;
font-size: .9rem;
}
input[type='text'] {
font-size: .75rem;
font-family: 'Poppins', sans-serif;
}
.radio-option1 {
margin-right: 5px;
}
h4 {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1.2rem;
}
.close {
background: none;
font-size: 1.5rem;
border: 0;
margin-left: 10px;
transition: 0.5s ease;
}
.close:hover {
cursor: pointer;
color: rgb(58, 84, 140);
}
.submitbtn {
border: 1px solid rgb(58, 84, 140);
color: white;
background-color: rgb(58, 84, 140);
padding: 8px 20px;
margin: 0 auto;
width: 100%;
border-radius: 5px;
transition: 0.5s ease;
}
.submitbtn:hover {
cursor: pointer;
background-color: rgb(40, 54, 85);
border-color: rgb(40, 54, 85);
}
.book-form {
display: flex;
flex-direction: column;
width: 200px;
}
/* Testing this comment */
input {
margin-bottom: 10px;
}
p {
margin-top: 5px;
}
.bookcard {
width: 200px;
display: flex;
justify-content: flex-start;
flex-direction: column;
}
.cardbox {
background-color: white;
width: 250px;
margin: 10px;
padding: 12px 20px 20px 20px;
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}
.alertwords {
color: #df0a0a;
}
.show-books {
display: flex;
flex-wrap: wrap;
}
.title-style {
margin-bottom: -5px;
}
.author-style {
font-size: .9rem;
margin-bottom: 20px;
}
.pages-style,
.read-style {
font-size: .9rem;
}
option {
font-family: 'Poppins', sans-serif;
font-size: .8rem;
}
select {
padding: 5px;
font-family: 'Poppins', sans-serif;
font-size: .8rem;
}
#option-red,
.cardback-red {
background-color: rgb(241, 191, 191);
}
#option-orange,
.cardback-orange {
background-color: #ffcb9a;
}
#option-yellow,
.cardback-yellow {
background-color: #fffda1;
}
#option-green,
.cardback-green {
background-color: #9cd6af;
}
#option-blue,
.cardback-blue {
background-color: #a1d3f0;
}
#option-purple,
.cardback-purple {
background-color: #e6c1ff;
}
#option-grey,
.cardback-grey {
background-color: #cfcfcf;
}
#option-dark,
.cardback-dark {
background-color: #282f52;
color: white;
}
/* RESET RULES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
* {
padding: 0;
margin: 0;
}
a {
color: inherit;
text-decoration: none;
}
.close-modal {
cursor: pointer;
background: transparent;
border: none;
outline: none;
font-size: inherit;
}
.btn-group {
text-align: center;
}
.open-modal {
font-weight: bold;
background: steelblue;
color: white;
padding: 0.75rem 1.75rem;
margin-bottom: 1rem;
border-radius: 5px;
border: 0;
transition: 0.5s ease;
}
.open-modal:hover {
background-color: rgb(40, 54, 85);
cursor: pointer;
}
.open-modal:active {
background-color: rgb(40, 54, 85);
}
.open-modal:focus {
background-color: rgb(40, 54, 85);
}
/* MODAL
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
background: rgba(0, 0, 0, 0.781);
cursor: pointer;
visibility: hidden;
opacity: 0;
transition: all 0.35s ease-in;
}
.modal.is-visible {
visibility: visible;
opacity: 1;
}
.modal-dialog {
position: relative;
max-width: 800px;
max-height: 80vh;
border-radius: 5px;
background: white;
overflow: auto;
cursor: default;
}
.modal-dialog>* {
padding: 1rem;
}
.modal-header,
.modal-footer {
font-weight: 700;
background: #a8c0f2;
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 1.3rem;
}
.modal-header .close-modal {
font-size: 1.5rem;
}
.modal p+p {
margin-top: 1rem;
}
/* ANIMATIONS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
[data-animation] .modal-dialog {
opacity: 0;
transition: all 0.5s var(--bounceEasing);
}
[data-animation].is-visible .modal-dialog {
opacity: 1;
transition-delay: 0.2s;
}
[data-animation="slideInOutDown"] .modal-dialog {
transform: translateY(100%);
}
[data-animation="slideInOutTop"] .modal-dialog {
transform: translateY(-100%);
}
[data-animation="slideInOutLeft"] .modal-dialog {
transform: translateX(-100%);
}
[data-animation="slideInOutRight"] .modal-dialog {
transform: translateX(100%);
}
[data-animation="zoomInOut"] .modal-dialog {
transform: scale(0.2);
}
[data-animation="rotateInOutDown"] .modal-dialog {
transform-origin: top left;
transform: rotate(-1turn);
}
[data-animation="mixInAnimations"].is-visible .modal-dialog {
animation: mixInAnimations 2s 0.2s linear forwards;
}
[data-animation="slideInOutDown"].is-visible .modal-dialog,
[data-animation="slideInOutTop"].is-visible .modal-dialog,
[data-animation="slideInOutLeft"].is-visible .modal-dialog,
[data-animation="slideInOutRight"].is-visible .modal-dialog,
[data-animation="zoomInOut"].is-visible .modal-dialog,
[data-animation="rotateInOutDown"].is-visible .modal-dialog {
transform: none;
}
#keyframes mixInAnimations {
0% {
transform: translateX(-100%);
}
10% {
transform: translateX(0);
}
20% {
transform: rotate(20deg);
}
30% {
transform: rotate(-20deg);
}
40% {
transform: rotate(15deg);
}
50% {
transform: rotate(-15deg);
}
60% {
transform: rotate(10deg);
}
70% {
transform: rotate(-10deg);
}
80% {
transform: rotate(5deg);
}
90% {
transform: rotate(-5deg);
}
100% {
transform: rotate(0deg);
}
}
/* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
footer {
display: flex;
align-items: center;
justify-content: center;
}
.page-footer {
position: fixed;
bottom: 0;
}
.page-footer span {
color: #e31b23;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Library</title>
<script src="https://kit.fontawesome.com/2b4114baf6.js" crossorigin="anonymous"></script>
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Noto+Sans:ital,wght#0,400;0,700;1,400;1,700&family=Open+Sans:ital,wght#0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Poppins:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Slab:wght#100;200;300;400;500;600;700;800;900&family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Rubik:ital,wght#0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Source+Sans+Pro:ital,wght#0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap"
rel="stylesheet">
<!-- CSS Stylesheet -->
<link href="styles.css" rel="stylesheet">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h1>Library</h1>
<div class="btn-group">
<button type="button" class="open-modal" data-open="modal1">
New Book
</button>
</div>
<div class="btn-group">
<button class="open-modal" id="save-storage">
Save local storage
</button>
<button class="open-modal" id="delete-storage">
Delete local storage
</button>
</div>
<!-- Library books container -->
<div class="show-books">
</div>
<!-- Modal code (popup box for new book form) -->
<div class="modal" id="modal1" data-animation="slideInOutLeft">
<div class="modal-dialog">
<header class="modal-header">
Book Details
<button class="close-modal" aria-label="close modal" data-close>
✕
</button>
</header>
<section class="modal-content">
<form class="bookcard">
<label>Title:</label>
<input type="text" class="form-box" id="book-title" placeholder="Fight Club">
<label>Author:</label>
<input type="text" class="form-box" id="book-author" placeholder="Chuck Palahniuk">
<label># of Pages:</label>
<input type="number" class="form-box" id="book-pages" placeholder="208" min="1" max="14000">
<label>Have you read this book?:</label>
<div class="radiobox">
<label class="radio-option1"><input type="radio" name="read" value="yes" id="bookreadyes" class='form-radio' checked> Yes</label>
<label class="radio-option2"><input type="radio" name="read" value="no" id="bookreadno" class='form-radio'> No</label>
</div>
<label>Select card color (optional):</label>
<select class="colorpicker">
<option value='default' selected disabled>Please select one</option>
<option value="white">White (Default)</option>
<option value="blue" id="option-blue">Blue</option>
<option value="purple" id="option-purple">Purple</option>
<option value="green" id="option-green">Green</option>
<option value="grey" id="option-grey">Grey</option>
<option value="red" id="option-red">Red</option>
<option value="orange" id="option-orange">Orange</option>
<option value="yellow" id="option-yellow">Yellow</option>
<option value="dark" id="option-dark">Dark mode</option>
</select>
<p class="alertwords"></p>
</form>
</section>
<footer class="modal-footer">
<button class="submitbtn">Submit</button>
</footer>
</div>
</div>
<footer class="page-footer">
<small>Made with <span>❤</span> by Sara Dunlop
</small>
</footer>
<!-- JS script -->
<script src="script2.js"></script>
</body>
</html>
Well, I made a good couple changes to your script and it works
The main problem was that your close button wasn't given a listener that would be able to remove the book it's related to, solved that and also for fun added logic to automatically save to localStorage
The code's below but there's also a link to a working example
// Link DOM elements
const newBookBtn = document.querySelector('.newbook'); // New Book button
const showBooks = document.querySelector('.show-books'); // div container
const cardClose = document.querySelectorAll('.cardclose'); // button to close card
const openEls = document.querySelectorAll("[data-open]"); // for popup boxes
const closeEls = document.querySelectorAll("[data-close]"); // for popup boxes
const submitBtn = document.querySelector('.submitbtn'); // Submit button (in popup boxes)
const formBoxes = document.querySelectorAll('.form-box'); // Form box within popup box
const formRadio1 = document.querySelector('#bookreadyes'); // Form radio buttons within popup box
const isVisible = "is-visible"; // for popup boxes
const colorDropdown = document.querySelector('select'); // Color-picking dropdown in popup boxes
let libraryBooks = [], automaticallyUpdate = true; //change automaticallyUpdate to false to prevent automatic saving(on changes)
// localstorage buttons (save and delete)
const saveStorage = document.getElementById('save-storage');
const deleteStorage = document.getElementById('delete-storage');
// Button event listeners
saveStorage.addEventListener('click', updateLocalStorage);
deleteStorage.addEventListener('click', deleteLocalStorage);
submitBtn.addEventListener('click', addBookToLibrary);
// The Book constructor
function Book({title, author, pages, read, color}) {
this.title = String(title)
this.author = String(author)
this.pages = Number(pages)
this.read = read?"Read":"Not Read"
this.color = String(color)
this.info = function() {
return `${this.title} by ${this.author}, ${this.pages} pages, ${this.read} with color ${this.color}`;
}
}
//returns your close button with a listener that actually removes the book
//"<button type='button' class='close-default' onclick='$(this).parent().parent().remove();'>x</button>";
function closeBar(book){
let btn=document.createElement('button')
btn.className='close-default'
btn.innerHTML='x' //wow almost forgot this
btn.addEventListener('click',()=>{
$(btn).parent().parent().remove()
console.log(book,libraryBooks,libraryBooks.indexOf(book))
libraryBooks.splice(libraryBooks.indexOf(book),1)
if(automaticallyUpdate){updateLocalStorage()} //automatic saving
})
return btn //the button is returned to be placed in its arrangement
}
// Add book to library function.
function addBookToLibrary() {
let color = colorDropdown.value;
let bookTitle = document.querySelector('#book-title');
let bookAuthor = document.querySelector('#book-author');
let bookPages = document.querySelector('#book-pages');
let bookRead = document.querySelector('#bookreadyes').checked; //true if checked, false if not checked
let alertWords = document.querySelector('.alertwords'); // Alert if form elements are empty
// Creating a new book object via the Book constructor
let newBook = new Book({title:bookTitle.value, author:bookAuthor.value, pages:bookPages.value, read:bookRead, color});
// If any form elements are empty, throw error and don't submit book. If none of them are empty, proceed.
if (bookTitle.value.length === 0 || bookAuthor.value.length === 0 || bookPages.value.length === 0) {
alertWords.textContent = 'Please fill in all fields.';
} else {
alertWords.textContent = '';
document.querySelector('.modal.is-visible').classList.remove(isVisible); // Closes the modal
formBoxes.forEach(formBox => {
formBox.value = ""; // Sets the form values so they're blank the next time the New Book button is pressed
});
formRadio1.checked = true; // Set the radio buttons so that the "Yes" button is automatically selected (otherwise, the user's last choice will be selected)
// Push the new book object into libraryBooks array
libraryBooks.push(newBook);
// The rest of the lines of code in this function create the actual book card on page
const newCard = document.createElement('div');
const newCardTitle = document.createElement('h4');
const newCardAuthor = document.createElement('p');
const newCardPages = document.createElement('p');
const newCardRead = document.createElement('span');
newCardTitle.setAttribute('class', 'title-style');
newCardAuthor.setAttribute('class', 'author-style');
newCardPages.setAttribute('class', 'pages-style');
newCardRead.setAttribute('class', 'read-style');
newCard.classList.add('isVisible', 'cardbox', colorPicker(newBook.color));
showBooks.appendChild(newCard);
const {title,author,pages,read}=newBook
newCardTitle.innerHTML = `${title}`;
let closeBtn = closeBar(newBook)
newCardTitle.appendChild(closeBtn);
newCardAuthor.innerHTML = `by ${author}`;
newCardPages.innerHTML = `<strong>Pages</strong>: ${pages}`;
newCardRead.innerHTML = `<strong>Status</strong>: ${read}`;
newCard.appendChild(newCardTitle);
newCard.appendChild(newCardAuthor);
newCard.appendChild(newCardPages);
newCard.appendChild(newCardRead);
if(automaticallyUpdate){updateLocalStorage()} //automatic saving
}
}
// Stuff for popup capability
for (const el of openEls) {
el.addEventListener("click", function() {
const modalId = this.dataset.open;
document.getElementById(modalId).classList.add(isVisible);
});
}
for (const el of closeEls) {
el.addEventListener("click", function() {
this.parentElement.parentElement.parentElement.classList.remove(isVisible);
});
}
document.addEventListener("click", e => {
if (e.target == document.querySelector(".modal.is-visible")) {
document.querySelector(".modal.is-visible").classList.remove(isVisible);
}
});
// Keyboard shortvut for modal: ESC key to close
document.addEventListener("keyup", e => {
// if we press the ESC
if (e.key == "Escape" && document.querySelector(".modal.is-visible")) {
document.querySelector(".modal.is-visible").classList.remove(isVisible);
}
});
cardClose.forEach(card => {
card.addEventListener('click', function() {
this.parentNode.parentNode.removeChild(this.parentNode.parentNode);
return false;
});
})
// Switch function for setting the background color of the book's card
let colors = {red:1, orange:1, yellow:1, green:1, blue:1, purple:1, dark:1, grey:1}
//the above variable saves a lot of lines in the colorPicker function
function colorPicker(color) {
if(!colors[color]){return 'cardback-white'}
return 'cardback-'+color
}
// Update local storage
function updateLocalStorage() {
localStorage.setItem('books', JSON.stringify(libraryBooks));
}
// Delete local storage
function deleteLocalStorage() {
window.localStorage.clear();
showBooks.textContent = "";
}
// Get localStorage data and set it to the variable "data"
const data = JSON.parse(localStorage.getItem('books'))||[]
// the "||" in case there was nothing stored yet and it prevents an error from reading map from null
.map(book=>new Book( book )) //convert localStorage data to a list of "Book"s
// Load the saved local storage objects into cards (almost identical to addBookToLibrary())
function loadLocalStorage({title,author,pages,read,color}) {
// EDIT: the for loops in this function are seemingly useless
var newBook=arguments[0]
libraryBooks.push(newBook)
// Create book card on page
const newCard = document.createElement('div');
const newCardTitle = document.createElement('h4');
const newCardAuthor = document.createElement('p');
const newCardPages = document.createElement('p');
const newCardRead = document.createElement('span');
newCardTitle.setAttribute('class', 'title-style');
newCardAuthor.setAttribute('class', 'author-style');
newCardPages.setAttribute('class', 'pages-style');
newCardRead.setAttribute('class', 'read-style');
newCard.classList.add('isVisible', 'cardbox', colorPicker(color));
showBooks.appendChild(newCard);
newCardTitle.innerHTML = `${title}`;
const closeBtn = closeBar(newBook);
newCardTitle.appendChild(closeBtn);
newCardAuthor.innerHTML = `by ${author}`;
newCardPages.innerHTML = `<strong>Pages</strong>: ${pages}`;
newCardRead.innerHTML = `<strong>Status</strong>: ${read}`;
newCard.appendChild(newCardTitle);
newCard.appendChild(newCardAuthor);
newCard.appendChild(newCardPages);
newCard.appendChild(newCardRead);
}
// Required in order to load saved books onto page
for(let i = 0; i < data.length; i++) {
loadLocalStorage(data[i]);
}
Here is the simple fix for you
let closeBtn = `<button type='button' class='close-default' onclick='libraryBooks.splice(libraryBooks.findIndex((book) => book.title === "${bookTitle}" && book.author === "${bookAuthor}"), 1);'>x</button>`;
i is getting from your array list
Just in case you don't understand what is template literals, I share the link here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
I also added an extra fix for your deleteLocalStorage. You need to clean up your libraryBooks array too.
function deleteLocalStorage() {
libraryBooks = [] //here is the fix to clean up your array
window.localStorage.clear();
showBooks.textContent = "";
}
You can check my fixes here
https://jsfiddle.net/otywdekm/4/
I checked out your demo , and what I think you can do is, while saving a book object you can pass in an property called id to identify the exact book from the collection.
So when you click on the x button you will get the details of that book which now has an id and you can filter it out.
Something as follows -
const filteredBooks = existingBooks.filter((el) => el.id !== book.id);
localstorage.setItem('books', filteredBooks);
Hope that works for you.
You Problem in delete specific book card
libraryBooks.splice(libraryBooks.indexOf(item), 1);
Thats not correct because
indexOf() compares searchElement to elements of the Array using strict
equality (the same method used by the ===, or triple-equals,
operator).
libraryBooks.indexOf always results in -1
the solution you can add index when you create book in book constructor and increment it in every book
[
{
index: 0
author: "00"
pages: "200"
read: "Read"
title: "00"
}
]
when create new object set index++ to able get the object directly
and when delete
function deleteBook(book){
libraryBooks.splice(book.index , 1)
}

Dark Mode not working during loading time

I'm trying to make a dark mode toggle button which can toggle between dark and light mode on click, User preference is also stored using localStorage. The user should manually press the button to toggle to other mode. If the user's choice is dark mode, Every page will be in dark mode and it doesn't turn to light mode on refreshing. Everything looks fine upto now but the real issue comes with loading time. The load time of a page is nearly 1 second and in that time, Page appears to be in light mode even if user's choice is dark mode. I don't want that to happen. I want loading time section in dark mode if user's choice is dark.
This is my current code:
<script>
const body = document.querySelector('body');
function toggleDark() {
if (body.classList.contains('dark')) {
body.classList.remove('dark');
localStorage.setItem("theme", "light");
} else {
body.classList.add('dark');
localStorage.setItem("theme", "dark");
}
}
if (localStorage.getItem("theme") === "dark") {
body.classList.add('dark');
}
</script>
<style>
body {background-color: #ffffff}
body.dark {background-color: #000000; color: #ffffff}
</style>
<button class="dark-mode" id="btn-id" onclick="toggleDark()"></button>
Another alternative is to load the script in the <head> element, and toggle the class on html element
To do so, you use document.documentElement.classList as that is the HTML element
Then change your CSS to
html.dark body {}
etc .. the class selector on HTML
html body {background-color: #ffffff}
html.dark body {background-color: #000000; color: #ffffff}
<script>
const body = document.querySelector('body');
function toggleDark() {
if (document.documentElement.classList.contains('dark')) {
document.documentElement.classList.remove('dark');
//localStorage.setItem("theme", "light");
} else {
document.documentElement.classList.add('dark');
//localStorage.setItem("theme", "dark");
}
}
//if (localStorage.getItem("theme") === "dark") {
document.documentElement.classList.add('dark');
//}
</script>
<button class="dark-mode" id="btn-id" onclick="toggleDark()">DARK</button>
Due to restrictions, localStorage is unavailable on stack overflow - uncomment those lines to see it work
Or - see https://jsfiddle.net/e9zg2p4c/
Store it to backend database. Then when serving HTML content put proper class/style for your elements. This will remove flickering between loading times:
<!DOCTYPE html>
<html>
<head>
<style>
/* Use Less/Sass for better management */
.theme.light {
background-color: #ffffff;
}
.theme.dark {
background-color: #000000; color: #ffffff;
}
</style>
</head>
<body class="theme <?= $user->themeName; ?>">
</body>
</html>
A little more tricky to toggle AND have a default theme
Note the localStorage calls do not work here at SO
working example
In the code below replace
const theme = "dark"; with
localStorage.getItem("theme") || "light"
and uncomment // localStorage.setItem("theme", body.classList.contains("dark") ? "light" : "dark");
on your server
.dark { background-color: black; color: white; }
<!DOCTYPE html>
<html>
<head>
<style>
.theme {
background-color: white;
color: black;
}
</style>
<script>
const theme = "dark"; // localStorage.getItem("theme") || "theme"
if (theme === "dark") {
const st = document.createElement("style");
st.id="darkStyle";
st.innerText = `body.theme { background-color: black; color: white; }`;
document.querySelector("head").appendChild(st);
}
window.addEventListener("load", function() {
document.getElementById("toggleTheme").addEventListener("click", function() {
const body = document.querySelector("body");
const darkStyle = document.getElementById("darkStyle");
if (darkStyle) {
darkStyle.remove(); // remove stylesheet now we know what the user wants
body.classList.remove("theme");
}
const theme = body.classList.contains("theme");
body.classList.toggle('theme',!theme);
body.classList.toggle('dark',theme);
// localStorage.setItem("theme", theme ? "light" : "dark"); // uncomment on your server
});
})
</script>
</head>
<body class="theme">
Here is the body
<button id="toggleTheme" type="button">Toggle theme</button>
</body>
</html>
Given that the only real difference between light and dark is the colours, why not simply create css variables for each colour you are going to use and use javascript to change the values of the variables. This way, once you have defined the classes using the variables in the appropriate places, changing the variable values changes the classes automatically. The choice of "dark" and "light" can be stored in whatever way is available to you - localStorage, cookies or backend etc - and you simply set the appropriate colours to the css variables when the page is being loaded. There's no need for separate definitions for each class and, as a developer, it allows you to quickly test the colour schemes without having to manually change every class one by one.
function changeTheme(t) {
if (t == "dark") {
document.documentElement.style.setProperty("--backgroundcolour", "black");
document.documentElement.style.setProperty("--fontcolour", "white");
} else {
document.documentElement.style.setProperty("--backgroundcolour", "white");
document.documentElement.style.setProperty("--fontcolour", "black");
}
}
:root {
--backgroundcolour:black;
--fontcolour:white;
}
body {
background-color:var(--backgroundcolour);
color:var(--fontcolour);
}
span {
background-color:var(--backgroundcolour);
color:var(--fontcolour);
}
div {
background-color:var(--backgroundcolour);
color:var(--fontcolour);
}
table {
background-color:var(--backgroundcolour);
color:var(--fontcolour);
}
<button onclick="changeTheme('dark');">Use dark theme</button><button onclick="changeTheme('light');">Use light theme</button>
<hr>
<span>Text in a span</span>
<hr>
<div>Text in a div</div>
<hr>
<table>
<tbody>
<tr><td>Text in a table</td></tr>
</tbody>
</table>
If you want to use checkbox, this solution for you.
if you want the value to remain unchanged, use localStorage. If you want a dark mode where you have values ​​disappear when you close a tab or browser, use sessionStorage.
const check = document.getElementById('chk');
check.addEventListener('change', () => {
document.body.classList.toggle('dark');
localStorage.darkMode=!localStorage.darkMode;
});
window.onload=function() {
if(localStorage.darkMode) document.body.classList.toggle('dark');
}
#modeSwitcher{
margin: 5% 50%;
}
#modeSwitcher .checkbox {
opacity: 0;
position: absolute;
}
#modeSwitcher .checkbox:checked + .label .ball{
transform: translateX(35px);
}
#modeSwitcher .checkbox:checked + .label .ball::after{
content: '';
position: absolute;
background-color: #0A0E27;
width: 13px;
height: 13px;
border-radius: 50%;
bottom: 50%;
left: -5%;
transform: translateY(50%);
}
#modeSwitcher .label {
background-color: #0A0E27;
border-radius: 50px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px;
margin: 0;
position: relative;
height: 16px;
width: 50px;
transform: scale(1.5);
}
#modeSwitcher .label .fa-moon{
color:#0A0E27 ;
}
#modeSwitcher .label .ball {
background-color: #FDC503;
border-radius: 50%;
position: absolute;
top: 3px;
left: 3px;
height: 20px;
width: 20px;
transform: translateX(0px);
transition: transform 0.2s linear;
}
body{
background-color: #fff;
}
body.dark{
background-color: black;
}
<div id="modeSwitcher">
<input type="checkbox" class="checkbox" id="chk" />
<label class="label" for="chk">
<i class="fas fa-moon"></i>
<div class="ball"></div>
</label>
</div>

ExtJS 6.7.0 - SCSS class not loading

I'm trying to apply a background-color to a column from a grid in ExtJS here es my code, and I applied sencha app watch so I everything loads, but i keep getting no stiles applied what so ever, what i noticed in th
Ext.define('Ris.academic.student.situation.SituationColumn', {
extend: 'Ext.grid.column.Column',
xtype: 'studentsituationcolumn',
text: 'Situaciones',
dataIndex: 'situations',
renderer(situations) {
let tags = [];
(situations || []).forEach(situation => {
tags.push(
`<div class="student-situation-tag" style="background-color: ${situation.color}">
${situation.text}
</div>`
);
});
return tags.join('');
}
});
and this is the SCSS:
.x-grid-cell-inner {
.student-situation-tag {
display: flex;
font-size: smaller;
font-weight: bold;
color: #fff;
padding: 0 3pt;
border-radius: 3px;
text-align: center;
&:not(:first-child) {
margin-left: 2px;
}
}
}
.male-row .x-grid-cell {
background-color: lightblue; !important;
}
.female-row .x-grid-cell {
background-color: lightpink; !important;
}
You attach style without settings of viewConfig.
I suppose you have something like getRowClass:
viewConfig: {
getRowClass: function (record) {
return record.get('gender') == 'm' ? 'male-row' : 'female-row';
}
},
in your grid configuration.
Look at example on fiddle : https://fiddle.sencha.com/#fiddle/35vs
I don't see any problems there (i used css instead of scss because of fiddle).

Persistent dark mode while navigating pages with a dark/light mode toggling option

I've been trying to implement persistent dark mode on web pages, as when a user navigates through pages, their choice will be remembered. Also, I added a toggle dark/light mode button, for better user experience. Thus I came up with this code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#002f30">
<style>
body {
padding: 25px;
color: black;
font-size: 25px;
}
.btn {
background: white;
border: 1px solid #10101c;
color: #10101c;
border-radius:0.5rem;
}
a {
text-decoration: none;
color: #006262;
border-bottom: 1px dotted #192841;
font-style: italic;
}
body.dark {
background-color: #10101c;
color: #778899;
}
body.dark .btn {
background: #10101c;
color: #708090;
border: 1px solid #002e43;
border-radius:0.5rem;
}
body.dark a {
text-decoration: none;
color: #778899;
border-bottom: 1px dotted #d5c4a1;
font-style: italic;
}
</style>
</head>
<body>
<h1 style="margin-top: 0">page 1</h1>
<h2 style="margin-top: 0">Toggle Dark/Light Mode</h2>
<p>Click the button to toggle between dark and light mode for this page.</p>
<p>This is a link to a second page click</p>
<button id="mode" class="btn" onclick="toggle()">Toggle dark mode</button>
<script>
function toggle() {
// This bit is for the toggling between dark and light mode
let element = document.body;
element.classList.toggle("dark");
// This part is for toggling the text inside the button
var toggle = document.getElementById("mode");
if (toggle.innerHTML === "Toggle dark mode") {
toggle.innerHTML = "Dark mode it is";
}
else {
toggle.innerHTML = "Toggle dark mode"; }
// This part I copy pasted from one of Kevin Powell's videos on darkmode switch, and maintaining persistence but still couldn't figure out howbit works...
// check for saved 'darkMode' in localStorage
let darkMode = localStorage.getItem('darkMode');
const darkModeToggle = document.querySelector('#mode');
const enableDarkMode = () => {
// 1. Add the class to the body
document.body.classList.add('dark');
// 2. Update darkMode in localStorage
localStorage.setItem('darkMode', 'enabled');
}
const disableDarkMode = () => {
// 1. Remove the class from the body
document.body.classList.remove('dark');
// 2. Update darkMode in localStorage
localStorage.setItem('darkMode', null);
}
// If the user already visited and enabled darkMode
// start things off with it on
if (darkMode === 'enabled') {
enableDarkMode();
}
// When someone clicks the button
darkModeToggle.addEventListener('click', () => {
// get their darkMode setting
darkMode = localStorage.getItem('darkMode');
// if it not current enabled, enable it
if (darkMode !== 'enabled') {
enableDarkMode();
// if it has been enabled, turn it off
} else {
disableDarkMode();
}
});
// This is the solved part I asked earlier, it chages the meta theme color with the dark or light mode change
var meta = document.querySelector("meta[name=theme-color]");
if (meta.getAttribute("content") === "#002f30") {
console.log(meta.getAttribute("content"));
meta.setAttribute("content", "#10101c");
} else {
console.log(meta.getAttribute("content"));
meta.setAttribute("content", "#002f30");
}
}
</script>
</body>
</html>
While running the code, everything works fine except for the persistence part. If dark mode is enabled, and I navigate to a second page of the same html code, it turns back to default light mode. Am I doing the code right?
P.S. I'm a novice/beginner in Javascript
// Using a local variable since stack overflow doesn't allow localstorage operations for security purposes.
let storage = {darkMode: "disabled"}
function userPreferesDarkMode() {
//return localStorage.getItem("darkMode") === "enabled";
return storage.darkMode === "enabled";
}
function setThemePreference(value) {
// localStorage.setItem("darkMode", value || "disabled");
storage.darkMode = value || "disabled";
}
const enableDarkMode = () => {
// 1. Add the class to the body
document.body.classList.add("dark");
};
const disableDarkMode = () => {
// 1. Remove the class from the body
document.body.classList.remove("dark");
};
function setTheme() {
// If the user already visited and enabled darkMode
// start things off with it on
if (userPreferesDarkMode()) {
enableDarkMode();
} else {
disableDarkMode();
}
const appDiv = document.getElementById("app");
appDiv.innerHTML = `<h1>Dark mode: ${userPreferesDarkMode()}</h1>`;
}
function bootstrap() {
const darkModeToggleButton = document.querySelector("#mode");
darkModeToggleButton.addEventListener("click", () => {
if (userPreferesDarkMode()) {
setThemePreference("disabled");
disableDarkMode();
} else {
setThemePreference("enabled");
enableDarkMode();
}
const appDiv = document.getElementById("app");
appDiv.innerHTML = `<h1>Dark mode: ${userPreferesDarkMode()}</h1>`;
});
setTheme();
}
document.addEventListener("DOMContentLoaded", function(event) {
// Your code to run since DOM is loaded and ready
bootstrap()
});
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
<style>
body {
padding: 25px;
color: black;
font-size: 25px;
}
.btn {
background: white;
border: 1px solid #10101c;
color: #10101c;
border-radius:0.5rem;
}
a {
text-decoration: none;
color: #006262;
border-bottom: 1px dotted #192841;
font-style: italic;
}
body.dark {
background-color: #10101c;
color: #778899;
}
body.dark .btn {
background: #10101c;
color: #708090;
border: 1px solid #002e43;
border-radius:0.5rem;
}
body.dark a {
text-decoration: none;
color: #778899;
border-bottom: 1px dotted #d5c4a1;
font-style: italic;
}
</style>
</head>
<body>
<div id="app">hello</div>
<button id="mode" class="btn">Toggle dark mode</button>
</body>
</html>
You have wrapped the checking of stored preference in the toggle method. So when you navigate to the second page, it doesn't read the value from localstorage until toggle method is invoked.
Adding a StackBlitz demo

Upfront active menu link

I use Javascript that will decorate an active link after it's been clicked. Question is, how can I load the page with one of the menu items already active?
Example: http://moschalkx.nl/
Javascript code:
function hlite_menu(obj) {
var lnk = document.getElementById('menu').getElementsByTagName('A');
for (var i in lnk) {
lnk[i].className = (lnk[i] === obj) ? 'menu_active' : 'menu_idle';
}
}
function set_menu() {
var lnk = document.getElementById('menu').getElementsByTagName('A');
for (var i in lnk) {
lnk[i].className = 'menu_idle';
lnk[i].onclick = function () {
hlite_menu(this);
}
}
if (lnk[i]) { /* ??? how do you know whether this is the link to activeate up front? */
hlist_menu(lnk[i]);
}
}
window.onload = set_menu;
CSS:
a.menu_idle {color:#333333; text-decoration:none;}
a.menu_active {color:#333333; text-decoration:underline;}
a:visited {color:#333333; text-decoration:none;}
a:hover {color:#333333; text-decoration:underline;}
I need to put in the logic somewhere inside
if (lnk[i]) { /* ??? how do you know whether this is the link to activeate up front? */
hlist_menu(lnk[i]);
}
to let the script know which link will be active upfront. As i'm not familiar with coding, i have no clue how to do this!
Set the initially active link in your markup:
<a target="iframe1" class="menu_active" href="gallery/photo_menu.html">PHOTOGRAPHY</a>
Then in your set_menu function, set the iframe's src attribute to the href of that link:
for (i in lnk) {
if (lnk.hasOwnProperty(i)) {
//lnk[i].className = 'menu_idle'; // initial menu states are set in markup. This line is no longer necessary.
lnk[i].onclick = hlite_menu;
if (lnk[i].className === 'menu_active') {
iframe.src = lnk[i].href;
}
}
}
I would also strongly recommend re-writing your JavaScript to the following:
var hlite_menu = function hlite_menu() {
'use strict';
var lnk = document.getElementById('menu').getElementsByTagName('a'),
i = null;
//set all links to idle
for (i in lnk) {
if (lnk.hasOwnProperty(i)) {
lnk[i].className = 'menu_idle';
}
}
//set this link to active
this.className = 'menu_active';
},
set_menu = function set_menu() {
'use strict';
var lnk = document.getElementById('menu').getElementsByTagName('a'),
iframe = document.getElementById('iframe1'),
c = document.getElementById('copyright'),
i = null;
// set copyright
c.innerText = (new Date()).getFullYear();
// set onclicks and initial iframe src.
for (i in lnk) {
if (lnk.hasOwnProperty(i)) {
//lnk[i].className = 'menu_idle'; // initial menu states are set in markup. This line is no longer necessary.
lnk[i].onclick = hlite_menu;
if (lnk[i].className === 'menu_active') {
iframe.src = lnk[i].href;
}
}
}
};
window.onload = set_menu;
This avoids several long-term problems like readability/maintenance, variable hoisting, and the dreaded document.write (which you are using to set your copyright date). You'll also want to change the copyright section to this:
<div id="footer">
ALL IMAGES © <span id="copyright"></span>
</div>
You can also write your navigation like this (avoiding tables for layout):
<div id="header">
<div class="logo">
<span style="">MO SCHALKX</span>
</div>
<div id="menu">
<a target="iframe1" class="menu_active" href="gallery/photo_menu.html">PHOTOGRAPHY</a>
<a target="iframe1" class="menu_idle" href="gallery/film_menu.html">FILM</a>
<a target="iframe1" class="menu_idle" href="about.html">ABOUT</a>
<a target="iframe1" class="menu_idle" href="http://reflecture.tumblr.com">BLOG</a>
</div>
</div>
and add this to your CSS:
#header {
float: left;
display: inline-block;
margin: 1em;
text-align: center;
}
.logo, #menu {
background-color: #FFF;
}
.logo {
font-size: 40px;
font-weight: 500;
font-style: inherit;
}
#menu {
margin-top: 5px;
}
#menu > a {
padding-left: 0.25em;
}
#menu > a {
border-left: 1px solid #000;
}
#menu > a:first-child {
border-left: none;
}
which should make it look the same. You can also combine your CSS rules for menu_active and a:hover (likewise with menu_idle and a:visited) like so:
a.menu_idle, a:visited {
color: #333333;
text-decoration: none;
}
a.menu_active, a:hover {
color: #333333;
text-decoration: underline;
}
Finally, you've wrapped your iframe in a <form id="form1" runat="server"> element. You can remove this entirely. It won't affect your layout and you don't actually have a form with any input elements so it's unnecessary. Also, the runat="server" attribute doesn't do anything unless you're running this on ASP.Net (and you obviously are not) so you may want to keep that in mind.
Altogether, you should be able to change the entire document source to the following with no real visual changes (and I think you'll find that it's a lot cleaner to look at in the source):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Mo Schalkx Photography</title>
<script type="text/javascript">
var hlite_menu = function hlite_menu() {
'use strict';
var lnk = document.getElementById('menu').getElementsByTagName('a'),
i = null;
//set all links to idle
for (i in lnk) {
if (lnk.hasOwnProperty(i)) {
lnk[i].className = 'menu_idle';
}
}
//set this link to active
this.className = 'menu_active';
},
set_menu = function set_menu() {
'use strict';
var lnk = document.getElementById('menu').getElementsByTagName('a'),
iframe = document.getElementById('iframe1'),
c = document.getElementById('copyright'),
i = null;
// set copyright
c.innerText = (new Date()).getFullYear();
// set onclicks and initial iframe src.
for (i in lnk) {
if (lnk.hasOwnProperty(i)) {
//lnk[i].className = 'menu_idle'; // initial menu states are set in markup. This line is no longer necessary.
lnk[i].onclick = hlite_menu;
if (lnk[i].className === 'menu_active') {
iframe.src = lnk[i].href;
}
}
}
};
window.onload = set_menu;
</script>
<style type="text/css">
body {
margin: 0;
overflow: hidden;
}
#header {
float: left;
display: inline-block;
margin: 1em;
text-align: center;
}
#iframe1 {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: -1;
}
#footer {
font-size: 9px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
text-align: center;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 20px;
visibility: visible;
display: block;
color: #000;
opacity: 0.4;
filter: alpha(opacity=40);
text-shadow: 0px 1px 0px rgba(255,255,255,.5); /* 50% white from bottom */;
}
.logo, #menu {
background-color: #FFF;
}
.logo {
font-size: 40px;
font-weight: 500;
font-style: inherit;
}
#menu {
margin-top: 5px;
}
#menu > a {
padding-left: 0.25em;
}
#menu > a {
border-left: 1px solid #000;
}
#menu > a:first-child {
border-left: none;
}
a.menu_idle, a:visited {
color: #333333;
text-decoration: none;
}
a.menu_active, a:hover {
color: #333333;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="header">
<div class="logo">
<span style="">MO SCHALKX</span>
</div>
<div id="menu">
<a target="iframe1" class="menu_active" href="gallery/photo_menu.html">PHOTOGRAPHY</a>
<a target="iframe1" class="menu_idle" href="gallery/film_menu.html">FILM</a>
<a target="iframe1" class="menu_idle" href="about.html">ABOUT</a>
<a target="iframe1" class="menu_idle" href="http://reflecture.tumblr.com">BLOG</a>
</div>
</div>
<div id="footer">
ALL IMAGES © <span id="copyright"></span>
</div>
<iframe id="iframe1" frameborder="0"></iframe>
</body>
</html>
UDPATE
To apply this on http://moschalkx.nl/gallery/film_menu.html, simply include the same JavaScript and comment out the lines that involve setting the copyright in set_menu and update the id of the iframe:
var hlite_menu = function hlite_menu() {
'use strict';
var lnk = document.getElementById('menu').getElementsByTagName('a'),
i = null;
//set all links to idle
for (i in lnk) {
if (lnk.hasOwnProperty(i)) {
lnk[i].className = 'menu_idle';
}
}
//set this link to active
this.className = 'menu_active';
},
set_menu = function set_menu() {
'use strict';
var lnk = document.getElementById('menu').getElementsByTagName('a'),
iframe = document.getElementById('gallery'),
//c = document.getElementById('copyright'),
i = null;
// set copyright
//c.innerText = (new Date()).getFullYear();
// set onclicks and initial iframe src.
for (i in lnk) {
if (lnk.hasOwnProperty(i)) {
//lnk[i].className = 'menu_idle'; // initial menu states are set in markup. This line is no longer necessary.
lnk[i].onclick = hlite_menu;
if (lnk[i].className === 'menu_active') {
iframe.src = lnk[i].href;
}
}
}
};
window.onload = set_menu;
Also, since you're including jQuery on this page, you could write that in jQuery as:
$(document).ready(function () {
$('#menu a').click(function (e) {
var self = $(this),
href = self.attr('href');
$('#menu a').not(self).removeClass('menu_active').addClass('menu_idle');
self.removeClass('menu_idle').addClass('menu_active');
$('#gallery').attr('src', href);
});
});

Categories

Resources