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>
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 1 year ago.
Improve this question
I have a function which must be executed immediately then in an eventListener.
Here is how I run both:
function mediaBodyClass() {
var body = document.body;
if (window.innerWidth >= 992) {
body.classList.add('desktop');
body.classList.remove('mobile');
} else {
body.classList.add('mobile');
body.classList.remove('desktop');
}
};
mediaBodyClass(); // Now
// In the listener
window.addEventListener('resize', function() {
mediaBodyClass();
});
What is the best practice?
Whilst what you are doing is fine - you might find the matchMedia api useful - basically its a javascript version of a media query in which you can attach functions to given viewport widths and also listen for changes to the viewport size.
Here is a link to a useful article.https://css-tricks.com/working-with-javascript-media-queries/
const mediaQuery = window.matchMedia('(min-width: 992px)')
function handleViewportSizeChange(e) {
var body = document.body;
if (e.matches) {
body.classList.add('desktop');
body.classList.remove('mobile');
}else {
body.classList.add('mobile');
body.classList.remove('desktop');
}
}
// Register event listener
mediaQuery.addListener(handleViewportSizeChange)
// Initial check
handleViewportSizeChange(mediaQuery)
You can use a media query to apply styles to the body when the screen width is smaller than a certain limit, instead of using JavaScript:
body{
/* .desktop styles go here */
}
#media only screen and (max-width: 992px) {
body {
/* .mobile styles go here */
}
}
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 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 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";
};
};
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...