Javascript Experts!

I'm looking for someone with good Javascript skills to solve a long-standing annoyance here on the forums - the spoiler tag uses JS (code below for reference) to allow for 'spoiler' tags so we can hide objectionable content from stray eyes (like for NSFW content) - the problem being, is if you visit a thread with spoiler tags used, and there are explicit images inside them, regardless if you click on the spoiler to reveal the image, they get cached to your browser, and in a work environment, that could be problematic (how could you prove you didn't click the spoiler, not that it would matter to a company).

I've been asked many times if there is a way to not load images (either internally uploaded or externally linked) until the spoiler is clicked - I personally am not that good at JS to accomplish it (and frankly don't have the time), so I turn to you, Javascript Experts, to come up with a workable solution.

Below is the JS code used for the spoiler tags:

<span onClick="this.nextSibling.style.display=((this.nextSibling.style.display=='none')?'':'none');" onclick="this.nextSibling.style.display='';"><a href='java script:;'>
<div class='spoilertop'><u>» Click to show Spoiler - click again to hide...  «</u></div></a></span><span style='display:none;'>
<div class='spoilermain' >{content}</div>
</span>

How about you get to work on something important, like letting me change my name. Once. In the six years I've been here, I'd like to change my name, please.

  beneboi said:

How about you get to work on something important, like letting me change my name. Once. In the six years I've been here, I'd like to change my name, please.

seconded. also, i want candy

  beneboi said:

How about you get to work on something important, like letting me change my name. Once. In the six years I've been here, I'd like to change my name, please.

Ah, but you're not important (to me)

So that faggot Mr Maha is more important to you?

I see how it is. *begins to pack my things from joyrex's apt*

and what makes you presume everyone here works in technology!!! :P

sorry im more of a Java person than Javascript, and no that shizzle ain't the same...

  Joyrex said:

  beneboi said:

How about you get to work on something important, like letting me change my name. Once. In the six years I've been here, I'd like to change my name, please.

 

Ah, but you're not important (to me)

ice burn

this isn't supposed to do anything, ignore it.

  grinningcat said:

and what makes you presume everyone here works in technology!!! :P

 

sorry im more of a Java person than Javascript, and no that shizzle ain't the same...

Thank you Mr. Java Developer™ - now, go and program a memory-sucking application that spins balls around my screen in a 32x32 window.

  Joyrex said:

  grinningcat said:

and what makes you presume everyone here works in technology!!! :P

 

sorry im more of a Java person than Javascript, and no that shizzle ain't the same...

 

Thank you Mr. Java Developer™ - now, go and program a memory-sucking application that spins balls around my screen in a 32x32 window.

lol i thought he meant coffee

  beneboi said:

  Joyrex said:

  grinningcat said:

and what makes you presume everyone here works in technology!!! :P

 

sorry im more of a Java person than Javascript, and no that shizzle ain't the same...

 

Thank you Mr. Java Developer™ - now, go and program a memory-sucking application that spins balls around my screen in a 32x32 window.

 

lol i thought he meant coffee

HUR HUR HUR BEKAUSE KOFFEE HAZ FUCKALL TO DO WIT PROGRHAMMING

...no, because the comment he made about not everyone being programmers, and then said he was a java man

<span onClick="this.nextSibling.style.display=((this.nextSibling.style.display=='none')?'':'none');this.nextSibling.src='{content}';" onclick="this.nextSibling.style.display='';this.nextSibling.src='{content}';"><a href='java script:;'>
<div class='spoilertop'><u>» Click to show NSFW Image - click again to hide...  «</u></div></a></span><img style='display:none;' src='http://forum.watmm.com/style_images/ip.boardpr/folder_post_icons/icon14.gif'/>

this could be used as a [nsfwimg] tag. trying to do this with any random text is harder because you have to escape quotes and stuff. just replacing the img src is easier. also, replace "java script" with "javascript".

I was really hoping that this thread was about getting rid of weed.

could you simply load the spoiler content using xmlhttprequest when its opened. might be a slight load delay but could work.

not an expert mind

  Benedict Cumberbatch said:

could you simply load the spoiler content using xmlhttprequest when its opened. might be a slight load delay but could work.

 

not an expert mind

spoilers aren't stored separately from the rest of the post, so there's no way to do that cleanly. easier to just escape the content and store it in a javascript var, then update innerHTML on click. but that would require patching the forum, afaik.

Ask Phobiazero.

don't know if its an option for you, but you can add a header to stop caching? thats more server side scriping though.

<?php

header("Cache-Control: no-cache, must-revalidate");

header("Expires: Mon, 1 Jan 1999 01:00:00 GMT");

?>

The only problem with something like that - is that it blocks caching of everything, and your host might shit a brick on you. Maybe you can load one thing into spoiler tag, then when it's clicked call a script that loads the stuff (ina frame or something or other)? At least in IE7, it only caches images when they actually load (so they don;t get cahces until you remove the hidden display CSS). Sounds like a FF issue.

As chaosmachine explained you need to keep those image tags from the DOM to stop the browser from loading the images. An easy way to do this might be to obfuscate those tags by replacing <img by <imgalt and using javascript to replace those elements when clicked on 'show spoiler'. But I wouldn't like doing that in the board software I've seen.

if you can get to the point where you have the entire message text (like, from a http POST), either server-side, or client-side, you can just take what's inside spoiler tags and stuff it inside a javascript var. which would be then invoked through innerHTML or such. all that would require quote-escaping the content inside the spoiler tags though...

the escaping could probably be hacked-in clientside upon form submission, serverside upon form submission, or the whole spoiler interpretion could be hacked-in serverside upon page serving.

oh, i just read what Ego wrote... that's also a good idea. but use some HTML-correct tag like "span" instead of "imgalt". you'll still have to find a point where you'll want to replace all the "img" tags inside spoiler tag with "span" tags.

if the boards supports some custom onSubmit event handlers, then it's quite an easy job. otherwise it requires a (small) hackjob.

any escaping would have to be done server side in order to be secure. unfortunately, the current bbcode system doesn't do escaping properly, and modding ipb sucks. the code i posted above is about as good a solution as you can get.

have you heard of stackoverflow.com? Its a brilliant site for questions like this, there are loads of programmers on there just waiting to answer your question and get reputation points.

maybe try posting it there

Or, ban images inside spoiler tags (thats not what they're meant to be for, after all, they're supposed to be for spoilers) - can you code a mod on the server side for that?

and then implement chaosmachines nsfwimage tag, so that people _have_ to use the new late-loading tag if they want hidden images.

Are you mad? I would get sacked in 2 days.

  chaosmachine said:

any escaping would have to be done server side in order to be secure. unfortunately, the current bbcode system doesn't do escaping properly, and modding ipb sucks. the code i posted above is about as good a solution as you can get.

Unfortunately, the code you posted doesn't seem to work - the content gets loaded outside the spoiler container... I removed the code from the ACP so others won't mistakenly try it.