Solved

use dom to change body id tag

Posted on 2006-11-27
8
536 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
  • 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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 350 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

911 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now