hope: Art of a woman writing from tour poster (toshiko sato is smarter than you)
puddingsmith ([personal profile] hope) wrote2010-05-10 10:16 pm

Scripty goodness: Fanfiction Header Builder

Introducing the Fanfiction Header Builder!

The Fanfiction Header Builder is a tool made to help you create nicely-formatted headers for your stories with ease.

Just select the elements of the header you want to include, enter your own material, and then copy & paste the code into your "compose entry" text box (in plain text mode, of course).

Features include:
  • Links to previous/next/master posts, if you're posting a chapter of a WIP - just enter the URL and it'll write the rest of the code for you

  • Same goes if you'd rather link to your story elsewhere, rather than LJ cut it - just enter the URL and the text you want hyperlinked

  • The option to include the "highlight to reveal" code on a couple of components, if you want to warn safely but hide spoilers

  • A whole range of components you can take or leave as you see fit - and all the text fields are unrestricted, so you can put whatever material you like wherever you like.

And of course, you can always edit the header yourself once you've pasted it into your compose entry page.


You will need to have Javascript enabled in your browser in order for this tool to work.

It's optimised for Firefox, but has also been successfully tested in Safari and Chrome. It's incompatible with IE6 (I'd welcome feedback on how it works in IE7 & 8, though).



Further author notes -

This tool has been built with jQuery. I am a HTML/CSS coder who's presently learning javascript (the jQuery library in particular). This is the first relatively complex project I've built, so no doubt the script is a bit of an unnecessary mess.

Any feedback on technical aspects is very welcome. This is being initially published on Dreamwidth only to start with a smaller group of users!

Feedback on basic functionality is also welcome, so long as you keep in mind that it cannot be everything to everyone, and trying to build something that is will result in it being unwieldy and over-complicated.


Feel free to link to this post or the Header Builder itself if you'd like to share it around.

Thanks!
copracat: dreamwidth vera (Default)

[personal profile] copracat 2010-05-10 01:13 pm (UTC)(link)
That is so cool and awesome.

Look, here's my test text wot I wish was a real story now I've made it up:

Created using the Fanfiction Header Builder
Title: Rat's Arse the Musical
Author: Vera
Fandom: Australian Comedy RPF
Wordcount: 456,706
Rating: XXX
Pairing(s): Eddie Perfect/Tim Minchin
Prompt(s): glitter, canvas, taxonomy
Summary: There's something evil in the woodshed.


Rat's Arse the Musical

(no subject)

[personal profile] copracat - 2010-05-10 21:02 (UTC) - Expand

(no subject)

[personal profile] anatsuno - 2010-05-10 14:08 (UTC) - Expand
anatsuno: a robot pats Captain Jack Harkness on the ass (fine packaging)

[personal profile] anatsuno 2010-05-10 02:09 pm (UTC)(link)
YAY IT IS HERE! YOU ROCK!
I claim beta credits, haha, even though I never even looked at the code. *thieves*
wenchpixie: (Dean geekery)

[personal profile] wenchpixie 2010-05-10 02:12 pm (UTC)(link)
Title: This is a test
Author: of ie 6
Wordcount: because it
Rating: actually look
Genre: like it works
Notes: much better than things that are
Summary: SUPPOSED to work on ie6



htrshtrdhtrshtrhrth



(yes, I work in the dark ages, but on IE6, with a lot of blocked scripting, it works pretty much as advertised :D)

(no subject)

[personal profile] wenchpixie - 2010-05-10 22:56 (UTC) - Expand

(no subject)

[personal profile] wenchpixie - 2010-05-11 12:03 (UTC) - Expand
james: (dorkalexis)

[personal profile] james 2010-05-10 02:18 pm (UTC)(link)
...

geek.

(no subject)

[personal profile] james - 2010-05-11 09:35 (UTC) - Expand

(no subject)

[personal profile] james - 2010-05-11 16:42 (UTC) - Expand
maharetr: (So proud)

[personal profile] maharetr 2010-05-10 03:10 pm (UTC)(link)
Oh my god I love this. Thank you so much, seriously.
brewsternorth: Electric-blue stylized teapot, captioned "Brewster North". (Default)

[personal profile] brewsternorth 2010-05-10 05:13 pm (UTC)(link)
Awesomeness. I've handcoded my headers in HTML in the past, but errare humanum est, and it's great to have something that just slots everything together.
elanurel: (Default)

[personal profile] elanurel 2010-05-10 05:52 pm (UTC)(link)
How cool! Hope you don't mind if I spread the word about it. ;)
ordinarygirl: (Default)

[personal profile] ordinarygirl 2010-05-10 06:52 pm (UTC)(link)
You are my new favourite person. :D
torachan: (Default)

[personal profile] torachan 2010-05-10 09:10 pm (UTC)(link)
Wow, this is so cool! I don't use headers formatted like that for my journal, but it will come in handy when crossposting to comms. :)
gnatkip: "Gnat" (Default)

[personal profile] gnatkip 2010-05-10 11:14 pm (UTC)(link)
Seriously? SERIOUSLY?! This is awesome and you should feel awesome. I was hoping we would get to see some of the stuff you've been building!
eyebrowofdoom: A vintage illustration of a cricketer crouching over to field. The word "Out" appears next to his bum. (Default)

[personal profile] eyebrowofdoom 2010-05-11 12:46 am (UTC)(link)
AWESOME.

Title: This is an epic title of epicity
Author: by me
Fandom: I am a fan of me.
Wordcount: 50 million and going strong
Rating: only death with release you
Disclaimer: Lies, all lies

That was in IE7 on PC.

The Basic Header builder worked fine, but things went screwy when you expanded the other arrows under that - basically the list items all got jumbled up and clashed with each other.

My other feedback would be: I kind of wanted some hover or focus behaviour on the arrows. I am sufficiently used to seeing hover behaviour on clickable things that when I don't see it, I conclude that they're either broken or not interactive (although of course I did click anyway, and found out they did work).

[personal profile] ex_soup621 2010-05-11 07:42 am (UTC)(link)
What she said about the hovering.

Also:

Created using the Fanfiction Header Builder
Title: i say
Author: old chum
Fandom: hurt ianto
Wordcount: i like hurt ianto
Pairing(s): jalopy
Warning(s): it made me happy when
Contains: (highlight to reveal) jack was depressive


in the fute

(no subject)

[personal profile] eyebrowofdoom - 2010-05-11 09:19 (UTC) - Expand
the_wanlorn: The Doubtful Quest with a pride flag-colored background (Default)

[personal profile] the_wanlorn 2010-05-11 01:20 am (UTC)(link)
You are amazing.
fred_mouse: line drawing of sheep coloured in queer flag colours with dream bubble reading 'dreamwidth' (Default)

[personal profile] fred_mouse 2010-05-11 04:50 am (UTC)(link)
neat! now, I need to write something so I can use it.

(also, I think it a useful tool in the Clue!Bat!(tm) arsenal).
alias_sqbr: calvin and hobbes with a duplicator, Copyright violation: ho! ( not intended to encourage copyright violation) (yay copyright)

[personal profile] alias_sqbr 2010-05-11 08:24 am (UTC)(link)
That's awesome! *bookmarks*
sibyllevance: (Default)

[personal profile] sibyllevance 2010-05-11 08:40 am (UTC)(link)
This is really neat! However, may I offer a suggestion?
I personally think it would be great if we could change the order of the components. For example, it makes more sense to me to specify the fandom before the author, and the characters before the rating.
I realize I can simply change the order once it's pasted but it kind of defeats the purpose of the script if I do that :p

I don't want to rain on your parade, I seriously couldn't believe it when I saw that it's just so handy, but just thought I'd add my two cents :)

