Learn how to use jQuery at the Blog

hypercube « visit

  • Added 9 months ago
  • 586 Lines of Code shown
  • 1 Links of Interest
http://hypercube.ca
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 hypercube - http://hypercube.ca

// Global Nissan Cube functions Document

// Set language variable based on URL
// languageType to be passed around globally for use in webservices and 
//other language specific functionality
var languageType = "en";
var url = window.location.pathname;
function languageSelect(){
    if ((url.match("/en/")) == null) {
        languageType = "fr"
    }
}

languageSelect();

function languageToggle(url){
    $('a.langSelect').click(function(){
        url = url + window.location.hash;
        if ((url.match("/en/")) != null) {
            window.location = url.replace("en", "fr")
        }
        else {
            window.location = url.replace("fr", "en")
        }
        return false;
    })
}

// end language settings

/* set Domain for cookie */
/*
 var hostName = window.location.hostname;
 alert(hostName);
 var domainVal;
 switch(hostName)
 {
 case "cctorws060.capitalc.internal":
 domainVal = "capitalc.internal";
 break;
 case 2:
 break;
 }
 var localDomain = "capitalc.internal";
 var liveDomain = "hypercube.ca";
 */
var domainVal = "hypercube.ca";

// dynamic text (English and French)
// **** ENGLISH ****
var emailFail_text = "sign up failed because:";
var emailSuccess_text = "thank you for signing up!";
var alreadySignedUp = "you are signed up."

// **** FRENCH ****
if (languageType == "fr") {
    emailFail_text = "l'inscription a échoué parce que:";
    emailSuccess_text = "merci pour votre inscription!";
    alreadySignedUp = "tu es inscrit."
}

// webservice urls
var signUp = "/signup/Default.ashx?language=" + languageType;

function openHTTPlinksInNewWindow(){
    $('a[href^="http://"]').attr({
        target: "_blank",
        title: "Opens in a new window"
    });
}

// check if email is valid
function checkEmail(inputvalue){
    $('div.emailResponse').remove();
    var responseContainer = $('<div class="emailResponse">');
    var responseVerdict = $('<em>');
    var responseList = $('<ul class="response">');
    var response = $('<li>');
    //var pattern = /^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;
    
    $.post(signUp, {
        email: inputvalue
    }, function(data){
        var hasErrors = $(data).find('result').attr("error");
        if (hasErrors == "true") {
            hideFullOverlay("emailValidating");
            var responseText = $(data).find('result response').text();
            responseVerdict.append(emailFail_text);
            response.append(responseText);
            responseList.append(response);
        }
        else {
            createCookie("signedUp", "true", 365)
            window.location = "/" + languageType + "/index.html";
        }
        /*
         else {
         hideFullOverlay("emailValidating");
         responseVerdict.append(emailSuccess_text).css({
         fontSize: 13,
         color: "white",
         padding: "10 15 0"
         });
         $('div#signUp').css({
         padding: 0
         })
         $('form.emailSignUp').css({
         display: "none"
         })
         createCookie("signedUp", "true", 365);
         $('div#signUp div.arrows').hide();
         }
         */
        responseContainer.append(responseVerdict);
        responseContainer.append(responseList);
        
        $('div#signUp').append(responseContainer);
        
        
        responseContainer.fadeIn('normal');
        
    })
}

// Set, Read, and Delete cookie functions
function createCookie(name, value, days){
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
    }
    else 
        var expires = "";
    document.cookie = name + "=" + value + expires + "; path=/; domain=" + domainVal + "";
}

// read cookie
function readCookie(name){
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') 
            c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) 
            return c.substring(nameEQ.length, c.length);
    }
    return null;
}

// erase cookie
function eraseCookie(name){
    createCookie(name, "", -1);
}

