TheMadExile wrote: <br />:: StoryInit<br />&lt;&lt;script&gt;&gt;<br />$(&quot;body #passages&quot;).on(&quot;click&quot;, &quot;area[data-passag

#passages {

How do I select <a> elements in the #passages div with jQuery? I've been using .css to check if I'm selecting them by changing the color to red.

But for now, I'm hung up on something that's likely very simple. How do I select <a> elements in the #passages div with jQuery? I've been using .css to check if I'm selecting them by changing t

SugarCube's border there actually comes in two pieces, one on the right-hand side of #ui-bar and the other on the left-hand side of #passages.  Normally, this provides a better look than having it onl

/>height:100%;<br />}<br />#passages {<br />margin:0;<br />padding: 0;<br />height:100%;<br />}<br />.passage[data-tags~=nice] .header {<br />backgr

Using the first (delegated handler) option as an example (since it's the easiest): <br />:: StoryInit<br />&lt;&lt;script&gt;&gt;<br />$(&quot;body #passages&

Try changing your code to this: <br />$(&quot;#passages&quot;).on(&quot;mouseenter&quot;, &quot;.header&quot;, function() {<br />$(&quot;#ui-bar&quot;).show

One cool thing I discovered today...if you want your passage space to expand to the size of the browser window, set the height like this in the #passages class:

The problem, I think, isn't going to be that you need to adjust the CSS for your sidebar, but for the #passages container.

/>width: 8%;<br />}<br />#passages { <br />/* This is a container for all passages displayed on the page */<br />/* Passage width */<br />width: 85%;<br />/* Pa

main flow to a sidebar<br />$(&quot;#passages&quot;).addClass(&quot;sidebar&quot;);<br />$(&quot;.passage&quot;).addClass(&quot;flip&quot;);//add class to

There are other important elements that Sugarcane uses that aren't listed in the default SS. For example, the #passages element (not to be confused with the .passage class, no 's' at the end).

#passages {

The basics would be that you'd need to add a class to #passages (or something like that), which would disable the passage transition animation for the call to state.display(), and then remove the clas

#passages {

Anyway, in case anyone ever has the same problem and doesn't know what to do, I thought I'd just say that you can just fix it with #passages {<br />border-left: 0;<br />}

Okay try this: <br />@media screen and (max-width: 768px)<br />{<br />body { margin: 0; }<br />#passages { padding: 0; min-height: inherit; }<br />}<br />

I added a CSS @media query to make SugarCube somewhat nicer on mobile devices.  Since your project has some fairly heavy CSS modifications, you might need to add something like this to the bottom of y

.passage now goes all the way to the bottom. #passages does too. There's no need to change width to "auto," or to change width at all really.