[code] Dropdown Archive Chapters - V 2.0

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

Moderator: Help Desk Team

[code] Dropdown Archive Chapters - V 2.0

Postby Falconer » November 24th, 2010, 8:13 pm

9/15/2012: This code has been revised! If you're using this script, please update to the newer version!

Using smackjeeves' chapter system and don't like how the chapters all list across in a row? This is an alternative. Instead the chapters are listed vertically and clicking on the title of a chapter will drop down with the pages so they're not all listed at once. (In V1, the hover thumbnails didn't work with this script. Now revised and using the power of JQuery, they do! Hurray!)

Dropdown Archive, normal
Image

Replace ALL of your archive code with this:

Code: Select all
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script>
$(window).load(function () {
      offset = $("#thumbDIV").offset();
      theX = offset.left;
      theY = offset.top;
});

    $("#main").mousemove(function(e){
     
      var posY = e.pageY - theY - 10;
      var posX = e.pageX - theX + 30;;

      $("#thumbDIV").css({'position' : 'absolute', 'top' : posY, 'left' : posX});   
    });

</script>

<script type="text/javascript">
function thumbLocate(imgURL) {

        document.getElementById('thumbDIV').src = imgURL;
        document.getElementById('thumbDIV').style.visibility = "visible";
   }

function thumbEnd() {
        document.getElementById('thumbDIV').style.visibility = "hidden";
}

</script>

    <h1>Comic Archive</h1>

              <style type="text/css">
        #chapter_table {
           margin:20px;
           border:black 1px solid;
           -moz-border-radius:10px;
           -webkit-border-radius:10px;
                margin: auto;
                width: 65%;
           border-radius:10px;}

        #chapter_table th {padding:4px 10px; background: #3e001a; border-bottom: black solid 1px;}

#chapter_table th a:link, #chapter_title th a:visited, #chapter_table th a:hover, #chapter_title th a:active { color: #FFF; }

        #chapter_table td {
           background:#FFCCCC;
           padding:2px 10px 4px 10px}
           
        #chapter_table tr.even td {background:#FF9999}

        #chapter_table tr:first-child td:first-child {
           -moz-border-radius-topleft:10px;
           -webkit-border-top-left-radius:10px;
           border-bottom-left-radius:10px}
           
        #chapter_table tr:first-child td:last-child {
           -moz-border-radius-topright:10px;
           -webkit-border-top-right-radius:10px;
           border-bottom-right-radius:10px}

        #chapter_table tr:last-child td:first-child {
           -moz-border-radius-bottomleft:10px;
           -webkit-border-bottom-left-radius:10px;
           border-bottom-left-radius:10px}
           
        #chapter_table tr:last-child td:last-child {
           -moz-border-radius-bottomright:10px;
           -webkit-border-bottom-right-radius:10px;
           border-bottom-right-radius:10px}

        #chapter_table  table.collapsed {border-collapse:collapse}
               
               .chapter_title h2
               {
                  margin: .5em;
               }
               </style>

               <div class="chapter_list">

        <script type="text/javascript">
        var disp;
        var chcount = 0;
        var x = 0;
        var open = 0;

        function selectChapter (sel) {
        chcount = 0;

        disp = "<table id='chapter_table' align='center' cellspacing='0'>";

                  <!-- BEGIN archive_chapters -->

                 <!-- BEGIN switch_comic_has_chapters -->
        x = 0;
        disp += "<tr";
        if(x%2) {
        disp += " class='even'";
        }
        disp += "><th colspan='4' class='chapter_title'><a name='ch_{archive_chapters.CHAPTER_ID}'></a><h2><a HREF='javascript: selectChapter(" + chcount + ")' onclick='selectChapter(" + chcount + ")' class='title'>{archive_chapters.CHAPTER_TITLE}</a></h2></th></tr>";

        x++;

        if(chcount == open) {
        disp += "<tr><td>#</td><td>Title</td><td>Date Released</td><td>Comments</td></tr>";
        }

        <!-- END switch_comic_has_chapters -->

                     <!-- BEGIN archive_comics -->
        if(chcount == open) {

        disp += "<tr";
        if(x%2) {
        disp += " class='even'";
        }
        disp += "><td>{archive_chapters.archive_comics.COMIC_NUMBER}</td><td><a href='{archive_chapters.archive_comics.COMIC_URL}' onMouseOver=\"thumbLocate('{archive_chapters.archive_comics.THUMBNAIL_IMG_SRC}')\" onMouseOut='thumbEnd()'>{archive_chapters.archive_comics.COMIC_TITLE}</a></td><td style='white-space: nowrap'>{archive_chapters.archive_comics.DATE_RELEASED}</td><td style='white-space: nowrap'><a href='{archive_chapters.archive_comics.COMIC_URL}'>{archive_chapters.archive_comics.NUMBER_COMMENTS} Comments</a></td></tr>";
        x++;
        }
               
                     <!-- END archive_comics -->
        chcount++;
                  <!-- END archive_chapters -->
        disp += "</table>";

        if(!sel) {
        sel=0;
        }
        open = sel;
        document.getElementById('Display').textContent = disp;
        document.getElementById('Display').innerHTML = disp;
        }
        </script>
               </div><br />

            <DIV ID='Display'>

        <Script Language="Javascript">
        selectChapter(0);
        </Script>
                 
            </DIV>

