Programming Forums - Need Help with Problem using Javascript with I-Frame and CSS

Programming Forums (http://www.programmingforums.org/forumindex.php)

- JavaScript and Client-Side Browser Scripting (http://www.programmingforums.org/forum23.html)

- - Need Help with Problem using Javascript with I-Frame and CSS (http://www.programmingforums.org/showthread.php?t=12128)

Need Help with Problem using Javascript with I-Frame and CSS

I am designing an I-frame interface that uses both CSS and Javascript, and I am having some serious problems. I looked at the tutorial found here to base my I-Frame structure on: http://www.brainjar.com/css/tabs/. I built a page here, http://triplefm.com/iframe_test3.html, however, I am having three problems:

1.The Z-Index is not moving the active tab forward and the others backward. Why isn't the Z-Index moving the active tab to the front, so it is actually "in front" of the I-frame border?

2. Is there a way that each of those windows can retain information so when they are clicked, and information you put in there will still be there when you click back? For instance, if I fill out a form field on New Dealers, when I click tab 3 (MSN) and leave New Dealers for a second, when I return to Tab 1 (if I do not navigate away in the first Tab), how can I ensure the information I typed will still be there? Would that be more of a php echo function or can I use javascript to handle it?

3. The first 2 tabs remain in the hover state when they are active, (which is what I want to happen) but the second and third do not...why?

You can see the CSS in my source code. Thanks so much for all the help thus far with this crazy project. You guys are great! I couldn�t have come this far without your guidance. Living in Northeast Arkansas, there are no good colleges or web professionals in the area to mentor me in my endeavors, thankfully there are many out there on the internet willing to help me and answer my questions so I can follow my passion and get better at programming. Thank you.

Quote:

Originally Posted by ccarter1971 (Post 120777)

1.The Z-Index is not moving the active tab forward and the others backward. Why isn't the Z-Index moving the active tab to the front, so it is actually "in front" of the I-frame border?

It is in front, at least in Firefox. The reason it doesn't appear to be in front is simply that the tab doesn't overlap with the iframe. Move the tab down one pixel, from 1px to 2px:

a.tab { top: 2px }

Quote:

Originally Posted by ccarter1971 (Post 120777)

2. Is there a way that each of those windows can retain information so when they are clicked, and information you put in there will still be there when you click back? For instance, if I fill out a form field on New Dealers, when I click tab 3 (MSN) and leave New Dealers for a second, when I return to Tab 1 (if I do not navigate away in the first Tab), how can I ensure the information I typed will still be there? Would that be more of a php echo function or can I use javascript to handle it?

You could use four different iframes, and hide every one but the active iframe. That should ensure no data is lost.

Quote:

Originally Posted by ccarter1971 (Post 120777)

3. The first 2 tabs remain in the hover state when they are active, (which is what I want to happen) but the second and third do not...why?

Because no javascript is triggered for them. It took me a while to work out why it was triggered for Google, but that's because you direct the frame to google.html, and call the javascript from there. With the other pages, you call them directly.

You're making this harder than it needs to be, I suspect. First of all, create 4 frames, one for each tab. Put some CSS in so that all of them are "display: none", except for the initial frame. Then stick those frames in an array, getting them either by ID or through window.frames. Then make a function that looks something like:

function showFrame(frame) {

    for (var i = 0; i < allFrames.length; i++) {

        if (frame != allFrames[i])

           frame.style.display = "none";

        else

           frame.style.display = "block";

    }

}

I'm unsure whether frames can be treated as elements. I suspect they can, but if not, wrap them in a block.

Also, you may want to download Prototype. It's a very popular library that extends the standard Javascript library into something a lot more useful.