Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

use dom to change body id tag

Posted on 2006-11-27
8
Medium Priority
?
549 Views
Last Modified: 2013-11-19
Hey folks,

I've got a simple gallery page which currently uses getAttribute and getElementById to take the [link] title text and place it into an id [description]. Yes, I lifted this code from the Friends of Ed book.

My goal is, when the user clicks a link, to show "active" state by changing the body ID text to whatever is the link title text (in combination with a little cascading ID selector action). I'm honestly not even sure this will work. If someone else has an more practical idea, I'm open. I just think it would be cool to be able to ID the active link without the page having to reload.

Right now, the description.firstChild.nodeValue = text; literally replaces the body id with text, which simply appears on the page.

Anyhow, any help or ideas are greatly appreciated.

Sam

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />

  <script type="text/javascript">
   function showPic(whichpic) {
        var source = whichpic.getAttribute("href");
        var placeholder = document.getElementById("placeholder");
        placeholder.setAttribute("src",source);
        var text = whichpic.getAttribute("title");
        var description = document.getElementById("description");
        description.firstChild.nodeValue = text;
}
  </script>

</head>
<body id="description">

  <ul>
    <li id="fireworks"><a href="images/fireworks.jpg" id="linkfireworks" title="fireworks" onclick="showPic(this); return false;">Fireworks</a></li>
    <li id="coffee"><a href="images/coffee.jpg" id="linkcoffee" title="coffee" onclick="showPic(this); return false;">Coffee</a></li>
    <li id="rose"><a href="images/rose.jpg" id="linkrose" title="rose" onclick="showPic(this); return false;">Rose</a></li>
    <li id="bigben"><a href="images/bigben.jpg" id="linkbigben" title="bigben" onclick="showPic(this); return false;">Big Ben</a></li>
  </ul>
  <img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
</body>
</html>
0
Comment
Question by:mullagatawny
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
  • 2
8 Comments
 
LVL 23

Expert Comment

by:rama_krishna580
ID: 18025283
0
 

Author Comment

by:mullagatawny
ID: 18025298
Hi R.A,

Thanks for the note. I try not to use IFRAMES when I can help it. Unless, of course you are referring to another point on this page? In this example, the onclick=showPic(this); works well as far as swapping the images without refreshing the page.

- Sa
0
 
LVL 6

Expert Comment

by:aescnt
ID: 18026135
Here's how to change the body tag's ID:
document.body.id = "foo";

;)
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 6

Expert Comment

by:aescnt
ID: 18026141
Btw, I'm not quite sure how rama_krishna580's link can help you, it seems totally unrelated to the question.
0
 
LVL 23

Expert Comment

by:rama_krishna580
ID: 18028348
@aescnt ; >>>> it seems totally unrelated to the question
 
did you read the whole article...?
anyway i will go with asker, its his/her final choice to choose the correct answer.

it is EE's policy to let the question asker pick the most helpful solution, but I beileve experts are also obliged to understand the problem, and post helpful comments. (http://www.experts-exchange.com/help.jsp#hs4)

R.K
0
 
LVL 6

Expert Comment

by:aescnt
ID: 18028545
Rama Krishna: Yes, I did... and I don't think the question has anything to do with AJAX, or asynchronous calls via IFrame, or cookies, or PHP. I did find a small line buried in the code that goes "rDiv.id = 'remotingDiv'" which is similar to the solution I proposed, although it's used on a dynamically created element, and wasn't pointed out by the article, or you.

I also tried understood the asker's problem to the best of my ability, and tried to be helpful by posting a straight-forward response.
0
 

Author Comment

by:mullagatawny
ID: 18028998
Just to defuse, I appreciate any attempt, from any user, regardless of it's usefullness. It really comes down to how well I pose my question. In this case, I still do not have the answer I am looking for, although I appreciate the reference as to how to identify the body id using DOM.

Regarding document.body.id = "foo"; do either of you know how I may replace "foo" dynamically using the following?

var text = whichpic.getAttribute("title");
var description = document.getElementById("description");
description.firstChild.nodeValue = text;

--> document.body.id = "foo";

0
 
LVL 6

Accepted Solution

by:
aescnt earned 1400 total points
ID: 18029040
First of all I apologize if I came of harsh on my comments. Anyway, are you trying to change the ID of `description`? if so then it's:
    description.id = text;
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

650 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question