Ajax Russia : Аякс по-русски

Свежие новости из мира IT

Archive for the 'Javascript' Category

Drag & drop для HTML таблиц

July 02nd, 2008 | Category: Javascript

Представляю вашему вниманию новый скрипт от Dan Vanderkam‘a. Называется скрипт dragtable и он добавляет к столбцам таблиц функциональность drag & drop. Пользоваться скриптом очень просто. Достаточно его подгрузить и к нужной таблице добавить CSS класс draggable.

Пример (На моём сайте скрипт немного глючит. Какие то конфликты с CSS от Wordpress):

Сайт Тип Число
ajaxrussia.com Новости 123
google.com Поиск 456
apple.com гаджеты 789

В своей статье автор скрипта показывает как можно добавить к таблицам сортировку.

5 comments

Подгружаем картинки с Prototype

June 30th, 2008 | Category: CSS, Javascript, Prototype

Все читали статью Подгружаем картинки с jQuery? Довольно таки забавный скрипт. Захотел вставить его на свою страницу и вспомнил, что на ней совсем не jQuery, а Prototype. Что же делать? А просто взять и переписать скрипт для Prototype.

Работает новый скрипт точно также. Парсит CSS стили на странице, достаёт из них все картинки и подгружает их. Единственное что я не стал делать, это систему оповещения о статусе загрузки. Мне это не надо, но сделать это не сложно. Сравните мой код с плагином jQuery и будет ясно куда этот вставить.

PLAIN TEXT
JavaScript:
  1. var AjaxRussia = {};
  2. AjaxRussia.ImagePreloader = Class.create({
  3.  
  4.   initialize: function(){
  5.  
  6.     $A(document.styleSheets).each(function(sheet){
  7.       var cssPile = '';
  8.       var csshref = (sheet.href) ? sheet.href : 'window.location.href';
  9.       var baseURLarr = csshref.split('/');
  10.       baseURLarr.pop();
  11.       var baseURL = baseURLarr.join('/');
  12.       if (!baseURL.blank())
  13.         baseURL += '/';
  14.       if (sheet.cssRules) {
  15.         var thisSheetRules = sheet.cssRules;
  16.         $A(thisSheetRules).each(function(rule){
  17.           cssPile += rule.cssText;
  18.         });
  19.       }
  20.       else {
  21.         cssPile += sheet.cssText;
  22.       }
  23.      
  24.       var imgUrls = cssPile.match(/[^\(]+\.(gif|jpg|jpeg|png)/g);
  25.       if (imgUrls != null && imgUrls.length> 0 && imgUrls != '') {
  26.         $A(imgUrls).each(function(url){
  27.           var image = new Image();
  28.           image.src = (url.charAt(0) == '/' || url.match('http://')) ? url : baseURL + url;
  29.         });
  30.       }
  31.     });
  32.   }
  33. });

Использовать скрипт просто:

PLAIN TEXT
JavaScript:
  1. new AjaxRussia.ImagePreloader();

Только не надо этот код просто так писать на страницу. Иначе при каждой загрузке страницы CSS будет заново парситься. Я наверное буду вызывать AjaxRussia.ImagePreloader() только если у пользователя нету определённого куки. Ну а после работы AjaxRussia.ImagePreloader() соответственно эту куки сажать.

6 comments

Подгружаем картинки с jQuery

June 23rd, 2008 | Category: CSS, Javascript, jQuery

Всем привет. Давненько не обновлял блог. Ездил в Питер на недельку, отдыхал, в интернет заходил редко да и то в основном на телефоне. Сейчас я снова в Гамбурге и постараюсь обновлять блог чаще, если только футбол не помешает :)

Вчера увидел интересный трюк, как подгружать картинки с jQuery. Все наверное сталкивались с такой ситуацией - надо показать какой нибудь модальный диалог, или lightbox. Так вот загружается этот lightbox, его уже видно, а какие нибудь картинки для бэкграунда ещё не загрузились. И пока они не загрузятся - выглядит такой lightbox тогда не очень красиво.

Решить такую проблему довольно просто. Надо чтобы браузер заранее загрузил все картинки, которые используются в CSS. Scott Jehl написал плагин для jQuery, который делает именно это.

