Фильтр → Все записи с тегом html

Балансировка тегов. object

09.12.2010

Задача:
Необходимо обеспечить обрезание html текста до определенной длины с балансировкой тегов. Обеспечить полноценную обработку object тегов.

Решение:
Для решения первой части задачи мы возьмем функцию из wordpress, которая называется balance_tags.
Она прекрасно справляется с задачей балансировки тегов до тех пор, пока в тексте не встретится тег object, который содержит вложенные теги param.
Если наша функция truncate обрежет текст на середине тега object? Скажем, таким образом 

<param src=""...

В результате поплывет верстка. Чтобы избежать этого эффекта,
я доработал функцию balance_tags. Алгоритм таков:

1) выгребаем все теги object и засовываем их в массив
2) заменяем их на теги <obj>n</obj>, где n - это порядковый номер тега object
3) обрезаем текст
4) балансируем теги
5) заменяем <obj>n</obj> на соответсвующий тег.

Читать дальше

Категория: php , программирование ,
Теги: php , html ,
Просмотров: 59
Комментарии: 0

Шрифты для web

14.03.2010

Windows fonts / Mac fonts / Font family
Normal style Bold style
Arial, Arial, Helvetica, sans-serif Arial, Arial, Helvetica, sans-serif
Arial Black, Arial Black, Gadget, sans-serif Arial Black, Arial Black, Gadget, sans-serif
Comic Sans MS, Comic Sans MS5, cursive Comic Sans MS, Comic Sans MS5, cursive
Courier New, Courier New, Courier6, monospace Courier New, Courier New, Courier6, monospace
Georgia1, Georgia, serif Georgia1, Georgia, serif
Impact, Impact5, Charcoal6, sans-serif Impact, Impact5, Charcoal6, sans-serif
Lucida Console, Monaco5, monospace Lucida Console, Monaco5, monospace
Lucida Sans Unicode, Lucida Grande, sans-serif Lucida Sans Unicode, Lucida Grande, sans-serif
Palatino Linotype, Book Antiqua3, Palatino6, serif Palatino Linotype, Book Antiqua3, Palatino6, serif
Tahoma, Geneva, sans-serif Tahoma, Geneva, sans-serif
Times New Roman, Times, serif Times New Roman, Times, serif
Trebuchet MS1, Helvetica, sans-serif Trebuchet MS1, Helvetica, sans-serif
Verdana, Verdana, Geneva, sans-serif Verdana, Verdana, Geneva, sans-serif
Symbol, Symbol (Symbol2, Symbol2) Symbol, Symbol (Symbol2, Symbol2)
Webdings, Webdings (Webdings2, Webdings2) Webdings, Webdings (Webdings2, Webdings2)
Wingdings, Zapf Dingbats (Wingdings2Zapf Dingbats2) Wingdings, Zapf Dingbats (Wingdings2Zapf Dingbats2)
MS Sans Serif4, Geneva, sans-serif MS Sans Serif4, Geneva, sans-serif
MS Serif4, New York6, serif MS Serif4, New York6, serif

 

Категория: разное ,
Теги: css , html ,
Просмотров: 311
Комментарии: 0

TinyMCE. Плагин подсветки синтаксиса syntaxhighlighter.

07.12.2009

Для подсветки синтаксиса будем использовать JS библиотеку syntaxhighlighter.
При подключении всех файлов библиотеки, чтобы засветить необходимый код необходимо заключить его в тег <pre>

Например

<pre name="code" class="php">
... some code here ...
</pre>

Чтобы не писать постоянно это обрамление во время редактирование поста или страницы, написан плагин для wysiwyg TinyMCE, который будет делать это за нас.
Качаем плагин и размещаем его в папке tiny_mce/plugins/
Для подключения плагина добавляем изменения в код инициализации редактора

plugins : "......,syntaxhl,......
theme_advanced_buttons1 : ".....,syntaxhl,....

Необходимо заточить плагин под наши нужды. Для этого открываем файл tiny_mce/plugins/syntaxhl/js/dialog.js, ищем строчки:

textarea_output = '<pre class="' + options + ';' + f.syntaxhl_language.value += ';
textarea_output brush:">';
textarea_output += tinyMCEPopup.editor.dom.encode(f.syntaxhl_code.value);
textarea_output += '</pre> '; /* note space at the end, had a bug it was inserting twice? */
tinyMCEPopup.editor.execCommand('mceInsertContent', false, textarea_output);
tinyMCEPopup.close();

и заменяем их на:

f.syntaxhl_code.value = f.syntaxhl_code.value.replace(/</g,'<');  
f.syntaxhl_code.value = f.syntaxhl_code.value.replace(/>/g,'>');  
textarea_output = '<pre name="code" ';  
textarea_output += 'class="' + f.syntaxhl_language.value + '" cols="50" rows="15">';  
textarea_output +=  f.syntaxhl_code.value;  
textarea_output += '</pre> '; /* note space at the end, had a bug it was inserting twice? */  
tinyMCEPopup.editor.execCommand('mceInsertContent', false, textarea_output);  
tinyMCEPopup.close();

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

 
Необходимо учесть, в самом TinyMCE код не светится. Чтобы убедится в работоспособности, достаточно посмотреть исходный HTML код.
Если то, что вы вставили содержится в теге <pre name="code" class="php">.....</pre>, значит все работает.
Теперь необходимо настроить подсветку синтаксиса во фронтенде, следуя инстукциям syntaxhighlighter.

Категория: javascript , программирование ,
Теги: html , javascript , wysiwyg ,
Просмотров: 1629
Комментарии: 3

JS. Основа скрипта для рейтинга.

05.07.2009

Все просто: выбираем звезды, нажимаем, значение фиксируется в hidden поле rating. При сабмите формы значение передается на скрипт-обработчик. При желании можно сделать отправку значения на аяксе.

пишем css:

#chooseRating ul {margin:0px; padding:0px}
#chooseRating ul li {width:28px; height:26px; list-style:none; float:left}
.clear {clear:both}
#ratingLegend {font-family:Verdana; font-size:12px}

пишем js, предварительно подключив jquery последней версии:

$(document).ready(function(){
    $("#chooseRating img").hover(function(){
        $("#chooseRating img").attr("src", "star_off.gif");
        $("#chooseRating img:lt("+($("#rating").val())+")").attr("src", "star_on.gif");
        var id = $(this).attr("id");
        var legend = $(this).attr("alt");
        $("#ratingLegend").html( legend );
        $("#chooseRating img").each(function(n){
            if( $(this).attr("id") == id )
            {
                $("#chooseRating img:lt("+(n+1)+")").attr("src", "star_on.gif");
            }
            $(this).click(function(){
                $("#rating").val(n+1);
                var legend = $("#star_"+(n+1)).attr("alt");
                $("#ratingLegend").html( legend ).fadeOut("slow", function(){$(this).fadeIn()});
            })

        });
    }, function(){
            if( $("#rating").val() == 0 )
            {
                $("#ratingLegend").empty();
            }
            else
            {
                $("#ratingLegend").html( $("#star_"+$("#rating").val()).attr("alt") );
            }
        $("#chooseRating img").attr("src", "star_off.gif");
        $("#chooseRating img:lt("+($("#rating").val())+")").attr("src", "star_on.gif");
    });
});

пишем html:

Необходимо заготовить картинки активных и неактивных звезд и подредактировать пути к картинкам в нашем скрипте.

Категория: javascript , программирование ,
Теги: html , jquery , javascript ,
Просмотров: 523
Комментарии: 0

CSS. height:1px в ie6

04.04.2009

Конструкцию типа

Internet Explorer 6 игнорирует и отображает высотой примерно в 15 пикселей. Чтобы достигнуть корректного отображения во всех браузерах необходимо добавить свойство overflow:hidden.

На выходе получаем

и все прекрасно работает!

Категория: программирование ,
Теги: css , html ,
Просмотров: 761
Комментарии: 2

Простой php счетчик для сайта

04.03.2009

Данный счетчик хранит количество срабатываний в текстовом файле. Он считает все вызовы страницы, но на его остове можно сделать более сложный счетчик. Результаты отображаются в виде картинки. Размеры и шрифт произвольные.

 

$source = 'counter.txt';

if( is_file($source) ){
    $count = file_get_contents($source);
} else {
    $count = 0;
}
$count++;

$file = fopen($source, 'w');
fwrite($file, $count);

$width = 65;
$height = 81;
$font = "Syntax-Bold.otf";
$font_size = 10;
$text = $count;

$img = imageCreate($width, $height);
//$img = @imagecreatefromjpeg('fon.jpg');

