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

Popular posts from this blog

SQL php on different pages to Insert (mysqli) -

-
i have piece of php code, works when placed on index page ( index.php ), nothing if put in page, i.e. add.php for example: having code add.php page, tried go to: www.myhost.com/add.php , nothing happen. if copy code index.php , go page www.myhost.com/index.php add row in sql table. why that? <?php $server="mysql.server.com"; $user="randomusr"; $pass="randompwd"; $db="randomdb"; $link=mysqli_connect($server, $user, $pass, $db); $result=mysqli_query($link,"select * `battery` `id`"); $query = "insert battery (id,type,owner,charge,time) values ('1','lily002','maisnow','15','2015-04-22 17:20:28')"; mysqli_query($link, $query); header("location: index.php"); //this 1 comment out when copied index.php ?> l # name type collation attributes null 1 id int(16) no ...
Read more

php - How can an email be returned from Stripe Checkout? -

-
using stripe, want store customer email address email supplied in checkout. unfortunately, posting stripeemail in charge.php file returns null . how can return email checkout can use send receipt? here's form code: <script src="https://checkout.stripe.com/v2/checkout.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script> <form action="charge.php" method="post"> <input type="hidden" id="amount" name="chargeamount"/> <button data-charge-amount="300000" data-charge-name="name" data-charge-description="description">select pledge level</button> <button data-charge-amount="123123" data-charge-name="name2" data-charge-description="description2">donate</button> </form> <script> $('button').click(function(){ var token...
Read more

sql - Partition elimination in Greenplum -

-
i have scenario this: select * package package_type in ('box','card') the table partitioned package_type field. assume there twenty possible values package_type field. there twenty partitions including box , card , default partitions. when above query run, partition elimination happens correctly , box , card partitions scanned. result quick. however, when same query written this: select * package package_type in (select package_type package_list_table) , column package_type in package_list_table contains 2 values box , card . when above query run, 20 partitions being scanned. degrades performance. it seems compiler failing identify second query correctly , result partitions getting accessed. any workarounds overcome this? thanks in advance. the postgres manual page on partitioning includes caveat constraint exclusion works when query's clause contains constants (or externally supplied parameters). example, comparison agains...
Read more