Field Type > separator

Hi Dave,

It would be for the separators which are used to separate the fields in the editor of page.
Thus, it would be easier to work with the page where there are several fields.

In the example (separator.gif), the separators Content, Gallery and Advanced Options.

Thanks,

Djulia

Hi Djulia,

Ok, I understand. I think that might be possible if you used a separator field with "Separator Type" of "HTML" and put the right code on there.

If you saved a copy of the editor page and figured out how to do it in plain html first it would be easier. The edit fields are in a table and you'd probably need to end and start the table and put divs around it. With separator html something like this:

</table>
</div>

<div class="accordian">
<table border="0" cellspacing="1" cellpadding="1" width="100%">

And you'd need a few of them so certain fields groups were surrounded by a div.

I've never done it myself but I've seen others do it so I know it's possible. If you can figure it out in a plain html file first (save a copy of the edit form and work with that as plain html) then you can figure out what to add to make it work through separator html fields.

Hope that helps!

Hi Dave,

Thank you for your answer.

Finally, I used another accordion compatible with jquery.js :
http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/

That functions correctly (accordion.gif). [:)]

There are just minor problems with Firefox (iframe.gif).
(I think that it is with the iframe and that it would be possible to correct with the css).

Thanks,

Djulia


P.s. : I do not know if one is authorized to communicate the code of the admin files on the forum. Also, if somebody wants the code, it can ask me.

1) To add in "/CMS/lib/menus/header.php"

<link rel="stylesheet" href="css/accordion.css" type="text/css" media="screen" />

2) To download "arrow-square.gif" and "accordion.css" in "css/"

3) To add in "/CMS/lib/menus/default/edit.php"

line 23:

<script language="JavaScript" type="text/javascript">


$(document).ready(function(){

$(".accordion h3:first").addClass("active");
$(".accordion blockquote:not(:first)").hide();

$(".accordion h3").click(function(){
$(this).next("blockquote").slideToggle("slow")
.siblings("blockquote:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});

});


</script>

line 61:
<div class="accordion">

line 70:
</blockquote>

line 83:
</div> :

4) Add Separator Type HTML

separator 1:

</table>
<h3>Element for metadata</h3>
<blockquote>
<table border="0" cellspacing="1" cellpadding="1" width="100%">

separator 2:

</table>
</blockquote>
<h3>Content and Gallery</h3>
<blockquote>
<table border="0" cellspacing="1" cellpadding="1" width="100%">

separator 3:

</table>
</blockquote>
<h3>Other data</h3>
<blockquote>
<table border="0" cellspacing="1" cellpadding="1" width="100%">

(...)

Great, thanks for sharing your code! :)

Thanks Djulia! That's going to help me out a lot on my next project.

Were you able to sort out the FF+CSS issues you mentioned?

J.

Hi J,

[font "Verdana"]> Were you able to sort out the FF+CSS issues you mentioned ?
Yes, you must give a value to iframe (height: 200px;).

Here my file css ( [font "Verdana"]accordion.css ).

I also modified my approach in the file edit.php ( after <div class="divider_line"></div> ) :

<div class="accordion">
<table border="0" cellspacing="0" cellpadding="5" width="100%" id="editForm"><tr><td>
<h3>Element for metadata</h3>
<blockquote>
<table border="0" cellspacing="1" cellpadding="1" width="100%">

<?php showFields() ?>

</table>
</blockquote>
</td></tr></table>
</div>

...and separator :

</table>
</blockquote>
<h3>Content and Gallery</h3>
<blockquote>
<table border="0" cellspacing="1" cellpadding="1" width="100%">

Thanks to share your experiment !

Djulia

Great! Thanks kindly for sharing your findings!

J.