Soft Reject proper event binding & spacing and alignment. pls help me

html
themeforest

#1

can anyone please tell me what to improve …
My Template : https://goo.gl/MBmRbq

  1. PROPER EVENT BINDING: Consider using the preferred .on() method
    rather than .click(), .bind(), .hover(), etc. For best performance and
    concise code use event delegation whenever possible: http://code.tutsplus.com/tutorials/quick-tip-javascript-event-delegation-in-4-minutes--net-8961
/*************************************************
    1. use strict
    2. Preloader
    3. baguetteBoxOne map     
    4. owlCarousel
    5. Affix
    6. Counter
    7. map scroll off 
*************************************************/

( function($) {
"use strict"; // Start of use strict

/*------------------------------------------------
 * Preloader 
------------------------------------------------*/  

    $(window).load(function() {
        $('#loading').fadeOut();
        $('#preloader').delay(300).fadeOut('slow');
    });

/*------------------------------------------------
 * baguetteBoxOne map     
------------------------------------------------*/  

    onload = function() {
        if(typeof oldIE === 'undefined' && Object.keys)
        hljs.initHighlighting();

        baguetteBox.run('.baguetteBoxOne');
        baguetteBox.run('.baguetteBoxTwo');
        baguetteBox.run('.baguetteBoxThree', {
        animation: 'fadeIn'
        });
        baguetteBox.run('.baguetteBoxFour', {
            buttons: false
            });
        baguetteBox.run('.baguetteBoxFive', {
            captions: function(element) {
                return element.getElementsByTagName('img')[0].alt;
                }
        });
    };

/*------------------------------------------------
 * owlCarousel    
------------------------------------------------*/  

     $("#owl-demo").owlCarousel({
                autoPlay: 3000,
                items: 3,
                itemsDesktop: [1199, 3],
                itemsDesktopSmall: [979, 3]
            }); 
 
/*------------------------------------------------
 * Affix   
------------------------------------------------*/  
   // page scroll
   $('.page-scroll').click(function(){
    var $anchor = $(this);
            $('html, body').stop().animate({
                scrollTop: ($($anchor.attr('href')).offset().top - 50)
            }, 1250, 'easeInOutExpo');
    return false;
    });
    // highlight the top nav as scrolling occurs
    $('body').scrollspy({
        target: '.navbar-fixed-top',
        offset: 51
    });
    // offset for main navigation
    $('#mainNav').affix({
        offset: {
            top: 100
        }
    }); 
    
/*------------------------------------------------
 * Counter  
------------------------------------------------*/       
     $('.timer').countTo();
     
/*------------------------------------------------
 * map scroll off    
------------------------------------------------*/           
    $('.maps').click(function () {
        $('.maps iframe').css("pointer-events", "auto");
    });
    
    $( ".maps" ).mouseleave(function() {
      $('.maps iframe').css("pointer-events", "none"); 
    });
}(jQuery, window, document)); // End of use strict
  1. SPACING AND ALIGNMENT: There are spacing and alignment issues in
    this item. Please make sure that all elements are aligned properly and
    spacing is consistent from section to section. Here are some articles
    with more information regarding negative space and proper spacing: http://webdesign.tutsplus.com/articles/using-white-space-or-negative-space-in-your-designs--webdesign-3401,\ http://webdesign.tutsplus.com/articles/adding-space-to-your-designs--webdesign-14836

soft reject my pls help me few qutions resolve
#2

Same issue:


#3

which place change code tell me


#4

PROPER EVENT BINDING: Consider using the preferred .on() method
rather than .click(), .bind(), .hover(), etc. For best performance and
concise code use event delegation whenever possible: http://code.tutsplus.com/tutorials/quick-tip-javascript-event-delegation-in-4-minutes--net-8961

pls help me


#5

instead of using :

$(window).load(function() {

});

use :

$(window).on('load', function() {

});

and that goes for all the events that you have in your script :slight_smile:


#6

You can study about event delegation. Otherwise it is difficult to fix.


#7

pls check my code

