Скрипты

Иногда необходимо закрыть модальное popup окно по нажатию в любом месте экрана или фона и открыть его заново по ссылке или кнопке. Вот пример рабочего варианта:

<script>
$('.button').click(function(e) {
var $message = $('#myModal');
if ($message.css('display') != 'block') {
$message.show();
var firstClick = true;
$(document).bind('click.myEvent', function(e) {
if (!firstClick && $(e.target).closest('#myModal').length == 0) {
$message.hide();
$(document).unbind('click.myEvent');
}
firstClick = false;
});
}
e.preventDefault();
});
</script>
Особенно актульно на мбильной вёрстке, так как места мало, а нужные DIV блоки смещаются вниз и на самом видном месте стоят вроростипенные блоки с данными.

<html>
<head>
<script type="text/javascript">
function DoIt() {
var d2, d3;
if(!(d2=document.getElementById("Div2")) || !(d3=document.getElementById("Div3")))
return;
d2.parentNode.insertBefore(d3.parentNode.removeChild(d3),d2);
}
</script>
</head>
<body>
<div id="Div1">Div1</div>
<div id="Div2">Div2</div>
<div id="Div3">Div3</div>
<div id="Div4">Div4</div>

<div style="display: none;">
<input type="button" id="go" value="DoIt!" onclick="DoIt()">

<script type="text/javascript">
document.getElementById("go").click();
</script>
</div>
</body>
</html>
Два маленьких примера на JavaScript как показать информацию по нажатию на ссылку или блок

<script type="text/javascript">
$("#myid").click(function() {
$("#newid").toggle();
});
</script>

и

<script type="text/javascript">
$("#myid").click(function(){
$("#newid").css("display", block);
});
</script>
Скрыть ID или class на одной из страниц можно через JavaScript, для этого в страницу вставляем небольшой код:

<script type="text/javascript">
{
document.getElementById("myid").style.display="none";
document.getElementsByClassName("myclass")[0].style.display="none";
}
</script>

или

<script type="text/javascript">
$(document).ready(function() {
$(".myclass").hide();
}
);
</script>

       Иногда нужно чтобы боковое меню при прокрутке страницы вниз упералось в footer и фиксировалось и наоборот при прокрутке вверх фиксировалось в header. Для этого я применяю скрипт.


<script type="text/javascript">// <![CDATA[
jQuery("document").ready(function($) {
        $(function() {
        var sidebar = jQuery('#sb > div');
        var win = jQuery(window);
        var sidebarOffset = sidebar.offset().top;
        var sidebarHeight = 0;
        jQuery('#sidebar-b > *', sidebar).each(function(){
        sidebarHeight += jQuery(this).outerHeight(true);
        });
        sidebar.css({
        position: 'absolute',
        height: sidebarHeight,
        overflow: 'hidden'
        });        function recalcPosition(){
       var footerOffset = jQuery('#footer').offset().top;
       var scrollOffset = win.scrollTop();
       if ((scrollOffset >= sidebarOffset) && ((scrollOffset + sidebarHeight)
< footerOffset)){
              sidebar.css({
              position: 'fixed',
              top: 0
       });
       }
       else if ((scrollOffset + sidebarHeight) >= footerOffset) {
              sidebar.css({
              position: 'absolute',
              top: footerOffset - sidebarHeight + 1
        })
        }
        else {
              sidebar.css({
              top: '',
              position: 'absolute'
        })
        }
        }         recalcPosition();
        win.bind('scroll resize load', recalcPosition)
        });
        });
// ]]></script>

       Суффикс класса меню menu-accordion добавляем в свой template.css


#sb > div {
margin-left: 740px;
position: fixed;
top: 225px;
}
Очень часто возникает ошибка связанная с конфликтом скриптов, обычно эту ошибку можно увидеть в firebug

TypeError: $(...).ready is not a function

Для исправления, я обычно меняю строку в скрипте

$(document).ready(function() {

на

jQuery(document).ready(function($) {

или взять функцию в такую конструкцию

jQuery(function($){
...
});