My aim is to have a single web page which changes back and forth between two pieces of code every 60 seconds. I am able to do this with two urls/webpages using content refresh, however, ideally I am trying to include it all in one javascript file.
page1content and page2content indicate where I would want to insert the html code within the array. The HTML code is run within a js filter using Rhapsody Integration engine.
Any thoughts on how I might be able to get html content to switch between the two in a continous loop?
var next = output.append(input[0]);
var html = "";
html = html + "<style>";
html = html + "<span id=\"flicker\"></span>";
html = html + "</style>";
var pageContent = ["page1content", "page2content"];
var count = 0;
function changeContent() {
$("#flicker").text(pageContent[count]);
count < 2 ? count++ : count = 0;
}
setInterval(changeContent, 60000);
XMLData.setText(HTMLBody,'UTF8');
Try the snippet below:
const pageContent = [
` <p>This is from page 1.</p>
<p>This is another paragraph from page 1.</p>`,
` <p>This is from page 2.</p>
<p>This is another paragraph from page 2.</p>`];
let count = 0;
function changeContent() {
$("#flicker").html(pageContent[count]);
count++; count %= 2;
}
setInterval(changeContent, 5000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="flicker"></div>
P.S: Setting the interval to 5 seconds to showcase the functionality more quickly
Related
I'm designing a "note" section for my blogger posts.
The code is supposed to create 3 child divisions inside the "note-container" which, in order, have the class "takeaway", "vertical-bar" and "note-content" and move the text inside the "note-container" into the "note-content".
My code works fine when being run on with the HTML file on my computer, but when being applied on Blogger, no child divisions were appended. This is my code for the child-appending function:
function create_note() {
let note_container = document.querySelectorAll(".note-container");
console.log(note_container);
for (let i = 0; i < note_container.length; ++i){
let note_content = document.createElement("div");
note_content.classList.add("note-content");
note_content.innerText = note_container[i].innerText;
note_container[i].innerText = "";
console.log(note_content.innerText);
let takeaway = document.createElement("div");
takeaway.innerText = "NOTE";
takeaway.classList.add("takeaway");
let vertical_bar = document.createElement("div");
vertical_bar.classList.add("vertical-bar");
note_container[i].appendChild(takeaway);
note_container[i].appendChild(vertical_bar);
note_container[i].appendChild(note_content);
}
}
create_note();
You can activate the code on blogger by putting some text inside a division (in the HTML tab in the post) like this:
<div class = "note-container"> Lorem Ipsum </div>
This is what it is supposed to look like:
When I add console.log(note_container) to the code and applied it to blogger, it didn't return anything, as well.
What I could have done wrong?
If you need the full code this is the link: https://github.com/Haiyahhh/Note
I want to display the loading time of a webpage on site. I can get this working by writing to console.log but writing the information to a page is beyond me.
In my head I have
<!-- Loading Time -->
<script type="text/javascript">
var loadTime = window.performance.timing.domContentLoadedEventEnd- window.performance.timing.navigationStart;
</script>
Then I have this to write to the console log
<script type="text/javascript">
window.onload = function () {
var loadTime = window.performance.timing.domContentLoadedEventEnd-window.performance.timing.navigationStart;
console.log('Page load time is '+ loadTime / 1000);
}
</script>
This works perfectly but I really want to display the loading time on a webpage. How do I achieve this? My page is a simple html / css site.
Three possible methods are:
Just writing to the document directly (should not be used because of the reasons described here):
document.write(loadTime);
Adding an HTML element and setting its inner text to loadTime:
function displayLoadtime(loadtime){
document.getElementById("loading-time").innerText = loadtime;
}
<p id='loading-time'>Loading...</p>
Creating the element in Javascript and displaying the loadTime using it:
function displayLoadingtime(loadtime){
let p = document.createElement("p");
p.innerText = loadtime;
document.getElementById("loading-time-container").appendChild(p);
}
<div id='loading-time-container'></div>
I know what I answered is some beginners' stuff and you probably know it, but I will edit the answer in case you give more details, because I don't see any problems in displaying it if you already have the loadTime.
You can write the time you calculated into an element of the webpage using the innerText property of a Node.
window.onload = function() {
var loadTime = window.performance.timing.domContentLoadedEventEnd - window.performance.timing.navigationStart;
console.log('Page load time is ' + loadTime / 1000);
performanceDisplay = document.getElementById("performance-display") // get a reference to the paragraph
performanceDisplay.innerText = loadTime / 1000 // put the value of the variable loadTime into the paragraph
}
<body>
<p id="performance-display"></p>
</body>
Or, if you do not want to put the paragraph manually into the HTML, you can create it in the JavaScript using document.createElement:
window.onload = function() {
var loadTime = window.performance.timing.domContentLoadedEventEnd - window.performance.timing.navigationStart;
console.log('Page load time is ' + loadTime / 1000);
performanceDisplay = document.createElement("p") // create a new paragraph element
performanceDisplay.innerText = loadTime / 1000 // put the value of the variable loadTime into the paragraph
document.body.appendChild(performanceDisplay) // add the paragraph element to the body of the document
}
Welcome to StackOverflow, Rylad!
You can easily put it into your webpage by referencing an HTML element.
Ie. add an element with the id timeContainer to your page and set its innerHTML to your variable, loadTime. Here's an example:
<body>
<span id="timeContainer">
The load time will be displayed here when the page is finished loading
</span>
<script type="text/javascript">
window.onload = function() {
var loadTime = window.performance.timing.domContentLoadedEventEnd - window.performance.timing.navigationStart;
console.log(loadTime)
document.getElementById("timeContainer").innerText = loadTime;
}
</script>
</body>
Try this,
Simple way to get loading time
<body>
<span id="loadingTime"></span>
<script>
window.addEventListener('load', (e) => {
let timestemp = new Date(e.timeStamp).getTime()
console.log('loading time is', timestemp)
document.getElementById('loadingTime').innerText = "loading time is "+timestemp
})
</script>
</body>
Im trying to replace a news article every 5 minutes. I fetch the articles with pytho(flask) and then I render a template with multiple list of article title, article text, article image.
Now can get the title to switch every 5 minutes but for some reason the text won't change after the interval. It just does nothing. I tried so much, and I just can't figure out what is the problem.
Code:
var text = ["{{artikel_titel[0]}}", "{{artikel_titel[1]}}", "{{artikel_titel[2]}}"];
var counter = 0;
var elem = document.getElementById("titel");
var inst = setInterval(change, 5000);
function change() {
$("#titel").text(text[counter]);
counter++;
if (counter >= text.length) {
counter = 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=newsarticle_container>
<h1 id='titel'>{{artikel_titel}}</h1>
<img id=plaatje src="{{topimage}}">
<div id='tekst'>{{artikel_tekst}}</div>
</div>
So this one works for chaning the titles but as soon I use {{artikel_tekst[0]}} it just doesn't work. It looks like the text is too big to be updated. I also tried with elem.innnerHTML. (I haven't tried to replace the image yet).
Hopefully someone can help me out updating the article. I'm so confused why it's not working. If any questions,feel free to ask!
I have a gallery page that is updated often with new images. I use simple HTML to post the photos. My process currently is copy and paste the set of tags for a photo and change the number to correspond with the image file name. E.G. I change the number 047 to 048. Copy-Paste, change it to 049. This goes on until I have reached the number of additional photos. As you can see, this is very inefficient and there must be a better way of doing this. I was wondering if there is a simpler way to achieve this with Javascript? Perhaps generate additional tags by inputing a certain number or range?
Any ideas that would make this process efficient are welcomed please! Thank you!
<div class="cbp-item trim">
<a href="../assets/images/trim/img-trim-047.jpg" class="cbp-caption cbp-lightbox" data-title="">
<div class="cbp-caption-defaultWrap">
<img src="../assets/images/trim/img-trim-047.jpg" alt="">
</div>
</a>
</div>
You could use a templating solution. There are several libraries for that, but you can also implement it yourself.
Here is one way to do that:
Put the HTML for one image in a script tag that has a non-standard language property so the browser will just ignore it
Put some keywords in there that you'll want to replace, e.g. {url}. You can invent your own syntax.
Read that template into a variable
In the JS code, put all the images' URLs in an array of strings
For each element in that array, replace the keywords in the template string with that particular URL, and concatenate all these resulting HTML snippets.
Inject the resulting HTML into the appropriate place in the document.
Here is a snippet doing that:
// Add new images here:
var images = [
"https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/330px-SNice.svg.png",
"https://nettemarie357.files.wordpress.com/2014/09/smiley-face.jpg?w=74&h=74",
];
// Load the template HTML
var template = document.querySelector('script[language="text/template"]').innerHTML;
// Use template to insert all the images:
container.innerHTML = images.map(url => template.replace(/{url}/g, url)).join('');
img { max-width: 50px }
<div id="container"></div>
<script language="text/template">
<div class="cbp-item trim">
<a href="{url}" class="cbp-caption cbp-lightbox" data-title="">
<div class="cbp-caption-defaultWrap">
<img src="{url}" alt="">
</div>
</a>
</div>
</script>
This would help you creating it programatically:
var new_row = document.createElement('div');
new_row.className = "cbp-item trim";
var a = document.createElement('a');
a.href = "../assets/images/trim/img-trim-047.jpg";
a.className= "cbp-caption cbp-lightbox";
document.body.appendChild(a);
var div = document.createElement('div');
div.className = "cbp-caption-defaultWrap";
var img = document.createElement('img');
img.src= "../assets/images/trim/img-trim-047.jpg";
div.appendChild(img);
a.appendChild(div);
new_row.appendChild(a);
If it is just about printing HTML, I suggest you to use plugins like Emmet for Sublime Text editor.
When you install this plugin and see how it works, you can simple create a complex html in a way that 'for' loop would do this. This will help you to change only the image/link number of every item.
Check the demo in the link, that I added.
Here's an example in Java Script that will generate the html you will need. Set the total to whatever number you need to generate the number of images you want.
var total = 47;
var hook = document.getElementById('hook');
// Main Node for SlideShow
var node = document.createElement('div');
node.classList = "cbp-item trim";
// Work out the correct number
var n = function(int) {
var length = int.toString().length;
return length === 1
? '00' + int
: length === 2
? '0' + int
: length
}
// Create the item
var createItem = function(int){
// Create Anchor
var a = document.createElement('a');
a.href = '../assets/images/trim/img-trim-' + ( n(int) ) + '.jpg" class="cbp-caption cbp-lightbox';
a.classList = 'cbp-caption cbp-lightbox';
// Create Div
var div = document.createElement('div');
div.classList = 'cbp-caption-defaultWrap';
// Create Image
var img = document.createElement('img');
img.src = '../assets/images/trim/img-trim-' + ( n(int) ) + '.jpg';
img.alt = 'gallery image';
// Finalise Dom Node
var container = div.appendChild(img)
a.appendChild(div);
// Return Final Item
return a
}
// Create Items
for (var i = 1; i < total + 1; i++) {
node.appendChild(createItem(i));
}
// Append Main Node to Hook
hook.appendChild(node);
<div id="hook"></div>
I m trying to add page number in footer this is my code
var pdfInfo = {};
var x = document.location.search.substring(1).split('&');
for (var i in x)
{
var z = x[i].split('=',2);
pdfInfo[z[0]] = unescape(z[1]);
}
function getPdfInfo() {
var page = pdfInfo.page || 1;
var pageCount = pdfInfo.topage || 1;
document.getElementById('page').innerText = page;
document.getElementById('topage').innerText = pageCount;
}
i m calling this js function on body load
<body onload="getPdfInfo()">
<div style="text-align:right; font-family: tahoma !important; font-size: 12px !important;">
Page
<span id="page" class="page"></span>
of
<span id="topage" class="topage"></span>
</div>
</body>
but some time footer show and some time not show and some time footer show on first page and not show on second page
You wrap your getPdfInfo code in a method that is called on page load, but not the code above it. Is there a reason it all can't be wrapped in that method? Then you can be sure that your pdfInfo object is populated all the time.
One thing you can do to debug this issue is to ensure that your pdfInfo object is properly set at the time the document is loaded by inserting a console.log(pdfInfo) statement at the very top of your method.