Random Comic Strip button

A place to discuss the implementation and style of computer programs.

Moderators: phlip, Moderators General, Prelates

Horatio
Posts: 1
Joined: Sat May 23, 2009 3:38 am UTC

Random Comic Strip button

Postby Horatio » Sat May 23, 2009 3:41 am UTC

Hey, I noticed xkcd has the same comic strip browser function that most web comic strips have. You know, the previous, next and random buttons. Is there a web page that has this code available for free? I do my own strip and would love to be able to use that. Thanks for any information, folks!

Arantor
Posts: 67
Joined: Tue Jan 01, 2008 11:34 pm UTC
Contact:

Re: Random Comic Strip button

Postby Arantor » Sat May 23, 2009 9:57 am UTC

It's going to be mostly custom based off the database where the comics are all stored.

If you want a ready-made comic system, you could check out ComicPress, it's a WordPress plugin. Though I can't remember if it has a Random button.

User avatar
Gojoe
Posts: 3218
Joined: Wed Apr 30, 2008 12:45 pm UTC
Location: New Zealand!!!

Re: Random Comic Strip button

Postby Gojoe » Sat May 23, 2009 10:01 am UTC

I do not think it does. For an example of a comic using comic press. Check out http://www.mookeo.com/
michaelandjimi wrote:Oh Mr Gojoe
I won't make fun of your mojo.
Though in this fora I serenade you
I really only do it to aid you.
*Various positive comments on your masculinity
That continue on into infinity*

Feeble accompanying guitar.

User avatar
gistick
Posts: 19
Joined: Tue May 19, 2009 7:58 pm UTC
Location: Madison, WI
Contact:

Re: Random Comic Strip button

Postby gistick » Mon Jun 01, 2009 10:32 pm UTC

I just got around to updating my webcomic from a simple listing of text links (in order to view each comic you had to click on a link, then click the back button to get back to the page of links in order to click another) to one using javascript.

Users can now click back, next, current comic, and they can select any individual comic from a drop down menu. I modified some javascript from a few different places in order to do all of this. I dont have 5 posts, so I wont link to where I got, here is what I am using now:

(also before I begin, I store all my image (comic) files in a single directory electronman/emimages/)

First, I made a list to hold all of the comics url references and a short bit of text to appear in the drop down menu (I have 49 comic so I will only include a few - you can get the idea)

You may wonder why I have the url changing function --> I am trying out the oh no robot search engine and needed a url reference for each comic and also people may want to link to a specific comic.

The function gup gets a variable value from the url passed via ?comic=value

The function loadChangeImage gets called when the page is loaded and checks to see if a value for comic is passed in, if not it defaults to whatever comic I have selected the current comic)

The function update url changes the url when as you scroll through the comics using any button or the drop down menu, so one can link to individual comics.

The functions change, prev, next and current are pretty easy to understand how they work and why they are there.

I hope this helps,

-tim Szczykutowicz
maker of "Electron Man"

All the code is below......
Spoiler:
<SELECT id=optionlist
onchange=javascript:changeImage()><OPTION
value=emimages/quantum_tunneling.jpg>Quantum Tunneling
5/31/07</OPTION> <OPTION value=emimages/wallet.jpg>Wallet
Paradox 5/31/07</OPTION><OPTION
value=emimages/rosie.jpg>Rosie Hole 6/1/07</OPTION><OPTION
value=emimages/football.jpg>Football 6/3/07</OPTION><OPTION
value=emimages/coulomb.jpg>Coulomb 6/6/07</OPTION><OPTION
value=emimages/frost.jpg>Leidenfrost Effect
6/9/07</OPTION>
.....</SELECT>

The java script I found/ modified and made

function gup( name )
{
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return "";
else
return results[1];
}


function loadChangeImage()
{
var comicN = gup('comic');
if ( comicN!= "")
{
var list = document.getElementById('optionlist');
list.selectedIndex = comicN;
document.mainimage.src = list.options[list.selectedIndex].value;
}
if (comicN == "")
{
var list = document.getElementById('optionlist');
document.mainimage.src = list.options[list.selectedIndex].value;
}
}

function updateURLAction(newNum)
{
window.location.href =
"http://www.quarkquark.com/electronman/index.htm?comic="+newNum+"#topAnch";

}


