Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
221 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| /*! jQuery.buttonLoading (c) 2012, Rico Sta. Cruz. MIT License. | ||
| * https://github.com/rstacruz/jquery-stuff/tree/master/buttonloading */ | ||
|
|
||
| // Show 'loading...' text on buttons. | ||
| // | ||
| // Quick setup | ||
| // ----------- | ||
| // | ||
| // Add a `data-loading-text` attribute to your buttons: | ||
| // | ||
| // <button type='submit' data-loading-text='Saving...'>Save</button> | ||
| // | ||
| // Now toggle the state using: | ||
| // | ||
| // $('button').showButtonLoading(); | ||
| // $('button').hideButtonLoading(); | ||
| // | ||
| // Recommended usage | ||
| // ----------------- | ||
| // | ||
| // You can activate this automatically: | ||
| // | ||
| // $('form').on('submit', function() { | ||
| // this.find(':submit').showButtonLoading(); | ||
| // }); | ||
| // | ||
| // How it works | ||
| // ------------ | ||
| // | ||
| // This swaps the text with the given loading text, disables the button, and | ||
| // adds a the `loading` class. | ||
|
|
||
| (function($) { | ||
| $.fn.toggleButtonLoading = function() { | ||
| return this.is(':disabled') ? | ||
| this.hideButtonLoading() : | ||
| this.showButtonLoading(); | ||
| }; | ||
|
|
||
| $.fn.showButtonLoading = function() { | ||
| var $button = this; | ||
| var label; | ||
|
|
||
| // Sanity check | ||
| if ($button.is(':disabled')) return; | ||
|
|
||
| // Get the alt label | ||
| var alt = $button.data('loadingText'); | ||
|
|
||
| // Swap | ||
| if ($button.is('input')) { | ||
| label = $button.attr('value'); | ||
| $button.attr('value', alt); | ||
| } else { | ||
| label = $button.html(); | ||
| $button.html(alt); | ||
| } | ||
|
|
||
| // Save the old | ||
| $button.data('originalText', label); | ||
|
|
||
| // Attr | ||
| $button.attr('disabled', true); | ||
| $button.addClass('loading'); | ||
|
|
||
| return this; | ||
| }; | ||
|
|
||
| $.fn.hideButtonLoading = function() { | ||
| var $button = this; | ||
|
|
||
| // Sanity check | ||
| if (!$button.is(':disabled')) return; | ||
|
|
||
| // Get the alt label | ||
| var alt = $button.data('originalText'); | ||
|
|
||
| // Swap | ||
| if ($button.is('input')) { | ||
| $button.attr('value', alt); | ||
| } else { | ||
| $button.html(alt); | ||
| } | ||
|
|
||
| // Attr | ||
| $button.removeAttr('disabled'); | ||
| $button.removeClass('loading'); | ||
|
|
||
| return this; | ||
| }; | ||
| })(jQuery); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| // Fades an image in on load. | ||
| // | ||
| // $('.wallpaper img').fadeonload(); | ||
| // | ||
| // The image doesn't have to be in the DOM at time of calling. | ||
| // | ||
| // It would be best if the image has `opacity: 0` in the CSS as well so there | ||
| // won't be a "flash of visible image". | ||
| // | ||
| (function($) { | ||
|
|
||
| $.fn.fadeonload = function() { | ||
| var $image = this; | ||
|
|
||
| $(function() { | ||
| $image.each(function() { | ||
| var $image = $(this); | ||
|
|
||
| if (this.complete) { | ||
| $image.trigger('load'); | ||
| } else { | ||
| $image.css({ opacity: 0 }); | ||
| } | ||
| }); | ||
| }); | ||
|
|
||
| this.on('load', function() { | ||
| var $image = $(this); | ||
|
|
||
| $image | ||
| .show() | ||
| .css({ opacity: 0 }); | ||
|
|
||
| setTimeout(function() { | ||
| $image.css({ opacity: 1, transition: 'opacity 400ms linear' }); | ||
| }, 25); | ||
| }); | ||
|
|
||
| return this; | ||
| }; | ||
| })(jQuery); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| /*! fillsize (c) 2012, Rico Sta. Cruz. MIT License. | ||
| * http://github.com/rstacruz/jquery-stuff/tree/master/fillsize */ | ||
|
|
||
| // Makes an element fill up its container. | ||
| // | ||
| // $(".container").fillsize("> img"); | ||
| // | ||
| // This binds a listener on window resizing to automatically scale down the | ||
| // child (`> img` in this example) just so that enough of it will be visible in | ||
| // the viewport of the container. | ||
| // | ||
| // This assumes that the container has `position: relative` (or any 'position', | ||
| // really), and `overflow: hidden`. | ||
|
|
||
| (function($) { | ||
| $.fn.fillsize = function(selector) { | ||
| var $parent = this; | ||
| var $img; | ||
|
|
||
| function resize() { | ||
| if (!$img) $img = $parent.find(selector); | ||
|
|
||
| var imageRatio = $img.width() / $img.height(); | ||
| var containerRatio = $parent.width() / $parent.height(); | ||
|
|
||
| // If image is wider than the container | ||
| if (imageRatio > containerRatio) { | ||
| $img.css({ | ||
| 'position': 'absolute', | ||
| 'left': Math.round(($parent.width() - imageRatio * $parent.height()) / 2) + 'px', | ||
| 'top': '0', | ||
| 'right': 'auto', | ||
| 'bottom': 'auto', | ||
| 'width': 'auto', | ||
| 'height': '100%' | ||
| }); | ||
| } | ||
|
|
||
| // If the container is wider than the image | ||
| else { | ||
| $img.css({ | ||
| 'position': 'absolute', | ||
| 'top': Math.round(($parent.height() - ($parent.width() / $img.width() * $img.height())) / 2) + 'px', | ||
| 'left': '0', | ||
| 'right': 'auto', | ||
| 'bottom': 'auto', | ||
| 'height': 'auto', | ||
| 'width': '100%' | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| // Make it happen on window resize. | ||
| $(window).on('resize', resize); | ||
|
|
||
| // If the child is an image, fill it up when image's real dimensions are | ||
| // first determined. | ||
| $(selector, $parent).on('load', function() { | ||
| setTimeout(resize, 25); | ||
| }); | ||
|
|
||
| // Allow manual invocation by doing `.trigger('fillsize')` on the container. | ||
| $parent.on('fillsize', resize); | ||
|
|
||
| // Resize on first load. | ||
| $(resize); | ||
|
|
||
| return this; | ||
| }; | ||
| })(jQuery); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters