0

Hi there,

I need to do a few things onclick, but I'm having problems.
1. Swap divs onclick of a text link in a list (found a script for this)
2. Change the font color of the text link that is active, then change back to normal color when another text link is clicked. (found a script for this too)

Even though I found separate scripts for each, I'm not smart enough to trouble shoot the conflicts when you put them on the same page. I can get one or the other working, but not sure how to combine them....??? I will paste the scripts below.

(swap div onclick)
[
function reveal(det){
if(!document.getElementById) return;
if (!document.getElementsByClassName){
document.getElementsByClassName = function(cn){
cn = cn.replace(/ +/g, ' ').split(' ');
var ar = [], testname = function(n){
for (var re, i = cn.length - 1; i > -1; --i){
re = new RegExp('(^|\W)' + cn + '(\W|$)');
if(!re.test(n)) return false;
}
return true;
}
for(var d = document.all || document.getElementsByTagName('*'), i = 0; i < d.length; ++i)
if(testname(d.className))
ar[ar.length] = d;
return ar;
};
document.getElementsByClassName.spoof = true;
}
for (var d = document.getElementsByClassName('detail'), i = d.length - 1; i > -1; --i)
d.style.display = 'none';
document.getElementById(det).style.display = 'block';
if (document.getElementsByClassName.spoof)
document.getElementsByClassName.spoof = document.getElementsByClassName = null;
}
}
</script>
]
(html tags for above script)
<div id="triggers">
<div onclick="reveal('meet');">
<a id="nav-btn" href="#"><span class="nav-hide">Meet the Team</span></a>
</div>
<div onclick="reveal('news');">
<a id="nav-btn" href="#"><span class="nav-hide">Team News</span></a>
</div>
<div onclick="reveal('schedule');">
<a id="nav-btn" href="#"><span class="nav-hide">2010 Schedule</span></a>
</div></div>

(change font color onclick and back, only one item highlighted at a time)
[
window.onload=function () { setStyles(); };
if (document.addEventListener)

function setStyles() {
ids = new Array('header1','header2','header3');
for (i=0;i<ids.length;i++) {
document.getElementById(ids).className='menu_head2';
document.getElementById(ids).onclick=function() { return CngClass(this); }
}

function CngClass(obj){
var currObj;
for (i=0;i<ids.length;i++) {
currObj = document.getElementById(ids);
if (obj.id == currObj.id) {
currObj.className=(currObj.className=='menu_head2')?'menu_head2_active':'menu_head2';
}
else { currObj.className='menu_head2'; }
}
return false;
}
]
(html tags for above code)
<p><a href="#" id="header1" class="menu_head2">Meet the Team</a></p>
<p><a href="#" id="header2" class="menu_head2">Team News</a></p>
<p><a href="#" id="header3" class="menu_head2">2010 Schedule</a></p>

4
Contributors
10
Replies
11
Views
7 Years
Discussion Span
Last Post by macgurl70
0

Please use code tag (look at the [ code ] in front of your code and [ /code ] at the end (no white space inside, but I put them in just to by pass it).

Anyway, for your first part, you do NOT need to do it as complicated as the code you found. Assume that the display rely on CSS, if you want to swap div, you could easily use DOM to obtain each of those div, and then swap class name. However, adding ID would be much easier work than trying to go through all tags to find correct class name.

For your second part, where is the CSS part for your second code? It looks like you need to declare CSS class for display. Also, it does not change 2 objects at the same time. It does change only 1 object you passed in.

Sorry, your requirement for both parts aren't really clear. Could you give a better example? These codes don't really serve your purpose.

0

Thanks for your reply! Hmmm kinda sounds like I should start over. I don't think I'm smart enough to figure this out though. Here's a link of what I have so far.
http://tangyracing.tangydesign.com/#

I need to figure out how to make the active text link a different color, then change back...
The text menu links (on left) will swap a div (on right) onclick, at the same time the text link color should change (active). When another text menu link is clicked, that text link color changes to the active color and the previously clicked text link goes back to normal color.

0

From your link, it looks like it could succeed your #1 without using div swapping. So what div swapping would you want to see? Do you want to replace the current viewing (onclick) to swapping?

For #2, it will be a bit more difficult because you use CSS object (use ID) for buttons. As a result, all 'a' tags which are your buttons have the same ID. I don't think that dynamically change object ID (in order to change style) is a good idea. You may have to rewrite this part.

The CSS below is in your styles.css file. The problem with this is that it does not know which button has been clicked before. If you add 'active' to the 'a' tag, you could succeed only the button color change when active, but you can't get rid of the button which has been clicked before (even though the color will change back once it is hovered over).

/*button hover*/
a#nav-btn {
  display: block;
  text-decoration: none;
  width: 181px;
  height: 36px;
  margin: 0 auto;
}
a#nav-btn:hover {
  background-image:url(images/btn.jpg);
}
#nav-btn img {
  border: 0;
}

One way to do is to change your navigation buttons to real 'div' with the same background image. You could use 'onmouseover' and 'onmouseout' events to swap background images in order to imitate the same behavior. Then, give a name to all button for each 'a' tag, do not use ID. If all buttons have the same name, you can take advantage of DOM to obtain all buttons at once by calling getElementsByName('a_name'), and then go through each button to clear the link style if it is not active.

If you do not know how to rewrite your code, please let me know. I will get back to you again.

Edited by Taywin: n/a

0

Well, here I am, the dangerous newbie to the forums - but looking at your code, I did notice a few things.

In the html, you have given all the buttons the same Id

<div id="triggers">
<div onclick="reveal('meet');">
<a id="nav-btn" href="#"><span class="nav-hide">Meet the Team</span></a>
</div>
<div onclick="reveal('news');">
<a id="nav-btn" href="#"><span class="nav-hide">Team News</span></a>
</div>
<div onclick="reveal('schedule');">

<a id="nav-btn" href="#"><span class="nav-hide">2010 Schedule</span></a>
</div>
<div onclick="reveal('photos');">
<a id="nav-btn" href="#"><span class="nav-hide">Photos</span></a>
</div>
<div onclick="reveal('contact');">
<a id="nav-btn" href="#"><span class="nav-hide">Contact Us</span></a>
</div>
<div onclick="reveal('about');">
<a id="nav-btn" href="#"><span class="nav-hide">About Us</span></a>
</div>

And to me - it still seems rather complicated. My suggestion is to use you .css document a bit more (and I know this throws it out of the javascript area - but to me this is easier).

#triggers {
 position: relative;
 top: 143px;
 left: -20px;
 width: 180px;
 background: none;
 color: #909295;
 margin: 0px;
 padding: 0px;
}

/*button hover*/
a#nav-btn {
display: block;
text-decoration: none;
width: 181px;
height: 36px;
margin: 0 auto;
}
a#nav-btn:hover {
background-image:url(images/btn.jpg);
}

The #triggers being the div containing the links - but again the issue becomes each button having the same id - which throws the code off. My suggestion is:

#triggers {
 position: relative;
 top: 143px;
 left: -20px;
 width: 180px;
 color: #909295;
 margin: 0px;
 padding: 0px;
}

#triggers li a{
  text-decoration:none;
  color:#909295;
  background-image:url(images/yourbutton.jpg);
}

#triggers li a:hover{
  text-decoration:none;
  color:#ffffff;
  background-image:url(images/thebutton.jpg);
}

and the HTML would have the links in a unordered list

<div id="triggers">
<ul>
<li><a href="#" onClick="teamPics();">Meet the Team</a></li>
<li><a href="#" onClick="teamNews();">Team News</a></li>
<li><a href="#" onClick="schedulePics();">2010 Schedule</a></li>
<li><a href="#" onClick="nicePics();">Photos</a></li>
<li><a href="#" onClick="findusPics();">Contact Us</a></li>
<li><a href="#" onClick="aboutPics();">About Us</a></li>
</ul>
</div>

for the onClick to change the images - you could have hidden divs and then the onClick would hide and show the appropriate ones.

you could also do the replaceChild also if you wanted to keep them the same name.

But, hiding and showing the divs idea here:

function aboutPics(){
   document.getElementById('schedule').style.display='none';
   document.getElementById('contact').style.display='none';
   document.getElementById('about').style.display='block';
   document.getElementbyId('photos).style.display='none';
}

Just an idea - it avoids the id issue with the buttons (you will have to play with the padding/positioning of the list. I didn't test the images) and makes it easier to do the changing of the main images too.

As for the slide show - I'm not that dangerous yet. (be afraid)

Edited by mike_2000_17: Fixed formatting

0

Thank you so much for the review and suggestions! I will take a look at it and try to implement all this.
:)

1

You can set onclick="doSwap(this)" on each element (so they all invoke the same function).

That single function doSwap(that){} cycles through the elements of interest, setting each associated color to 'default' and each associated <div> to display:none. Then the special color and display:block can be set for (that) one.

This doesn't take much code. I just posted a demo http://www.daniweb.com/forums/post1271933.html#post1271933 in a nearby thread which uses this approach (for <span>s, but the idea is the same).

Adding an id= to the clickable elements might simplify the logic in other situations, but (as you can see from my example) for this it isn't needed at all.

Votes + Comments
I really like that script format, thank you very much.
0

@fxm, I really like the idea of that script - it would have saved me a ton of work on one proposal for a web page and the coding involved. Hopefully I am asking this in the right place - trying to understand the application of the code format there. (if not let me know and I promise to not make the mistake again :3 )

Now, I am seeing the html code like this

<div id="triggers">
   <ul>
   <li> <a href ="#" value="meet" onClick="doSwap(this);">Meet the Team</a></li>
   <li> <a href="#" value="news" onClick="doSwap(this);">Team News</a></li>
   <li> <a href="#" value="schedule" onClick="doSwap(this);">2010 Schedule</a></li>
   <li> <a href="#" value="photos" onClick="doSwap(this);">Photos</a></li>
   <li> <a href="#" value="contact" onClick="doSwap(this);">Contact Us</a></li>
   <li> <a href="#" value="about" onClick="doSwap(this);">About Us</a></li>
   </ul>
</div>
<div id="changingText">
   <div id="intro" class="copyText">Intro Text Here</div>
   <div id="meet" class="copyText2">Text Here</div>
   <div id="news" class="copyText2">Text Here</div>
   <div id="schedule" class="copyText2">Text Here</div>
   <div id="photos" class="copyText2">Text Here</div>
   <div id="contact" class="copyText2">Text Here</div>
   <div id="about" class="copyText2">Text Here</div>
</div>

The copyText2 divs will be hidden per the CSS style sheet

#triggers {
 position: relative;
 top: 143px;
 left: -20px;
 width: 180px;
 color: #909295;
 margin: 0px;
 padding: 0px;
}

