dynamic url with iframe using javascript in WordPress - javascript

The script in the html below works as expected. It loads the latest version of a page by getting today's date info and modifying the iframe src.
But when I put just the script into a WordPress code module for a section of a page, it takes over the whole page. I suspect the problem is the use of document.body.innerHTML, but I don't know what the correct javascript code is.
<html>
<head>
<title>Title</title>
</head>
<body>
<script type="text/javascript">
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1;
var yyyy = today.getFullYear();
var h = h > 12 ? h - 12 + 'PM' : h + 'AM';
if (dd < 10) {
dd = '0' + dd;
}
if (mm < 10) {
mm = '0' + mm;
}
var today = mm + '%2f' + dd + '%2f' + yyyy;
document.body.innerHTML += ' <iframe src="https://www.colorado.gov/airquality/site.aspx?aqsid=080770020&seeddate= ' + today + '" width = "100%" height ="600"> </iframe> ';
</script>
</body>
</html>

document.getElementsByClassName('et_pb_code_inner')[1].innerHTML += ' <iframe src="https://www.colorado.gov/airquality/site.aspx?aqsid=080770020&seeddate= ' + today + '" width = "100%" height ="600"> </iframe> ';

Related

How to output url time string as text instead of video?

I have some code that outputs a time string into a video. I know how to make it output as video or image but I want it to just show up as plain text so I can make a list of live-updating URLs based on the current time.
Currently it is set to "video.r" which adds the time to a "
So that instead of doing:
<video class="r" src="https://mywebsite.com/2019102618URLDATE?=201910261841?New.mp4" type="video/x-flv" width="350"></video>
It would just output as:
https://mywebsite.com/2019102618URLDATE?=201910261841?New.mp4
Here's the code for it.
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="screen.js"></script>
<center><h1> URL List </h1></center>
<video class="r" src="https://mywebsite.com/" type="video/x-flv" type="video/mp4" width="350"></video>
JS
$(function() {
var today = new Date();
var ss = today.getSeconds();
var nn = today.getMinutes() * 60 - 90; //60 second delay
var nm = today.getMinutes();
var hh = today.getUTCHours();
var dd = today.getUTCDate();
var mm = today.getUTCMonth() + 1; //January is 0!
var yyyy = today.getUTCFullYear();
if (dd < 10) {
dd = '0' + dd
}
if (mm < 10) {
mm = '0' + mm
}
if (hh < 10) {
hh = '0' + hh
}
if (nm < 10) {
nm = '0' + nm
}
var minsec = nn + ss + 30
var today = yyyy + '' + mm + '' + dd + '' + hh + 'URLDATE?=' + yyyy + '' + mm + '' + dd + '' + hh + nm + '?New.mp4' ;
$('video.r').each(function() {
var url = $(this).attr('src');
if (url.indexOf("?") >= 0) {
$(this).attr("src", url + today);
} else {
$(this).attr("src", url + today);
}
});
});
So, I understand what you want is having a link, which points to an URL like the one you posted.
If so, then it is pretty simple. You already a function that builds the URL, now instead of using this URL as a video's src attribute, you can use it as a link's href attribute:
Edit: Or, if you just want to list URLs as plain text, simply use the link's innerHTML attribute instead of href in the below solution.
$(function() {
var today = new Date();
var ss = today.getSeconds();
var nn = today.getMinutes() * 60 - 90; //60 second delay
var nm = today.getMinutes();
var hh = today.getUTCHours();
var dd = today.getUTCDate();
var mm = today.getUTCMonth() + 1; //January is 0!
var yyyy = today.getUTCFullYear();
if (dd < 10) {
dd = '0' + dd
}
if (mm < 10) {
mm = '0' + mm
}
if (hh < 10) {
hh = '0' + hh
}
if (nm < 10) {
nm = '0' + nm
}
var minsec = nn + ss + 30
var today = yyyy + '' + mm + '' + dd + '' + hh + 'URLDATE?=' + yyyy + '' + mm + '' + dd + '' + hh + nm + '?New.mp4' ;
$('a.r').each(function() { //here change "video.r" to "a.r"
var url = $(this).attr('href'); //and here "src" becomes "href"
if (url.indexOf("?") >= 0) {
$(this).attr("href", url + today);
} else {
$(this).attr("href", url + today);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="screen.js"></script>
<center><h1> URL List </h1></center>
<a class="r" href="https://mywebsite.com/">Link</a>

Cannot read property 'textContent' of null at renderTime

I'm trying to create a working clock with JavaScript, but the code won't run. I'm getting the following error in my console:
Cannot read property 'textContent' of null at renderTime
This is the HTML:
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-3.2.1.js" charset="utf-8"></script>
<script src="js/alarm.js" charset="utf-8"></script>
<title>Alarm Clock</title>
</head>
<body>
<div id="clockDisplay" class="clockStyle">3 : 15 : 25 AM</div>
</body>
</html>
And this is the JavaScript:
function renderTime() {
var currentTime = new Date();
var diem = "AM";
var h = currentTime.getHours();
var m = currentTime.getMinutes();
var s = currentTime.getSeconds();
if (h == 0) {
h = 12;
} else if (h < 12) {
h = h - 12;
diem = "PM"
}
if (h < 10) {
h = "0" + h;
}
if (m < 10) {
m = "0" + m;
}
if (s < 10) {
s = "0" + s;
}
var myClock = document.getElementById('clockDisplay');
myClock.textContent(h + ":" + m + ":" + s + "" + diem);
setTimeout('renderTime()', 1000)
}
renderTime();
The problem here is that the script is executing before the page is loaded.
You just need to move the js/alarm.js script tag to the end of your body tag, so it executes when the page is fully loaded.
And textContent is a property and not a function so your code will raise an Exception, change the following line:
myClock.textContent ( h + ":" + m + ":" + s + "" + diem);
To:
myClock.textContent = h + ":" + m + ":" + s + "" + diem;
Demo:
I refactored your code and corrected it so it takes in consideration these changes, this is a working snippet:
function renderTime(){
var currentTime = new Date();
var diem = "AM";
var h = currentTime.getHours();
var m = currentTime.getMinutes();
var s = currentTime.getSeconds();
if (h == 0) {
h = 12;
} else if (h < 12) {
h = h-12;
diem = "PM"
}
if (h < 10) {
h = "0" + h;
}
if (m < 10) {
m = "0" + m;
}
if (s < 10) {
s = "0" + s;
}
var myClock = document.getElementById('clockDisplay');
myClock.textContent = h + ":" + m + ":" + s + "" + diem;
setTimeout('renderTime()', 1000)
}
renderTime();
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-3.2.1.js" charset="utf-8"></script>
<title>Alarm Clock</title>
</head>
<body>
<div id="clockDisplay" class="clockStyle">3 : 15 : 25 AM</div>
<script src="js/alarm.js" charset="utf-8"></script>
</body>
</html>
The reason you get this error is the fact that the function is called when the browser parses the script tag. By then the actual HTML body has not been parsed/rendered and the element is indeed not found in the dom.
Try:
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-3.2.1.js" charset="utf-8"></script>
<script src="js/alarm.js" charset="utf-8"></script>
<title>Alarm Clock</title>
</head>
<body onload="renderTime();">
<div id="clockDisplay" class="clockStyle">3 : 15 : 25 AM</div>
</body>
</html>
And remove the function call at then end of your script.

javascript with improper initiation

As my homework I have to prepare an asp webpage for database frontpage. To gain some extra points we can add a javascript. I deceided to add a clock I've found somewhere in script tutorials and modified it a little, but my skills are not enough to place it correctly
I want to place it in my MasterPage, but whole page dissapears only the clock lefts if I add it like this:
<div id="Zawartosc" onload="showTheTime();">
<%-- clock --%>
<script src="Script.js"></script>
</div>
and here is the clock script:
function showTheTime() {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var ampm = "am";
var colon = '<IMG SRC="clock/colon.gif">';
if (hours < 10) hours = "0" + hours;
else hours = hours + '';
if (minutes < 10) minutes = "0" + minutes;
else minutes = minutes + '';
if (seconds < 10) seconds = "0" + seconds;
else seconds = seconds + '';
document.write('<IMG SRC="clock/' + hours.charAt(0) + '.gif">');
document.write('<IMG SRC="clock/' + hours.charAt(1) + '.gif">');
document.write(colon);
document.write('<IMG SRC="clock/' + minutes.charAt(0) + '.gif">');
document.write('<IMG SRC="clock/' + minutes.charAt(1) + '.gif">');
document.write(colon);
document.write('<IMG SRC="clock/' + seconds.charAt(0) + '.gif">');
document.write('<IMG SRC="clock/' + seconds.charAt(1) + '.gif">');
}
setTimeout("showTheTime()", 1000);
showTheTime();
could you please lead or help me to correct code and make the clock appear correctly with my page?
From w3schools.com
The write() method is mostly used for testing: If it is used after an
HTML document is fully loaded, it will delete all existing HTML.
Give this a try:
<div id="Zawartosc" onload="showTheTime();">
<script src="Script.js"></script>
</div>
function createElementImg(source) {
var img = document.createElement('img');
img.src = source;
return img;
}
function showTheTime() {
var clockEle = document.getElementById("Zawartosc");
while (clockEle.hasChildNodes()) {
clockEle.removeChild(clockEle.lastChild);
}
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var ampm = "am";
var colon = "clock/colon.gif";
if (hours < 10) hours = "0" + hours;
else hours = hours + '';
if (minutes < 10) minutes = "0" + minutes;
else minutes = minutes + '';
if (seconds < 10) seconds = "0" + seconds;
else seconds = seconds + '';
clockEle.appendChild(createElementImg("clock/' + hours.charAt(0) + '.gif"));
clockEle.appendChild(createElementImg("clock/' + hours.charAt(1) + '.gif"));
clockEle.appendChild(createElementImg(colon));
clockEle.appendChild(createElementImg("clock/' + minutes.charAt(0) + '.gif"));
clockEle.appendChild(createElementImg("clock/' + minutes.charAt(1) + '.gif"));
clockEle.appendChild(createElementImg(colon));
clockEle.appendChild(createElementImg("clock/' + seconds.charAt(0) + '.gif"));
clockEle.appendChild(createElementImg("clock/' + seconds.charAt(1) + '.gif"));
}
setTimeout("showTheTime()", 1000);
showTheTime();

Data query to timeline chart

I need a help.
I would like to see the last 24 hours in the timeline Chart. This is the formatted datetime DD/MM/YYYY HH:MM:SS.
This is the data source: https://docs.google.com/spreadsheets/d/1H602ZpDfwl044qjDyIDfscOWoaSqLzjsvb3TuZXEK6c/edit#gid=0
I'm getting en error: Uncaught SyntaxError: Unexpected token ILLEGAL
Does anyone have any idea to solve this?
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization',
'version':'1','packages':['timeline']}]}"></script>
<script type="text/javascript">
google.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1H602ZpDfwl044qjDyIDfscOWoaSqLzjsvb3TuZXEK6c/edit#gid=0');
var nowone = getNowDate();
query.setQuery("select A,B,C where B >= datetime '"+nowone+"' ");
query.send(handleQueryResponse);
}
function getNowDate(){
var d=new Date();
d.setDate(d.getDate() - 1);
var year = d.getFullYear();
var month = d.getMonth() + 1;
var day = d.getDate();
var hour = d.getHours();
var minute = d.getMinutes();
var second = d.getSeconds();
var microsecond = d.getDate();
if (month.toString().length == 1) {
month = '0' + month;
}
if (day.toString().length == 1) {
day = '0' + day;
}
if (hour.toString().length == 1) {
hour = '0' + hour;
}
if (minute.toString().length == 1) {
minute = '0' + minute;
}
if (second.toString().length == 1) {
second = '0' + second;
}
//while(microsecond.toString().length < 3) {
// microsecond = '0' + microsecond;
//}
var dateString = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second';
return dateString;
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var options = {
timeline: { singleColor: '#8d8' },
};
var container = document.getElementById('example5.2');
var chart = new google.visualization.Timeline(container);
chart.draw(data, options);
setTimeout(drawChart, 5000);
}
</script>
</head>
<body>
<div id="example5.2" style="height: 500px;"></div>
</body>
</html>
This is purely a JS issue. You have an extra quote in JS that doesn't belong. When you set your time, it should be:
var dateString = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
Instead of
var dateString = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second';
If you remove the extraneous quote, your error will go away.

I have javascript to get new time and date

I have a JavaScript code to get new time. But when i reload the page the time doesn't change instead it says 1/10/2014 10:57, how can i add a function for the time and date to detect and change
Below is the code I tried but its not working.
<script type="text/javascript">
(function () {
// using current UTC time from server as ref, display local time in div id="now"
var now = new Date();
now.setTime(1389322677492);
var nowstr = ""
+ (now.getMonth() + 1) + "/"
+ now.getDate() + "/"
+ ((now.getYear() < 1000) ? now.getYear() + 1900 : now.getYear()) + " "
+ now.getHours() + ":"
+ ((now.getMinutes() < 10) ? '0' + now.getMinutes() : now.getMinutes());
var el = document.getElementById("now");
el.appendChild(document.createTextNode(nowstr));
})();
</script>
Thanks for helping me.
Thats because you are explicitly setting it to 1389322677492 everytime. All you need to do is remove the line:
now.setTime(1389322677492);

Categories

Resources