Question

Problem z przyciskami na panelu (ograniczone możliwości ustalania wysokości przycisku oraz rozmiaru czcionki)

Witam.
Mam taki drobny problem, który z pozoru może wydawać się błahostką, ale tak nie jest.
Nad panelem znajdują się 4 przyciski:
[Strona główna] [O stronie] [Ciekawostki] [Kontakt].

Tak to się prezentuje:

http://imageshack.com/a/img922/2531/uGhhNr.jpg
http://imageshack.com/a/img921/9733/4zJ3DT.jpg

Gdy klikam na przycisk [Strona główna], to pozostałe przyciski pojawiają się nad szarym panelem.
Tak samo jest, gdy kliknę na przycisk [O stronie], to także pozostałe przyciski pojawiają się nad szarym panelem.
Zresztą obojętnie na jaki przycisk kliknę, to pozostałe 3 przyciski tak się zachowują.

Gdy kliknę na obojętnie jaki przycisk, to rozmiar czcionki wynosi 16px, a ustawione mam 12px:

.tab
{
	font-size: 12px;
}

Rozmiar czcionki wynosi 12px przy przyciskach, na które nie kliknę. Wolałbym, aby na klikniętym przycisku rozmiar czcionki wynosił 12px.

Co muszę poprawić w kodzie, aby wszystkie 4 przyciski przylegały do panelu i na klikniętym przycisku rozmiar czcionki wynosił 12px?

<div id="tabpanel1" class="tabpanel">
	<ul class="tablist" role="tablist">
		<li id="tab1" class="tab" aria-controls="panel1" role="tab" aria-selected="true" tabindex="0">Strona główna</li>
		<li id="tab2" class="tab" aria-controls="panel2" role="tab" aria-selected="false" tabindex="0">O stronie</li>
		<li id="tab3" class="tab" aria-controls="panel3" role="tab" aria-selected="false" tabindex="0">Ciekawostki</li>
		<li id="tab4" class="tab" aria-controls="panel4" role="tab" aria-selected="false" tabindex="0">Kontakt</li>
	</ul>

	<div id="panel1" class="panel-1" aria-labelledby="tab1" role="tabpanel" aria-hidden="false">

	</div>
</div>

.tabpanel
{
  margin: 0;
}

.tablist
{
  margin: 0 0px;
  padding: 0;
}

.tab
{
	margin-left: 0px;
	width: 180px;
	line-height: 25px;
	border-top-left-radius:.5em;
	border-top-right-radius:.5em;
	background-color: #ec9;
	color: black;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	float: left;
	display: inline;
	margin-right: 8px;
}

.tab:hover
{
	color: white;
	background-color: #0000FF;
	cursor: pointer;
}

.tab:last-child
{
	float: right;
	margin-right: 0px;
}

.panel-1
{
	clear: both;
	width: 1000px;
	height: 322px;
	background-color: #808080;
	border-bottom-left-radius:.5em;
	border-bottom-right-radius:.5em;
	position: relative;
}

	<script type="text/javascript">
		$(document).ready(function() {
			$("li[role='tab']").click(function() {
				$("li[role='tab']:not(this)").attr("aria-selected","false");

				$(this).attr("aria-selected","true");

				var tabpanid= $(this).attr("aria-controls");
				var tabpan = $("#"+tabpanid);
				$("div[role='tabpanel']:not(tabpan)").attr("aria-hidden","true");
				$("div[role='tabpanel']:not(tabpan)").addClass("hidden");

				tabpan.removeClass("hidden");

				tabpan.attr("aria-hidden","false");
			});
		});
	</script>

 

Answer 1

Niech zgadnę... Ten kod js to na żywca skopiowany z neta, tak? :) A co do problemu: Wejdź na stronę, kliknij przycisk, następnie kliknij na niego prawym -> zbadaj element, następnie znajdź kod swojego przycisku, zobacz jakie ma klasy i skopiuj je. Ten twój kod js dodaje jakąś klasę do przycisku.

Comments

Kod JS skopiowałem z neta, ale ten kod raczej nie ma wpływu na ustalanie wysokości przycisku oraz rozmiaru czcionki. Wysokość przycisku po wciśnięciu wynosi minimum 40px, a rozmiar czcionki wynosi minimum 16px. Szkoda, że nie ma możliwości ustalania tych parametrów pod swój gust. To tak, jakby to były wartości domyślne.

Podany kod JS wkleiłem tutaj skrócony, bo i tak na tym skróconym wszystko działa tak samo jak na dłuższym.

Dłuższy i cały kod JS wygląda następująco:

$(document).ready(function() {
	$("li[role='tab']").click(function() {
		$("li[role='tab']:not(this)").attr("aria-selected","false");

		$(this).attr("aria-selected","true");

		var tabpanid= $(this).attr("aria-controls");
		var tabpan = $("#"+tabpanid);
		$("div[role='tabpanel']:not(tabpan)").attr("aria-hidden","true");
		$("div[role='tabpanel']:not(tabpan)").addClass("hidden");

		tabpan.removeClass("hidden");

		tabpan.attr("aria-hidden","false");
	});

	$("li[role='tab']").keydown(function(ev) {
		if (ev.which ==13) {
			$(this).click();
		}
	});

	$("li[role='tab']").keydown(function(ev) {
		if ((ev.which ==39)||(ev.which ==37)) {
			var selected= $(this).attr("aria-selected");
			if  (selected =="true") {
					$("li[aria-selected='false']").attr("aria-selected","true").focus();
					$(this).attr("aria-selected","false");

					  var tabpanid= $("li[aria-selected='true']").attr("aria-controls");
					   var tabpan = $("#"+tabpanid);
				$("div[role='tabpanel']:not(tabpan)").attr("aria-hidden","true");
				$("div[role='tabpanel']:not(tabpan)").addClass("hidden");

				tabpan.attr("aria-hidden","false");
				tabpan.removeClass("hidden");
			}
		}
	});

});

