window.scroll not working on all Browsers in localhost using javascript - javascript

I ve the following working in codepen but not localy
https://codepen.io/LoudDesignStudios/pen/RwxPJKY
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="assets/css/css1.css">
</head>
<body>
<section id="about-us" class="">
s1
</section>
<section id="why-choose-us" class="">
s2
</section>
<section id="funfacts" class="">
s3
</section>
<section id="services" class="">
s4
</section>
<section id="studio" class="">
s5
</section>
<section id="contactus" class="">
s6
</section>
<section id="footer-widgets" class="">
s7
</section>
<footer id="footer" class="footer">
footer
</footer>
<button onclick="topFunction()" id="scrollUp"><i class="las la-chevron-up" aria-hidden="true"></i></button>
<script>
var mybutton = document.getElementById("scrollUp");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 60 || document.documentElement.scrollTop > 60) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
document.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
</body>
</html>
Same codes working in other websites made a while ago and still working just starting from scratch now the window.scroll is not firing.
Thanks.

It's because you're trying to get an element (mybutton) by its ID before the document's contents are fully loaded.
You will need to wrap your code inside a DOMContentLoaded event handler. Below is slightly modified version of your JavaScript code:
document.addEventListener("DOMContentLoaded", function () {
var mybutton = document.getElementById("scrollUp");
window.onscroll = function () { scrollFunction() };
function scrollFunction() {
if (document.body.scrollTop > 60 || document.documentElement.scrollTop > 60) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
});
function topFunction() {
document.body.scrollTop = 0;
document.scrollTop = 0;
document.documentElement.scrollTop = 0;
}

Related

Pomodoro seconds not showing up after first 60 seconds

I was trying out Pomodoro. Please refer to the snippet. The play and stop buttons are working fine but the second's element(var secEl = document.querySelector('.timesec');) doesn't show up after first 60 seconds.
<div class="timemin mt-4">25 <span>: </span><span class="timesec">00</span></div>
The function runs as expected but the seconds, stop showing up after the first 60sec. I assumed something wrong with document.querySelector.
Thank you.
var playEl = document.querySelector('.play');
var secEl = document.querySelector('.timesec');
var minEl = document.querySelector('.timemin');
var stopEl = document.querySelector('.stop')
playEl.addEventListener('click', startTime);
stopEl.addEventListener('click', stopTime);
let counter = 00;
let minCounter = 25;
var secCountDown;
function startTime(){
counter = 60;
secEl.innerHTML = counter;
// console.log('i am clicked', counter)
secCountDown = setInterval( countDown, 1000);
function countDown(){
counter--;
secEl.innerHTML = counter;
//console.log(secEl.innerHTML);
if( counter == 0){
clearInterval(secCountDown);
minCountDown();
// console.log('i am checked')
}
}
}
function minCountDown(){
minCounter --;
minEl.innerHTML = minCounter;
if( minCounter == 0 ){
//console.log('i am checked');
} else
{
startTime();
}
}
function stopTime(){
clearInterval(secCountDown);
minEl.innerHTML = 25;
secEl.textContent = 00;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<title>Document</title>
<style type = text/css>
.timerBorder{
border: 1px solid black;
min-height: 280px;
}
.time{
font-size: 60px;
}
</style>
</head>
<body>
<div class="row">
<div class="col">
<h1>Pomodoro</h1>
</div>
</div>
<div class="row">
<div class="col">
<div class="row justify-content-center">
<div class="col-5">
<div class="mt-4"><button>Working</button><button>Resting</button></div>
<div class="timemin mt-4">25 <span>: </span><span class="timesec">00</span></div>
<div class="mt-4">
<button class="play">Play</button>
<button class="stop">Stop</button>
<button>Pause</button>
</div>
</div>
<div id="time"></div>
</div>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>
This happens because your HTML structure is not suitable for this. The .timemin element is the parent of the .timesec element, so as soon as you set the HTML of the first, the second is destroyed. Once that happens, the reference to the .timesec element is no longer attached to the document, and any update of its HTML has no visual effect any more:
<div class="timemin mt-4">25 <span>: </span><span class="timesec">00</span></div>
Instead, create a separate span for the minutes:
<div class="mt-4">
<span class="timemin">25</span> : <span class="timesec">00</span>
</div>

how to increment the value of a progress bar when press a button javascript

this is a very simple program that when you press the button the value inside the progress bar increases until it reaches the 100%.
<!DOCTYPE html>
<html>
<title>example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="w3-container">
<h2>dynamic Progress bar</h2>
<p>example:</p>
<div class="w3-light-grey">
<div id="myBar" class="w3-container w3-green w3-center" style="width:20%">20%</div>
</div>
<br>
<button class="w3-button w3-green" onclick="move()">Click Me</button>
</div>
<script>
function move() {
var elem = document.getElementById("myBar");
var width = 20;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
}
</script>
</body>
</html>
when you press the button whatever is the value inside the progressbar (eg 10% 20%) it reaches the 100%. i would that when i press the button, the value increases only only by a certain quantity (for example if the value is 10% and i press the button i want that the value will arrive at 20%).
Thanks to everyone!!
A solution is to remove the setInterval, since it will call the function again without having to click on button.
This code simply define width outside of function, and then on each click, increment width by 10 and change the progress bar style.
var width = 20;
function move() {
var elem = document.getElementById("myBar");
if (width < 100) {
width+=10;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
<!DOCTYPE html>
<html>
<title>example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<h2>dynamic Progress bar</h2>
<p>example:</p>
<div class="w3-light-grey">
<div id="myBar" class="w3-container w3-green w3-center" style="width:20%">20%</div>
</div>
<br>
<button class="w3-button w3-green" onclick="move()">Click Me</button>
</div>
</body>
</html>
Here's a quick and simple way to do it with minimal changes, firstly you need to declare a global variable that holds the value of the "width-to-be". This is the desired width of the progress bar, once the animation has finished.
Next for the sake of clarity, I changed the name of the 'width' variable to widthAnim. When the value of widthValue is changed, widthAnim will increment until it reaches that same value.
The widthIncrement variable change be changed to whatever you like, and it will increment by that amount.
Finally, I added at extra condition in the frame function that makes sure it only goes up in increments of widthIncrement.
var widthValue = 20;
function move() {
var elem = document.getElementById("myBar");
var widthAnim = widthValue;
var id = setInterval(frame, 10);
var widthIncrement = 10;
widthValue = widthAnim + widthIncrement;
function frame() {
if (widthAnim >= widthValue || widthValue > 100) {
clearInterval(id);
} else {
widthAnim++;
elem.style.width = widthAnim + '%';
elem.innerHTML = widthAnim * 1 + '%';
}
}
}
<!DOCTYPE html>
<html>
<title>example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<h2>dynamic Progress bar</h2>
<p>example:</p>
<div class="w3-light-grey">
<div id="myBar" class="w3-container w3-green w3-center" style="width:20%">20%</div>
</div>
<br>
<button class="w3-button w3-green" onclick="move()">Click Me</button>
</div>
</body>
</html>
I modified some of your code, when attach the 100% it will clear the counter and restart from 0%.
maybe help you :)
<!DOCTYPE html>
<html>
<head>
<title>example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="w3-container">
<h2>dynamic Progress bar</h2>
<p>example:</p>
<div class="w3-light-grey">
<div id="myBar" class="w3-container w3-green w3-center" style="width:20%">20%</div>
</div>
<br>
<button class="w3-button w3-green" onclick="move()">Click Me</button>
</div>
<script>
function move() {
var elem = document.getElementById("myBar");
var width = parseInt(elem.innerHTML);
var aim = width + 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= aim) {
clearInterval(id);
} else if(width >= 100) {
width=0;
aim = 10;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
} else {
width++;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
}
</script>
</body>
</html>
What you can do is set an initial value of width for example 20 and keep increasing it in setInterval callback till it is 40 (you can check that by taking its remainder with 20) and so on.
if(width % 20 === 0 ) clearInterval(id)
Here is snippet
var elem = document.getElementById("myBar");
var width = 20;
var id = null;
var click = false;
function move() {
if(!click){
click = true;
id = setInterval(function() {
width++;
if (width > 100) width = 20;
if (width % 20 === 0){
clearInterval(id);
click = false;
}
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}, 30);
}
}
<!DOCTYPE html>
<html>
<title>example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<h2>dynamic Progress bar</h2>
<p>example:</p>
<div class="w3-light-grey">
<div id="myBar" class="w3-container w3-green w3-center" style="width:20%">20%</div>
</div>
<br>
<button class="w3-button w3-green" onclick="move()">Click Me</button>
</div>
</body>
</html>
To achieve the desired result you should call clearInterval(id) when width is a multiple of 10. This will stop the frame() function from being called until the move() function is called again (when the user clicks the button)
To determine if width is a multiple of 10 the remainder operator can be used:
if (width % 10 == 0) {
clearInterval(id);
}
width should also be a global variable, outside of the move() function so that progress can be tracked in between button clicks.
var width = 20;
var id = null;
function move() {
if (width == 100) {
return;
}
var elem = document.getElementById("myBar");
if (id) {
clearInterval(id);
}
id = setInterval(frame, 10);
function frame() {
width ++;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
if (width % 10 == 0) {
clearInterval(id);
}
}
}
<!DOCTYPE html>
<html>
<title>example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<h2>dynamic Progress bar</h2>
<p>example:</p>
<div class="w3-light-grey">
<div id="myBar" class="w3-container w3-green w3-center" style="width:20%">20%</div>
</div>
<br>
<button class="w3-button w3-green" onclick="move()">Click Me</button>
</div>
</body>
</html>

how to find height of div that is generated by javascript

i have this file in which i want to find height of DIV with id "cpDocument" with the help of jquery. This DIV can be seen inside documen.body.innerHTML in line number 46.
index_scorm.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name='viewport' content='initial-scale = 1, minimum-scale = 1, maximum-scale = 1'/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=10">
<title></title>
<script src="../../jquery.min.js"></script>
<style type="text/css">#initialLoading{background:url(assets/htmlimages/loader.gif) no-repeat center center;background-color:#ffffff;position:absolute;margin:auto;top:0;left:0;right:0;bottom:0;z-index:10010;}</style>
<script>
var deviceReady = false;
var initCalled = false ;
var initialized = false;
function onBodyLoad()
{
if(typeof window.device === 'undefined')
{
document.addEventListener("deviceready", onDeviceReady, false);
}
else
{
onDeviceReady();
}
}
function onDeviceReady()
{
deviceReady = true ;
if(initCalled === true)
initializeCP();
}
function initializeCP()
{
if(initialized)
return;
initCalled = true ;
if(cp.pg && deviceReady === false)
return;
function cpInit()
{
document.body.innerHTML = " <div class='cpMainContainer' id='cpDocument' style='left: 0px; top:0px;' > <div id='main_container' style='top:0px;position:absolute;width:100%;height:100%;'> <div id='projectBorder' style='top:0px;left:0px;width:100%;height:100%;position:absolute;display:block'></div> <div class='shadow' id='project_container' style='left: 0px; top:0px;width:100%;height:100%;position:absolute;overflow:hidden;' > <div id='project' class='cp-movie' style='width:100% ;height:100%;overflow:hidden;'> <div id='project_main' class='cp-timeline cp-main'> <div id='div_Slide' onclick='cp.handleClick(event)' style='top:0px; width:100% ;height:100% ;position:absolute;-webkit-tap-highlight-color: rgba(0,0,0,0);'></div> <canvas id='slide_transition_canvas'></canvas> </div> <div id='autoplayDiv' style='display:block;text-align:center;position:absolute;left:0px;top:0px;'> <img id='autoplayImage' src='' style='position:absolute;display:block;vertical-align:middle;'/> <div id='playImage' tabindex='9999' role='button' aria-label='play' onkeydown='cp.CPPlayButtonHandle(event)' onClick='cp.movie.play()' style='position:absolute;display:block;vertical-align:middle;'></div> </div> </div> <div id='toc' style='left:0px;position:absolute;-webkit-tap-highlight-color: rgba(0,0,0,0);'> </div> <div id='playbar' style='bottom:0px; position:fixed'> </div> <div id='cc' style='left:0px; position:fixed;visibility:hidden;pointer-events:none;' onclick='cp.handleCCClick(event)'> <div id='ccText' style='left:0px;float:left;position:absolute;width:100%;height:100%;'> <p style='margin-left:8px;margin-right:8px;margin-top:2px;'> </p> </div> <div id='ccClose' style='background-image:url(./assets/htmlimages/ccClose.png);right:10px; position:absolute;cursor:pointer;width:13px;height:11px;' onclick='cp.showHideCC()'> </div> </div> <div id='gestureIcon' class='gestureIcon'> </div> <div id='gestureHint' class='gestureHintDiv'> <div id='gImage' class='gesturesHint'></div> </div> <div id='pwdv' style='display:block;text-align:center;position:absolute;width:100%;height:100%;left:0px;top:0px'></div> <div id='exdv' style='display:block;text-align:center;position:absolute;width:100%;height:100%;left:0px;top:0px'></div> </div> </div></div><div id='blockUserInteraction' class='blocker' style='width:100%;height:100%;'> <table style='width:100%;height:100%;text-align:center;vertical-align:middle' id='loading' class='loadingBackground'> <tr style='width:100%;height:100%;text-align:center;vertical-align:middle'> <td style='width:100%;height:100%;text-align:center;vertical-align:middle'> <image id='preloaderImage'></image> <div id='loadingString' class='loadingString'>Loading...</div> </td> </tr> </table></div> <div id='initialLoading'></div>";
cp.DoCPInit();
var lCpExit = window["DoCPExit"];
window["DoCPExit"] = function()
{
if(cp.UnloadActivties)
cp.UnloadActivties();
lCpExit();
};
}
cpInit();
initialized = true;
}
</script>
</head>
<body onload="onBodyLoad()">
<div id='initialLoading'></div>
<script>
(function()
{
if(document.documentMode < 9)
{
document.body.innerHTML = "";
document.write("The content you are trying to view is not supported in the current Document Mode of Internet Explorer. Change the Document Mode to Internet Explorer 9 Standards and try to view the content again.<br>To change the Document Mode, press F12, click Document Mode: <current mode>, and then select Internet Explorer 9 Standards.");
return;
}
window.addEventListener("load",function()
{
setTimeout(function()
{
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'assets/js/CPXHRLoader.js';
script.defer = 'defer';
script.onload = function()
{
var lCSSLoaded = false;
var lJSLoaded = false;
function constructDIVs()
{
if(lCSSLoaded && lJSLoaded)
{
initializeCP();
}
}
cpXHRJSLoader.css('assets/css/CPLibraryAll.css',function() {
lCSSLoaded = true;
constructDIVs();
});
var lJSFiles = [ 'assets/js/jquery-1.6.1.min.js','scormdriver.js','assets/js/CPM.js' ];
cpXHRJSLoader.js(lJSFiles,function()
{
//console.log("js loaded");
lJSLoaded = true;
constructDIVs();
});
}
document.getElementsByTagName('head')[0].appendChild(script);
},1);
},false);
})();
</script>
<noscript style="text-align:center;font-size:24px;">Enable Javascript support in the browser.</noscript>
</body>
</html>
Iam trying to do something like this with no luck:
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("body").on('load', function() {
var mydiv = $("#cpDocument");
var h = mydiv.height();
alert(h);
});
});
</script>
The script for finding the height of the element can be the last list of initializeCP() function eg.
cpInit();
initialized = true;
var mydiv = $("#cpDocument");
var h = mydiv.height();
alert(h);

onmouseover event not working

Im making a simple hud that supposed to show itself when your mouse is on the main panel.
For some reason the onmouseover and out not working. When I click inspect element in the browser on the panel it shows me the html tag. I know that the listeners were created, again from looking at the inspect element in the browser.
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<LINK href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="mainpanel" class="notselectable">
<div id="top">
<img src="icons/white/open.png" style="float:right" class="btnMedia" />
</div>
<div id="bottom">
<center>
<img src="icons/white/pre.png" class="leftandright btnMedia" />
<img src="icons/white/play.png" class="leftandright btnMedia" />
<img src="icons/white/next.png" class="leftandright btnMedia" />
</center>
</div>
</div>
</body>
<script>
var panel = document.getElementById("mainpanel");
var top = document.getElementById("top");
var bottom = document.getElementById("bottom");
//alert("script")
panel.onmouseover = function() {
alert("in")
top.display = "block";
bottom.display = "block";
}
panel.onmouseout = function() {
alert("out")
top.display = "none";
bottom.display = "none";
}
</script>
</html>
There are two things wrong in your code.
Missing style when manipulating with CSS values
And top is a reserved keyword in JavaScript and it's tricky to use it as an variable
This works:
var panel = document.getElementById("mainpanel");
var top2 = document.getElementById("top");
var bottom = document.getElementById("bottom");
panel.onmouseover = function() {
top2.style.display = "block";
bottom.style.display = "block";
}
panel.onmouseout = function() {
top2.style.display = "none";
bottom.style.display = "none";
}
#mainpanel {
background: #faa;
height: 100vh;
}
#top, #bottom {
display: none;
}
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<div id="mainpanel" class="notselectable">
<div id="top">
I am top!
</div>
<div id="bottom">
I am bottom!
</div>
</div>
</body>
</html>

