Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 days ago.
Improve this question
I have a hamburger icon in my html, which I want make a little transparent when it is clicked . So when i added script for this, I don't know what the problem is, so can anyone please help me identify it.
<img src="images/icon-hamburger.svg" id="hamburger" alt="">
#hamburger {
transition: all 0.3sec ease;
}
.hide{
opacity: 0.5;
}
const menuBtn = document.getElementById("hamburger");
const menu = document.getElementById("nav-link");
menuBtn.addEventListener("click", function() {
menuBtn.classList.toggle('hide');
menu.classList.toggle('menu-mobile');
});
The code is working fine. If you are getting this error Cannot read properties of null (reading 'classList') it is because document.getElementById() is returning value null. Make sure in getElementById() you are passing a valid id.
const menuBtn = document.getElementById("hamburger");
const menu = document.getElementById("nav-link");
menuBtn.addEventListener("click", function() {
menuBtn.classList.toggle('hide');
});
#hamburger {
transition: all 0.3sec ease;
}
img{
width:20px;}
.hide{
opacity: 0.5;
}
<body>
<nav>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/1024px-Hamburger_icon.svg.png" id="hamburger" alt="">
</nav>
</body>
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 months ago.
Improve this question
fixed div through position:sticky and after scrolling navbar which is fixed overlaps div. How can this be fixed?
Navbar from bootstrap
I am new to frontend, so I used only padding, but it does not look nice, everything is not flat in relation to other blocks
I am new to frontend, so I used only padding, but it does not look nice, everything is not flat in relation to other blocks
You can use z-index property in CSS, imagine you have 2 divs, div-1 which has it's position sticky and and div-2
the code would be:
.div-1 {
position: sticky;
z-index: 0;
}
.div-2 {
z-index: 1;
}
I didn't understand what you want please write your code here, before that try the code below and see its work or not
* {
padding:0;
margin:0;
box-sizing: border-box;
}
#your-id-name-for-navbar{
z-index:99;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 7 years ago.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Improve this question
I am trying to override user agent stylesheet css from javascript once the page has loaded. for some reason this isn't working. I'm new to javascript and very basic knowledge of css/less and im trying to learn the best practice on how to achieve this.
my javascript:
$(window).ready(function ()
{
// Remove splash screen after load
$('.splash').css('display', 'none');
});
ive also tried $('.splash').css('display', 'none !important'); which doesn't work either.
I'm setting the display type in my css so i dont uderstand why its being overriden.
CSS
.splash {
display: block;
position: absolute;
z-index: 2000;
background: #fff;
color: #555;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
jsfiddle https://jsfiddle.net/76wqqft4/
Thanks for the help
From the question jQuery Selector is having .splash as the class name and in the screenshot, class name which is suppose to hide is .spash. Change the class name for desired output.
Its a simple typing mistake, in your html it says "spash" and in jquery and css its "splash" :)
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I'm trying to add class after page is loaded so the transition in added class can change height and opacity of element, but I still can't get it working.
html file:
<head>
<script>
window.onload = function {
document.getElementById('home-id').className='home-class';
};
</script>
</head>
css file:
#home-id {
transition: opacity 1.5s ease-in-out 0s;
height: 0.0em;
opacity: 0.6;
}
html:hover #home-id {
transition: opacity 1.5s ease-in-out 0s;
opacity: 1;
}
.home-class {
transition: height 1s ease-in-out 0s, opacity 1.5s ease-in-out 0s;
height: 40em;
opacity: 1;
}
Could you please tell me what I'm doing wrong, thank you.
Edit: I just add that problem wasn't in missing "()", but in specificity.
You could use the classList:
// div is an object reference to a <div> element with class="foo bar"
div.classList.remove("foo");
div.classList.add("anotherclass");
// if visible is set remove it, otherwise add it
div.classList.toggle("visible");
// add/remove visible, depending on test conditional, i less than 10
div.classList.toggle("visible", i < 10 );
alert(div.classList.contains("foo"));
div.classList.add("foo","bar"); //add multiple classes
It gives you more flexibility than using className property.
And your function for the onload method should be:
window.onload = function() {
document.getElementById('home-id').className='home-class';
};
You missed the () for function.
MDN: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
I'd use jQuery for this. Simply link the latest version from http://www.code.jquery.com in your HTML file and use the following code:
$(document).ready(function() { //The following block of code will be executed when the page finishes to load.
$("#home-id").addClass("home-class"); //This line adds the class "home-class" to the element with the id "home-id"
});
If you're not familiar with jQuery I recommend checking out the codecademy jQuery course.(https://www.codecademy.com/learn/jquery) jQuery is very lightweight, extremely simple to use and learnable with ease.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
My goal is to display text on a screen as a user types it, with an underscore cursor showing after the text. The best way I can describe what I'm trying to do is a similar look to using the command line.
What is the best way to do this? I haven't been able to get it to work using a simple text input with css.
Here's something to get you started with jQuery.
$('input').on('input', function(e){
$('div').empty().text($(this).val());
});
Edit: blinking underscore can be done with CSS
div:after{
content:"_";
opacity:0;
animation:blink .500s linear infinite;
}
#keyframes blink{
from{opacity:0;}
to{opacity:1;}
}
The best way? Read the content on every keyup and then inject it into a destination container to show it to the user. Easy.
Check this: http://jsfiddle.net/VDd6C/8/
Show us your code. We'll help.
A basic one, try this (tested in Chrome and FF)
Play it here
HTML
<div>
<span contenteditable="true">Enter your input: </span><span class="blink">_</span>
</div>
JavaScript
window.setInterval(function(){
$('.blink').toggle();
}, 450);
CSS
body {
background-color: black;
color:white;
font-size: 15px;
font-weight:bold;
font-family: courier;
}
span {
border: none;
}
div {
max-width: 200px;
}
div:focus, span:focus{
outline: 0;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
If I most over the red box quickly and leave the cursor over the red box, it simply stops fading in and breaks the operation in half. If I don't use the .stop() function at all, jquery tries to finish the remaining operations (that I hovered and quit the box quickly before) Does anyone know what I should do here? Thanks.
http://jsfiddle.net/dkLhC/1
$(document).ready(function(){
$(".box1").mouseenter(function(){
$(".box2").stop().fadeIn();
});
$(".box1").mouseleave(function(){
$(".box2").stop().fadeOut();
});
});
JSFiddle
JQuery function fadeTo() also seems to work like css transitions, but transitions are undoubtedly better choice.
$(document).ready(function(){
$(".box1").mouseenter(function(){
$(".box2").stop().fadeTo(1000, 1);
});
$(".box1").mouseleave(function(){
$(".box2").stop().fadeTo(1000, 0);
});
});
This is not a direct answer to your problem, but an alternative solution. Instead of jQuery, you can use CSS transition to do the fade in and out
.box2
{
opacity: 0;
transition: opacity 2s;
}
.box1:hover + .box2 {
opacity: 1;
transition: opacity 2s;
}
See JSFiddle
Use .finish():
DEMO
$(document).ready(function(){
$(".box1").mouseenter(function(){
$(".box2").finish().fadeIn();
});
$(".box1").mouseleave(function(){
$(".box2").finish().fadeOut();
});
});
After some research I found that the correct answer is
true, false (for the parameters clearQueue, jumpToEnd)
http://jsfiddle.net/q6d57/11/
$(document).ready(function(){
$(".box1").mouseenter(function(){
$('.box2').stop(true, false).fadeIn(3000);
});
$(".box1").mouseleave(function(){
$('.box2').stop(true, false).fadeOut(3000);
});
});