jQuery script run on (document).ready AND $(window).resize
Question
I'm javascript/jQuery clueless!
I have a script that is invoked with jQuery(document).ready which works great, I also want the script to update itself when the window is resized. The script is called like this:
jQuery(document).ready(function($) {
$('#accordion').AccordionImageMenu({
'openPc': <?PHP echo $params['openPc']; ?>,
'width':<?PHP echo $params['width']; ?>,
'height':<?PHP echo $params['height']; ?>,
'effect': '<?PHP echo $params['effect']; ?>',
'duration': <?PHP echo $params['duration']; ?>,
'openItem': <?PHP echo ($params['keepMenuItemOpen'] ==1)? $openItem : "null"; ?>,
'border' : <?PHP echo $params['border']; ?>,
'color' : '<?PHP echo $params['color']; ?>',
'position' : '<?PHP echo $params['position']; ?>',
'fadeInTitle': <?PHP echo $params['fadeInTitle']; ?>
});
});
I've tried
$(window).resize(function() {
accordionMenuSetting();
});
and
$(function()
{$(window).resize(AccordionImageMenu).triggerHandler('resize'); });
and
jQuery(window).on('resize', function($){
$('#accordion').AccordionImageMenu({
'openPc': <?PHP echo $params['openPc']; ?>,
'width':<?PHP echo $params['width']; ?>,
'height':<?PHP echo $params['height']; ?>,
'effect': '<?PHP echo $params['effect']; ?>',
'duration': <?PHP echo $params['duration']; ?>,
'openItem': <?PHP echo ($params['keepMenuItemOpen'] ==1)? $openItem : "null"; ?>,
'border' : <?PHP echo $params['border']; ?>,
'color' : '<?PHP echo $params['color']; ?>',
'position' : '<?PHP echo $params['position']; ?>',
'fadeInTitle': <?PHP echo $params['fadeInTitle']; ?>
});
});
but all come up with javascript errors. Any ideas guys? Thanks in advance! :-)
here is the full script
(function( $ ){
function accordionMenuSetting(obj,settings) {
this.menuSettings = settings;
this.menuAnimate = animate;
var _this = this;
function animate(obj,i){
$.each(obj, function(j) {
var menuWidth = $('#accordion').width();
//claculate initial openDim based on percentage of menuWidth
var openDim = Math.round(menuWidth * (_this.menuSettings.openPc/100));
//calculate closedDim using initial openDim
var closedDim = Math.floor( ( menuWidth-openDim - (_this.menuSettings.border*(obj.length-1)))/(obj.length-1) );
//recalculate openDim based on closedDim. this ensures that we use the full width and are pixel perfect (-1 just to make sure)
var openDim = menuWidth-(_this.menuSettings.border*(obj.length-1))- (closedDim*(obj.length-1))-1;
var neutralDim = Math.floor( (menuWidth- (_this.menuSettings.border*(obj.length-1)))/obj.length);
var remainder = menuWidth-(_this.menuSettings.border*(obj.length-1))- (neutralDim*obj.length);
var itemDim = closedDim;
if ( j == i ) {
itemDim = openDim;
}
if (typeof i == 'undefined') {
if (_this.menuSettings.openItem == null) { //keep active not set
if (j == (obj.length - 1)){ //if item is the last add the remainder to fill the space
itemDim = neutralDim + remainder;
}else{ //otherwise just use the neutral dimension
itemDim = neutralDim;
}
}
else if (_this.menuSettings.openItem == j) itemDim = openDim;
else itemDim = closedDim;
}
if (_this.menuSettings.position == 'vertical')
$(this).animate({'height':itemDim},_this.menuSettings.duration,_this.menuSettings.effect);
else
$(this).animate({'width':itemDim},_this.menuSettings.duration,_this.menuSettings.effect);
var title = $('span',this);
title.stop(true,false);
if (_this.menuSettings.fadeInTitle >0 && title.length > 0) {
if (itemDim == openDim) {
if (_this.menuSettings.fadeInTitle ==2) title.animate({'opacity':0.7});
else title.animate({'opacity':0});
} else {
if (_this.menuSettings.fadeInTitle ==2) title.animate({'opacity':0});
else title.animate({'opacity':0.7});
}
} else {
title.css("display", "none");
}
});
}
var $this = $('a',obj);
var defaultViewPort = 940;
var menuWidth = $('#accordion').width();
var menuScale = menuWidth / defaultViewPort;
var openDim = Math.round(menuWidth * (_this.menuSettings.openPc/100));
//calculate closedDim using initial openDim
var closedDim = Math.floor( ( menuWidth-openDim - (_this.menuSettings.border*(obj.length-1)))/(obj.length-1) );
//recalculate openDim based on closedDim. this ensures that we use the full width and are pixel perfect (-1 just to make sure)
var openDim = menuWidth-(_this.menuSettings.border*(obj.length-1))- (closedDim*(obj.length-1))-1;
_this.menuAnimate($this);
var maxDim = closedDim*$this.length + _this.menuSettings.border*$this.length + 10;
if (_this.menuSettings.position == 'vertical')
$(obj).css({'width':_this.menuSettings.width+'px','height':maxDim+'px'});
else
$(obj).css({'height':_this.menuSettings.height * menuScale+'px','width':menuWidth+'px'});
$.each($this, function(i) {
ImgSrc = $('img',this).attr('src');
$('img',this).hide();
var borderBottomValue = 0;
var borderRightValue = 'solid '+_this.menuSettings.border+'px '+_this.menuSettings.color;
var aWidth = 'auto';
var aHeight = _this.menuSettings.height * menuScale+'px';
if (_this.menuSettings.position == 'vertical') {
borderBottomValue = 'solid '+_this.menuSettings.border+'px '+_this.menuSettings.color;
borderRightValue = 0;
aWidth = _this.menuSettings.width+'px';
aHeight = 'auto';
}
if ( i == ($this.length-1)) {
borderBottomValue = 0;
borderRightValue = 0;
}
$(this).css({
'width': aWidth,
'height': aHeight,
'background-image':'url('+ImgSrc+')',
'background-size':'cover',
'background-color':_this.menuSettings.color,
'background-repeat':'no-repeat',
'border-bottom': borderBottomValue,
'border-right': borderRightValue
}).mouseenter(function() {
$this.stop(true,false);
_this.menuAnimate($this,i);
});
});
$(obj).mouseleave(function() {
_this.menuAnimate($this);
});
}
$.fn.AccordionImageMenu = function( options ) {
var settings = {
'openPc': 44,
'width':200,
'height':200,
'effect': 'swing',
'duration': 400,
'openItem': null,
'border': 2,
'color':'#000000',
'position':'horizontal',
'fadeInTitle': true
};
return this.each(function() {
$(this).addClass("aim");
$('br',this).remove();
if ( options ) $.extend( settings, options );
var menu = new accordionMenuSetting(this,settings);
});
};
})( jQuery );
1 answers
solution1
0 ACCPTED 2015-10-26 17:49:10
I figured it out. Instead of adding the $(window).resize(function() { to the calling page I added it into the included JS file. This way I was able to 'see' the trigger and act upon it. To act upon it I created a new function called resize which updated the parameters I needed. Down side: if you manually size the browser window with the mouse it resized the menu 1 pixel at a time which is not perfect and does occasionally fall over. If you simply go from one size to another then it works fine. here is the finished code. I'm sure there is a better way (hint hint) but I've exhausted my own knowledge.
(function( $ ){
function accordionMenuSetting(obj,settings) {
this.menuSettings = settings;
this.menuAnimate = animate;
this.menuResize = resize;
var _this = this;
function animate(obj,i){
$.each(obj, function(j) {
var menuWidth = $('#accordion-box').width();
//console.log ("width = "+$('#accordion-box').width());
//claculate initial openDim based on percentage of menuWidth
var openDim = Math.round(menuWidth * (_this.menuSettings.openPc/100));
//calculate closedDim using initial openDim
var closedDim = Math.floor( ( menuWidth-openDim - (_this.menuSettings.border*(obj.length-1)))/(obj.length-1) );
//recalculate openDim based on closedDim. this ensures that we use the full width and are pixel perfect (-1 just to make sure)
var openDim = menuWidth-(_this.menuSettings.border*(obj.length-1))- (closedDim*(obj.length-1))-1;
var neutralDim = Math.floor( (menuWidth- (_this.menuSettings.border*(obj.length-1)))/obj.length);
var remainder = menuWidth-(_this.menuSettings.border*(obj.length-1))- (neutralDim*obj.length);
var itemDim = closedDim;
if ( j == i ) {
itemDim = openDim;
}
if (typeof i == 'undefined') {
if (_this.menuSettings.openItem == null) { //keep active not set
if (j == (obj.length - 1)){ //if item is the last add the remainder to fill the space
itemDim = neutralDim + remainder;
}else{ //otherwise just use the neutral dimension
itemDim = neutralDim;
}
}
else if (_this.menuSettings.openItem == j) itemDim = openDim;
else itemDim = closedDim;
}
if (_this.menuSettings.position == 'vertical')
$(this).animate({'height':itemDim},_this.menuSettings.duration,_this.menuSettings.effect);
else
$(this).animate({'width':itemDim},_this.menuSettings.duration,_this.menuSettings.effect);
var title = $('span',this);
title.stop(true,false);
if (_this.menuSettings.fadeInTitle >0 && title.length > 0) {
if (itemDim == openDim) {
if (_this.menuSettings.fadeInTitle ==2) title.animate({'opacity':0.7});
else title.animate({'opacity':0});
} else {
if (_this.menuSettings.fadeInTitle ==2) title.animate({'opacity':0});
else title.animate({'opacity':0.7});
}
} else {
title.css("display", "none");
}
});
}
function resize(obj,i){
var defaultViewPort = 940;
var menuWidth = $('#accordion-box').width();
var menuScale = menuWidth / defaultViewPort;
console.log ("menuscale=" + menuScale);
var openDim = Math.round(menuWidth * (_this.menuSettings.openPc/100));
//calculate closedDim using initial openDim
var closedDim = Math.floor( ( menuWidth-openDim - (_this.menuSettings.border*(obj.length-1)))/(obj.length-1) );
//recalculate openDim based on closedDim. this ensures that we use the full width and are pixel perfect (-1 just to make sure)
var openDim = menuWidth-(_this.menuSettings.border*(obj.length-1))- (closedDim*(obj.length-1))-1;
_this.menuAnimate($this);
var maxDim = closedDim*$this.length + _this.menuSettings.border*$this.length + 10;
if (_this.menuSettings.position == 'vertical')
$(obj).css({'width':_this.menuSettings.width+'px','height':maxDim+'px'});
else
$(obj).css({'height':_this.menuSettings.height * menuScale+'px','width':menuWidth+'px'});
$.each($this, function(i) {
var aWidth = 'auto';
var aHeight = _this.menuSettings.height * menuScale+'px';
if (_this.menuSettings.position == 'vertical') {
aWidth = _this.menuSettings.width+'px';
aHeight = 'auto';
}
$(this).css({
'width': aWidth,
'height': aHeight
});
})
};
var $this = $('a',obj);
var defaultViewPort = 940;
var menuWidth = $('#accordion-box').width();
var menuScale = menuWidth / defaultViewPort;
console.log ("menuscale=" + menuScale);
var openDim = Math.round(menuWidth * (_this.menuSettings.openPc/100));
//calculate closedDim using initial openDim
var closedDim = Math.floor( ( menuWidth-openDim - (_this.menuSettings.border*(obj.length-1)))/(obj.length-1) );
//recalculate openDim based on closedDim. this ensures that we use the full width and are pixel perfect (-1 just to make sure)
var openDim = menuWidth-(_this.menuSettings.border*(obj.length-1))- (closedDim*(obj.length-1))-1;
_this.menuAnimate($this);
var maxDim = closedDim*$this.length + _this.menuSettings.border*$this.length + 10;
if (_this.menuSettings.position == 'vertical')
$(obj).css({'width':_this.menuSettings.width+'px','height':maxDim+'px'});
else
$(obj).css({'height':_this.menuSettings.height * menuScale+'px','width':menuWidth+'px'});
$.each($this, function(i) {
ImgSrc = $('img',this).attr('src');
$('img',this).hide();
var borderBottomValue = 0;
var borderRightValue = 'solid '+_this.menuSettings.border+'px '+_this.menuSettings.color;
var aWidth = 'auto';
var aHeight = _this.menuSettings.height * menuScale+'px';
if (_this.menuSettings.position == 'vertical') {
borderBottomValue = 'solid '+_this.menuSettings.border+'px '+_this.menuSettings.color;
borderRightValue = 0;
aWidth = _this.menuSettings.width+'px';
aHeight = 'auto';
}
if ( i == ($this.length-1)) {
borderBottomValue = 0;
borderRightValue = 0;
}
$(this).css({
'width': aWidth,
'height': aHeight,
'background-image':'url('+ImgSrc+')',
'background-size':'cover',
'background-color':_this.menuSettings.color,
'background-repeat':'no-repeat',
'border-bottom': borderBottomValue,
'border-right': borderRightValue
}).mouseenter(function() {
$this.stop(true,false);
_this.menuAnimate($this,i);
});
});
$(window).resize(function() {
_this.menuResize(obj);
});
$(obj).mouseleave(function() {
_this.menuAnimate($this);
});
}
$.fn.AccordionImageMenu = function( options ) {
var settings = {
'openPc': 44,
'width':200,
'height':200,
'effect': 'swing',
'duration': 400,
'openItem': null,
'border': 2,
'color':'#000000',
'position':'horizontal',
'fadeInTitle': true
};
return this.each(function() {
$(this).addClass("aim");
$('br',this).remove();
if ( options ) $.extend( settings, options );
var menu = new accordionMenuSetting(this,settings);
});
};
})( jQuery );
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.
Related Question
Window resize and document ready
Run jQuery script on window resize
jQuery function executes on $(window).resize() or $(document).ready() not both
jQuery resize and on document ready combination
run functions when : window.scroll & window.resize & document.ready
$(window).resize() and $(document).ready() calculate different values
maximize window on document ready with jquery
angular run jquery $(document).ready
How to run the script both 'on load' and 'on resize' (on a particular window width!) in jQuery?
jQuery document ready conflicting with window onload?
Related Tags