Forums » Advanced Editor Forum » Read Thread

I wanted to implement the system because it would be, in theory, more flexible than the standard item system. In practise, it doesn't actually work if you follow the instructions because it looks like Zikara missed a few closing tags.

So I decided to try to make my own item system based off what Zikara had done with corrections and a layout more like the standard item system, which I think looks better anyway (no buttons etc., although tbf you could just style them how you like).

It's alright, but there is one minor problem. When you have several items in your inventory and you toggle between them, only the first one has the layout I want, and the rest cramp up. Also, when you toggle several descriptions, the layout gets a bit dodgy. I thought I could fix this with some script that says to close any opened descriptions, but I wasn't sure how to go about it, or even if this is the best solution. I'm not hot with Javascript (which I'm guessing you need for this), but I tried this:

IF %HASBROAD = 1 THEN $PAGETEXT := $PAGETEXT + "<div id='para2' style='display:none'><table border='0' cellpadding='0' cellspacing='0' width='600'><td><a href='javascript:;' onClick='function para2 {var para3 = document.getElementById('para3'); var displaySetting = para3.style.display; if (displaySetting == 'block') {para3.style.display = 'none';}}return toggleMe(&#39para2&#39)'><img src='URL' width=100 height=100/></a></td><td valign='top'><h2>Broadsword</h2><p>Makes arguments a hell of a lot easier.<br/></p><p align='center'>USE ITEM LINK(S)</p></td></table><br/><hr></div><a href='javascript:;' onClick='function para2 {var para3 = document.getElementById('para3'); var displaySetting = para3.style.display; if (displaySetting == 'block') {para3.style.display = 'none';}}return toggleMe(&#39para3&#39)'><img src='URL' width=60 height=60/></a>"

And it didn't work- couldn't even toggle it anymore. I'm guessing it doesn't work because you can't target div Id's with Java or something idek. The usual code which produces the current effect is this:

IF %HASBROAD = 1 THEN $PAGETEXT := $PAGETEXT + "<div id='para2' style='display:none'><table border='0' cellpadding='0' cellspacing='0' width='600'><td><a href='javascript:;' onClick='return toggleMe(&#39para2&#39)'><img src='URL' width=100 height=100/></a></td><td valign='top'><h2>Broadsword</h2><p>Makes arguments a hell of a lot easier.<br/></p><p align='center'>USE ITEM LINK(S)</p></td></table><br/><hr></div><a href='javascript:;' onClick='return toggleMe(&#39para2&#39)'><img src='URL' width=60 height=60/></a>"

You can view the variable item system in my Sneak Peak tester storygame if you want to see what's wrong (link in red). If anyone knows the correct code to use or a different way to fix this I woukd be really grateful for the help- I've been wanting to create a system like this for a while. Thanks!

Here's what I came up with.

• I'd suggest separating the buttons from the descriptions. It's twice the conditionals, but the elements will be jumping around way less frequently. I have it inverted from the traditional layout, but it wouldn't be too hard to copy/paste them the other way round.
• If you want to also close open elements, put that in the toggle function. In this case, I made a "greedy" toggle that takes a class name along with the id and closes all elements with the same class (it falls back to the class of the element with the provided id if none is specified). For this to work, I gave each description the "para" class.
• Careful with your quotes. Since &#39; aliases to ', you were effectively using apostrophes within apostrophes. Use &#34; or &quot;.
• If you have a link that's intended to run some JS, best practice is to give it a "#" as the href. It won't be followed at all as long as the JS returns false, which the greedy toggle is set to do.

That's brilliant. The only thing is that the layout of the burger description is still off and I can't figure out why seeing as the code looks identical except with the pictures and descriptions swapped around. Should I just use center tags? Thanks very much for your help this is very useful.

Thanks for everything BD- this will be a useful and important part of my next story.