User:Hoskir - Revision history

Hoskir: /* Dropdowns in dropdowns */

2026-02-02T21:25:03Z

Dropdowns in dropdowns

← Older revision		Revision as of 16:25, 2 February 2026
Line 727:		Line 727:


	<span class="link-wrapper">[[Target Page~~\|The Link Text]~~]</span>		<span class="link-wrapper">[https://www.google.com Target Page]</span>

Hoskir: /* Dropdowns in dropdowns */

2026-02-02T21:17:29Z

Dropdowns in dropdowns

← Older revision		Revision as of 16:17, 2 February 2026
Line 727:		Line 727:


	<span class="link-wrapper~~" style="color:green; border-bottom:1px dotted #000;~~">[[Target Page\|The Link Text]]</span>		<span class="link-wrapper">[[Target Page\|The Link Text]]</span>

Hoskir: /* Dropdowns in dropdowns */

2026-02-02T21:11:49Z

Dropdowns in dropdowns

← Older revision		Revision as of 16:11, 2 February 2026
Line 725:		Line 725:

	You can add <span title="blah blah blah" style="color:green; border-bottom:1px dotted #000;">[https://www.google.com google]</span>, but it looks like you cannot add html links to the tooltip		You can add <span title="blah blah blah" style="color:green; border-bottom:1px dotted #000;">[https://www.google.com google]</span>, but it looks like you cannot add html links to the tooltip


			<span class="link-wrapper" style="color:green; border-bottom:1px dotted #000;">[[Target Page\|The Link Text]]</span>

Hoskir: /* Dropdowns in dropdowns */

2026-02-02T20:38:39Z

Dropdowns in dropdowns

← Older revision		Revision as of 15:38, 2 February 2026
Line 724:		Line 724:


	You can add <span title="~~type text here [https://www.google.com]~~" style="color:green; border-bottom:1px dotted #000;">~~normal text with a tooltip~~</span>, but it looks like you cannot add html links to the tooltip		You can add <span title="blah blah blah" style="color:green; border-bottom:1px dotted #000;">[https://www.google.com google]</span>, but it looks like you cannot add html links to the tooltip

Hoskir at 18:46, 23 January 2026

2026-01-23T18:46:53Z

← Older revision		Revision as of 13:46, 23 January 2026
Line 107:		Line 107:

	= Installation =		= Installation =
	~~{{ExtensionInstall\|Tabs}}~~

	= Configuration =		= Configuration =

Hoskir at 18:46, 23 January 2026

2026-01-23T18:46:02Z

← Older revision		Revision as of 13:46, 23 January 2026
Line 104:		Line 104:
	-----		-----

	~~{{TOC\|limit=4}}~~

	= Installation =		= Installation =

Hoskir at 16:10, 28 May 2025

2025-05-28T16:10:08Z

← Older revision		Revision as of 11:10, 28 May 2025
Line 63:		Line 63:
	</div>		</div>


			<span title="tooltip here" style="color:green">normal text</span>

	<tab dropdown bgcolor="salmon}body{font-weight:bold;">		<tab dropdown bgcolor="salmon}body{font-weight:bold;">
Line 718:		Line 720:
	{{#tag:tab\|Here's a dropdown inside a dropdown, but not in any list\|dropdown=true}}		{{#tag:tab\|Here's a dropdown inside a dropdown, but not in any list\|dropdown=true}}
	</tab>		</tab>




			You can add <span title="type text here [https://www.google.com]" style="color:green; border-bottom:1px dotted #000;">normal text with a tooltip</span>, but it looks like you cannot add html links to the tooltip

Hoskir at 14:06, 29 April 2025

2025-04-29T14:06:53Z

Hoskir at 21:17, 14 February 2025

2025-02-14T21:17:28Z

Show changes

Hoskir at 18:56, 14 February 2025

2025-02-14T18:56:21Z

← Older revision		Revision as of 13:56, 14 February 2025
Line 1:		Line 1:
	{{#css:MyStyles.css}}		{{#css:MyStyles.css}}

			{{#css:
			.my0 {
			width:100%;
			overflow:auto;
			}

	<div id="your_div_id" style="background-color:#FFF4A3;">		.my1 {
			width:33%;
			float:left;
			}

			.your_div_id {
			width: 600px;
			margin:0 auto;
			text-align: center;
			}
			}}


			<div class="your_div_id" style="background-color:#FFF4A3;">
	<h2>London</h2>		<h2>London</h2>
	<p>London is the capital city of England.</p>		<p>London is the capital city of England.</p>
Line 17:		Line 35:
	<p>London has over 9 million inhabitants.</p>		<p>London has over 9 million inhabitants.</p>
	</div>		</div>
	<div class="~~mydiv~~" style="background-color:#FFC0C7;">		<div class="my1" style="background-color:#FFC0C7;">
	<h2>Oslo</h2>		<h2>Oslo</h2>
	<p>Oslo is the capital city of Norway.</p>		<p>Oslo is the capital city of Norway.</p>
	<p>Oslo has over 700,000 inhabitants.</p>		<p>Oslo has over 700,000 inhabitants.</p>
	</div>		</div>
	<div class="~~mydiv~~" style="background-color:#D9EEE1;">		<div class="my1" style="background-color:#D9EEE1;">
	<h2>Rome</h2>		<h2>Rome</h2>
	<p>Rome is the capital city of Italy.</p>		<p>Rome is the capital city of Italy.</p>

← Older revision		Revision as of 09:06, 29 April 2025
Line 4:		Line 4:
	\|style=color:{{#if:{{{1\|}}}\|green\|red}} }}		\|style=color:{{#if:{{{1\|}}}\|green\|red}} }}

			<math>F_y=60 \ ksi</math>
	{{#css:MyStyles.css}}		{{#css:MyStyles.css}}

Line 124:		Line 124:
	'''Note:''' - This extension uses the <code>bgcolor</code> attribute for dropdown menus. This is in no way meant as encouragement for the use of this deprecated attribute anywhere other than this tag.		'''Note:''' - This extension uses the <code>bgcolor</code> attribute for dropdown menus. This is in no way meant as encouragement for the use of this deprecated attribute anywhere other than this tag.

	For both the <code><tab></code> and <code><tabs></code> tags, parser functions ''can'' be used within the content of the tag, but ''not'' in the attributes. To use parser functions within the attributes, the <code>#tag:tabs</code> or <code>#tag:tab</code> parser functions should be used. The [[#Parser function\|<code>#tab</code> parser function]] will also work, but since the only attributes it can define are the <code>index</code> and <code>name</code> attributes, these don't allow complete support.		For both the <code><tab></code> and <code><tabs></code> tags, parser functions ''can'' be used within the content of the tag, but ''not'' in the attributes. To use parser functions within the attributes, the <code>#tag:tabs</code> or <code>#tag:tab</code> parser functions should be used. The [[User:Hoskir#Parser function\|<code>#tab</code> parser function]] will also work, but since the only attributes it can define are the <code>index</code> and <code>name</code> attributes, these don't allow complete support.

	For example, this will not work:		For example, this will not work:
Line 424:		Line 424:
	\|<code style="color: green;"><nowiki>{{#tab:name1/#1, , name3/#3, name4/#4\|content 1\|content 2\| \|content 4}}</nowiki></code>		\|<code style="color: green;"><nowiki>{{#tab:name1/#1, , name3/#3, name4/#4\|content 1\|content 2\| \|content 4}}</nowiki></code>
	\|The second tab will automatically get <code>index="2"</code>, and the third tab will have no content:		\|The second tab will automatically get <code>index="2"</code>, and the third tab will have no content:
	*If the third tab has a name defined in the list of names, then it becomes a [[#Self-closing tabs\|self-closing tag]].		*If the third tab has a name defined in the list of names, then it becomes a [[User:Hoskir#Self-closing tabs\|self-closing tag]].
	*If the third tab has an index defined, this tab is skipped, and no output is generated for this tab.		*If the third tab has an index defined, this tab is skipped, and no output is generated for this tab.
	\|-		\|-
	\|<code style="color: green;"><nowiki>{{#tab:name1, name2, name3...}}</nowiki></code>		\|<code style="color: green;"><nowiki>{{#tab:name1, name2, name3...}}</nowiki></code>
	\|This will define three tabs, "name1", "name2" and "name3" using the [[#Self-closing tabs\|self-closing syntax]].		\|This will define three tabs, "name1", "name2" and "name3" using the [[User:Hoskir#Self-closing tabs\|self-closing syntax]].
	\|-		\|-
	\|<code style="color: green;"><nowiki>{{#tab:#3, #5\|content 3\|content 5}}</nowiki></code>		\|<code style="color: green;"><nowiki>{{#tab:#3, #5\|content 3\|content 5}}</nowiki></code>
Line 543:		Line 543:
	==== Predefining tabs and reference syntax ====		==== Predefining tabs and reference syntax ====

	Tabs can be predefined via either [[#Self-closing tabs\|self-closing tabs]] or the [[#Parser function\|parser function]]. This tab menu's third tab also uses the reference syntax for the parser function.		Tabs can be predefined via either [[User:Hoskir#Self-closing tabs\|self-closing tabs]] or the [[User:Hoskir#Parser function\|parser function]]. This tab menu's third tab also uses the reference syntax for the parser function.

	<tab openname="Show code" closename="Hide code" collapsed block style="max-width:100%;"><pre style="overflow:auto;">		<tab openname="Show code" closename="Hide code" collapsed block style="max-width:100%;"><pre style="overflow:auto;">
Line 651:		Line 651:
	If you want to place a toggle box or dropdown menu inside a tab menu, you can simply place a <code><tab></code> tag inside the <code><tab></code> tag that functions as a tab. This will restrict toggle boxes and dropdowns to visibility in just one tab though. So, if you want to have a toggle box or dropdown that's visible in every tab, encase it in a <code><tab></code> tag with an <code>index="*"</code> set to it.		If you want to place a toggle box or dropdown menu inside a tab menu, you can simply place a <code><tab></code> tag inside the <code><tab></code> tag that functions as a tab. This will restrict toggle boxes and dropdowns to visibility in just one tab though. So, if you want to have a toggle box or dropdown that's visible in every tab, encase it in a <code><tab></code> tag with an <code>index="*"</code> set to it.

	That way, the outer <code><tab></code> tag will be recognised as a tab container, and the inner one will be recognised as a toggle box or dropdown menu, as desired. The toggle box or dropdown must then also use the [[#Nested combinations\|parser function syntax]].		That way, the outer <code><tab></code> tag will be recognised as a tab container, and the inner one will be recognised as a toggle box or dropdown menu, as desired. The toggle box or dropdown must then also use the [[User:Hoskir#Nested combinations\|parser function syntax]].

	If you want the contents of the toggle box inside the tab menu to be able to change depending on the selected tab, you should use the <code>nested="true"</code> attribute on the tag. This can be done by setting the very last argument of the <code>#tab:</code> parser function or the <code>#tag:tab</code> parser function to <code>nested=true</code>.		If you want the contents of the toggle box inside the tab menu to be able to change depending on the selected tab, you should use the <code>nested="true"</code> attribute on the tag. This can be done by setting the very last argument of the <code>#tab:</code> parser function or the <code>#tag:tab</code> parser function to <code>nested=true</code>.