JS or CSS? onclick problem...

**deschnell** · 27-02-2009 09:22 PM

I have a menu (image based):

Code:

<ul>
            
                <li class="inactive" id="lib"><a href="test-tour/java_only.html" target="tour5" onclick="document.getElementById('headimg').src='images/libertyplan.png';this.className='active';document.getElementById('brk').className='inactive';document.getElementById('arl').className='inactive';document.getElementById('fre').className='inactive';"><span>The Liberty</span></a></li>
                <li class="inactive" id="brk"><a href="test-tour/java_only.html" target="tour5" onclick="document.getElementById('headimg').src='images/brooklynplan.png';this.className='active';document.getElementById('lib').className='inactive';document.getElementById('arl').className='inactive';document.getElementById('fre').className='inactive';"><span>The Brooklyn</span></a></li>
                <li class="inactive" id="arl"><a href="test-tour/java_only.html" target="tour5" onclick="document.getElementById('headimg').src='images/arlingtonplan.png';this.className='active';document.getElementById('lib').className='inactive';document.getElementById('brk').className='inactive';document.getElementById('fre').className='inactive';"><span>The Arlington</span></a></li>
                <li class="inactive" id="fre"><a href="test-tour/java_only.html" target="tour5" onclick="document.getElementById('headimg').src='images/freemontplan.png';this.className='active';document.getElementById('lib').className='inactive';document.getElementById('brk').className='inactive';document.getElementById('arl').className='inactive';"><span>The Freemont</span></a></li>
            </ul>

The client doesn't want any page reloading. So each click loads different content into an iframe (currently using same src). At the same time change the class of each link button to identify which is active.
I can get the active class to change, but I'm struggling with "resetting" the other buttons with the same onclick event back to an original 'inactive' class.

The onclick event also loads a header image related to the frame content.

What am I doing wrong? Or is there an easier way to do this? I'm not much of a javascripter.

**iandevlin** · 28-02-2009 10:36 AM

It might help if you post the rest of the code too, i.e. the div's etc. it is referring to and trying to change.

**Scriptage** · 28-02-2009 11:05 AM

For a start you really don't want to use iframes, iframes are unsupported in strict html / xhtml (the document types you should be using for production code). You should use AJAX:

Code:

<!DOCTYPE html 
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JS</title>
<style type="text/css">
.active{
background-color: red;
color: white;
}
.inactive{
background-color: green;
color: yellow;
}
#cframe{
width: 500px;
height: 500px;
}
</style>
<script type="text/javascript">
/* <![CDATA[ */
function GetRequestObject(){
   var XMLHttp;
   /*@cc_on
    @if (@_jscript_version >= 5)
    try {
      XMLHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        XMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {
        XMLHttp = false;
      }
    }
   @else
   XMLHttp = false;
   @end @*/
   if (!XMLHttp && typeof XMLHttpRequest != 'undefined') {
    try {
      XMLHttp = new XMLHttpRequest();
    } catch (e) {
      XMLHttp = false;
    }
   }
   return XMLHttp;
}
 
function Page(Source, HeaderFile, ID){
if(!window['GPList']){
window['GPList'] = new Array();
}
this.Source = Source;
this.HeaderFile = HeaderFile;
this.Self = document.getElementById(ID);
this.Active = function(Bool){
   if(Bool){
   this.Self.className = 'active';
   this.Self.firstChild.className = 'active';
   document.getElementById('headimg').src = this.HeaderFile;
   Request = GetRequestObject();
   if(!Request){
   return true;
   }
   Request.open("GET", this.Source ,true);
 
   Request.onreadystatechange = function(){
   if(Request.readystate == 4){ // Successfully sent
 
   var File = Request.responseText.substring(Request.responseText.indexOf('<body>'), Request.responseText.indexOf('</body>')+7);    
 
   document.getElementById("content").innerHTML = File;
 
   }
   };
 
Request.send(null);
 
   }else{
   this.Self.className = 'inactive';
   this.Self.firstChild.className = 'inactive';
 
   }
 
}
window['GPList'].push(this);
return this;
}
function LoadPage(Obj){
var ID = Obj.parentNode.id;
   for(var i=0; i<GPList.length; i++){
 
      if(GPList[i].Self.id == ID){
      GPList[i].Active(1);
      }else{
      GPList[i].Active(0);
      }
   }
return false;
}
/* ]]> */
</script>
</head>
<body>
<div id="header">
   <img id="headimg" src="default.jpg" alt="Page Heading" />
</div>
<div id="links">
<ul>
    <li class="inactive" id="lib">
      <a href="libertyplan.html" onclick="LoadPage(this); return false">The Liberty</a>
    </li>
    <li class="inactive" id="brk">
      <a href="brooklynplan.html" onclick="LoadPage(this); return false;">The Brooklyn</a>
    </li>
</ul>
</div>
<div id="content">
</div>
<script type="text/javascript">
new Page('libertyplan.html', 'images/libertyplan.png', 'lib');
new Page('brooklynplan.html', 'images/brooklynplan.png', 'brk');
</script>
</body>
</html>

**deschnell** · 28-02-2009 02:54 PM

That ajax is over my head...
I'll see if I can figure it out a little before I implement it (don't like copy n pasting just for the sake of a feature without understanding, at least a little).

here's the site in question:
The Brooklyn

I didn't know that iFrames weren't standard in strict - I'll have to decide whether to fall back, or change all together.

