Записи с меткой: «javascript»

Нашел тут на просторах сети очень полезный способ сделать версию страницы для печати при помощи media=”print” и media=”screen” которые переключаются Javascript-ом. Вот тут можно посмотреть готовый пример и если заинтересует, то внутри вы найдете подробную инструкцию.
(далее...)

Иногда бывает нужно растянуть скажем DIV на весь экран, но выставление высоты и ширины в 100% делают это долько для видимой области экрана, вот для таких случаем нам пригодится этот код, который позволяет узнать полную высоту и ширину окна вместе со скроллингами и уже эти параметры вписать в width и height нашего дива.

//Размер документа по вертикали
function getDocumentHeight()
{
	return (document.body.scrollHeight > document.body.offsetHeight)?document.body.scrollHeight:document.body.offsetHeight;
}

//Размер документа по горизонтали
function getDocumentWidth()
{
	return (document.body.scrollWidth > document.body.offsetWidth)?document.body.scrollWidth:document.body.offsetWidth;
}

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

Для всего выше сказанного достаточно всего лишь открыть любой сайт над которым вы хотите по измываться и в адресной строке браузера(там где адрес сайта) вставить вот эту строку.

javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

и нажать ENTER. Все теперь можете править все что угодно.

Стали постепенно появляться такие вот разработки, как G.HO.ST - это такой виртуальный удаленный рабочий стол на Flash и JS, которые абсолютно точно в недалеком будущем будут очень востребованы, а в конечном варианте думаю вообще от домашних компов останутся одни терминалы с широким доступом в инет и аккаунтом на подобном сервере.

Удобно когда из любого места, где есть интернет(а сейчас он уже почти везде есть) и браузер с Flash, вы сможете работать со своими документами, программами(пока с многими ограничениями), музыкой и видео и многим другим. Удобно будет конечно, но позже, когда интернет-каналы еще больше распухнут, сделают такую систему не на флеше, а начем нибудь более быстром и с большими возможностями.

Чем это хорошо для разработчиков программ? Софт который продается будет легче обезопасить от взлома, т.к. в руки юзеру он вообще не попадет, а будет после продажи сразу скачиваться и устанавливаться на том вируальном компе (хотя ломают все и там наверное смогут, но от этого будет легче обезопаситься)...

(далее...)

Вон еще один полезный криптик позволяющий реализовать min-width и max-width для броузера IE6. Можно конечно использовать и expression в стилях (ниже есть пример), но говорят он не шипко стабилен и иногда подвешивает браузер.
Этот же пример срабатывает только для IE6 на события onload и onresize.

 <!--[if lte IE 6]>
<script type="text/javascript">
window.attachEvent(‘onload’, mmwidth);
window.attachEvent(‘onresize’, mmwidth);
function mmwidth(){
document.getElementById(‘somediv').style.width = ((document.documentElement.clientWidth ||
    document.body.clientWidth) < 990) ? ‘190px’ :
    ((document.body.clientWidth > 1280) ? ‘1000px’ : ‘1000px’);
};
</script>
<![endif]-->

Это пример с использованием expression в стилях. Может кого и он устроит.

#somediv {
     width:expression(((document.documentElement.clientWidth ||
     document.body.clientWidth) < 990) ? '990px' :
     ((document.body.clientWidth > 1280) ? ‘1280px’ : ‘100%’));
}

Ну и понятное дело все это будет работать только при условии включенного Javascript в броузере IE6 у клиента.

Вот один способ сделать стрелочки в меню при наведении без картинок. Сложного ничего, зато отлично работает работает Пример

файл CSS:

.menu_ico {margin:20px auto;width:200px;}
.menu_ico a {color:red;display:block;font:bold 12px Tahoma,helvetica,sans-serif;position:relative;text-decoration:none;}
.menu_ico a:hover {color:#red;}
.menu_ico dl {font:bold 13px Tahoma,arial;margin:0;padding:10px;}
.menu_ico dt {color:gray;}
.menu_ico dd {list-style-type:none;margin:0;padding:2px 0 0 10px;position:relative;}
.menu_ico dd b {
  border-top:#fff 5px solid;
  border-right:#fff 5px solid;
  border-bottom:#fff 5px solid;
  border-left:red 5px solid;
  display:none;
  position:absolute;left:1px;top:4px;z-index:2;
  overflow:hidden;
  height:1px;
}
.menu_ico dd:hover b {display:block;margin:0 0 0 -6px;}
*html .menu_ico dd {behavior:url(hover.htc);}
*html .menu_ico dd.hover b {display:block;margin:0 0 0 -6px;}

файл html:

<!-- Не забываем описать тип документа -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<!-- Само меню -->
<div class="menu_ico">
<dl>
  <dt>Menu</dt>
  <dd><b></b><a href="#">Menu - 1</a></dd>
  <dd><b></b><a href="#">Menu - 2</a></dd>
  <dd><b></b><a href="#">Menu - 3</a></dd>
  <dd><b></b><a href="#">Menu - 4</a></dd>
</dl>
</div>

Создадим еще файлик Hover.htc с этим кодом, чтобы в IE работал :hover

Файл hover.htc:

<attach for=element event=onmouseover handler=lasto>
<attach for=element event=onmouseout handler=gordi>
<script>
function lasto(){element.className='hover';}
function gordi(){element.className='';}
</script>

Вот выковырял с одного сайта хорошую фишку, TEXTAREA позволяющая менять ее размер по вертикали. Обычная textarea не позволяет такого делать и порой бывает не удобно писать комментарии на сайтах или просто добавлять посты в блог, но теперь это будет не проблема. Проверил ее в Опере ИЕ и ФФ последних, работает на ура! Пример ее работы можно посмотреть тут

Исходники в архиве - Resizable textarea исходники