Permalink
Browse files

initial commit

  • Loading branch information...
0 parents commit cbc3a0252faf414d9bf112054ca3969e3cddcb1b @Mottie committed May 15, 2011
@@ -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
@@ -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;
+}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -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>
@@ -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);
Oops, something went wrong.

0 comments on commit cbc3a02

Please sign in to comment.