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.
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);
Use it like this:
jQ(document).ready(function(){
jQ(window).bind('hashchange', function() {
jQ('#start-button').css({"float": "left", "margin-right": "10em"});
});
});
Since you're only adjusting styling, you're better off using Stylish Chrome extension that allows you to tamper with css. You would then add
@-moz-document domain("www.duolingo.com") {
#start-button {
float: left;
margin-right: 10em;
}
}
Note @-moz-document follows userstyles convention and is importable into Chrome. There's actually a few published userstyles for duolingo already :)