JS: Auto-jump to comic page for fast-reading

Working on a new template and need help? Come here for support.

Moderator: Help Desk Team

Re: JS: Auto-jump to comic page for fast-reading

Postby eishiya » January 6th, 2018, 1:50 pm

Some potentially dumb questions, just to make sure we're on the same page:
- The comic you're testing is http://oneiroi.smackjeeves.com/comics/ right?
- Are you on a desktop/laptop, or on a mobile device?
- You and your friends are not using the SJ mobile reader? There shouldn't even be a header to skip past if you/they are.
- On the SJ front page, are you able to go between different Spotlight cards (the big images near the top, showcasing different comics)? If yes, that means JavaScript is working. If no, that means JS isn't working.
Image
User avatar
eishiya
 
Posts: 9393
Joined: December 5th, 2009, 11:17 am

Re: JS: Auto-jump to comic page for fast-reading

Postby chifayee » January 6th, 2018, 3:38 pm

eishiya wrote:Some potentially dumb questions, just to make sure we're on the same page:
- The comic you're testing is http://oneiroi.smackjeeves.com/comics/ right?
- Are you on a desktop/laptop, or on a mobile device?
- You and your friends are not using the SJ mobile reader? There shouldn't even be a header to skip past if you/they are.
- On the SJ front page, are you able to go between different Spotlight cards (the big images near the top, showcasing different comics)? If yes, that means JavaScript is working. If no, that means JS isn't working.


Yes, it's oneiroi.smackjeeves.com
On desktop!
So, nope not on SJ mobile.
And yes, i can go between the spotlight cards.
User avatar
chifayee
 
Posts: 10
Joined: December 9th, 2013, 2:47 pm

Re: JS: Auto-jump to comic page for fast-reading

Postby eishiya » January 6th, 2018, 4:51 pm

How odd. It should work o:!

Try hard-refreshing (Ctrl+F5 on Windows/Linux, probably Cmd+F5 on Mac) just in case, maybe you're seeing a cached version of the page without the JavaScript code on it.
If that still doesn't work, could you please copy+paste the source of the code from the browser (Right-click on the page -> View Source Code or something similar) into a forum post here, preferably within [code] BBCode? (Select the copy+pasted code, and click the "Code" button just above where you type your forum posts). I'd like to see what code your browser is seeing.
You can also try enabling your browser's console (F12 in Firefox and probably other browsers) and clicking around to see if there are any errors generated by the JavaScript code that are preventing it from working.
Image
User avatar
eishiya
 
Posts: 9393
Joined: December 5th, 2009, 11:17 am

Re: JS: Auto-jump to comic page for fast-reading

Postby chifayee » January 7th, 2018, 5:12 am

Tried hard-refreshing, not working.


Here's the source code:


Code: Select all
<!--
    TEMP:   sleepless
    AUTH:   whistleonwild
    PAGE:   overall

    REVISION HISTORY
    09AUG2011   Implemented comic rating js
    06AUG2011   Reformatted.
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>O N E I R O I</title>
        <style type="text/css">
            body {
                background: #FFFFFF;
                font-size: 62.5%;
                font-family: verdana, helvetica, arial, sans-serif;
                color: #646464;
                margin: 25px;
                text-align: center;
            }

            a {
                color: #689B56;
                text-decoration: none;
            }

            a:hover {
                color: #93AE89;
            }

            a img {
                border: 0px;
            }

            #wrap {
                margin: 0 auto;
                width: 1000px;
            }

            #header {
                margin: 0px;
                padding: 0px;
            }

            h1, h2, h3, h4 {
                line-height: normal;
                padding: 0px;
                margin: 0px;
                font-weight: normal;
                font-family: century gothic, helvetica, arial, verdana, sans-serif;
            }

            h1 {
                font-size: 3em;
                color: #A4A4A4;
            }

            h1 a {
                display: block;
                color: #A4A4A4;
            }

            h1 a:hover {
                color: #858585;
            }


            h2 {
                font-size: 3em;
                text-transform: lowercase;
            }

            #navigation {
                margin: -10px 0px 10px 0px;
                text-transform: lowercase;
            }

            #navlinks, .comiclinks, .months {
                list-style-type: none;
                padding: 0px;
                margin: 0px;
            }

            #navlinks li, .comiclinks li {
                display: inline;
                padding: 21px;
            }

            #navlinks a, .comiclinks a {
                color: #C8C8C8;
                font-size: 4em;
                font-family: century gothic, helvetica, arial, verdana, sans-serif;
            }

            #navlinks a:hover, .comiclinks a:hover {
                color: #646464;
            }

            .box {
                background: #FCFCFC;
                border: 1px solid #D7D7D7;
                padding: 0px 10px 0px 10px;
                text-align: left;
                margin-top: 5px;
            }

            #comicheader {
                width: 800px;
                text-align: left;
                color: #646464;
                margin-top: 10px;
                margin-bottom: 50px;
            }

            h3 {
                font-size: 1.5em;
            /*    line-height: 50%;*/
                color: #C8C8C8;
            }

            .comicnavigation {
                clear: both;
            }

            .comiclinks li a {
                font-size: 3em;
            }

            #comic {
            border: 1px solid #D7D7D7;
            }

            #comic-commentwrap {
                width: 800px !important;
                margin-top: 20px;
            }

            h4 {
                font-size: 2.5em;
                margin-bottom: 10px;
            }

            .comic-commentboxwrap {
                width: 226px;
                height: 226px;
                background: #FCFCFC;
                margin: 2px;
                margin-top: 10px;
                padding: 0 15px;
                border: 1px solid #D7D7D7;
                float: left;
            }

            .comic-commentboxcontent {
                width: 226px;
                height: 197px;
                overflow: auto;
                text-align: left;
                padding: 2px;
                margin: 2px;
            }

            .comic-commentboxheader {
                font-size: 2em;
                height: 20px;
            }

            .avatar {
                float: left;
                margin: 2px 5px 2px 0px;
            }

            #footer {
                padding-top: 20px;
                clear: both;
            }

    </style>

    <script language="JavaScript">
        var dir = "";
        var pic_unselected = "http://i201.photobucket.com/albums/aa110/terryangel94/Logo.png";
        var pic_selected = "http://i201.photobucket.com/albums/aa110/terryangel94/Logo.png";

        var default_rating = 0;

        function build_vote() {
            document.write('<h3>rate page: ');
            for (n = 1; n<= 5; n++) {
                if (n <= default_rating) {
                    default_pic = pic_selected;
                }
                else {
                    default_pic = pic_unselected;
                }

                document.write('<a href="#" onClick="vote(' + n + '); return false;" onMouseOver="rateover(' + n + ');" onMouseOut="rateover(default_rating);"><img src="' + dir + default_pic + '" name="star_' + n + '" style="border:0px;" /></a>');
            }
            document.write('</h3>');
            document.write('');
        }

        function rateover(star_num) {
            for (n = 1; n <= 5; n++) {
                if (n <= star_num) {
                    da_code = 'document.star_' + n + '.src="' + dir + pic_selected + '"';
                }
                else {
                    da_code = 'document.star_' + n + '.src="' + dir + pic_unselected + '"';
                }

                eval(da_code);
            }
        }

        function vote(rating) {
            var new_window = window.open("/ratecomic.php?cid=2551093&rating=" + rating, "sj_ratecomic", "height=300, width=400");
            new_window.focus();
        }

    </script>
</head>

<body>

    <div id="wrap">
        <div id="header"><img src="http://i201.photobucket.com/albums/aa110/terryangel94/teaser%202.png">

        </div>

        <!--
    TEMP:   sleepless
    AUTH:   whistleonwild
    PAGE:   menu

    REVISION HISTORY
    06AUG2011   Reformatted.
-->

<div id="navigation">
    <ul id="navlinks">
           <li><a href="/" title="Home">Home</a></li>
           <li><a href="/comics/2551105/1-0/" title="First Comic">First Comic</a></li>
           <li><a href="/comics/" title="Latest Comic">Latest Comic</a></li>
           <li><a href="/archive/" title="Archive">Archive</a></li>
            <li><a href="http://www.smackjeeves.com/favorites.php?add=171345">favorite</a></li>
    </ul>
</div>



      <!-- hitwebcounter Code START -->
<a href="https://www.patreon.com/chifayee" target="_blank">
<img src="http://hitwebcounter.com/counter/counter.php?page=6811926&style=0007&nbdigits=5&type=page&initCount=0" title="" Alt=""   border="0" >
</a>                                        <br/>




        <!--
    TEMP:   sleepless
    AUTH:   whistleonwild
    PAGE:   comic

    REVISION HISTORY
    09AUG2011   Implemented comic rating
    06AUG2011   Reformatted.
-->

<div id="comicheader">
    <div id="comicpagenumber">

<a name="cpage"></a>

 <h2>1-3</h2>

    </div>

    <h3>December 31st, 2017, 8:50 pm</h3>

</div>

<div class="comicnavigation">
    <ul class="comiclinks">

<p>
<form name="jumpbox" method="GET">
      <input type="hidden" name="url" value="oneiroi">
      <input type="hidden" name="page" value="comic">
      <select name="url" onchange="if(this.options[this.selectedIndex].value != -1){ window.location = this.options[this.selectedIndex].value; }">
         <option value="-1">------ Jump To ------</option>
         <option value="/comics/2551105/1-0/">#1 - 1-0</option>
         <option value="/comics/2551091/1-1/">#2 - 1-1</option>
         <option value="/comics/2551092/1-2/">#3 - 1-2</option>
         <option value="/comics/2551093/1-3/">#4 - 1-3</option>
         <option value="/comics/2551094/1-4/">#5 - 1-4</option>
         <option value="/comics/2551095/1-5/">#6 - 1-5</option>
         <option value="/comics/2551127/1-6/">#7 - 1-6</option>
         <option value="/comics/2551096/1-7/">#8 - 1-7</option>
         <option value="/comics/2551097/1-8/">#9 - 1-8</option>
         <option value="/comics/2551106/1-9/">#10 - 1-9</option>
         <option value="/comics/2551098/1-10/">#11 - 1-10</option>
         <option value="/comics/2551099/1-11/">#12 - 1-11</option>
         <option value="/comics/2551100/1-12/">#13 - 1-12</option>
         <option value="/comics/2551101/1-13/">#14 - 1-13</option>
         <option value="/comics/2551102/1-14/">#15 - 1-14</option>
         <option value="/comics/2551113/1-15/">#16 - 1-15</option>
         <option value="/comics/2553388/1-last/">#17 - 1_last</option>
      </select>
   </form>

        <li><a href="http://oneiroi.smackjeeves.com/comics/2551105/1-0/" title="first">start</a></li>
       <li><a href="http://oneiroi.smackjeeves.com/comics/2551092/1-2/" title="previous">←</a></li>

      <li><a href="http://oneiroi.smackjeeves.com/comics/2551094/1-4/" title="next">→</a></li>
     <li><a href="http://oneiroi.smackjeeves.com/comics/2553388/1-last/" title="last">end</a></li>
    </ul>