$black = imageColorAllocate($img, 0, 0, 0);
$white = imageColorAllocate($img, 255, 255, 255);
$yellow = imageColorAllocate($img, 98, 81, 13);

header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Cache-Control: no-store, no-cache, must-revalidate');
header('Cache-Control: post-check=0, pre-check=0', FALSE);
header('Pragma: no-cache');
header("Content-Type: image/jpeg");

//imageFill($img, 1, 1, $yellow);

$bbox = imageftbbox($font_size, 0, $font, $text);
$x = imagesx($img) - ($bbox[0]  + $bbox[4]) - 10;
$y = $bbox[1] + (imagesy($img) / 2) - ($bbox[5] / 2) + 5;
imagettftext($img, $font_size, 0, $x, $y, $yellow, $font, $text);

imagejpeg($img, null, 100);

 

Как видно, можно генерировать изображение с нуля, а можно загрузить файл подложку.
Сохраним данный код в файле с именем counter.php.
Вызов счетчика осуществляется следующим образом:

 


При каждом вызове счетчика будет происходить итерация. Можно усложнить код, сделав подсчет хитов (hits), хостов (hosts) и онлайн посетителей (online)

Категория: php , программирование ,
Теги: php , html ,
Просмотров: 701
Комментарии: 0

Скрытая форма для авторизации

15.02.2009

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

 

Для начала прорисуем саму форму:

 

 

Затем скроем ее от постороннего взгляда:

 

#AuthorizeBg
{
	background:#000000 none repeat scroll 0%;
	display:none;
	left:0px;
	opacity:0.5;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
	position:absolute;
	top:0pt;
	z-index:10;
}
#AutorizeForm
{
  z-index:20;
	display:none;
	width:400px;
	height:200px;
	border-width:0px 1px 1px 0px;
	border-style: solid;
	border-color: #000000;
	background:#ffffff;
	text-align:center;
	position:absolute;
}

И добавим Js сценарий управления отображением формы:

 

function AutorizeForm(){
        var AutorizeForm = document.getElementById("AutorizeForm");
        var AuthorizeBg = document.getElementById("AuthorizeBg");
		if(window.innerWidth){
			width = window.innerWidth;
			height = window.innerHeight;
		} else if(document.documentElement && document.documentElement.clientWidth) {
			width = document.documentElement.clientWidth;
			height = document.documentElement.clientHeight;
		}	else if(document.body && document.body.clientWidth) {
			width = document.body.clientWidth;
			height = document.body.clientHeight;
		}
		AutorizeForm.style.left = (width/2 - 200)+'px';

		AutorizeForm.style.display = "block";
		AuthorizeBg.style.display = "block";
		
		AuthorizeBg.style.width = width;
		AuthorizeBg.style.height = height;
		
		AutorizeForm.style.top = (height/2 - 200)+'px';
	}

 

Осталось только добавить управляющий элемент и повесить на него событие:

 

 

При желании можно перевести js на jquery. Рабочий пример лежит здесь

Категория: программирование , javascript ,
Теги: html , javascript ,
Просмотров: 918
Комментарии: 0

Популярные

10 причин, чтобы отказаться от алкоголя и одна – чтобы употреблять алкоголь

Комментариев: 53 | просмотров: 8256
01.09.2009

О вреде микроволновой печи

Комментариев: 9 | просмотров: 3538
13.12.2009

Весело, весело встретим Новый GOD

Комментариев: 9 | просмотров: 2007
17.12.2009

Масонская символика на долларе

Комментариев: 4 | просмотров: 3949
03.03.2009

PHP. strtolower(strtoupper) и UTF-8

Комментариев: 4 | просмотров: 1774
14.05.2009

Библия. Книга Судей. Глава 19

Комментариев: 4 | просмотров: 1388
30.08.2009

Дискотека Авария. Заколебал ты

Комментариев: 4 | просмотров: 328
01.08.2010

Категории

Календарь

ПнВтСрЧтПнСбВс
12
3456789
10111213141516
17181920212223
24252627282930
31

Цитаты

и будешь давать взаймы многим народам, а сам не будешь брать взаймы [И БУДЕШЬ ГОСПОДСТВОВАТЬ НАД МНОГИМИ НАРОДАМИ, а они над тобою не будут господствовать]

Библия. Второзаконие