CODEWITHSUNDEEP
javascriptjqueryhtml
Musa Muaz
Musa Muaz

Reputation: 714

Functions are not working in js prototype

I have developed a jQuery plugin with prototypal inheritance.But functions are only working for main init() function and other prototypes are not working.

My main function is

function Mynav(){
  ....
}

Mynav.prototype.linkBehaviour = function(){
     $('.nav-menu li a').on('click', function(e) {
         if ($(this).attr('href') !== '#') {
            var link = $(this).attr('href');
            $('#preloader').removeClass('fadeOut').addClass('fadeIn').fadeIn('slow');
            setTimeout(function() {
                 window.location = link;
            }, 1500)
         } else if ($(this).attr('href') == '#') {
              e.preventDefault();
         }
    });
}

Mynav.prototype.verticalConverter = function(){
     if (verticalNavOn) {

       if(!verticalLive){
          menuConverter();
          verticalLive = true;
        }

     }
     $(window).on('load resize', function(){
         width = $(window).width();
         if(width < 959){
            if(!verticalLive){
               menuConverter();   //This is a function also available with Mynav.prototype.menuConverter
               header.removeAttr('style');
               verticalLive = true;
            }
         } else{
             convertHorizontal();  // Its also a function available
             $('.header-fixed').attr('style',headerAttr);
              verticalLive = false;
         }
      });
}


function init(){
   new Mynav();
}

init();

In the upper codes linkBehaviour and verticalconverter is not working if i place linkBehaviour function in the main Mynav() it works then but not working in individual. And i don't actually know about load/resize works with prototype or not . Can any one help About the above two functions?

Upvotes: 0

Views: 77

Answers (1)

arannasousa
arannasousa

Reputation: 317

function Mynav(){

  this.verticalNavOn = false;

}

Mynav.prototype.linkBehaviour = function(){
     $('.nav-menu li a').on('click', function(e) {
         if ($(this).attr('href') !== '#') {
            var link = $(this).attr('href');
            $('#preloader').removeClass('fadeOut').addClass('fadeIn').fadeIn('slow');
            setTimeout(function() {
                 window.location = link;
            }, 1500)
         } else if ($(this).attr('href') == '#') {
              e.preventDefault();
         }
    });
}

/* --------------------------------------------------------------------------------------------------------
*   I believe that is in trouble when the RESIZE happens.
*
*   To make the BIND (on), you must pass the own plugin AHEAD. To be used in the event when it happens.
* --------------------------------------------------------------------------------------------------------
*/
Mynav.prototype.verticalConverter = function(){
    var self = this;

     if (self.verticalNavOn) {
       if(!self.verticalLive){
          self.menuConverter();
          self.verticalLive = true;
        }
     }

     // parse THIS plugin for EVENT
     $(window).on('load resize', {self: self}, function(e){

         // get SELF PLUGIN
         var self = e.data['self'];

         width = $(window).width();
         if(width < 959){
            if(!self.verticalLive){
               self.menuConverter();   //This is a function also available with Mynav.prototype.menuConverter
               header.removeAttr('style');
               self.verticalLive = true;
            }
         } else{
             self.convertHorizontal();  // Its also a function available
             $('.header-fixed').attr('style',headerAttr);
              self.verticalLive = false;
         }
      });
}


function init(){
   var x = new Mynav();

   // focing start function for tests
   x.verticalConverter();
}

init();

See full changes HTML and JS in: http://jsbin.com/ricaluredi/3

Upvotes: 1

Related Questions