Results 1 to 5 of 5

Thread: Better way to program this - Animate width/height

  1. #1
    Join Date
    Mar 2011
    Location
    N 11 19' 0.0012 E 142 15' 0
    Posts
    1,524
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

    Default Better way to program this - Animate width/height

    I've got a basic jquery version of one of the old ddscripts, and it works fine, but one of the bits of code is driving me crazy...
    I don't want to write all the same code (most of it's the same) twice... is there a way to avoid this without making tonnes of variables to store all the data that changes between the if statements?

    js file
    Code:
    $.fn.time_based_progress_bar = function(user_options) {
        var default_options = {
    		duration : 1000,
    		color : 'blue',
    		direction : 'horizontal',
    		complete : function() {
    			//alert("Complete");
    		}
        };
        var args = default_options;
        if(typeof user_options === 'object') { 
    		args = $.extend(default_options,user_options);
    	}
    	if(default_options.direction == 'vertical') {
    		$(this).css('position', 'relative');
    		$(this).html('<div style="height:0%;width:100%;background-color:' + default_options.color + ';position:absolute;bottom:0;left:0;"></div>');
    		$(this).children().animate({
    			height : '100%'
    		}, default_options.duration, default_options.complete);
    	} else {
    		$(this).html('<div style="height:100%;width:0%;background-color:' + default_options.color + ';"></div>');
    		$(this).children().animate({
    			width : '100%'
    		}, default_options.duration, default_options.complete);
    	}
    };
    html
    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="time_based.js"></script>
    <script type="text/javascript">
    $(function() {
    	$('#time').time_based_progress_bar({
    		duration : 5000,
    		color : 'green',
    		direction : 'vertical',
    		complete : function() {
    			alert("Finished.");
    		}
    	});
    });
    </script>
    </head>
    <body>
    <div id="time" style="border:1px solid black;background-color:white;height:20px;"></div>
    </body>
    </html>
    p.s. Is it just me or is the bbcode color button missing?
    Last edited by keyboard; 11-22-2012 at 07:11 AM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    I did add one variable ($bar), which seemed prudent. You don't need the UI because you're not using anything from it. The animation function can take an options object and doesn't seem to mind the extra/unrecognized options in your existing object. So you don't have to parse it each time. I added an easing option. If you want more than 'linear' or 'swing' as easing choices, then you would need the UI or at least an extended easing function. The latter exist or you could lift it from an uncompressed version of the UI. The this keyword in a jQuery fn function is already a jQuery object. Chaining can be utilized more. An if statement that has only one action can be done more succinctly as an && statement. An fn function should return the jQuery object it was run on, The appendTo() function is safer than the .html() one. If you want to make sure the parent is empty, you can use the empty() function on it, but since it is empty, I didn't bother. Using the css() function is often more succinct than creating an element as a string with a style attribute in it:

    Code:
    $.fn.time_based_progress_bar = function(user_options) {
    	var default_options = {
    		duration : 1000,
    		color : 'blue',
    		direction : 'horizontal',
    		easing: 'swing',
    		complete : function() {
    			//alert("Complete");
    		}
    	}, $bar = $('<div />');
    	typeof user_options === 'object' && $.extend(default_options, user_options);
    	$bar.css({backgroundColor: default_options.color});
    	if(default_options.direction == 'vertical') {
    		$bar.css({height: 0, width: '100%', position: 'absolute', bottom: 0, left: 0})
    		.appendTo(this.css('position', 'relative')).animate({height : '100%'}, default_options);
    	} else {
    		$bar.css({height: '100%', width: 0}).appendTo(this).animate({width : '100%'}, default_options);
    	}
    	return this;
    };
    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="time_based.js"></script>
    <script type="text/javascript">
    $(function() {
    	$('#time').time_based_progress_bar({
    		duration : 5000,
    		color : 'green',
    		direction : 'vertical',
    		easing: 'linear', // 'linear' or 'swing' defaults to 'swing'
    		complete : function() {
    			alert("Finished.");
    		}
    	});
    });
    </script>
    </head>
    <body>
    <div id="time" style="border:1px solid black;background-color:white;height:20px;"></div>
    </body>
    </html>
    BTW - The color option in the editor is there for me. It's a button designated by a capital A. It has no effect if used within HTML or any other bbcode code block other than [code].

    Edit: An even more concise way of doing the javascript:


    Code:
    $.fn.time_based_progress_bar = function(user_options) {
    	var default_options = {
    		duration : 1000,
    		color : 'blue',
    		direction : 'horizontal',
    		easing: 'swing',
    		complete : function() {	/* alert("Complete"); */ }
    	}, $bar = $('<div />'), vert;
    	typeof user_options === 'object' && $.extend(default_options, user_options);
    	vert = default_options.direction === 'vertical';
    	$bar.css($.extend({backgroundColor: default_options.color, width: 0, height: 0},
    		(vert? {width: '100%', position: 'absolute', bottom: 0, left: 0} : {height: '100%'})));
    	return this.empty().append($bar.animate((vert? {height: '100%'} : {width: '100%'}), default_options)).css('position', 'relative');
    };
    Last edited by jscheuer1; 11-21-2012 at 04:32 PM. Reason: add more concise method
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Mar 2011
    Location
    N 11 19' 0.0012 E 142 15' 0
    Posts
    1,524
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

    Default

    Wow, thanks for that John!
    How does this line work?
    Code:
    typeof user_options === 'object' && $.extend(default_options, user_options);
    I get what it does, but can't work out how to use it in a different situation...

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    An if statement that has only one action can be done more succinctly as an && statement.
    The && is all about determining the truth of things and means basically if the first thing is true, consider the second thing. In this context:

    Code:
    typeof user_options === 'object'
    will either be true or false. If it's false, the rest of the line will not even be considered. If it's true, the next thing will be evaluated. In this case the next thing is a function, so it will have to be run. Otherwise there's no way to determine its truth or falseness. We don't really care in this case, we just want it run if the first thing is true, and if that first thing is true, the function will be run.

    I hope that clears it up. A bare bones example would be:

    Code:
    1 === 1 && alert('Doh!');
    There 1 will always equal 1, so it will always fire the alert.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. The Following User Says Thank You to jscheuer1 For This Useful Post:

    keyboard (11-22-2012)

  6. #5
    Join Date
    Mar 2011
    Location
    N 11 19' 0.0012 E 142 15' 0
    Posts
    1,524
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

    Default

    Thanks John

Similar Threads

  1. width and height
    By EXCUSE in forum HTML
    Replies: 1
    Last Post: 11-17-2008, 04:29 PM
  2. Table width and height in IE and FF
    By chas in forum HTML
    Replies: 4
    Last Post: 07-24-2008, 12:35 PM
  3. Help. Get String width and height.
    By NCS_One in forum JavaScript
    Replies: 5
    Last Post: 10-26-2007, 05:44 PM
  4. new window, set to max width/height?
    By Aidanx in forum JavaScript
    Replies: 2
    Last Post: 05-17-2007, 07:06 AM
  5. inline css height/width
    By neilkw in forum CSS
    Replies: 0
    Last Post: 07-04-2006, 12:15 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •