Response title
This is preview!
How can I keep my functions in the proper 'this' scope when using a chain of lambda functions?
in Using jQuery
•
10 years ago
This issue is no longer relevant to what I'm trying to acccomplish
on line 102 I call "this.contentAppear" under the scope of a lambda function triggered by the end of an animation. If I call it outside of the animation lambda function it works fine. If I use a setTimeout trigger of the same time it takes to complete the function it still screws over. How can I trigger the .contentAppear() function with the proper scope WITHOUT passing a parameter?
Here is my test link: http://k8r.us/test11/test.html
Here is my code
- //REQUIRES: jQuery
- function k8rModal(DOMnamespace){
- var _ = this._ = DOMnamespace+"_"; // for DOM namespacing
- var slate,stage,closeButton,contentContainer;
- var k8rModalInstance = this;
- this.tightWrap=01;
- this.visible = 0;
- this.content = '';
- $('body').prepend('<div id="'+_+'stage" class="'+_+'modalSet"></div>');
- this.stage = stage = $('#'+_+'stage');
- stage.css({
- 'display':'none',
- 'width':'100%',
- 'height':'100%',
- 'position': 'fixed',
- 'left':'0px',
- 'top':'0px',
- 'opacity': '.6',
- 'background-color':'#333'
- });
- stage.click(function(){
- k8rModalInstance.disappear();
- });
- $('body').append('<div id="'+_+'slate" class="'+_+'modalSet"></div>');
- this.slate = slate = $('#'+_+'slate');
- slate.css({
- 'display':'none',
- 'width':'640px',
- 'height':'480px',
- 'position': 'fixed',
- 'left':'0px',
- 'top':'0px',
- 'background-color':'#eee'
- });
- slate.append('<div id="'+_+'contentContainer"></div>');
- this.contentContainer = contentContainer = $('#'+_+'contentContainer');
- contentContainer.css({
- 'display':'none',
- 'width':'100%',
- 'height':'100%',
- 'padding': '0px',
- 'margin':'0px',
- });
- $('body').append('<div id="'+_+'closeButton" class="'+_+'modalSet">Close</div>');
- this.closeButton = closeButton = $('#'+_+'closeButton');
- closeButton.css({
- 'display':'none',
- 'width':'60px',
- 'height':'24px',
- 'position': 'fixed',
- 'left':'0px',
- 'top':'0px',
- 'background-color':'#eee'
- });
- closeButton.click(function(){
- k8rModalInstance.disappear();
- });
- this.modalSet = $('.'+_+'modalSet');
- $('.'+_+'caller').on('click',function(){
- k8rModalInstance.setContent( $(this).attr(_+'src') );
- k8rModalInstance.appear();
- });
- this.centerSlate();
- $(window).resize(function(){
- k8rModalInstance.adjustToScreenResize();
- });
- }
- k8rModal.prototype.setContent = function(src){
- this.content = document.getElementById(src);
- this.contentContainer.html(this.content.innerHTML);
- }
- k8rModal.prototype.updateTightWrap = function(){
- if (this.tightWrap){
- var W, H, _this = this;
- W = $(this.content).first().innerWidth();
- H = $(this.content).first().innerHeight();
- this.contentContainer.css({
- 'width':W,
- 'height':H,
- 'display':'none',
- });
- if (this.slate.css('width')!=W || this.slate.css('height')!=H ){
- this.slate.animate(
- {width: W,height: H},
- 591,
- 'linear',
- _this.contentAppear
- );
- }else{
- this.contentAppear();
- }
- }
- }
- k8rModal.prototype.appear = function(){
- var _this=this;
- if (this.tightWrap){
- this.modalSet.fadeIn('600',function(){
- _this.updateTightWrap();
- });
- }else{
- this.modalSet.fadeIn('600');
- this.contentAppear();
- }
- }
- k8rModal.prototype.contentAppear = function(){
- this.contentContainer.fadeIn('505',function(){
- this.visible = 1;
- });
- }
- k8rModal.prototype.disappear = function(){
- this.visible = 0;
- this.modalSet.fadeOut('222');
- }
- k8rModal.prototype.centerSlate = function(){
- var wWidth, wHeight, slate = $(this.slate), closeButton = $(this.closeButton);
- wWidth = $(window).width();
- wHeight = $(window).height();
- slate.css({
- top: ( wHeight/2 - ( slate.height()/2 ) )+"px",
- left: ( wWidth/2 - ( slate.width()/2 ) )+"px"
- });
- closeButton.css({
- top: ( wHeight/2 + ( slate.height()/2 )*1.05 )+"px",
- left: ( wWidth/2 - ( closeButton.width()/2 ) )+"px"
- });
- }
- k8rModal.prototype.adjustToScreenResize = function(){
- this.centerSlate();
- }
--- Keysle
1