// widgets
// Twitter widget
(function($){
    $.fn.tweet = function(o){
        var s = {
            username: ["thehypercube"], // [string]   required, unless you want to display our tweets. :) it can be an array, just do ["username1","username2","etc"]
            avatar_size: null, // [integer]  height and width of avatar if displayed (48px max)
            count: 1, // [integer]  how many tweets to display?
            intro_text: null, // [string]   do you want text BEFORE your your tweets?
            outro_text: null, // [string]   do you want text AFTER your tweets?
            join_text: null, // [string]   optional text in between date and tweet, try setting to "auto"
            auto_join_text_default: "i said,", // [string]   auto text for non verb: "i said" bullocks
            auto_join_text_ed: "i", // [string]   auto text for past tense: "i" surfed
            auto_join_text_ing: "i am", // [string]   auto tense for present tense: "i was" surfing
            auto_join_text_reply: "i replied to", // [string]   auto tense for replies: "i replied to" @someone "with"
            auto_join_text_url: "i was looking at", // [string]   auto tense for urls: "i was looking at" http:...
            loading_text: null // [string]   optional loading text, displayed while tweets load
        };
        
        function relative_time(time_value){
            var parsed_date = Date.parse(time_value);
            var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
            var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
            if (delta < 60) {
                return 'less than a minute ago';
            }
            else 
                if (delta < 120) {
                    return 'about a minute ago';
                }
                else 
                    if (delta < (45 * 60)) {
                        return (parseInt(delta / 60)).toString() + ' minutes ago';
                    }
                    else 
                        if (delta < (90 * 60)) {
                            return 'about an hour ago';
                        }
                        else 
                            if (delta < (24 * 60 * 60)) {
                                return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
                            }
                            else 
                                if (delta < (48 * 60 * 60)) {
                                    return '1 day ago';
                                }
                                else {
                                    return (parseInt(delta / 86400)).toString() + ' days ago';
                                }
        }
        
        if (o) 
            $.extend(s, o);
        return this.each(function(){
            var list = $('<ul class="tweet_list">').prependTo(this);
            var intro = '<p class="tweet_intro">' + s.intro_text + '</p>'
            var outro = '<p class="tweet_outro">' + s.outro_text + '</p>'
            var loading = $('<div class="loading"><img src="/images/common/tweet_loader.gif" width="16" height="16" class="tweet_loader"><p class="loading_text">' + s.loading_text + '</p></div>');
            if (typeof(s.username) == "string") {
                s.username = [s.username];
            }
            var url = '/webservices/twitterApi.aspx';
            if (s.loading_text) 
                $(this).prepend(loading);
            $.getJSON(url, function(data){
                if (s.loading_text) 
                    loading.remove();
                if (s.intro_text) 
                    list.before(intro);
                $.each(data.results, function(i, item){
                    if (i == s.count) {
                        return false;
                    }
                    // audo join text based on verb tense and content
                    if (s.join_text == "auto") {
                        if (item.text.match(/^(@([A-Za-z0-9-_]+)) .*/i)) {
                            var join_text = s.auto_join_text_reply;
                        }
                        else 
                            if (item.text.match(/(^\w+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+) .*/i)) {
                                var join_text = s.auto_join_text_url;
                            }
                            else 
                                if (item.text.match(/^((\w+ed)|just) .*/im)) {
                                    var join_text = s.auto_join_text_ed;
                                }
                                else 
                                    if (item.text.match(/^(\w*ing) .*/i)) {
                                        var join_text = s.auto_join_text_ing;
                                    }
                                    else {
                                        var join_text = s.auto_join_text_default;
                                    }
                    }
                    else {
                        var join_text = s.join_text;
                    };
                    var join = '<span class="tweet_join"> ' + join_text + ' </span>';
                    
                    list.append('<li>' + (s.avatar_size ? '<a class="tweet_avatar" href="http://twitter.com/' + item.from_user + '"><img src="' + item.profile_image_url + '" height="' + s.avatar_size + '" width="' + s.avatar_size + '" alt="' + item.from_user + '\'s avatar" border="0"/></a>' : '') + '<a href="http://twitter.com/' + item.from_user + '/statuses/' + item.id + '" title="view tweet on twitter">' + relative_time(item.created_at) + '</a>' + ((s.join_text) ? join : ' ') + '<span class="tweet_text">' + item.text.replace(/(\w+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&#\?\/.=]+)/gi, '<a href="$1">$1</a>').replace(/[\@]+([A-Za-z0-9-_]+)/gi, '<a href="http://twitter.com/$1">@$1</a>').replace(/ [\#]+([A-Za-z0-9-_]+) /gi, ' <a href="http://search.twitter.com/search?q=&tag=$1&lang=all&from=' + s.username.join("%2BOR%2B") + '">#$1</a> ').replace(/[&lt;]+[3]/gi, "<tt class='heart'>&#x2665;</tt>") + '</span></li>');
                });
                $('.tweet_list li:odd').addClass('tweet_even');
                $('.tweet_list li:even').addClass('tweet_odd');
                $('.tweet_list li:first').addClass('tweet_first');
                $('.tweet_list li:last').addClass('tweet_last');
                if (s.outro_text) 
                    list.after(outro);
                
                // Adds attr target="_blank" to links starting with "http://..."
                // Found in scripts/js/global.js
                openHTTPlinksInNewWindow();
            });
        });
    };
})(jQuery);
// End of twitter widget

// Marquee Rotator
function animateMarquee(whichMarquee){
    var imgLength;
    var imgRandom;
    var imgHeight;
    var imgOffset;
    $('div#' + whichMarquee).each(function(){
        imgHeight = $(this).children('img').height();
        imgOffset = "-" + imgHeight + "px";
        imgLength = $(this).children('img').length;
        imgRandom = Math.floor(Math.random() * imgLength);
        //timeRandom = (Math.floor(Math.random() * 6) + 1) * 6;
        $(this).children().css("zIndex", "5").addClass("reset");
        $(this).children().eq(imgRandom).css("zIndex", "100").removeClass("reset").animate({
            "top": 0
        }, 1000, "swing", function(){
            $('div.marquee img[class="reset"]').css({
                top: imgOffset
            });
        });
    });
};

// Main navigation script
// Attach hover slides to nav items
function appendActiveSliders(){
    $('<a>').attr({
        href: "index.html#hypercube"
    }).addClass('on hyperActive').appendTo('li.hypercube');
    $('<a>').attr({
        href: "cube.html#cube"
    }).addClass('on cubeActive').appendTo('li.cube');
    $('<a>').attr({
        href: "you.html#you"
    }).addClass('on youActive').appendTo('li.you');
}

// on mouse over slide up nav item
function showNavActive(currentLink){
    //alert(currentLink);
    $(currentLink).children('.on').stop().animate({
        top: 0
    }, 200, "swing");
};
// on mouse out slide down nav item
function hideNavActive(currentLink){
    //alert(currentLink);
    $(currentLink).children('.on').stop().animate({
        top: 25
    }, 200, "swing");
};
// set nav item to current if hashTag == li.className
function setNavActive(hashTag){
    var hashTag = window.location.hash;
    hashTag = hashTag.replace(/#/, "");
    if (hashTag != "") {
        $('li.' + hashTag + ' a').addClass("current");
        $('a.current').next().remove();
        $('a.current').css({
            backgroundPosition: "bottom"
        });
    }
};

// Makes the nav fancy
function setupNavAnimationAndStates(){
    // Attach hover slides to nav items
    appendActiveSliders();
    // Show current page nav item
    setNavActive();
    // Set hover in/out functions for main Nav
    $('div#MainNav ul li.navItem').hover(function(){
        showNavActive(this)
    }, function(){
        hideNavActive(this);
    });
}

function infoPanel(){
    if (readCookie("signedUp") == "true") {
        // set mainContents height equal to the infoPanel
        // Fixes footer from getting being overlayed
        var panelHeight = $('div#infoPanel').height();
        panelHeight = parseInt(panelHeight);
        panelHeight = panelHeight + 30;
        var restoreHeight = $('div#MainContent').height();
        //$('div#infoPanel').css({position : "absolute"})
        $('div#MainContent').css({
            height: panelHeight
        });
    }
    
    // hide infoPanel
    $('a.hideInfoPanel').click(function(){
        $('div#infoPanel').animate({
            left: -600
        }, 500, "swing", function(){
            $('div#MainContent').animate({
                height: restoreHeight
            }, 200);
        })
        return false;
    })
}

// shows full window overlay.
//will also block user from interacting with page elements with a lesser z-index
function showFullOverlay(noticeID, opacityVal, color){
    $('select').addClass("hide_select"); // This is for IE6 only
    var overlayHeight = $(document).height();
    var overlayWidth = $(document).width();
    $('div.overlay').css({
        display: "block",
        height: overlayHeight,
        width: overlayWidth,
        opacity: opacityVal,
        backgroundColor: color
    });
    $('div#' + noticeID).css({
        display: "block"
    })
};

function hideFullOverlay(noticeID){
    $('select').removeClass("hide_select"); // This is for IE6 only
    $('div.overlay').css({
        display: "none"
    });
    $('div#' + noticeID).css({
        display: "none"
    })
};

function cubePersonaBubbles(){
    $('<img>').attr({
        src: "../images/common/persona_bubble_tip.gif"
    }).appendTo('div.persona_bubble');
    
    $('div.cubeHolder').hover(function(){
        var whichCube = $(this).attr("data");
        var pos = $(this).offset();
        $('div#' + whichCube).css({
            display: "block",
            opacity: 1,
            top: pos.top - 20,
            left: pos.left - 36
        });
    }, function(){
        var whichCube = $(this).attr("data");
        $('div#' + whichCube).css({
            opacity: 0,
            display: "none"
        });
    });
    
    $('div.persona_bubble').hover(function(){
        var pos = $(this).position();
        $(this).css({
            display: "block",
            opacity: 1
        });
    }, function(){
        $(this).css({
            display: "none",
            opacity: 0
        });
        
    })
}

function animateArrows(){
    $('div#signUp div.arrows').stop().css({
        display: "block"
    }).animate({
        left: -60
    }, 200, "swing", function(){
        $(this).animate({
            left: -70
        }, 500, "swing", function(){
        })
    });
}

function emailSignUp(){

    // email validation 
    $('div#signUp form').submit(function(){
        var inputvalue = $("div#signUp form input.email").val();
        showFullOverlay("emailValidating", 0.75, "black");
        setTimeout(function(){
            checkEmail(inputvalue);
        }, 1000);
        return false
    })
    
    // Email input focus
    $('form input.email').focus(function(){
        if ($(this).attr("data") == "false") {
            $(this).val("").css({
                backgroundColor: "#000",
                border: "1px dashed #fff",
                color: "white"
            })
        }
        else {
            $(this).css({
                backgroundColor: "#000",
                border: "1px dashed #fff",
                color: "white"
            })
        }
    })
    $('form input.email').blur(function(){
        $(this).attr({
            data: "true"
        });
        $(this).css({
            backgroundColor: "white",
            border: "1px solid white",
            color: "black"
        })
    })
    // set focus on sign up input when a.signUp is clicked
    $('a.signUp, a.clickToSignUp').click(function(){
        $('form input.email').focus();
        // animate sign up arrows
        animateArrows();
        return false;
    })
}

$(document).ready(function(){

    // Hide signUp if the user has already entered their email
    if (readCookie("signedUp") == "true") {
        var signedUp = $('<p>' + alreadySignedUp + '</p>')
        $('div#signUp').append(signedUp).css({
            padding: 0
        })
    }
    
    // When all marquee images have loaded start animating the marquee
    $('div.marquee img:last').ready(function(){
        // Marquee A
        animateMarquee("marquee_a");
        setInterval(function(){
            animateMarquee("marquee_a");
        }, (Math.random() * 5000) + 4000);
        // Marquee B
        animateMarquee("marquee_b");
        setInterval(function(){
            animateMarquee("marquee_b");
        }, (Math.random() * 5000) + 6000);
        // Marquee C
        animateMarquee("marquee_c");
        setInterval(function(){
            animateMarquee("marquee_c");
        }, (Math.random() * 5000) + 7000);
        // Marquee D
        animateMarquee("marquee_d");
        setInterval(function(){
            animateMarquee("marquee_d");
        }, (Math.random() * 5000) + 6000);
    });
    
    
    // English/French toggler
    languageToggle(url);
    
    // function for submitting/validating/focusing/blurring sign up form
    emailSignUp();
    
    // function for showing/hiding cube persona bubbles
    cubePersonaBubbles();
    
    // set mainContents height equal to the infoPanel
    // Fixes footer from getting being overlayed
    // hide panel when << close is clicked
    infoPanel();
    
    // Show notice on start up
    //showFullOverlayF("Overlay1", "ThankYou", .75, "#000");
    //$('div.notice_popup').css({display : "block"});
    
    // Click function to hide notice/error message and overlay.
    $('a.close_window').click(function(){
        $('select').removeClass("hide_select"); // This is for IE6 only
        $('div.notice_popup, div.error_popup, div.overlay').css({
            display: "none"
        })
    });
    
    
    // Set us up the nav.
    // All your anchors are belong to us.
    setupNavAnimationAndStates();
    
    // Attaches target="_blank" to outgoing links eg. anything that starts with "http://"
    openHTTPlinksInNewWindow();
    
    // Load twitter feed into div.tweets
    $("div.tweets").tweet({
        join_text: "auto",
        avatar_size: 0,
        count: 6,
        auto_join_text_default: "the hypercube said,",
        auto_join_text_ed: "the hypercube",
        auto_join_text_ing: "the hypercube was",
        auto_join_text_reply: "the hypercube replied to",
        auto_join_text_url: "the hypercube was checking out",
        loading_text: "loading my twitter feed..."
    });
    
});