As a javascript noob I have some trouble understanding how I can get variables from a function to another in the supplied example.
I want to use winHeight that is set in xx.projects.resize
in xx.projects.item.next
(you see the console.log(winHeight) in there).
What should I be looking at here?
var xx = {
init: function()
{
xx.listener.init()
},
listener: {
init: function()
{
xx.listener.resize()
},
resize: function()
{
xx.projects.resize()
$(window).on('resize',function(){
xx.projects.resize()
})
},
},
projects: {
resize: function()
{
var $display = $('section .item.curr');
var $displayNotActive = $('section.curr .item.next, section.curr .item.prev');
var winWidth = $(window).width();
var winHeight = $(window).height();
var containerWidth, containerHeight;
if(winWidth > 1450) {
if(winHeight > 1050) {
containerWidth = 1200;
containerHeight = 900;
} else {
containerWidth = winWidth - 250;
var helperHeight = Math.floor(containerWidth * 3/4);
if(helperHeight > (winHeight - 150)) {
containerHeight = winHeight - 150;
containerWidth = Math.floor(containerHeight * 4/3);
} else {
containerHeight = helperHeight;
}
}
} else if(winWidth < 600) {
containerWidth = 300;
containerHeight = 225;
} else {
containerWidth = winWidth - 250;
var helperHeight = Math.floor(containerWidth * 3/4);
if(helperHeight > (winHeight - 150)) {
containerHeight = winHeight - 150;
containerWidth = Math.floor(containerHeight * 4/3);
} else {
containerHeight = helperHeight;
}
}
},
item: {
next: function()
{
var s = $('#projects section.curr')
a = s.find('.item.curr'),
n = a.next('.item'),
l = a.position()
console.log(winHeight);
if( n.length > 0 ){
a.animate({ left: '-100%' }, ep.projects.config.item.speed, ep.projects.config.item.easing)
n.animate({ left: l.left }, ep.projects.config.item.speed, ep.projects.config.item.easing, function(){
a.removeClass('curr').addClass('prev')
n.removeClass('next').addClass('curr')
})
}
},
},
}
}
$(document).on('ready', xx.init) // Document loaded, DOM ready
Declare winHeight
and winWidth
in the object scope and access it using this.winWidth
and this.winHeight
.
var xx = {
projects: {
resize: function () {
//we are saving winWidth, winHeight in the projects object scope so that it can be accessed from other functions in the same scope
this.winWidth = $(window).width();
this.winHeight = $(window).height();
var containerWidth, containerHeight;
if (this.winWidth > 1450) {
if (this.winHeight > 1050) {
containerWidth = 1200;
containerHeight = 900;
} else {
containerWidth = this.winWidth - 250;
var helperHeight = Math.floor(containerWidth * 3 / 4);
if (helperHeight > (this.winHeight - 150)) {
containerHeight = this.winHeight - 150;
containerWidth = Math.floor(containerHeight * 4 / 3);
} else {
containerHeight = helperHeight;
}
}
} else if (winWidth < 600) {
containerWidth = 300;
containerHeight = 225;
} else {
containerWidth = this.winWidth - 250;
var helperHeight = Math.floor(containerWidth * 3 / 4);
if (helperHeight > (this.winHeight - 150)) {
containerHeight = this.winHeight - 150;
containerWidth = Math.floor(containerHeight * 4 / 3);
} else {
containerHeight = helperHeight;
}
}
},
item: {
next: function () {
var s = $('#projects section.curr')
a = s.find('.item.curr'),
n = a.next('.item'),
l = a.position()
console.log(this.winHeight);
if (n.length > 0) {
a.animate({
left: '-100%'
}, ep.projects.config.item.speed, ep.projects.config.item.easing)
n.animate({
left: l.left
}, ep.projects.config.item.speed, ep.projects.config.item.easing, function () {
a.removeClass('curr').addClass('prev')
n.removeClass('next').addClass('curr')
})
}
},
},
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.