jquery game runs slowly on mobile phone [closed]

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 8 years ago.
Improve this question
I am coding a simple game recently, it runs normally on PC, but it runs slowly on mobile phone. I am just wondering whether the problem is caused by my code or by jquery.
Should I use jquery while writing game for mobile phone
here is the demo:my game demo link
js code:
$(document).ready(function() {
var min = 0;
var max = 3;
var windowHeight = $(window).height();
var windowWidth = $(window).width();
var rowHeight = windowHeight / 4 - 1;
var colWidth = windowWidth / 4 - 1;
var totalTime = 30;
var score = 0;
function layout() {
$('.row').height(rowHeight);
$('.col').width(colWidth);
}
function init () {
layout();
$('.row').each(function () {
//var rand = Math.floor(Math.random() * (max - min + 1) + min); // return random number between min and max;
var rand = Math.floor(Math.random() * max);
$(this).children().eq(rand).addClass('active');
});
$('#time').text(totalTime);
}
function insertNewRow () {
var rand = Math.floor(Math.random() * max);
var newRowStr = '<div class="row">';
for (var i = 0; i < 4; i++) {
newRowStr += '<div class="col"></div>';
}
newRowStr += '</div>';
var $newRow = $(newRowStr);
$newRow.height(rowHeight).children().width(colWidth).eq(rand).addClass('active');
$newRow.prependTo('#wrapper');
}
function removeLastRow () {
$('.row:last').remove();
}
var counting;
function startCountDown () {
counting = setInterval(countDown, 1000);
}
function countDown() {
var timeLeft = $('#time').text();
timeLeft -= 1;
$('#time').text(timeLeft);
if (timeLeft == 0) {
gameover();
}
}
function gameover () {
clearInterval(counting);
$('#end').show().find('#score').text("your scoreļ¼š" + score);
}
function restartGame () {
score = 0;
$('#time').text(totalTime);
startCountDown();
}
init();
$('#wrapper').on('click', '.row:eq(3) .active', function (event) {
event.preventDefault();
score++;
$(this).removeClass('active').addClass('clicked').parent().remove();
//setTimeout(removeLastRow, 200);
insertNewRow();
});
$('#launch').click(function (event) {
event.preventDefault();
$('#start').hide();
startCountDown();
});
$('#retry').click(function (event) {
event.preventDefault();
$('#end').hide();
restartGame();
});
});
html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<title>Game</title>
<link rel="stylesheet" type="text/css" href="files/style.css">
<script src="files/jquery.min.js"></script>
<script src="files/game.js"></script>
</head>
<body>
<div id="start">
<a id="launch" href="#">START</a>
</div>
<div id="time"></div>
<div id="end">
<h1 id="score"></h1>
<a id="retry" href="#">AGAIN</a>
</div>
<div id="wrapper">
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
</div>
</body>
</html>
In general jQuery is very slow, which one rarely experiences since we have such fast computers. But you seem to use jQuery for almost every interaction here. You might consider make some improvements to that. Check out this nice article about the issue.
jQuery Newbs: Stop Jumping in the Pool

Categories

Resources