FWIW
(just got safari 4 beta, testing it out... seems ok so far, don't like the chrome-like tabs at the top.. (on MBP/Leopard).

**deschnell** · 28-02-2009 03:23 PM

just out of curiosity, can anybody pick out why, in theory anyway, what I have in the first post isn't working?

**Scriptage** · 28-02-2009 06:12 PM

this.parentNode.className='active'

Seriously though, using iframes is totally inaccessible, if you want I can modify the code I posted and check it for cross browser issues etc.

**deschnell** · 02-03-2009 04:13 PM

Hi Scriptage,

Something's not working/(or me) with this script. Obviously I still don't understand xmlhttprequest to make it work. The effect I was after with the menu buttons/classname changes is working perfectly (thanks), but the iframe equivalent isn't there. Not sure what I messed up. The desired (for now) content in that dynamic div/frame is at ./test-tour/java-only.html (created also a javatour.html without the full html page structure - just the body - no difference though). If you can see what the problem is, that would be super.

Also, if you could point me to the best example/explanation of xmlhttprequest, that would be super.

loklomedia.com/testing/tyler/ajaxtest.html - JS Example iframe/xmlhttprequest

**jameson** · 02-03-2009 07:11 PM

Before you get too far into the world of ajax and xmlhttprequests, I think you should just use jQuery. I recently designed this site using the jQuery 'show' and 'hide' functions to do what you're trying to do, and it was really pretty easy. As an example, here's the code I'm using behind one of my buttons:

Code:

$('a#shots_button').click(function(event){  $('#rundown').hide();
  $('#grind').hide();
  $('#branding').hide();
  $('#projects').hide();
  $('#contact').hide();
  $('#shots').fadeIn("slow");

Write similar code for each button on your page and you'll be all set.

**deschnell** · 02-03-2009 07:14 PM

time limit says I'll be sticking with iframe.
thanks.

**Scriptage** · 02-03-2009 10:17 PM

Hey bud, this is where I went wrong:

HTML Code:

<!DOCTYPE html 
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JS</title>
<style type="text/css">
.active{
background-color: red;
color: white;
}
.inactive{
background-color: green;
color: yellow;
}
#cframe{
width: 500px;
height: 500px;
}
</style>
<script type="text/javascript">
/* <![CDATA[ */
function GetRequestObject(){
   var XMLHttp;
   /*@cc_on
    @if (@_jscript_version >= 5)
    try {
      XMLHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        XMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {
        XMLHttp = false;
      }
    }
   @else
   XMLHttp = false;
   @end @*/
   if (!XMLHttp && typeof XMLHttpRequest != 'undefined') {
    try {
      XMLHttp = new XMLHttpRequest();
    } catch (e) {
      XMLHttp = false;
    }
   }
   return XMLHttp;
}
 
function Page(Source, HeaderFile, ID){
if(!window['GPList']){
window['GPList'] = new Array();
}
this.Source = Source;
this.HeaderFile = HeaderFile;
this.Self = document.getElementById(ID);
this.Active = function(Bool){
   if(Bool){
   this.Self.className = 'active';
   this.Self.firstChild.className = 'active';
   document.getElementById('headimg').src = this.HeaderFile;
   Request = GetRequestObject();

   if(!Request){

   window.location.href = this.Self.getElementsByTagName('a')[0].href;
   }

   Request.open("GET", this.Source ,true);
 
   Request.onreadystatechange = function(){

   if(Request.readystate == 4 || Request.readyState == 4){ // Successfully sent

   var File = Request.responseText.substring(Request.responseText.indexOf('<body>'), Request.responseText.indexOf('</body>')+7);    

   document.getElementById("content").innerHTML = File;
 
   }
   };
 
Request.send(null);
 
   }else{
   this.Self.className = 'inactive';
   this.Self.firstChild.className = 'inactive';
 
   }
 
}
window['GPList'].push(this);
return this;
}
function LoadPage(Obj){

var ID = Obj.parentNode.id;
   for(var i=0; i<GPList.length; i++){
 
      if(GPList[i].Self.id == ID){
      GPList[i].Active(1);
      }else{
      GPList[i].Active(0);
      }
   }
return false;
}
/* ]]> */
</script>
</head>
<body>
<div id="header">
   <img id="headimg" src="default.jpg" alt="Page Heading" />
</div>
<div id="links">
<ul>
    <li class="inactive" id="lib">
      <a href="libertyplan.html" onclick="LoadPage(this); return false">The Liberty</a>
    </li>
    <li class="inactive" id="brk">
      <a href="brooklynplan.html" onclick="LoadPage(this); return false;">The Brooklyn</a>
    </li>
</ul>
</div>
<div id="content">
</div>
<script type="text/javascript">
new Page('libertyplan.html', 'images/libertyplan.png', 'lib');
new Page('brooklynplan.html', 'images/brooklynplan.png', 'brk');
</script>
</body>
</html>

Firefox has the property readyState whereas it is readystate in IE. The code above will work cross browser.

I'll try to post an AJAX tutorial at some point.

Regards

Carl

Thread: JS or CSS? onclick problem...

LinkBack

Thread Tools

Display

JS or CSS? onclick problem...

Similar Threads

Problem with IE6

problem with the css , help please

Problem with IE

IE.. problem

CSS / IE 6 -- what's the problem?

Bookmarks

Bookmarks

Posting Permissions