#triggers li a{
  text-decoration:none;
  color:#909295;
  background-image:url(images/yourbutton.jpg);
}

#triggers li a:hover{
  text-decoration:none;
  color:#ffffff;
  background-image:url(images/thebutton.jpg);
}

.copyText {
   display:block;
   color:#000000;
}

.copyText2 {
   display:none;
   color:#000000;
}

Didn't do any styling for the copyText classes - trying to make sure I understand this concept a bit better.

and, I am hoping (crossing fingers) I understand the Javascript for it

function doSwap(){
   var newLink = document.getElementsByTagName('li');
   for (i=0, i<newLink.length, i++) {
      newLink[i].style.color="white";
      var chooseOne = newLink[i].value;
      var showText = document.getElementById('changingText').getElementsByTagName('div');
      var copyCompare = showText[i].firstChild.id;
      if (copyCompare == chooseOne){
         showText[i].style.display="block";
         } else if (copyCompare != chooseOne) {
            showText[i].style.display="none";
         }
      }
   }
}

If this works the way I think it does - it would make the switching so much easier since it would evaluate values and you wouldn't have to rewrite code every time you added or changed the number of divs. Just have to make sure the id matches up with the link value.

So, no matter how the content was updated or changed - this script could still manage the information.

0

Hopefully I am asking this in the right place

You should have started a new thread. Be that as it may...

In my style, your function would look more like

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
    <title></title>
    <script type="text/javascript">

function doSwap(that) {

    var cAs = document.getElementById('triggers').getElementsByTagName('a');

    for (j = cAs.length, i = 0; i < j; i++) {

        oDiv = document.getElementById(cAs[i].title)
        if (cAs[i] === that) {
            cAs[i].parentNode.style.color = 'red'
            oDiv.style.display = 'block'
        } else {
            cAs[i].parentNode.style.color = 'blue'
            oDiv.style.display = 'none'
        }
    }
}
    </script>
  </head>
  <body onload="doSwap()">
    <div id="triggers">
      <ul>
        <li>
          <a title="meet" href="#" onclick="doSwap(this);">Meet the
          Team</a>
        </li>
        <li>
          <a title="news" href="#" onclick="doSwap(this);">Team
          News</a>
        </li>
        <li>
          <a title="schedule" href="#" onclick="doSwap(this);">2010
          Schedule</a>
        </li>
        <li>
          <a title="photos" href="#" onclick=
          "doSwap(this);">Photos</a>
        </li>
        <li>
          <a title="contact" href="#" onclick=
          "doSwap(this);">Contact Us</a>
        </li>
        <li>
          <a title="about" href="#" onclick="doSwap(this);">About
          Us</a>
        </li>
      </ul>
    </div>
    <div id="changingText">
      <div id="intro" class="copyText">
        Intro Text Here
      </div>
      <div id="meet" class="copyText2">
        Meet Text Here
      </div>
      <div id="news" class="copyText2">
        News Text Here
      </div>
      <div id="schedule" class="copyText2">
        Schedule Text Here
      </div>
      <div id="photos" class="copyText2">
        Photos Text Here
      </div>
      <div id="contact" class="copyText2">
        Contact Text Here
      </div>
      <div id="about" class="copyText2">
        About Text Here
      </div>
    </div>
  </body>
</html>

Note: I fixed some small problems:
I didn't follow your code all that well, but I don't think you were taking advantage of
the calling parm
you made a table of LIs instead of As [a problem because the way you coded the HTML,
(this) will point to an <a>]
that change in turn meant that a .parentNode is needed to refer to the containing <li>
I added an onload= call to toggle off <div>s [except for 'intro', which you apparently
intend to leave on all the time] and set the colors to default

BTW: a lot could be done by manipulating classes but that approach can lead to a morass of cross-browser compatibility issues.

Incidentally, it isn't clear to me why you used <a>s at all - but I didn't bother to test the CSS.

Edited by fxm: n/a

0

I used the <a>'s because I understand them better right now - but now I see where you were going.

hopefully something similar will be what the op was looking for.

And thank you for the answer - Ill be more careful how and where I post.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.