Table Refresh, Every Second - javascript

<html>
<body>
<body bgcolor="33FF00">
<script language = "JavaScript">
//-----------------Created Variables Here------------------
timeLeft = 30 //this is counted down from until it hits 0
points = 0 //this is the points system that is added to by 10 each time a duck is clicked
// ----------------Duck Or Sky element-----------------
function duSky(){ //This is a function to tell add points to the points variable if the user clicks a duck.
duckNum = Math.floor((Math.random()*10)+1)
if(duckNum<10){document.write("<img src=images/skyTile.jpg>")}
else{document.write("<img src='images/duckTile.jpg' onClick='duckClick()'")}
}
</script>
<center><img src=images/duckHuntTitle.gif><br> <!Duck Hunt title gif, no background so you can see the background of the page, also centered>
<div name = "tableDiv"> <!Named the table "TableDiv" so that I can refer to it at a later date. This was to try and make my job of refreshing easier>
<table>
<tr>
<td> <script> duSky() </script> </td>
<td> <script> duSky() </script> </td>
<td> <script> duSky() </script> </td>
<td> <script> duSky() </script> </td>
<td> <script> duSky() </script> </td>
</tr> <!Inside of all the table boxes there is a function that designates whether inside will be a duck or sky tile>
<tr> <!This is the duck table that is exactly 1000px wide by 400px height. This is created by 10 200px by 200px boxes, two rows of 5 boxes>
<td> <script> duSky() </script> </td>
<td> <script> duSky() </script> </td>
<td> <script> duSky() </script> </td>
<td> <script> duSky() </script> </td>
<td> <script> duSky() </script> </td>
</tr>
</table>
</div>
<form name="score">
Points <input type="text" name="pointsscored" readonly="readonly"> <!This is the box that is centered that displays the points the player has got, also is now readonly so no tweaking is allowed>
</form>
<form name="timer">
Time <input type="text" name="timeBox" readonly="readonly"> <!This is the timer box that is centered as well that displays how long the player has left and is readonly>
</form>
</center>
<script language = "JavaScript"> //Returns the script to JavaScript to allow for functions to be used that are related to the HTML previous to this
document.timer.timeBox.value = timeLeft //Displays the time left before the game has even started and been clicked so the player immediately knows the time that they have to play with
function timeDecrease(){ //This is the timer function that reduces the timer by a second each time to make the game slowly time out after 30 seconds
setInterval(function(){timeLeft-- //I am still working on the refresh function but hopefully it will be corrected to make the table refresh with every 1000 miliseconds
document.timer.timeBox.value=timeLeft;
//document.tableDiv.reload(true) //trying to get the reload function to work.
},1000); //1000 miliseconds, therefore it is 1 second
}
while(timeLeft < 0){alert("Timeeeeeees Up, you scored: ", points ,"points! well done Duck Slayer!")} //Alert to signify the end of the game.
// ----------------Function for clicking the duck-----------------
function duckClick(){
points = points + 10;
document.score.pointsscored.value = points; //when the player clicks the duck, points will be added to the points box
}
</script>
<center>
<form name = "playButton">
<button type="button" onClick = "timeDecrease()">Play!</button> <!This is the on click function that starts the game/countdown feature>
</center>
</form>
</body>
</html>
I have a problem with getting my graph to work. I am currently working on making a simple point and click game and I need the table to refresh to make the images become randomized in the position. The idea is that it refreshes every second, giving the appearance of true randomization from a previous section of the script. The problem is that I can't get the table to refresh even though I have set a div tag and I am using the reload function. I am hoping that you can help me find a solution to this.
Also the website doesn't recognise the document.tableDiv.reload(true) part but I don't understand how to get the table to refresh with every second that goes past.
P.S if you haven't guessed I am awful at coding but hope to get better.

