Форум

SmilingDog · #1 (**permalink**) 07.11.2014, 01:12

Я делаю небольшое расширение для chrome . По задумке у меня в popup.html два блока и кнопка . Один из них основной и виден . Второй , с дополнительной инфой , скрыт . Если нажимать на кнопку он появляется и исчезает .
Если скрытый блок находится под основным проблем вроде бы нет .
Но если я пытаюсь отобразить его слева от основного получается лесница .

Ни через table-cell и float:left решить не удалось . Как я подозреваю , проблема в размере окна. Однако если задать его изначально больше двух блоков ничего не меняется

Собственно код расширения .
popup.html

<!DOCTYPE html>
<html>
<head>
  <meta content="text/html; charset=utf-8" http-equiv="content-type">
  <link rel="stylesheet" href="style.css">
</head>
<body>
		<div class="basiccontainer">		
			Основной контейнер
			<div id="imsg"></div>
		</div>
		
		<div class="button-block">
			<a class="vbutton" id="hiding_btn">Кнопка</a>
		</div>			
		
		<div class="hiddencontainer" id="hidden_text">
			Скрытый контейнер
		</div>
	
	<script src="functions.js"></script>
	
</html>

style.css

.basiccontainer 
{ 
	margin:10px;
	width:300px;
	height:220px;
	border:solid black 1px;
	text-align: center;
	float:left;
}

.hiddencontainer 
{   
	margin:10px; 
	width:300px;
	height:200px;
	text-align: center;
	border:solid black 1px;
	float:left
}

.vbutton {
	width:30px;
    background: #2E8CE3; /* Цвет фона */
    padding: 20px 10px; /* Поля вокруг текста */
	margin: 10px;
    font-size: 13px; /* Размер шрифта */ 
    font-weight: bold; /* Насыщенность шрифта */
    color: #FFFFFF; /* Цвет шрифта */
    text-align: center; /* Надпись на кнопке по центру */
    border: solid 1px #73C8F0; /* Параметры рамки кнопки */ 
    cursor: pointer; /* Изменение вида курсора при наведении*/
	writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl;
}

.button-block {
	float:left;
}

functions.js

function infoButton() {
	var msg = document.getElementById("imsg");
	var hidden_block = document.getElementById("hidden_text");
	var info_btn = document.getElementById("hiding_btn");
	imsg.innerText = "Clicked";
	if(info_btn) {
		if(localStorage["hidden_info"]) {
			localStorage.removeItem("hidden_info");
			hidden_block.style.display="none";
			imsg.innerText = "Hide";
		} else {
			imsg.innerText = "Show";
			localStorage.setItem("hidden_info",1);
			hidden_block.style.display="block";
		}
	}
}

function addWindowCallbacks() {
	var info_btn = document.getElementById("hiding_btn");
	if(info_btn) {
		info_btn.addEventListener("click", infoButton , false);
	}
	
}

document.addEventListener('DOMContentLoaded', addWindowCallbacks,false);

Архив c плагином :
http://my-files.ru/pyh86k

Надеюсь на помощь .

рони · #2 (**permalink**) 07.11.2014, 01:57

SmilingDog,

<!DOCTYPE HTML>



<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
body, html{
   display: table-row;
}
.basiccontainer
{
	margin:10px;
	width:300px;
	height:220px;
	border:solid black 1px;
	text-align: center;
	 display:  table-cell;
}

.hiddencontainer
{
	margin:10px;
	width:300px;
	height:200px;
	text-align: center;
	border:solid black 1px;
	 display: table-cell;
}

.vbutton {
	width:30px;
    background: #2E8CE3; /* Цвет фона */
    padding: 20px 10px; /* Поля вокруг текста */
	margin: 10px;
    font-size: 13px; /* Размер шрифта */
    font-weight: bold; /* Насыщенность шрифта */
    color: #FFFFFF; /* Цвет шрифта */
    text-align: center; /* Надпись на кнопке по центру */
    border: solid 1px #73C8F0; /* Параметры рамки кнопки */
    cursor: pointer; /* Изменение вида курсора при наведении*/
	writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
    display: inline-block;
}

.button-block {
	display: table-cell;
}

  </style>
</head>

<body>   <div class="hiddencontainer" id="hidden_text">
			Скрытый контейнер
		</div>


		<div class="button-block">
			<a class="vbutton" id="hiding_btn">Кнопка</a>
		</div>
       <div class="basiccontainer">
			Основной контейнер
			<div id="imsg"></div>
		</div>

<script>
    function infoButton() {
	var msg = document.getElementById("imsg");
	var hidden_block = document.getElementById("hidden_text");
	var info_btn = document.getElementById("hiding_btn");
	imsg.innerText = "Clicked";
	if(info_btn) {
		if(localStorage["hidden_info"]) {
			localStorage.removeItem("hidden_info");
			hidden_block.style.display="none";
			imsg.innerText = "Hide";
		} else {
			imsg.innerText = "Show";
			localStorage.setItem("hidden_info",1);
			hidden_block.style.display="table-cell";
		}
	}
}

function addWindowCallbacks() {
	var info_btn = document.getElementById("hiding_btn");
	if(info_btn) {
		info_btn.addEventListener("click", infoButton , false);
	}

}

document.addEventListener('DOMContentLoaded', addWindowCallbacks,false);

</script>
</body>

</html>

SmilingDog · #3 (**permalink**) 07.11.2014, 04:01

Большое спасибо

Теперь все действительно работает как я хотел . Правда при этом , по неизвестной причине , игнорируется ширина блоков .
И выглядит все как-то так :

Однако(!) если добавить внутрь существующих блоков вложенные блоки с указанием ширины - все функционирует совершенно как надо

<div class="hiddencontainer" id="hidden_text">
		<div style="width:300px;height:200px;">
				Скрытый контейнер
		</div>
        </div> 

        <div class="button-block">
            <a class="vbutton" id="hiding_btn">Кнопка</a>
        </div>

       <div class="basiccontainer">
	   <div style="width:300px;height:200px;">
				Основной контейнер
            <div id="imsg"></div>
		</div>
        </div>

Наберусь еще наглости спросить : можно ли в принципе получить эффект выдвижения скрытого блока из основного . Т е получить эффект выпадающих вкладок , только не внутрь окна , а наружу ?
Сам код мне не нужен , только примерное направление .

рони · #4 (**permalink**) 07.11.2014, 08:29

Сообщение от SmilingDog

можно ли в принципе получить эффект выдвижения скрытого блока из основного .

можно

Сообщение от SmilingDog

. Т е получить эффект выпадающих вкладок , только не внутрь окна , а наружу ?

??? не понял
один блок над другим - left верхнего увеличиваем - нижний стоит на месте - но как бы "выезжает"
2 способ
ширина скрытого 0 overflow: hidden; - увеличиваем ширину

Форум

Справочник

Discord чат

Курсы javascript