<img src="" id="thumbDIV" visible="false" style="visibility: hidden; position: absolute; top: 0; left: 0;">


Dropdown Archive, with thumbnails
This version creates small thumbnails next to the chapter title that enlarge when you open the chapter. It will always use the FIRST page listed in the chapter and assume it to be the cover.

Image

Replace ALL of your archive code with this:

Code: Select all
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

    <script>
    $(window).load(function () {
          offset = $("#thumbDIV").offset();
          theX = offset.left;
          theY = offset.top;
    });

        $("#main").mousemove(function(e){
         
          var posY = e.pageY - theY - 10;
          var posX = e.pageX - theX + 30;;

          $("#thumbDIV").css({'position' : 'absolute', 'top' : posY, 'left' : posX});   
        });

    </script>

    <script type="text/javascript">

    function chapCoverLoad () {
           var chapterCount = 0;
                      <!-- BEGIN archive_chapters -->
            chapterCount++;

           var comicCount = 0;
                         <!-- BEGIN archive_comics -->
             comicCount++;
             
             if(comicCount=='1') {
              var theChapter = "cover" + chapterCount;
    document.getElementById(theChapter).src = "{archive_chapters.archive_comics.THUMBNAIL_IMG_SRC}";
             }

                         <!-- END archive_comics -->
                 <!-- END archive_chapters -->
    }

    function thumbLocate(imgURL) {

            document.getElementById('thumbDIV').src = imgURL;
            document.getElementById('thumbDIV').style.visibility = "visible";
       }

    function thumbEnd() {
            document.getElementById('thumbDIV').style.visibility = "hidden";
    }

    </script>

        <h1>Comic Archive</h1>

                  <style type="text/css">
           #table_contain {
           margin: auto;
           width: 70%;
           position: relative;
            top: -15px;
           }
            #chapter_table {
               margin:20px;
               border:black 1px solid;
               -moz-border-radius:10px;
               -webkit-border-radius:10px;
                    margin: auto;
                    width: 100%;
               border-radius:10px;}

            #chapter_table th {padding:4px 10px; background: #3e001a; border-bottom: black solid 1px;}

    #chapter_table th a:link, #chapter_title th a:visited, #chapter_table th a:hover, #chapter_title th a:active { color: #FFF; text-decoration: none; }

            #chapter_table td {
              background:#FFCCCC;
              padding:2px 10px 4px 10px}
               
            #chapter_table tr.even td {background:#FF9999}

            #chapter_table tr:first-child td:first-child {
               -moz-border-radius-topleft:10px;
               -webkit-border-top-left-radius:10px;
               border-bottom-left-radius:10px}
               
            #chapter_table tr:first-child td:last-child {
               -moz-border-radius-topright:10px;
               -webkit-border-top-right-radius:10px;
               border-bottom-right-radius:10px}

            #chapter_table tr:last-child td:first-child {
               -moz-border-radius-bottomleft:10px;
               -webkit-border-bottom-left-radius:10px;
               border-bottom-left-radius:10px}
               
            #chapter_table tr:last-child td:last-child {
               -moz-border-radius-bottomright:10px;
               -webkit-border-bottom-right-radius:10px;
               border-bottom-right-radius:10px}

            #chapter_table  table.collapsed {border-collapse:collapse}
                   
                   .chapter_title h2
                   {
                      margin: .5em;
                   }
                   </style>

                   <div class="chapter_list">

            <script type="text/javascript">
            var disp;
            var chcount = 0;
            var x = 0;
            var open = 0;

            function selectChapter (sel) {
            chcount = 0;

            disp = "<div id='table_contain'><table id='chapter_table' align='center' cellspacing='0'>";

           var chapterCount = 0;
                      <!-- BEGIN archive_chapters -->

                     <!-- BEGIN switch_comic_has_chapters -->
            chapterCount++;
            x = 0;
            disp += "<tr";
            if(x%2) {
            disp += " class='even'";
            }
            disp += "><th colspan='4' class='chapter_title'><a name='ch_{archive_chapters.CHAPTER_ID}'></a><h2 style='text-align: left;'><a HREF='javascript: selectChapter(" + chcount + ")' onclick='selectChapter(" + chcount + ")' class='title'>";

            disp += "<img src='' id='cover" + chapterCount + "' style='position: relative; float: left; padding-right: 25px; padding-bottom: 5px;";

           if(chcount != open) {
              disp +="width: 5%; height: 5%;";
           }

           disp +="'>";

           if(chcount == open) {
              disp +="<div style='font-size: 150%; position: relative; top: 30px;'>";
           }

           disp +="{archive_chapters.CHAPTER_TITLE}";


           if(chcount == open) {
              disp +="</div>";
           }

           disp += "</a></h2>";

            disp += "</th></tr>";

            x++;

            if(chcount == open) {
            disp += "<tr><td>#</td><td>Title</td><td>Date Released</td><td>Comments</td></tr>";
            }

            <!-- END switch_comic_has_chapters -->

                         <!-- BEGIN archive_comics -->
           
            if(chcount == open) {

            disp += "<tr";
            if(x%2) {
            disp += " class='even'";
            }
            disp += "><td>{archive_chapters.archive_comics.COMIC_NUMBER}</td><td><a href='{archive_chapters.archive_comics.COMIC_URL}' onMouseOver=\"thumbLocate('{archive_chapters.archive_comics.THUMBNAIL_IMG_SRC}')\" onMouseOut='thumbEnd()'>{archive_chapters.archive_comics.COMIC_TITLE}</a></td><td style='white-space: nowrap'>{archive_chapters.archive_comics.DATE_RELEASED}</td><td style='white-space: nowrap'><a href='{archive_chapters.archive_comics.COMIC_URL}'>{archive_chapters.archive_comics.NUMBER_COMMENTS} Comments</a></td></tr>";
            x++;
            }
                   
                         <!-- END archive_comics -->
            chcount++;
                      <!-- END archive_chapters -->
            disp += "</table>";

            if(!sel) {
            sel=0;
            }
            open = sel;
            document.getElementById('Display').textContent = disp;
            document.getElementById('Display').innerHTML = disp;
            chapCoverLoad();
            }
            </script>
                   </div><br />

                <DIV ID='Display'>

            <Script Language="Javascript">
            selectChapter(0);
            </Script>
                     
                </DIV>

    <img src="" id="thumbDIV" visible="false" style="visibility: hidden; position: absolute; top: 0; left: 0;">
    </div>


! important !
Regardless of which you are using, this code will not work for you unless you make this VERY IMPORTANT change. Go to your overall layout and look for something like this:

<div id="main">

{CONTENT}

</div>


Your template will probably have "content" instead of "main", or something similar. Now go back to your comic archive and make sure that THIS:

$("#main").mousemove(function(e){


matches THIS

<div id="main">


If your template uses "content", make sure they BOTH say "content". If you need help with this, please PM me.

Customizing
Looking to change colors/appearance? Here's where you'll find what you need to edit.

This is the CSS for the chapter title rows:
#chapter_table th {padding:4px 10px; background: #3e001a; border-bottom: black solid 1px;}


Colors for chapter title links:
#chapter_table th a:link, #chapter_title th a:visited, #chapter_table th a:hover, #chapter_title th a:active { color: #FFF; text-decoration: none; }


The normal rows:
#chapter_table td {
background:#FFCCCC;
padding:2px 10px 4px 10px
}


The alternating rows:
#chapter_table tr.even td {background:#FF9999}


That should be everything...Enjoy!! If you encounter any problems or want help changing anything, feel free to ask. :)
Last edited by Falconer on September 15th, 2012, 10:19 pm, edited 1 time in total.
Image
Image
User avatar
Falconer
 
Posts: 1061
Joined: April 17th, 2006, 4:09 pm