</div>


   
                     <style>
                        #comic_area, #comic_area_inner
                        {
                           display: inline-block;
                           margin: 0 auto;
                           position: relative;
                           text-align: left;
                        }
                        #comic_area_overlay {
                           position: absolute;
                           top: 0; right: 0; bottom: 0; left: 0;
                           opacity: 0;
                           transition: opacity 80ms;
                           pointer-events: none;
                        }
                        #comic_area_overlay > * {
                           pointer-events: all;
                        }
                        #comic_area_inner:hover #comic_area_overlay {
                           opacity: 1;
                        }
                     </style>
                     <!--[if lt IE 8]>
                     <style>
                        #comic_area{display:inline;}
                     </style>
                     <![endif]-->
                     <link rel="image_src" href="//www.smackjeeves.com/thumbnail.php?id=2551093" />
                     <div id="comic_area">
                     
                        <div id="comic_area_inner"><a href="http://oneiroi.smackjeeves.com/comics/2551094/1-4/"><img src="http://img3.smackjeeves.com/images/uploaded/comics/j/4/y/j4yl6sye3PkQj.png" height="1703" width="1200" id="comic_image" style="padding: 0"  /></a><div id="comic_area_overlay">
                        
                        <span id="jsbookmark_container" style="position: absolute; bottom: 7px; right: 7px;">
                        
                           
            <script type="text/javascript">
               if (!window.jsbookmark_pageUrl) { jsbookmark_pageUrl = "http://oneiroi.smackjeeves.com/comics/2551093/1-3/"; }
               jsbookmark_userData = {"siteId":171345,"curId":2551093,"savedUrl":false};
               jsbookmark_pUrl = "http:\/\/oneiroi.smackjeeves.com\/comics\/2551092\/1-2\/";
            </script>
            <script type="text/javascript" src="//www.smackjeeves.com/templates/default/jsbookmark2.js?v=3"></script>
         
                           
                        </span></div><!-- overlay -->
                        </div></div><!-- area, inner -->

<script type="text/javascript">
if (document.referrer.search("http://oneiroi.smackjeeves.com/comics/2551092/1-2/") > -1)
location.href="#cpage";
</script>
<script type="text/javascript">
if (document.referrer.search("http://oneiroi.smackjeeves.com/comics/2551094/1-4/") > -1)
location.href="#cpage";
</script>



<div class="comicnavigation">
    <ul class="comiclinks">
        <li><a href="http://oneiroi.smackjeeves.com/comics/2551105/1-0/" title="first">first</a></li>
        <li><a href="http://oneiroi.smackjeeves.com/comics/2551092/1-2/" title="previous">←</a></li>

        <li><a href="http://oneiroi.smackjeeves.com/comics/2551094/1-4/" title="next">→</a></li>
        <li><a href="http://oneiroi.smackjeeves.com/comics/2553388/1-last/" title="last">end</a></li>
    </ul>
</div>

<form name="jumpbox" method="GET">
      <input type="hidden" name="url" value="oneiroi">
      <input type="hidden" name="page" value="comic">
      <select name="url" onchange="if(this.options[this.selectedIndex].value != -1){ window.location = this.options[this.selectedIndex].value; }">
         <option value="-1">------ Jump To ------</option>
         <option value="/comics/2551105/1-0/">#1 - 1-0</option>
         <option value="/comics/2551091/1-1/">#2 - 1-1</option>
         <option value="/comics/2551092/1-2/">#3 - 1-2</option>
         <option value="/comics/2551093/1-3/">#4 - 1-3</option>
         <option value="/comics/2551094/1-4/">#5 - 1-4</option>
         <option value="/comics/2551095/1-5/">#6 - 1-5</option>
         <option value="/comics/2551127/1-6/">#7 - 1-6</option>
         <option value="/comics/2551096/1-7/">#8 - 1-7</option>
         <option value="/comics/2551097/1-8/">#9 - 1-8</option>
         <option value="/comics/2551106/1-9/">#10 - 1-9</option>
         <option value="/comics/2551098/1-10/">#11 - 1-10</option>
         <option value="/comics/2551099/1-11/">#12 - 1-11</option>
         <option value="/comics/2551100/1-12/">#13 - 1-12</option>
         <option value="/comics/2551101/1-13/">#14 - 1-13</option>
         <option value="/comics/2551102/1-14/">#15 - 1-14</option>
         <option value="/comics/2551113/1-15/">#16 - 1-15</option>
         <option value="/comics/2553388/1-last/">#17 - 1_last</option>
      </select>
   </form>
<p>



<div id="comic-commentwrap">

    <h4>comments</h4>
    <center>[<a href="/postcomment.php?cid=2551093" onclick="var new_window = window.open('/postcomment.php?cid=2551093', 'sj_comment', 'height=350, width=420'); new_window.focus(); return false;">post a comment</a>]</center>



</div>



        <div id="footer">
            layout by <a href="http://flavors.me/oceanwrath/" title="whistleonwild">whistleonwild</a>.
        </div>

