Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Fix #855 Modal overlay forces a horizontal scrollbar in IE 9 #915

Open
wants to merge 7 commits into from

2 participants

Vladislav Zarakovsky alibby251
Vladislav Zarakovsky

The issue described here #855

The removed window.innerWidth returns window width, but it also includes vertical scrollbar width (if present). And it is for ie9+ only, but the comment incorrectly says it's for ie7+.

I've checked document.documentElement.clientWidth and it gives correct results in ie7, ie8, ie9.
The jQuery's $(window).width() also returns correct width, and can also be used, but I wanted the fix to be minimal.

vlazar added some commits
Vladislav Zarakovsky vlazar Fix #855 Modal overlay forces a horizontal scrollbar in IE 9 f03c98b
Vladislav Zarakovsky vlazar Fix invalid signature for outerWidth/outerHeight calls. b524d5c
Vladislav Zarakovsky vlazar Fix invalid signature for outerHeight call in dateinput. 8ed08f7
Vladislav Zarakovsky vlazar Introduce frameSize option - number of visible items. Fixes #561 Scro…
…llable circular loop shows blank areas, should be seamless
c2674dd
Vladislav Zarakovsky vlazar Rewrite overlay centering. For "fixed" overlay positioning it uses 50…
…% for left and top and margins in pixels (so now it stays centered on window resize). For "absolute" positioning it uses the old positioning in pixels.
7904221
Vladislav Zarakovsky vlazar Fix scroll to conf.initialIndex for hidden scrollables. It's better f…
…ix for #87 - fixes initial position not only for circular scrollable with initialIndex = 0, but for non circular scrollable and any initialIndex too.
ac2d631
alibby251
Collaborator

Hi vlazar,

Thanks for this - any chance you could please separate out these commits into separate instances? It will help - if one has an issue, then we would otherwise have to pull the whole lot. It would also help if you could please provide a JSfiddle showing the test case, and how your fixes help if possible?

Vladislav Zarakovsky

Hi alibby251,

Sure, will do this as soon as I have time. Any interest in other commits, not related to #855 BTW?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Dec 12, 2012
  1. Vladislav Zarakovsky
Commits on Dec 14, 2012
  1. Vladislav Zarakovsky
  2. Vladislav Zarakovsky
Commits on Dec 18, 2012
  1. Vladislav Zarakovsky

    Introduce frameSize option - number of visible items. Fixes #561 Scro…

    vlazar authored
    …llable circular loop shows blank areas, should be seamless
Commits on Jan 11, 2013
  1. Vladislav Zarakovsky

    Rewrite overlay centering. For "fixed" overlay positioning it uses 50…

    vlazar authored
    …% for left and top and margins in pixels (so now it stays centered on window resize). For "absolute" positioning it uses the old positioning in pixels.
Commits on Jan 18, 2013
  1. Vladislav Zarakovsky

    Fix scroll to conf.initialIndex for hidden scrollables. It's better f…

    vlazar authored
    …ix for #87 - fixes initial position not only for circular scrollable with initialIndex = 0, but for non circular scrollable and any initialIndex too.
Commits on Nov 19, 2013
  1. Vladislav Zarakovsky
