[TheGame240]

I've created an administrative page and used the tab browsing method shown here. Now the problem I'm having is that I need to integrate ckeditor into some of the tabs.

Using their instructions for integration, the editor will work in a standard PHP/HTML page. But in the tabbed page, all I was getting was a standard textarea and a submit button. I thought something might be wrong with my echo statements in the content generator, but after trying them in a straight PHP script, they work fine. I've come to the conclusion that the editor isn't showing up because the Javascript doesn't execute in the tabbed environment. I tested by adding a double click event that will call the ckeditor script. This will work in the tabbed page, but isn't any kind of solution.

Basically I have two scripts. One replaces div content when a new tab is clicked. The other is to create the editor instance. The script to create the editor instance isn't being called after the first script replaces the div content even though there is a script call being generated. I'm guessing that it has something to do with the scripts only being processed on the initial page load since the exact same calls will work in a standard page.

What I need is a way to make the ckeditor script run when the appropriate tabs are selected. To further complicate the matter, the ckeditor script has to be run after the textarea, p, etc it's replacing is generated.

[petteyg359]

Try calling the ck script in an onfocus in its div.

EDIT: The tabbing setup you've linked isn't generally accepted as best practice. Just have each tab in a div, and have the javascript change the style display attribute.

Code:

<div id="menu"><a href="#" onclick="tab(1);">Tab1</a> | <a href="#" onclick="tab(2);">Tab2</a> | <a href="#" onclick="tab(3);">Tab3</a></div>
<div id="tab1">Content1</div>
<div id="tab2">Content2</div>
<div id="tab3">Content3</div>
<script type="text/javascript">
<!--
numTabs = 3;
function hideAll() {
 for (i = 0; i < numTabs; i++) { document.getElementById("tab"+i).style.display = "none"; }
}
function tab(n) {
 hideAll();
 document.getElementById("tab"+n).style.display = "";
}
tab(1);
-->
</script>

The tab(1); at the last script line will make sure only tab1 is displaying when the page is loaded, if javascript is enabled. You'll need some CSS work to make all the tabs show up in the same spot, but you get separation of logic and content.

[elxx]

Man if I were you, I'd just use a premade tabbing system out of jquery. I really can't imagine why you'd use straight javascript over a framework.

http://jqueryui.com/themeroller/ <---that would be pretty quick. Or you can google one someone else made which would work just as well.

[petteyg359]

Originally Posted by elxx

I really can't imagine why you'd use straight javascript over a framework.

I can quite easily imagine why someone might do such a thing. Sometimes all you need is some simple tabbing, and a few hundred bytes of simple tabbing code is enough. Why spend 24KiB bandwidth when 240B will do just fine?

[elxx]

Originally Posted by petteyg359

I can quite easily imagine why someone might do such a thing. Sometimes all you need is some simple tabbing, and a few hundred bytes of simple tabbing code is enough. Why spend 24KiB bandwidth when 240B will do just fine?

Productivity. Use a framework and save yourself a half hour. Now days its all about how quickly you can crank out a project/app. Bandwidth is rarely a limiting factor.

[petteyg359]

Originally Posted by elxx

Productivity. Use a framework and save yourself a half hour. Now days its all about how quickly you can crank out a project/app. Bandwidth is rarely a limiting factor.

For something simple like tabs where only a few lines of code are required, you're not saving any time at all. It takes just as much time to read and figure out how the library does it. You're arguing that one should use a heavy duty wet/dry "shop vac" with 18 attachments for some spilled flour on the counter, when a wet rag will do just fine.