[SOLVED] javascript ignores format modifying instruction

bluegospel · 06-24-2011, 05:21 PM

Hi. All I want to do is fade some text in and out via the opacity attribute, and change the text when it hits zero. My script changes the text on time, but ignores the formatting effects. I'm not worried at this stage about the else statement in the startFadeEffect() function. I just want the fade effect to work here the way it should. You guys are always helpful, so thanks in advance.

Code:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>Test June 22, 2011</title>

<style type="text/css">

#covenant {
	position:relative; 
	left:5px; 
	text-align:center;
	font-weight:bold;
	font-size:24px;	
	}

</style>

<script type="text/javascript">

var thisOpacity;
var thisString="I will speak what is noble, not base.";
var adjustBy=(-5);
var browzer=navigator.appName;


function startFadeEffect()
	{
	var thisRegEx=/Microsoft/;

	var result=browzer.search(thisRegEx);

	if (result!=-1)
		{
		thisOpacity=100;
		setTimeout("fadeEffect1()",1500);	//Microsoft browser
		}
		else
			{
			thisOpacity=1.0;
			setTimeout("fadeEffect2()",1500);	//non-Microsoft browser
			}

	}

function fadeEffect1()
	{
	thisOpacity+=adjustBy;

	document.getElementById('covenant').style.filter="alpha(opacity="+thisOpacity+")";
		
	if (thisOpacity==0)
		{
		switchPledge();
		adjustBy=5;
		}

	if (thisOpacity==100)
		{
		adjustBy=(-5);
		}


	setTimeout("fadeEffect1()",75);
	}

	
	

function switchPledge()
	{
	if (thisString=="I will speak what is noble, not base.")
			{
			thisString="I will build up, and not tear down.";
			}
			else if (thisString=="I will build up, and not tear down.")
				{
				thisString="I will be kind, and not destroy.";
				}
				else if (thisString=="I will be kind, and not destroy.")
					{
					thisString="I will speak what is noble, not base.";
					}
	document.getElementById('covenant').innerHTML=thisString;
	}

</script>

</head>

<body onload="startFadeEffect()">


<div id="covenant">
I will speak what is noble, not base.
</div>


</body>

</html>

bluegospel · 06-27-2011, 11:15 AM

Am I being ignored because none can help, or because I've overlooked something grossly obvious?

dugan · 06-27-2011, 11:19 AM

Why aren't you using jQuery? The effect you want is part of its standard library.

http://api.jquery.com/fadeOut/

bluegospel · 06-27-2011, 11:32 AM

Quote:

Why aren't you using jQuery? What you want is part of its standard library.

Okay, I'll try that. Thanks.

For the most part, all this is new to me. So when I hear things like jQuery in the midst of other jargon, I often can't help but overlook it, if I'm to accomplish what I want before I reach 105 years of age. Most of you guys (even those calling themselves newbies) are somewhat well versed in technical computing.

Also, I often like to try this sort of thing, even though I may be reinventing a duck.

Thanks again!

dugan · 06-27-2011, 11:36 AM

I should also point out that one of the reasons Javascript frameworks exist is to handle portability issues between browsers. With jQuery, therefore, you will not need to test whether the user is running Internet Explorer. You just write code and it will work in both Firefox and IE.

bluegospel · 06-27-2011, 11:39 AM

Quote:

Why aren't you using jQuery? What you want is part of its standard library.

Does this library load in the user's browser when the script runs?

dugan · 06-27-2011, 11:50 AM

You load it with a script tag. "script src="

More information is on its homepage, on huge numbers of other sites (hint: search stackoverflow.com for "jquery tutorial video"), and in bookstores ("jQuery In Action" is a recommended book).

Code:

// I have NOT tested this. But it would be something like this...

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
    $(function () {
        var fadeInOut = function () {
            switchPledge();
            $(this).fadeOut(75, fadeInOut);
        };
        $('covenant').fadeOut(1500, fadeInOut)
    });
</script>

bluegospel · 06-27-2011, 12:01 PM

Quote:

With jQuery, therefore, you will not need to test whether the user is running Internet Explorer.

Is that just with items in the jQuery Library? What if I want to use javascript features that aren't included in that library, and behave differently across browsers? Will I then need to test even though I include the library?

dugan · 06-27-2011, 12:04 PM

Quote:

Originally Posted by bluegospel

Is that just with items in the jQuery Library? What if I want to use javascript features that aren't included in that library, and behave differently across browsers? Will I then need to test even though I include the library?

That is correct.

However, you'll have to be more specific about what you mean by "items that aren't included in that library." DOM manipulation and AJAX functionality are both very complete, for example. The only things that aren't included are the new features in HTML 5 (e.g. controlling embedded audio or drawing on the canvas).

bluegospel · 06-27-2011, 12:04 PM

Quote:

What's this? I thought I could include it just by:

Quote:

dugan · 06-27-2011, 12:06 PM

Quote:

Originally Posted by bluegospel

What's this? I thought I could include it just by:

<script type="text/javascript" src="jquery.js"></script>

Of course you can. However, loading it from Google's content delivery network saves you from having to download it and load a local copy.

Also, you don't need the "type=text/javascript" attribute if you're using the HTML 5 doctype (which you are).

bluegospel · 06-27-2011, 12:12 PM

Quote:

However, you'll have to be more specific about what you mean by "items that aren't included in that library."

I mainly just mean, when the interface they use for a function doesn't quite meet my needs, or when I do, for whatever reason, want to reinvent a duck.

Quote:

e.g. controlling embedded audio

Eventually, I'll need that.

bluegospel · 06-27-2011, 12:18 PM

Quote:

loading it from Google's content delivery network saves you from having to download it and load a local copy

Is it more likely that google will maintain that file in that location, publically, indefinitely for the future, or my web host (Arvixe)? I ask to spare myself from having to change the src in the future.

dugan · 06-27-2011, 12:37 PM

Anyway, here's the jQuery version (tested, this time):

Code:

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>Test June 22, 2011</title>

		<style type="text/css">

			#covenant {
				position:relative; 
				left:5px; 
				text-align:center;
				font-weight:bold;
				font-size:24px;	
			}

		</style>

	</head>
	<body>
		<div id="covenant">
			I will speak what is noble, not base.
		</div>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
		<script>
			$(function () {
				var switchPledge = function () {
					var pledge = $(this).text();

					if (pledge === 'I will speak what is noble, not base.') {
						$(this).text('I will build up, and not tear down.');
					}
					else if (pledge === 'I will build up, and not tear down.') {
						$(this).text('I will be kind, and not destroy.');
					}
					else {
						$(this).text('I will speak what is noble, not base.');
					}
					$(this).show();
					$(this).fadeOut(1500, switchPledge);
				};

				$('#covenant').fadeOut(1500, switchPledge);
			});
		</script>
	</body>
</html>

Quote:

Is it more likely that google will maintain that file in that location, publically, indefinitely for the future, or my web host (Arvixe)? I ask to spare myself from having to change the src in the future.

As mentioned, you have both options. So you'll have to decide that for yourself.

Quote:

I mainly just mean, when the interface they use for a function doesn't quite meet my needs, or when I do, for whatever reason, want to reinvent a duck.

When that comes up, extending jQuery is another option. The way to do so is very well documented, and it's as easy as writing your own functions.

bluegospel · 06-27-2011, 12:47 PM

Okay, thanks for all your help Dugan. Now to study up on jQuery (so many books, so little time).