How to change a <Div> dynamically?

Question

I've tried to read up on CSS tags and datatags, but it all seems pretty confusing to me and all the examples seem to be only for the entire passage/page.

How can i change an independent <Div> that's created seperately and dynamically from the CSS styling in Sugarcube 2.0?

The <Div> is created like this:

$('<div id="image-bar"></div>').insertBefore("#story");

How would i go about adding and removing CSS to that <Div> to make it visible and invisible? like adding "visibility: hidden;" or "visibility: visible;" in a way were it could be dynamically chosen as a setting? something like this:

<<if $image_bar == 0>>[[Enable|Settings][$image_bar = 1]]<<elseif $image_bar == 1>>[[Disable|Settings][$image_bar = 0]]<<endif>>

then put into StoryCaption:

<<if $image_bar == 0>>
Div is set to hidden
<<elseif $image_bar == 1>>
Div is set to visible
<<endif>>

Or is there a better way to change CSS for a Div?

Thanks :)

Answer 1

If it's about toggling visibility on and off I like to do this:

<<set document.getElementById("div-name").style.visibility = "visible">>

<<set document.getElementById("div-name").style.visibility = "hidden">>

Then combine these commands with if clauses, widgets, onclick events, etc. as needed.

Comments

This was exactly what i was looking for, thanks!

Answer 2

 in a way were it could be dynamically chosen as a setting?

If you mean an actual option within the Settings dialog accessed via the Settings button on the left side bar then you could so something like the following using the Setting.addToggle() function within your Story Javascript area.

/* Add Image Bar to interface. */
$('<div id="image-bar"></div>').insertBefore("#story");

/* Handler for Image Bar setting. */
var settingImageBarHandler = function () {
	if (settings.imagebar) {
		document.getElementById("image-bar").style.visibility = "visible";
	}
	else {
		document.getElementById("image-bar").style.visibility = "hidden";
	}
};

/* Settings: Image Bar toggle option.
Controls the visibility of the related div element, current state is stored within the settings.imagebar Boolean property. */
Setting.addToggle("imagebar", {
	label    : "Image Bar",
	default  : true,
	onInit   : settingImageBarHandler,
	onChange : settingImageBarHandler
});

notes:
a. Obviously you should change the imagebar toggle's label to something more meaningful to your story.
b. The current styling Javascript within the settingImageBarHandler function is based on @idling's suggestion, this could be changed to execute whatever Javascript you want.

then put into StoryCaption

That special passage is meant to be used to display content in the left side bar, personally I wouldn't use it to (conditional) control the state of other elements of the interface. I would suggest using one of the features listed in the Passage Events & Task Objects section, in this particular use-case I would suggest something like the PassageReady special passage if you want to use TwineScript, or a predisplay task is you want to use Javascript.