[SOLVED] javascript ignores format modifying instruction
ProgrammingThis forum is for all programming questions.
The question does not have to be directly related to Linux and any language is fair game.
Notices
Welcome to LinuxQuestions.org, a friendly and active Linux Community.
You are currently viewing LQ as a guest. By joining our community you will have the ability to post topics, receive our newsletter, use the advanced search, subscribe to threads and access many other special features. Registration is quick, simple and absolutely free. Join our community today!
Note that registered members see fewer ads, and ContentLink is completely disabled once you log in.
If you have any problems with the registration process or your account login, please contact us. If you need to reset your password, click here.
Having a problem logging in? Please visit this page to clear all LQ-related cookies.
Get a virtual cloud desktop with the Linux distro that you want in less than five minutes with Shells! With over 10 pre-installed distros to choose from, the worry-free installation life is here! Whether you are a digital nomad or just looking for flexibility, Shells can put your Linux machine on the device that you want to use.
Exclusive for LQ members, get up to 45% off per month. Click here for more info.
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>
Last edited by bluegospel; 06-24-2011 at 09:31 PM.
Reason: correct confused content
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.
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.
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>
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?
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).
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.
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.
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.
LinuxQuestions.org is looking for people interested in writing
Editorials, Articles, Reviews, and more. If you'd like to contribute
content, let us know.