Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Fixed bug dealing with div height.

Changes:
 * Fixed formatting of @AlmogBaku's code from his pull request (4-space
   tabs)
 * There was a bug where, when the window was resized, the div and its
   background image (the original floated image) would have their height
   set incorrectly. This is fixed.
 * Added version number to the top of the file.
 * Adjusted copyright year to 2012
 * Fixed spelling of "potatoes" :-)
 * Added radix parameter to the padding `parseInt` calls.
  • Loading branch information...
commit 12b9c961a73f2804a69a32e3f7797228aedb8de7 1 parent dc8974c
Jason Wyatt Feinstein authored
Showing with 50 additions and 34 deletions.
  1. +34 −31 jquery.slickwrap.js
  2. +16 −3 test/{test.html → index.html}
View
65 jquery.slickwrap.js
@@ -1,7 +1,8 @@
/**
+ * jQSlickWrap v0.2
* The MIT License
*
- * Copyright (c) 2009 Jason Wyatt Feinstein
+ * Copyright (c) 2012 Jason Wyatt Feinstein
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
@@ -46,7 +47,7 @@
}
/**
- * Meat and potatos of this plugin, it is called on each image.
+ * Meat and potatoes of this plugin, it is called on each image.
@jasonwyatt Owner

;)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
*
* @scope
* The node for the image to slickwrap.
@@ -72,10 +73,10 @@
bottom: $image.css('padding-bottom'),
left: $image.css('padding-left')
};
- padding.top = parseInt(padding.top.replace(/[^\d]*/g, ""));
- padding.right = parseInt(padding.right.replace(/[^\d]*/g, ""));
- padding.bottom = parseInt(padding.bottom.replace(/[^\d]*/g, ""));
- padding.left = parseInt(padding.left.replace(/[^\d]*/g, ""));
+ padding.top = parseInt(padding.top.replace(/[^\d]*/g, ""), 10);
+ padding.right = parseInt(padding.right.replace(/[^\d]*/g, ""), 10);
+ padding.bottom = parseInt(padding.bottom.replace(/[^\d]*/g, ""), 10);
+ padding.left = parseInt(padding.left.replace(/[^\d]*/g, ""), 10);
/*
* Create a canvas and draw the image onto the canvas.
@@ -114,31 +115,32 @@
* Set the parent's background-image to this image.
*/
if(settings.sourceImage) { //using source image instead of canvas
- $parent.css({
- "background-image": "url("+$image.attr("src")+")",
- "background-position": padding.left+"px "+padding.top+"px",
- "background-repeat": "no-repeat"
- });
+ $parent.css({
+ "background-image": "url("+$image.attr("src")+")",
+ "background-position": padding.left+"px "+padding.top+"px",
+ "background-repeat": "no-repeat"
+ });
- /*
- * If the float is right it might calculate the backgorund-position based the width of the parent
- */
- if(floatDirection=="right") {
- $parent.css("background-position", ($parent.width()-padding.right-$image.width())+"px "+padding.top+"px");
-
/*
- * In case of resizing it MUST calculate the background-position again.
+ * If the float is right it might calculate the backgorund-position based the width of the parent
*/
- $(window).resize(function() {
- $parent.css("background-position", ($parent.width()-padding.right-$image.width())+"px "+padding.top+"px");
+ if(floatDirection=="right") {
+ $parent.css("background-position", ($parent.width()-padding.right-$image.width())+"px "+padding.top+"px");
+
+ /*
+ * In case of resizing it MUST calculate the background-position again.
+ */
+ $(window).resize(function() {
+ $parent.css("background-position", ($parent.width()-padding.right-$image.width())+"px "+padding.top+"px");
+ });
+ }
+ } else {
+ $parent.css({
+ "background-image": "url("+canvas.toDataURL()+")",
+ "background-position" : "top "+floatDirection,
+ "background-repeat" : "no-repeat"
});
- }
- } else
- $parent.css({
- "background-image": "url("+canvas.toDataURL()+")",
- "background-position" : "top "+floatDirection,
- "background-repeat" : "no-repeat"
- });
+ }
var divWidths = calculateDivWidths.call(this, canvas, padding, settings.bgColor, settings.resolution, settings.bloomPadding, settings.cutoff);
var divs = [];
@@ -158,9 +160,9 @@
*/
var parentHeight = $parent.height();
var imageHeight = $image.height()+padding.top;
- if(parentHeight < imageHeight){
- $parent.height(imageHeight);
- }
+ $parent.css({
+ minHeight: imageHeight
+ });
/*
* Hide the image itself.
@@ -383,4 +385,5 @@
return this;
};
}
-})(jQuery);
+})(jQuery);
+
View
19 test/test.html → test/index.html
@@ -21,19 +21,32 @@
<script type="text/javascript">
$(document).ready(function(){
- $('.wrapReady').slickWrap({sourceImage: true});
+ $('.wrapReady.withoutSourceImage').slickWrap({
+ sourceImage: false
+ });
+ $('.wrapReady.withSourceImage').slickWrap({
+ sourceImage: true
+ });
});
</script>
</head>
<body>
<h1>jQSlickWrap</h1>
+ <h2>Left-Floated Without sourceImage</h2>
<div class="container">
- <img class="wrapReady" src="./escalator.png" />
+ <img class="wrapReady withoutSourceImage" src="./escalator.png" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc justo massa, mattis in imperdiet in, pellentesque sit amet elit. Fusce vitae pulvinar nisi. Ut sed justo nec est congue cursus vestibulum eu dolor. Donec at mauris felis, sit amet ultrices odio. Aliquam erat volutpat. Nullam faucibus metus eu elit luctus sed malesuada risus molestie. Mauris nulla quam, tristique at lobortis at, fringilla quis nibh. Ut sapien mauris, imperdiet eget tincidunt semper, consectetur a augue. Donec vitae nibh augue, ut rhoncus elit. Nullam volutpat lorem sed odio lacinia non aliquet erat consequat. In ac libero turpis. In commodo nisl id diam dapibus varius. Sed lobortis ultricies ligula, quis auctor arcu imperdiet eget. Donec vel ipsum dui. In justo purus, molestie sit amet mattis sed, cursus non orci. Nullam ac massa vel tortor scelerisque blandit quis a sapien.</p>
<p>Morbi ipsum massa, commodo in auctor a, tincidunt et nisl. In hac habitasse platea dictumst. Fusce molestie, leo ut pellentesque posuere, dui nunc dignissim massa, non aliquet felis sem nec nisl. In pellentesque condimentum tellus, sed hendrerit dolor porttitor vel. Nam dapibus urna a sem semper non porttitor nulla varius. Morbi libero metus, dictum vel viverra aliquet, fringilla vitae tellus. Maecenas ac libero mauris. Pellentesque vitae urna erat, lobortis venenatis ipsum. Ut nec gravida arcu. Suspendisse at risus nulla. Vivamus dictum tempus enim at pellentesque. Curabitur ac tellus ligula, non tristique risus. Nunc vitae ipsum nec libero consectetur tincidunt nec eu nisl. Fusce odio nisi, hendrerit nec aliquam in, dignissim et magna. Nullam tempor condimentum ligula vel cursus. Pellentesque ut sapien at ligula pellentesque congue ut ut turpis.</p>
</div>
+ <h2>Left-Floated With sourceImage</h2>
<div class="container">
- <img class="wrapReady right" src="./escalator.png" />
+ <img class="wrapReady withSourceImage" src="./escalator.png" />
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc justo massa, mattis in imperdiet in, pellentesque sit amet elit. Fusce vitae pulvinar nisi. Ut sed justo nec est congue cursus vestibulum eu dolor. Donec at mauris felis, sit amet ultrices odio. Aliquam erat volutpat. Nullam faucibus metus eu elit luctus sed malesuada risus molestie. Mauris nulla quam, tristique at lobortis at, fringilla quis nibh. Ut sapien mauris, imperdiet eget tincidunt semper, consectetur a augue. Donec vitae nibh augue, ut rhoncus elit. Nullam volutpat lorem sed odio lacinia non aliquet erat consequat. In ac libero turpis. In commodo nisl id diam dapibus varius. Sed lobortis ultricies ligula, quis auctor arcu imperdiet eget. Donec vel ipsum dui. In justo purus, molestie sit amet mattis sed, cursus non orci. Nullam ac massa vel tortor scelerisque blandit quis a sapien.</p>
+ <p>Morbi ipsum massa, commodo in auctor a, tincidunt et nisl. In hac habitasse platea dictumst. Fusce molestie, leo ut pellentesque posuere, dui nunc dignissim massa, non aliquet felis sem nec nisl. In pellentesque condimentum tellus, sed hendrerit dolor porttitor vel. Nam dapibus urna a sem semper non porttitor nulla varius. Morbi libero metus, dictum vel viverra aliquet, fringilla vitae tellus. Maecenas ac libero mauris. Pellentesque vitae urna erat, lobortis venenatis ipsum. Ut nec gravida arcu. Suspendisse at risus nulla. Vivamus dictum tempus enim at pellentesque. Curabitur ac tellus ligula, non tristique risus. Nunc vitae ipsum nec libero consectetur tincidunt nec eu nisl. Fusce odio nisi, hendrerit nec aliquam in, dignissim et magna. Nullam tempor condimentum ligula vel cursus. Pellentesque ut sapien at ligula pellentesque congue ut ut turpis.</p>
+ </div>
+ <h2>Right-Floated With sourceImage</h2>
+ <div class="container">
+ <img class="wrapReady withSourceImage right" src="./escalator.png" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc justo massa, mattis in imperdiet in, pellentesque sit amet elit. Fusce vitae pulvinar nisi. Ut sed justo nec est congue cursus vestibulum eu dolor. Donec at mauris felis, sit amet ultrices odio. Aliquam erat volutpat. Nullam faucibus metus eu elit luctus sed malesuada risus molestie. Mauris nulla quam, tristique at lobortis at, fringilla quis nibh. Ut sapien mauris, imperdiet eget tincidunt semper, consectetur a augue. Donec vitae nibh augue, ut rhoncus elit. Nullam volutpat lorem sed odio lacinia non aliquet erat consequat. In ac libero turpis. In commodo nisl id diam dapibus varius. Sed lobortis ultricies ligula, quis auctor arcu imperdiet eget. Donec vel ipsum dui. In justo purus, molestie sit amet mattis sed, cursus non orci. Nullam ac massa vel tortor scelerisque blandit quis a sapien.</p>
<p>Morbi ipsum massa, commodo in auctor a, tincidunt et nisl. In hac habitasse platea dictumst. Fusce molestie, leo ut pellentesque posuere, dui nunc dignissim massa, non aliquet felis sem nec nisl. In pellentesque condimentum tellus, sed hendrerit dolor porttitor vel. Nam dapibus urna a sem semper non porttitor nulla varius. Morbi libero metus, dictum vel viverra aliquet, fringilla vitae tellus. Maecenas ac libero mauris. Pellentesque vitae urna erat, lobortis venenatis ipsum. Ut nec gravida arcu. Suspendisse at risus nulla. Vivamus dictum tempus enim at pellentesque. Curabitur ac tellus ligula, non tristique risus. Nunc vitae ipsum nec libero consectetur tincidunt nec eu nisl. Fusce odio nisi, hendrerit nec aliquam in, dignissim et magna. Nullam tempor condimentum ligula vel cursus. Pellentesque ut sapien at ligula pellentesque congue ut ut turpis.</p>
</div>
Please sign in to comment.
Something went wrong with that request. Please try again.