I am developing my web developer portfolio. In that when I press the hamburger, the color of the top nav bar should also change. But sometimes in Chrome it doesn't change and I have to reload. I thought it is probably because the script didn't load. But even after waiting for a long time this bug occurs. Can anyone say why it happens and how to solve it. Note that this color change is only for mobile nav. The source code is available at https://github.com/mrjithin/my-portfolio/ . And the script that does this thing is available with the name ham.js in the scripts folder.
The top color should have been the same as the color of the rest of the navbar.
// ham.js
// For mobile hamburger
const mobNav = document.querySelector("nav#mobile");
const deskNav = document.querySelector("nav.desktop");
const navColor = window.getComputedStyle(mobNav).getPropertyValue("background-color");
document.getElementsByClassName("ham")[0].addEventListener("click", (event) => {
document.getElementsByClassName("ham")[0].classList.toggle("cross");
document.getElementById("line2").classList.toggle("none");
mobNav.classList.toggle("on");
mobNav.classList.toggle("off");
if(mobNav.className === "on"){
deskNav.style.backgroundColor = navColor;
} else {
deskNav.style.backgroundColor = "";
}
event.stopPropagation();
});
// To close the navbar on clicking a link.
const mobileLis = document.querySelectorAll("nav#mobile a");
Array.from(mobileLis).forEach(link => {
link.addEventListener("click", event => {
document.getElementsByClassName("ham")[0].classList.toggle("cross");
document.getElementById("line2").classList.toggle("none");
mobNav.classList.toggle("on");
mobNav.classList.toggle("off");
if(mobNav.className === "on"){
deskNav.style.backgroundColor = navColor;
} else {
deskNav.style.backgroundColor = "";
}
event.stopPropagation();
})
})
Thanks in advance!
Instead of this code
const navColor = window.getComputedStyle(mobNav).getPropertyValue("background-color");
try this one
const navColor = () => window.getComputedStyle(mobNav).getPropertyValue("background-color");
And call navColor as a function navColor()
Related
Please take a look at my page, https://kuncung38.github.io/portfolio-website/
When I used live server from VSCode, everything works just as expected, When I uploaded this to github pages, a weird bug appeared.
You will notice the problem, it has a weird behavior when you clicked either button, you will have to clicked the button twice for something to happen. Here is my code:
var x = document.getElementById('second-section');
var memeSection = document.getElementsByClassName("memeSection");
var seriousSection = document.getElementsByClassName("seriousSection");
var meme = document.getElementsByClassName("meme");
var serious = document.getElementsByClassName("serious");
function show() {
x.style.display = 'block';
Array.from(memeSection).forEach(memeSection => memeSection.style.display = 'none');
Array.from(seriousSection).forEach(seriousSection => seriousSection.style.display = 'block');
Array.from(meme).forEach(meme => meme.style.display = 'none');
Array.from(serious).forEach(serious => serious.style.display = 'flex');
window.location.href = "index.html#home";
}
function showMeme() {
x.style.display = 'block';
Array.from(memeSection).forEach(memeSection => memeSection.style.display = 'block');
Array.from(seriousSection).forEach(seriousSection => seriousSection.style.display = 'none');
Array.from(meme).forEach(meme => meme.style.display = 'flex');
Array.from(serious).forEach(serious => serious.style.display = 'none');
console.log("no problem till here")
window.location.href = "index.html#home-meme";
}
Basically the two buttons on the homepage have these two functions. I do not know what is wrong with my codes, You can inspect the webpage to see the full code if needed, or you can click here.
Please help me :(
The first time you click, index.html is added to the URL, so effectively you navigate away from the current page. If you start out at https://kuncung38.github.io/portfolio-website/index.html the problem disappears.
A solution would be not to overwrite the entire window.location.href but only the hash:
window.location.hash = "#home";
That should work whether or not index.html is in the URL.
Good evening,
i was working on a part of what i hope will be my future website and i wanted to add a "photograpy" section to it, and here comes the problem.
since the title in the main page constatly changes color, i'd like to grab its current color to transfer it to the title of the other page to play an animation later on.
the problem is that when i press the related button, i am taken to the photograpy page, but the title remains black.
i've tried seraching for help on google but i haven't been able to find much.
here is the JS
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", function() {
loaded();
});
} else if (document.attachEvent) {
document.attachEvent("onreadystatechange", function() {
loaded();
});
}
function loaded() {
document.getElementById("PHtitle").style.color === titlecolor;
}
function script() {
const titlecolor = document.getElementById("title").style.color;
};
document.getElementById('photograpy').onclick = function () {
script();
};
The snippets don't allow for localStorage, so here is just the javascript.
First, I let the variables outside of a function. The titleColor function checks to see if titleColor was saved in localStorage, if not the default color is black.
Then I set the color of the phtitle to the contents of titleColor variable.
In the script function, I set the localStorage variable to the getComputedStyle color of the title.
Then last I use an event listener on the button to run the script for saving the color.
LocalStorage is a way to store data in the user's browser until they close their browser/clear their data etc.. Which will allow it to be usable on different pages then where it was saved.
let titleColor = localStorage.getItem("titleColor") || "#000000";
let PHtitle = document.querySelector("#PHtitle");
let title = document.querySelector("#title");
let btn = document.querySelector("#photography");
if(PHtitle){
PHtitle.style.color = titleColor;
}
function script() {
localStorage.setItem("titleColor", getComputedStyle(title).color)
}
if(btn && title){
btn.addEventListener("click", function() {
script();
})
}
I am creating a web based jeopardy game and I seem to have run into an issue.
when I right click to edit a player name a input menu will show up. The next time I click edit two menus pop up... This is kinda hard for me to explain so I linked a video with a demo of what the issue is.
Javascript Code
let player1_name_edit = document.getElementById('player1-name-edit')
let editButton = document.getElementById('edit-context-menu') // Gets 'edit-context-menu' from DOM
let inputMenu = document.getElementById('input-menu')
var cancelButton = document.getElementById('cancel-context-menu') // Gets 'cancel-context-menu' from DOM
player1_name_edit.addEventListener('contextmenu', function(event) {
if(event.target == player1_name_edit) {
event.preventDefault()
showEditMenu()
editButton.addEventListener('click', function() {
createInputMenu()
inputMenu.addEventListener('keyup', function(event) {
if(event.key === 'Enter') {
let inputMenuValue = document.getElementById('name-input')
player1_name_edit.innerText = inputMenuValue.value
removeInputMenu()
}
})
})
}
})
Video showing error (sorry for the low quality)
I am trying to use localStorage to save the dark mode preference on my website. The issue I am running into is when you switch to dark mode and hit refresh, it stays in dark mode. However, if you switch to dark mode, then back to light mode, and hit refresh, it loads dark mode.
I am stuck so far and haven't been able to find any helpful resources on this yet.
Here is my fiddle along with my js script below.
Fiddle
Javascript
$(document).ready(function(){
$('ul').click(function(){
$('ul').toggleClass('active')
let darkThemeEnabled = $('section').toggleClass('dark');
localStorage.setItem('dark-theme-enabled', darkThemeEnabled);
})
})
if (localStorage.getItem('dark-theme-enabled')) {
$('section').toggleClass('dark');
$('ul').toggleClass('active');
}
You need to set a Boolean to localStorage:
$("section").toggleClass("dark");
let darkThemeEnabled = $("section").hasClass("dark");
localStorage.setItem("dark-theme-enabled", darkThemeEnabled);
EDIT
Also change your getting method:
if (localStorage.getItem('dark-theme-enabled')) {
$('section').addClass('dark');
$('ul').addClass('active');
}
This worked for me (i put my dark-mode on my body):
const body = document.querySelector('body');
const checkBox = document.getElementById('checkbox');
window.addEventListener('load', () => {
if (!localStorage.dark_mode)
localStorage.dark_mode = false;
else if (JSON.parse(localStorage.dark_mode) === true) {
body.classList.add('dark-mode');
checkbox.checked = true;
}
});
checkBox.addEventListener('click', (e) => {
body.classList.toggle('dark-mode');
if (body.classList.contains('dark-mode')) {
checkbox.checked = true;
localStorage.dark_mode = true;
}
else {
checkbox.checked = false;
localStorage.dark_mode = false;
}
});
I have written a (very simple) gnome-shell extension to switch focus mode (gnome-shell 3.10 on Ubuntu 14.04). The extension is available on github; I am waiting to submit it because it has a very annoying bug --- which I am unable to understand and so to fix.
The extension is based on the standard example extension, the code is so simple that I can paste it here completely, although it needs the icon files to work.
const FFM_VARIANT='sloppy';
const St = imports.gi.St;
const Main = imports.ui.main;
const Tweener = imports.ui.tweener;
const Gtk = imports.gi.Gtk;
const Gdk = imports.gi.Gdk;
const ExtensionUtils = imports.misc.extensionUtils;
const Meta = ExtensionUtils.getCurrentExtension();
const Util = imports.misc.util;
const Gio = imports.gi.Gio;
let text, button, icon_f, icon_c, wm_prefs;
var focus;
const FFM=0;
const CTF=1;
function _set_FFM() {
focus = FFM;
button.set_child(icon_f);
wm_prefs.set_string('focus-mode', FFM_VARIANT);
}
function _set_CTF() {
focus = CTF;
button.set_child(icon_c);
wm_prefs.set_string('focus-mode', 'click');
}
function _hideMsg() {
if (text) {
Main.uiGroup.remove_actor(text);
text = null;
}
}
function _showMsg(what) {
if (!text) {
text = new St.Label({ style_class: 'msg-label', text: what });
Main.uiGroup.add_actor(text);
}
text.opacity = 255;
let monitor = Main.layoutManager.primaryMonitor;
text.set_position(Math.floor(monitor.width / 2 - text.width / 2),
Math.floor(monitor.height / 2 - text.height / 2));
Tweener.addTween(text,
{ opacity: 0,
time: 3,
transition: 'easeOutQuad',
onComplete: _hideMsg });
}
function _switch() {
_hideMsg();
if (focus == FFM) {
_showMsg("Setting Click-to-focus");
_set_CTF();
} else {
_showMsg("Setting Focus-follow-mouse");
_set_FFM();
}
}
function init() {
button = new St.Bin({ style_class: 'panel-button',
reactive: true,
can_focus: true,
x_fill: true,
y_fill: false,
track_hover: true });
Gtk.IconTheme.get_default().append_search_path(Meta.dir.get_child('icons').get_path());
icon_f = new St.Icon({ icon_name: 'fmode',
style_class: 'system-status-icon' });
icon_c = new St.Icon({ icon_name: 'cmode',
style_class: 'system-status-icon' });
wm_prefs=new Gio.Settings({schema: 'org.gnome.desktop.wm.preferences'});
}
function enable() {
// start with the current mode --- sync icon and internal state.
what=wm_prefs.get_string('focus-mode');
if (what == 'click') {
_set_CTF();
} else { // sloppy or mouse
_set_FFM();
}
button.connect('button-press-event', _switch);
Main.panel._rightBox.insert_child_at_index(button, 0);
}
function disable() {
Main.panel._rightBox.remove_child(button);
}
...and it works perfectly, switching focus mode at every click, changing the icon and doing what it is supposed to do.
But if I lock and unlock the screen, the extension puzzling stops working. Clicking on the icon simply shows the same message (stuck on the focus mode it was in before locking). Enabling and disabling the extension will resume the correct working.
Shouldn't be the lock - unlock thing being transparent to the applications? And if not, there is some hook I can use to force an enable/disable on screen unlock? Looking glass does not show any error, nor there are logs anywhere to be seen.
In this case, Gnome-Shell calls the disable() function when you lock the screen and the enable() function when you unlock it. The init() function is executed once in your session. So, your button is adding a new connection to the same function every time you unlock your screen when you call the function inside enable().
This link may help http://blog.mecheye.net/2011/11/modern-gnome-shell-extension-part-1/
You can try something like the code below to use the event with enable() and disable()functions:
var switch_event;
function enable() {
switch_event = button.connect('button-press-event', _switch);
}
function disable() {
button.disconnect(switch_event);
}
I still don't know why, but it seems that moving the call
button.connect('button-press-event', _switch);
from enable() to init() fixes the problem.
Still, if someone can explain why, I'll mark their answer correct!.