I have a toggle that is responsible for changing the color palette of the website as well as some key images. The code works well however I notice that if I visit the site from a computer that I have not used before the key images take a long time to change when the toggle is clicked on.
The main issue is the "sun"/"moon" and "click here" image. I wonder if there is a way to run javascript faster? maybe by changing the positioning of the script or some other trick that I am not aware of. I'll post the website below and all the code, if anyone can point me to some documentation I can read on this or another helpful resource I would very much appreciate it. Love you guys.
Website:
mattmoracoding.com
let darkMode = localStorage.getItem('darkMode');
const darkModeToggle = document.querySelector('#dark-mode-toggle');
const enableDarkMode = () => {
document.body.classList.add('darkmode');
localStorage.setItem('darkMode', 'enabled');
darkModeToggle.src = "Images/sun.png"
click.src = "Images/click-here-dark.png"
clock1.src = "Images/clock-dark.png"
clock2.src = "Images/clock-dark.png"
clock3.src = "Images/clock-dark.png"
currency1.src = "Images/currency-dark.png"
currency2.src = "Images/currency-dark.png"
currency3.src = "Images/currency-dark.png"
scrollUp.src = "Images/scroll-dark.png"
}
const disableDarkMode = () => {
document.body.classList.remove('darkmode');
localStorage.setItem('darkMode', null);
darkModeToggle.src = "Images/moon.png"
click.src = "Images/click-here-light.png"
clock1.src = "Images/clock-light-small.png"
clock2.src = "Images/clock-light-medium.png"
clock3.src = "Images/clock-light-large.png"
currency1.src = "Images/currency-light-small.png"
currency2.src = "Images/currency-light-medium.png"
currency3.src = "Images/currency-light-large.png"
scrollUp.src = "Images/scroll-light.png"
}
if (darkMode === 'enabled') {
enableDarkMode();
}
darkModeToggle.addEventListener('click', () => {
darkMode = localStorage.getItem('darkMode');
if (darkMode !== 'enabled') {
enableDarkMode();
} else {
disableDarkMode();
}
});
// ---------------------- Scroll Up ----------------------//
const scrollBtn = document.getElementById("scrollUp");
scrollBtn.addEventListener("click", () => {
document.documentElement.scrollTop= 0;
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Matt Mora Coding</title>
<link rel="stylesheet" href="CSS/index.css" />
<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=Merriweather:wght#300&family=Playfair+Display:wght#500&family=Roboto+Slab:wght#500&display=swap" rel="stylesheet">
<script src="Scripts/index.js" async></script>
</head>
<!--------------------------------------Wrapper------------------------------------>
<section class="wrapper">
<!-----------------------------------Navigation---------------------------------->
<div class="logo">
MM
</div>
<div class="nav">
Home About Contact
</div>
<div class="click-here">
<img src="Images/click-here-light.png" Id="click" alt="click here">
</div>
<!--------------------------------Dark/Light Mode-------------------------------->
<img src="Images/moon.png" id="dark-mode-toggle" class="dark-mode-toggle">
<!-------------------------------------Hero-------------------------------------->
<div class="hero-title">
<h1>Hey, I'm Matt Mora</h1>
</div>
<div class="hero-body">
<p>I'm a front end developer.</p>
</div>
<div class="hero-social">
TW GH LI
</div>
<div class="hero-image-small">
<img src="Images/me-small.png" alt="Handsome Guy" />
</div>
<div class="hero-image-medium">
<img src="Images/me-medium.png" alt="Handsome Guy" />
</div>
<div class="hero-image-large">
<img src="Images/me-large.png" alt="Handsome Guy" />
</div>
<!--------------------------------Section CTA----------------------------------->
<div class="cta-banner"></div>
<div class="cta-text-small">
<p>Checkout my work!</p>
</div>
<div class="cta-text">
<p>Checkout some of the things I'm working on!</p>
</div>
<!---------------------------------Project1------------------------------------->
<div class="project1-small">
<img src="Images/clock-light-small.png" id="clock1" alt="Clock"/>
</div>
<div class="project1-medium">
<img src="Images/clock-light-medium.png" id="clock2" alt="Clock"/>
</div>
<div class="project1-large">
<img src="Images/clock-light-large.png" id="clock3" alt="Clock"/>
</div>
<div class="project1-title">
<h1>Clock</h1>
</div>
<div class="project1-body">
<p>I built this clock as a warm up project to gain experience using HTML and
more advance css.</p>
<p>This project taught me how to write more advance CSS and to structure
HTML in a simple way.</p>
</div>
<div class="languages1">
<img src="Images/html.png" alt="HTML"/>
<img src="Images/css.png" alt="CSS"/>
</div>
<!---------------------------------Project2------------------------------------->
<div class="project2-small" >
<img src="Images/currency-light-small.png" alt="Currency Converter" id="currency1"/>
</div>
<div class="project2-medium" >
<img src="Images/currency-light-medium.png" alt="Currency Converter" id="currency2"/>
</div>
<div class="project2-large" >
<img src="Images/currency-light-large.png" alt="Currency Converter" id="currency3"/>
</div>
<div class="project2-title">
<h1>Currency Converter</h1>
</div>
<div class="project2-body">
<p>The goal of this project was to expand my understanding of javascript.</p>
<p>By building this project I learned much more javascript than I had before and allowed me
to work on something that I was excited about.</p>
</div>
<div class="languages2">
<img src="Images/html.png" alt="HTML"/>
<img src="Images/css.png" alt="CSS"/>
<img src="Images/java.png" alt="Javascript"/>
</div>
<!---------------------------------Project3------------------------------------->
<div class="project3-small">
<img src="Images/weather-small.png" alt="Weather App"/>
</div>
<div class="project3-medium">
<img src="Images/weather-medium.png" alt="Weather App"/>
</div>
<div class="project3-large">
<img src="Images/weather-large.png" alt="Weather App"/>
</div>
<div class="project3-title">
<h1>Weather App</h1>
</div>
<div class="project3-body">
<p>The goal of this project was to familiarize myself with working with an API.</p>
<p>I learnt how to use my understanding of HTML, CSS and Javascript to build new
project and most importantly I added the ability to work with APIs </p>
</div>
<div class="languages3">
<img src="Images/html.png" alt="HTML"/>
<img src="Images/css.png" alt="CSS"/>
<img src="Images/java.png" alt="Javascript"/>
<a> <img src="Images/api.png" alt="API"/></a>
</div>
<!----------------------------------Footer------------------------------------>
<div class="footer-banner"></div>
<div class="footer-center">
<p>Made by Matt Mora</p>
</div>
<img src="Images/scroll-light.png" id="scrollUp"/>
</section>
</html>
I used your comments to find a resource to preload images only using HTML and CSS. Looks like images are loading faster now without flickering. I will also optimize the images to make them load faster themselves using the sources given but this will take me some time. Let me know what you think of this solution and if there is anything I could do to improve on it.
#preload { display: none; }
<div id="preload">
<img src="Images/click-here-light.png" width="1" height="1" alt="Image 01" />
<img src="Images/click-here-dark.png" width="1" height="1" alt="Image 02" />
<img src="Images/moon.png" width="1" height="1" alt="Image 03" />
<img src="Images/sun.png" width="1" height="1" alt="Image 04" />
</div>
`
Related
I've got the following code to move the childs order in an element. When I click once, it works fine, but when I click multiple times, it only works every 2nd or 3rd time.
const prevP = () => {
const pList = document.getElementById("project-list")
const firstProject = pList.firstChild;
const lastProject = pList.lastChild;
pList.insertBefore(lastProject, firstProject);
}
const nextP = () => {
console.log("next");
const pList = document.getElementById("project-list")
const firstProject = pList.firstChild;
let lastProject = pList.lastChild;
pList.insertBefore(firstProject, lastProject);
}
<span class="material-icons md-48 close icon-btn" onclick="prevP()"
>navigate_before</span
>
<div class="project-list" id="project-list">
<div class="project">
<img href="protfolio" alt="" />
<p>My Portfolio 1</p>
</div>
<div class="project">
<img href="protfolio" alt="" />
<p>My Portfolio 2</p>
</div>
<div class="project">
<img href="protfolio" alt="" />
<p>My Portfolio 3</p>
</div>
<div class="project">
<img href="protfolio" alt="" />
<p>My Portfolio 4</p>
</div>
<div class="project">
<img href="protfolio" alt="" />
<p>My Portfolio 5</p>
</div>
</div>
<span class="material-icons md-48 close icon-btn" onclick="nextP()"
>navigate_next</span
>
I also realised that sometimes the code messes up the order of the elements when using both buttons, and I have no idea why this is happening
The cause of that behaviour is that you use firstChild and lastChild. These may select text nodes with just some white space. Change these to firstElementChild and lastElementChild.
Secondly, the "Next" action should not insert the first element before the last element, but after it. For that you can use the method appendChild:
pList.appendChild(firstProject);
I have div container, that holds 4 more divs and each of these divs have a header, image and a paragraph tag. What I am making is a game, where when I click on one of the divs, images, the remaining 3 images that were not clicked move to the move to another div section with a class of "enemies". How would I do this without having a bunch of onclick functions for each character?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Week 4 Game</title>
<link rel = "stylesheet" type = "text/css" href = "assets/css/reset.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<!-- Added link to the jQuery Library -->
<script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script>
<script type="text/javascript" src = "assets/javascript/game.js"> </script>
</head>
<body>
<div class = "characters">
<div class="charContainer">
<h2 id="c1"></h2>
<img class="vade" src="assets/images/vader.jpg">
<p id="c1hp" data-hp = "120"></p>
</div>
<div class="charContainer1">
<h2 id="c2"></h2>
<img class="skywalker" src="assets/images/luke.jpg">
<p id="c2hp" data-hp = "100"></p>
</div>
<div class="charContainer2">
<h2 id="c3"></h2>
<img class="obi" src="assets/images/obiwan.jpg">
<p id="c3hp" data-hp = "150"></p>
</div>
<div class="charContainer3">
<h2 id="c4"></h2>
<img class="dmaul" src="assets/images/maul.png">
<p id="c4hp" data-hp = "180"></p>
</div>
</div>
<div id="your">
<h2>Your Character</h2>
<!-- <img class="dmaul" src="assets/images/maul.png"> -->
</div>
</body>
</html>
jQuery
$(document).ready(function(){
$('#c1').text("Darth Vader");
$('#c2').text("Luke Skywalker");
$('#c3').text("Obi Won");
$('#c4').text("Darth Maul");
var health = $('#c1hp').data('hp');
$('#c1hp').html(health);
var health = $('#c2hp').data('hp');
$('#c2hp').html(health);
var health = $('#c3hp').data('hp');
$('#c3hp').html(health);
var health = $('#c4hp').data('hp');
$('#c4hp').html(health);
$('.charContainer').on('click', function(){
var yourCharacter = $(this);
$('#your').append(yourCharacter);
});
});
I am trying to move anyone of the <div>s .charContainer, .charContainer1, .charContainer2, .charContainer3 including the header, <img> and <p> tag inside of it to the <div> with id #your.
Update: I found a solution by doing a .each function for the charContainer. Instead of having 4 different charContainers, I just all named them the same class and in the .each function, for each of these classes that did not get appended to the chosen character box, i added a class called .foes, so that I can now differentiate between divs that have been "selected" and those that have not.
I believe your error was that you have different classes for "charContainer" (1,2,3,4). In your case the event should look like
$('.charContainer, .charContainer1, .charContainer2, .charContainer3').on('click', function(){
Also the way you do it - you will add multiple characters clicking on them one after another. How about this:
$(function() {
$('.charContainer').on('click', function(){
var yourCharacter = $(this);
$('#your').empty().append(yourCharacter.clone());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "characters">
<div class="charContainer">
<h2 id="c1">Darth Vader</h2>
<img class="vader" src="assets/images/vader.jpg">
<p id="c1hp" data-hp = "120"></p>
</div>
<div class="charContainer">
<h2 id="c2">Luke Skywalker</h2>
<img class="skywalker" src="assets/images/luke.jpg">
<p id="c2hp" data-hp = "100"></p>
</div>
<div class="charContainer">
<h2 id="c3">Obi Wan</h2>
<img class="obiwan" src="assets/images/obiwan.jpg">
<p id="c3hp" data-hp = "150"></p>
</div>
<div class="charContainer">
<h2 id="c4">Darth Maul</h2>
<img class="dmaul" src="assets/images/maul.png">
<p id="c4hp" data-hp = "180"></p>
</div>
</div>
<div id="your">
<h2>Your Character</h2>
</div>
I would like to change the source of the image element with the id of "front". I have a basic script at the top, but it doesn't work. I was just attempting to come up with something but I'm very bad at JavaScript.
<html>
<head>
<link rel="stylesheet" type="text/css" href="home.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="home.js"></script>
<script type="text/javascript">
var reswidth=screen.width;
if (reswidth<400){
var x = document.getElementsById("front");
x.src="../images/colbysmall.png"
}
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="header">
<div class="navigation">
<ul>
<li><a id="home" href="">Home</a></li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
<li></li>
</ul>
</div>
<div class="yellow"></div>
<div class="x"></div>
</div>
</head>
<body>
<div class="website">
<div class="logo"></div>
<img src="../images/ColbyFaceblack.jpg" id="front" width="100%" >
<div class="content">
<div class="menu"></div>
<div class="office"></div>
</div>
<div class="body2">
<img src="../images/simple_dashed_full.png" width="100%">
<div class="weboutline">
<img src="../images/web_outline.png" width="100%">
</div>
<div class="body2img2">
<img src="../images/portfolio.png" width="100%">
</div>
<div class="body2img3">
<img src="../images/blog.png" width="100%">
</div>
</div>
<div class="body3">
<img src="../images/body.png" width="100%">
<img class="touch" src="../images/get_in_touch_beige.png" width="50%">
</div>
<footer>
<img src="../images/footer.png" width="100%">
<div class="copyright"> copyright COLBY MOFFETT 2015 </div>
<div class="facebook"></div>
<div class="instagram"></div>
<div class="twitter"></div>
</footer>
</body>
</div>
</html>
This is right, but has to be executed on change of screen size:
$(function () {
$(window).resize(function () {
var reswidth=screen.width;
if (reswidth<400){
var x = document.getElementsById("front");
x.src="../images/colbysmall.png"
}
});
});
Also make sure you execute it inside the $(function () { }); to execute on the DOM loaded contents. So, to make sure it also executes when it gets loaded, you need to store it in a named function and execute it every time when the window is resized.
Your final code will be:
$(function () {
var reszWindow = function () {
var reswidth=screen.width;
if (reswidth<400){
var x = document.getElementsById("front");
x.src="../images/colbysmall.png"
}
};
reszWindow();
$(window).resize(reszWindow);
});
Since you are already using jQuery, the following could be one of the solutions:
$( window ).resize(function() {
if($( window ).width() < 400) {
$("img#front").attr("src","../images/colbysmall.png");
} else {
$("img#front").attr("src","../images/ColbyFaceblack.jpg");
}
});
(PS. Untested code) :)
changing image according to screen resolution:
$(window).resize(function() {
var scrWidth = $(window).width();
if(scrWidth < 500){
$('#myImage').attr('src', 'http://wallpaper-download.net/wallpapers/logo-wallpapers-google-chrome-background-wallpaper-33143.jpg');
}
if(scrWidth > 500){
$('#myImage').attr('src', 'http://www.bhmpics.com/download/google_colorful_background-1920x1080.jpg');
}
});
(random images from google)
Fiddle here: http://jsfiddle.net/59ehtLde/
Javascript aside, you can do this with just HTML5. Browser support isn't great, but isn't bad, either.
<picture>
<source media="(min-width: 400px)" srcset="../images/colbysmall.png">
<img src="../images/ColbyFaceblack.jpg">
</picture>
<p>With placeholders:</p>
<picture>
<source media="(min-width: 400px)" srcset="http://placehold.it/400?text=colbyfaceblack">
<img src="http://placehold.it/200?text=colbysmall">
</picture>
I looked through the FAQ but couldn't figure out what was causing this (in js). I'm trying to get something live soon and I'm bypassing better animation for the time being, possibly also AJAX.
What I'm going is bringing two external php pages a includes to the current page, one is a gallery slider and the other is where the gallery imagery will appear. Here is a link to the page I'm currently testing so you can see:
http://www.chrisjohndesigns.com/artwork-conventions.php
So the code I've used has been simple replacement .innerHTML calls where the left and right arrows call the next gallery div and then the thumbnails within that gallery call the artwork that appears below. The left and right arrows work just fine but as soon as any of the thumbnails are clicked (and they do work properly) the left and right arrows stop working and you're stuck on whatever frame you chose from.
Here is the code from the conventions page:
<div id="field">
<div id="gallery-callout">
<div class="thumbs-slider-field-container" id="generic-slider">
<div class="thumbs-slider-field" >
<div id="prev">
<img src="images/gallery-scroll-left.png" width="42" height="120" />
</div>
<div id="thumbs-slider">
<img src="images/thumbs/digital-art/thumb-space-oddity.jpg" id="thumb-space-odity" onclick="changeDiv('space-oddity')"/>
<img src="images/thumbs/digital-art/thumb-atomic-nurse.jpg" id="thumb-nurse" onclick="changeDiv('nurse')"/>
<img src="images/thumbs/digital-art/thumb-zombie-make-over.jpg" id="thumb-zombie-makeover" onclick="changeDiv('zombie-makeover')"/>
<img src="images/thumbs/digital-art/thumb-fanart-trigun.jpg" id="thumb-trigun" onclick="changeDiv('trigun')"/>
<img src="images/thumbs/digital-art/thumb-shadowrun.jpg" id="thumb-shadowrun" onclick="changeDiv('shadowrun')"/>
</div>
<div id="next">
<img src="images/gallery-scroll-left.png" width="42" height="120" onclick="callSlider('conventions2')" />
</div>
</div>
</div>
</div>
<div class="rule">
</div>
<div class="entry" style="margin-bottom:0px;">
<h4 style="color:#ffffff; margin:0px;">| artwork > conventions</h4>
</div>
<div class="gallery-frame" id="generic">
<h1 style="margin-top:5px; margin-bottom:10px;">CONVENTION ARTWORK</h1>
<div class="artwork">
<img src="images/artwork/portfolio-design/logos/atomic-heart/atomicH-heart_0910.png" />
</div>
<div class="rule">
</div>
<p>Here you will find arwork produced for (or for sale at) the conventions that Atomic Glam attends. Our premier convention is Anime Weekend Atlanta held in Atlanta each September.<br />(Above: The Atomic Heart Logo of Atomic Glam)</p>
<div style="display:none;">
<?php include("artwork-gallery-digital.php"); ?>
<?php include("sliders/slider-artwork-conventions.php"); ?>
</div>
</div>
The js I'm using:
<script type="text/javascript">
altViews = function(next_img) {
document.getElementById("bigPicture").src = next_img;
}
function changeDiv(id) {
var target = document.getElementById('generic');
var id = document.getElementById(id);
target.innerHTML = id.innerHTML;
}
function callSlider(slides) {
var target2 = document.getElementById('generic-slider');
var slides = document.getElementById(slides);
target2.innerHTML = slides.innerHTML;
}
</script>
An example of the slider:
<div class="thumbs-slider-field" id="conventions1">
<div id="prev">
<img src="../images/gallery-scroll-left.png" width="42" height="120" />
</div>
<div id="thumbs-slider">
<img src="../images/thumbs/digital-art/thumb-space-oddity.jpg" id="thumb-space-odity" onclick="changeDiv('space-oddity')"/>
<img src="../images/thumbs/digital-art/thumb-atomic-nurse.jpg" id="thumb-nurse" onclick="changeDiv('nurse')"/>
<img src="../images/thumbs/digital-art/thumb-zombie-make-over.jpg" id="thumb-zombie-makeover" onclick="changeDiv('zombie-makeover')"/>
<img src="../images/thumbs/digital-art/thumb-fanart-trigun.jpg" id="thumb-trigun" onclick="changeDiv('trigun')"/>
<img src="../images/thumbs/digital-art/thumb-shadowrun.jpg" id="thumb-shadowrun" onclick="changeDiv('shadowrun')"/>
</div>
<div id="next">
<img src="../images/gallery-scroll-left.png" width="42" height="120" onclick="callSlider('conventions2')" />
</div>
</div>
Any thoughts why one is canceling out the other?
Please can anyone tell me the coding in terms of Js, css for displaying image effect like one in http://dalailama.com/ ie changing of images one after another. If possible let me know about adding video link in the sidebar with the minor screen.
This should do the trick:
HTML:
<div id="testers">
<div class="tester">
<img src="http://regmedia.co.uk/2008/03/18/google_adwords_machine.png" alt="" />
</div>
</div>
<div id="morework">
<div class="holderdiv">
<div class="tester">
<img src="http://www.swwebs.co.uk/images/google-pagerank.jpg" alt="" />
</div>
</div>
<div class="holderdiv">
<div class="tester">
<img src="http://regmedia.co.uk/2008/03/18/google_adwords_machine.png" alt="" />
</div>
</div>
</div>
CSS:
#morework{display:none;}
jQuery:
$(document).ready(function(){
function runIt(){
$('#morework').find('.holderdiv').each(function(i, elem) {
$("#testers").delay(5000).fadeOut(1000, function() {
$(this).html($(elem).html());
}).fadeIn(1000, runIt);
});
};
runIt()
});
Check it out in action here - http://jsfiddle.net/sfsPx/