Attention:

Support Rules and Guidelines
Before you post your support topic, please remember to:
  • Read the support forum rules.
  • Check the wiki and use search to see if your problem can be answered there first.
  • Link your board please, and make sure that the problem on your board is visible to guests or provide a test account.
  • Do not post Board Wrappers and CSS unless requested. With a board link, this is not necessary.
  • Be as descriptive as you can and use as many details as possible when describing your problem.
  • Please briefly mark any links to forums that may not be work-safe.
This will help ensure your support issue will be attended to in a quick and efficient manner.

Pages: (2) 1 2  ( Go to first unread post ) Add ReplyNew TopicNew Poll

 Tabs BB Code
#
Same as the question on the tables, which I have mostly gotten to work. Is there any way to set up a BB code for tabs in jcink?
#
It requires some JavaScript.

signature
user posted image
#
Where would I go about finding and installing the javascript?
#
You could do it entirely without Javascript by using a parameter as part of the ID and for attributes for radio buttons/checkboxes and labels, I think, using the sibling selector.

This post has been edited by Dusty: Jun 24 2018, 09:19 PM
PM
#
Wouldn't you need a click event to trigger for hiding/showing the tab content?

signature
user posted image
#
Nah, you can utilize the :checked pseudo class, like so:

CODE
div.tabcontent {
 display:none;
}

input.tab1:checked + div.tabcontent {
 display:block;
}


And if need be, you can proof it using :not, like so

CODE
input:not(:checked) + div.tabcontent {
 display:none;
}
PM
#
I understand now, but a checkbox would make for one ugly 'tab' and based on what I'm reading it takes quite a bit of CSS and possibly some extra HTML to style checkboxes. I think OP is basically looking for this: http://s4.zetaboards.com/quozzostestboard/topic/8655540/1/

signature
user posted image
#
You're not wrong, checkboxes and radio buttons would be super ugly for tab UI. Thankfully, the label element exists basically for this reason. A label is an element that can trigger an input, and exists either as a capturing group or a standalone block, and be styled as any regular div.

Check out this fiddle:
JSFiddle

The trade off is, of course, a slightly annoying CSS method to trigger the cascade, which you could argue would be easily done with Javascript. Still, it's not bad practice to limit JS usage, especially as extensions like NoScript become more and more popular - plus, CSS is generally easier to understand, and you can take full advantage of transitioning properties.

This post has been edited by Dusty: Jun 25 2018, 12:44 PM
PM
#
QUOTE (Cory @ Jun 25 2018, 01:33 AM)
I understand now, but a checkbox would make for one ugly 'tab' and based on what I'm reading it takes quite a bit of CSS and possibly some extra HTML to style checkboxes. I think OP is basically looking for this: http://s4.zetaboards.com/quozzostestboard/topic/8655540/1/

Pretty much. Is there any way to do something similar for jcink? Installing java into the board shouldn't be an issue, as long as its accessible through the ACP.

This post has been edited by Adorn12: Jun 25 2018, 01:06 PM
#
Would you like to use Dusty's method?

signature
user posted image
#
To be honest, I was more curious and just exploring how it would be done with the parameter system.Given that you would need to somehow set the group name and individual IDs, I'd probably recommend using Javascript.
PM
#
Admin CP → Skins & Templates → Board Wrappers → Edit: Below The <% COPYRIGHT %> Tag

CODE
<script type="text/javascript" src="https://files.jcink.net/uploads/cory/Tabs_BBCode.js"></script>

Usage:

CODE
[tabs]
[tab=Title 1]Content 1[/tab]
[tab=Title 2]Content 2[/tab]
[tab=Title 3]Content 3[/tab]
[/tabs]

[tabs=50%]
[tab=Title 1]Content 1[/tab]
[tab=Title 2]Content 2[/tab]
[tab=Title 3]Content 3[/tab]
[/tabs]

signature
user posted image
#
Odd, worked for a minute, then stopped working.
#
Link to the post you're using it on?

signature
user posted image
#
Works perfectly now, guess it just needed some time for the board to adjust to it.

Is there any way to change the border color though? I'd like to turn it into a solid back.
0 User(s) are reading this topic (0 Guests and 0 Anonymous Users)
0 Members:
Share this topic:
« Next Oldest | General Support | Next Newest »

OptionsPages: (2) 1 2  Add ReplyNew TopicNew Poll