</div>

<!-- SCM Music Player http://scmplayer.co -->
<script type="text/javascript" src="http://scmplayer.co/script.js"
data-config="{'skin':'http://static.tumblr.com/qft2cvq/w5Zn26xbc/skin-2.css','volume':50,'autoplay':true,'shuffle':true,'repeat':1,'placement':'bottom','showplaylist':false,'playlist':[{'title':'everyday by chifayee','url':'https://youtu.be/XH06lniFZls'}]}" ></script>
<!-- SCM Music Player script end -->



</body>
</html>


   <script>
         
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
   
      ga('create', 'UA-2356418-1', 'auto');
      ga('send', 'pageview');
   
   </script>
   
   <!-- Quantcast Tag -->
   <script type="text/javascript">
   var _qevents = _qevents || [];
   
   (function() {
   var elem = document.createElement('script');
   elem.src = (document.location.protocol == "https:" ? "https://secure" : "http://edge") + ".quantserve.com/quant.js";
   elem.async = true;
   elem.type = "text/javascript";
   var scpt = document.getElementsByTagName('script')[0];
   scpt.parentNode.insertBefore(elem, scpt);
   })();
   
   _qevents.push({
   qacct:"p-taFz52bKnLXU3"
   });
   </script>
   
   <noscript>
   <div style="display:none;">
   <img src="//pixel.quantserve.com/pixel/p-taFz52bKnLXU3.gif" border="0" height="1" width="1" alt="Quantcast"/>
   </div>
   </noscript>
   <!-- End Quantcast tag -->
   
<!-- Page generated by Smack Jeeves in 0.015 seconds -->



Annnd i think i found the problem(s) by F12ing? :D
there are lots of..
- unreachable code after return statement
and some of..
- failied to load <script> of -random website- (which i think are unrelated snc external websites?)
User avatar
chifayee
 
Posts: 10
Joined: December 9th, 2013, 2:47 pm

Re: JS: Auto-jump to comic page for fast-reading

Postby eishiya » January 7th, 2018, 10:14 am

chifayee wrote:Tried hard-refreshing, not working.


[code snipped]


Annnd i think i found the problem(s) by F12ing? :D
there are lots of..
- unreachable code after return statement
and some of..
- failied to load <script> of -random website- (which i think are unrelated snc external websites?)

Thanks! The code looks fine, and the "unreachable code" part is probably unrelated and comes from some other script, perhaps an external one. The only "return" statement within the page itself has no unreachable code after it. And you're right, the scripts that failed to load are external, unrelated ones.

I asked another friend to check out the page, and with their help I was able to figure out the "problem":
The code is fine, but the "referrer" field is empty upon navigating, so the code fails, since it's looking for the previous and next page's URLs as the referrer. The problem is browser-side, and I'm not sure how to fix it.

Edit: Got it, it's the scmplayer.co codes that are breaking the referrer. Get rid of that, and it'll work just fine :D Music on comic sites is usually a bad idea anyway.
The reason it breaks is because scmplayer creates an iframe to put the site into (to allow the seamless playing), but as a result, it recreates the page from scratch within the iframe, which is what causes the referrer to break.

Also, the friend I asked to check out the site complained that your pages are too big, forcing her to scroll horizontally. I must agree. It's best to keep pages no more than 1000px wide - even on large screens, the smaller size makes them more pleasant to read. If you don't want to reupload your images, or if you want to make sure they look good on high-dpi screens, then set a max width on them using CSS:
Code: Select all
<style>
#comic_image {
max-width: 800px;
}
</style>

(Put that right before </head> in your Overall Layout. Feel free to change the 800px to something else, but I recommend keeping it within the 700-1000px range.)
Image
User avatar
eishiya
 
Posts: 9393
Joined: December 5th, 2009, 11:17 am

Re: JS: Auto-jump to comic page for fast-reading

Postby chifayee » January 7th, 2018, 12:54 pm

eishiya wrote:Thanks! The code looks fine, and the "unreachable code" part is probably unrelated and comes from some other script, perhaps an external one. The only "return" statement within the page itself has no unreachable code after it. And you're right, the scripts that failed to load are external, unrelated ones.

