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

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...).

Related

How to update href links in all the html pages?

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.

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>

Ad unit detection count | Javascript

I'm creating a script where I want to check how many ad slots there are on a page. The way these slots are presented are like so:
//Adslot 1 declaration
gptadslots[1]= googletag.defineSlot('/150185454/Express/Home', [[1,1],[728,90],[900,250],[970,250],[970,90]],'div-gpt-ad-783061624906669251-1').setTargeting('pos',['top']).setTargeting('gwd', [ASPQ_adlwo6]).addService(googletag.pubads());
There are 5 instances of this on my static page so here is my logic around this.
The only consistent variable I can see is the following number as part of defineSlot which is "/150185454/". This is only defined within the <head> tag.
Here is my code so far which only covers the detection if there is an ad slot on the page:
var adUnit = '/150185454/',
headContent = document.getElementsByTagName('head')[0].innerHTML;
if (headContent.indexOf(adUnit) >= 0) {
console.log("UNIT IS ON THE PAGE");
}
Expectation:
If "/150185454/" is within the head then get the rest of the URL which would look like this: '/150185454/Express/Home'. The "Express/Home" is a page path within the site - we want to know which page this ad slot was presented on.
Then take only the page path name ('Express/Home') and append to a tracking URL.
I'm having trouble getting the rest of the URL after "/150185454/". I'm unsure how to achieve this as well as stripping the number to then append to the tracking URL which is posted.
I hope this is clear enough, please ask if more direction is needed.

Trouble calling function after Infinite Scroll runs

I am using the Infinite Scroll plugin, for Wordpress, to load new posts on to the page when users scroll to the bottom. The problem is this has been loading duplicate posts, as the sorting changes extremely fast (due to popularity) and posts end up on different pages.
When the plugin grabs the next page, sometimes products that were originally on the FIRST page have been sorted to the SECOND page. So I end up with duplicates.
I was planning on waiting for the script to load the next page content, then loop through all of the post titles and locate the duplicates. Then I would remove the second instance of each post.
I noticed Infinite Scroll has a window in the settings labeled "Run after content is loaded/callback" so I thought I could enter a function in that field to be called.
removeDuplicates();
Then I entered something like this in the footer:
function removeDuplicates(){
var titleList = [];
$('.title').each(function(i, obj) {
/* The titles are in <h1> tags, I cycle through them,
if it's the first time seeing the title I add it to titleList.
If it's already in the array I hide the parent. */
});
});
I keep getting "undefined function" related to the .each, and it seems like it has something to do with scope but I'm not sure what's happening.
Is there an easier way to trigger the function to remove the duplicates? Am I at least on the right track?
Thanks for any insight you can provide!
It seems like jquery isn't loaded. Even if you use a selector that returns no elements, it should still have the .each() method.
Try using vanillaJS instead of jquery.
var titleNodeList = document.querySelectorAll('.title'); // get elements
var titleElArray = Array.prototype.slice(titleNodeList); // convert to array
titleElArray.forEach(function(el){...}); // iterate

Injecting javascript code into an on click event with javascript and casper.js

I've just started using casperjs after trying to use python (selenium / requests and mechanise) to scrape a page only after some javascript loaded some dynamic content on the page.
Since this was very hard to do or very slow with selenium it was suggested I turn to Casper js (which requires phantomjs).
One thing I am wondering (I am quite new to javascript) is relating to a javascript onclick event.
The page I want to scrape by default shows ten names per page, and at the bottom has options to show (5) or show (100).
After diving into this code and inspecting it with firebug I am wondering if it is possible to change the onclick=loaditems(100) to something like... onclick=loaditems(Load X items), where X could be 200. (or whatever number it needs to be to load all the content on one page and make it easier for scraping. Is this possible?
update
* reviewer asked for the code used to select the 100 items per page....
The code (HTML) is..
<a title="Show 100 items per page"
onclick="lconn.profiles.Friending.setItemsPerPage(this,100)" href="javascript:void(0);">100</a>
and the Xpath is...
/html/body/div/div[2]/div[3]/div[3]/span/div/div/div/div/div[2]/div/div/form/div??/div[4]/div/ul/li[4]/a
problem
I am able to edit the onclick command and change the value to a higher number, however I do not know how to then execute it with the higher number of elements I want to display per page to see if it works.
I used a simple CSS selector for this task. You can change the onclick attribute with string operations. In this case I replace "100" with num. I also added a clickIt argument to click the changed link.
casper.changeItemsPerPageLink = function(num, clickIt){
casper.evaluate(function(num, clickIt){
num = ""+num;
var a = document.querySelector('a[title="Show 100 items per page"]');
a.innerHTML = num;
a.title = a.title.replace("100", num);
a.setAttribute("onclick", a.getAttribute("onclick").replace("100", num));
if (clickIt) {
a.click();
}
}, num, clickIt);
};
See my test code gist.

Categories