Reduce js code and number of requests

Asked

Viewed 125 times

1

how can I compress this code into just one, to reduce the number of requests and reduce the js code?

//<![CDATA[
    $(document).ready(function(){
            $('.combobox').combobox()
    }); //]]>


    //----------------> SCROLL FILTER
    ////////////////////////////////////////////////////////////////


    $(document).ready(function(){
      $(function () {
        // scroll body to 0px on click
        $('#sub-btn').click(function () {
          $('#content-body').css('visibility', 'visible');
          $('#content-body').css('margin', '0');
          $('body,html').animate({
            scrollTop: $("#content-body").offset().top}, 1000);
          return false;
        });
      });

    });


    //----------------> TOOLTIP
    ////////////////////////////////////////////////////////////////

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

        $('.tooltip-icon').tooltip({
            placement: 'top',
            title: 'Eles só precisam do seu minuto!'
        });

        $(document).on('focus', '.input-tip', function(){
            $('.tooltip-icon').tooltip('show');
        });

        $(document).on('blur', '.input-tip', function(){
            $('.tooltip-icon').tooltip('hide');
        });

    });    

    //----------------> TAB MAP UI
    ////////////////////////////////////////////////////////////////

    $(document).on('click', '.panel-heading', function(e){
        var $this = $(this);
        if(!$this.hasClass('panel-collapsed')) {
            $this.parents('.panel').find('.panel-body').slideUp();
            $this.addClass('panel-collapsed');        
            $this.find('i').removeClass('fa fa-angle-up').addClass('fa fa-angle-down');
        } else {
            $this.parents('.panel').find('.panel-body').slideDown();
            $this.removeClass('panel-collapsed');        
            $this.find('i').removeClass('fa fa-angle-down').addClass('fa fa-angle-up');
        }
    });


    //----------------> TAB MAP UI
    ////////////////////////////////////////////////////////////////

    $(document).ready(function () {
        $('#slideleft button').click(function () {
           $(this).toggleClass('aberto').next().toggleClass('aberto');
        });
    });

    //----------------> JQUERY EFFECT LIST
    ////////////////////////////////////////////////////////////////

    jQuery(document).ready(function($){
          $('.close-carbon-adv').on('click', function(){
            $('#carbonads-container').hide();
          });
    });


    //----------------> BUTTON RETURN TOP
    ////////////////////////////////////////////////////////////////
    $(document).ready(function(){
      $(function () {
        // scroll body to 0px on click
        $('.return-footer a').click(function () {
          $('body,html').animate({
            scrollTop: 0
          }, 1200);
          return false;
        });
      });

    });
  • you made some attempt ? has something you tried to show, so someone will help you easier

  • This code seems to me "one" only, when you speak decrease the requests of each <script src="">? Join several <script src=""> in one file only? Reduce ajax requests?

  • What do you mean número de requisições? how do you want to reduce code, minify? or do more DRY?

  • Better develop your question for it to be reopened.

  • However, I have simplified its code, as you can see in http://jsfiddle.net/fh50gy1w/ and then compressed [ http://jsfiddle.net/v2mkw7kx/ ], using Closure Compiler [ http://closure-compiler.appspot.com/ ].

1 answer

2


I don’t know if I got the question wrong, you want to do this?

Full version:

    $(document).ready(function () {
    $('.combobox').combobox()
    $('.tooltip-icon').tooltip({
        placement: 'top',
        title: 'Eles só precisam do seu minuto!'
    });
    $(document).on('focus', '.input-tip', function () {
        $('.tooltip-icon').tooltip('show');
    });

    $(document).on('blur', '.input-tip', function () {
        $('.tooltip-icon').tooltip('hide');
    });
    $(function () {
        $('#sub-btn').click(function () {
            $('#content-body').css('visibility', 'visible');
            $('#content-body').css('margin', '0');
            $('body,html').animate({
                scrollTop: $("#content-body").offset().top
            }, 1000);
            return false;
        });
    });
    $('#slideleft button').click(function () {
        $(this).toggleClass('aberto').next().toggleClass('aberto');
    });
    $('.close-carbon-adv').on('click', function () {
        $('#carbonads-container').hide();
    });
    $(function () {
        $('.return-footer a').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 1200);
            return false;
        });
    });
});

$(document).on('click', '.panel-heading', function (e) {
    var $this = $(this);
    if (!$this.hasClass('panel-collapsed')) {
        $this.parents('.panel').find('.panel-body').slideUp();
        $this.addClass('panel-collapsed');
        $this.find('i').removeClass('fa fa-angle-up').addClass('fa fa-angle-down');
    } else {
        $this.parents('.panel').find('.panel-body').slideDown();
        $this.removeClass('panel-collapsed');
        $this.find('i').removeClass('fa fa-angle-down').addClass('fa fa-angle-up');
    }
});

Version min:

$(document).ready(function(){$('.combobox').combobox()
$('.tooltip-icon').tooltip({placement:'top',title:'Eles só precisam do seu minuto!'});$(document).on('focus','.input-tip',function(){$('.tooltip-icon').tooltip('show');});$(document).on('blur','.input-tip',function(){$('.tooltip-icon').tooltip('hide');});$(function(){$('#sub-btn').click(function(){$('#content-body').css('visibility','visible');$('#content-body').css('margin','0');$('body,html').animate({scrollTop:$("#content-body").offset().top},1000);return false;});});$('#slideleft button').click(function(){$(this).toggleClass('aberto').next().toggleClass('aberto');});$('.close-carbon-adv').on('click',function(){$('#carbonads-container').hide();});$(function(){$('.return-footer a').click(function(){$('body,html').animate({scrollTop:0},1200);return false;});});});$(document).on('click','.panel-heading',function(e){var $this=$(this);if(!$this.hasClass('panel-collapsed')){$this.parents('.panel').find('.panel-body').slideUp();$this.addClass('panel-collapsed');$this.find('i').removeClass('fa fa-angle-up').addClass('fa fa-angle-down');}else{$this.parents('.panel').find('.panel-body').slideDown();$this.removeClass('panel-collapsed');$this.find('i').removeClass('fa fa-angle-down').addClass('fa fa-angle-up');}});
  • Exactly Rafael. What’s the difference between using the "Document.ready" and "Document.on command" ?

  • @Hitchleonardo Since this is not the purpose of the question and would have to answer via comment (which would be very confusing) I will indicate a place where it is well explained: http://stackoverflow.com/questions/8396407/jquery-what-are-differences-between-document-ready-and-window-load

Browser other questions tagged

You are not signed in. Login or sign up in order to post.