I asked another friend to check out the page, and with their help I was able to figure out the "problem":
The code is fine, but the "referrer" field is empty upon navigating, so the code fails, since it's looking for the previous and next page's URLs as the referrer. The problem is browser-side, and I'm not sure how to fix it.

Edit: Got it, it's the scmplayer.co codes that are breaking the referrer. Get rid of that, and it'll work just fine :D Music on comic sites is usually a bad idea anyway.
The reason it breaks is because scmplayer creates an iframe to put the site into (to allow the seamless playing), but as a result, it recreates the page from scratch within the iframe, which is what causes the referrer to break.

Also, the friend I asked to check out the site complained that your pages are too big, forcing her to scroll horizontally. I must agree. It's best to keep pages no more than 1000px wide - even on large screens, the smaller size makes them more pleasant to read. If you don't want to reupload your images, or if you want to make sure they look good on high-dpi screens, then set a max width on them using CSS:
Code: Select all
<style>
#comic_image {
max-width: 800px;
}
</style>

(Put that right before </head> in your Overall Layout. Feel free to change the 800px to something else, but I recommend keeping it within the 700-1000px range.)




OHHHH ok thank you!
I just insisted on putting a player on it because i wanted to play self-done instrumentals to go along the story while reading to create some atmosphere :/ but since it's bothering it.. & actually doesn't really contribute to better reading xD

I put the code with the max image width but it just squishes the big image into 800px because the image height is still long xD guess i have to re-upload the smaller vers. :< but thanks!!

Again, thank you for all the help!!! And ofc your friend!! <3
User avatar
chifayee
 
Posts: 10
Joined: December 9th, 2013, 2:47 pm

Re: JS: Auto-jump to comic page for fast-reading

Postby eishiya » January 7th, 2018, 1:24 pm

chifayee wrote:
eishiya wrote:Thanks! The code looks fine, and the "unreachable code" part is probably unrelated and comes from some other script, perhaps an external one. The only "return" statement within the page itself has no unreachable code after it. And you're right, the scripts that failed to load are external, unrelated ones.

I asked another friend to check out the page, and with their help I was able to figure out the "problem":
The code is fine, but the "referrer" field is empty upon navigating, so the code fails, since it's looking for the previous and next page's URLs as the referrer. The problem is browser-side, and I'm not sure how to fix it.

Edit: Got it, it's the scmplayer.co codes that are breaking the referrer. Get rid of that, and it'll work just fine :D Music on comic sites is usually a bad idea anyway.
The reason it breaks is because scmplayer creates an iframe to put the site into (to allow the seamless playing), but as a result, it recreates the page from scratch within the iframe, which is what causes the referrer to break.

Also, the friend I asked to check out the site complained that your pages are too big, forcing her to scroll horizontally. I must agree. It's best to keep pages no more than 1000px wide - even on large screens, the smaller size makes them more pleasant to read. If you don't want to reupload your images, or if you want to make sure they look good on high-dpi screens, then set a max width on them using CSS:
Code: Select all
<style>
#comic_image {
max-width: 800px;
}
</style>

(Put that right before </head> in your Overall Layout. Feel free to change the 800px to something else, but I recommend keeping it within the 700-1000px range.)




OHHHH ok thank you!
I just insisted on putting a player on it because i wanted to play self-done instrumentals to go along the story while reading to create some atmosphere :/ but since it's bothering it.. & actually doesn't really contribute to better reading xD

I put the code with the max image width but it just squishes the big image into 800px because the image height is still long xD guess i have to re-upload the smaller vers. :< but thanks!!

Again, thank you for all the help!!! And ofc your friend!! <3

Oh oops! Just add
Code: Select all
height: auto;

Right after the max-width line, and that'll make the images scale properly. Forgot I had to do that :'D
Image
User avatar
eishiya
 
Posts: 9393
Joined: December 5th, 2009, 11:17 am

Previous

Return to Template Development & Support

Who is online

Users browsing this forum: No registered users and 2 guests

cron