CSS would not be enough for this because myform.js calls FoxInCloud.pgfMake() which adjusts the tabs' .width and .left to accommodate either a justified or non-justified layout;
as xxx.js executes before myform.js (which may be wrong, we'll think about this to maybe let xxx.js execute after myform.js, just like xxx.css executes after awDefault*.css),
the only way to override what FoxInCloud.pgfMake() does is to implement in xxx.js some code similar to what FoxInCloud.pgfMake() does, together with a css rotation:
#myPgf .page.awpag.pageTab {transform: rotate(-90deg);}
$(document).ready(function(){ /* prototype.js syntax - could be made similarly for jQuery*//
$$('#myPgf .page.awpag.pageTab').each(...);
});
conclusion: my feeling is that is too hard a shot for a specific implementation - maybe better waiting for an official implementation
my concern is: how to support IE8? e.g. always place tabs on the top for IE8, just in JavaScript because the server generates HTML and CSS for all browsers.
Speaking of fancy CSS, FiC does not seem to support tabs on the side of the pageframe. Any idea on some fancy CSS class?
-- thn (FoxInCloud)
Yes, for now FiC only supports tabs on the top of pageFrame, just because side tabs requires HTML5 and not all browsers support HTML5, especially IE8 that FiC still supports.
CSS would not be enough for this because myform.js calls FoxInCloud.pgfMake() which adjusts the tabs' .width and .left to accommodate either a justified or non-justified layout;
as xxx.js executes before myform.js (which may be wrong, we'll think about this to maybe let xxx.js execute after myform.js, just like xxx.css executes after awDefault*.css),
the only way to override what FoxInCloud.pgfMake() does is to implement in xxx.js some code similar to what FoxInCloud.pgfMake() does, together with a css rotation:
#myPgf .page.awpag.pageTab {transform: rotate(-90deg);}
$(document).ready(function(){ /* prototype.js syntax - could be made similarly for jQuery*//
$$('#myPgf .page.awpag.pageTab').each(...);
});
conclusion: my feeling is that is too hard a shot for a specific implementation - maybe better waiting for an official implementation
my concern is: how to support IE8? e.g. always place tabs on the top for IE8, just in JavaScript because the server generates HTML and CSS for all browsers.
Speaking of fancy CSS, FiC does not seem to support tabs on the side of the pageframe. Any idea on some fancy CSS class?
I do not care about the rotating, just the positioning along the side. I have adjusted tabs and their left/right, but I cannot get them stacked.
Yes, for now FiC only supports tabs on the top of pageFrame, just because side tabs requires HTML5 and not all browsers support HTML5, especially IE8 that FiC still supports.
CSS would not be enough for this because myform.js calls FoxInCloud.pgfMake() which adjusts the tabs' .width and .left to accommodate either a justified or non-justified layout;
as xxx.js executes before myform.js (which may be wrong, we'll think about this to maybe let xxx.js execute after myform.js, just like xxx.css executes after awDefault*.css),
the only way to override what FoxInCloud.pgfMake() does is to implement in xxx.js some code similar to what FoxInCloud.pgfMake() does, together with a css rotation:
#myPgf .page.awpag.pageTab {transform: rotate(-90deg);}
$(document).ready(function(){ /* prototype.js syntax - could be made similarly for jQuery*//
$$('#myPgf .page.awpag.pageTab').each(...);
});
conclusion: my feeling is that is too hard a shot for a specific implementation - maybe better waiting for an official implementation
my concern is: how to support IE8? e.g. always place tabs on the top for IE8, just in JavaScript because the server generates HTML and CSS for all browsers.
Speaking of fancy CSS, FiC does not seem to support tabs on the side of the pageframe. Any idea on some fancy CSS class?
-- thn (FoxInCloud)
I'll take you thru the whole process. We have a pageframe inside a pageframe. Initially it looks like this:
Then we add to the xxx.css
div[id*='tow1_scx-pgfmain-'][id*='_tab']:not([id*="pgftow"]) {background-image:url("images/blank.png")!important;
background-repeat:no-repeat!important;
background-size:100% 100%!important;
width:115px!important;
border-style:none!important;
}
div[id*='tow1_scx-pgfmain-'][id*='_tab'][disabled="disabled"] {
color:grey!important;
}#tow1_scx-pgfmain-pagintake_tab {left:125px!important}
#tow1_scx-pgfmain-pagredeem_tab {left:250px!important}
#tow1_scx-pgfmain-pagmessages_tab {left:375px!important}
#tow1_scx-pgfmain-pagvehicles_tab {left:125px!important}
#tow1_scx-pgfmain-page6_tab {left:625px!important}
#tow1_scx-pgfmain-page7_tab {left:750px!important}
#tow1_scx-pgfmain-page8_tab {left:875px!important}
#tow1_scx-pgfmain-page9_tab {left:1000px!important}
#tow1_scx-pgfmain-page10_tab {left:1125px!important}
That gives us:
Now the problem starts. I want to move the inside pageframe tabs as well. If I just move the left, like this:
#tow1_scx-pgfmain-pagcalls-pgftows-pagcall_tab {left:40px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagvehicle_tab {left:80px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagpickup_tab {left:120px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdrop_tab {left:160px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdocuments_tab {left:200px!important}
That works fine. So I tried stacking the inner tabs like this:
#tow1_scx-pgfmain-pagcalls-pgftows-pagcall_tab {top:40px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagvehicle_tab {top:80px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagpickup_tab {top:120px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdrop_tab {top:160px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdocuments_tab {top:200px}
And I got this:
I tried every variation of display: css command, but it made no difference. The outer pageframe DOES respond to top:, but the inner pageframe does not.
can you post code and screenshot of what you get?
I do not care about the rotating, just the positioning along the side. I have adjusted tabs and their left/right, but I cannot get them stacked.
Yes, for now FiC only supports tabs on the top of pageFrame, just because side tabs requires HTML5 and not all browsers support HTML5, especially IE8 that FiC still supports.
CSS would not be enough for this because myform.js calls FoxInCloud.pgfMake() which adjusts the tabs' .width and .left to accommodate either a justified or non-justified layout;
as xxx.js executes before myform.js (which may be wrong, we'll think about this to maybe let xxx.js execute after myform.js, just like xxx.css executes after awDefault*.css),
the only way to override what FoxInCloud.pgfMake() does is to implement in xxx.js some code similar to what FoxInCloud.pgfMake() does, together with a css rotation:
#myPgf .page.awpag.pageTab {transform: rotate(-90deg);}
$(document).ready(function(){ /* prototype.js syntax - could be made similarly for jQuery*//
$$('#myPgf .page.awpag.pageTab').each(...);
});
conclusion: my feeling is that is too hard a shot for a specific implementation - maybe better waiting for an official implementation
my concern is: how to support IE8? e.g. always place tabs on the top for IE8, just in JavaScript because the server generates HTML and CSS for all browsers.
Speaking of fancy CSS, FiC does not seem to support tabs on the side of the pageframe. Any idea on some fancy CSS class?
No way to do that in css for now, even using css3 flex you can't automatically adjust .width to get tabs justified.
So this requires a JavaScript workaround, and executing xxx.js after form.js;
can you post some screenshot of what you want as a result?
Summary: on a pageframe within a pageframs, the tabs do not respond on the inner pageframe to the "top:" css command the same way the outer pagefram does.
I'll take you thru the whole process. We have a pageframe inside a pageframe. Initially it looks like this:
Then we add to the xxx.css
div[id*='tow1_scx-pgfmain-'][id*='_tab']:not([id*="pgftow"]) {background-image:url("images/blank.png")!important;
background-repeat:no-repeat!important;
background-size:100% 100%!important;
width:115px!important;
border-style:none!important;
}
div[id*='tow1_scx-pgfmain-'][id*='_tab'][disabled="disabled"] {
color:grey!important;
}#tow1_scx-pgfmain-pagintake_tab {left:125px!important}
#tow1_scx-pgfmain-pagredeem_tab {left:250px!important}
#tow1_scx-pgfmain-pagmessages_tab {left:375px!important}
#tow1_scx-pgfmain-pagvehicles_tab {left:125px!important}
#tow1_scx-pgfmain-page6_tab {left:625px!important}
#tow1_scx-pgfmain-page7_tab {left:750px!important}
#tow1_scx-pgfmain-page8_tab {left:875px!important}
#tow1_scx-pgfmain-page9_tab {left:1000px!important}
#tow1_scx-pgfmain-page10_tab {left:1125px!important}
That gives us:
Now the problem starts. I want to move the inside pageframe tabs as well. If I just move the left, like this:
#tow1_scx-pgfmain-pagcalls-pgftows-pagcall_tab {left:40px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagvehicle_tab {left:80px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagpickup_tab {left:120px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdrop_tab {left:160px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdocuments_tab {left:200px!important}
That works fine. So I tried stacking the inner tabs like this:
#tow1_scx-pgfmain-pagcalls-pgftows-pagcall_tab {top:40px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagvehicle_tab {top:80px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagpickup_tab {top:120px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdrop_tab {top:160px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdocuments_tab {top:200px}
And I got this:
I tried every variation of display: css command, but it made no difference. The outer pageframe DOES respond to top:, but the inner pageframe does not.
can you post code and screenshot of what you get?
I do not care about the rotating, just the positioning along the side. I have adjusted tabs and their left/right, but I cannot get them stacked.
Yes, for now FiC only supports tabs on the top of pageFrame, just because side tabs requires HTML5 and not all browsers support HTML5, especially IE8 that FiC still supports.
CSS would not be enough for this because myform.js calls FoxInCloud.pgfMake() which adjusts the tabs' .width and .left to accommodate either a justified or non-justified layout;
as xxx.js executes before myform.js (which may be wrong, we'll think about this to maybe let xxx.js execute after myform.js, just like xxx.css executes after awDefault*.css),
the only way to override what FoxInCloud.pgfMake() does is to implement in xxx.js some code similar to what FoxInCloud.pgfMake() does, together with a css rotation:
#myPgf .page.awpag.pageTab {transform: rotate(-90deg);}
$(document).ready(function(){ /* prototype.js syntax - could be made similarly for jQuery*//
$$('#myPgf .page.awpag.pageTab').each(...);
});
conclusion: my feeling is that is too hard a shot for a specific implementation - maybe better waiting for an official implementation
my concern is: how to support IE8? e.g. always place tabs on the top for IE8, just in JavaScript because the server generates HTML and CSS for all browsers.
Speaking of fancy CSS, FiC does not seem to support tabs on the side of the pageframe. Any idea on some fancy CSS class?
-- thn (FoxInCloud)
What you see is due to FoxInCloud.pgfMake(): changes the .left and .width of page tabs for justification
No way to do that in css for now, even using css3 flex you can't automatically adjust .width to get tabs justified.
So this requires a JavaScript workaround, and executing xxx.js after form.js;
can you post some screenshot of what you want as a result?
Summary: on a pageframe within a pageframs, the tabs do not respond on the inner pageframe to the "top:" css command the same way the outer pagefram does.
I'll take you thru the whole process. We have a pageframe inside a pageframe. Initially it looks like this:
Then we add to the xxx.css
div[id*='tow1_scx-pgfmain-'][id*='_tab']:not([id*="pgftow"]) {background-image:url("images/blank.png")!important;
background-repeat:no-repeat!important;
background-size:100% 100%!important;
width:115px!important;
border-style:none!important;
}
div[id*='tow1_scx-pgfmain-'][id*='_tab'][disabled="disabled"] {
color:grey!important;
}#tow1_scx-pgfmain-pagintake_tab {left:125px!important}
#tow1_scx-pgfmain-pagredeem_tab {left:250px!important}
#tow1_scx-pgfmain-pagmessages_tab {left:375px!important}
#tow1_scx-pgfmain-pagvehicles_tab {left:125px!important}
#tow1_scx-pgfmain-page6_tab {left:625px!important}
#tow1_scx-pgfmain-page7_tab {left:750px!important}
#tow1_scx-pgfmain-page8_tab {left:875px!important}
#tow1_scx-pgfmain-page9_tab {left:1000px!important}
#tow1_scx-pgfmain-page10_tab {left:1125px!important}
That gives us:
Now the problem starts. I want to move the inside pageframe tabs as well. If I just move the left, like this:
#tow1_scx-pgfmain-pagcalls-pgftows-pagcall_tab {left:40px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagvehicle_tab {left:80px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagpickup_tab {left:120px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdrop_tab {left:160px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdocuments_tab {left:200px!important}
That works fine. So I tried stacking the inner tabs like this:
#tow1_scx-pgfmain-pagcalls-pgftows-pagcall_tab {top:40px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagvehicle_tab {top:80px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagpickup_tab {top:120px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdrop_tab {top:160px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdocuments_tab {top:200px}
And I got this:
I tried every variation of display: css command, but it made no difference. The outer pageframe DOES respond to top:, but the inner pageframe does not.
can you post code and screenshot of what you get?
I do not care about the rotating, just the positioning along the side. I have adjusted tabs and their left/right, but I cannot get them stacked.
Yes, for now FiC only supports tabs on the top of pageFrame, just because side tabs requires HTML5 and not all browsers support HTML5, especially IE8 that FiC still supports.
CSS would not be enough for this because myform.js calls FoxInCloud.pgfMake() which adjusts the tabs' .width and .left to accommodate either a justified or non-justified layout;
as xxx.js executes before myform.js (which may be wrong, we'll think about this to maybe let xxx.js execute after myform.js, just like xxx.css executes after awDefault*.css),
the only way to override what FoxInCloud.pgfMake() does is to implement in xxx.js some code similar to what FoxInCloud.pgfMake() does, together with a css rotation:
#myPgf .page.awpag.pageTab {transform: rotate(-90deg);}
$(document).ready(function(){ /* prototype.js syntax - could be made similarly for jQuery*//
$$('#myPgf .page.awpag.pageTab').each(...);
});
conclusion: my feeling is that is too hard a shot for a specific implementation - maybe better waiting for an official implementation
my concern is: how to support IE8? e.g. always place tabs on the top for IE8, just in JavaScript because the server generates HTML and CSS for all browsers.
Speaking of fancy CSS, FiC does not seem to support tabs on the side of the pageframe. Any idea on some fancy CSS class?
We need to implement other tabs positioning schemes such as the one you're looking at (though out of VFP support), and support all values of .tabOrientation, .tabStyle and .tabJustify (for now we support .tabOrientation = 0 and all values of .tabJustify)
Something like this:
What you see is due to FoxInCloud.pgfMake(): changes the .left and .width of page tabs for justification
No way to do that in css for now, even using css3 flex you can't automatically adjust .width to get tabs justified.
So this requires a JavaScript workaround, and executing xxx.js after form.js;
can you post some screenshot of what you want as a result?
Summary: on a pageframe within a pageframs, the tabs do not respond on the inner pageframe to the "top:" css command the same way the outer pagefram does.
I'll take you thru the whole process. We have a pageframe inside a pageframe. Initially it looks like this:
Then we add to the xxx.css
div[id*='tow1_scx-pgfmain-'][id*='_tab']:not([id*="pgftow"]) {background-image:url("images/blank.png")!important;
background-repeat:no-repeat!important;
background-size:100% 100%!important;
width:115px!important;
border-style:none!important;
}
div[id*='tow1_scx-pgfmain-'][id*='_tab'][disabled="disabled"] {
color:grey!important;
}#tow1_scx-pgfmain-pagintake_tab {left:125px!important}
#tow1_scx-pgfmain-pagredeem_tab {left:250px!important}
#tow1_scx-pgfmain-pagmessages_tab {left:375px!important}
#tow1_scx-pgfmain-pagvehicles_tab {left:125px!important}
#tow1_scx-pgfmain-page6_tab {left:625px!important}
#tow1_scx-pgfmain-page7_tab {left:750px!important}
#tow1_scx-pgfmain-page8_tab {left:875px!important}
#tow1_scx-pgfmain-page9_tab {left:1000px!important}
#tow1_scx-pgfmain-page10_tab {left:1125px!important}
That gives us:
Now the problem starts. I want to move the inside pageframe tabs as well. If I just move the left, like this:
#tow1_scx-pgfmain-pagcalls-pgftows-pagcall_tab {left:40px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagvehicle_tab {left:80px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagpickup_tab {left:120px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdrop_tab {left:160px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdocuments_tab {left:200px!important}
That works fine. So I tried stacking the inner tabs like this:
#tow1_scx-pgfmain-pagcalls-pgftows-pagcall_tab {top:40px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagvehicle_tab {top:80px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagpickup_tab {top:120px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdrop_tab {top:160px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdocuments_tab {top:200px}
And I got this:
I tried every variation of display: css command, but it made no difference. The outer pageframe DOES respond to top:, but the inner pageframe does not.
can you post code and screenshot of what you get?
I do not care about the rotating, just the positioning along the side. I have adjusted tabs and their left/right, but I cannot get them stacked.
Yes, for now FiC only supports tabs on the top of pageFrame, just because side tabs requires HTML5 and not all browsers support HTML5, especially IE8 that FiC still supports.
CSS would not be enough for this because myform.js calls FoxInCloud.pgfMake() which adjusts the tabs' .width and .left to accommodate either a justified or non-justified layout;
as xxx.js executes before myform.js (which may be wrong, we'll think about this to maybe let xxx.js execute after myform.js, just like xxx.css executes after awDefault*.css),
the only way to override what FoxInCloud.pgfMake() does is to implement in xxx.js some code similar to what FoxInCloud.pgfMake() does, together with a css rotation:
#myPgf .page.awpag.pageTab {transform: rotate(-90deg);}
$(document).ready(function(){ /* prototype.js syntax - could be made similarly for jQuery*//
$$('#myPgf .page.awpag.pageTab').each(...);
});
conclusion: my feeling is that is too hard a shot for a specific implementation - maybe better waiting for an official implementation
my concern is: how to support IE8? e.g. always place tabs on the top for IE8, just in JavaScript because the server generates HTML and CSS for all browsers.
Speaking of fancy CSS, FiC does not seem to support tabs on the side of the pageframe. Any idea on some fancy CSS class?
-- thn (FoxInCloud)
OK, after some tests on http://foxincloud.com/tutotest/, it appears that FoxInCloud.pgfMake() does so much that it seems very difficult to override anything here.
We need to implement other tabs positioning schemes such as the one you're looking at (though out of VFP support), and support all values of .tabOrientation, .tabStyle and .tabJustify (for now we support .tabOrientation = 0 and all values of .tabJustify)
Something like this:
What you see is due to FoxInCloud.pgfMake(): changes the .left and .width of page tabs for justification
No way to do that in css for now, even using css3 flex you can't automatically adjust .width to get tabs justified.
So this requires a JavaScript workaround, and executing xxx.js after form.js;
can you post some screenshot of what you want as a result?
Summary: on a pageframe within a pageframs, the tabs do not respond on the inner pageframe to the "top:" css command the same way the outer pagefram does.
I'll take you thru the whole process. We have a pageframe inside a pageframe. Initially it looks like this:
Then we add to the xxx.css
div[id*='tow1_scx-pgfmain-'][id*='_tab']:not([id*="pgftow"]) {background-image:url("images/blank.png")!important;
background-repeat:no-repeat!important;
background-size:100% 100%!important;
width:115px!important;
border-style:none!important;
}
div[id*='tow1_scx-pgfmain-'][id*='_tab'][disabled="disabled"] {
color:grey!important;
}#tow1_scx-pgfmain-pagintake_tab {left:125px!important}
#tow1_scx-pgfmain-pagredeem_tab {left:250px!important}
#tow1_scx-pgfmain-pagmessages_tab {left:375px!important}
#tow1_scx-pgfmain-pagvehicles_tab {left:125px!important}
#tow1_scx-pgfmain-page6_tab {left:625px!important}
#tow1_scx-pgfmain-page7_tab {left:750px!important}
#tow1_scx-pgfmain-page8_tab {left:875px!important}
#tow1_scx-pgfmain-page9_tab {left:1000px!important}
#tow1_scx-pgfmain-page10_tab {left:1125px!important}
That gives us:
Now the problem starts. I want to move the inside pageframe tabs as well. If I just move the left, like this:
#tow1_scx-pgfmain-pagcalls-pgftows-pagcall_tab {left:40px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagvehicle_tab {left:80px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagpickup_tab {left:120px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdrop_tab {left:160px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdocuments_tab {left:200px!important}
That works fine. So I tried stacking the inner tabs like this:
#tow1_scx-pgfmain-pagcalls-pgftows-pagcall_tab {top:40px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagvehicle_tab {top:80px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagpickup_tab {top:120px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdrop_tab {top:160px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdocuments_tab {top:200px}
And I got this:
I tried every variation of display: css command, but it made no difference. The outer pageframe DOES respond to top:, but the inner pageframe does not.
can you post code and screenshot of what you get?
I do not care about the rotating, just the positioning along the side. I have adjusted tabs and their left/right, but I cannot get them stacked.
Yes, for now FiC only supports tabs on the top of pageFrame, just because side tabs requires HTML5 and not all browsers support HTML5, especially IE8 that FiC still supports.
CSS would not be enough for this because myform.js calls FoxInCloud.pgfMake() which adjusts the tabs' .width and .left to accommodate either a justified or non-justified layout;
as xxx.js executes before myform.js (which may be wrong, we'll think about this to maybe let xxx.js execute after myform.js, just like xxx.css executes after awDefault*.css),
the only way to override what FoxInCloud.pgfMake() does is to implement in xxx.js some code similar to what FoxInCloud.pgfMake() does, together with a css rotation:
#myPgf .page.awpag.pageTab {transform: rotate(-90deg);}
$(document).ready(function(){ /* prototype.js syntax - could be made similarly for jQuery*//
$$('#myPgf .page.awpag.pageTab').each(...);
});
conclusion: my feeling is that is too hard a shot for a specific implementation - maybe better waiting for an official implementation
my concern is: how to support IE8? e.g. always place tabs on the top for IE8, just in JavaScript because the server generates HTML and CSS for all browsers.
Speaking of fancy CSS, FiC does not seem to support tabs on the side of the pageframe. Any idea on some fancy CSS class?
OK, after some tests on http://foxincloud.com/tutotest/, it appears that FoxInCloud.pgfMake() does so much that it seems very difficult to override anything here.
We need to implement other tabs positioning schemes such as the one you're looking at (though out of VFP support), and support all values of .tabOrientation, .tabStyle and .tabJustify (for now we support .tabOrientation = 0 and all values of .tabJustify)
Something like this:
What you see is due to FoxInCloud.pgfMake(): changes the .left and .width of page tabs for justification
No way to do that in css for now, even using css3 flex you can't automatically adjust .width to get tabs justified.
So this requires a JavaScript workaround, and executing xxx.js after form.js;
can you post some screenshot of what you want as a result?
Summary: on a pageframe within a pageframs, the tabs do not respond on the inner pageframe to the "top:" css command the same way the outer pagefram does.
I'll take you thru the whole process. We have a pageframe inside a pageframe. Initially it looks like this:
Then we add to the xxx.css
div[id*='tow1_scx-pgfmain-'][id*='_tab']:not([id*="pgftow"]) {background-image:url("images/blank.png")!important;
background-repeat:no-repeat!important;
background-size:100% 100%!important;
width:115px!important;
border-style:none!important;
}
div[id*='tow1_scx-pgfmain-'][id*='_tab'][disabled="disabled"] {
color:grey!important;
}#tow1_scx-pgfmain-pagintake_tab {left:125px!important}
#tow1_scx-pgfmain-pagredeem_tab {left:250px!important}
#tow1_scx-pgfmain-pagmessages_tab {left:375px!important}
#tow1_scx-pgfmain-pagvehicles_tab {left:125px!important}
#tow1_scx-pgfmain-page6_tab {left:625px!important}
#tow1_scx-pgfmain-page7_tab {left:750px!important}
#tow1_scx-pgfmain-page8_tab {left:875px!important}
#tow1_scx-pgfmain-page9_tab {left:1000px!important}
#tow1_scx-pgfmain-page10_tab {left:1125px!important}
That gives us:
Now the problem starts. I want to move the inside pageframe tabs as well. If I just move the left, like this:
#tow1_scx-pgfmain-pagcalls-pgftows-pagcall_tab {left:40px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagvehicle_tab {left:80px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagpickup_tab {left:120px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdrop_tab {left:160px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdocuments_tab {left:200px!important}
That works fine. So I tried stacking the inner tabs like this:
#tow1_scx-pgfmain-pagcalls-pgftows-pagcall_tab {top:40px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagvehicle_tab {top:80px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagpickup_tab {top:120px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdrop_tab {top:160px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdocuments_tab {top:200px}
And I got this:
I tried every variation of display: css command, but it made no difference. The outer pageframe DOES respond to top:, but the inner pageframe does not.
can you post code and screenshot of what you get?
I do not care about the rotating, just the positioning along the side. I have adjusted tabs and their left/right, but I cannot get them stacked.
Yes, for now FiC only supports tabs on the top of pageFrame, just because side tabs requires HTML5 and not all browsers support HTML5, especially IE8 that FiC still supports.
CSS would not be enough for this because myform.js calls FoxInCloud.pgfMake() which adjusts the tabs' .width and .left to accommodate either a justified or non-justified layout;
as xxx.js executes before myform.js (which may be wrong, we'll think about this to maybe let xxx.js execute after myform.js, just like xxx.css executes after awDefault*.css),
the only way to override what FoxInCloud.pgfMake() does is to implement in xxx.js some code similar to what FoxInCloud.pgfMake() does, together with a css rotation:
#myPgf .page.awpag.pageTab {transform: rotate(-90deg);}
$(document).ready(function(){ /* prototype.js syntax - could be made similarly for jQuery*//
$$('#myPgf .page.awpag.pageTab').each(...);
});
conclusion: my feeling is that is too hard a shot for a specific implementation - maybe better waiting for an official implementation
my concern is: how to support IE8? e.g. always place tabs on the top for IE8, just in JavaScript because the server generates HTML and CSS for all browsers.
Speaking of fancy CSS, FiC does not seem to support tabs on the side of the pageframe. Any idea on some fancy CSS class?
$('tabID').observe('click', function(event){$('pageFrameID').tabClick(event);}); // prototype.js syntax
jQuery('#tabID').click(function(event){$('pageFrameID').tabClick(event);}); // jQuery syntax, you could also use a .class selector to assign .click() to all tabs at once
I'll just use no tabs and put buttons on the side, and in each .Click I will activate the page needed.
-- thn (FoxInCloud)
This reminds me that in the early ages of FoxInCloud we have compared ActiveWidget and dHTMLx grids, and chose ActiveWidget.
At that time (2006), dHTMLx was quite poor and difficult to use.
Same story as for Prototype.js and jQuery, Windows and Mac - the early starters are not always the winners
I would rather have support for dhtmlxAccordion.
OK, after some tests on http://foxincloud.com/tutotest/, it appears that FoxInCloud.pgfMake() does so much that it seems very difficult to override anything here.
We need to implement other tabs positioning schemes such as the one you're looking at (though out of VFP support), and support all values of .tabOrientation, .tabStyle and .tabJustify (for now we support .tabOrientation = 0 and all values of .tabJustify)
Something like this:
What you see is due to FoxInCloud.pgfMake(): changes the .left and .width of page tabs for justification
No way to do that in css for now, even using css3 flex you can't automatically adjust .width to get tabs justified.
So this requires a JavaScript workaround, and executing xxx.js after form.js;
can you post some screenshot of what you want as a result?
Summary: on a pageframe within a pageframs, the tabs do not respond on the inner pageframe to the "top:" css command the same way the outer pagefram does.
I'll take you thru the whole process. We have a pageframe inside a pageframe. Initially it looks like this:
Then we add to the xxx.css
div[id*='tow1_scx-pgfmain-'][id*='_tab']:not([id*="pgftow"]) {background-image:url("images/blank.png")!important;
background-repeat:no-repeat!important;
background-size:100% 100%!important;
width:115px!important;
border-style:none!important;
}
div[id*='tow1_scx-pgfmain-'][id*='_tab'][disabled="disabled"] {
color:grey!important;
}#tow1_scx-pgfmain-pagintake_tab {left:125px!important}
#tow1_scx-pgfmain-pagredeem_tab {left:250px!important}
#tow1_scx-pgfmain-pagmessages_tab {left:375px!important}
#tow1_scx-pgfmain-pagvehicles_tab {left:125px!important}
#tow1_scx-pgfmain-page6_tab {left:625px!important}
#tow1_scx-pgfmain-page7_tab {left:750px!important}
#tow1_scx-pgfmain-page8_tab {left:875px!important}
#tow1_scx-pgfmain-page9_tab {left:1000px!important}
#tow1_scx-pgfmain-page10_tab {left:1125px!important}
That gives us:
Now the problem starts. I want to move the inside pageframe tabs as well. If I just move the left, like this:
#tow1_scx-pgfmain-pagcalls-pgftows-pagcall_tab {left:40px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagvehicle_tab {left:80px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagpickup_tab {left:120px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdrop_tab {left:160px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdocuments_tab {left:200px!important}
That works fine. So I tried stacking the inner tabs like this:
#tow1_scx-pgfmain-pagcalls-pgftows-pagcall_tab {top:40px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagvehicle_tab {top:80px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagpickup_tab {top:120px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdrop_tab {top:160px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdocuments_tab {top:200px}
And I got this:
I tried every variation of display: css command, but it made no difference. The outer pageframe DOES respond to top:, but the inner pageframe does not.
can you post code and screenshot of what you get?
I do not care about the rotating, just the positioning along the side. I have adjusted tabs and their left/right, but I cannot get them stacked.
Yes, for now FiC only supports tabs on the top of pageFrame, just because side tabs requires HTML5 and not all browsers support HTML5, especially IE8 that FiC still supports.
CSS would not be enough for this because myform.js calls FoxInCloud.pgfMake() which adjusts the tabs' .width and .left to accommodate either a justified or non-justified layout;
as xxx.js executes before myform.js (which may be wrong, we'll think about this to maybe let xxx.js execute after myform.js, just like xxx.css executes after awDefault*.css),
the only way to override what FoxInCloud.pgfMake() does is to implement in xxx.js some code similar to what FoxInCloud.pgfMake() does, together with a css rotation:
#myPgf .page.awpag.pageTab {transform: rotate(-90deg);}
$(document).ready(function(){ /* prototype.js syntax - could be made similarly for jQuery*//
$$('#myPgf .page.awpag.pageTab').each(...);
});
conclusion: my feeling is that is too hard a shot for a specific implementation - maybe better waiting for an official implementation
my concern is: how to support IE8? e.g. always place tabs on the top for IE8, just in JavaScript because the server generates HTML and CSS for all browsers.
Speaking of fancy CSS, FiC does not seem to support tabs on the side of the pageframe. Any idea on some fancy CSS class?
-- thn (FoxInCloud)
I don't think we will support another JavaScript library like dhtmlx because it would incur an additional license cost.
This reminds me that in the early ages of FoxInCloud we have compared ActiveWidget and dHTMLx grids, and chose ActiveWidget.
At that time (2006), dHTMLx was quite poor and difficult to use.
Same story as for Prototype.js and jQuery, Windows and Mac - the early starters are not always the winners
I would rather have support for dhtmlxAccordion.
OK, after some tests on http://foxincloud.com/tutotest/, it appears that FoxInCloud.pgfMake() does so much that it seems very difficult to override anything here.
We need to implement other tabs positioning schemes such as the one you're looking at (though out of VFP support), and support all values of .tabOrientation, .tabStyle and .tabJustify (for now we support .tabOrientation = 0 and all values of .tabJustify)
Something like this:
What you see is due to FoxInCloud.pgfMake(): changes the .left and .width of page tabs for justification
No way to do that in css for now, even using css3 flex you can't automatically adjust .width to get tabs justified.
So this requires a JavaScript workaround, and executing xxx.js after form.js;
can you post some screenshot of what you want as a result?
Summary: on a pageframe within a pageframs, the tabs do not respond on the inner pageframe to the "top:" css command the same way the outer pagefram does.
I'll take you thru the whole process. We have a pageframe inside a pageframe. Initially it looks like this:
Then we add to the xxx.css
div[id*='tow1_scx-pgfmain-'][id*='_tab']:not([id*="pgftow"]) {background-image:url("images/blank.png")!important;
background-repeat:no-repeat!important;
background-size:100% 100%!important;
width:115px!important;
border-style:none!important;
}
div[id*='tow1_scx-pgfmain-'][id*='_tab'][disabled="disabled"] {
color:grey!important;
}#tow1_scx-pgfmain-pagintake_tab {left:125px!important}
#tow1_scx-pgfmain-pagredeem_tab {left:250px!important}
#tow1_scx-pgfmain-pagmessages_tab {left:375px!important}
#tow1_scx-pgfmain-pagvehicles_tab {left:125px!important}
#tow1_scx-pgfmain-page6_tab {left:625px!important}
#tow1_scx-pgfmain-page7_tab {left:750px!important}
#tow1_scx-pgfmain-page8_tab {left:875px!important}
#tow1_scx-pgfmain-page9_tab {left:1000px!important}
#tow1_scx-pgfmain-page10_tab {left:1125px!important}
That gives us:
Now the problem starts. I want to move the inside pageframe tabs as well. If I just move the left, like this:
#tow1_scx-pgfmain-pagcalls-pgftows-pagcall_tab {left:40px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagvehicle_tab {left:80px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagpickup_tab {left:120px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdrop_tab {left:160px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdocuments_tab {left:200px!important}
That works fine. So I tried stacking the inner tabs like this:
#tow1_scx-pgfmain-pagcalls-pgftows-pagcall_tab {top:40px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagvehicle_tab {top:80px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagpickup_tab {top:120px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdrop_tab {top:160px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdocuments_tab {top:200px}
And I got this:
I tried every variation of display: css command, but it made no difference. The outer pageframe DOES respond to top:, but the inner pageframe does not.
can you post code and screenshot of what you get?
I do not care about the rotating, just the positioning along the side. I have adjusted tabs and their left/right, but I cannot get them stacked.
Yes, for now FiC only supports tabs on the top of pageFrame, just because side tabs requires HTML5 and not all browsers support HTML5, especially IE8 that FiC still supports.
CSS would not be enough for this because myform.js calls FoxInCloud.pgfMake() which adjusts the tabs' .width and .left to accommodate either a justified or non-justified layout;
as xxx.js executes before myform.js (which may be wrong, we'll think about this to maybe let xxx.js execute after myform.js, just like xxx.css executes after awDefault*.css),
the only way to override what FoxInCloud.pgfMake() does is to implement in xxx.js some code similar to what FoxInCloud.pgfMake() does, together with a css rotation:
#myPgf .page.awpag.pageTab {transform: rotate(-90deg);}
$(document).ready(function(){ /* prototype.js syntax - could be made similarly for jQuery*//
$$('#myPgf .page.awpag.pageTab').each(...);
});
conclusion: my feeling is that is too hard a shot for a specific implementation - maybe better waiting for an official implementation
my concern is: how to support IE8? e.g. always place tabs on the top for IE8, just in JavaScript because the server generates HTML and CSS for all browsers.
Speaking of fancy CSS, FiC does not seem to support tabs on the side of the pageframe. Any idea on some fancy CSS class?
use .pageActivate(pageID, true) instead
then this code should work:
$('tabID').observe('click', function(event){$('pageFrameID').tabClick(event);}); // prototype.js syntax
jQuery('#tabID').click(function(event){$('pageFrameID').tabClick(event);}); // jQuery syntax, you could also use a .class selector to assign .click() to all tabs at once
I'll just use no tabs and put buttons on the side, and in each .Click I will activate the page needed.
-- thn (FoxInCloud)
if thisform.wlHTMLgen
return textmerge([$('<<wcID(this.Parent.pageFrame)>>').pageActivate('<<wcID(this.Parent.pageFrame.Pages(xx))>>');]) && where xx changes for each button
endif
I'll just use no tabs and put buttons on the side, and in each .Click I will activate the page needed.
OK, after some tests on http://foxincloud.com/tutotest/, it appears that FoxInCloud.pgfMake() does so much that it seems very difficult to override anything here.
We need to implement other tabs positioning schemes such as the one you're looking at (though out of VFP support), and support all values of .tabOrientation, .tabStyle and .tabJustify (for now we support .tabOrientation = 0 and all values of .tabJustify)
Something like this:
What you see is due to FoxInCloud.pgfMake(): changes the .left and .width of page tabs for justification
No way to do that in css for now, even using css3 flex you can't automatically adjust .width to get tabs justified.
So this requires a JavaScript workaround, and executing xxx.js after form.js;
can you post some screenshot of what you want as a result?
Summary: on a pageframe within a pageframs, the tabs do not respond on the inner pageframe to the "top:" css command the same way the outer pagefram does.
I'll take you thru the whole process. We have a pageframe inside a pageframe. Initially it looks like this:
Then we add to the xxx.css
div[id*='tow1_scx-pgfmain-'][id*='_tab']:not([id*="pgftow"]) {background-image:url("images/blank.png")!important;
background-repeat:no-repeat!important;
background-size:100% 100%!important;
width:115px!important;
border-style:none!important;
}
div[id*='tow1_scx-pgfmain-'][id*='_tab'][disabled="disabled"] {
color:grey!important;
}#tow1_scx-pgfmain-pagintake_tab {left:125px!important}
#tow1_scx-pgfmain-pagredeem_tab {left:250px!important}
#tow1_scx-pgfmain-pagmessages_tab {left:375px!important}
#tow1_scx-pgfmain-pagvehicles_tab {left:125px!important}
#tow1_scx-pgfmain-page6_tab {left:625px!important}
#tow1_scx-pgfmain-page7_tab {left:750px!important}
#tow1_scx-pgfmain-page8_tab {left:875px!important}
#tow1_scx-pgfmain-page9_tab {left:1000px!important}
#tow1_scx-pgfmain-page10_tab {left:1125px!important}
That gives us:
Now the problem starts. I want to move the inside pageframe tabs as well. If I just move the left, like this:
#tow1_scx-pgfmain-pagcalls-pgftows-pagcall_tab {left:40px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagvehicle_tab {left:80px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagpickup_tab {left:120px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdrop_tab {left:160px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdocuments_tab {left:200px!important}
That works fine. So I tried stacking the inner tabs like this:
#tow1_scx-pgfmain-pagcalls-pgftows-pagcall_tab {top:40px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagvehicle_tab {top:80px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagpickup_tab {top:120px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdrop_tab {top:160px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdocuments_tab {top:200px}
And I got this:
I tried every variation of display: css command, but it made no difference. The outer pageframe DOES respond to top:, but the inner pageframe does not.
can you post code and screenshot of what you get?
I do not care about the rotating, just the positioning along the side. I have adjusted tabs and their left/right, but I cannot get them stacked.
Yes, for now FiC only supports tabs on the top of pageFrame, just because side tabs requires HTML5 and not all browsers support HTML5, especially IE8 that FiC still supports.
CSS would not be enough for this because myform.js calls FoxInCloud.pgfMake() which adjusts the tabs' .width and .left to accommodate either a justified or non-justified layout;
as xxx.js executes before myform.js (which may be wrong, we'll think about this to maybe let xxx.js execute after myform.js, just like xxx.css executes after awDefault*.css),
the only way to override what FoxInCloud.pgfMake() does is to implement in xxx.js some code similar to what FoxInCloud.pgfMake() does, together with a css rotation:
#myPgf .page.awpag.pageTab {transform: rotate(-90deg);}
$(document).ready(function(){ /* prototype.js syntax - could be made similarly for jQuery*//
$$('#myPgf .page.awpag.pageTab').each(...);
});
conclusion: my feeling is that is too hard a shot for a specific implementation - maybe better waiting for an official implementation
my concern is: how to support IE8? e.g. always place tabs on the top for IE8, just in JavaScript because the server generates HTML and CSS for all browsers.
Speaking of fancy CSS, FiC does not seem to support tabs on the side of the pageframe. Any idea on some fancy CSS class?
-- thn (FoxInCloud)
procedure click && of 'page tab' commandButton
if thisform.wcHTMLgen
return
endifthis.parent.pageFrame.activePage = xx && xx changes according to button
you could even use a combo box or a commandgroup or a optiongroup instead of separate commandButtons
you could also create a container class with a pageframe and the appropriate 'page tab' simulation control(s) like above listed
to do that you can implement your button.click() as follows:
if thisform.wlHTMLgen
return textmerge([$('').pageActivate(' ) && where xx changes for each button');]
endif
I'll just use no tabs and put buttons on the side, and in each .Click I will activate the page needed.
OK, after some tests on http://foxincloud.com/tutotest/, it appears that FoxInCloud.pgfMake() does so much that it seems very difficult to override anything here.
We need to implement other tabs positioning schemes such as the one you're looking at (though out of VFP support), and support all values of .tabOrientation, .tabStyle and .tabJustify (for now we support .tabOrientation = 0 and all values of .tabJustify)
Something like this:
What you see is due to FoxInCloud.pgfMake(): changes the .left and .width of page tabs for justification
No way to do that in css for now, even using css3 flex you can't automatically adjust .width to get tabs justified.
So this requires a JavaScript workaround, and executing xxx.js after form.js;
can you post some screenshot of what you want as a result?
Summary: on a pageframe within a pageframs, the tabs do not respond on the inner pageframe to the "top:" css command the same way the outer pagefram does.
I'll take you thru the whole process. We have a pageframe inside a pageframe. Initially it looks like this:
Then we add to the xxx.css
div[id*='tow1_scx-pgfmain-'][id*='_tab']:not([id*="pgftow"]) {background-image:url("images/blank.png")!important;
background-repeat:no-repeat!important;
background-size:100% 100%!important;
width:115px!important;
border-style:none!important;
}
div[id*='tow1_scx-pgfmain-'][id*='_tab'][disabled="disabled"] {
color:grey!important;
}#tow1_scx-pgfmain-pagintake_tab {left:125px!important}
#tow1_scx-pgfmain-pagredeem_tab {left:250px!important}
#tow1_scx-pgfmain-pagmessages_tab {left:375px!important}
#tow1_scx-pgfmain-pagvehicles_tab {left:125px!important}
#tow1_scx-pgfmain-page6_tab {left:625px!important}
#tow1_scx-pgfmain-page7_tab {left:750px!important}
#tow1_scx-pgfmain-page8_tab {left:875px!important}
#tow1_scx-pgfmain-page9_tab {left:1000px!important}
#tow1_scx-pgfmain-page10_tab {left:1125px!important}
That gives us:
Now the problem starts. I want to move the inside pageframe tabs as well. If I just move the left, like this:
#tow1_scx-pgfmain-pagcalls-pgftows-pagcall_tab {left:40px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagvehicle_tab {left:80px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagpickup_tab {left:120px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdrop_tab {left:160px!important}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdocuments_tab {left:200px!important}
That works fine. So I tried stacking the inner tabs like this:
#tow1_scx-pgfmain-pagcalls-pgftows-pagcall_tab {top:40px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagvehicle_tab {top:80px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagpickup_tab {top:120px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdrop_tab {top:160px}
#tow1_scx-pgfmain-pagcalls-pgftows-pagdocuments_tab {top:200px}
And I got this:
I tried every variation of display: css command, but it made no difference. The outer pageframe DOES respond to top:, but the inner pageframe does not.
can you post code and screenshot of what you get?
I do not care about the rotating, just the positioning along the side. I have adjusted tabs and their left/right, but I cannot get them stacked.
Yes, for now FiC only supports tabs on the top of pageFrame, just because side tabs requires HTML5 and not all browsers support HTML5, especially IE8 that FiC still supports.
CSS would not be enough for this because myform.js calls FoxInCloud.pgfMake() which adjusts the tabs' .width and .left to accommodate either a justified or non-justified layout;
as xxx.js executes before myform.js (which may be wrong, we'll think about this to maybe let xxx.js execute after myform.js, just like xxx.css executes after awDefault*.css),
the only way to override what FoxInCloud.pgfMake() does is to implement in xxx.js some code similar to what FoxInCloud.pgfMake() does, together with a css rotation:
#myPgf .page.awpag.pageTab {transform: rotate(-90deg);}
$(document).ready(function(){ /* prototype.js syntax - could be made similarly for jQuery*//
$$('#myPgf .page.awpag.pageTab').each(...);
});
conclusion: my feeling is that is too hard a shot for a specific implementation - maybe better waiting for an official implementation
my concern is: how to support IE8? e.g. always place tabs on the top for IE8, just in JavaScript because the server generates HTML and CSS for all browsers.
Speaking of fancy CSS, FiC does not seem to support tabs on the side of the pageframe. Any idea on some fancy CSS class?