( function($) {
“use strict”; // Start of use strict

$(function(){
LoadtSection();
BaguetteBox();
OwlCarousel();
OnepageScroll();
Affix();
Counter();
MapScroll();
});

/*------------------------------------------------

  • Preloader
    ------------------------------------------------*/
    var LoadtSection = function() {
    $(window).on(‘load’, function() {
    $(’#loading’).fadeOut();
    $(’#preloader’).delay(300).fadeOut(‘slow’);
    });

};

/*------------------------------------------------

  • baguetteBoxOne map
    ------------------------------------------------*/
    var BaguetteBox = function() {
    window.onload = function() {
    if (typeof oldIE === ‘undefined’ && Object.keys) {
    hljs.initHighlighting();
    }

    baguetteBox.run(’.baguetteBoxOne’);
    baguetteBox.run(’.baguetteBoxTwo’);
    baguetteBox.run(’.baguetteBoxThree’, {
    animation: ‘fadeIn’,
    noScrollbars: true
    });
    baguetteBox.run(’.baguetteBoxFour’, {
    buttons: false
    });
    baguetteBox.run(’.baguetteBoxFive’, {
    captions: function(element) {
    return element.getElementsByTagName(‘img’)[0].alt;
    }
    });
    };
    };
    /*------------------------------------------------

  • owlCarousel
    ------------------------------------------------/
    var OwlCarousel = function() {
    $("#owl-demo").owlCarousel({
    autoPlay: 3000,
    items: 3,
    itemsDesktop: [1199, 3],
    itemsDesktopSmall: [979, 3]
    });
    };
    /
    ------------------------------------------------

  • page scroll
    ------------------------------------------------*/
    var OnepageScroll = function() {
    $(‘a.page-scroll’).bind(“click”, function (event) {
    var $anchor = $(this);

     $('html, body').stop().animate({
         scrollTop: $($anchor.attr('href')).offset().top - 50
      }, 1500,'easeInOutExpo');
    
         event.preventDefault();
    });
    

    $(window).scrollspy({
    target: ‘.navbar-fixed-top’,
    offset: 51
    });
    };
    /*------------------------------------------------

  • Affix
    ------------------------------------------------/
    var Affix = function() {
    // offset for main navigation
    $(’#mainNav’).affix({
    offset: {
    top: 100
    }
    });
    };
    /
    ------------------------------------------------

  • Counter
    ------------------------------------------------/
    var Counter = function() {
    $(’.timer’).countTo();
    };
    /
    ------------------------------------------------

  • map scroll off
    ------------------------------------------------*/
    var MapScroll = function () {
    $(’.maps’).click(function () {
    $(’.maps iframe’).css(“pointer-events”, “auto”);
    });

    $( “.maps” ).mouseleave(function() {
    $(’.maps iframe’).css(“pointer-events”, “none”);
    });
    };

}(jQuery, window, document));


#8

The js file is in the attachements of this email :slight_smile:


#9

I could have made better if I had the full project so I can see how things are working, but still you can try this:

(function($) {
    "use strict"; // Start of use strict

    $(function() {
        LoadtSection();
        BaguetteBox();
        OwlCarousel();
        OnepageScroll();
        Affix();
        Counter();
        MapScroll();
    });

    /*------------------------------------------------
    * Preloader 
    ------------------------------------------------*/
    var LoadtSection = function() {
        $(window).on('load', function() {
            $('#loading').fadeOut();
            $('#preloader').delay(300).fadeOut('slow');
        });

    };

    /*------------------------------------------------
    * baguetteBoxOne map 
    ------------------------------------------------*/
    var BaguetteBox = function() {
        $(window).on('load', function() {
            if (typeof oldIE === 'undefined' && Object.keys) {
                hljs.initHighlighting();
            }

            baguetteBox.run('.baguetteBoxOne');
            baguetteBox.run('.baguetteBoxTwo');
            baguetteBox.run('.baguetteBoxThree', {
                animation: 'fadeIn',
                noScrollbars: true
            });
            baguetteBox.run('.baguetteBoxFour', {
                buttons: false
            });
            baguetteBox.run('.baguetteBoxFive', {
                captions: function(element) {
                    return element.getElementsByTagName('img')[0].alt;
                }
            });
        });
    };
	
    /*------------------------------------------------
    * owlCarousel 
    ------------------------------------------------*/
    var OwlCarousel = function() {
        $('#owl-demo').owlCarousel({
            autoPlay: 3000,
            items: 3,
            itemsDesktop: [1199, 3],
            itemsDesktopSmall: [979, 3]
        });
    };
	
    /*------------------------------------------------
    * page scroll 
    ------------------------------------------------*/
    var OnepageScroll = function() {
        $('a.page-scroll').on('click', function(event) {
            var $anchor = $(this);

            $('html, body').stop().animate({
                scrollTop: $($anchor.attr('href')).offset().top - 50
            }, 1500, 'easeInOutExpo');

            event.preventDefault();
        });

        $(window).scrollspy({
            target: '.navbar-fixed-top',
            offset: 51
        });
    };
	
    /*------------------------------------------------
    * Affix 
    ------------------------------------------------*/
    var Affix = function() {
        // offset for main navigation
        $('#mainNav').affix({
            offset: {
                top: 100
            }
        });
    };
	
    /*------------------------------------------------
    * Counter
    ------------------------------------------------*/
    var Counter = function() {
        $('.timer').countTo();
    };
	
    /*------------------------------------------------
    * map scroll off 
    ------------------------------------------------*/
    var MapScroll = function() {
        $('.maps').on('click', function() {
            $('.maps iframe').css('pointer-events', 'auto');
        });

        $(".maps").on('mouseleave', function() {
            $('.maps iframe').css('pointer-events', 'none');
        });
    };

}(jQuery, window, document));

#10

Hello Are you there

your code use working file you check

https://goo.gl/MBmRbq

  1. SPACING AND ALIGNMENT: There are spacing and alignment issues in
    this item. Please make sure that all elements are aligned properly and
    spacing is consistent from section to section. Here are some articles
    with more information regarding negative space and proper spacing: http://webdesign.tutsplus.com/articles/using-white-space-or-negative-space-in-your-designs--webdesign-3401,\1 http://webdesign.tutsplus.com/articles/adding-space-to-your-designs--webdesign-148361
    created3dlast reply16m8replies89views4users7links43

Tell me


#11

Try this new code, and tell me if this code works as well.

// Start of use strict
"use strict";

/*------------------------------------------------
* Preloader 
------------------------------------------------*/
$(window).on('load', function() {
    $('#loading').fadeOut();
    $('#preloader').delay(300).fadeOut('slow');

    /*------------------------------------------------
	* baguetteBoxOne map 
	------------------------------------------------*/
    if (typeof oldIE === 'undefined' && Object.keys) {
        hljs.initHighlighting();
    }

    baguetteBox.run('.baguetteBoxOne');
    baguetteBox.run('.baguetteBoxTwo');
    baguetteBox.run('.baguetteBoxThree', {
        animation: 'fadeIn',
        noScrollbars: true
    });
    baguetteBox.run('.baguetteBoxFour', {
        buttons: false
    });
    baguetteBox.run('.baguetteBoxFive', {
        captions: function(element) {
            return element.getElementsByTagName('img')[0].alt;
        }
    });
	
	/*------------------------------------------------
	* Load Functions
	------------------------------------------------*/
    OwlCarousel();
    Affix();
    Counter();
});

/*------------------------------------------------
* owlCarousel 
------------------------------------------------*/
var OwlCarousel = function() {
    $('#owl-demo').owlCarousel({
        autoPlay: 3000,
        items: 3,
        itemsDesktop: [1199, 3],
        itemsDesktopSmall: [979, 3]
    });
};

/*------------------------------------------------
* page scroll 
------------------------------------------------*/
$('a.page-scroll').on('click', function(event) {
    var $anchor = $(this);

    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top - 50
    }, 1500, 'easeInOutExpo');

    event.preventDefault();
});

