Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

HELP MODIFING WORKING SCRIPT

Status
Not open for further replies.
DOMINO06

DOMINO06

IS-IT--Management
Joined
May 19, 2006
Messages
6
Location
US
I have a working script that opens each table when clicked on. I want to have the tables open when the page loads for the first time. Currently the tables are hidden when the page loads for the first time. The script uses cookies to remember tables position. Can any help with this?

The current working script is below:


!--
function clickHandler() {
var targetId, srcElement, targetElement, srcId;
if (window.event) srcElement = window.event.srcElement;
else srcElement = clickHandler.arguments[0].target;
if (srcElement.className == "Outline") {
srcId = srcElement.id
if (srcElement.tagName.toLowerCase() == "img")
srcId = srcId.substr(0,srcElement.id.length-1);
targetId = srcId + "d";
if (document.getElementById) targetElement = document.getElementById(targetId);
else if (document.all) targetElement = document.all(targetId);
else return;
if (targetElement.style.display == "none") {
targetElement.style.display = "";
document.images(srcId + "i").src = "images/print.gif";
setCookie( targetId, "show" );
} else {
targetElement.style.display = "none";
document.images(srcId + "i").src = "images/print.gif";
setCookie( targetId, "none" );
}
}
}

function setCookie(name, value) {
document.cookie = name + "=" + escape(value);
}
function readtree() {
var dc = document.cookie;
if (dc.length > 0) {
ca = dc.split(";");
for ( c in ca ) {
mid = ca[c].indexOf("=");
if (ca[c].charAt(0) == " ") targetId = ca[c].substring(1,mid);
else targetId = ca[c].substring(0,mid);
if ( targetId.substr(0,3) != "Out") continue;
val = ca[c].substr(mid+1,4);
if (document.getElementById) targetElement = document.getElementById(targetId);
else if (document.all) targetElement = document.all(targetId);
else return;
if (val == "show") {
targetElement.style.display = "";
document.images(targetId.substr(0,targetId.length-1)+"i").src = "images/print.gif";
}
}
}
}
document.onclick = clickHandler;
//-->
</script>


------------------------------------------------------


<body onload="readtree();">
<div id="Out0d">
<dl>
<dt><span id="Out1" class="Outline" style="cursor: hand"><img src="images/print.gif" alt="print" width="19" height="18" hspace="4" class="Outline" id="Out1i" />WHAT EVER</span></dt>
<dd>
<div id="Out1d" style="display:None;">
<dl>
<dt><TABLE>

</TABLE>
</dt>
</dl>
</div>
</dd>
 
Sort by date Sort by votes
This has the desired effect, but, when I make that change, every time the page refreshes the tables are all visable again.
 
Upvote 0 Downvote
Your readtree function is supposed to be reading the cookies and setting the hidden state for the tables isnt it?
It executes onload so if it is not hiding the appropriate tables then there is something wrong with the writing of the cookies or reading them and then setting the tables hidden.

I do not think this line will work:
targetElement.style.display = "";

I think you need to specify none or hidden.

It's hard to think outside the box when I'm trapped in a cubicle.
 
Upvote 0 Downvote
The cookies work properly if I leave the code to the original code. If I load the page before any cookies have been set, the default for the tables is to hide the tables. I have changed the display=""; and the onload and everything I know how to change, with no luck. Did you try using the code?
 
Upvote 0 Downvote
I have not tried the code myself.

You can set the form back to hiding all the tables by default, so that on first load all tables are hidden, then alter your readtree function so that it will show the correct tables instead of hiding them. Since it runs in the onload event already this should take care of the problem.



It's hard to think outside the box when I'm trapped in a cubicle.
 
Upvote 0 Downvote
I'm not sure how to modify the readtree function. Could you be more specific?
 
Upvote 0 Downvote
I tried your code here and it works in IE but not in Firefox.
You are using document.getElementById and document.all methods and probably do not need to. document.getElementById should cover all major browsers for you.