Jesteś pewny na 100%, że kod JS dodaje jakąś klasę do przycisku?

---

Tak jestem pewien:

$("div[role='tabpanel']:not(tabpan)").addClass("hidden");

Z jakiego frameworka/pluginu korzystasz? coś musi być na rzeczy. Zrób tak, jak pisałem wcześniej, zobacz co dodaje ten kod. Pozwól, że zacytuję sam siebie:

Wejdź na stronę, kliknij przycisk, następnie kliknij na niego prawym -> zbadaj element, następnie znajdź kod swojego przycisku, zobacz jakie ma klasy i skopiuj je. Ten twój kod js dodaje jakąś klasę do przycisku.

---

Tworzę stronę przy pomocy Notepad++, to dobry edytor do tworzenia strony - przynajmniej tak uważam. Czy w tym Notepad++ może brakować jakiegoś dodatku/pluginu, że tak to działa, a nie inaczej? Strony jeszcze nie wrzucałem do sieci, bo jeszcze przede mną sporo pracy.

Ja ten swój kod analizowałem sporo razy, a kod HTML, CSS i JS zaczerpnąłem dawno temu ze strony, której niestety nie pamiętam.

Ale znalazłem inną stronę w tym temacie i na niej się aktualnie wzorowałem:

http://oaa-accessibility.org/examplep/tabpanel2/

Zauważ, że na tej stronie kod HTML i CSS jest w 95% taki sam jak u mnie, tylko JS jest zupełnie inny. Kod JS na tej stronie jest wielokrotnie dłuższy. Ten dłuższy kod JS zastąpiłem tym skróconym i okazało się, że ten dłuższy narobił niezłego bałaganu u mnie na stronie. Dlatego aktualnie korzystam ze skróconego JS, który zawiera 41 linijek.

---

Wobec tego co powinienem poprawić w kodzie JS, skoro ta linijka kodu dodaje jakąś klasę do przycisku?:

$("div[role='tabpanel']:not(tabpan)").addClass("hidden");

Z tej linijki wynika, że dodaje ukrytą klasę. Zamiast hidden mam wpisać true?

Answer 2

Na podglądzie nie widzę problemu http://codepen.io/jaca121212/pen/gMgjZz

Jeśli  masz swoją stronę wrzuconą  do sieci podaj link tej strony.

Comments

Już wiem co było przyczyną, że przyciski "nie kliknięte" nie przylegały do panelu. Dla testu ustaliłem wysokość przycisku 25px i rozmiar czcionki 12px.

W CSS musiałem wprowadzić drobne poprawki do:

li[aria-selected='true']
{
	background-color: #0000FF;
	color: white;
	font-size: 12px;
	width: 180px;
	line-height: 25px;
	text-align: center;
}

i teraz wszystkie przyciski przylegają do panelu (obojętnie czy "kliknięte" czy "nie kliknięte").

 

Oczywiście, aby to w pełni zadziałało, to musiałem jeszcze do:

.tab
{
	line-height: 25px;
	font-size: 12px;
}

wpisać wysokość przycisku 25px i rozmiar czcionki 12px.

Ta kwestia jest ogarnięta. Pozostała jeszcze jedna kwestia w tym temacie, która mnie drażni.

Gdy najeżdżam kursorem na przycisk nr 3 [Ciekawostki] oraz na przycisk nr 4 [Kontakt], to podświetlenie tych obu przycisków (hover) nie działa do końca tak jak powinno. Dopiero, gdy najadę kursorem na połowę przycisku nr 3 i nr 4, to przycisk się podświetla.

Za podświetlenie tych wszystkich przycisków odpowiada:

.tab:hover
{
	color: white;
	background-color: #0000FF;
	cursor: pointer;
	line-height: 25px;
}

ale nawet line-height: 25px nie przyniosło efektu.

Podświetlenie przycisku nr 1 [Strona główna] i przycisku nr 2 [O stronie] jest OK.

Co jest przyczyną, że podświetlenie przycisku nr 3 i nr 4 nie działa tak samo dobrze jak przycisk nr 1 i nr 2?

---

Pewnie tekst wyjeżdża poza swojego boxa, którego podświetlasz.

Naciśnij F12, o ile to chrome, i wciśnij: Ctrl + Shift + C, nastpęnie najedź myszką na swój tekst, i zobacz, czy wpasuje się w boxa długością.

---

Używam Firefoxa, a nie Chrome.

---

Wiem już co jest przyczyną, że hover nie działa do końca na przycisku nr 3 i nr 4. Po prawej stronie mam umieszczony obrazek z przeźroczystym tłem i "niewidzialne" tło tego obrazka częściowo najeżdża na fragment tych obu przycisków, stąd ta blokada.