Use jQuery, it will make your life easier as selectors mean you won't have to repeat so much code.
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
Assign all of the td elements to run duSky() function in a class -- we'll also take the script out of the td as we're going to run it from jQuery's document.ready function:
<td class='dusky'></td>
Next, we make a function to assign each td with the output of duSky():
<script>
// This function takes every table cell with dusky class and inserts output of duSky() into it
$(document).ready(function refresh(){
$('.dusky).each(function(){
this.html = duSky();
})
})
</script>
Finally, we make it refresh every 5 seconds:
<script>
// Make our refresh script run every 5 seconds
setInterval(refresh, 5000);
</script>
Note: I can't test this where I am, code may not be 100% correct, but this is on the right lines. If you change it and it helps, please give me the right code so I can edit the post and give future readers an easier ride.

Related

Change div color on checking all check boxes in hidden form

Have several problems and can't find solution. My code https://jsfiddle.net/46qybyrh/2/
Upper table HTML
<div class="block">
<table>
<tr>
<th>Nr.</th>
<th style="width: 200px">Task</th>
<th>Progresas</th>
<th></th>
</tr>
<tr>
<td>1</td>
<td>Air port scedules</td>
<td>0/3</td>
<td>
<button onclick="showDiv()">Expand</button>
</td>
</tr>
</table>
Hidden div
<div id="popup" class="popupbox">
<table class="block">
<tbody>
<tr>
<td></td>
<form>
<td>XML</td>
<td>
<span>Comment</span><br>
<textarea></textarea>
</td>
<td>
<span>Deadline</span>
<input type="date" value="2017-08-24">
</td>
<td>Done:<input type="checkbox"></td>
<td><input type="submit" value="Apply"></td>
</form>
</tr>
<tr>
<td></td>
<form>
<td>Scedules</td>
<td>
<span>Comment</span><br>
<textarea></textarea>
</td>
<td><span>Deadline</span>
<input type="date" value="2017-08-10">
</td>
<td>Done:<input type="checkbox"></td>
<td><input type="submit" value="Apply"></td>
</form>
</tr>
<tr>
<td></td>
<form>
<td>Infobox</td>
<td>
<span>Comment</span><br>
<textarea></textarea>
</td>
<td><span>Deadline</span>
<input type="date" value="2017-08-14">
</td>
<td>Done:<input type="checkbox"></td>
<td><input type="submit" value="Apply"></td>
</form>
</tr>
</tbody>
</table>
<button onclick="hideDiv()">close</button></div>
Main aims of this code should be:
When press apply on each row, hidden div should not hide. Only information like comment, date, check box should change.
When all 3 check boxes are selected, upper tables first row (1 Air port scedules 0/3) should change its background color.
If deadline is close (let say 5 days till deadline) entire row should change background color.
If deadline is passed entire row should change its background color.
I know its a lot to ask but maybe someone of you will guide me on each of this steps.
I took your fiddle and put it into a codepen and messed around with it for a while. I was able to do what you wanted with a lot of jQuery. To learn jQuery, try www.w3schools.com/jQuery.
Here is the codepen:
https://codepen.io/pen/Ojxzje
In a few short steps:
I removed all the <form> tags, <input type='submit'>, and <tbody> to make the code cleaner (the submit button was causing problems with hiding the div as mentioned by #AngeLOL.
I reformatted the lower table a bit just to make it cleaner for my jQuery to work nicely. (I added a header row and removed the text from the blocks)
I included the jQuery library
I renamed your jQuery functions and created one more (open(), close(), and apply(). They are called by the buttons respectively.
Inside the open() function, I showed the rows in the second table with the class if items-[ID OF LIST WE ARE IN]. This way there could be a clean list of all of the tasks instead of having a new table for every new list.
The open() function also changes the button from expand to hide which calls the close function.
The close() function just hides the second table and changes the name of the button back to expand.
The apply() function is run whenever you press the Apply button. It performs two checks:
Checks all of the checkboxes in the table rows labeled .details-[ID WE ARE WORKING WITH] and if they are all checked, selects the list's row in the upper table. It adds a green color to the background.
It then finds all the dates and compares them with today's date (thanks again #angeLOL. If the date is within 5 days, it selects the row the date was on and changes the color. If the date has passed or is today, it colors the row red.
It's a lot of code and a bunch of reorganization, so let me know if you are having trouble understanding it and I can help walk through my steps.
use <button type="button">Apply</button> instead <input
type="submit" value="Apply">
Give to those elements you want to change its color an "id" attribute, so change its color by using style propierty of element
document.getElementById("elementID").style.backgroundColor = "#colorcode"
Here is an example of how to compare dates.
Hidden div is initially hidden. When you submit the form, you reload the page, so it is hidden again. You may want to handle click on button or form submit, prevent default behavior, submit data via AJAX request and then update your UI without page reload.
<form onsubmit="return handleSubmit(this);">
...
<input type="checkbox" onchange="updateCheckboxesState();">
</form>
<script>
function handleSubmit(form) {
// send AJAX request here...
// manipulate DOM if needed in AJAX callback
return false; // prevent submit
}
function updateCheckboxesState() {
var checkboxes = document.querySelectorAll("form input[type=checkbox]");
for (var i = 0; i < checkboxes.length; i++) {
if (!checkboxes.item(i).checked) return; // break on first unchecked
}
// highlight the row here...
}
</script>
Similar flow can be applied to date inputs. The main idea is to update UI when value has been changed.
Background change can be achieved via changing element's inline style or changing it's class
var el = document.querySelector("div.block > table > tr");
el.style.backgroundColor = "#FF0000"; // inline
el.className = "highlighted"; // element class
Hope, this helps...

JavaScript inside jstl iteration

I have the following codes:
<%int number=0;%>
<c:forEach var="row" items="${tAdmin.rows}" varStatus="totalRow" step="1">
<td><%=++number%></td>
<td>
<div id="content" style="table-layout:fixed; width:405px; word-wrap:break-word;">
<script language="JavaScript" type="text/JavaScript">
function load(){
var content='${row.content}';
document.getElementById("content").innerHTML=content;
document.getElementById("content").innerHTML=Utf8.decode(document.getElementById("content").innerHTML);
}
window.onload=load;
</script>
</div>
</td>
</c:forEach>
The problem is that it only shows the result of the last content instead of printing it out line by line according to number.
What you are creating, if you view the page source in the browser, would look something like this (note the ${row.content} will have already been replaced on the server):
<td>0<td>
<td>
<div id="content" style="table-layout:fixed; width:405px; word-wrap:break-word;">
<script language="JavaScript" type="text/JavaScript">
function load(){
var content='The first row content';
document.getElementById("content").innerHTML=content;
document.getElementById("content").innerHTML=
Utf8.decode(document.getElementById("content").innerHTML);
}
window.onload=load;
</script>
</div>
</td>
<td>1<td>
<td>
<div id="content" style="table-layout:fixed; width:405px; word-wrap:break-word;">
<script language="JavaScript" type="text/JavaScript">
function load(){
var content='Some different content';
document.getElementById("content").innerHTML=content;
document.getElementById("content").innerHTML=
Utf8.decode(document.getElementById("content").innerHTML);
}
window.onload=load;
</script>
</div>
</td>
<td>2<td>
<td>
<div id="content" style="table-layout:fixed; width:405px; word-wrap:break-word;">
<script language="JavaScript" type="text/JavaScript">
function load(){
var content='Yet some more content';
document.getElementById("content").innerHTML=content;
document.getElementById("content").innerHTML=
Utf8.decode(document.getElementById("content").innerHTML);
}
window.onload=load;
</script>
</div>
</td>
You're going to have many copies of function load() and many times where window.onload is assigned window.onload=load;
When this arrives at the browser and is interpreted, only the last definition of function load() will be in effect; only the last time you assign window.onload=load; means anything (because you keep replacing the value of window.onload) -- each redefinition of load() will replace the previous one - so only your last var content='${row.content}'; is ever executed.
In addition, you will have many <div> tags with the same id of "content" and that's not allowed.
The content of each of those <td><div>...</div></td> blocks can be set by the JSP/JSTL itself on the server -- there is no need to set the innerHTML via javascript.
You can use the totalRow varStatus that you set up to provide the number for the first <td> -- you don't need to increment your own counter.
You can use Expression Language (EL) to access the content value of each row.
Inline style="blah blah blah" sucks. Use that only if absolutely necessary.
Instead, put all this style in CSS targeting .contentbits:
style="table-layout:fixed; width:405px; word-wrap:break-word;"
becomes
.contentbits {
table-layout:fixed;
width:405px;
word-wrap:break-word;
}
The page fragment becomes much simpler:
<c:forEach var="row" items="${tAdmin.rows}" varStatus="totalRow" step="1">
<td>${totalRow}</td>
<td>
<div class="contentbits">${row.content}</div>
</td>
</c:forEach>
It's not the right way to do it, but a simple solution would be use addEventListener instead onload:
<%int number=0;%>
<c:forEach var="row" items="${tAdmin.rows}" varStatus="totalRow" step="1">
<td><%=++number%></td>
<td>
<div id="content<%=number%>" style="table-layout:fixed; width:405px; word-wrap:break-word;">
<script language="JavaScript" type="text/JavaScript">
window.addEventListener("load", function () {
var element = document.getElementById("content<%=number%>");
element.innerHTML=Utf8.decode('${row.content}');
}, true);
</script>
</div>
</td>
</c:forEach>
In fact your code is using only the last "onload" because, when loading the page, it will execute the javascript load callback only when finish full loading it. So, each time you loop is executed, it updates the load callback reference for the last one, so when onload is triggered, the last only will be executed.
But your code has other errors too. The content id, repeats at the code lot of times, that will make your div getElementById useless, because you have lot of ids that are equal. Ids must be unique to work property.
To finish, it's not a good pattern to mix your HTML with scripts inside, is better to have you logic file (javascript file) outside, then it can make changes in your code when finish to load, reading the html that was generated. You also can create data attribute in your div then read it by the javascript to manage all itens with a specific data attributes.
To keep it simple, I will add an example:
<%int number=0;%>
<c:forEach var="row" items="${tAdmin.rows}" varStatus="totalRow" step="1">
<td><%=++number%></td>
<td>
<div id="content<%=number%>" style="table-layout:fixed; width:405px; word-wrap:break-word;" data-content="${row.content}">
</div>
</td>
</c:forEach>
Now the script file (I'm using jQuery for this example works on any browser):
$(function() {
$("[data-content]").each(function(item) {
$(item).html(Utf8.decode(item.attr('data-content')));
});
});

show and hide an image onclick

I have the user profile picture inside a table having 100px for height and width.
I also have radio buttons to set visibility of the profile picture (public, Private, etc.). These are updated using ajax.
What I want to know is how can I show a image (e.g. "success.png") right above the profile picture and fade it out after 2 seconds?
<table class="profimg">
<tr><td align="center"><img class="profimg" src="../images/user/profile/1c4ca4238a0b923820dcc509a6f75849b1.jpg" alt="Administratorasdf" /></td></tr>
<tr><td align="center"><input type='radio' title='Publicly Visible' name='img_pub' onclick="upimg1()" /> <input type='radio' title='Visible Only To Users' value='UsersOnly' name='img_pub' onclick="upimg2()" /> <input type='radio' title='Visible Only To You' value='Hide' name='img_pub' onclick="upimg3()" checked='checked'/></td></tr>
</table>
I have added an img tag with the ID 'success'. This tag is the image that fades in and out.
$("#rad").click(function () {
$("#success").fadeIn(500).delay(1000).fadeOut(1000);
});
dont forget to include the jquery library.
Check this demo
<script type="text/javascript">
$(document).ready(function(){
$(".profimg").click(function(){
$("this").slideToggle("slow");
});
});
</script>
Don't forget to use jquery library.This will not take 2 seconds. But it'll work. you can use settimeout function for time interval. google for it

Keeping track of duplicated elements in Javascript using JSP

This question is related to another question of mine. Thanks to some help I am now able to show duplicate elements upon click on the addButton.
I would like to keep track of how many elements have been duplicated. This will also help to assign different id to the duplicate elements.
Here is a sample of my code:
<html>
<head>
<%! int n = 1; %>
<script type="text/javascript">
function onClickAdd() {
var tableRow = document.getElementById("tableRow");
var tableRowClone = tableRow.cloneNode(true);
tableRowClone.id = 'tableRow'+<%=n%>;
tableRow.parentNode.insertBefore(tableRowClone, tableRow.nextSibling);
}
</script>
</head>
<body>
<table>
<tr id="tableRow">
<td>
<fieldset>
<legend> This is box number <%=n++%> </legend>
<table>
<tr>
</tr>
</table>
</fieldset>
</td>
</tr>
<tr>
<td>
<input type="button" name="addButton" value="Add" onClick="Javascript:onClickAdd()">
</td>
</tr>
</table>
</body>
</html>
If you read my other question, you will find the code samples similar. Now, I want to print out different legends by incrementing a JSP integer, n.
Thus far all duplicates show "This is box number 1" in the legend. It seems like n doesn't increment to 3 onwards.
I would like to show that n increases to assign id to the duplicates.
The JSP is generating the HTML on the server-side while the Javascript is running on the client-side. Meaning, when the Javascript is running the page was already rendered with the values of n (which is 1 at the time of creation). Since the JSP is not running again the value of n remains 1.
Solution: run everything on the client-side (JS) including the counter.

JQuery Tooltip Plugin from Jorn

I am thinking someone may have run across this one, but not sure. From a high level, I am trying to roll over a input [type=text] and display a tool tip (with the contained value) using the plugin available at http://bassitance.de.
I have to use titles and classes for validation on the specific elements, so I put a blank div to hold the input [type=text] value for the roll over.
Issue:
It won't hold the value of 2 text boxes at once. Once I put a value in the box on the right, the tooltip on the left goes away. Same thing if I switch it aroun. I can't keep a tooltip on more than one element.
Here is the code (Note: You will have to download the plugins in the source as I am not sure where the live versions are if there are any).
<link rel="stylesheet" href="/scripts/jquery-tooltip/jquery.tooltip.css" />
<script type="text/javascript" src="/scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/scripts/jquery-tooltip/jquery.tooltip.min.js"></script>
<script type="text/javascript">
$(function(){
$("input").change(function(){
var newTitle = $(this).val();
$(this).parent().attr("title",newTitle);
// re-init tool tip
reload();
});
// Init tooltip
reload();
});
reload = function(){
$("div").tooltip();
}
</script>
<body>
<table border="1px solid black">
<tr>
<td title="hello">
<div>
<input type="text" value=""/>
</div>
</td>
<td>
<div>
<input type="text" value=""/>
</div>
</td>
</tr>
</table>
<div id="debug"></div>
</body>
</html>
I couldn't understand your question. Do you want to show two tooltips at once or your problem is that the title attribute you set on each reload function erases both titles?
I used this plugin before if you explain more, or show a demo of your example i would be able to help.
Sinan.
EDIT Working version: (It changes titles of 'td's)
$(function(){
$("input").change(function(){
var newTitle = $(this).val();
$(this).parent().parent('td').attr("title",newTitle);
// re-init tool tip
reload();
});
// Init tooltip
reload();
});
reload = function(){
$("[title]").tooltip();
}

Categories

Resources