(no subject)

[personal profile] sibyllevance - 2010-05-11 08:52 (UTC) - Expand
renne: (Default)

[personal profile] renne 2010-05-11 08:49 am (UTC)(link)
omggggggggg! :DDDDDDDDDDDDDDDDDD

(no subject)

[personal profile] renne - 2010-05-11 08:59 (UTC) - Expand
busaikko: Something Wicked This Way Comes (Default)

[personal profile] busaikko 2010-05-11 08:57 am (UTC)(link)
*uses* http://busaikko.dreamwidth.org/118720.html

Yup, that looks awesome! I moved a bunch of things around to match the way I usually do headers. Easy to use, has all the neat codes: thank you!
delilahdraken: Aurora Borealis, looking over lake and mountains (Default)

[personal profile] delilahdraken 2010-05-11 09:45 am (UTC)(link)
Wow! What a great thing to do. *bookmarks*

Just a little question: I never use that option for normal journal entries, but for stories I always switch off the auto-formatting. So, could there maybe a litte ticky-box so the user can decide if they want html with auto-formatting or without?

If that is not possible, I can totally understand and will use your tool regardless. I'll just add the br and p where I need them.

(no subject)

[personal profile] delilahdraken - 2010-05-11 11:46 (UTC) - Expand
majoline: picture of Majoline, mother of Bon Mucho in Loco Roco 2 (Default)

[personal profile] majoline 2010-05-11 09:54 am (UTC)(link)
This is amazing! Thank you so very much for sharing. *bookmarks*
oconel: SPN "your prayers have been answered" (SPN - Prayers)

[personal profile] oconel 2010-05-11 11:46 am (UTC)(link)
Whoa! Thanks a lot, that's awesome :D
teigh_corvus: ([Firefly] Squee!)

[personal profile] teigh_corvus 2010-05-11 12:35 pm (UTC)(link)
This is genius. Thank you so much for putting it together!
zats_clear: (lolcat html cannot do that)

[personal profile] zats_clear 2010-05-11 04:33 pm (UTC)(link)
you rock!

*angry kitty is wrong in this case*
alcesverdes: Soapbox (31 Minutos // Friends)

[personal profile] alcesverdes 2010-05-11 05:01 pm (UTC)(link)
Hey, this is really neat! *bookmarks as well*
erda: (Default)

[personal profile] erda 2010-05-11 05:28 pm (UTC)(link)
This is totally awesome.

[personal profile] crisporres 2010-05-11 06:12 pm (UTC)(link)
Brilliant, thank you for sharing.

Page 1 of 3