•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 375,174 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,169 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 2244 | Replies: 3
 |
•
•
Join Date: May 2004
Posts: 133
Reputation: 
Rep Power: 5
Solved Threads: 0
Junior Poster
I'm familiar with HTML and CSS, and have now started to learn PHP without running into any trouble, but I want to add Javascript to my knowledge. I tried a long time ago, and failed, for the same reason I'm failing now. Code that looks logical to me is not logical in Javascript. Anything I try to make on my own always results in some kind of error, even if it appears to make sense to my warped brain.
What I'm trying to do now should be fairly simple. I'm trying to create a test page with a navbar and a set of links. When the user hovers over the links, the text should change to a discription of that link. I have altered my code a great deal, and have at least accomplished creating the discription (even if the CSS for it is in serious need of adjustment). However, no matter how many different things I try, I cannot get the discription to actually change. Firefox's Javascript console will either give me an error, or nothing will happen at all.
Despite having syntax highlighting, there must be something seriously wrong in here, because on the second function, I got an error saying there was a missing curly brace even when there was one. So I added a second one, which resulted in a complaint about a missing end brace. After adding a second brace, the error went away, so now I'm stuck with a rather rediculous double-bracketed function.
Note that the alert() is there because I was using it to debug to see if the function was even being called at all. It looks like it isn't, although considering that I have to put two brackets around it to avoid errors, that's not surprising.
I've been puzzling over this code for 2 and a half days now, and I'm ready to call it quits again. Can someone help?
What I'm trying to do now should be fairly simple. I'm trying to create a test page with a navbar and a set of links. When the user hovers over the links, the text should change to a discription of that link. I have altered my code a great deal, and have at least accomplished creating the discription (even if the CSS for it is in serious need of adjustment). However, no matter how many different things I try, I cannot get the discription to actually change. Firefox's Javascript console will either give me an error, or nothing will happen at all.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <!--HTML Transitional Javascript Test Page-->
<!--Header Information-->
<head>
<!--Page's Title-->
<title>
Test Page
</title>
<!--CSS Styling Information-->
<style>
/*Class Specific Styling Information*/
div#navbar
{
background-color: #00FF00;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
}
div#navLinks
{
float: left;
}
div#linkDescriptions
{
background-color: #FFFF88;
margin: 10px 10px 10px 10px;
width: 100%;
}
</style>
<!--Scripting Information-->
<script type="text/javascript">
//Create the Link Discriptions div (Done using Javascript so that it doesn't appear with Javascript disabled).
function creatediscription()
{
var navbar = document.getElementById('navbar')
var linkDescriptions = document.createElement('div');
linkDescriptions.id = "linkDescriptions";
var linkDescriptions_textNode = document.createTextNode('Hover over a menu item for the discription.');
linkDescriptions.appendChild(linkDescriptions_textNode);
navbar.appendChild(linkDescriptions);
}
function changetext()
{{
linkDescriptions_textNode.nodeValue = 'Test';
alert('that aint it');
}}
</script>
</head>
<!--Body Information-->
<body onload="creatediscription();">
<div id="navbar">
<div id="navLinks">
<p>
<a href="#" onmouseover="changetext();">Main</a>
</p>
</div>
</div>
</body>
</html>Despite having syntax highlighting, there must be something seriously wrong in here, because on the second function, I got an error saying there was a missing curly brace even when there was one. So I added a second one, which resulted in a complaint about a missing end brace. After adding a second brace, the error went away, so now I'm stuck with a rather rediculous double-bracketed function.
Note that the alert() is there because I was using it to debug to see if the function was even being called at all. It looks like it isn't, although considering that I have to put two brackets around it to avoid errors, that's not surprising.
I've been puzzling over this code for 2 and a half days now, and I'm ready to call it quits again. Can someone help?
•
•
Join Date: Dec 2004
Posts: 1,589
Reputation:
Rep Power: 7
Solved Threads: 34
I'm sure a few of us can take a crack at it. However, what you're trying to dol really isn't typical. Hyperlinks should be self-descriptive:
"Complete your order" describes what the hyperlink does. Now, I can imagine a scenario where you would like to give your users a fuller explanation of what some hyperlinks do. But physically changing the text of the hyperlink isn't a solution I'd consider. I would
1) set aside an "explanation" portion of the page, perhaps as a <div> element.
2) when the user hovers over a link, change the contents of the <div> element to explain what that link does.
or, alternatively, provide a help system that explains each link, and reference it near the links:
<a href="order_processing.php">Complete your order</a>
"Complete your order" describes what the hyperlink does. Now, I can imagine a scenario where you would like to give your users a fuller explanation of what some hyperlinks do. But physically changing the text of the hyperlink isn't a solution I'd consider. I would
1) set aside an "explanation" portion of the page, perhaps as a <div> element.
2) when the user hovers over a link, change the contents of the <div> element to explain what that link does.
or, alternatively, provide a help system that explains each link, and reference it near the links:
If you're not sure what to do next, please refer to the <a href="help.html">online help system</a>.
•
•
Join Date: Dec 2004
Posts: 1,589
Reputation:
Rep Power: 7
Solved Threads: 34
The main problem you have is understanding variable scope. When you use the keyword "var" INSIDE A FUNCTION, you are declaring that the variable is local, or scoped to that function. That being the case, your "changetext" function cannot access the objects you create in your "creatediscription" function.
Examine the code I have below, which is what you're trying to achieve, I think. I have removed the "var" keyword, making those objects global in scope.
I've also modified the "changetext" function to use "documentGetElementById" and the "innerHTML" property, to illustrate their use.
Have fun!
Examine the code I have below, which is what you're trying to achieve, I think. I have removed the "var" keyword, making those objects global in scope.
I've also modified the "changetext" function to use "documentGetElementById" and the "innerHTML" property, to illustrate their use.
Have fun!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html> <!--HTML Transitional Javascript Test Page-->
<!--Header Information-->
<head>
<!--Page's Title-->
<title>Test Page</title>
<!--CSS Styling Information-->
<style>
/*Class Specific Styling Information*/
div#navbar
{
background-color: #00FF00;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
}
div#navLinks
{
float: left;
}
div#linkDescriptions
{
background-color: #FFFF88;
margin: 10px 10px 10px 10px;
width: 100%;
}
</style>
<!--Scripting Information-->
<script type="text/javascript">
//Create the Link Descriptions div.
function createdescription()
{
navbar = document.getElementById('navbar')
linkDescriptions = document.createElement('div');
linkDescriptions_textNode =
document.createTextNode('Hover over a menu for a description.');
linkDescriptions.id = "linkDescriptions";
linkDescriptions.appendChild(linkDescriptions_textNode);
navbar.appendChild(linkDescriptions);
}
function changetext()
{
document.getElementById("linkDescriptions").innerHTML = "Test.";
}
</script>
</head>
<!--Body Information-->
<body onload="createdescription();">
<div id="navbar">
<div id="navLinks">
<p>
<a href="#" onmouseover="changetext();">Main</a>
</p>
</div>
</div>
</body>
</html> |
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
Linear Mode
- Javascript links not working (Web Browsers)
- JavaScript's window.opener (JavaScript / DHTML / AJAX)
- recommendations for JavaScript learning resources? (JavaScript / DHTML / AJAX)
- Javascript/HTML problem!!! (JavaScript / DHTML / AJAX)
- Javascript Useful? (IT Careers and Business)
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: Drag and Drop
- Next Thread: How to get the link that was clicked even after the page gets refreshed
