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
Related
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;
}
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>
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>
I know the reason is going to be utterly simple but I can´t make this work, I have a html, a css and a js in the same folder and this example is not working
I´ve placed the 3 files in the same folder like this:
html:
<head>
<!-- Bootstrap Core CSS -->
<link href="barras.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script src="barras.js"></script>
</head>
<div id="container">
<h2><strong>Bar percentage</strong> inspired by this <a href=
"http://dribbble.com/shots/1090476-Percentage-Bar">dribbble shot</a></h2>
<div id="bar-1" class="bar-main-container azure">
<div class="wrap">
<div class="bar-percentage" data-percentage="38"></div>
<div class="bar-container">
<div class="bar"></div>
</div>
</div>
</div>
</div>
Javascript
$('.bar-percentage[data-percentage]').each(function () {
var progress = $(this);
var percentage = Math.ceil($(this).attr('data-percentage'));
$({countNum: 0}).animate({countNum: percentage}, {
duration: 2000,
easing:'linear',
step: function() {
// What todo on every count
var pct = '';
if(percentage == 0){
pct = Math.floor(this.countNum) + '%';
}else{
pct = Math.floor(this.countNum+1) + '%';
}
progress.text(pct) && progress.siblings().children().css('width',pct);
}
});
});
and the css the same as in the example.
I guess I´m not calling the javascript correctly. This is the first time working with js.
Many thanks for your help.
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);