0

For the sake of learning, I'm just curious how I can simplify these functions? Open to any suggestions...
Please forgive all the over-commenting.

$(document).ready(function() {

// code for random backgorund image on page load
$("#full-size-background").css("background-image", "url(images/backgrounds/" + Math.floor(Math.random()*3) + ".jpg)");



// starting point fade when "menu" clicked

    $("#starting_point_link").on("click", function(){

            $('#starting_point, .places-slideshow,#full-size-background').stop().animate({ opacity: 0 }, 1400, function() {
                $('#starting_point').css({display:"none"});
                $('#main_center_box').css({zIndex:"1"});
                $('.header_content, #main_center_box').css({display:"block"}).stop().animate({ opacity: 1 }, 800, function() { 

                    //  $(' #main_center_box').load('mazenga.php');

                    $('#main_center_box2').stop().animate({ opacity: 1 }, 700, function() { /* animation complete */ });
                    $('.places-slideshow').stop().animate({ opacity: 1 }, 2100, function() { /* animation complete */ });

                }); 

                $("#starting_point_link").attr('class','visited');
                $("#full-size-background,.header_content").css('opacity','0').css("background-image", "url(images/BG1a.jpg)");
                $('#full-size-background').stop().animate({ opacity: 1 }, 700, function() { /* animation complete */ });
                $('.header_content').stop().animate({ opacity: 1 }, 800, function() { /* animation complete */ });
            });
    });



// function for navigation clicks

    $("#top_nav li a, #footer_info").on("click", function(e){

                // prevent the a href from doing what it naturally does.
                e.preventDefault();

                // highlight active nav link & turn off others              
                $('.current').attr('class','link1');



                // set the hashtag in url
                window.location.hash = $(this).attr('name');

                // which page chosen?
                var loadpage = 'inc/'+$(this).attr('name')+'.php';
                var footer = 'inc/footer.php';

                // fade out the main box    


                if(loadpage == "inc/index.php"){

                    $('#main_center_box,.header_content').css({opacity:1}).stop().animate({ opacity: 0 }, 700, function() { /* animation complete */ });
                    $('#starting_point, .places-slideshow,#full-size-background').css({display:"block"}).stop().animate({ opacity: 1 }, 1400, function() { /* animation complete */ });
                    $('#main_center_box').css({zIndex:"-1"});
                    $("#starting_point_link").attr('class','');

                } else {
                    $('#main_center_box,#footer_links').stop().animate({ opacity: 0, zIndex:0 }, 700, function() { 
                        $(this).attr('class','current');
                        // now load the page that matches navigation selected
                        $('#main_center_box').css({zIndex:1 }).load(loadpage).stop().animate({ opacity: 1}, 700, function() { /* animation complete */ });
                        $('html,body').scrollTop(0);
                    });
                }
    });




$('.slider .slide:eq(0)').addClass('active').fadeIn(200);

$('.slider-nav li a').click(function() {    
    var index = $(this).parent().index('li');

    $('.slider .slide.active').removeClass('active').fadeOut(200, function() { 
            $('.slider .slide:eq(' + index + ')').addClass('active').fadeIn(200);
        });

    return false;
});

$('.slide').click(function() {
    if($(this).hasClass('active')){
        $(this).removeClass('active').fadeOut(200, function() {
            if($(this).is(':last-child')){
                $('.slider .slide:first-child').addClass('active').fadeIn(200);
            }else{
                $(this).next().addClass('active').fadeIn(200);
            }
        });
    } 
}); 





// 'scroll to' code

$('.portfolio_links').live('click', function(){ 
    var whichTag = $(this).attr('id');
    val = whichTag.split("_");
    thisTag = "#position_"+val[1];

    $('html, body').animate({scrollTop: $(thisTag).offset().top - 100}, 2000);

});

}); // document ready ending brackets



// the form label controls

(function($) {
    function toggleLabel() {
        var input = $(this);
        setTimeout(function() {
            var def = input.attr('title');
            if (!input.val() || (input.val() == def)) {
                input.prev('span').css('visibility', '');
                if (def) {
                    var dummy = $('<label></label>').text(def).css('visibility','hidden').appendTo('body');
                    input.prev('span').css('margin-left', dummy.width() + 3 + 'px');
                    dummy.remove();
                }
            } else {
                input.prev('span').css('visibility', 'hidden');
            }
        }, 0);
    };

    function resetField() {
        var def = $(this).attr('title');
        if (!$(this).val() || ($(this).val() == def)) {
            $(this).val(def);
            $(this).prev('span').css('visibility', '');
        }
    };

    $('input, textarea').live('keydown', toggleLabel);
    $('input, textarea').live('paste', toggleLabel);
    $('select').live('change', toggleLabel);

    $('input, textarea').live('focusin', function() {
        $(this).prev('span').css('color', '#000');
    });
    $('input, textarea').live('focusout', function() {
        $(this).prev('span').css('color', '#fff');
    });

    $(function() {
        $('input, textarea').each(function() { toggleLabel.call(this); });
    });

})(jQuery);
3
Contributors
2
Replies
23
Views
4 Years
Discussion Span
Last Post by Troy III
0

For the sake of learning, I'm just curious how I can simplify these functions? Open to any suggestions...

I find it hard to simpify your code.

That might not be anwer you would like.

The code you provide is well written in jQuery.

I'm not sure how to modify it to be more simpify than it is already.

Edited by LastMitch: grammer

0

Can't simplify something, that is not (either) yours nor mine...
What can we say: "remove jQuery - would be a good start" I guess.
After all, it is [the lib alone] most probably 10x larger than the content of the Site itself.

-did I say: most probably?
-yeah, I most probably did! :)

Edited by Troy III

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.