Howdy, Stranger!

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

Configuring link display elsewhere on page.

That's a tad vague for a subject, but here's what I'm looking at:

[Passage contents.]

[Choices a,b,c]! <--Problem here: while I can set the position to place a single choice beneath the passage that displays correctly, I can't figure out how to separate the position settings so that multiple choices don't overlap. Instead displaying as:

[Passage contents.]

[Choice a.]
[Choice b.]
[Choice c.]

I'm not sure if there's a selector I'm missing for specific internal links or not, as when I inspect the test page, they all seem to share the same internalLink.choice...container/parent/thing. I know that I could set aside trying to position the links elsewhere, keep them in-passage and display as I'm wanting (as a list of choices), but for the look I'm shooting for it wouldn't really work. If anyone could give me a heads-up to what I'm overlooking here, I'd be really grateful!

Comments

  • What I think your asking is when you have more than one <<choice>> in your passage how do you make them all display on a single line with a gap between each choice. If this is the case then the solution is made up in two parts.

    1. Laying out the <<choice>> macros in your passage:

    1a. Either place all the <<choice>> macros on the same line in your passage. without any new-lines between them.

    <<choice [[Option 1|Passage 1]]>><<choice [[Option 2|Passage 2]]>><<choice [[Option 3|Passage 3]]>>
    1b. Or place each <<choice>> on its own line but use a back character at the end of all but the last <<choice>> to suppress unwanted new-lines.

    <<choice [[Option 1|Passage 1]]>>\
    <<choice [[Option 2|Passage 2]]>>\
    <<choice [[Option 3|Passage 3]]>>

    2. Add a gap between each <<choice>> macro:

    2a. Either manually add spaces between the option using one or more non-break spaces &nbsp;

    <<choice [[Option 1|Passage 1]]>>&amp;nbsp;&amp;nbsp;<<choice [[Option 2|Passage 2]]>>&amp;nbsp;&amp;nbsp;<<choice [[Option 3|Passage 3]]>>

    or

    <<choice [[Option 4|Passage 1]]>>&amp;nbsp;&amp;nbsp;\
    <<choice [[Option 5|Passage 2]]>>&amp;nbsp;&amp;nbsp;\
    <<choice [[Option 6|Passage 3]]>>
    2b. Or use some CSS to add padding to the right side of each <<choice>> macro:

    #passages .choice {
    padding-right: 2em;
    }
  • Sorry, I must not have described what I was after very well. Here's what I'm looking at with the css I've used to reposition the links:
    undefined

    As you can see towards the bottom, all the links are overlapping since I've given them the same position coordinates. No surprise there. However, I don't know how to give each choice its own coordinates so that that doesn't happen. Does that make more sense? Apologies again for my fumbly description above.

    Looking over the wiki, the closest I've found is stuff like:

    .passage a
    .passage a.internalLink
    #passage[name] a

    But any declarations made with those either does what I've read it says it will do, changes all the links for every passage or all the links related to a single passage, which works wonderfully...If you're using those links in a standard fashion within your sentences themselves. Here's an example of the css I've scrapped together:
    #passageStart {

    position: fixed;
    top: ###s;
    left: ###s;
    right: ###s;}
    It gets all of them towards the bottom, like I want it in the final version (with actual images involved, mind, not flat color combo there), but then piles all of them atop each other in a completely dysfunctional way... :-\
  • If your using the SugarCube story format then it is as easy as wrapping the <<choice>> macros within a classed DIV tag as follows:

    <div class="choices">\
    <<choice [[Option 4|Passage 1]]>>\
    <<choice [[Option 5|Passage 2]]>>\
    <<choice [[Option 6|Passage 3]]>>\
    </div>
    And then use CSS to position the DIV instead of the <<choice>> macros:

    #passages .choices {
    position: fixed;
    bottom: 3em;
    }
    #passages .choices .link-choice {
    padding-right: 2em;
    }
    Of course the Sugarcane and Jonah story formats don't allow you to do this, returning a "<<choice>> can't be used here." error instead.

    After some testing the best I could come up with at short notice is something like the following CSS but it has a couple of short comings: 1. Your options have to be of pre-known set widths and 2. you have to add a  [iurl=#passageschoicenth-of-typenumber]#passages .choice:nth-of-type(number)[/iurl] for each of the possible maximum number of options on any page.

    #passages .choice {
    position: fixed;
    bottom: 3em;
    }
    #passages .choice:nth-of-type(1) {
    left: 20em;
    }
    #passages .choice:nth-of-type(2) {
    left: 30em;
    }
    #passages .choice:nth-of-type(3) {
    left: 40em;
    }
    Maybe one of the CSS experts can think of a better solutions.
  • Yes! It took some tweaking, but your css worked for what I was after, and is actually a fair amount cleaner than some of the other css I've tossed together. I'm a little unclear on how it assigns which choice is which (i.e. 1,2,3), as it doesn't seem to match the order in the passage itself*, but it's pretty obvious from where they sit which is which with the settings, so that's easy to work around.

    *(I read up on what it's supposed to do, but I'm not sure how the children are counted in the passage. What would have technically been the first was the last, oddly, so I dunno. Nevertheless, as noted, not terribly troublesome.)

    Then again, I'm not entirely clear how when I remove the bottom setting it still knows roughly where to go, so I think it's safe to say I'm kind of stumbling through all of this and piecing together stuff that crudely works either way.

    Thanks a ton, Greyelf! All my searches and tweaks were leading me absolutely nowhere.

Sign In or Register to comment.