function changeImage()
{
var list = document.getElementById('optionlist');
document.mainimage.src = list.options[list.selectedIndex].value;
updateURLAction(list.selectedIndex);
}

function prevImage()
{
var list = document.getElementById('optionlist');
if(list.selectedIndex == 0)
{
list.selectedIndex = list.options.length-1;
}
else
{
list.selectedIndex--;
}
changeImage();
}

function nextImage()
{
var list = document.getElementById('optionlist');
if(list.selectedIndex == list.options.length-1)
{
list.selectedIndex = 0;
}
else
{
list.selectedIndex++;
}
changeImage();
}
function currentImage()
{
var list = document.getElementById('optionlist');
var l = list.options.length-1;
list.selectedIndex = l;
changeImage();
}
-tim Szczykutowicz
maker of "Electron Man" webcomic
www.quarkquark.com/electronman/

keeperofdakeys
Posts: 658
Joined: Wed Oct 01, 2008 6:04 am UTC

Re: Random Comic Strip button

Postby keeperofdakeys » Sat Jun 06, 2009 11:00 am UTC

I would imagine this would be something done best with a server side scripting language, like php]
this gives you the power to serve raw html, so people without javascript enabled can navigate easily
Last edited by keeperofdakeys on Mon Jun 08, 2009 1:30 am UTC, edited 1 time in total.

User avatar
keozen
The Bearded FaiD Batman
Posts: 1497
Joined: Wed Aug 01, 2007 6:31 am UTC
Location: Yorkshire, UK
Contact:

Re: Random Comic Strip button

Postby keozen » Sat Jun 06, 2009 6:30 pm UTC

I think you can do it in comicpress, I've seen other comicpress users do it. I just haven't gotten around to doing it on Moo and Keo yet. I didn't set it up at first as we (moo and I) had a tiny archive at the time so it wasn't as good an idea.

I do HIGHLY recommend comicpress though. It's the most widely used solution, it's even used by a fair few of the webcomic "big hitters".
Image

User avatar
gistick
Posts: 19
Joined: Tue May 19, 2009 7:58 pm UTC
Location: Madison, WI
Contact:

Re: Random Comic Strip button

Postby gistick » Tue Jun 09, 2009 4:04 pm UTC

What I use now (the javascript) is super easy for me, all the code is on one page. I am familiar with c++ and matlab, so playing with the javascript was no big leap. I am not familiar with php, but judging by how easy easy it was for me to implement the javascript, and how little time I have to play around with my website as it is, I plan on sticking with the javascript. I just googled how to get a random number, and it seems pretty easy,
var randomnumber=Math.floor(Math.random()*x)

although, if someone comes onto my site without javascript, does anyone now what their browser will do? Does it tell them they need javascript or would my site just look broken?

-tim Szczykutowicz
maker of "Electron Man"
-tim Szczykutowicz
maker of "Electron Man" webcomic
www.quarkquark.com/electronman/

keeperofdakeys
Posts: 658
Joined: Wed Oct 01, 2008 6:04 am UTC

Re: Random Comic Strip button

Postby keeperofdakeys » Wed Jun 10, 2009 7:45 am UTC

the ?comic=value is called get
here is a small php script, which is called index.php and will be root

Code: Select all

<?php
// the < and ? mark the start of php and the double slash marks a comment
$comic = $_GET['comic']; //the $ denotes a variable, the $_GET['comic'] gets the string marked by comic in the get and a semicolon is needed on the end of each line
$random = (string)rand(1,10); // generate a string of a random number from 1 to 10, change max number to your latest comic

echo "<html>\n<head>\n<title>Comic</title>\n</head>\n<body>\n<p>This is comic number ".$comic."</p>\n<br>\n<a href=\".?comic=".$random."\">Random</a>\n</body>\n</html>"; //will return the html needed to the web browser, the $comic will return what is printed
?> ?> marks the end of php, text that is put outside php markers will automatically be given to web browser and not be processed
like this text, (yes it is bad coding practise to put text outside html tags)


try going to http://keeperofdakeys.x10hosting.com/temp/ to see it in action

just a few notes
for loops and if loops work pretty much like C++
the echo command does not attach a new line at the end of each use, so use \n to mark one
new lines are translated outside php tags
php tags are unreadable to outsiders

User avatar
gistick
Posts: 19
Joined: Tue May 19, 2009 7:58 pm UTC
Location: Madison, WI
Contact:

Re: Random Comic Strip button

Postby gistick » Wed Jun 10, 2009 1:25 pm UTC

Keeperofdakeys,

So where do you put the php script? I did not see anything on the source of the link you posted? Is it something that has to be in the same directory as the html code?

Also, thanks for making me realize I do not have to reference each page(like your example page) like /index.htm?comic=34, I can just do /?comic=34, I will have to implement that soon, it makes the url look a lot cleaner.
-tim Szczykutowicz
maker of "Electron Man" webcomic
www.quarkquark.com/electronman/

keeperofdakeys
Posts: 658
Joined: Wed Oct 01, 2008 6:04 am UTC

Re: Random Comic Strip button

Postby keeperofdakeys » Wed Jun 10, 2009 1:40 pm UTC

you require a host that has php (which most hosts have as standard, and is easy to install)
php is a server side language, which means that it is executed on the server itself
try naming a file with that text in it with a .php extension (I named the file index.php, so it went to it automatically when I went to the url)

and about no java-script, I use a firefox extension called no-script, it disables all flash, java, javascript and shockwave content
when I think a website is safe, I can tell it to allow that website, it protects me from viruses and the like

User avatar
gistick
Posts: 19
Joined: Tue May 19, 2009 7:58 pm UTC
Location: Madison, WI
Contact:

Re: Random Comic Strip button

Postby gistick » Wed Jun 10, 2009 4:32 pm UTC

Ya, I just tried to view my comic w/o javascript, it didn't work and didn't tell me I needed to enable javascript (I use firefox).
-tim Szczykutowicz
maker of "Electron Man" webcomic
www.quarkquark.com/electronman/

keeperofdakeys
Posts: 658
Joined: Wed Oct 01, 2008 6:04 am UTC

Re: Random Comic Strip button

Postby keeperofdakeys » Wed Jun 10, 2009 9:31 pm UTC

try using the <noscript></nosript> tags for the text to appear when no javascript is enabled
and just remember, that robots like google search don't use javascript, so google won't reference your comics

User avatar
gistick
Posts: 19
Joined: Tue May 19, 2009 7:58 pm UTC
Location: Madison, WI
Contact:

Re: Random Comic Strip button

Postby gistick » Tue Jul 07, 2009 10:16 pm UTC

I finally got around to adding a random comic strip button,

here is the function I made for javascript
function randomImage()
{
var list = document.getElementById('optionlist'); //this option list holds the url's for all my comics
var lengt = list.options.length-1; //I need to know how many comics I have so the random number generator will cover all the comics
var randNum = Math.floor(Math.random()*lengt); //get a random number
document.mainimage.src = list.options[randNum].value;//set the comic to the random number using the IMG name=mainimage tag
updateURLAction(randNum); //update my url (so I have a unique url for each comic)
}

and here is what the button code looks like
<INPUT onclick=javascript:randomImage() type=button value="Random Comic">

I will get around to updating to run all this on php in the future, perhaps when grad school is over...
I also implemented a comments page, which was super easy, I used something called j-s kits, only two lines of code and it was done. Managing it was a little tricky and signing in under facebook does not seem to work, but it serves its purpose.

Also, is there a special place to put the <noscript> tags? They(the text inside them) seemed to be displayed even when I had javascript enabled?
-tim Szczykutowicz
maker of "Electron Man" webcomic
www.quarkquark.com/electronman/

keeperofdakeys
Posts: 658
Joined: Wed Oct 01, 2008 6:04 am UTC

Re: Random Comic Strip button

Postby keeperofdakeys » Wed Jul 08, 2009 4:23 am UTC

gistick wrote:Also, is there a special place to put the <noscript> tags? They(the text inside them) seemed to be displayed even when I had javascript enabled?

they just go inside the body, where you would want it to be seen if triggered

I don't really know much about them, but I couldn't see the noscript tags in your comic?


Return to “Coding”

Who is online

Users browsing this forum: No registered users and 11 guests