I am new to web development and I am learning to use HTML, CSS, JavaScript, jQuery and AngularJS to make a simple web application. I have a simple problem but I cannot find a simple answer to it.
I have a simple HTML code, in which I have multiple variables that are keeping track of the number of clicks that are made on different positions on the screen, i.e. one variable keeps track of the number of clicks on an image, one variable keeps track of the number of clicks on the right of the image etc.
How can I simply save the values of those variables to an Excel file?
I have found very complicated ways to save arrays to Excel, but I was wondering if there is any simpler way to do that! here is a simplified version of the code, I would like to save the values of the variables "goal" and "miss":
<html>
<head>
<title>Exercise</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<body>
<img id="myImage" src="ball.gif">
<style>
#myImage { position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin:auto; }
</style>
<p id = "myGoals"></p>
<p id = "myMisses"></p>
<script>
var goal=0;
var miss=0;
var img = document.getElementById("myImage");
var width = $(img).width();
var height = $(img).height();
$(document).ready(function() {
document.addEventListener("click", function(e) {
var offset = $(img).offset();
if (e.target === img) {
goal++;
}
else {
miss++
}
document.getElementById("myGoals").innerHTML = "Goals: " +goal;
document.getElementById("myMisses").innerHTML = "Misses: " +miss;
}, false);})
</script>
</body>
</html>
Related
I am trying to create a sort of map builder where the user can select from a list of predefined objects, and upon clicking one of them, it will appear inside a frame with orientation options (dragging, rotating, resizing).
I don't understand how one can add functionality to an object that is undefined at the page's run time.
I have found a lot of good examples demonstrating how to use Jquery UI as well as adding an image to the screen onclick, but have never seen the two married together.
Here is a good example of the add onclick feature: Add image to page onclick
(Orientation on click examples are quite numerous)
Here is the code I liked from the link (from tjarratt), so if someone could help me branch off from here that would be easiest.
<html>
<head>
<script type="text/javascript">
function addimage() {
var img = document.createElement("img");
img.src = "http://bricksplayground.webs.com/brick.PNG";
img.height = 50;
img.width = 100;
//optionally set a css class on the image
var class_name = "foo";
img.setAttribute("class", class_name);
document.body.appendChild(img);
}
</script>
</head>
<body>
<button onclick="addimage();">Click</button>
</body>
</html>
Here is an example that may help you out. Consider the following code.
$(function() {
function addImage(u, c, t) {
/***
Input: URL, Class, Target Object
Output: jQuery Object of IMG element
***/
if (u == undefined) {
u = "https://bricksplayground.webs.com/brick.PNG";
}
if (c == undefined) {
c == "";
}
if (t == undefined) {
t = $("#zone");
}
var img = $("<img>", {
src: u,
class: c,
}).css({
width: "50px",
height: "100px"
});
img.appendTo(t);
return img;
}
function makeDrag(o) {
/***
Input: jQuery Object
Output: null
***/
o.draggable({
containment: "parent"
});
}
$("#add-object").click(function() {
makeDrag(addImage("https://png.pngtree.com/png_detail/20181008/red-brick-wall-png-clipart_1564742.png", "foo"));
});
});
#zone {
width: 300px;
height: 200px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<button id="add-object">Add Object</button>
<div id="zone"></div>
When 'Add Object' is clicked, an Image element is created with specific attributes. I added some defaults so if you call, addImage(), it will still add an image. You can also specify your own URL, Class, and Target Object.
Hope this helps.
I am having an issue with page loading time. Currently right now I am running UBUNTU in Oracle Vm Virtual Box. I am using mozilla firefox as my browser and I am working on an etchasketch project from "The odin project".
My problem is the page loading time. The code takes a prompt at the start and generates a grid for the etch a sketch based on that prompt. I have not given it the minimum and maximum values (16 and 64) respectively, however any number when prompted at the beginning that is beyond 35 doesn't load or takes ages to load.
How do I speed up the process time? / why is it moving so slow? / how can I avoid this ? / is there a fix that I am over looking that can make this work a lot faster? / feel free to tackle any and all of those questions!
This is my HTML CODE:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8"/>
<title>
</title>
</head>
<body>
<div class="etchhead">
<p> Choose your grid size </p>
<input type = "text"></input>
<button id="startOver"> Clear Grid </button>
<p> Change color </p>
</div>
<div id="grid">
</div>
<script src="eas.js"></script>
</body>
</html>
And this is my CSS code:
p {
color: blue;
display: inline;
}
#grid {
display: grid;
width: 800px;
max-width: 800px;
height: 800px;
max-height: 800px;
line-height: 0;
}
.gridBox {
border: 1px solid black;
background-color: lightgrey
}
And this is my JAVASCRIPT code:
gridStart();
function gridStart(){
var boxes = 0
var selectBody = document.querySelector("#grid");
var addBox = document.createElement("div");
var boxCountStart = prompt("enter a number between 16 and 64");
var boxDimensions = (boxCountStart * boxCountStart);
function rowsAndColumns() {
var selectBody = document.querySelector("#grid");
var gridTemplateColumns = 'repeat('+boxCountStart+', 1fr)';
selectBody.style.gridTemplateColumns= gridTemplateColumns;
selectBody.style.gridTemplateRows= gridTemplateColumns;
};
function hoverColor(){
var divSelector = selectBody.querySelectorAll("div");
divSelector.forEach((div) => {
div.addEventListener("mouseover", (event) => {
event.target.style.backgroundColor = "grey";
});
});
};
rowsAndColumns();
for (boxes = 0; boxes < boxDimensions ; boxes++) {
var selectBody = document.querySelector("#grid");
var addBox = document.createElement("div");
addBox.classList.add("gridBox");
addBox.textContent = (" ");
selectBody.appendChild(addBox);
hoverColor();
};
};
There are two components to your issue. One is that you are repeatedly modifying the DOM in a loop. You can fix it by appending all your boxes to a DocumentFragment and then adding that to the DOM after your loop finishes. You are also calling hoverColor(); inside your loop which results in adding tons of event listeners that all do the same thing (since inside hoverColor you are adding a listener to every single div). You can fix both those issues like this:
var fragment = document.createDocumentFragment( );
for (var i = 0; i < boxDimensions ; i++) {
var addBox = document.createElement("div");
addBox.classList.add("gridBox");
addBox.textContent = (" ");
fragment.appendChild(addBox);
}
document.querySelector("#grid").appendChild( fragment );
hoverColor();
Here is a JSFiddle with your original code, and here is one with the modification.
You could also benefit from only having one event listener total. You don't need to loop and add an event listener to every div. Just add one to #grid and use event.target (like you already do, to find the div that the event originated from). Something like this:
function hoverColor(){
document.querySelector("#grid").addEventListener( 'mouseover', function ( event ) {
event.target.style.backgroundColor = "grey";
} );
}
I am fairly inexperienced with Javascript, but I've been struggling with something that doesn't feel like it should be this hard. I'm trying to have my script check an image that has been loaded to see if it's valid (Not a missing file), and if it is missing, to reset the image array to item 0 and repeat, as I can assume it has reached the end of available images in the dir when it encountered a missing file.
I need to reserve several hardcoded image names in a local directory for a slideshow display, but in the event there are more reserved names than images, I need it to reset rather than display broken images.
I cannot make use of PHP or HTML5 for a more straightforward and dynamic solution. I've tried several attempts and I'm just out of ideas here. Any help would be appreciated. Thank you.
<!DOCTYPE html>
<html>
<head>
<title>Monitor Display<title>
<script src="jquery-1.10.2.min.js"></script>
<base href="file://c:/LocalDir/"/>
<!-- CSS -->
<style>
.images {
position:relative; margin:-8px; max-width:100%; height:auto;}
.images img {
position:absolute; left:0; top:0; margin:-8px; max-width:100%; height:auto;}
body {
background-color:rgb(51,51,51);}
</style>
</head>
<body>
<!-- Animation -->
<script>
$(document).ready(function(){
changeImage();
});
function changeImage() {
var img = $('.images img');
if(x >= (images.length-1)) {
x = 0;
}
else
{
x++;
}
img[0].src = images[x];
setTimeout("changeImage()", 5000);
}
var images = [],
x = 0;
images[0] = "ThumbChart0big.png";
images[1] = "ThumbChart1big.png";
images[2] = "ThumbChart2big.png";
images[3] = "ThumbChart3big.png";
</script>
<!-- Image Container -->
<div class="images">
<img src="ThumbChart1big.png"/>
</div>
</body>
</html>
you can use .error() :
....
var x = 0;
function changeImage() {
var img = $('.images img');
img.error( function() {
x = 0; // reset the array index
});
//continue...
I am using javascript to periodically replace a .png picture, which ist viewed fullscreen as the only content of a site. No matter how I try, in Firefox, after being loaded (as seen via firebug), the new image is always drawn from top to bottom. This takes some seconds. Is there any way to prevent this and show the picture all at once?
This is my current javascript code:
function preloadScreenshotPeriodically(){
var new_screenshot = new Image();
new_screenshot.src = "screenshot.png?defeat_firefox_caching=" + counter;
new_screenshot.id = "screenshot";
counter = counter + 1;
new_screenshot.onload = function(){
loadScreenshot(new_screenshot);
setTimeout("preloadScreenshotPeriodically();", 5000);
};
}
function loadScreenshot(new_screenshot){
document.getElementById("screenshot").parentNode.replaceChild(new_screenshot, document.screenshot);
}
I also tried to use two images, one of them hidden. Then loading the picture in the hidden one and swapping them. Same results :/
In an other version, I fetched the image with Ajax and after loading is complete, changed the url of the img-tag. My hope was, that the browser would recognize the picture had already been loaded and fetch it from the browsercache rather than loading it. But this didn't happen and I ended up with two requests to the server for one picture and the same slow drawing of it as in my other trys.
edit:
Now I tried it like suggested in answer 1. While it works just fine if I switch the picture when I load the next one (I don't want this), trying to switch it as soon as it is loaded (what I want) results in a blank window (very short) and visible loading of the picture as described above.
this works:
<body>
<style type="text/css">
#loaderWin { display:block; height:1px; width:1px; overflow:hidden; }
</style>
<div id="imagewin"></div>
<div id="loaderWin"></div>
<script type="text/javascript">
var screenshotCount=0;
function showFirstImage() {
loadNextImage();
}
function showNewImage() {
loadNextImage();
}
function nextImageLoaded() {
// swapImage();
}
function loadNextImage() {
swapImage();
screenshotCount = screenshotCount +1;
var nextImage = "<img id='loaderWinImg' src='screenshot.png?x="+screenshotCount+"' onload='nextImageLoaded()' />";
document.getElementById('loaderWin').innerHTML = nextImage;
}
function swapImage() {
document.getElementById("loaderWinImg").onload = '';
var newimage=document.getElementById('loaderWin').innerHTML;
document.getElementById('imagewin').innerHTML = newimage;
}
var showImages = setInterval("showNewImage()",15000);
showFirstImage();
</script>
</div>
</body>
</html>
this doesn't work:
<body>
<style type="text/css">
#loaderWin { display:block; height:1px; width:1px; overflow:hidden; }
</style>
<div id="imagewin"></div>
<div id="loaderWin"></div>
<script type="text/javascript">
var screenshotCount=0;
function showFirstImage() {
loadNextImage();
}
function showNewImage() {
loadNextImage();
}
function nextImageLoaded() {
swapImage();
}
function loadNextImage() {
screenshotCount = screenshotCount +1;
var nextImage = "<img id='loaderWinImg' src='screenshot.png?x="+screenshotCount+"' onload='nextImageLoaded()' />";
document.getElementById('loaderWin').innerHTML = nextImage;
}
function swapImage() {
// loadNextImage();
document.getElementById("loaderWinImg").onload = '';
var newimage=document.getElementById('loaderWin').innerHTML;
document.getElementById('imagewin').innerHTML = newimage;
}
var showImages = setInterval("showNewImage()",15000);
showFirstImage();
</script>
</div>
</body>
</html>
The problem can be seen here (in firefox problem like described above, in chrome there are no pauses between pictureloads and there is a blank window in between picture changes): http://sabine-schneider.silbe.org:1666/test.html
And here, what Rob suggested in answer 1 without any changes (displays the picture fine in firefox, but not in chrome - there I get a blank window in between picture changes): http://sabine-schneider.silbe.org:1666/test0.html
sounds like the image is "progressive" ( interlaced) and the preload needs more time for it to complete download.
You can set a width and height to the image also for a more stable presentation
( poss )
using
?defeat_firefox_caching=" + counter;
means you never cache the image ( which has confused me about your question ) - remove that line( unless you need it for something you haven't mentioned)
update: Can you try ...
<style type="text/css">
#loaderWin { display:block; height:1px; width:1px; overflow:hidden; }
</style>
<div id="imagewin"></div>
<div id="loaderWin"></div>
<script type="text/javascript">
var screenshotCount=0;
function showNewImage() {
screenshotCount = screenshotCount +1;
var newimage=document.getElementById('loaderWin').innerHTML;
document.getElementById('imagewin').innerHTML = newimage;
var nextImage = "<img src='screenshot.png?defeat_firefox_caching="+screenshotCoun+"'/>";
document.getElementById('loaderWin').innerHTML = nextImage;
}
var showImages = setInterval("showNewImage()",5000);
</script>
Could someone please check my code? Thank you
Here is the fiddle site if you want to test:
http://jsfiddle.net/66QYr/
I would like to have the first 3 text to appear on the left (vertically)
and then the next 3 text appear on the right (vertically)
then the next 2 text appear on the lower right bottom (vertically)
and the last 2 text appear on the lower left bottom (vertically)
http://i197.photobucket.com/albums/aa253/tintingerri/Test/pic001.png
<html>
<head>
<title>tintin</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#tintin{
position: relative;
top: 211px;
left: 12px;
font-size:14pt;
font-weight:bold;
font-family: Calibri;
color:red;
filter:alpha(opacity=0);
opacity:0;}
.image{
height:350px;
width: 855px;}
</style>
<script type="text/javascript">
var txt=['text1','text2', 'text3', 'text4', 'text5', 'text6', 'text7', 'text8', 'text9', 'text10'], init=0,i=0,k=0,speed=20,el;
var loopCount=1000;
var j=0;
//var padd = 20; //set this to an approriate increment
function fade(){
init==0?i++:i--;
el.filters?el.style.filter='alpha(opacity='+i+')':el.style.opacity=i/100;
el.firstChild.nodeValue=txt[k];
if(i==100)init=1;
if(i==0) {init=0;k++;j++;
el.style.paddingLeft=20*k;
}
if(k==txt.length)k=0;
if (j<loopCount) setTimeout('fade()',speed);
}
window.onload=function(){
el=document.getElementById('tintin');
fade();
}
</script>
</head>
<body>
<div id="tintin"> </div>
<div class="image" style="background-image:url('pic007s.jpg')">;
</div>
</body>
</html>
There are two problems you're trying to solve here:
Positioning the text in the appropriate places
Getting them to fade in
Step One
The first problem can be solved with some simple CSS. Start out with a container:
#container {
position:relative;
width:150px;
height:150px;
}
<div id="container"></div>
The width and height can be anything, but you do have to tell it something. We're going to be putting our text in this container, but then use position:absolute. This will take them out of the normal document flow, and collapse the container if we have told it an explicit height.
The next step is the text. You're going to want four divs, with the text inside as paragraphs:
<div class="text" id="text1">
<p>text 1</p>
<p>text 2</p>
<p>text 3</p>
</div>
Do this for each of the four blocks of text that you want to have. Use the same class name on each one, but give each their own, unique ID (text2, text3, etc.).
Finally, just use (as I said earlier) absolute positioning to place them where you'd like:
.text { position:absolute; }
#text1 { top:0; left:0; }
#text2 { top:0; right:0; }
...and so on. When you're done, you should have something that looks like this:
Step Two
Fading elements in requires animation. You kind of have a basic animation function, but I suggest you read Robert Penner's article on tweening and animation. It was written for ActionScript, but the exact same principles apply.
For now, here's a good general-purpose JavaScript method that will take an element and fade it in:
function fadeIn(totalTime, elem, after) {
var cos = Math.cos,
PI = Math.PI,
startTime = +new Date(),
endTime = startTime + totalTime,
timer;
elem.style.opacity = 0;
elem.style.filter = 'alpha(opacity=0)';
timer = setInterval(function () {
var currentTime = +new Date();
currentTime = currentTime > endTime ? 1 : (currentTime - startTime) / totalTime;
var distance = (1 - cos(currentTime * PI)) / 2;
elem.style.opacity = distance;
elem.style.filter = 'alpha(opacity=' + distance * 100 + ')';
if (currentTime === 1) {
clearInterval(timer);
if (after) {
after();
}
}
}, 40);
}
You tell this function how long you want the animation to last (in milliseconds), and you can also give it a function to execute when the fading is done (if you want; it's not necessary).
If I understood your question correctly, you want all the texts to start invisible, and then fade in, one at a time, clockwise from the top. We can make them invisible with CSS, but then if the user has JS disabled, the page will appear blank. So you need to first "get" all of the elements (either with some kind of getByClass function or with four different calls to getElementById) and set their opacity to 0.
So you can make the first group of texts fade in by doing the following:
var text1 = document.getElementById('text1');
fadeIn(1000, text1);
The problem is, by doing this, there's no way to tell when to start the next animation. So we need to make a function, with the help of closures, to help keep track of things (this assumes that you've already gotten the elements in JS and made them invisible):
var tracker = (function () {
var texts = [text1, text2, text3, text4],
i = 0;
return function () {
var text = texts[i];
if (text) {
fadeIn(1000, text, tracker);
i += 1;
}
};
}());
This function cycles through each element and fades it in when the previous one is done. (It's okay if the code doesn't make a lot of sense; closures are tricky things.)
Here is the final result, in JSFiddle. Good luck.