Skip to content
This repository

Add resize event and test. #170

Open
wants to merge 1 commit into from

3 participants

Di Marcello Scott Robbin Dustin
Di Marcello

Subject self explanatory :)

Scott Robbin
Owner

Hello,

Thanks so much for your pull request. Especially for including a test. I really need to starting making more of those!

Question: what is the advantage of having Backstretch fire a resize event, as opposed to listening to the same resize event that Backstretch listens to. e.g. $.backstretch() listens for $(window).resize() events, and $("#foo").backstretch() listens for resize events on #foo.

–Scott

Di Marcello

Somehow my email reply did not show up here. So C/P.

Hi, your welcome!

$('#foo').on('resize') did not do the trick for me. And if it does work, there is a slight uncertainty it does not run after the Backstretch#resize.
Also, Backstretch#show calls resize, which is not triggered by a window/#foo resize event.

The reason is I needed to slightly adjust the css generated by backstretch in my application, so it aligns to the bottom (all backgrounds have the important stuff in the bottom).
Code:

var container = $('#content');
var resize = function (evt) {
  container.find('> .backstretch > img').css({bottom: 0, top: 'auto'})
}
container.backstretch(image_url {fade: 1}).on('backstretch.resize', resize);

Marcel.

Di Marcello
Dustin

My $('#foo').backstretch is resized via CSS transforms.
This doesn't seem to be getting the event mentioned above.

What would be a good workaround?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Showing 1 unique commit by 1 author.

Nov 30, 2012
Di Marcello Add resize event and test. 287d93e
This page is out of date. Refresh to see the latest.
4  src/jquery.backstretch.js
@@ -173,6 +173,9 @@
173 173
             , bgWidth = rootWidth
174 174
             , rootHeight = this.isBody ? ( window.innerHeight ? window.innerHeight : this.$root.height() ) : this.$root.innerHeight()
175 175
             , bgHeight = bgWidth / this.$img.data('ratio')
  176
+            , evt = $.Event('backstretch.resize', {
  177
+              relatedTarget: this.$container[0]
  178
+            })
176 179
             , bgOffset;
177 180
 
178 181
             // Make adjustments based on image ratio
@@ -192,6 +195,7 @@
192 195
 
193 196
             this.$wrap.css({width: rootWidth, height: rootHeight})
194 197
                       .find('img:not(.deleteable)').css({width: bgWidth, height: bgHeight}).css(bgCSS);
  198
+            this.$container.trigger(evt, this);
195 199
         } catch(err) {
196 200
             // IE7 seems to trigger resize before the image is loaded.
197 201
             // This try/catch block is a hack to let it fail gracefully.
17  test/backstretch_test.js
@@ -62,4 +62,21 @@
62 62
     strictEqual(instance.options.duration, duration, 'passed options are being set');
63 63
   });
64 64
 
  65
+  test('resize event', function() {
  66
+    // Make sure previous instances are destroyed
  67
+    global.destroy();
  68
+
  69
+    var duration = 999999
  70
+      , instance = $('body').backstretch(global.img1, {duration: duration})
  71
+      , onResize = function() {
  72
+        resized = true;
  73
+      }
  74
+      , resized = false;
  75
+
  76
+    instance.on('backstretch.resize', onResize);
  77
+    $(window).trigger('resize');
  78
+
  79
+    strictEqual(resized, true, 'passed resize event being called');
  80
+  })
  81
+
65 82
 }(jQuery));
Commit_comment_tip

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.