Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

initial commit

  • Loading branch information...
commit cbc3a0252faf414d9bf112054ca3969e3cddcb1b 0 parents
@Mottie authored
26 README.markdown
@@ -0,0 +1,26 @@
+###Features ([Demo][1])
+
+* This plugin works on CSS3 supported browsers only.
+* In an element with multiple background images
+ * Prepend or append an image
+ * Remove an image, using only the filename
+
+###To Do
+
+* Considering adding support for older browsers by wrapping the element to add additional background images.
+
+### Dependencies
+* Tested with jQuery 1.6.2, but it should work with older versions
+
+###Licensing
+
+* [MIT License][2]
+
+###Change Log
+
+####Version 1.0
+
+* First commit to Github
+
+ [1]: http://mottie.github.com/css3-background-utilities/
+ [2]: http://www.opensource.org/licenses/mit-license.php
24 css/demo.css
@@ -0,0 +1,24 @@
+body {
+ background: #222;
+ color: #fff;
+}
+a:link {
+ color: #9fcdff;
+ text-decoration: none;
+}
+a:hover {
+ color: #fff;
+}
+a:visited, a:active {
+ color: #53a5ff;
+}
+
+h1, h3, #selectors, #sample {
+ text-align: center;
+}
+
+#sample {
+ margin: 0 auto;
+ width: 800px;
+ height: 647px;
+}
BIN  images/graffiti.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  images/hole.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  images/ivy.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  images/sign.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  images/smiley.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  images/wall.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  images/window.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
66 index.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+
+ <title>CSS3 Background Utilities Demo</title>
+
+ <!-- jQuery (required) -->
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
+
+ <link href="css/demo.css" rel="stylesheet">
+ <script src="js/jquery.css3background.js"></script>
+ <script>
+ $(function(){
+ $('button').click(function(){
+ if ($(this).text() === '+') {
+ if ($(this).next().is('input')) {
+ $('#sample').prependBackground( $(this).next().val() );
+ } else {
+ $('#sample').appendBackground( $(this).prev().val() );
+ }
+ } else {
+ $('#sample').removeBackground( $(this).next().val() );
+ }
+
+ });
+ // add the wall
+ $('button:first').trigger('click');
+ });
+ </script>
+
+</head>
+
+<body>
+ <h1><a href="https://github.com/Mottie/css3-background-utilities">jQuery CSS3 Background Utilities</a></h1>
+ <h3>This plugin allows you to append, prepend and remove multiple background images</h3>
+
+ <div id="selectors">
+ <button title="prepend image">+</button><input type="text" value="url(images/wall.jpg) 50% 50% no-repeat"><button title="append image">+</button>&nbsp;
+ <button title="remove image">-</button><input type="text" value="wall.jpg">
+ <br>
+ <button title="prepend image">+</button><input type="text" value="url(images/hole.gif) 350px 310px no-repeat"><button title="append image">+</button>&nbsp;
+ <button title="remove image">-</button><input type="text" value="hole.gif">
+ <br>
+ <button title="prepend image">+</button><input type="text" value="url(images/ivy.png) top right no-repeat"><button title="append image">+</button>&nbsp;
+ <button title="remove image">-</button><input type="text" value="ivy.png">
+ <br>
+ <button title="prepend image">+</button><input type="text" value="url(images/sign.gif) 630px 340px no-repeat"><button title="append image">+</button>&nbsp;
+ <button title="remove image">-</button><input type="text" value="sign.gif">
+ <br>
+ <button title="prepend image">+</button><input type="text" value="url(images/smiley.png) 55% 10% no-repeat"><button title="append image">+</button>&nbsp;
+ <button title="remove image">-</button><input type="text" value="smiley.png">
+ <br>
+ <button title="prepend image">+</button><input type="text" value="url(images/window.gif) 50px 30px no-repeat"><button title="append image">+</button>&nbsp;
+ <button title="remove image">-</button><input type="text" value="window.gif">
+ <br>
+ <button title="prepend image">+</button><input type="text" value="url(images/graffiti.png) 5% 80% no-repeat"><button title="append image">+</button>&nbsp;
+ <button title="remove image">-</button><input type="text" value="graffiti.png">
+ </div>
+ <br>
+ <div id="sample"></div>
+
+</body>
+
+</html>
66 js/jquery.css3background.js
@@ -0,0 +1,66 @@
+/*
+ * CSS3 Multiple Background Utilities v1.0
+ * By Rob Garrison (aka Mottie & Fudgey)
+ * licensed under the MIT license.
+ */
+
+(function($) {
+
+ // css3 background attributes
+ var bkgdAttrs = 'color image size position repeat origin clip attach'.split(' ');
+
+ $.fn.appendBackground = function(bkgd) {
+ return this.each(function() {
+ if (typeof bkgd !== 'string') { return; }
+ // need to add a div to the body, if not appended, it throws errors
+ var t = $('<div id="css3backgroundstyle" style="display:none;background:' + bkgd + '"/>').appendTo('body');
+ $.addBackground( $(this), $.getBackgrounds($(this)), $.getBackgrounds(t) );
+ t.remove();
+ });
+ };
+
+ $.fn.prependBackground = function(bkgd) {
+ return this.each(function() {
+ if (typeof bkgd !== 'string') { return; }
+ var t = $('<div id="css3backgroundstyle" style="display:none;background:' + bkgd + '"/>').appendTo('body');
+ $.addBackground( $(this), $.getBackgrounds(t), $.getBackgrounds($(this)) );
+ t.remove();
+ });
+ };
+
+ // bkgd only needs a unique/partial file name with extension to work
+ $.fn.removeBackground = function(bkgd) {
+ return this.each(function() {
+ if ( typeof bkgd !== 'string' && !/\.(jpg|png|gif)/.test(bkgd) ) { return; }
+ var i, indx = -1,
+ $el = $(this),
+ a = $.getBackgrounds($el),
+ t = a.image;
+ for (i=0; i<t.length; i++){
+ if (t[i].match(bkgd)) { indx = i; }
+ }
+ if (indx >= 0) {
+ $.each(bkgdAttrs, function(i,o){
+ a[o].splice(indx,1);
+ $el.css('background-' + o, a[o].join(','));
+ });
+ }
+ });
+ };
+
+ // private functions definition
+ $.getBackgrounds = function($el){
+ var b = {};
+ $.each(bkgdAttrs, function(i,o){
+ b[o] = $el.css('background-' + o).split(',');
+ });
+ return b;
+ };
+
+ $.addBackground = function($el, a, b){
+ $.each(bkgdAttrs, function(i,o){
+ $el.css('background-' + o, a[o].concat( b[o] ).join(','));
+ });
+ };
+
+})(jQuery);
7 js/jquery.css3background.min.js
@@ -0,0 +1,7 @@
+/*
+ * CSS3 Multiple Background Utilities v1.0 minified
+ * By Rob Garrison (aka Mottie & Fudgey)
+ * licensed under the MIT license.
+ */
+
+(function(a){var g="color image size position repeat origin clip attach".split(" ");a.fn.appendBackground=function(c){return this.each(function(){if(typeof c==="string"){var b=a('<div id="css3backgroundstyle" style="display:none;background:'+c+'"/>').appendTo("body");a.addBackground(a(this),a.getBackgrounds(a(this)),a.getBackgrounds(b));b.remove()}})};a.fn.prependBackground=function(c){return this.each(function(){if(typeof c==="string"){var b=a('<div id="css3backgroundstyle" style="display:none;background:'+ c+'"/>').appendTo("body");a.addBackground(a(this),a.getBackgrounds(b),a.getBackgrounds(a(this)));b.remove()}})};a.fn.removeBackground=function(c){return this.each(function(){if(typeof c==="string"||/\.(jpg|png|gif)/.test(c)){var b,e=-1,f=a(this),d=a.getBackgrounds(f),h=d.image;for(b=0;b<h.length;b++)h[b].match(c)&&(e=b);e>=0&&a.each(g,function(a,b){d[b].splice(e,1);f.css("background-"+b,d[b].join(","))})}})};a.getBackgrounds=function(c){var b={};a.each(g,function(a,f){b[f]=c.css("background-"+f).split(",")}); return b};a.addBackground=function(c,b,e){a.each(g,function(a,d){c.css("background-"+d,b[d].concat(e[d]).join(","))})}})(jQuery);
Please sign in to comment.
Something went wrong with that request. Please try again.