Re: [code] Dropdown Archive Chapters

Postby MermaidUnderSea » November 25th, 2010, 4:28 pm

This sounds like it's pretty cool! I'll check this out when I got the time to.
Image
Wander Tones wrote:
Mr Aids wrote:I'm sorry, all I heard was 'boobs boobs boobs boobs boobs'.

And boobs is why boobs boobs this boobs.
User avatar
MermaidUnderSea
 
Posts: 633
Joined: December 19th, 2008, 6:19 pm
Location: Probably in a sandwich somewhere...

Re: [code] Dropdown Archive Chapters

Postby trenton_dawn » November 25th, 2010, 4:53 pm

That's awesome. I've always wanted something like this.
Gaia, a fantasy comic
Ghost, an online novel — Sketchbook thread — deviantArt
Need assistance with anything? Feel free to PM me.
Seven Rain wrote:Trenton speaks words of wisdom.
User avatar
trenton_dawn
 
Posts: 2713
Joined: December 14th, 2006, 7:59 pm
Location: Auberdine, Darkshore (Alliance Territory)

Re: [code] Dropdown Archive Chapters

Postby lonk » November 26th, 2010, 3:45 pm

That IS pretty awesome, thanks for sharing this!
bricks wrote:my mother mentioned to my uncle that i would like horror manga for my bday....so he gives me horror manga.. aka horrible manga aka 2 vols of hetalia


Seven Rain wrote:Here, how about some more animals being d-Umm... Jerks.
User avatar
lonk
 
Posts: 1398
Joined: November 20th, 2010, 6:15 am
Location: horule

Re: [code] Dropdown Archive Chapters

Postby Rouge The Bat Fanatic » May 13th, 2011, 5:40 pm

This is awesome! Im going to apply it to my comics site right away!
User avatar
Rouge The Bat Fanatic
 
Posts: 37
Joined: April 23rd, 2011, 12:52 pm

Re: [code] Dropdown Archive Chapters

Postby kuroi_hitsuji » July 5th, 2011, 8:25 am

LIFE SAVER.
Image
Image
Image
User avatar
kuroi_hitsuji
 
Posts: 177
Joined: March 27th, 2008, 2:40 am

Re: [code] Dropdown Archive Chapters - V 2.0

Postby Falconer » September 15th, 2012, 10:25 pm

VERSION 2 NOW AVAILABLE, PLEASE SEE FIRST POST!

Changes:
  • Hover thumbnails now work with this archive!
  • Option of cover thumbnails beside title now available!

Please note: I have no tested this archive with all templates. It should work, but there IS still a chance there may compatibility issues with your template. If you have the tech know-how, you'll probably be able to fix it yourself without much effort, but if you really want to use this script and are having problems, then please PM me and I will help you out.

Enjoy!!
Image
Image
User avatar
Falconer
 
Posts: 1061
Joined: April 17th, 2006, 4:09 pm

Re: [code] Dropdown Archive Chapters - V 2.0

Postby yainuwan » July 2nd, 2013, 1:59 am

Thank you. :D
yainuwan
 
Posts: 2
Joined: July 1st, 2013, 7:57 am

Re: [code] Dropdown Archive Chapters - V 2.0

Postby Alexis_Royce » October 23rd, 2014, 11:34 am

Thank you very much for sharing this! I'm going to put this archive coding on my sites right away.
Image
Image
User avatar
Alexis_Royce
 
Posts: 384
Joined: October 25th, 2008, 9:12 am
Location: Lineage Haven


Return to Template Development & Support

Who is online

Users browsing this forum: No registered users and 1 guest