Архив рубрики: HTML

Как запускать скрипт только тогда когда прокрутили до него экран? waypoints js — чекпоинты для запуска скрипта

Как запускать скрипт только тогда когда прокрутили до него экран? waypoints js — чекпоинты для запуска скрипта

Бывает что нужно запустить скрипт только тогда когда докручиваем до нег (например красивый счетчик цифр)

для этого
Читать далее Как запускать скрипт только тогда когда прокрутили до него экран? waypoints js — чекпоинты для запуска скрипта

Список CSS хаков для разных браузеров, IE6, IE7, IE8, FireFox, Opera, Safari, Chrome

Список CSS хаков

/* хак только для IE8 Only */
.myClass {
color:red\0/; /* красный */
padding:70px\0/; /* отступ 70px только для Internet Explorer 8 */
}

/* IE 6 Only */
* html .myClass {

}

подробнее
Читать далее Список CSS хаков для разных браузеров, IE6, IE7, IE8, FireFox, Opera, Safari, Chrome

Как подключить свой(кастомный) шрифт на сайт?

Вначале загружаем сам файл шрифта с помощью [email protected] Внутри него пишем название гарнитуры шрифта через параметр font-family и путь к файлу через src

@font-face { font-family: Pompadur; /* Гарнитура шрифта */

src: url(fonts/pompadur.ttf); /* Путь к файлу со шрифтом */ }

. Дальше используем шрифт как обычно.

h1 { font-family: Pompadur, ‘Comic Sans MS’, cursive; }

всплывающий tooltip на картинках

css
.MainImagescat { margin:53px 0 0 697px; }
.MainImagescat div { margin-bottom:29px; }
.MainImagescat div a { position:relative; display:block; width:268px; height:128px; background:url(./img/mainimages.png) 0 0 no-repeat; font-size:12px; color:#a8b0c5; text-transform:uppercase; }
.MainImagescat div a img { margin:2px 0 0 3px; position:absolute; }
.MainImagescat div a span.name { position:absolute; margin-left:3px; display:block; bottom:6px; height:0; overflow:hidden; width:260px; line-height:26px; background:url(./img/shadow1.png) 0 0 repeat; }
.MainImagescat div a span.name span { padding-left:10px; }

 

js

$(«.MainImagescat a»).hover(function(){
$(this).find(«span.name»).stop().animate({«height»:26});
}, function(){
$(this).find(«span.name»).stop().animate({«height»:0});
});

html

<div class=»MainImages»>

<div><a href=»#»><img border=»0″ src=»<?=$path_to_img?>» width=»160px» height=»150px» alt=»<?=$arFields[«NAME»];?>» title=»<?=$arFields[«NAME»];?>» /><span class=»name»><span> <?=$arFields[«CATALOG_PRICE_1»];?></span></span></a></div>
</div>

 

как изменять информационное собщение при изменении value selecta

выберите тариф
<select name=»tarif» id=»tarifff» onChange=»tariffs()»>
<option value=»Тестовый период»>Тестовый период</option>
<option value=»Стандартный»>Стандартный</option>
<option value=»Средний»>Средний</option>
<option value=»Максимальный»>Максимальный</option>
</select><br/>

<div id=»test» style=»display: block;»>бесплатно на 5 дней</div>
<div id=»st» style=»display: none;»>вы выбрали тариф станд</div>
<div id=»mid» style=»display: none;»>вы выбрали тариф сред</div>
<div id=»max» style=»display: none;»> вы выбрали тариф макс</div>

<script type=»text/javascript»>

function tariffs(){
tarvibor = document.getElementById(‘tarifff’).value;

if (tarvibor==’Тестовый период’){
$(‘#test’).css(‘display’,’block’);
$(‘#st’).css(‘display’,’none’);
$(‘#mid’).css(‘display’,’none’);
$(‘#max’).css(‘display’,’none’);
}
if (tarvibor==’Стандартный’){
$(‘#test’).css(‘display’,’none’);
$(‘#st’).css(‘display’,’block’);
$(‘#mid’).css(‘display’,’none’);
$(‘#max’).css(‘display’,’none’);
}
if (tarvibor==’Средний’){
$(‘#test’).css(‘display’,’none’);
$(‘#st’).css(‘display’,’none’);
$(‘#mid’).css(‘display’,’block’);
$(‘#max’).css(‘display’,’none’);
}
if (tarvibor==’Максимальный’){
$(‘#test’).css(‘display’,’none’);
$(‘#st’).css(‘display’,’none’);
$(‘#mid’).css(‘display’,’none’);
$(‘#max’).css(‘display’,’block’);
}
};
</script>

Как запретить вводить в поле input буквы

<input type=»text» id=»your_name «class=»abc» name=»your_name» value=»» size=»30″ />

Поставим класс onlynumbers, потом скриптом ищем и запрещаем писать буквы.

<script type=»text/javascript»>

$(function(){

var obj = $(‘.onlynumbers’);
obj.bind(‘keyup’, function(){
this.value = this.value.replace (/[A-Za-z]/, »);

});
});

</script>