метка: Javascript

jQuery слайдер

Вот таким методом я исполнил слайдер контента jquery. Внутри блока несколько банеров для автоматического слайда.

<style type="text/css">
    div#rotator div { position:absolute;}
    div#rotator { height:207px;}
</style>
<script type="text/javascript">
    function theRotator() {
        $('div#rotator div').css({opacity: 0.0});
        $('div#rotator div:first').css({opacity: 1.0});
        setInterval('rotate()',4000);
    }

    function rotate() {
        var current = ($('div#rotator div.show')? $('div#rotator div.show') : $('div#rotator div:first'));
        var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator div:first') :current.next()) : $('div#rotator div:first'));
        next.css({opacity: 0.0})
        .addClass('show')
        .animate({opacity: 1.0}, 1000);
        current.animate({opacity: 0.0}, 1000)
        .removeClass('show');
    };
    $(document).ready(function() {
        theRotator();
    });
</script>

<div id="rotator">
    <div class="show"><a href="#"><img alt="" src="/images/new/head_banner_1.jpg" /></a></div>
    <div><a href="#"><img alt="" src="/images/new/head_banner_2.jpg" /></a></div>
    <div><a href="#"><img alt="" src="/images/new/head_banner_3.jpg" /></a></div>
</div>

Плавающий блок с помощью jQuery

В одно время сталкивался с такой задачей, но до постинга так и не доходило дело, а сегодня старый добрый товарищь натолкнулся на данную вещицу=) Так что пришло время постить. В общем как это делается:

CSS

.left {
	width: 70%;
	float: left;
	height: 1500px;
}
.right {
	margin-top: 10px;
	float: right;
	width: 20%;
}
#fixed {
	background: #CCC;
	padding: 20px;
}

Подключение jQuery

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

JavaScript

Добавляем в <head> тег

<script type="text/javascript">
	$(function() {
		var offset = $("#fixed").offset();
		var topPadding = 15;
		$(window).scroll(function() {
			if ($(window).scrollTop() > offset.top) {
				$("#fixed").stop().animate({marginTop: $(window).scrollTop() - offset.top + topPadding});
			}
			else {$("#fixed").stop().animate({marginTop: 0});};});
	});
</script>

HTML

<div class="left">
	<!-- Содержание -->
</div>
<div class="right">
	<div id="fixed">Текст фиксированного блока.</div>
</div>

Как изменить внешний вид checkbox

Наверняка многие знают, что такие элементы формы как select, file, checkbox, radio не поддаются стилизации средствами CSS. Но как же быть, если нерадивый дизайнер в макете дизайна нарисовал поле checkbox в форме стилизировным под общий дизайн сайт, а заказчик на отрез не хочет принимать дизайн без формы ввода данных идентичной макету дизайна.

Вот здесь и пригодиться описанный ниже метод. Суть метода состоит в том, что элемент checkbox делается невидимым, но невидимым не простым присвоением display:none, а через свойство opacity:0.

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;

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

/*---------- Стили классов -----------*/
input {
margin:0;padding:0;
opacity:0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
.checkboxOn {
background:url(f_logincheckbox_on.png) no-repeat 0 3px;
}
.checkboxOff {
background:url(f_logincheckbox_off.png) no-repeat 0 3px;
}

/*---------- Скрипт изменения класса-----------*/

function logincheckboxCheck () {
  if (document.getElementById("checkbox1").checked) {
	document.getElementById("checkboxDiv").className="checkboxOn";
   }
	else {
	 document.getElementById("checkboxDiv").className="checkboxOff";
	}
}

/*---------- Верстка-----------*/

<div id="checkboxDiv">
	<input type="checkbox" id="checkbox1" onclick="logincheckboxCheck();" checked="checked"/> <label for="checkbox1">Запомнить меня</label>
</div>

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

Конвертация валюты cbr.ru на Python и jQuery

Задача: конвертировать валюту (USD, EUR) вводимую пользователем в рубли. При смене вида валюты уже введенные данные конвертируем тоже.

Решение:

Python функция которая принимает GET запросом вид валюты и сумму.

import json
import urllib
from xml.etree import ElementTree as ET

def ajax_convert_valuta(request):
    # Пропускаем проверку принимаемых данных, выполните ее сами
    valuta = request.GET['valuta']
    summa = request.GET['sum']
    root = ET.parse(urllib.urlopen('http://www.cbr.ru/scripts/XML_daily.asp')).getroot()
    for x in root:
        if x.attrib['ID'] == 'R01239': valueEUR = x.find('Value').text.replace(',', '.')
        if x.attrib['ID'] == 'R01235': valueUSD = x.find('Value').text.replace(',', '.')
    if valuta == '1':
        convert_valuta = float(valueUSD) * float(summa)
    if valuta == '2':
        convert_valuta = float(valueEUR) * float(summa)
    response = HttpResponse()
    response['Content-Type'] = "text/javascript"
    response.write(json.dumps({'Value': convert_valuta}))
    return response

jQuery у меня примерно такой (в Вашем случае все должно отличаться;]).

$("#valuta_convert").hide();
function initLocal(){
	var localId = $('select[name=type_of_currency]').val();
	var summa = $("input[name=price]").val();
	if(localId != 0){
		var valueLocal = $('select[name=type_of_currency] option:selected').val();
		$.getJSON('/ajax/convert_valuta.json?valuta='+valueLocal+'&='+summa, function(data) {
			$("#valuta_convert").show();
			$("#valuta_convert").text('~ '+data.Value+' руб');
		});
	}else{
		$("#valuta_convert").hide();
	}
}
$('select[name=type_of_currency]').change(initLocal);
$("#price").keyup(function(){
	initLocal();

});

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