News:

Wondering if this will always be free?  See why free is better.

Main Menu

Simple javascript help?

Started by Gwenwyfar, October 23, 2014, 03:16:23 AM

Previous topic - Next topic

Gwenwyfar

This is likely gonna be a ridiculous question for anyone that knows some js, but sorry, I have no idea how this whole stuff works and won't be learning for a good while still as other things have priority.

I'm adding a simple spoiler bbcode tag for my forum. I've added the bbc part and went off to make the toggle thing. Since it can't be done with css (easily at least, for something that will need unique ids which would mean more php to make that and etc), I've just searched how to do it in js and came up with this code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {

   $('.spoiler dt').click(function() {
      $(this).next('dd').toggle();
   });
});

</script>
</head>
<body>


<dl class="spoiler"><dt> Spoiler</dt><dd style="display:none">Content</dd></dl>

<dl class="spoiler"><dt> Spoiler</dt><dd style="display:none">Content2</dd></dl>


You can try it here and it works fine. But I can't figure out where do I add that on smf.

The html is the same, that was copied from what the forum already has. I tried adding it to the end of the .js file, to the header with the src link, without it, on the bottom, on the top, honestly I have no idea what else to try. (I've cleared the cache between each try of course).

Any help on this would be greatly appreciated  ::)
"It is impossible to communicate with one that does not wish to communicate"

margarett

* margarett is a JS ignorant :P
Why don't you pick one of the existing spoiler mods and check it out? ;)
Se forem conduzir, não bebam. Se forem beber... CHAMEM-ME!!!! :D

QuoteOver 90% of all computer problems can be traced back to the interface between the keyboard and the chair

Gwenwyfar

#2
I looked one up and it seemed to have too many things I wasn't gonna need, so I just got the basics for the bbc part from looking on a box one. I don't like leaving useless code around :P

But I admit the rest was out of laziness for looking others, and partially because I want to make it look in a specific way, plus learning about how the tags work while I'm at it is a big plus for me :P

Edit: The simplest spoiler mod that I found seems to use js along with the tags (on each of them), and its not as small as the essential. Using the amount of spoilers my forum community does that would make the html easily cluttered :(
"It is impossible to communicate with one that does not wish to communicate"

live627

Did you refresh the page after adding the code?

Gwenwyfar

Yes, with a cache reset. (Ctrl + f5)

Tried adding this to the above code as well as I see some other scripts use it, still the same: <script type="text/javascript"><!-- // --><![CDATA[

// ]]>
"It is impossible to communicate with one that does not wish to communicate"

live627


Gwenwyfar

#6
theme.js, the only one I found in the theme folder and at the time I had looked the loaded scripts (before the tests) it was the only one that showed up as well. Should I try the others?

Edit: Tried now on topic.js which loads on topics, I see the code there but still nothing :(

Also tried now changing the first line to the same as one of the other spoiler mod uses (the code is built in a similar way too, just 3 lines after that), but didn't do anything either. jQuery(document).ready(function($){   

Woot! Just kept trying a combination of all the above and it finally worked. Went back to just script tag (without the type=text/js part), changed the first line to the above, and added the reference link back (it didn't work before with it either in or out). :D Also it was on the head that it worked.

Thanks for the help live, and thanks margarett! (Kind of ironic that you helped without knowing any js, but it worked for giving a look on the spoiler mods :))

I guess I hate js a little bit more after this though... :x
"It is impossible to communicate with one that does not wish to communicate"

Advertisement: