color trigers

311 studios

[move]hey guys!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!![/move]

ok so basicly i was wondering if anyone knows how to change background colors when triggered ?

Claretta


<<removeclass "html" "color1">>
<<addclass "html" "color2">>


Where CSS is:


html.color1 {
background-color: black;
}

html.color2 {
background-color: red;
}


greyelf

note: @Claretta's examples assume you are using SugarCube, as you did not state which story format you are using.

311 studios

oh yes i am.. the moment i put in your code my story stopped loading up ;/ ummm idk what do do i reverted back to normal and its still not showing up

311 studios

its giving me this error refreshed and quoted safari so confused!

Neoroman

311 wrote:

its giving me this error refreshed and quoted safari so confused!

Judging from that small line of code behind the error, you don't seem to be using Sugarcube. Go to your story's options and hit "Change Story Format" and choose Sugarcube.

greyelf

If you are using the hosted version of the SugarCube story format (which is the default way to use it) then there is another possible cause for that error.

Whenever you use SugarCube to create (publish) your story HTML file the Twine 2 application needs to (re)download the SugarCube format file, if there are any problems connection to the SugarCube web-site the you may get an error.

kmh

And how this code should look like in Harlowe?

Claretta

Think you need to wait for a later version for this kind of functionality to be put in. Think it might be in the current beta version undergoing development.

greyelf

kmh wrote: »

And how this code should look like in Harlowe?

Harlowe currently does not have macros like SugarCube's <<addclass>> or <<removeclass>>

note: the following is based on the CSS supplied by @Claretta

A method to emulate this in Harlowe is described here but simply put you need to use some Javascript. The javascript to add / remove a class on the html tag would look the following:

$('html').addClass('color1')

$('html').removeClass('color1')

Unfortunately Harlowe does not currently support the HTML <script> tag, so until it does you will need to use a hack like the following to call the above javascript:

<div style="display: none;"><img src="!@#$"; onerror="$('html').addClass('color1')" /></div>

<div style="display: none;"><img src="!@#$"; onerror="$('html').removeClass('forest')" /></div>

Once Harlowe is changed to support the HTML <script> tag the above would look as follows:

<script>$('html').addClass('color1')</script>

<script>$('html').removeClass('color1')</script>

kmh

Thanks for the information!

I guess this method could be used to change any part of css, like for changing the background image instead of color etc?

Claretta

Yes, it can.

kmh

Thanks!

feliwebwork

I noticed the hack above uses the add and remove function, and it seems you have to call both.

Is there a way to REPLACE the Class rather than add or remove?

I ask because it may depend on which passage the person arrives from that determines what the current class is.

feliwebwork

[deleted comment due to not testing enough] question above remains...

Claretta

You remove every class you could possibly need to before adding classes. It doesn't hurt if you have to state 10 or so remove class commands.

Also why SugarCube is best for this sort of thing, because you can bundle them all up into a widget.

feliwebwork

okay thanks. I was about to try that next!

sorry for my ignorance with sugarcube, but would a (display:"passageWithCode") in Harlowe do something similar to a widget, if the "passageWithCode" passage contained all the code that you want to call?

feliwebwork

Using the example before that greyElf provided, I found that I could combine a remove all function by using .removeClass() and the .addClass so that it will remove any previous class to the element and add the new one (essentially replacing the previous one).

<div style="display: none;"><img src="!@#$"; onerror="$('html').removeClass().addClass('color1')" /></div>

I hope this is of help to someone.