• home

  • subreddit

  • forum

  • zach's patreon

  • contact z

  • comics

  • More

    Use tab to navigate through the menu items.
    To see this working, head to your live site.
    • Categories
    • All Posts
    • My Posts
    Pudding
    Dec 08, 2021

    Small script to browse to previous/next comic...

    in shareshit

    Hello wonderful people!

    So, something different. I made short Tampermonkey/Greasemonkey script, so you can go to previous/next comic directly when reading - by pressing left/right arrows on the keyboard, or by pressing buttons in top-right corner.


    I hope it's ok to share it.

    How to use it: After installing Tampermonkey or Greasemonkey in your browser, create a new user script and paste this code. Open any Extra Fabulous Comic, and you should have two buttons in top-right corner of the page. You can then navigate to previous/next comic by pressing those buttons, or by keyboard arrows left or right.


    
    // ==UserScript==
    // @name     Extra Fabulous Comics browser
    // @version  1
    // @grant    none
    // @include  https://www.extrafabulouscomics.com/__*
    // @require  http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js
    // ==/UserScript==
    
    function ChangePage( diff ) {
      var url = document.location.href.split('__');
      if( url.length != 2 ) return;
      
      var n = parseInt( url[1] );
      n += diff;
    
      // Change URL
      var newUrl = url[0] + '__' + ('000' + n).substr(-3);
      document.location.href = newUrl;
    }
    
    function OnKeyPressed(e) {
      e = e || window.event;
      switch( e.key ) {
        case 'ArrowLeft': ChangePage( -1 ); break;
        case 'ArrowRight': ChangePage( 1 ); break;
      }
    }
    
    
    function CreateButtons()
    {
      document.addEventListener( 'keydown', OnKeyPressed );
      
      highestZ = 0;   
      $("div").each(function() {
        var _current = parseInt( $(this).css("zIndex"), 10 );
        if( _current > this.highestZ ) {
          this.highestZ = _current + 5;
        }
      });
    
      $('body').append( `
    <div style="position: fixed; z-index:` + (this.highestZ + 500) + `; top: 0px; right: 0px; background: #ecebeb; border: 1px solid #333; border-radius:5px; padding: 8px;">
    		<input type="button" id="btnPrev" class="canHide" value="Prev" style="border-radius: 2px" />
    		<input type="button" id="btnNext" class="canHide" value="Next" style="border-radius: 2px" />
    </div>
    ` );
      
      $('#btnPrev').click( function() {
        ChangePage( -1 );
      } );
      $('#btnNext').click( function() {
        ChangePage( +1 );
      } );
    }
    
    
    window.addEventListener( 'load', CreateButtons, false );
    
    



    1 answer0 replies
    2
    Zach
    Dec 10, 2021

    This is fuckin dope, thanks for sharing! Still working on implementing next/prev buttons on the posts. But this is great

    1 comments