$(window).scrollspy({
    target: '.navbar-fixed-top',
    offset: 51
});

/*------------------------------------------------
* Affix 
------------------------------------------------*/
var Affix = function() {
    // offset for main navigation
    $('#mainNav').affix({
        offset: {
            top: 100
        }
    });
};

/*------------------------------------------------
* Counter
------------------------------------------------*/
var Counter = function() {
    $('.timer').countTo();
};

/*------------------------------------------------
* map scroll off 
------------------------------------------------*/
$('.maps').on('click', function() {
    $('.maps iframe').css('pointer-events', 'auto');
});

$(".maps").on('mouseleave', function() {
    $('.maps iframe').css('pointer-events', 'none');
});

And for the spacing and alignement matter just do add some spaces between
the sections of your website. and play with some paddings and margins, the
most important thing is to make things more clear and distinct :slight_smile:


#12

Hello Are you there

your code use working file you check

https://goo.gl/MBmRbq


#13

That’s good for the scripting, you have to work now a little bit on your spacing and alignement, do as I suggested, add some spacing between sections, and also a little bit of space between the titles and the contents of the sections.

Once done, resubmit your file, and good luck :slight_smile:


#14

Hello Are you there

i have spacing between sections and titles add you check done i am submit

https://goo.gl/MBmRbq


#15

Good, resubmit your file, and good luck. :slight_smile:


#16

Thank for help


#17

thank for my help theme approved


#18

Most Welcome, and Good Luck With Sales :slight_smile:


#19

you comment my work for my theme