This page is out of date. Refresh to see the latest.
2  build.xml
View
@@ -1,7 +1,7 @@
<project name="jQuery.Tools" default="min">
<taskdef resource="net/sf/antcontrib/antlib.xml"/>
- <property name="version" value="1.2.5"/>
+ <property name="version" value="1.2.7"/>
<property name="build" value="build/${version}"/>
<property name="file" value="none"/>
2  src/dateinput/dateinput.js
View
@@ -476,7 +476,7 @@
}
root.css({
- top: pos.top + input.outerHeight({margins: true}) + conf.offset[0],
+ top: pos.top + input.outerHeight(true) + conf.offset[0],
left: pos.left + conf.offset[1]
});
2  src/overlay/overlay.apple.js
View
@@ -43,7 +43,7 @@
conf = this.getConf(),
trigger = this.getTrigger(),
self = this,
- oWidth = overlay.outerWidth({margin:true}),
+ oWidth = overlay.outerWidth(true),
img = overlay.data("img"),
position = conf.fixed ? 'fixed' : 'absolute';
32 src/overlay/overlay.js
View
@@ -137,15 +137,29 @@
// position & dimensions
var top = conf.top,
left = conf.left,
- oWidth = overlay.outerWidth({margin:true}),
- oHeight = overlay.outerHeight({margin:true});
-
- if (typeof top == 'string') {
- top = top == 'center' ? Math.max((w.height() - oHeight) / 2, 0) :
- parseInt(top, 10) / 100 * w.height();
- }
-
- if (left == 'center') { left = Math.max((w.width() - oWidth) / 2, 0); }
+ oHalfWidth = overlay.outerWidth(true) / 2,
+ oHalfHeight = overlay.outerHeight(true) / 2;
+
+ if (typeof top == 'string') {
+ if (top == 'center') {
+ if (!conf.fixed) {
+ top = Math.max(w.height() / 2 - oHalfHeight, 0);
+ } else {
+ top = '50%';
+ overlay.css('margin-top', - oHalfHeight);
+ }
+ } else {
+ top = parseInt(top, 10) / 100 * w.height();
+ }
+ }
+ if (left == 'center') {
+ if (!conf.fixed) {
+ left = Math.max(w.width() / 2 - oHalfWidth, 0);
+ } else {
+ left = '50%';
+ overlay.css('margin-left', - oHalfWidth);
+ }
+ }
// load effect
51 src/scrollable/scrollable.js
View
@@ -30,6 +30,7 @@
next: '.next',
prev: '.prev',
size: 1,
+ frameSize: 1,
speed: 400,
vertical: false,
touch: true,
@@ -203,7 +204,7 @@
if (conf.circular) {
var cloned1 = self.getItems().slice(-1).clone().prependTo(itemWrap),
- cloned2 = self.getItems().eq(1).clone().appendTo(itemWrap);
+ cloned2 = self.getItems().slice(1, conf.frameSize + 1).clone().appendTo(itemWrap);
cloned1.add(cloned2).addClass(conf.clonedClass);
@@ -229,30 +230,6 @@
});
- // seek over the cloned item
-
- // if the scrollable is hidden the calculations for seekTo position
- // will be incorrect (eg, if the scrollable is inside an overlay).
- // ensure the elements are shown, calculate the correct position,
- // then re-hide the elements. This must be done synchronously to
- // prevent the hidden elements being shown to the user.
-
- // See: https://github.com/jquerytools/jquerytools/issues#issue/87
-
- var hidden_parents = root.parents().add(root).filter(function () {
- if ($(this).css('display') === 'none') {
- return true;
- }
- });
- if (hidden_parents.length) {
- hidden_parents.show();
- self.seekTo(0, 0, function() {});
- hidden_parents.hide();
- }
- else {
- self.seekTo(0, 0, function() {});
- }
-
}
// next/prev buttons
@@ -340,10 +317,30 @@
}
// initial index
- if (conf.initialIndex) {
+
+ // if the scrollable is hidden the calculations for seekTo position
+ // will be incorrect (eg, if the scrollable is inside an overlay).
+ // ensure the elements are shown, calculate the correct position,
+ // then re-hide the elements. This must be done synchronously to
+ // prevent the hidden elements being shown to the user.
+
+ // See: https://github.com/jquerytools/jquerytools/issues#issue/87
+
+ var hidden_parents = root.parents().add(root).filter(function () {
+ if ($(this).css('display') === 'none') {
+ return true;
+ }
+ });
+ if (hidden_parents.length) {
+ hidden_parents.show();
self.seekTo(conf.initialIndex, 0, function() {});
+ hidden_parents.hide();
}
- }
+ else {
+ self.seekTo(conf.initialIndex, 0, function() {});
+ }
+
+ }
// jQuery plugin implementation
3  src/toolbox/toolbox.expose.js
View
@@ -47,8 +47,7 @@
var d = $(document).height(), w = $(window).height();
return [
- window.innerWidth || // ie7+
- document.documentElement.clientWidth || // ie6
+ document.documentElement.clientWidth || // ie6+
document.body.clientWidth, // ie6 quirks mode
d - w < 20 ? w : d
];
2  test/overlay/test.js
View
@@ -13,5 +13,5 @@
*
* File generated: Sat Oct 03 12:34:10 GMT+02:00 2009
*/
-(function(c){c.tools=c.tools||{};c.tools.overlay={version:"1.1.1",addEffect:function(e,f,g){b[e]=[f,g]},conf:{top:"10%",left:"center",absolute:false,speed:"normal",closeSpeed:"fast",effect:"default",close:null,oneInstance:true,closeOnClick:true,closeOnEsc:true,api:false,expose:null,target:null}};var b={};c.tools.overlay.addEffect("default",function(e){this.getOverlay().fadeIn(this.getConf().speed,e)},function(e){this.getOverlay().fadeOut(this.getConf().closeSpeed,e)});var d=[];function a(h,m){var p=this,n=c(this),o=c(window),k,j,i,f=m.expose&&c.tools.expose.version;var g=m.target||h.attr("rel");j=g?c(g):null||h;if(h&&h.index(j)==-1){h.click(function(q){p.load();return q.preventDefault()})}c.each(m,function(e,q){if(c.isFunction(q)){n.bind(e,q)}});c.extend(p,{load:function(){if(p.isOpened()){return p}if(m.oneInstance){c.each(d,function(){this.close()})}var u=c.Event("onBeforeLoad");n.trigger(u);if(u.isDefaultPrevented()){return p}i=true;if(f){j.expose().load()}var t=m.top;var s=m.left;var q=j.outerWidth({margin:true});var r=j.outerHeight({margin:true});if(typeof t=="string"){t=t=="center"?Math.max((o.height()-r)/2,0):parseInt(t,10)/100*o.height()}if(s=="center"){s=Math.max((o.width()-q)/2,0)}if(!m.absolute){t+=o.scrollTop();s+=o.scrollLeft()}j.css({top:t,left:s,position:"absolute"});b[m.effect][0].call(p,function(){if(i){n.trigger("onLoad")}});if(m.closeOnClick){c(document).bind("click.overlay",function(e){if(!p.isOpened()){return}var v=c(e.target);if(v.parents(j).length>1){return}c.each(d,function(){this.close()})})}if(m.closeOnEsc){c(document).unbind("keydown.overlay").bind("keydown.overlay",function(e){if(e.keyCode==27){c.each(d,function(){this.close()})}})}return p},close:function(){if(!p.isOpened()){return p}var r=c.Event("onBeforeClose");n.trigger(r);if(r.isDefaultPrevented()){return}i=false;b[m.effect][1].call(p,function(){n.trigger("onClose")});var q=true;c.each(d,function(){if(this.isOpened()){q=false}});if(q){c(document).unbind("click.overlay").unbind("keydown.overlay")}return p},getContent:function(){return j},getOverlay:function(){return j},getTrigger:function(){return h},getClosers:function(){return k},isOpened:function(){return i},getConf:function(){return m},bind:function(e,q){n.bind(e,q);return p},onBeforeLoad:function(e){return this.bind("onBeforeLoad",e)},onLoad:function(e){return this.bind("onLoad",e)},onBeforeClose:function(e){return this.bind("onBeforeClose",e)},onClose:function(e){return this.bind("onClose",e)},unbind:function(e){n.unbind(e);return p}});if(f){if(typeof m.expose=="string"){m.expose={color:m.expose}}c.extend(m.expose,{api:true,closeOnClick:m.closeOnClick,closeOnEsc:false});var l=j.expose(m.expose);l.onBeforeClose(function(){p.close()});p.onClose(function(){l.close()})}k=j.find(m.close||".close");if(!k.length&&!m.close){k=c('<div class="close"></div>');j.prepend(k)}k.click(function(){p.close()})}c.fn.overlay=function(e){var f=this.eq(typeof e=="number"?e:0).data("overlay");if(f){return f}if(c.isFunction(e)){e={onBeforeLoad:e}}var g=c.extend({},c.tools.overlay.conf);e=c.extend(true,g,e);this.each(function(){f=new a(c(this),e);d.push(f);c(this).data("overlay",f)});return e.api?f:this}})(jQuery);
+(function(c){c.tools=c.tools||{};c.tools.overlay={version:"1.1.1",addEffect:function(e,f,g){b[e]=[f,g]},conf:{top:"10%",left:"center",absolute:false,speed:"normal",closeSpeed:"fast",effect:"default",close:null,oneInstance:true,closeOnClick:true,closeOnEsc:true,api:false,expose:null,target:null}};var b={};c.tools.overlay.addEffect("default",function(e){this.getOverlay().fadeIn(this.getConf().speed,e)},function(e){this.getOverlay().fadeOut(this.getConf().closeSpeed,e)});var d=[];function a(h,m){var p=this,n=c(this),o=c(window),k,j,i,f=m.expose&&c.tools.expose.version;var g=m.target||h.attr("rel");j=g?c(g):null||h;if(h&&h.index(j)==-1){h.click(function(q){p.load();return q.preventDefault()})}c.each(m,function(e,q){if(c.isFunction(q)){n.bind(e,q)}});c.extend(p,{load:function(){if(p.isOpened()){return p}if(m.oneInstance){c.each(d,function(){this.close()})}var u=c.Event("onBeforeLoad");n.trigger(u);if(u.isDefaultPrevented()){return p}i=true;if(f){j.expose().load()}var t=m.top;var s=m.left;var q=j.outerWidth(true);var r=j.outerHeight(true);if(typeof t=="string"){t=t=="center"?Math.max((o.height()-r)/2,0):parseInt(t,10)/100*o.height()}if(s=="center"){s=Math.max((o.width()-q)/2,0)}if(!m.absolute){t+=o.scrollTop();s+=o.scrollLeft()}j.css({top:t,left:s,position:"absolute"});b[m.effect][0].call(p,function(){if(i){n.trigger("onLoad")}});if(m.closeOnClick){c(document).bind("click.overlay",function(e){if(!p.isOpened()){return}var v=c(e.target);if(v.parents(j).length>1){return}c.each(d,function(){this.close()})})}if(m.closeOnEsc){c(document).unbind("keydown.overlay").bind("keydown.overlay",function(e){if(e.keyCode==27){c.each(d,function(){this.close()})}})}return p},close:function(){if(!p.isOpened()){return p}var r=c.Event("onBeforeClose");n.trigger(r);if(r.isDefaultPrevented()){return}i=false;b[m.effect][1].call(p,function(){n.trigger("onClose")});var q=true;c.each(d,function(){if(this.isOpened()){q=false}});if(q){c(document).unbind("click.overlay").unbind("keydown.overlay")}return p},getContent:function(){return j},getOverlay:function(){return j},getTrigger:function(){return h},getClosers:function(){return k},isOpened:function(){return i},getConf:function(){return m},bind:function(e,q){n.bind(e,q);return p},onBeforeLoad:function(e){return this.bind("onBeforeLoad",e)},onLoad:function(e){return this.bind("onLoad",e)},onBeforeClose:function(e){return this.bind("onBeforeClose",e)},onClose:function(e){return this.bind("onClose",e)},unbind:function(e){n.unbind(e);return p}});if(f){if(typeof m.expose=="string"){m.expose={color:m.expose}}c.extend(m.expose,{api:true,closeOnClick:m.closeOnClick,closeOnEsc:false});var l=j.expose(m.expose);l.onBeforeClose(function(){p.close()});p.onClose(function(){l.close()})}k=j.find(m.close||".close");if(!k.length&&!m.close){k=c('<div class="close"></div>');j.prepend(k)}k.click(function(){p.close()})}c.fn.overlay=function(e){var f=this.eq(typeof e=="number"?e:0).data("overlay");if(f){return f}if(c.isFunction(e)){e={onBeforeLoad:e}}var g=c.extend({},c.tools.overlay.conf);e=c.extend(true,g,e);this.each(function(){f=new a(c(this),e);d.push(f);c(this).data("overlay",f)});return e.api?f:this}})(jQuery);
(function(b){b.tools=b.tools||{};b.tools.expose={version:"1.0.5",conf:{maskId:null,loadSpeed:"slow",closeSpeed:"fast",closeOnClick:true,closeOnEsc:true,zIndex:9998,opacity:0.8,color:"#456",api:false}};function a(){if(b.browser.msie){var f=b(document).height(),e=b(window).height();return[window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,f-e<20?e:f]}return[b(window).width(),b(document).height()]}function c(h,g){var e=this,j=b(this),d=null,f=false,i=0;b.each(g,function(k,l){if(b.isFunction(l)){j.bind(k,l)}});b(window).resize(function(){e.fit()});b.extend(this,{getMask:function(){return d},getExposed:function(){return h},getConf:function(){return g},isLoaded:function(){return f},load:function(){if(f){return e}i=h.eq(0).css("zIndex");if(g.maskId){d=b("#"+g.maskId)}if(!d||!d.length){var l=a();d=b("<div/>").css({position:"absolute",top:0,left:0,width:l[0],height:l[1],display:"none",opacity:0,zIndex:g.zIndex});if(g.maskId){d.attr("id",g.maskId)}b("body").append(d);var k=d.css("backgroundColor");if(!k||k=="transparent"||k=="rgba(0, 0, 0, 0)"){d.css("backgroundColor",g.color)}if(g.closeOnEsc){b(document).bind("keydown.unexpose",function(o){if(o.keyCode==27){e.close()}})}if(g.closeOnClick){d.bind("click.unexpose",function(){e.close()})}}var n=b.Event("onBeforeLoad");j.trigger(n);if(n.isDefaultPrevented()){return e}b.each(h,function(){var o=b(this);if(!/relative|absolute|fixed/i.test(o.css("position"))){o.css("position","relative")}});h.css({zIndex:Math.max(g.zIndex+1,i=="auto"?0:i)});var m=d.height();if(!this.isLoaded()){d.css({opacity:0,display:"block"}).fadeTo(g.loadSpeed,g.opacity,function(){if(d.height()!=m){d.css("height",m)}j.trigger("onLoad")})}f=true;return e},close:function(){if(!f){return e}var k=b.Event("onBeforeClose");j.trigger(k);if(k.isDefaultPrevented()){return e}d.fadeOut(g.closeSpeed,function(){j.trigger("onClose");h.css({zIndex:b.browser.msie?i:null})});f=false;return e},fit:function(){if(d){var k=a();d.css({width:k[0],height:k[1]})}},bind:function(k,l){j.bind(k,l);return e},onBeforeLoad:function(k){return this.bind("onBeforeLoad",k)},onLoad:function(k){return this.bind("onLoad",k)},onBeforeClose:function(k){return this.bind("onBeforeClose",k)},onClose:function(k){return this.bind("onClose",k)},unbind:function(k){j.unbind(k);return e}})}b.fn.expose=function(d){var e=this.eq(typeof d=="number"?d:0).data("expose");if(e){return e}if(typeof d=="string"){d={color:d}}var f=b.extend({},b.tools.expose.conf);d=b.extend(f,d);this.each(function(){e=new c(b(this),d);b(this).data("expose",e)});return d.api?e:this}})(jQuery);
Something went wrong with that request. Please try again.