Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Using , , etc...

edited January 2015 in Help! with 1.x
Hey guys, I'm trying to use the toggle tag macro to change the stylesheet within a passage. Unfortunately there's no examples given of how/when to use the code, although it does say it's possible within replace tags... I want the reader to click a word/fake link and trigger the style change, but my experiments are failing horribly. No matter how I phrase it, the <<addtag>> function doesn't seem to trigger.

I'm sure I'm missing something obvious... Could I see an example of the macro in action?

(using twine 1.4.2 and the updated code for the macro)

Comments

  • Yo, I think you ordered this or something like it?

    (The catch seems to be to put addtag outside of the replace macro. It doesn't seem like it can handle multiple add/remove/toggletag macros within the replace macro.)
  • [quote author=Gmr_Leon link=topic=2330.msg6968#msg6968 date=1422778443]
    Yo, I think you ordered this or something like it?

    (The catch seems to be to put addtag outside of the replace macro. It doesn't seem like it can handle multiple add/remove/toggletag macros within the replace macro.)

    That is precisely what I need! :D

    ...and yet, I still can't replicate it. I was phrasing it nearly the same as that, and coming up with nothing, as I am now... I'm testing an extremely basic change (black text on white -> white text on black) and I swear I'm using everything the same as you, unless there's something strange in my stylesheets that is preventing the change. Attaching the file this time around.

    Sorry to bother you again! And thanks so much for the quick reply.
  • Frankly, I'm at a loss too. I've tried a bunch of different things that I thought might work, but the results remain the same. For some reason, despite removing the white stylesheet tag, it retains the body declarations and completely ignores the second stylesheet's body declarations. What's especially curious is that even if you narrow down the changes to only target the passage itself, it still refuses to swap out the changes.

    I have no idea what's going on there. If it removes the tag, I would assume it should remove any of its custom declarations, but it doesn't seem to. I've tried changing the stylesheet tags too, in case maybe something was up there, and still a no go.

    ...Even odder still, I tried it in Jonah just now with the example I made for you, as I've been trying to work with Sugarcane since I assumed maybe it was your preference, and it works fine with Jonah. At least, after some custom tweaks here and there, but that's a given with this stuff anyway.

    Functional example.

    Code snippets added under Omnom? and Nomnom! are only the following:

    Omnom?
    body {
    background: cornflowerblue;}

    Nomnom!
    body {
    background: wheat;}

    #passageStart {
    background: wheat;}
    The passage specific bit can be left out/kept the same as the other sheet and it will retain the original passage background color.
  • Curiouser and curiouser... I was able to trigger the white -> black background change in Jonah as well. On the one hand, I'm relieved to find that I wasn't making a silly mistake. On the other hand, I'm quite disappointed not to be able to use this macro in anything other than Jonah.  Is there any alternative to this sort of macro? That is, the reader triggering a change in the passage format without moving passages. I did some hunting, but this was the only thing I could find.

    Otherwise, I suppose I'll have to play around with Jonah for this. Thanks again for the help!
  • First a couple of coding tips:

    a. It is generally a good idea to only have a single Script Passage containing all your javascript in your story, as there is no way of knowing what order multiple script passages will load in and this can cause problems.

    b. All CSS property settings should end with a semi-colon ;

    c. String Parameters to macros like <<addtag "black">> should have double quotes around them.


    Now to your issue, can I suggest using Passage Tag based CSS selectors instead of how your currently trying to do it.

    1. Delete your existing "black" and "white" stylesheet passages.

    2. Add the following to your single Stylesheet passage:

    /* Default Styles, was "white" passage. */
    body {
    /* This affects the entire page */
    background-color: white;
    color: black;
    font-size: 14px;
    }
    .passage {
    /* This only affects passages */
    }
    .passage a {
    color: black;
    }
    .passage a:hover {
    color: black;
    }
    #sidebar {
    display: none;
    }
    #passages {
    border-left: 0;
    }
    .revision-span-in {
    opacity: 0;
    }
    .revision-span:not(.revision-span-out) {
    transition: 1s;
    -webkit-transition: 1s;
    }
    .revision-span-out {
    position:absolute;
    opacity: 0;
    }

    /* Styles for passage tagged with "black" */
    body[data-tags~="black"] {
    /* This affects the entire page */
    background-color: black;
    color: white;
    font-size: 14px;
    }
    body[data-tags~="black"] .passage a {
    color: white;
    }
    body[data-tags~="black"] .passage a:hover {
    color: white;
    }
    3. Change the contents of your Start passage to:

    random text
    <<replace "yes">>maybe<<addtag "black">><<removetag "white">><<endreplace>>
    (note: I add the "black" tag before removing the "white" one because if I reverse these two action then for some unknown reason the "white" tag does not get remove, I believe it is a bug.)

    4. Test your example and click on the "Yes", and it should work.
  • greyelf wrote:
    4. Test your example and click on the "Yes", and it should work.

    Bravissimo! It worked like a charm.

    And yes, I did initially have a single script file... but as I became increasingly paranoid, I tried changing everything in my desperation. xD Thank you so much! I'm really excited to be able to use this.
  • greyelf wrote:

    First a couple of coding tips:

    a. It is generally a good idea to only have a single Script Passage containing all your javascript in your story, as there is no way of knowing what order multiple script passages will load in and this can cause problems.

    b. All CSS property settings should end with a semi-colon ;

    c. String Parameters to macros like <<addtag "black">> should have double quotes around them.
    Cool info to know. I couldn't dig up much on how to implement scripts in Twine, so I was teaching myself that on the fly, good to know that it's best to pack them in a single place instead of separately. Inserting comments to distinguish between the parts isn't the same as in stylesheets or passages, is it? (I.e. /* */ or /% %/)

    As to c, what does that do, exactly? Sorry to throw in questions atop the OP's, but I know I only didn't use them because it appeared to work either way. However, checking the source stuff I did note it advising their use, yet without the why, I couldn't see what problems might arise from not doing so.
  • [quote author=Gmr_Leon link=topic=2330.msg6996#msg6996 date=1422860121]
    Cool info to know. I couldn't dig up much on how to implement scripts in Twine, so I was teaching myself that on the fly, good to know that it's best to pack them in a single place instead of separately. Inserting comments to distinguish between the parts isn't the same as in stylesheets or passages, is it? (I.e. /* */ or /% %/)

    As to c, what does that do, exactly? Sorry to throw in questions atop the OP's, but I know I only didn't use them because it appeared to work either way. However, checking the source stuff I did note it advising their use, yet without the why, I couldn't see what problems might arise from not doing so.


    There are two parts to "Twine", the Twine application and the story formats. Each of the story formats define their own base functionality (macro format, macros available, page layout, default CSS, etc) and they each contain a Javascript engine to make things work, and this is why you will see people ask which story format you are using when you post a question because it can make a big difference to the answer.

    Because Javascript is what is doing most of the work behind the scenes the story formats use its basic Data Types when storing values in variables and passing parameters to macros/functions. By surrounding a value with double quotes you are telling the code that the value is a String (which is the data type the addtag macro is expecting), when you don't Javascript has to work out the data type for itself and could get it wrong.

    The /% %/ format of commenting is Twine's own built-in one which is support by each of the story formats.
    CSS and Javascript both support the /* */ format of commenting.
  • Gotcha, I didn't know how the tags were being stored, so outright telling it what's up makes sense. Also didn't know if CSS's comment format carried over into Javascript that way, so that's good to know. I did realize the Twine/story format separation, but didn't know how deep the formats went into changing things, though it's been quickly becoming apparent to me in some ways. That being said, thanks again Greyelf!
Sign In or Register to comment.