Scripty goodness: Fanfiction Header Builder

[hope]

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!

Comments

[copracat]

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:


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

[hope]

Wow, 456,706 words!! I'm impressed!!

:D

[anatsuno]

YAY IT IS HERE! YOU ROCK!
I claim beta credits, haha, even though I never even looked at the code. *thieves*

[hope]

YES. *piles beta credits and pumpkin cookies upon you*

[wenchpixie]

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)

[hope]

ooo, really? Could you possibly screengrab it for me? I tried it on a version of IE6 at work and it was very sad indeed.

[james]

...

geek.

[hope]

Don't pretend you don't love it :PPPP

[maharetr]

Oh my god I love this. Thank you so much, seriously.

[hope]

:D Yaaay! My pleasure!

[brewsternorth]

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.

[hope]

Yep, I usually hand-code too. It gets very tiresome very fast, I've found!

Thank you :)

[elanurel]

How cool! Hope you don't mind if I spread the word about it. ;)

[hope]

Please do!! Thank you! :)

[ordinarygirl]

You are my new favourite person. :D

[hope]

Hee. Thanks!

[torachan]

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. :)

[hope]

Yeah, it's especially tiresome to code up when you don't do it that often, heh!

Thanks! :D

[gnatkip]

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!

[hope]

*beams* Thank you!!

I have a few other things I'd like to build (half practical and half meta, really), but I'm not sure my skills are up to it, yet.

So if you have any ideas, go ahead and bend my ear!! I am fond of working with you :)

[eyebrowofdoom]

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).

[ex_soup621]

What she said about the hovering.

Also:


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

[the_wanlorn]

You are amazing.

[hope]

Thanks!

[fred_mouse]

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).

[hope]

Hah, indeed. I love having something you can use as "and hey, you'll find this really useful!"

Cheers!

[alias_sqbr]

That's awesome! *bookmarks*

[hope]

Thanks! :)

[sibyllevance]

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 :)

[hope]

Yeah, I did consider that, but it's a bit out of my skill range right now. When I've skilled up a bit I'll definitely add it - but yeah, I figured that if people had strong opinions on it, they could rearrange once they'd pasted *g*

Thanks!

[renne]

omggggggggg! :DDDDDDDDDDDDDDDDDD

[hope]

Um, thanks? :D

[busaikko]

*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!

[hope]

Wheeee, there it is in the wild! :D

Thank *you*!

[delilahdraken]

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.

[hope]

So, include hard-coded breaks or not?

sounds like a reasonable suggestion... I'll look into it for my next iteration :)

Thanks!

[majoline]

This is amazing! Thank you so very much for sharing. *bookmarks*

[hope]

Thank you!!

[oconel]

Whoa! Thanks a lot, that's awesome :D

[hope]

Thank you!

[teigh_corvus]

This is genius. Thank you so much for putting it together!

[hope]

Thanks very much! It's a pleasure to share :)

[zats_clear]

you rock!

*angry kitty is wrong in this case*

[hope]

You can imagine an icon of my kitty that says "BUT JAVASCRIPT CAN!!!!!1!" here.

Thanks :D

[alcesverdes]

Hey, this is really neat! *bookmarks as well*

[hope]

Cheers!

[erda]

This is totally awesome.

[hope]

Thank you!

[crisporres]

Brilliant, thank you for sharing.

[hope]

:) My pleasure.