PLAIN TEXT
JavaScript:
  1. /**
  2. * --------------------------------------------------------------------
  3. * jQuery-Plugin "preloadCssImages"
  4. * by Scott Jehl, scott@filamentgroup.com
  5. * http://www.filamentgroup.com
  6. * reference article: http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/
  7. * demo page: http://www.filamentgroup.com/examples/preloadImages/index_v2.php
  8. *
  9. * Copyright (c) 2008 Filament Group, Inc
  10. * Dual licensed under the MIT (filamentgroup.com/examples/mit-license.txt) and GPL (filamentgroup.com/examples/gpl-license.txt) licenses.
  11. *
  12. * Version: 3.0, 06.21.2008
  13. * Changelog:
  14. *  02.20.2008 initial Version 1.0
  15. *    06.04.2008 Version 2.0 : removed need for any passed arguments. Images load from any and all directories.
  16. *    06.21.2008 Version 3.0 : Added options for loading status. Fixed IE abs image path bug (Thanks Sam Pohlenz).
  17. * --------------------------------------------------------------------
  18. */
  19. jQuery.preloadCssImages = function(settings){
  20.     var settings = jQuery.extend({
  21.         statusTextEl: null,
  22.         statusBarEl: null
  23.     }, settings);
  24.    
  25.     var allImgs = [];//new array for all the image urls 
  26.     var k = 0; //iterator for adding images
  27.     var sheets = document.styleSheets;//array of stylesheets
  28.    
  29.     for(var i = 0; i<sheets.length; i++){//loop through each stylesheet
  30.         var cssPile = '';//create large string of all css rules in sheet
  31.         var csshref = (sheets[ i ].href) ? sheets[ i ].href : 'window.location.href';
  32.         var baseURLarr = csshref.split('/');//split href at / to make array
  33.         baseURLarr.pop();//remove file path from baseURL array
  34.         var baseURL = baseURLarr.join('/');//create base url for the images in this sheet (css file's dir)
  35.         if(baseURL!="") baseURL+='/'; //tack on a / if needed
  36.         if(document.styleSheets[ i ].cssRules){//w3
  37.             var thisSheetRules = document.styleSheets[ i ].cssRules; //w3
  38.             for(var j = 0; j<thisSheetRules.length; j++){
  39.                 cssPile+= thisSheetRules[j].cssText;
  40.             }
  41.         }
  42.         else {
  43.             cssPile+= document.styleSheets[ i ].cssText;
  44.         }
  45.        
  46.         //parse cssPile for image urls and load them into the DOM
  47.         var imgUrls = cssPile.match(/[^\(]+\.(gif|jpg|jpeg|png)/g);//reg ex to get a string of between a "(" and a ".filename"
  48.         var loaded = 0; //number of images loaded
  49.         if(imgUrls != null && imgUrls.length>0 && imgUrls != ''){//loop array\
  50.             var arr = jQuery.makeArray(imgUrls);//create array from regex obj   
  51.             jQuery(arr).each(function(){
  52.                 allImgs[ k ] = new Image(); //new img obj
  53.                 allImgs[ k ].src = (this.charAt(0) == '/' || this.match('http://')) ? this : baseURL + this;    //set src either absolute or rel to css dir
  54.                
  55.                 $(allImgs[ k ]).load(function(){
  56.                         loaded++;
  57.                         //send updates to status elements if applicable
  58.                         if(settings.statusTextEl) {$(settings.statusTextEl).html('<span class="numLoaded">'+loaded+'</span> of <span class="numTotal">'+allImgs.length+'</span> loaded (<span class="percentLoaded">'+(loaded/allImgs.length*100).toFixed(0)+'%</span>) <span class="currentImg">Now Loading: <span>'+allImgs[loaded-1].src.split('/')[allImgs[loaded-1].src.split('/').length-1]+'</span></span>');
  59.                     }
  60.                     if(settings.statusBarEl) {
  61.                         var barWidth = $(settings.statusBarEl).width();
  62.                         $(settings.statusBarEl).css('background-position', -(barWidth-(barWidth*loaded/allImgs.length).toFixed(0))+'px 50%');
  63.                     }
  64.                 });
  65.                 k++;
  66.             });
  67.         }
  68.     }//loop
  69.     return allImgs;
  70. }

Этот плагин парсит css и подгружает все найденные картинки. Поэтому когда картинки понадобятся - они появятся мгновенно.

2 comments

Javascript Lazy Loading

June 09th, 2008 | Category: Javascript

Сам недавно с подобным столкнулся. Написал джаваскрипт класс, который будет использоваться довольно редко. Размер у файла получился довольно большой и стало жалко траффика. Что делать?

А делать надо вот что - подгружать этот файл только тогда, когда это действительно надо. Сделать это довольно просто со следующим скриптом.

PLAIN TEXT
JavaScript:
  1. /** 
  2. *  Script lazy loader 0.5
  3. *  Copyright (c) 2008 Bob Matsuoka
  4. *  This program is free software; you can redistribute it and/or
  5. *  modify it under the terms of the GNU General Public License
  6. *  as published by the Free Software Foundation; either version 2
  7. *  of the License, or (at your option) any later version.
  8. */
  9. var LazyLoader = {}; //namespace
  10. LazyLoader.timer = {}; // contains timers for scripts
  11. LazyLoader.scripts = []; // contains called script references
  12. LazyLoader.load = function(url, callback){
  13.  
  14.     // handle object or path
  15.     var classname = null;
  16.     var properties = null;
  17.    
  18.     try {
  19.         // make sure we only load once
  20.         if ($A(LazyLoader.scripts).indexOf(url) == -1) {
  21.             // note that we loaded already
  22.             LazyLoader.scripts.push(url);
  23.             var script = document.createElement("script");
  24.             script.src = url;
  25.             script.type = "text/javascript";
  26.             $$("head")[0].appendChild(script); // add script tag to head element
  27.             // was a callback requested
  28.             if (callback) {
  29.                 // test for onreadystatechange to trigger callback
  30.                 script.onreadystatechange = function(){
  31.                     if (script.readyState == 'loaded' || script.readyState == 'complete') {
  32.                         callback();
  33.                     }
  34.                 }
  35.                 // test for onload to trigger callback
  36.                 script.onload = function(){
  37.                     callback();
  38.                     return;
  39.                 }
  40.                 // safari doesn't support either onload or readystate, create a timer
  41.                 // only way to do this in safari
  42.                 if ((Prototype.Browser.WebKit && !navigator.userAgent.match(/Version\/3/)) || Prototype.Browser.Opera) { // sniff
  43.                     LazyLoader.timer[url] = setInterval(function(){
  44.                         if (/loaded|complete/.test(document.readyState)) {
  45.                             clearInterval(LazyLoader.timer[url]);
  46.                             callback(); // call the callback handler
  47.                         }
  48.                     }, 10);
  49.                 }
  50.             }
  51.         }
  52.         else {
  53.             if (callback) {
  54.                 callback();
  55.             }
  56.         }
  57.     }
  58.     catch (e) {
  59.         alert(e);
  60.     }
  61. }

Использовать очень просто. Можно или просто подгрузить нужный файл:

PLAIN TEXT
JavaScript:
  1. LazyLoader.load('js/ajaxrussia.js');

Или погрузить с callbacks. Tо есть чтобы сразу после загрузки выполнить какую нибудь функцию:

PLAIN TEXT
JavaScript:
  1. LazyLoader.load('js/ajaxrussia.js', function(){
  2.     var test= new AjaxRussia('test');
  3. });

Для работы скрипта нужен Prototype.

6 comments

Хостим Javascript на Google

May 28th, 2008 | Category: API, Ajax, Google, Javascript, Script.aculo.us, jQuery

Вам никогда не приходила в голову мысль, как было бы здорово если все сайты хостили популярные джаваскрипт библиотеки на одном сервере? Только подумайте сколько траффика это бы всем сэкономило. Зашёл на один сайт, например Digg.com, браузер скачал ихний jQuery, потом перешёл на другой сайт, где используется тот же скрипт и уже скачивать ничего не надо. На Yahoo уже давно это делали для YUI, так а почему этого нету для других библиотек? Теперь есть!

Ребята из Google AJAX Libraries API объявили, что теперь будут хостить все популярные библиотеки на серверах Google. Больше не придётся думать о кэшинге, gzip-е, хостинге, трффике и тд. На данный момент поддерживаются Prototype, Script.aculo.us, jQuery, Dojo и MooTools. Read more

7 comments

Next Page »