JavaScript - jQuery

Показать рандомный DIV при каждой загрузке страницы

Posted Mon, 01/16/2012 - 18:13

Показавыаем рандомные дивы при каждой перезагрузке страница при помощи javascript.

HTML разметка

<div id="randomdiv1" style="display: none;">
<!--Сюда можно поместить абсолютно любой контент-->
</div><!--/randomdiv1-->

<div id="randomdiv2" style="display: none;">
<!--Сюда можно поместить абсолютно любой контент-->
</div><!--/randomdiv1-->

<div id="randomdiv3" style="display: none;">
<!--Сюда можно поместить абсолютно любой контент-->
</div><!--/randomdiv1-->

javascript код

 

Делаем элементарный слайдер на jQuery

Posted Wed, 11/09/2011 - 11:45

Пишем простой слайдер на jQuery. Итак приступим. Первым делом не забудьте подключить самуму библиотеку jQuery!

HTML:

<div class="videos">
  <div class="cover">
    <div class="mystuff">some content</div>
    <div class="mystuff">some content</div>
  </div>
</div>

<div class="buttons">
<a class="button1 active" rel="1" href="#" onclick="return false;">Button_1</a>
<a class="button2" rel="2" href="#" onclick="return false;">Button_1</a>
<a class="button3" rel="3" href="#" onclick="return false;">Button_1</a>
</div>

CSS:

.videos {

Подгрузка контента в определенный <div> (При помощи Ajax)

Posted Thu, 10/20/2011 - 14:10

При нажатии на ссылку подгружается контент из другой страницы при помощи Ajax.

Вот HTML разметка:

<a id="get_content" href="#">press on me!</a>
<div id="content"></div>

Javascript код:

$(document).ready(function() {
$('#get_content').click(function() {
$.ajax({
  url: 'pages/page1.php',
  cache: false,
  beforeSend: function() { $('#content').html('Please wait...'); },
  success: function(html) { $('#content').html(html); }
)};
)};
)};

Убрать двоеточие из label в drupal

Posted Mon, 08/29/2011 - 21:52

При помощи скрипта ниже можно убрать тупое двоеточие в друпаловском label...

<script type="text/javascript">
function nocolons(){
doclabs = new Array;
doclabs = document.getElementsByTagName('label');
if (doclabs.length) {
  for (i=0; i<doclabs.length; i++ ){
    labtext = doclabs[i].innerHTML;
    if (labtext.indexOf("?") > 0) {
doclabs[i].innerHTML = labtext.replace(":","");
    }
  }
}
}
onload=nocolons;
</script>

Отображение контента при помощи jQuery .load function.

Posted Thu, 08/18/2011 - 21:27

$('#result').load('ajax/test.html');

В это примере будет загружена страница test.html в элемент с id="result". Также можно указывать абсолютный путь:

$('#result').load('http://webcoder.kz/ajax/test.html');

При помощи .load() можно загружать и не полностью страницу, а определенный контейнер.

$('#result').load('http://webcoder.kz/ajax/test.html #container');

В данном случае будет загружен элемент с id="container" и всем его содержимым.

Примечание
Не забудьте про:

jQuery scroll to top

Posted Mon, 06/06/2011 - 22:26

You can customize a variety of things, such as the amount of time it takes the script to scroll back up to the top, duration of the fade in/out effect for the control, and the number of pixels the user's scrollbar should be from the top of the page before revealing the control. Inside the .js file, here is the relevant section to modify:

setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="up.png" style="width:24px; height:24px" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"

jQuery image slide on hover effect

Posted Mon, 04/18/2011 - 21:58

HTML разметка:

<div id="container">
        <h1>jQuery image slide on hover effect</h1>
        <div><a href="#"><img src="sex1.png" /></a></div>
        <div><a href="#"><img src="sex2.png" /></a></div>
        <div><a href="#"><img src="sex3.png" /></a></div>
        <div><a href="#"><img src="sex4.png" /></a></div>
</div>

CSS:

/* simple reset */
html,body,div,h2,img {margin:0;padding:0;border:none;}

html {
        font:1em Arial, Helvetica, sans-serif;
        color:#444;
}
h1 {    text-align:center;}
#container {
        margin:100px auto;
        width:909px;
}
#container div {

Раскрывающийся текст при нажатии

Posted Sat, 04/16/2011 - 10:43

HTML markup:

<a href="#" class="heading">Button</a>
<div class="content">Lorem ipsum dolor sit amet</div>

jQuery:

jQuery(document).ready(function() {
  jQuery(".content").hide();
  //toggle the componenet with class msg_body
  jQuery(".heading").click(function()
  {
    jQuery(this).next(".content").slideToggle(500);
  });
});

Естественно необходима библиотека jQuery.

Image Cross Fade Transition

Posted Thu, 04/14/2011 - 23:31

Плавная смена изображений при помощи jQuery.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php print $language->language ?>" xml:lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>">

<head>
<title>Two image cross fade transition demo</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// when the DOM is ready:
$(document).ready(function () {

Матрацный калькулятор на javascript

Posted Sun, 03/06/2011 - 21:55

Пишем простой калькулятор на javascript.

Javascript:

        function calculator(form) {
                s = eval(form.matras.value); // Берем значение из select list
                a = eval(form.width.value); // Берем значение ширины
                b = eval(form.height.value); // Берем значение длины
                c = (a * b)*(s/10000); // Наша формула расчёта
                form.total.value = c; // Выводим результат
        }

HTML разметка:

<form>
<table width="215" border="0" align="center" cellpadding="5">
  <tr>
    <td class="label" width="60">
        <label>Модель: </label>
        </td>
   
   <td width="155">

Syndicate content