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 1 year ago.
Improve this question
How can I draw a line under navbar when scrolling in React or JavaScript. Like this :
enter image description here
Easy to use scroll listener and progress element.
const progressDOM = document.querySelector("#progress");
window.addEventListener("scroll", () => {
let scrollTop = window.scrollY;
let docHeight = document.body.offsetHeight;
let winHeight = window.innerHeight;
let scrollPercent = scrollTop / (docHeight - winHeight);
let scrollPercentRounded = Math.round(scrollPercent * 100);
progressDOM.value = scrollPercentRounded;
});
#progress{
position: fixed;
}
<progress id="progress" max="100" value="0"></progress>
<div style="height: 10000px;"></div>
it's easy in your script file use scroll event
Example
window.addEventListener("scroll", function() {
//Select your navigation bar
var nav = document.getElementsByTagName("nav")[0];
//Change 20 to anything you want like nav.offsetHeight
if(window.scrollY > 20) {
nav.style.borderBottom = "5px solid dodgerblue";
} else {
nav.style.border = "0";
}
});
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 years ago.
Improve this question
I’m making a game using HTML, CSS, and JavaScript. When I click the left arrow, the red and yellow box jerks to the original position and runs. I want it to run at the position it is at currently at. Same goes for double tapping the arrows.
I’ve attached a Repl.it. Here it is: https://repl.it/#ritzcrackerz201/cake
Below I have edited your script, Your main issue was you were using two different values for your left and right movement... Also i don't know if this is what you wanted but I made edits to your 'jump' section of code.
Javascript
<script>
let xArrowMovement = 0;
let jumpboxupmovementy = 0;
// let player = null;
// let playerPos = null;
/*setTimeout(function(){
getElements();
}, 100);
function getElements() {
console.log('Entered getElements');
player = document.getElementById("master-cube");
console.log(player);
playerPos = player.style.transform;
console.log(playerPos);
} */
function moveright() {
console.log('Entered moveright');
xArrowMovement += 80;
document.getElementById("master-cube").style.transform = `translate(${xArrowMovement}%, ${jumpboxupmovementy}%)`;
}
function moveleft() {
console.log('Entered moveleft');
xArrowMovement -= 80;
document.getElementById("master-cube").style.transform = `translate(${xArrowMovement}%, ${jumpboxupmovementy}%)`;
}
function movejump() {
console.log('Entered movejump: ' + xArrowMovement + ' ' + jumpboxupmovementy);
jumpboxupmovementy += 80;
document.getElementById("master-cube").style.transform = `translate(${xArrowMovement}%, ${-jumpboxupmovementy}%)`;
//wait for this animation to complete
setTimeout(function(){
jumpboxupmovementy -= 80;
document.getElementById("master-cube").style.transform = `translate(${xArrowMovement}%, ${jumpboxupmovementy}%)`;
}, 500);
}
</script>
HTML
<div id="master-cube"></div>
<img src="arrows/leftarrow.png" alt="Left Arrow" height="80vh" width="80vw" onclick="moveleft()" class="arrowcontrols">
<img src="arrows/middlejumpsquare.png" alt="Jump Square" height="80vh" width="80vw" onclick="movejump()" class="arrowcontrols">
<img src="arrows/rightarrow.png" alt="Right Arrow" height="80vh" width="80vw" onclick="moveright()" class="arrowcontrols">
</body>
Use translate( 0, 0 ) instead of translateX( 0 ), translateY( 0 ). And use one value of x instead of leftarrowmovement and rightarrowmovelock. Now after clicking left function doesn't consider your movement to the right.
But as stated in #Marc's comment, you should use some kind of engine for that. CSS is not the best tool in development of such games.
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 3 years ago.
Improve this question
onClick on button pops up a registration form. the problem is that I need to do it only when the screen size is 1440px and more.
start
function viewForm(){
document.getElementById("form").style.display = "block";
};
Without jQuery:
function viewForm(){
if (window.innerWidth >= 1440) {
document.getElementById("form").style.display = "block";
}
};
Be aware that if a user decrease the size of the window you form will remain visible even below 1440. You might want to check for the resize event as well.
You can update the function above this way:
function viewForm(){
if (window.innerWidth > 1440) {
document.getElementById("form").style.display = "block";
} else {
document.getElementById("form").style.display = "none";
}
};
window.addEventListener('resize', viewForm);
You can read window size in several ways (take a look here Device and Viewport Size In JavaScript
So something like this should work:
start
function viewForm(){
if (window.innerWidth >= 1440 ) {
document.getElementById("form").style.display = "block";
}
};
Maybe you don't need all that, you may simply hide the link with a CSS media query, all depends on what you are trying to do.
You can use window.resize event.Try resizing your window you will see the other element visible.Hope it helps.
function reportWindowSize() {
console.log(window.innerWidth)
if (window.innerWidth >= 1440) {
document.getElementById("a").style.display = "block"
document.getElementById("form").style.display = "block";
}
// just for test my pc has small screen
else if (window.innerWidth <= 500) {
document.getElementById("b").style.display = "block"
}
}
function viewForm() {
document.getElementById("form").style.display = "block";
};
window.onresize = reportWindowSize;
start
ENDIT
<form id="form"><input type="text"></form>
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 4 years ago.
Improve this question
I want to repeat an image-"box1" throughout the width of the page. I tried the following but it isn't working.
var count = $(window).width() / $("#box1").width();
for (var i = 1; i <= count; i++) {
var paragraph = document.getElementById("top-section");
paragraph.innerHTML += "<img src='images/box1.png' id='box1'html>";
}
#top-section {
float: left;
}
<div id="top-section"></div>
This one works fine for me.
Check it out...
Just clone element what u need and append it inside the section.
var count = $(window).width() / $(".box1").last().width();
for (var i = 1; i <= count; i++) {
$("#top-section").append($(".box1").last().clone(true));
}
#top-section {
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="top-section">
<img src="images/box1.png" class="box1">
</div>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 6 years ago.
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.
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.
Improve this question
Why does this jQuery event only fire once?
$(document).on('keyup', '[data-behavior="oneliner-text-area"]', function (event) {
var textLength = $(this).length;
var textLengthLimit = 140;
$('[data-behavior="oneliner-counter"]').html(textLengthLimit - textLength);
if ((textLengthLimit - textLength) < 0) {
$('[data-behavior="oneliner-counter').addClass('oneliner-count-warning');
}
});
You are not counting textfield's text length, you are counting number of elements, and that is it always be 1 so you will always get 139.
$(document).on('keyup', '[data-behavior="oneliner-text-area"]', function (event) {
var textLength = $(this).val().length; // Here is a change
var textLengthLimit = 140;
$('[data-behavior="oneliner-counter"]').html(textLengthLimit - textLength);
if ((textLengthLimit - textLength) < 0) {
$('[data-behavior="oneliner-counter').addClass('oneliner-count-warning');
}
});
I think, this is what you try to do:
$(document).on('ready', function() {
$doc = $(document);
var textProps = {
textLength: 0, // your text length,
textLengthLimit: 140, // your text limit
charsLeft: function() { // check how characters left
return this.textLengthLimit - this.textLength;
},
isLengthValid: function() { // check if text is valid
return this.textLengthLimit - this.textLength > 0;
}
};
$('.txtLimit').text(textProps.charsLeft());
$doc.on('keyup', '[data-behavior="oneliner-text-area"]', function(e) {
var $self = $(this);
textProps.textLength = $self.val().length;
$('.txtLimit').text(textProps.charsLeft());
var success = 'oneliner-count-success',
warning = 'oneliner-count-warning';
if (!textProps.isLengthValid()) {
$self.removeClass(success).addClass(warning);
} else {
$self.removeClass(warning).addClass(success);
}
});
});
.oneliner-count-warning {
color: red !important;
}
.oneliner-count-success {
color: green !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="form-group col-xs-8">
<label for="myInp">Input with validation:</label>
<input type="text" class="form-control" data-behavior="oneliner-text-area" id="myInp">
<small>Characters left: <b class="txtLimit"></b></small>
</div>
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I've used JavaScript just for this purpose but it only works when I refresh the browser ...
<script>
var scroll = window.scrollY ;
var header = document.getElementById("header");
function my(){
if (scroll >= header.scrollHeight) {
header.style.height = 100 +"px";
} else {header.style.height = 250 + "px";}
}
my();
</script>
You would need to add a scroll event listener :
var scroll, header = document.getElementById("header");
function my() {
scroll = window.scrollY;
if (scroll >= header.clientHeight) header.style.height = 100 + "px";
else header.style.height = 250 + "px";
}
window.addEventListener('scroll', my, false);
window.addEventListener('load', my, false);
Also added a listener that will respond to when the page has fully loaded, this will make sure the function executes when the user lands on the page and a scroll position was cached before...