How to Separate jQuery Functions w/o Using 2 Script Tags -
i'm not 100% knowledgeable in js or jquery, , have question how separate functions.
i have function:
$(window).scroll(function(){ var wscroll = $(this).scrolltop(); console.log(wscroll) var windowwidth = ($(window).width() / 8); var windowheight = ($(window).height() / 16); $('.fore-card').css({ 'transform': 'translate(' + windowwidth*0 + 'px, ' + windowheight*(-6) + 'px)', }); $('.mid-card').css({ 'transform': 'translate(' + windowwidth*(-1) + 'px, ' + windowheight + 'px)', }); $('.back-card').css({ 'transform': 'translate(' + windowwidth*(2) + 'px, ' + windowheight*(-12) + 'px)', }); });
as can see have listener scroll. have functions have nothing scroll of page. work, scroll causing jankiness objects, hence why need separate them.
i thought this:
$(document).ready(function(){ func1(); func2(); [...etc...]; });
would it...but i'm not sure how go this.
update
based off of comments, assume work:
$(function(){ var windowwidth = ($(window).width() / 8); var windowheight = ($(window).height() / 16); $('.fore-card').css({ 'transform': 'translate(' + windowwidth*0 + 'px, ' + windowheight*(-6) + 'px)', }); $('.mid-card').css({ 'transform': 'translate(' + windowwidth*(-1) + 'px, ' + windowheight + 'px)', }); $('.back-card').css({ 'transform': 'translate(' + windowwidth*(2) + 'px, ' + windowheight*(-12) + 'px)', }); $(window).scroll(function(){ var wscroll = $(this).scrolltop(); console.log(wscroll) }); });
if simple listing 2 functions, can thinking:
$(document).ready(function(){ $(window).scroll(function(){ //your scroll function }); //anything else // can put functions, modules, object literals, etc. var module = { func1 : function(){ }, func2 : function(){ } }; $("#somediv").on( "click", module.func1 ); });
as @a.b. notes, can use iiefs avoid polluting global namespace. if app grows larger, can use namespace it, e.g. application:
var application = {}; application.main = ( function( $ ) { //module internals var count = 1, _someinternalfunc = function(){ }; //return public variables return{ count: count, func1: function(){ }, func2: function(){ } }; }( jquery ) );
and can move modules (e.g. application.main) own files , include them dependency loader load in proper order. study functions, namespaces, module pattern, , dependency loaders. also, study new es6 module format, become standard way create modular, exportable functions in javascript.
Comments
Post a Comment