I have a userscript (for Chrome) that I am using to format duolingo's practice pages for me. It just applies a single line of css with
jQ(document).ready(function(){
jQ('#start-button').css({"float": "left", "margin-right": "10em"});
});
And this works just fine the first time I come to the page. But they use Ajax to avoid page reloads. And the url does change, so if I detect that, I can refresh the css change and not lose the formatting with this site navigation pattern.
Anyone happen to know a good way to detect it?
edit: full user script implementing the popular solution several pointed out at first (which is not working):
// ==UserScript==
// @name duolingo
// @namespace http://your.homepage/
// @version 0.1
// @description reformat /skills to not start timed practice by default
// @author You
// @include /^https?\:\/\/www\.duolingo\.com\/(skill|practice)?\/?.*/
// @require https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js
// @grant none
// ==/UserScript==
window.jQ=jQuery.noConflict(true);
jQ(document).ready(function(){
style_duolingo();
});
jQ(window).bind('hashchange', function() {
style_duolingo();
});
jQ(document).ajaxComplete(function() {
style_duolingo();
});
function style_duolingo() {
jQ('#start-button').css({"float": "left", "margin-right": "10em"});
console.log("Tampermonkey script: wrote css change");
}
edit #2:
Please provide a working solution that does not load external libraries (I'd like to know what I am missing, not keep it in a black box), and solves the issue using events (no interval-based solution). If events (bizarrely) cannot be used, please provide the correction solution and the reason why events are not being triggered.
You can use the popstate method to detect those URL changes and make UI changes as needed. window. addEventListener('popstate', function (event) { // The URL changed... });
AJAX is a technique for creating fast and dynamic web pages. AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.
jQuery $.post() Method The $.post() method requests data from the server using an HTTP POST request. Syntax: $.post(URL,data,callback); The required URL parameter specifies the URL you wish to request.
You can't call 2 url simultaneously. but you can call one after another. You can't put two URLs in an ajax call.
To change the url Duolingo uses history.pushstate. I recommend you galambalazs answer to similar question
This is his code:
(function(history){
var pushState = history.pushState;
history.pushState = function(state) {
if (typeof history.onpushstate == "function") {
history.onpushstate({state: state});
}
//Custom code here
style_duolingo();
return pushState.apply(history, arguments);
}
})(window.history);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With