youtube-видео через fancybox

Это делается так.

Ссылка будет вида:
[code lang=»html»]
<a class="fancy-video-js" href="http://www.youtube.com/v/iCz8R25hlFI&fs=1&amp;autoplay=1"><img src="http://img.youtube.com/vi/iCz8R25hlFI/1.jpg" /></a>
[/code]

Ютуб возвращает полноразмерные скриншоты видео по адресу http://img.youtube.com/vi/<код видео>/0.jpg
Вместо 0.jpg может быть 1.jpg, 2.jpg или 3.jpg.
Ссылка стоит на ютуб-видео с небольшими модификациями (сравните с кодом, что получаете при копировании HTML в youtube со ссылкой выше).
Затем вставьте код ниже в ваш <script> блок.

[code lang=»javascript»]
$(document).ready(function() {
$(".fancy-video-js").click(function() {
$.fancybox({
‘padding’ : 0,
‘autoScale’ : false,
‘href’ : this.href.replace(new RegExp("watch\\?v=", "i"), ‘v/’),
‘type’ : ‘swf’,
‘swf’ : {
‘wmode’ : ‘transparent’,
‘allowfullscreen’ : ‘true’
}
});

return false;
});
});
[/code]

Безопасный eval в python

Об этом уже достаточно много сказано, но может и мой вариант кому-то приглянется. Обычно запрещают список опасных функций для eval’а. Можно пойти чуть по другому пути и наоборот, разрешить, что-то. Я набросал пример, цель которого была — вычисление математических выражений. Чтобы было не так скучно, сделал это в django через аякс 🙂

Итак, views.py
[code lang=»python»]
import re, json
from django.shortcuts import render_to_response
from django.http import HttpResponse

#…

def calc(request):
return render_to_response(‘calc.html’, {})

def calc_json_expression(request):
p = re.compile(r'[-+*\/\(\)0-9(sin)(cos)(tan)]*’, re.IGNORECASE)
calcmath = request.POST["calc-math"]
res = ».join(p.findall(calcmath))
from math import sin, cos, tan
json_data = {}
try:
json_data[‘exp’] = res
json_data[‘res’] = eval(res)
except:
json_data[‘exp’] = »
json_data[‘res’] = ‘0’
return HttpResponse(json.dumps(json_data), mimetype="application/json")
[/code]

urls.py
[code lang=»python»]
urlpatterns = patterns(‘kernel.views’,
# …
url(r’^calc/$’, ‘calc’),
url(r’^calc-json-expression/$’, ‘calc_json_expression’),
)
[/code]

и файл шаблона calc.html
[code lang=»html»]
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<h1>Calc</h1>
<form method="post" id="calc-form">
<p><label for="calc-math">Print math expression</label><input type="text" name="calc-math" id="calc-math" value="" placeholder="Expression"></p>
<p>Expression: <span id="calc-math-expression"></span></p>
<p>Result: <span id="calc-math-answer">0</span></p>
</form>

<script type="text/javascript">
$(‘#calc-math’).keyup(function() {
$.post(‘calc-json-expression/’, $("#calc-form").serialize(),function(data){
$(‘#calc-math-answer’).text(data["res"]);
$(‘#calc-math-expression’).text(data["exp"]);
}, "json");
});
</script>
</body>
</html>
[/code]

Самое интересное во всем этом коде — выбор допустимых символов и слов регулярным выражением. Сюда можно добавить и другие выражения, но принцип должен быть понятен.

[code lang=»python»]
p = re.compile(r'[-+*\/\(\)0-9(sin)(cos)(tan)]*’, re.IGNORECASE)
[/code]

Собственно, это и есть мой способ, подобных при поиске «безопасный eval» не увидел. Проблема, с которой столкнулся — это ограничение на время исполнения скрипта. Такой штуки нет ни в джанго, ни в питоне. Поэтому 10 в миллиардной степени, например, этот скрипт не обработает, а сайт просто упадет. Есть решения, интернет ими кишит, но они, в основном, только для *nix, либо практически нерабочие. Если кто-то найдет кроссплатформенный рабочий код — отпишитесь, пожалуйста 🙂

Как определить ширину текста javascript / jquery

Самое обычное решение — создать инлайновый элемент (у блочных ширина обычно или 100%, или заданная), например, span, задать его текст, шрифт и измерить его ширину функцией width().

Например, это можно сделать так:

[code lang=»javascript»]
function textWidth(text,fsize){
var newelem = $(‘<span>’);
newelem.text(text);
newelem.css(‘font-size’, fsize);
newelem.hide();
$(‘body’).append(newelem);
var w = newelem.width();
newelem.remove();
return w;
};
[/code]

Использовать следующим образом:

[code lang=»javascript»]
var mytextwidth = textWidth(‘lalala’,’16px’);
[/code]

В прошлом примере мы не определяем шрифт, а следовало бы. Конечно, передачу шрифта через параметр сделать проще простого, но раз уж мы используем jquery, сделаем так:

[code lang=»javascript»]
$.fn.textWidth = function(){
var newelem = $(‘<span>’);
newelem.text($(this).text());
newelem.css({‘font-size’: $(this).css(‘font-size’),
‘font-weight’:$(this).css(‘font-weight’),
‘font-family’:$(this).css(‘font-family’),
‘font-style’:$(this).css(‘font-style’)});
newelem.hide();
$(‘body’).append(newelem);
var w = newelem.width();
newelem.remove();
return w;
};
[/code]

И мы можем использовать эту функцию для любого jquery-объекта:

[code lang=»javascript»]
var mytextwidth = $(‘#myelement’).textWidth();
[/code]

Плавно перемещаем скролл к элементу

Можно сделать красивый якорь — т.е. плавное перемещение к любому DOM-элементу. Для этого сделаем такой скрипт:

[code lang=»javascript»]
$(‘a[href^="#"]’).click(function() {
$(‘html:not(:animated)’ +( !$.browser.opera ? ‘,body:not(:animated)’ : »)).animate({ scrollTop: $($(this).attr(‘href’)).offset().top}, 1000 );
return false;
});
[/code]

Этот код заменяет все якоря на плавные. Время перемещения до якоря — 1000 мс, вы, конечно же, можете легко поменять его.

$(‘element’).offset().top — определить расстояние (высоту) от начала (самого верха) страницы до выбранного элемента.

Проверил работу в браузерах IE8, Chrome 19, Opera 12.00, Firefox 13.01. Везде хорошо работает.

И не забудьте подключить jQuery в блоке head!
[code lang=»html»]
<head>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">

</head>
[/code]

Источники:
http://loco.ru/materials/96-jquery-scroll-to-top
http://api.jquery.com/offset/