The reason Firefox is not working with the current code is that you set your images with doucment.images(...... which is not supported in Firefox. Use getElementById to get the image object just like the table object then set it's properties and it will work in both browsers.


It's hard to think outside the box when I'm trapped in a cubicle.
 
Upvote 0 Downvote
Firefox is not an issue since this is being used on a company intranet and IE is the only browser. Could you be more specific on how to modify the readtree function that you mentioned earlier? This thing is frustrating me to no end! By the way, thank you for your help so far.
 
Upvote 0 Downvote
Try these functions instead.
I stripped out the testing for document.all and document.getElementById since all DOM compatible browsers support document.getElementById and the old code did not work under Firefox. This code should work under both with the exception that non-IE browsers do not like the cursor style Hand.
I set inline and none values as appropriate for the hiding and showing of the tables. You could use block rather than inline if you wanted, depending on how you setup your page.
I also converted the image toggles to use document.getElementById as well to keep the code consistent and allow cross-browser compatibility. It's just a better way to do things even if you only support IE because it is the standards compliant method and will give you less future trouble as well as making it easier to support.

I am sure the code could be streamlined more but I was just concerned with getting it working.
I used a new variable targetImage for the toggling of the images. Note though that your images do not actually toggle in your clickHandler function, both states are the same thing.

Code: 
function clickHandler() {
  var targetId, targetImage, srcElement, targetElement, srcId;
  if (window.event) srcElement = window.event.srcElement;
  else srcElement = clickHandler.arguments[0].target;
  if (srcElement.className == "Outline") {
    srcId = srcElement.id
    if (srcElement.tagName.toLowerCase() == "img")
      srcId = srcId.substr(0,srcElement.id.length-1);
    targetId = srcId + "d";
    targetElement = document.getElementById(targetId);
    targetImage = document.getElementById(srcId + "i");
    if (targetElement.style.display == "none") {
      targetElement.style.display = "inline";
      targetImage.src = "images/print.gif";
      setCookie( targetId, "show" );
    } else {
      targetElement.style.display = "none";
      targetImage.src = "images/print.gif";
      setCookie( targetId, "none" );
    }
  }
}


function setCookie(name, value) {
  document.cookie = name + "=" + escape(value);
}


function readtree() {
  var dc = document.cookie;
  if (dc.length > 0) {
    ca = dc.split(";");
    for ( c in ca ) {
      mid = ca[c].indexOf("=");
      if (ca[c].charAt(0) == " ") targetId = ca[c].substring(1,mid);
      else targetId = ca[c].substring(0,mid);
        if ( targetId.substr(0,3) != "Out") continue;
      val = ca[c].substr(mid+1,4);
      targetElement = document.getElementById(targetId);
      targetImage = targetId.substr(0,targetId.length-1)+"i";
      if (val == "show") {
        targetElement.style.display = "inline";
        targetImage.src = "images/print.gif";
      }
    }
  }
}
document.onclick = clickHandler;

It's hard to think outside the box when I'm trapped in a cubicle.
 
Upvote 0 Downvote
Great! It works as far as the tables. That was my big issue. Thanks alot for your help. I should be able to figure out the images.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

MDGarcia
  • Locked
  • Question Question
Java script blocked due to MIME type error
Replies
2
Views
2K
MDGarcia
MDGarcia
markronz
  • Locked
  • Question Question
Javascript to edit all script tags
Replies
2
Views
483
feherke
feherke
JPSeo
  • Locked
  • Question Question
How to pass var to the shell script
Replies
1
Views
336
JPSeo
JPSeo
tonynsx
  • Locked
  • Question Question
document.getElementById(&quot;main&quot;).innerHTML not working
Replies
1
Views
374
ggriffit
ggriffit
HansMaulwurf
  • Locked
  • Question Question
AJAX not working after database migration from MySQL to SQL Server ( Undefined index)
Replies
0
Views
414
HansMaulwurf
HansMaulwurf

Part and Inventory Search

Sponsor

Back
Top