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

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

Archive for the 'Javascript' Category

Firebug Lite 1.2

July 28th, 2008 | Category: Firebug, Javascript

Вышла новая версия Firebug Lite. Теперь можно дебагить свои скрипты в Safari, IE и Опере. В новой версии можно делать Inspect DOM элементов, следить за XHR запросами, и смотреть сгенерированный HTML, CSS и Javascript.

Firebug Lite

11 comments

qUIpt: кэшинг для джаваскрипта

July 08th, 2008 | Category: Javascript

Mario Heiderich выпустил qUIpt, библиотеку которая использует window.name для хранения различных данных. В его примере - для хранения джаваскрипта.

Работает скрипт довольно просто. qUIpt загружает другие джаваскрипт файлы на странице и сохраняет их содержимое в window.name. При следующем запросе джаваскрипт загружается уже из window.name.

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

8 comments

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

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

6 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() соответственно эту куки сажать.

8 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

Next Page »