Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Repositioning Tooltip for responsive sites on window resize #533

Closed
wants to merge 6 commits into from
Closed

Repositioning Tooltip for responsive sites on window resize #533

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6a55987
Repositioning Tooltip for responsive sites on window resize
Feb 16, 2016
54f6a48
Valid Node version update
Feb 16, 2016
508f9ef
OnResize - Do it outside the if statement
Feb 16, 2016
4eaa797
Check for undefined reference
Feb 16, 2016
c8717b5
Reverting back version as requested by @afshinm
Feb 23, 2016
c31ffab
Default position and Resize reference
Feb 23, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
39 changes: 29 additions & 10 deletions intro.js
View file
Open in desktop
Expand Up @@ -239,23 +239,24 @@
}
};

self._onResize = function(e) {
_setHelperLayerPosition.call(self, document.querySelector('.introjs-helperLayer'));
_setHelperLayerPosition.call(self, document.querySelector('.introjs-tooltipReferenceLayer'));
};
//Added this on inside _showElement and call on resize + _placeTooltip for repositioning on responsive sites
//self._onResize = function(e) {
// _setHelperLayerPosition.call(self, document.querySelector('.introjs-helperLayer'));
// _setHelperLayerPosition.call(self, document.querySelector('.introjs-tooltipReferenceLayer'));
//};

if (window.addEventListener) {
if (this._options.keyboardNavigation) {
window.addEventListener('keydown', self._onKeyDown, true);
}
//for window resize
window.addEventListener('resize', self._onResize, true);
//window.addEventListener('resize', self._onResize, true);
} else if (document.attachEvent) { //IE
if (this._options.keyboardNavigation) {
document.attachEvent('onkeydown', self._onKeyDown);
}
//for window resize
document.attachEvent('onresize', self._onResize);
//document.attachEvent('onresize', self._onResize);
}
}
return false;
Expand Down Expand Up @@ -468,7 +469,7 @@

tooltipLayer.className = ('introjs-tooltip ' + tooltipCssClass).replace(/^\s+|\s+$/g, '');

currentTooltipPosition = this._introItems[this._currentStep].position;
currentTooltipPosition = this._introItems[this._currentStep].position || 'auto';
if ((currentTooltipPosition == "auto" || this._options.tooltipPosition == "auto")) {
if (currentTooltipPosition != "floating") { // Floating is always valid, no point in calculating
currentTooltipPosition = _determineAutoPosition.call(this, targetElement, tooltipLayer, currentTooltipPosition);
Expand Down Expand Up @@ -831,7 +832,13 @@
nextTooltipButton.focus();
}
}, 350);

//set proper position also on window resize for responsive sites
self._onResize = function () {
_setHelperLayerPosition.call(self, document.querySelector('.introjs-helperLayer'));
_setHelperLayerPosition.call(self, document.querySelector('.introjs-tooltipReferenceLayer'));
//this will reposition right left top bottom
_placeTooltip.call(self, targetElement.element, oldtooltipContainer, oldArrowLayer, oldHelperNumberLayer);
}
} else {
var helperLayer = document.createElement('div'),
referenceLayer = document.createElement('div'),
Expand Down Expand Up @@ -969,9 +976,21 @@
}

tooltipLayer.appendChild(buttonsLayer);

//set proper position
_placeTooltip.call(self, targetElement.element, tooltipLayer, arrowLayer, helperNumberLayer);

//set proper position also on window resize for responsive sites
self._onResize = function () {
_setHelperLayerPosition.call(self, document.querySelector('.introjs-helperLayer'));
_setHelperLayerPosition.call(self, document.querySelector('.introjs-tooltipReferenceLayer'));
//this will reposition right left top bottom
_placeTooltip.call(self, targetElement.element, tooltipLayer, arrowLayer, helperNumberLayer);
}
}

if (window.addEventListener) {
window.addEventListener('resize', self._onResize, true);
} else if (document.attachEvent) {
document.attachEvent('onresize', self._onResize);
}

//disable interaction
Expand Down