Learn how to use jQuery at the Blog

iPhoneclub « visit

  • Added 9 months ago
  • 400 Lines of Code shown
  • 4 Links of Interest
http://iphoneclub.nl
This is my Source Code and I don't want to show it here
View Source Code only (as overlay)
// That code snippet belongs to iPhoneclub - http://iphoneclub.nl

var $j = jQuery.noConflict();

//Widgets right column (Show/hide - drag & drop, jQuery cookie based)
function modul_box()
{
    var iSerial;
    var iDisplay;
    var iCount = 0;
    iSerial = $j.cookie('iphonecustomOrder');
    iDisplay = $j.cookie('iphonecustomDisplay');
    if (iSerial && iDisplay)
    {
        iSerial = iSerial.split(',');
        iDisplay = iDisplay.split(',');
        $j(iSerial).each(function (i)
        {
            $j('#leftcolumn').append($j("#" + this));
            $j("#" + this).children('div:first').css('display', iDisplay[iCount]);
            iCount = iCount + 1;
        })
    }
    $j("#leftcolumn").sortable(
    {
        scroll : true, axis : "y", stop : orderChanged, scrollSpeed : 50, cursor : "NS-resize", handle : '.move', 
        containment : "parent", opacity : 0.7, placeholder : "ui-selected", revert : 125
    });
    $j('#leftcolumn .modul-box .expand').click(toggleDisplay)
}
function orderChanged(el, ui)
{
    updateCookie()
}
function updateCookie()
{
    var iSerial;
    iSerial = $j("#leftcolumn").sortable('toArray');
    $j.cookie('iphonecustomOrder', iSerial, {
        path : "/", expires : 365
    });
    var iDisplay;
    var strCookie = "";
    var iCount = 1;
    $j("#leftcolumn .modul-box").each(function (i)
    {
        if (iCount > 1) {
            strCookie += ",";
        }
        strCookie += $j(this).children('div:first').css('display');
        iCount++
    });
    $j.cookie('iphonecustomDisplay', strCookie, {
        path : "/", expires : 365
    })
}
function toggleDisplay()
{
    var el = $j(this).next().next();
    var alpha = el.css('opacity');
    var animateSetting = {
        height : "toggle", opacity : 0
    };
    if (el.css('display') == 'none') {
        animateSetting.opacity = 1
    }
    el.animate(animateSetting, 250, "easeOutQuad", updateCookie)
}
//Tag Cloud / Category Cloud - tabbing
function initTabs()
{
    var sets = document.getElementsByTagName("ul");
    for (var i = 0; i < sets.length; i++)
    {
        if (sets[i].className.indexOf("tabset") !=- 1)
        {
            var tabs = [];
            var links = sets[i].getElementsByTagName("a");
            for (var j = 0; j < links.length; j++)
            {
                if (links[j].className.indexOf("tab") !=- 1)
                {
                    tabs.push(links[j]);
                    links[j].tabs = tabs;
                    var c = document.getElementById(links[j].href.substr(links[j].href.indexOf("#") + 1));
                    if (c) if (links[j].className.indexOf("active") !=- 1) c.style.display = "block";
                    else c.style.display = "none";
                    links[j].onclick = function ()
                    {
                        var c = document.getElementById(this.href.substr(this.href.indexOf("#") + 1));
                        if (c)
                        {
                            for (var i = 0; i < this.tabs.length; i++)
                            {
                                document.getElementById(this.tabs[i].href.substr(this.tabs[i].href.indexOf("#") + 1)).style.display = "none";
                                this.tabs[i].className = this.tabs[i].className.replace("active", "")
                            }
                            this.className += " active";
                            c.style.display = "block";
                            return false;
                        }
                    }
                }
            }
        }
    }
}
//Feature Box frontpage
var news_timeout = null;
var current_item = 1;
var blnPlay = true;
var blnFirstPlay = true;
var blnJump = false;
var nextID = 0;
var blnTween = false;
function news_box()
{
    $j('#boxcontent div').css({
        opacity : 0
    });
    $j('#photos span').siblings(':first-child').css({
        left : '0px'
    });
    $j('#boxcontent div').siblings(':first-child').css({
        opacity : 1, top : 0
    });
    $j('#interface span').click(doJump);
    $j('#interface #play').click(togglePlay);
    $j('#interface #next').click(doNext);
    $j('#photos span h3').each(function ()
    {
        $j(this).transBGdraw({
            'z-index' : 0
        })
    });
    $j('#photos span div').each(function ()
    {
        if ($j(this).html() != "") {
            $j(this).css({
                opacity : 0
            })
        }
    });
    doFadeTitle()
}
function doJump()
{
    nextID = parseInt($j(this).attr('id').replace('item', ''));
    if (current_item != nextID && !blnTween)
    {
        if (news_timeout) {
            clearTimeout(news_timeout)
        }
        if (current_item + 1 == nextID || (nextID == 1 && current_item == 5)) {
            doNext();
            return
        }
        var posToActivate = (nextID - current_item) + 1;
        if (posToActivate < 1) {
            posToActivate += 5
        }
        if (!blnFirstPlay)
        {
            $j('#boxcontent').append($j('#boxcontent div').siblings(':first-child'));
            $j('#boxcontent div').siblings(':last-child').css({
                opacity : 0, top : '192px'
            })
        }
        if (!blnFirstPlay)
        {
            $j('#photos').append($j('#photos span').siblings(':first-child'));
            $j('#photos span').siblings(':last-child').css({
                left : '272px', position : 'absolute'
            });
            $j('#photos span').siblings(':last-child').children('div').css({
                opacity : 0
            })
        }
        $j('#boxcontent').append($j('#boxcontent div').siblings(':nth-child(1)').clone());
        $j('#boxcontent div').siblings(':last-child').css({
            opacity : 0, top : '192px'
        });
        $j('#photos').append($j('#photos span').siblings(':first-child').clone());
        $j('#photos span').siblings(':last-child').css({
            left : '272px', position : 'absolute'
        });
        $j('#photos span').siblings(':last-child').children('div').css({
            opacity : 0
        });
        var i = 2;
        while (i < posToActivate)
        {
            $j('#boxcontent').append($j('#boxcontent div').siblings(':nth-child(2)'));
            $j('#boxcontent div').siblings(':last-child').css({
                top : '192px'
            });
            $j('#photos').append($j('#photos span').siblings(':nth-child(2)'));
            $j('#photos span').siblings(':last-child').children('div').css({
                opacity : 0
            });
            i++
        }
        blnJump = true;
        $j('#item' + current_item).removeClass('active');
        current_item = nextID;
        $j('#item' + current_item).addClass('active');
        $j('#boxcontent div').siblings(':first-child').animate({
            opacity : 0
        },
        250, "easeOutQuad");
        $j('#boxcontent div').siblings(':nth-child(2)').css({
            top : 0
        });
        $j('#boxcontent div').siblings(':nth-child(2)').animate({
            opacity : 1
        },
        500, "easeOutQuad");
        $j('#photos span').siblings(':first-child').children('div').animate({
            opacity : 0
        },
        250, "easeOutQuad");
        $j('#photos span').siblings(':first-child').next().animate({
            left : 0
        },
        500, "easeOutQuad", doResetJump);
        blnTween = true;
    }
}
function togglePlay()
{
    if (blnPlay)
    {
        $j('#interface #play').removeClass("pause");
        $j('#interface #play').addClass("play");
        if (news_timeout) {
            clearTimeout(news_timeout)
        }
    }
    else
    {
        $j('#interface #play').removeClass("play");
        $j('#interface #play').addClass("pause");
        doNext()
    }
    blnPlay = !blnPlay
}
function doFadeTitle()
{
    if (!blnFirstPlay) {
        $j('#boxcontent div').siblings(':first-child').css({
            opacity : 0, top : '192px'
        })
    }
    news_timeout = setTimeout(doSetNextTimeout, 500)
}
function doSetNextTimeout()
{
    blnTween = false;
    if (blnFirstPlay)
    {
        $j('#photos span').siblings(':first-child').children('div').animate({
            opacity : 1
        },
        500, "easeOutQuad")
    }
    else
    {
        $j('#photos span').siblings(':first-child').next().children('div').animate({
            opacity : 1
        },
        500, "easeOutQuad")
    }
    if (blnPlay) {
        news_timeout = setTimeout(doNext, 7000);
    }
}
function doResetJump()
{
    $j('#boxcontent div').siblings(':first-child').remove();
    $j('#photos span').siblings(':first-child').remove();
    blnFirstPlay = true;
    doFadeTitle()
}
function doNext()
{
    if (!blnTween)
    {
        if (news_timeout) {
            clearTimeout(news_timeout)
        }
        $j('#item' + current_item).removeClass('active');
        current_item++;
        if (current_item == 6) {
            current_item = 1
        }
        $j('#item' + current_item).addClass('active');
        if (!blnFirstPlay)
        {
            $j('#boxcontent').append($j('#boxcontent div').siblings(':first-child'));
            $j('#boxcontent div').siblings(':last-child').css({
                top : '192px'
            })
        }
        $j('#boxcontent div').siblings(':first-child').animate({
            opacity : 0
        },
        250, "easeOutQuad");
        $j('#boxcontent div').siblings(':nth-child(2)').css({
            top : 0
        });
        $j('#boxcontent div').siblings(':nth-child(2)').animate({
            opacity : 1
        },
        500, "easeOutQuad");
        if (!blnFirstPlay) {
            $j('#photos').append($j('#photos span').siblings(':first-child'));
        }
        $j('#photos span').siblings(':first-child').children('div').animate({
            opacity : 0
        },
        250, "easeOutQuad");
        $j('#photos span').siblings(':last-child').css({
            left : '272px', position : 'absolute'
        });
        $j('#photos span').siblings(':last-child').children('div').css({
            opacity : 0
        });
        $j('#photos span').siblings(':first-child').next().animate({
            left : 0
        },
        500, "easeOutQuad", doFadeTitle);
        blnFirstPlay = false;
        blnTween = true;
    }
}
//Superfish Menu (http://users.tpg.com.au/j_birch/plugins/superfish/)
function navmenu()
{
    $j("ul.sf-menu").supersubs({
        minWidth : 8, maxWidth : 27, extraWidth : 1
    }).superfish({
        delay : 1000, speed : 'fast', dropShadows : false
    })
}
//Simple Show/Hide for post meta
function postmeta()
{
    $j('#postmeta').hide();
    $j(".postinfo h4 em").addClass("active");
    $j('.postinfo h4 em').click(function ()
    {
        $j('#postmeta').toggle('fast');
        $j(this).toggleClass("active")
    })
}
//jQuery Lightbox
function lightbox()
{
    $j('a[@rel*=lightbox]').lightBox()
}
//Accordion for Tips page (http://www.iphoneclub.nl/iphone-tips/)
function initMenus()
{
    $j('ul.menu ul').hide();
    $j.each($j('ul.menu'), function ()
    {
        $j('#' + this.id + '.expandfirst ul:first').show()
    });
    $j('ul.menu li a').click(function ()
    {
        var checkElement = $j(this).next();
        var parent = this.parentNode.parentNode.id;
        if ($j('#' + parent).hasClass('noaccordion')) {
            $j(this).next().slideToggle('normal');
            return false
        }
        if ((checkElement.is('ul')) && (checkElement.is(':visible')))
        {
            if ($j('#' + parent).hasClass('collapsible')) {
                $j('#' + parent + ' ul:visible').slideUp('normal')
            }
            return false
        }
        if ((checkElement.is('ul')) && (!checkElement.is(':visible')))
        {
            $j('#' + parent + ' ul:visible').slideUp('normal');
            checkElement.slideDown('normal');
            return false;
        }
    })
}
$j(document).ready(launch);
function launch()
{
    navmenu();
    modul_box();
    news_box();
    initTabs();
    initMenus();
    lightbox();
    postmeta()
}