I'm trying to do javascript navbar but for some reason can't get it to work. I inspected those elements on the browser, but when I click the open button elements don't get those classes. Could somebody check out what is my problem?
Here's my Javascript:
const body = document.querySelector("body");
const navbar = document.querySelector(".main-menu");
const openButton = document.querySelector(".open-button");
const closeButton = document.querySelector(".close-button");
openButton.onClick = () => {
navbar.classList.add("show");
openButton.classList.add("hide");
body.classList.add("disabled");
};
closeButton.onClick = () => {
body.classList.remove("disabled");
navbar.classList.remove("show");
openButton.classList.remove("hide");
};
You can use Jquery instead for that simply DOM Manipulations, which is a framework of Javascript. Using Jquery makes your code more readable and shorter than vanilla javascript.
$(document).ready(()=>{
$("#openButton").click(()=>{
$("body").toggleClass("disabled");
$("#closeButton").toggleClass("hide");
$(".main-menu").toggleClass("show");
});
});
Related
I am using the following code to reload a stylesheet when the user makes a selection:
<link type="text/css" id="main_style" href="css/style.php" rel="stylesheet">
<button id="secret_1" style="display:none;"></button>
$(document).ready(function(){
function freshStyle(stylesheet){
$('#main_style').attr('href',stylesheet);
}
$('#secret_1').click(function(event){
event.preventDefault();
var restyled = 'style.php?v='+Math.floor(Math.random() * 10000);
freshStyle(restyled);
});
});
In Chrome, the reload happens fluidly, and the transitions look great. In Firefox, the website temporarily becomes a garbled mess (while the stylesheet is being reloaded) for a second before the new stylesheet is active.
Is this something that can be solved with code, or is this just a feature of the Firefox browser?
If you load the new stylesheet and remove the old one once the new takes effect, the flash of unstyled format should no longer happen
Note: I've done away with jquery inside the .ready since I don't really know how to do a lot of what is happening here in jQuery - vanilla JS all the way for me (but you can convert to jquery if you're more comfortable with it)
$(document).ready(function() {
function freshStyle(stylesheet) {
const id = 'main_style';
const main = document.getElementById(id);
const sibling = main.nextElementSibling;
const parent = main.parentElement;
const style = document.createElement('link');
style.rel = 'stylesheet';
style.href = stylesheet;
style.onload = () => {
// load fires BEFORE style is applied - so delay a tick
setTimeout(() => {
// remove the old stylesheet
main.remove();
// set the id of the new sheet to the removed one
style.id = id;
}, 0);
};
// this just ensures the new stylesheet ends up exactly where the old was
parent.insertBefore(style, sibling);
}
document.getElementById('secret_1').addEventListener('click', (e) => {
e.preventDefault();
const restyled = `style.php?v=${Math.floor(Math.random() * 10000)}`;
freshStyle(restyled);
});
});
First off I would like to say, the person that originally created this portion of the code is no longer on the team.
We are creating a development tool to Administrate and Develop servers for our game, that has its own programming language.
I'm using JavaFX with WebView to generate the chat area of the development tool to communicate with other developers and staff. However I want it so hen you post a link it actually shows as a link instead of plain text. I have tried things such as AutoLinker with no success. Here is the HTML portion of the webview.
<script src=".././scripts/Autolinker.js"></script>
<script type="text/javascript">
app = null;
const messages = document.getElementById("messages");
function addMessage(message, options) {
const p = document.createElement("p");
const c = message.indexOf(":");
const modifiedMessage = message; //replaceURLWithHTMLLinks(message);
const ridBrackets = options.replace(/[\[\]']/g, "");
const tokenize = ridBrackets.split(",", 2);
const rcChatOptions = tokenize;
const mFontColor = tokenize[rcChatOptions.BFONTCOLOR];
let timeStampFormat = tokenize[rcChatOptions.TIMESTAMP];
if(c > -1) {
const u = document.createElement("span");
const a = document.createElement("a");
u.className = "user";
if(mFontColor != null) {
u.style.color = mFontColor;
} else {
u.style.color = "#00c02b";
}
//Turn plain text links into actual links
u.appendChild(document.createTextNode(Autolinker.link(modifiedMessage.substring(0, c + 1))));
p.appendChild(u);
if(document.selectedfont != null) {
p.style.fontFamily = document.selectedfont;
}
p.appendChild(document.createTextNode(modifiedMessage.substring(c + 1)));
} else {
p.appendChild(document.createTextNode(modifiedMessage));
}
// Append message and scroll to bottom (if at bottom)
const scrollTop = document.body.scrollTop;
const scrolledToBottom = scrollTop + window.innerHeight >= document.body.scrollHeight;
if(scrolledToBottom) {
messages.appendChild(p);
window.scrollTo(document.body.scrollLeft, document.body.scrollHeight - window.innerHeight);
} else {
messages.appendChild(p);
}
messages.style.backgroundColor = "transparent";
}
</script>
I removed portions of the code that I felt was just a distraction.
This what the tool looks like
https://share.getcloudapp.com/kpuNDB4m
this is what it looks like using AutoLinker
https://share.getcloudapp.com/8LunomDL
(So auto linker is doing its job, it just still isn't rending as HyperLinks)
It looks like the TextNode is created after collecting some substring which would be the link. Here's an example of what it would look like if a link was created directly in js then passed to the TextNode.
One thing you can do is place the text inside of an a tag within a paragraph and then convert like so:
var link = document.createElement('link');
link.innerHTML = 'Website: <a href="http://somelink.com" </a>
link.href = 'http://somelink.com';
link.appendChild(document.createTextNode('http://somelink.com'));
After getting pointed in the right direction (By Frank, Thank You) I found a javascript Library that helped me accomplish what I was looking for.
Library
https://github.com/cferdinandi/saferInnerHTML
Here is an example!
https://share.getcloudapp.com/nOuDPnlp
Usage:
saferInnerHTML(message, modifiedMessage, true);
The last param is an option, append or overwrite.
Obviously, I will have to do some CSS work to make them not display as buttons. But it is exactly what I was trying to achieve.
I got a code in jQuery and I need transform this to pure javascript code.
$(window).scroll(function () {
$('.baner').css({'transform':'translate3d(0px, '+(-($(this).scrollTop()/5))+"px"+', 0px'});
});
What i tried to do is:
let win = document.querySelector(window);
let banner = document.getElementById('#baner');
win.addEventListener('scroll',function () {
banner.css({'transform':'translate3d(0px, '+(-($(this).scrollTop()/5))+"px"+', 0px'});
});
<div class='#baner'>
</div>
How to change the jquery css code .css({'transform':'translate3d(0px, '+(-($(this).scrollTop()/5))+"px"+', 0px'}); to JS?
let banner = document.getElementById('#baner');
Make sure this is correct:
let banner = document.getElementById('banner');
You don't use '#' since you already said it's an Id.
document.getElementById()
As Kalinauskas mentioned in his answer, you could use document.getElementById().
// () => {} is ES6 shorthand for a function (also called arrow function, read about it here https://www.w3schools.com/js/js_arrow_function.asp
// Instead of the .css function for jQuery, you have .style.yourStyleAtributeHere
let banner = document.getElementById('baner');
window.addEventListener("scroll", () => {
banner.style.transform = 'translate3d(0px, ' + (-(banner.scrollTop / 5))+"px"+', 0px'
});
So I am trying to add classes to javascript and I put showMenu.classList.toggle('.open') with the period after open and the click events work. Meanwhile I put the period after class on my other functions and one works when I put in on the other and the then the other one shuts down. Can anyone explain to me what is happening? Here's my code:
const menuBtn = document.querySelector('.toggler');
const showMenu = document.querySelector('.showmenu');
const links = document.querySelector('.showlink');
const showLinks = document.querySelectorAll('.showlinks > li');
menuBtn.addEventListener('click', function(){
showMenu.classList.toggle('.open');
console.log(showMenu.classList.toggle('open'))
links.classList.toggle('.open');
showLinks.forEach(item => item.classList.toggle('open'));
console.log(showLinks);
});
You should be passing the class without the dot, so just showMenu.classList.toggle('open'), so your code should look something like this:
const menuBtn = document.querySelector('.toggler');
const showMenu = document.querySelector('.showmenu');
const links = document.querySelector('.showlink');
const showLinks = document.querySelectorAll('.showlinks > li');
menuBtn.addEventListener('click', function(){
showMenu.classList.toggle('open');
links.classList.toggle('open');
console.log(showMenu.classList);
console.log(links.classList);
showLinks.forEach(item => {
item.classList.toggle('open');
console.log(item.classList);
});
});
New here. I'm trying to use onclick to switch out some images that i have assigned to variables in my script but i can't get it to work. Any ideas?
let doorImage1 = document.getElementById("door1");
let botDoorPath ='https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.svg';
doorImage1.onclick= () =>{
doorImage1.src = botDoorPath;
}
This did not work for me until I set the src in the element to something first. Seems to be working, so perhaps your element was not found. Look at console to see if it was undefined.
let doorImage1 = document.getElementById("door1");
let botDoorPath = 'https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.svg';
doorImage1.onclick = () => {
console.log('click')
doorImage1.src = botDoorPath;
}
<html>
<img src='./missing.png' id='door1'></img>
</html>