Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

How does clicking on Modify make the itemcontrol div appear?

Trying to utilize clicking that button to change the width of repitems in the div and not seeing how it is done in the html or css.
Anyone?
1468184771

Edited 1468185024
Lithl
Pro
Sheet Author
API Scripter
<a href="https://app.roll20.net/forum/post/882997/css-wizar" rel="nofollow">https://app.roll20.net/forum/post/882997/css-wizar</a>... Short answer: div.repcontainer gains the editmode class when you click Modify, and loses the class when you click Done. Slightly longer: Add/Modify buttons are in div.repcontrol which immediately follows div.repcontainer, so you could access the Done button with .repcontainer.editmode + .repcontrol .repcontrol_edit Repeating items are each contained within a div.repitem which are collectively the only immediate children of div.repcontainer The first child of div.repitem (immediately before any of the HTML you put into the &lt;fieldset&gt; in your source code) is div.itemcontrol, which is only visible during editmode. .repitem contains the reordering and delete buttons.
Still confused about how clicking the button adds and removes the css class. There's no onclick I can see or checked/selected in the css unless I'm blind. Is it controlled via a script we don't have access to? Basically I just want to see if editmode is active, and if it is... add a width 100% to the macro box division I'm using to hold the repeating macro buttons. &nbsp;I also need to add position relative to itemcontrol.&nbsp;
1468189373

Edited 1468189829
Lithl
Pro
Sheet Author
API Scripter
SkyCaptainXIII said: Still confused about how clicking the button adds and removes the css class. There's no onclick I can see or checked/selected in the css unless I'm blind. Is it controlled via a script we don't have access to? onClick event listeners do not need to be set at the HTML level. Both of these are equally valid: &lt;script type="text/javascript"&gt; function exampleClicked() { alert('example button clicked'); } window.onload = function () { var button = document.getElementById('example'); button.onclick = exampleClicked; } &lt;/script&gt; ... &lt;button id="example"&gt;Example Button&lt;/button&gt; &lt;script type="text/javascript"&gt; function exampleClicked() { alert('example button clicked'); } &lt;/script&gt; ... &lt;button id="example" onclick="exampleClicked()"&gt;Example Button&lt;/button&gt; The former is preferred, as it separates content from behavior. Further, libraries like jQuery (which Roll20 uses) make the first version even easier to write. However, since the .editmode behavior is black-boxed to you, does it really matter how &nbsp;the class is applied? I should think it matters more that &nbsp;the class is applied. However, for completeness's sake, without actually looking at the Roll20 source, it's going to look something like this: $(function() { $('.repcontrol_edit').click(function(e) { var repcontainer = $(this).parent().prev(); e.preventDefault(); if ($(this).text() === 'Modify') { $(this).text('Done') // change button text .next().hide(); // hide add button repcontainer.addClass('editmode'); } else { $(this).text('Modify') .next().show(); repcontainer.removeClass('editmode'); } }); }); SkyCaptainXIII said: Basically I just want to see if editmode is active, and if it is... add a width 100% to the macro box division I'm using to hold the repeating macro buttons. &nbsp;I also need to add position relative to itemcontrol.&nbsp; .repcontainer[data-groupname=repeating_Example].editmode .itemcontrol { position: relative; } .repcontainer[data-groupname=repeating_Example].editmode .sheet-macro-box-division { width: 100%; }
Aha! Much simpler than I thought it would be. Makes sense now. Thank you. That is the last hurdle I needed to clear to get the image as &nbsp;repeating macro buttons to work. :)
However, since the .editmode behavior is black-boxed to you, does it really matter how the class is applied? I should think it matters more that the class is applied. To add to this... yeah, the how is helpful. Helps me understand the workflow of how the css and html are interacting.
Woot! Got it all working now. &nbsp;
1468250751
Lithl
Pro
Sheet Author
API Scripter
That looks pretty cool! Which D&D is this sheet for, anyway?
1468263455

Edited 1468263571
Brian said: That looks pretty cool! Which D&D is this sheet for, anyway? 5e, personal use mostly. Still wish there was a way to use an url from a text field to set the background image of the button. That would make it super awesome.
What about HTML5 contenteditable? Is there some way I could hack that into the macro options box to allow the user to directly edit that portion of the css and accept an url for the background image of the button?
1468269861
Lithl
Pro
Sheet Author
API Scripter
No. Contenteditable basically just lets you turn arbitrary elements (div, generally) into &lt;textarea&gt;-alikes.
Bleh.