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...
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 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";
}
});
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 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 3 years ago.
Improve this question
The below Javascript (triggering the pagination background color of an element, when another element scrolls into view) doesn't work in Internet Explorer but in all other browsers. Does anyone have any idea why?
The code basis is also available in my pen: https://codepen.io/headstarterz/pen/PMdZdV/
<script>
function inViewport(element) {
// Get the elements position relative to the viewport
var bb = element.getBoundingClientRect();
// Check if the element is outside the viewport
// Then invert the returned value because you want to know the opposite
return !(bb.top > innerHeight || bb.bottom < 0);
}
var project1 = document.querySelector(".project-trigger1");
var project2 = document.querySelector(".project-trigger2");
var project3 = document.querySelector(".project-trigger3");
var pagination1 = document.querySelector(".bullet1");
var pagination2 = document.querySelector(".bullet2");
var pagination3 = document.querySelector(".bullet3");
// Listen for the scroll event
document.addEventListener("scroll", event => {
// Check the viewport status
if (inViewport(project1)) {
pagination1.style.background = "#e3e3e3";
} else {
pagination1.style.background = "transparent";
}
});
document.addEventListener("scroll", event => {
// Check the viewport status
if (inViewport(project2)) {
pagination2.style.background = "#e3e3e3";
} else {
pagination2.style.background = "transparent";
}
});
document.addEventListener("scroll", event => {
// Check the viewport status
if (inViewport(project3)) {
pagination3.style.background = "#e3e3e3";
} else {
pagination3.style.background = "transparent";
}
});
</script>
Script works in Chrome, Safari, Firefox, Edge
Script doesn't work in Internet Explorer 11
It is probably two reasons:
Firstly your closing <script> tag is spelled wrong (<skript>).
Also, you're using 'fat arrow functions', which is a feature of ES6. I would look into something like Babel to transpile your code to a I.E. friendly syntax
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 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 6 years ago.
Improve this question
I made a little app and my button shows only on one place. It's all working but on wrong place. See pictures. I'll leave my GitHub repo link. Sorry most of stuff is on Cyrillic but code is, of course, on English Latin.
Here is a video of my problem (22 sec)
Thank you for your help.
You're problem is with id. HTML ids are unique, so when you do document.getElementById('skocko'), you only get back the first element with that id.
Instead, give the button a class of skocko, and access it like this:
Template.myTemplate.events({
"click .glasaj":function(event, template){
template.$(".skocko").toggle();
}
}
This will select the element with class skocko in the current template.
SRC: https://stackoverflow.com/a/27116956/2317712
check div positioning How to position one element relative to another with jQuery? so its position can be relative to button clicked, or assign unique skocko id for every skocko..
Do something like this in your script glasaj.js
if (Meteor.isClient) {
Template.glasajDugme.events({
'click .glasaj': function(){
var g = Meteor.user().profile.неискоришћениГласови;
if (g < 1) {
var pos = $(this).position();
// .outerWidth() takes into account border and padding.
var width = $(this).outerWidth();
//show the menu directly over the placeholder
$("#skocko").css({
position: "absolute",
top: pos.top + "px",
left: (pos.left + width) + "px"
}).show();
document.getElementById('skocko').style.display = "inline-flex";
// return "disabled" ;
}
else {
Predlozi.update(this._id, {$inc: {Број_Гласова: 1}}
);
Meteor.users.update(Meteor.userId(), {$inc: {"profile.неискоришћениГласови": -1}}
);
};
}
});
sakrijskocka = function(){
document.getElementById('skocko').style.display = "none";
};
};