www.webdeveloper.com
Results 1 to 4 of 4

Thread: Animating height turned out funny

Hybrid View

  1. #1
    Join Date
    May 2014
    Posts
    1

    Question Animating height turned out funny

    I have just started to learn javascript and I decided that I wanted to create an animated drop-down list with it in order to learn more, however there is a problem I cant seem to resolve. Sometimes, if I try to animate the height on a part of the page that is already being animated at the time the finishing height is undesirable.
    Here is the code for animation:
    Code:
    function AniHeight(ElId,duration,endHeight)
    {
    	"use strict";
    	this.id = ElId;
    	this.steps = duration / 25;
    	this.heightDifference = endHeight - document.getElementById(this.id).offsetHeight;
    	this.addHeight = this.heightDifference / this.steps;
    	this.incrementHeight = function()
    	{
    		if(this.steps > 0)
    		{
    			document.getElementById(this.id).style.height = (document.getElementById(this.id).offsetHeight + this.addHeight) + 'px';
    			
    			this.steps -= 1;
    		}
    	};
    	this.resetAnimation = function(desiredHeight,length)
    	{
    		this.steps = length / 25;
    		this.heightDifference = desiredHeight - document.getElementById(this.id).offsetHeight;
    		this.addHeight = this.heightDifference / this.steps;
    	};
    }
    
    var heightObjects =[];
    
    function animateHeight(ElId,endHeight,duration)
    {
    	var objectExists = false;
    	for(var i = 0; i < heightObjects.length ; i+= 1)
    	{
    		if (heightObjects[i].id === ElId)
    		{
    			heightObjects[i].resetAnimation(endHeight,duration);
    			objectExists = true;
    		}
    	}
    	if(objectExists === false)
    	{
    		heightObjects.push( new AniHeight(ElId,duration,endHeight) );
    	}
    }
    
    setInterval(function(){
    	"use strict";
    	if(heightObjects.indexOf(1))
    	{
    		for(var i = 0; i < heightObjects.length; i +=1)
    		{
    			
    			heightObjects[i].incrementHeight();
    		}
    	}
    },25);
    Here is the html for the page I am trying to animate:

    Code:
    <html>
    <head>
    	<title>Javascript testing page</title>
    </head>
    
    <body align="center">
    	<h1> output</h1>
    	<p id = "output"></p>
    	<div style = "height:300px;
    				  width:300px;
    				  background-color:red;
    				  position:fixed;
    				  top:0;" id = "redbox" onmouseover="animateHeight('redbox',300,1000)" onmouseout="animateHeight('redbox',100,1000)"></div>
    	<script src="javascript.js"></script>
    </body>
    
    
    </html>

  2. #2
    Join Date
    May 2014
    Posts
    1,020
    What you have here is a somewhat outdated way of doing this. My advice, let CSS do this as JS is just more code for 'nothing' and uses more battery on mobile.

    Your other code has similar dated issues, like the ALIGN attribute on body that hasn't been valid since 1997, inlining style in the markup (even in testing I advise against that), using the onevent handlers which really NEED to be deprecated since scripting should hook the markup not the other way around...

    But setting that aside, let's say you had <div id="resize"></div>

    Code:
    #resize {
      width:300px;
      height:100px;
      background:red;
      -webkit-transition:height 1s;
      -moz-transition:height 1s;
      -ms-transition:height 1s;
      transition:height 1s;
    }
    
    #resize:hover {
      height:300px;
    }
    Mind you, IE9/earlier won't get the animation -- in my book that's a serious "OH WELL!" It will still resize on hover all the way back to IE7, and if you REALLY care about IE6 you could add something like peterneds csshover3.htc as a shim. Legacy browsers don't get something silly like an animation, rounded corners, drop shadows -- who cares? Is the page still USABLE in those browsers? Yes? then why bend over backwards to make it look perfect for people who refuse to join us in THIS century.

    That said, I draw the line at "does the page WORK and deliver content" -- if you can't do that all the way back to IE 5.5 Win / 5.2 mac, you're probably doing something wrong.
    Java is to JavaScript as Ham is to Hamburger.

  3. #3
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,362
    So those who have old systems in 3rd word countries can go effem selves deathshadow?

    That is a pretty poor attitude towards programming, a good programmer will provide a fall back option to support older browsers still in the field.

    If you want to animate a drop down then search the forum using the search option, this subject has been covered many time and it is a regular request so try searching for the answer!
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  4. #4
    Join Date
    May 2014
    Posts
    1,020
    Quote Originally Posted by \\.\ View Post
    So those who have old systems in 3rd word countries can go effem selves deathshadow?
    I'm NOT saying don't make it not work, I'm saying if they don't get some goofy pointless presentational nonsense like an animation, rounded corners, drop shadows, text-shadows and linear gradients, is it REALLY worth the effort of making the page three times larger, ten times slower and twenty times harder to maintain?

    Hence why I pointed out it will WORK without the animation (it will just pop into place full sized) all the way back to IE7, and can be made to work all the way back to IE 5.5 with a htc file like this one?

    Which BTW is what graceful degradation thanks to progressive enhancement -- one of the entire reasons for using CSS in the first place -- is all about.

    That's not telling them to go shtup themselves, that's saying "you're not getting fancy modern bits that have nothing to do with functionality because you're not on a modern browser"

    There's a difference.

    Though sadly, users in third world countries are usually more up to date than long term developed nations; you're more likely to find a Win98 or MacOS 9 user on IE 5.5 or 5.2 Mac in the US than you are anywhere else. I DO keep these users in mind in terms of FUNCTIONALITY -- THE PAGE WILL WORK -- but they don't get some artsy fartsy pointless "gee ain't it neat" animation, I'm not going to throw bloated JavaScript at a non-issue.

    ... at least, not unless it's a paying client insisting it work there, and even then at this point I'd probably tell such a client to "Golf Alpha Foxtrot Charlie" or "Golf Tango Foxtrot Oscar" unless they were REALLY willing to pay for it... usually because that level of "perfection" on legacy browsers ends up just another BOHICA situation.

    -- edit --

    Oh and a similar argument to yours could be used against the JavaScript version, since it has no graceful degradation when JS is blocked or disabled; that would be worded something like "So those who have metered connections or don't trust JavaScript in first world nations who downloaded plugins like noScript or use built-in per page script blocking in browsers like Opera can go **** themselves?"

    Which actually would hold more water, since again my approach would gracefully degrades, something the scripting only version can't do. Well, unless you attach a class to set the 100px height and positioning at the start of script execution, so the content is always shown scripting off!
    Last edited by deathshadow; 06-01-2014 at 07:08 AM.
    Java is to JavaScript as Ham is to Hamburger.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles