Is there a way to remove and HTML element after six hours? - javascript

I have a picture with the word "NEW" over it to designate a new document that has been posted to our website. I would like to have jQuery remove the picture after 6 hours of it being posted. How would I go about doing this?
Here is the element:
<tr class="pointer">
<td>
<img class="germ" src="~/Image" width="40px" />
<i class="created" hidden="hidden">April 3, 2020 13:13:00</i>
Document Title
</td>
<td>PDF</td>
<td>March 2020</td>
</tr>
As you can see, I have a hidden <i> element that designates when the document was posted to the website. I need to remove the <img> tag 6 hours from the time in the <i> tag.
How can I do this using jQuery or JavaScript?


This would be better done server-side. The way you want to do it assumes that the user will have this same page up for 6+ hours, or come back to this page in the same state, which is pretty unlikely.
What I would do is add a property to the post for created and have it set a default time of Date.now(), and then have front end code look for whether that created value was less than 6 hours ago (1000 * 60 * 60 * 6 miliseconds).
If so, show the 'New' graphic. If not, don't.
Another way to do it so that you don't have to update server-side stuff that might be more set in stone is to have the default display for the "New" graphic to be true, then:
let createdTime = new Date(document.queryselector('i.hidden').textContent);
if (Date.now() - createdTime > (1000 * 60 * 60 * 6)){
//code to hide the "New" graphic
}
A little extra two cents for free: I would add an id attribute to that hidden i element to make sure you're selecting only that and not something else that may have the same class


Since you asked how to do this with JavaScript or JQuery, this is how.
I also included a 3-second example to show that it does work.
window.setTimeout(function() {
document.getElementById('sixHours').outerHTML = '';
}, 2160000);
window.setTimeout(function() {
document.getElementById('threeSeconds').outerHTML = '';
}, 3000);
<div id="sixHours">This will be removed after six hours</div>
<div id="threeSeconds">This will be removed after three seconds</div>
Keep in mind, that as soon as the page is refreshed, the timer will start over. If you want to avoid this and still have JavaScript handle it, you could have it removed at a definite time.
Edit
The snippet below will parse the date in expiration and find the milliseconds from that till now. Then like the snippet above, the remove element will get removed when the timer expires. 6 hours are added to the timer to make it expire 6 hours from the given time.
var expiration = Date.parse(document.getElementById('expiration').innerHTML);
var diff = expiration - Date.now();
window.setTimeout(function() {
document.getElementById('remove').outerHTML = '';
}, diff + 2160000);
//2160000ms = 6 hours
<div id="expiration">April 3, 2020 20:00:00</div>
<div id="remove">Will be removed by the date above</div>


Use setTimeout(), but bear in mind that people aren't likely going to sit at a single page for 6 hours meaning this will fail as soon as they navigate away. You'll have to change the time sent over every time they refresh.
const testing = true;
if (testing) {
// BEGIN - Fake date for testing
const tmpNow = new Date();
document.querySelector("i.created").innerHTML = tmpNow.toUTCString();
// END - Fake date for testing
}
const d = document.querySelector("i.created").innerHTML;
const dd = new Date(d);
if (testing) {
dd.setSeconds(dd.getSeconds() + 3);
} else {
dd.setHours(dd.getHours() + 6);
}
const ddd = dd.getTime();
const now = Date.now();
if (ddd < now) {
console.log("Too late");
}
const dt = Math.max(ddd - now, 0);
setTimeout(() => {
const img = document.querySelector("img.germ");
img.parentNode.removeChild(img);
}, dt);
<tr class="pointer">
<td>
<img class="germ" src="~/Image" width="40px" />
<i class="created" hidden="hidden">April 3, 2020 13:13:00</i> 03.21.2020 GOA - Alaska Businesses Now Eligible for SBA Economic Injury Disaster Loans (2)
</td>
<td>PDF</td>
<td>March 2020</td>
</tr>


You don't understand the problem here.
As R Greenstreet said it needs to be done server-side. You need a Create Post Date to be sent to UI.
Let's assume you have a JSON coming from a server where you can add createDate property of a post form bata base.
{createDate: date, name......}
You need to compare that date with Date.now()
Pseodu Code here:
if(createDate + 6 hours >= Date.now()) then hide your Icon.


