How to update href links in all the html pages? - javascript

To explain, I have a blog website, It contains an Index page, which lists out the blogs to read, if I click on a blog it takes me to that blog page. The index page also has a Recent post tab in the navbar to take me to the recent blog.
Now, I have around 20 blogs which are stored in different html pages which also having the recent post tab in the navbar.
Now, how do I update the 'href' of Recent post on all the 20 blog html pages to the recent blog. It takes time manually to update and save them in all the 20 html documents.
I know this question isn't related to html specific thing, rather code management I suppose. All the help would be appreciated.
Thank you in advance.

Probably the best solution would be to pick some static site generator to learn.
If you want to do it with javascript, one solutions would be to create a single javascript file which generates links and then include that on every page.
most-recent-posts.js:
(function () {
var recentPosts = [
{
title: 'post title',
href: '/posts/title.html',
}
];
var containerElement = document.getElementById('most-recent-posts');
containerElement.innerHTML = recentPosts
.map(function (post) {
return '<li>'+post.title+'</li>'
})
.join('');
})();
And then adding something like this to all pages where you want to show the list:
<ul id="most-recent-posts"></ul>
<script src="most-recent-posts.js"></script>

What if you use a conditional statement. Something similar to if this HTML tag exists, let it be replaced by the newer HTML tag. Then just make sure that the script is running on all pages.

Related

How to not restrict a javascript action to the page load?

I'm sorry, I'm totally clueless in javascript, and try to understand the bit of codes I get the best I can...
I'm working on a forum which is hosted on an online server, which makes I can't touch the html (I just have access to the header and the footer). And on this forum, there is a tagcloud in which tags are sorted by popularity order: I want to sort them with my own order (sorted years, country by alphabetical order, etc.).
For that, I created a "sorted tag cloud" in the footer (.TagCloud-order) in which I sorted the tags manually, and I asked with javascript to replace the current unsorted tagcloud (.TagCloud) with my own sorted tag-cloud:
$(document).ready(function() {
if(window.location.href === "https://forum.cinestudia.fr/") {
$('.TagsPage-content .TagCloud').replaceWith($('.TagCloud-order').html());
} else {
}
});
It works on page load, but then if I go to another page of the forum (like "Toutes les discussions") and that I come back to the main page containing the tag-cloud ("Etiquettes", the page matching the url in my javascript code), the original unsorted tag-cloud is back. You can see the result here: https://forum.cinestudia.fr/
The problem, basically, is that $(document).ready(function() works only when the page launches, but after that it doesn't anymore.
What kind of function can I use for this action being true each time the reader is back on this main url?
(i know a solution would be to put a short timer to change the tag-cloud every 0.1 seconds or less, but it seems really heavy for the browsers...).

How to obtain URL from a rel=canonical tag using Javascript

I'm using Disqus comments system and I'm trying to use the feature of adding comment count links.
The code that I can use is below:
<span class="disqus-comment-count" data-disqus-url="http://example.com/article1.html">Comments</span>
And this is where I have some issue. The thing is I have several hundreds of pages so editing the data-disqus-url value for each and every html pages will take a very long time and not feasible. Is there maybe some Javascript code that will dynamically input the data-disqus-url value with my canonical url?
I can't use php code since I'm using html files but I have SSI enabled since I need to use includes for easy template management. Also, all my html pages already have a unique meta tag for rel="canonical". I just need perhaps some Javascript codes that will fill-up the data-disqus-url value with the value indicated in my canonical url tag. Is that possible?
UPDATE
So I have exactly this code:
const commentCount = document.querySelectorAll('.disqus-comment-count');
commentCount.forEach(item => {
item.setAttribute('data-disqus-url', (document.querySelector('[rel=canonical]').getAttribute('href'));
})
<p><span class="disqus-comment-count" data-disqus-url="">Comments</span></p>
But it doesn't work. Maybe I did it wrong. sorry, I don't understand much about Javascript codes. I'll appreciate it if you can provide complete code.
you can use setAttribute to update the value with your Url.
const commentCount = document.querySelectorAll('.disqus-comment-count');
commentCount.forEach(item => {
item.setAttribute('data-disqus-url', 'https://google.com');
})
<span class="disqus-comment-count" data-disqus-url="http://example.com/article1.html">Comments</span>

How to use a random HTML file in JavaScript?

I'm having problems trying to figure this out, specifically because I'm really new to javascript. So, I have this place in my page where I want to have a random html file that I will make in html and I will like to link to it. I want it to be randomized every time the page refreshes, because I will do lots of these html files.
So, is this possible? I've searched for answers but all of the randomized html questions I've found are about the whole page. I just want a little part of the page to be randomized, similar to the random image I have in the same webpage.
The page I'm using for testing is this one: http://vannapruebas.jcink.net/ , I would like to use the toggle that says "búsquedas" for this. So, any help? thanks and exuse my poor english!
All you have to do is make a list of all your html, then you pick one randomly with -> Getting a random value from a JavaScript array.
I used jQuery just for easier demo
var listOfHTML = ["sample/your.html","sample/another.html"];
$('#magic').on('click',function(e){
var randomHTML = listOfHTML[Math.floor(Math.random()*listOfHTML.length)];
$.get(randomHTML,function(response){
$('#yourDiv').html(response);
//do your animation when completed
});
});
<div id="yourDiv"></div> <button id="magic">búsquedas</button>

Appending more views to a webview after scrolling down

I have some items, let's say 50, which are in HTML format. When the application starts I'm showing the first 10 items in a webview. After the user scrolls down to the 10th item I want to load the next 10 items.
Can anybody suggest me how to do achieve this. I've searched for this and found this link however it didn't work for me. Any help would be appreciated.
This is more look like facebook feed loading.But like in facebook we can use endless apdapter.But here the problem is i want to load items in a webview.Please give me some idea,how to do it.
After Struggling and searching a lot I got this answer please check.
So it will append the new document in the Html part with id question with the new Data
function appendText(extraStr) {
document.getElementById('question').innerHTML = document.getElementById('question').innerHTML + extraStr;
}

Specifying the HTML page that a jQuery selector refers to?

I'm trying to write jQuery code to count the number of <img> elements contained on a site. The site is comprised of 4 separate HTML pages, all in the same folder on the server. Only one of these pages, "pics.html", loads the .js file that needs to perform this function (pics.html is the only page that needs to know how many images are on the site).
It's easy to get the <img> elements from pics.html, since pics.html is the page that loads the script:
var numImgs = $('img').length;
...but I'm confused as to how I would perform this same function in reference to a different page. Is it possible to specify the HTML page that the selector refers to?
I tried this, as a wild guess:
var numImgs = $('test.html:img').length;
Unsurprisingly, it didn't work. I googled for the answer, but couldn't find a solution - or if I did find one, I suppose I didn't understand it well enough to realize that it was the answer.
Thanks for any help you can offer!
To select an object from an external file, you'll need to use $.load().
Reference: http://api.jquery.com/load/
Try this
$(document).ready(function(){
$('#myDiv').load('/remotePage.html #TargetDiv', function () {
var elements = $('.class', this).length;
alert(elements);
});
});

Categories