Web-интерфейс

  • Автор темы Автор темы AnaStas
  • Дата начала Дата начала
A

AnaStas

Добрый день. Прошу проконсультировать.
Задание: На одну из HTML страничек отдельского сайта нужно закодировать визитки(карточки) на каждого сотрудника отдела. По клику мышкой на фамилии сотрудника карточка всплывает
Использую: Ну, для описания карточки стандарт vcard HTML. А для обработки события использую готовый CSS пакет highslide.
Проблема: Все работает. Но, главному не нравится следующее:
1. Если карточку сдвинуть по экрану мышкой, она запоминает свою последнюю позицию и при новом событии она открывается не на строчке с фамилией, а в том месте где ее закрыли. Этого я никак не могу избежать.
2. Совсем не желательно мышкой растягивать рамку. Тоже не могу зафиксировать.
Что посоветуют модераторы?
 
почитать справку по хайслайду. Все это наветрняка настраивается.

Еще изменение размера можно запретить установив max-width,max-height в CSS в соотв-м классе.
 
Возвращаюсь к данной теме только для того, чтобы она имела завершенный вид (т.е. приемлемое по данному вопросу решение) и тему можно считать закрытой.
Используя справочник по пакету highslide. , код для данной темы был создан таки:

Код:
<html>
<title>Структура отела</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
. . . . .
<link rel="stylesheet" type="text/css" href="highslide/highslide.css">
<script type="text/javascript" src="highslide/highslide-with-html.js"></script>
</head>

<body>
<script type="text/javascript">
<!--
hs.showCredits = false;

function toggle(div,show,displ) {
var ele = document.getElementById(div);
var text = document.getElementById(displ);
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = show;
}
else {
ele.style.display = "block";
text.innerHTML = show;
}
}
--> 
</script>

<h1><img src="/img/oxygen/48x48/mimetypes/document.png"> Структура отдела</h1>
<h3>Подразделение № 100</h3>
<!—и далее на каждого сотрудника блок div class="textwrapper 
<div class="textwrapper">
Начальник установки -
<span class="highslide" style="cursor:pointer;"
onClick="return hs.htmlExpand(this,{contentId:'card110',outlineType:'rounded-white'})">
Сидоров П.И.
</span>
<div class="highslide-html-content" id="card110">
<div class="highslide-header"><a href="#" onclick="return hs.close(this);">Сидоров Петр Иванович</a></div>
<div class="highslide-body">
<div class="vcard"><table ><tr><td>
<div class="photo"><img src="/img/oxygen/128x128/actions/user.png" height="128" width="128" style="cursor:pointer;" onclick="return hs.close(this);"></div>
</td><td>
<div style="cursor:pointer" onclick="return hs.close(this);"> 
<div class="fn" style="display:none;">Сидоров Петр Иванович</div>
<div class="title"></div>
<div class="rol">Начальник установки </div>
<div>Телефон:<span class="tel">495-222-...</span></div>
<div>Факс:<span class="tel">495-223-...</span></div>
<div>Мобильный:<span class="tel"></span></div>
</div>
<div>E-mail:<a href="mailto:pisidor@domain.ru" class="email">pisidor@domain.ru</a></div>
</td></tr></table></div>
</div>
</div>
</div>

P.S.
Мы с главным, все-таки, отказались от такого решения (т.е. использовать highslide). Основное назначение этого пакета - оформление Web-галлереи. Если визитка должна иметь простой, без изысков, стиль, то проще все сделать в HTML и несложным небольшим кодом в CSS
 
Мы в соцсетях:

Обучение наступательной кибербезопасности в игровой форме. Начать игру!