You will need to use Date to convert the String into a Date Object:
new Date("April 3, 2020 13:13:00");
This will create a Date Object, yet since there is no Timezone Offset, the script might assume UTC. Your result might be:
"2020-04-03T13:13:00.000Z"
So consider specifying a Time Zone. Some browsers will assume the Users local Timezone.
$(function() {
function getDate(cObj, tz) {
if (tz == undefined) {
tz = "GMT-07:00";
}
var str = cObj.text().trim() + " " + tz;
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
var nDt = new Date(str);
console.log(str, nDt);
return nDt;
}
function getHoursPast(thn) {
// https://stackoverflow.com/questions/19225414/how-to-get-the-hours-difference-between-two-date-objects/19225463
var now = new Date();
return Math.floor(Math.abs(now - thn) / 36e5);
}
var hours = getHoursPast(getDate($(".created")));
console.log(hours + " have passed since", getDate($(".created")));
if (hours > 5) {
$(".germ").remove();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr class="pointer">
<td>
<img class="germ" src="~/Image" width="40px" />
<!--
Would advise better format
Example: 2020-04-03T13:00.000-7:00
-->
<i class="created" hidden="hidden">April 3, 2020 13:13:00</i> Document Title
</td>
<td>PDF</td>
<td>March 2020</td>
</tr>
</table>
References
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
How to get the hours difference between two date objects?
Getting the client's timezone offset in JavaScript

Related

Add a row per day or week automatically for multiple years (w/ using script or function ?)

What I would like to do is to create a script or with a function that will add automatically the day, the month and the year per row for 4 years for example in order to make a calendar of shooting, pre production and post prod per film. It would be so long to do it manually and add each day per month for 4 or more years. If it's done by a script it would be done instantly and would be possible to update later to add more years.
Example of what I'm looking for
If it's too complicated per day, I can add per week. Like week 1 January 21, just like in the picture. But I really prefer if that's possible to add a row per day to be the most accurate as possible.

Days for the rest of the year in a column
function daysforrestofyear() {
let days = [];
let dt = new Date();
const ldtv = new Date(dt.getFullYear() + 1,0,1).valueOf();
do {
days.push([Utilities.formatDate(dt,Session.getScriptTimeZone(),"dd/MMM/yyyy")]);
dt.setDate(dt.getDate() + 1);
}while(dt.valueOf() < ldtv)
const ss = SpreadsheetApp.getActive();
const sh = ss.getSheetByName("Sheet0");
sh.clearContents();
sh.getRange(1,1,days.length,1).setValues(days);
}
Jun/04/2022
Jun/05/2022
Jun/06/2022
Jun/07/2022
Jun/08/2022
Jun/9/2022
Jun/10/2022
Jun/11/2022
Jun/12/2022
Jun/13/2022
Jun/14/2022
Jun/15/2022
Jun/16/2022
Jun/17/2022
Jun/18/2022
Jun/19/2022
Jun/20/2022
Jun/21/2022
Jun/22/2022
Jun/23/2022
Jun/24/2022
Jun/25/2022
Jun/26/2022
Jun/27/2022
Jun/28/2022
Jun/29/2022
Jun/30/2022
Jul/01/2022
Jul/02/2022
Jul/03/2022
Jul/04/2022
Jul/05/2022
Jul/06/2022
Jul/07/2022
Jul/08/2022
Jul/9/2022
Jul/10/2022
Jul/11/2022
Jul/12/2022
Jul/13/2022
Jul/14/2022
Jul/15/2022
Jul/16/2022
Jul/17/2022
Jul/18/2022
Jul/19/2022
Jul/20/2022
Jul/21/2022
Jul/22/2022
Jul/23/2022
Jul/24/2022
Jul/25/2022
Jul/26/2022
Jul/27/2022
Jul/28/2022
Jul/29/2022
Jul/30/2022
Jul/31/2022
Aug/01/2022
Aug/02/2022
Aug/03/2022
Aug/04/2022
Aug/05/2022
Aug/06/2022
Aug/07/2022
Aug/08/2022
Aug/9/2022
Aug/10/2022
Aug/11/2022
Aug/12/2022
Aug/13/2022
Aug/14/2022
Aug/15/2022
Aug/16/2022
Aug/17/2022
Aug/18/2022
Aug/19/2022
Aug/20/2022
Aug/21/2022
Aug/22/2022
Aug/23/2022
Aug/24/2022
Aug/25/2022
Aug/26/2022
Aug/27/2022
Aug/28/2022
Aug/29/2022
Aug/30/2022
Aug/31/2022
Sep/01/2022
Sep/02/2022
Sep/03/2022
Sep/04/2022
Sep/05/2022
Sep/06/2022
Sep/07/2022
Sep/08/2022
Sep/9/2022
Sep/10/2022
Sep/11/2022
Sep/12/2022
Sep/13/2022
Sep/14/2022
Sep/15/2022
Sep/16/2022
Sep/17/2022
Sep/18/2022
Sep/19/2022
Sep/20/2022
Sep/21/2022
Sep/22/2022
Sep/23/2022
Sep/24/2022
Sep/25/2022
Sep/26/2022
Sep/27/2022
Sep/28/2022
Sep/29/2022
Sep/30/2022
Oct/01/2022
Oct/02/2022
Oct/03/2022
Oct/04/2022
Oct/05/2022
Oct/06/2022
Oct/07/2022
Oct/08/2022
Oct/9/2022
Oct/10/2022
Oct/11/2022
Oct/12/2022
Oct/13/2022
Oct/14/2022
Oct/15/2022
Oct/16/2022
Oct/17/2022
Oct/18/2022
Oct/19/2022
Oct/20/2022
Oct/21/2022
Oct/22/2022
Oct/23/2022
Oct/24/2022
Oct/25/2022
Oct/26/2022
Oct/27/2022
Oct/28/2022
Oct/29/2022
Oct/30/2022
Oct/31/2022
Nov/01/2022
Nov/02/2022
Nov/03/2022
Nov/04/2022
Nov/05/2022
Nov/06/2022
Nov/07/2022
Nov/08/2022
Nov/9/2022
Nov/10/2022
Nov/11/2022
Nov/12/2022
Nov/13/2022
Nov/14/2022
Nov/15/2022
Nov/16/2022
Nov/17/2022
Nov/18/2022
Nov/19/2022
Nov/20/2022
Nov/21/2022
Nov/22/2022
Nov/23/2022
Nov/24/2022
Nov/25/2022
Nov/26/2022
Nov/27/2022
Nov/28/2022
Nov/29/2022
Nov/30/2022
Dec/01/2022
Dec/02/2022
Dec/03/2022
Dec/04/2022
Dec/05/2022
Dec/06/2022
Dec/07/2022
Dec/08/2022
Dec/9/2022
Dec/10/2022
Dec/11/2022
Dec/12/2022
Dec/13/2022
Dec/14/2022
Dec/15/2022
Dec/16/2022
Dec/17/2022
Dec/18/2022
Dec/19/2022
Dec/20/2022
Dec/21/2022
Dec/22/2022
Dec/23/2022
Dec/24/2022
Dec/25/2022
Dec/26/2022
Dec/27/2022
Dec/28/2022
Dec/29/2022
Dec/30/2022
Dec/31/2022

Document Write On Certain Hours & Days

I've been trying to get this script to show a paragraph during certain hours of the day. Now I'm trying to add certain days, such as the weekend. I was unable to figure it out.
This is one of the dozen things I tried:
var day = new Date();
var week = day.getHours();
var weekend = day.getDay() == 0 || day.getDay() == 6;
if (week < 4 || week > 12) || (weekend === true) { document.write('<p class="alert alert-danger department-hours-warning"><i class="fa fa-clock-o fa-3x pull-left"></i>NOTICE: This is not a 24 hour department and we are currently closed, please anticipate a delay in response. Our department hours are from 09:00-17:00 EST Monday through Friday. We are closed on USA holidays and other days that may be listed on our calendar.</p>'); }
The goal here is too show the paragraph if it's not between 4am to 12am on weekdays.
EDIT: updated script, but it is not working.

As mentioned in your previous question (which you've since deleted). JS dates are notoriously tricky. For example in your code new Date() is created relative to the users local timezone, not that of your business. This means it may well be a weekday for you while it is a weekend for me.
My recommendation would be to use a library like MomentJS to assist with your querying. It would look something like:
(function(){
function initialize(){
moment.tz.setDefault('America/New_York'); // replace this with your actual timezone
var NOW = moment();
var alertZone = document.getElementById('alertZone');
// is weekend or out of office hours
if(NOW.isoWeekday() > 5 || NOW.hour() < 9 || NOW.hour() > 17){
alertZone.innerHTML = '<p class="alert alert-danger department-hours-warning clearfix"><i class="fa fa-clock-o fa-3x pull-left"></i>NOTICE: This is not a 24 hour department and we are currently closed, please anticipate a delay in response. Our department hours are from 09:00-17:00 EST Monday through Friday. We are closed on USA holidays and other days that may be listed on our calendar.</p>';
}else{
alertZone.innerHTML = '<p class="alert alert-success department-hours-success clearfix"><i class="fa fa-clock-o fa-3x pull-left"></i>Welcome y\'all we\'re open!</p>';
}
}
window.onload = initialize;
})()
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.11/moment-timezone.min.js"></script>
<div id="alertZone"></div>
Explanation
Moment timezone let's us set your local timezone using .setDefault()(all moments created after this will be relative to YOUR timezone rather than that of the user).
We then check using .isoWeekday()(which is a non-locale specific check for day of the week [1-5 = Monday-Friday]), and .hour()(returns a number between 0-23) if we are outside of office hours.

create an automatic bold for table by the ID ?? with javascript

first of all I apologize for my bad English, I want to make a JavaScript for a tabele who makes himself automatically by the ID Bold, just like this one here but the code is not only for weeks for tabele
the table has therefore different time input I will when the time is for example 08:00 clock, the tabele from 08:15 to mark Irish always +1
<td id="1">08:00</td>
<td id="1">BEKA-KAQANIK</td>
</tr>
<tr>
<td id="2">08:15</td>
<td id="2">MEDINA</td>
Here is an example but it is only on weekdays
http://jsfiddle.net/c5bHx/
var days = 'sunday,monday,tuesday,wednesday,thursday,friday,saturday'.split(',');
document.getElementById( days[(new Date()).getDay()] ).className = 'bold';
.bold {
font-weight:bold;
}
<div id="monday">Monday: 12:00-2:00</div>
<div id="tuesday">Tuesday: 11:00-3:00</div>
<div id="wednesday">wednesday: 12:00-2:00</div>
<div id="thursday">thursday: 11:00-3:00</div>
<div id="friday">friday: 12:00-2:00</div>
<div id="saturday">saturday: 11:00-3:00</div>
<div id="sunday">sunday: 12:00-2:00</div>

I'm not sure if I understand your question correctly, but here is an example JSFIDDLE. It might help with what you're trying to accomplish.
<table>
<tr id="1530">
<td>15:30</td>
<td>A</td>
</tr>
<tr id="1545">
<td>15:45</td>
<td>B</td>
</tr>
<tr id="1600">
<td>16:00</td>
<td>C</td>
</tr>
</table>
// Initialize new Date object.
var currentDate = new Date();
// Get the hour
var currentHour = currentDate.getHours();
// Get the minutes
var currentMinute = currentDate.getMinutes();
// Bin the minutes to 15 minute increments by using modulus
// For example, xx:33 becomes 30
var minuteBin = currentMinute - (currentMinute % 15);
// Create a string that matches the HTML ids
var idString = "" + currentHour + minuteBin;
// Set the matching div class to 'bold'
document.getElementById(idString).className = 'bold';
// Log variables to console for debugging
console.log("Time =",currentHour,":",currentMinute,"bin =",minuteBin,"idString =",idString);
This example is meant for GMT-0400 (EDT). This will give different results in different time zones.
If I've misunderstood anything, please let me know and I will do my best to update my answer. Hope that helps!

Ajax Call to Reload Div Memory Leak

Any Suggestions on how i can make my question better?
So I have HTML and Javascript code that takes data out of a DB of a program that is used for statistical analysis of Lab Analysis. For example you have a plating bath say copper and you need to find out the concentration, you take the pH of the bath you then plug it into the program and it saves that information. On the webpage it shows you visually what has been recorded, when the next add is due and how long you have to make changes.
So I then would like to refresh the page every three seconds to show the times counting down till the next test is due, 'I have accomplished this with the code below, however there is a memory leak and as you can see i have tried a number of things to try to clear the memory, but no matter what it builds till the page freezes. Can anyone see what the issue is with the memory leak? It happens in FF and IE 8+ havent tested below that, in chrome no memory leak, but the images flash.
Let me say in advance, I know this is too long a question, so I am sorry, but I don't know how to ask it any other way. As I am sure all of you can see I have a limited understanding of writting web code, so I apologize for that too. I'm just trying to understand why the memory builds and builds. Hopefully there is a way to fix it, by changing the code or removing or adding some code.
To Reload script.
function UnloadHandler() {
window.removeEventListener('unload', UnloadHandler, true);
}
window.addEventListener('unload', UnloadHandler, true);
jQuery(window).unload(function () { $(window).unbind('unload'); });
jQuery.ajaxSetup ({
cache: false
});
loc = window.location.pathname; // grabs page url. \\
pathName = loc.substring(49, loc.lastIndexOf('.') + 4); // parses out url except for htm file name. \\
var script = jQuery(document).ready(function() {
var test = setInterval(function(){ // Sets the data refresh cycle at 3 seconds. \\
jQuery.get(pathName, function (response) {
var source = $('<div>' + response + '</div>');
jQuery("#GroupData").empty();
(document.getElementById("GroupData")).innerHTML = "";
jQuery('#GroupData').html(source.find('#GroupData').load());
timing(); UnloadHandler();
eval(script);
});
},3*1000); // 3 equals seconds to refresh the data thriugh Ajax \\
});
The HTML looks like this.
<div id="GroupInfo">
<table style="border:0px; border-style:solid; border-color:#FFFFFF; width:902px; height:20px; border-spacing:0px 1px;border-collapse:seperate; padding:0px; vertical-align:0;">
<tr>
<td style="background-color:#FFFFFF;color:000000;background-image: url(../Images/Blue-20x20-Button.png); background-size:30px 22px;width:26px; height:21px;"><div style="color:#000000; text-align:center; margin-bottom:-2px;font-weight:bold;"></div></td>
<td style="width:2px;"> </td>
<td style="background-color:#FFFFFF;color:000000;background-image: url(../Images/Blue-354x20-Button.png); background-size:365px 22px;width:336px; height:21px;"><div style="color:#000000; text-align:center; margin-bottom:-2px; font-weight:bold;">Process Tanks</div></td>
<!-- <td height='10' width='122' bgcolor="#0000FF" ><p align='center'><a><b>Sample</b></td>-->
<td style="width:14px;"> </td>
<td style="background-color:#FFFFFF;color:000000;background-image: url(../Images/Blue-122x20-ButtonTest.png); background-size:147px 22px;width:135px; height:21px;"><div style="color:#000000; text-align:center; margin-bottom:-2px; font-weight:bold;">Test Status</div></td>
<td style="width:15px;"> </td>
<td style="background-color:#FFFFFF;color:000000;background-image: url(../Images/Blue-122x20-ButtonTest.png); background-size:147px 22px;width:136px; height:21px;"><div style="color:#000000; text-align:center; margin-bottom:-2px; font-weight:bold;">Adds</div></td>
<td style="width:16px;"> </td>
<td style="background-color:#FFFFFF;color:000000;background-image: url(../Images/Blue-122x20-ButtonTest.png); background-size:148px 22px;width:134px; height:21px;"><div style="color:#000000; text-align:center; margin-bottom:-2px; font-weight:bold;">Corrective Action</div></td>
</tr>
</table>
</div>
<div id="GroupData" align="center">
<div id="DrawRows">
<table class="DrawRow">
<tr>
<td class="drawrows"></td>
</tr>
</table>
</div>
<SCRIPT type="text/javascript">[ItemsHTML]</script>
</div>
One more thing where you see <SCRIPT type="text/javascript">[ItemsHTML]</script> I'm not exactly sure how this works, I didn't write I'm just in charge of changing it. the [ItemsHTML] somehow pulls the data out of the DB from the program and displays it as shown below in place of [ItemsHTML] so there is a source file with this code and it creates a webpage called an out file and in the out file instead of;
<SCRIPT type="text/javascript">[ItemsHTML]</script>
it becomes this;
<SCRIPT type="text/javascript">DrawRow ("G54.HTM","0","00 Chem/Etch/Gain Calculations","","","","","","","","","42","42");
DrawRow ("G78.HTM","0","00 pH Indicators & Reagent Make-Up","","","","","","","Y","6/14/2014 10:21 AM","99","99");
DrawRow ("G55.HTM","6","01 Aurolectroless SMT 520 ENIG","6/9/2014 5:00 AM","6/9/2014 5:00 AM","6/15/2014 5:00 AM","6/15/2014 10:30 AM","","","Y","6/14/2014 7:59 AM","82","99");
DrawRow ("G56.HTM","127","02 Circuposit™ 3000-1 Process","6/6/2014 9:00 AM","6/6/2014 9:00 AM","6/13/2014 9:00 AM","6/14/2014 12:30 AM","","","Y","6/14/2014 1:56 AM","61","60");
DrawRow ("G57.HTM","36","03 Circubond™ 2200 Alternative Oxide","6/9/2014 5:00 AM","6/9/2014 5:00 AM","6/14/2014 5:00 AM","6/14/2014 11:01 AM","","","Y","6/15/2014 3:59 AM","12","9");
DrawRow ("G58.HTM","2","04 Cupulse™ Acid Copper","6/9/2014 6:00 AM","6/9/2014 6:00 AM","6/13/2014 6:00 AM","6/14/2014 9:25 PM","","","","","6","6");
DrawRow ("G59.HTM","0","05 Electroposit™ 1000 Acid Copper","","","","","","","","","16","16");
DrawRow ("G60.HTM","0","06 Electroposit™ 1100 Acid Copper","","","","","","","","","8","8");
DrawRow ("G61.HTM","36","07 EnviroStrip™ Tin Strippers","6/9/2014 5:00 AM","6/9/2014 5:00 AM","6/12/2014 11:00 AM","6/14/2014 9:30 PM","","","","","9","9");
This is not a published website it is all done by opening the "out" file and letting it run on a display so employees can see what is going on with the manufacturing process.
Timing function displays an updated time for the page.. showing the last change made. Also it shows current time
function timing(){ // Function for setting time formats for Current and Updated Time \\
var mydate=new Date()
var Time = "Current Time: ";
var Text = "Last Updated: ";
var build = Date.parse('[LastBuild]');
var build2 = dateFormat(build,"dddd m/dd/yy h:MM:ss TT"); // Format for updated time. \\
var build3 = Date.parse(mydate)
var build4 = dateFormat(build3, "dddd m/dd/yy h:MM:ss TT");
document.getElementById('time').innerHTML = Time+" "+ build4; // Sets the current time to chosen format. \\
document.getElementById('time2').innerHTML= Text + " " + build2; // Sets the updated time to format chosen for build2. \\
}
I also have this to refresh the page ever minute. This almost fixes the problem by clearing a lot of the allocated memory built up, but it doesnt release all of it. So if your looking at the memory profiled on a graph it goes up for a minute then dips down, but not all the way down after 30 minutes te memory used has doubled. See below for refresh with no scroll to top.
function refreshPage() { // Sets the page refresh to not scroll in IE \\
var page_y = document.documentElement.scrollTop;
var page_x = document.documentElement.scrollLeft;
window.location.href = window.location.href.split('?')[0] + '?page_y=' + page_y + "&page_x=" + page_x;
}
window.onload = function () {
timing();
UnloadHandler();
setTimeout(refreshPage, 1*60*1000); // Change fist number in equation, the first number represents minutes \\
var match = window.location.href.split('?')[1].split("&");
if (window.location.href.indexOf('page_y') != -1) {
document.documentElement.scrollTop = match[0].split("=")[1];
}
if (window.location.href.indexOf('page_x') != -1) {
document.documentElement.scrollLeft = match[1].split("=")[1];
}
}

We are going to do this by steps :)
Remove the eval(script); (eval must not be used, check stackoverflow discussion : Why is using the JavaScript eval function a bad idea? )
Instead, just call a declared function. Here is your code modified :
var timer = '';
jQuery.ajaxSetup ({
cache: false
});
loc = window.location.pathname;// grabs page url. \\
pathName = loc.substring(49, loc.lastIndexOf('.') + 4); // parses out url except for htm file name. \\
function script(){
timer = setInterval(function(){// Sets the data refresh cycle at 3 seconds. \\
clearInterval(timer);
jQuery.get(pathName, function (response) {
var source = $('<div>' + response + '</div>');
jQuery("#GroupData").empty();
(document.getElementById("GroupData")).innerHTML = "";
jQuery('#GroupData').html(source.find('#GroupData').load());
timing();
$(window).unbind('unload');
script();
});
},3*1000); // 3 equals seconds to refresh the data thriugh Ajax \\
}
jQuery(document).ready(function() {
script();
});
After modifying this, what does the "timing()" function do ? can you past your code ? Maybe the function creates a memory leaks too.

Watch : http://www.w3schools.com/jsref/met_win_clearinterval.asp
I think your Memory leak comes from a clearInterval that you don't use. Every time you use a recursive function with interval, you have to clear previews calls (for avoid memory leak).
Best regards

Countdown timer layout - Keith Wood

I'm trying to use the basic .js countdown timer from Keith Wood but am running into troubles when trying to adjust the layout. Because I cannot inspect the element (every time I inspect it it reloads and vanishes so I can't work out what CSS needs to be adjusted).
I want it to output as : XX days XX hours xx minutes
I tried adding a layout code to the script but it does nothing.
<script type="text/javascript">
$(function () {
var austDay = new Date();
austDay = new Date(austDay.getFullYear() + 1, 1 - 1, 26);
$('#defaultCountdown').countdown({until: austDay});
$('#year').text(austDay.getFullYear());
$('#textLayout').countdown({until: liftoffTime,
layout: '{sn} {sl}, {mn} {ml}, {hn} {hl}, and {dn} {dl}'});
});
</script>
This part in particular apparently should make it output as I want but it doesn't
$('#textLayout').countdown({until: liftoffTime,
layout: '{sn} {sl}, {mn} {ml}, {hn} {hl}, and {dn} {dl}'});
});
Here is the live site: username is admin password is gogogo
http://www.francesca-designed.me/fyp/

What you need is to define "liftoffTime".
Example of missing code:
<script>
var liftoffTime = new Date();
liftoffTime.setDate(liftoffTime.getDate() + 5); /* 5 days countdown */
</script>
*I think in Your case You need to replace "liftoffTime" by "austDay" (since You've defined austDay)

<div id="defaultCountdown" class="hasCountdown">
<span class="countdown_row countdown_show4">
<span class="countdown_section">
<span class="countdown_amount">366</span><br>Days</span>
<span class="countdown_section">
<span class="countdown_amount">6</span><br>Hours</span>
<span class="countdown_section">
<span class="countdown_amount">57</span><br>Minutes</span>
<span class="countdown_section">
<span class="countdown_amount">39</span><br>Seconds</span>
</span>
</div>
There you go!
All you do if you get this problem (and assuming you are using google chrome) is righ-click -> inspect
Then get the parent container and right click -> copy as HTML and then paste into an editor
EDIT
To address your code giving the wrong output (and not the CSS layout part -
layout: '{mn} {ml}, {hn} {hl}, and {dn} {dl}'
just remove the
{sn} {sl}

Categories

Resources