February 06, 2011, 09:43 AM
MMcDonald [SOLVED] Remove Tabitem
I would like to remove the Tab Items over my Spans and use Submit Buttons that call a request to go to and from the spans. Is there any way to use a Submit Button to call a Span?
Thanks
This message has been edited. Last edited by: Kerry , February 16, 2011 03:15 PM February 06, 2011, 01:11 PM
<JG> I'd ask a javascript forum
February 06, 2011, 04:15 PM
Waz I don't understand.
February 06, 2011, 05:11 PM
MMcDonald If you create Spans in HTML painter there are tabs at the top of each span...I want to use a push button to control going from one span to the next and remove/hide the tabs at the top that control the span navigation. Does that explain my question better?
February 06, 2011, 08:52 PM
Waz Sorry, Submit button is very different to a push button.
Are you able to post a simple example ?
JG may be right though, this will probably be a very non WebFOCUS answer.
February 06, 2011, 09:10 PM
Waz Here is something that I threw together very quickly. It will probably only work in IE, but will give an idea of what to do.
<HTML>
<HEAD>
<META id=mycharsetmeta http-equiv=Content-Type content="text/html; charset=ISO-8859-1">
<META id=Generation content="Gen 3.0">
<SCRIPT id=IBI_RelCallBack type=text/javascript>function AdjustChildrenPosition(){
}
</SCRIPT>
<SCRIPT id=IBI_OptionsScript type=text/javascript>
var cgipath = "cgipath";
var ibirls = "ibirls3";
var rltdyncalendar = "rltdyncalendar";
var gmap = "ibigmap";
var olap="olap";
var olappanebase="olappanebase";
var olapdrill="olapdrill";
var ibixmltree="ibixmltree";
var ibiOptions = new Array(cgipath,ibirls);
</SCRIPT>
<SCRIPT id=IBI_nls src="/ibi_html/javaassist/nls.js" type=text/javascript></SCRIPT>
<SCRIPT id=IBI_nlsVars src="/ibi_html/javaassist/nlsvars.js" type=text/javascript></SCRIPT>
<SCRIPT id=IBI_ibigbl src="/ibi_html/javaassist/ibi/html/js/ibigbl.js" type=text/javascript></SCRIPT>
<SCRIPT id=IBI_ibigblloadCss type=text/javascript>
ibigblloadCss(null);
</SCRIPT>
<TITLE>HtmlPage</TITLE>
<SCRIPT id=clientEventHandlersJS type=text/javascript>
//Begin function window_onload
function window_onload() {
UpdateData();
// TODO: Add your event handler code here
//add onInitialUpdate() function to make changes before initial run of the reports
addbuttons() ;
}
function addbuttons() {
for(var _c=1;_c<=3;_c++) {
var _Span = document.getElementById('tabitem'+_c) ;
_Span.innerHTML = '<input type=button value="MyTab'+_c+'">' ;
}
}
//End function window_onload
</SCRIPT>
<SCRIPT for=window eventname="onload">window.onload = function() { window_onload(); }</SCRIPT>
<STYLE id=ibi_defaultstyleElt type=text/css>.tabitemsclass {
BACKGROUND-COLOR: white
}
</STYLE>
</HEAD>
<BODY style="OVERFLOW: auto" edaconnectionrequired="false">
<SPAN id=tab1 style="Z-INDEX: 2; LEFT: 70px; WIDTH: 740px; POSITION: absolute; TOP: 40px; HEIGHT: 60px" tabIndex=2 tabedgerounded="straight" tabitemsdefaultheight="25" tabitemsdefaultwidth="100" tablocation="top" tabitemsdefaultdist="5" elementtype="38">
<SPAN class=tabitemsclass id=tabitem1 title="" style="BORDER-RIGHT: teal 1px solid; BORDER-TOP: gold 3px solid; Z-INDEX: 5; LEFT: 15px; BORDER-BOTTOM-WIDTH: thin; BORDER-BOTTOM-COLOR: white; BORDER-LEFT: teal 1px solid; WIDTH: 100px; CURSOR: hand; POSITION: absolute; TOP: 0px; WRITING-MODE: lr-tb; HEIGHT: 26px; TEXT-ALIGN: center" tabIndex=3 elementtype="39" selectedtab="true" tabbody="tabitembody1">Tab #1</SPAN>
<SPAN class=tabitemsclass id=tabitembody1 style="BORDER-RIGHT: teal 1px solid; BORDER-TOP: teal 1px solid; DISPLAY: block; Z-INDEX: 4; LEFT: 0px; BORDER-LEFT: teal 1px solid; WIDTH: 740px; BORDER-BOTTOM: teal 1px solid; POSITION: absolute; TOP: 25px; HEIGHT: 35px" tabIndex=4 elementtype="40"></SPAN>
<SPAN class=tabitemsclass id=tabitem2 style="BORDER-RIGHT: teal 1px solid; BORDER-TOP: teal 1px solid; Z-INDEX: 3; LEFT: 120px; BORDER-BOTTOM-WIDTH: thin; BORDER-BOTTOM-COLOR: white; BORDER-LEFT: teal 1px solid; WIDTH: 100px; CURSOR: hand; POSITION: absolute; TOP: 3px; WRITING-MODE: lr-tb; HEIGHT: 22px; TEXT-ALIGN: center" tabIndex=5 elementtype="39" selectedtab="false" tabbody="tabitembody2">Tab #2</SPAN>
<SPAN class=tabitemsclass id=tabitembody2 style="BORDER-RIGHT: teal 1px solid; BORDER-TOP: teal 1px solid; DISPLAY: none; Z-INDEX: 2; LEFT: 0px; BORDER-LEFT: teal 1px solid; WIDTH: 740px; BORDER-BOTTOM: teal 1px solid; POSITION: absolute; TOP: 25px; HEIGHT: 35px" tabIndex=6 elementtype="40"></SPAN>
<SPAN class=tabitemsclass id=tabitem3 style="BORDER-RIGHT: teal 1px solid; BORDER-TOP: teal 1px solid; Z-INDEX: 3; LEFT: 225px; BORDER-BOTTOM-WIDTH: thin; BORDER-BOTTOM-COLOR: white; BORDER-LEFT: teal 1px solid; WIDTH: 100px; CURSOR: hand; POSITION: absolute; TOP: 3px; WRITING-MODE: lr-tb; HEIGHT: 22px; TEXT-ALIGN: center" tabIndex=7 elementtype="39" selectedtab="false" tabbody="tabitembody3">Tab #3</SPAN>
<SPAN class=tabitemsclass id=tabitembody3 style="BORDER-RIGHT: teal 1px solid; BORDER-TOP: teal 1px solid; DISPLAY: none; Z-INDEX: 2; LEFT: 0px; BORDER-LEFT: teal 1px solid; WIDTH: 740px; BORDER-BOTTOM: teal 1px solid; POSITION: absolute; TOP: 25px; HEIGHT: 35px" tabIndex=8 elementtype="40"></SPAN></SPAN>
<INPUT id=layoutinfo style="LEFT: -100px; POSITION: absolute; TOP: -100px" type=hidden tabcontrolids="tab1">
<INPUT id=ibiapp_app style="LEFT: -100px; POSITION: absolute; TOP: -100px" type=hidden value="focalpoint ibisamp baseapp" name="ibiapp_app">
<xml id=focus_xmlelement>
<script>
<rootxmlnode top="0" left="0" width="150" height="130">
<variables></variables>
<input_controls></input_controls>
<other_bound_objects></other_bound_objects>
<requests></requests></rootxmlnode></script>
</xml></BODY>
<SCRIPT id=IBI_loader type=text/javascript>
doBeforeLoad();
</SCRIPT>
</HTML> February 07, 2011, 08:44 AM
MMcDonald Waz,
I am not sure how to fit your code into mine. I was looking to have a push button that executed a request number. As you can see in my code I created Hover Buttons that I can click on to execute a push button request. Is this possible to create a push button to execute a request number to access a span?? I would like to add this new button to call span Tabitembody2 right after the Anchor6 "Adhoc-Report" button.
Please let me know...I appreciate your help.!!
<!-- Generated by Report Layout Painter -->
<HTML>
<HEAD>
<SCRIPT id=IBI_RelCallBack type=text/javascript>function AdjustChildrenPosition(){
}
</SCRIPT>
<SCRIPT id=IBI_OptionsScript type=text/javascript>
var rltVersion = "764";
var cgipath = "cgipath";
var ibirls = "ibirls2";
var rltdyncalendar = "rltdyncalendar";
var gmap = "ibigmap";
var olap="olap";
var olappanebase="olappanebase";
var olapdrill="olapdrill";
var ibixmltree="ibixmltree";
var ibiOptions = new Array(cgipath,ibirls);
</SCRIPT>
<SCRIPT id=IBI_nls src="/ibi_html/javaassist/nls.js" type=text/javascript></SCRIPT>
<SCRIPT id=IBI_ibigbl src="/ibi_html/javaassist/ibi/html/js/ibigbl.js" type=text/javascript></SCRIPT>
<SCRIPT id=IBI_ibigblloadCss type=text/javascript>
ibigblloadCss(null);</SCRIPT>
<TITLE>HtmlPage</TITLE>
<STYLE type=text/css>
.hovermenu3 ul{
font: bold 13px arial;
padding-left: 0;
margin-left: 0;
height: 20px;
POSITION:ABSOLUTE;
TOP:6px;
LEFT:55;
}
.hovermenu3 ul li{
list-style: none;
display: inline;
}
.hovermenu3 ul li a{
padding: 2px 0.5em;
text-decoration: none;
float: left;
color: black;
background-color: #b0c4de;
border: 2px solid #dfdfdd;
}
.hovermenu3 ul li a:hover{
background-color: #FFE271;
border-style: outset;
}
html>body .hovermenu3 ul li a:active{ /* Apply mousedown effect only to NON IE browsers */
border-style: inset;
}
#reset1:active{ /* Apply mousedown effect only to NON IE browsers */
border-style: inset;
background-color: #FFE271;
border-style: outset;
}
</STYLE>
<SCRIPT for=window eventname="onload">window.onload = function() { window_onload(); }</SCRIPT>
</HEAD>
<BODY id=ITEM1 style="OVERFLOW: auto" background=app/gradient_lt_blue.png edaconnectionrequired="true">
<SPAN id=text1 style="FONT-SIZE: 18pt; Z-INDEX: 100; LEFT: 450px; WIDTH: 450px; COLOR: white; FONT-FAMILY: Times New Roman; POSITION: absolute; TOP: 0px; HEIGHT: 36px" tabIndex=2>Medline Operations Dashboard</SPAN>
<SPAN id=tab1 style="Z-INDEX: 86; LEFT: 10px; WIDTH: 1260px; POSITION: absolute; TOP: 30px; HEIGHT: 825px" tabIndex=3 elementtype="38">
<SPAN id=tabitem1 style="BORDER-RIGHT: gainsboro thin ridge; BORDER-TOP: rgb(224,192,64) 3px solid; FONT-WEIGHT: bold; Z-INDEX: 89; LEFT: 15px; BORDER-LEFT: gainsboro thin ridge; WIDTH: 120px; CURSOR: hand; BORDER-BOTTOM: gainsboro thin ridge; POSITION: absolute; TOP: 0px; HEIGHT: 28px; BACKGROUND-COLOR: #b0c4de; TEXT-ALIGN: center" tabIndex=4 elementtype="39" tabbody="tabitembody1" selectedtab="true">Metrics</SPAN>
<SPAN id=tabitembody1 style="BORDER-RIGHT: gainsboro thin ridge; BORDER-TOP: gainsboro thin ridge; DISPLAY: block; Z-INDEX: 103; LEFT: 0px; BORDER-LEFT: gainsboro thin ridge; WIDTH: 1260px; BORDER-BOTTOM: gainsboro thin ridge; POSITION: absolute; TOP: 25px; HEIGHT: 825px; BACKGROUND-COLOR: white" tabIndex=5 elementtype="40">
<DIV class=hovermenu3 style="Z-INDEX: 62">
<UL>
<LI>
<A id=anchor7 href="javascript:OnExecute(null, 'anchor7')" name=anchor7 requests_list="42">Help</A>
<LI>
<A id=anchor5 href="javascript:OnExecute(null, 'anchor5')" name=anchor5 requests_list="15">Create-Comment</A>
<LI>
<A id=anchor6 href="javascript:OnExecute(null, 'anchor6')" name=anchor6 requests_list="41">Adhoc-Report</A></UL>
<IFRAME id=graph1 title=app/labor_pct_graph_1.fex style="Z-INDEX: 120; LEFT: 0px; OVERFLOW: auto; WIDTH: 400px; POSITION: absolute; TOP: 145px; HEIGHT: 250px; BACKGROUND-COLOR: transparent" tabIndex=33 name=graph1 marginWidth=0 marginHeight=0 frameBorder=no scrolling=no autoExecute="True" requests_list="4" elementtype="3" size_to_fit="1"></IFRAME>
<SPAN id=tabitem2 style="BORDER-RIGHT: gainsboro thin ridge; BORDER-TOP: teal 1px solid; FONT-WEIGHT: bold; Z-INDEX: 87; LEFT: 1010px; BORDER-LEFT: gainsboro thin ridge; WIDTH: 120px; CURSOR: hand; BORDER-BOTTOM: gainsboro thin ridge; POSITION: absolute; TOP: 3px; HEIGHT: 24px; BACKGROUND-COLOR: #b0c4de; TEXT-ALIGN: center" tabIndex=6 elementtype="39" tabbody="tabitembody2" selectedtab="false">Freight-Inbound</SPAN>
<SPAN id=tabitembody2 style="BORDER-RIGHT: gainsboro thin ridge; BORDER-TOP: gainsboro thin ridge; DISPLAY: none; Z-INDEX: 77; LEFT: 0px; BORDER-LEFT: gainsboro thin ridge; WIDTH: 1260px; BORDER-BOTTOM: gainsboro thin ridge; POSITION: absolute; TOP: 25px; HEIGHT: 825px; BACKGROUND-COLOR: #ffffff" tabIndex=7 elementtype="40">
<IFRAME id=report4 title=app/inbound_frt_detail_child.fex style="Z-INDEX: 125; LEFT: 10px; OVERFLOW: auto; WIDTH: 1230px; POSITION: absolute; TOP: 70px; HEIGHT: 734px" tabIndex=61 name=report4 frameBorder=no autoExecute="True" requests_list="54" elementtype="2" executebuttonId="form2Submit"></IFRAME>
February 07, 2011, 09:03 AM
Doug I'll try your code later. But, my first thoughts are : event, show, hide, etc... Don't use "The Submit Button", make your own? More of a JavaScript questions...
February 07, 2011, 03:41 PM
Waz So if I understand, you want the button to submit the contents of tabitembody2 ?
Do you want the button to show the tab, or just submit the contents of the tab ?
Is you code you posted complete ? I think there is some missing.
February 07, 2011, 04:33 PM
MMcDonald Waz,
I think have the original request figured out...I was able to move the itemtabs onto the home page. All I need now is a button on each span so the user can cleck it and take them back to the home page which is the first span.
Any ideas on how to accomplish this? I have been trying all day but nothing seems to be working. Thanks
February 09, 2011, 03:49 PM
Waz Here is an example of button that will swap back to another tab.
It is simple, and probably should be done another way. It is also probably not cross browser.
<!-- Generated by Report Layout Painter -->
<HTML><HEAD>
<META id=mycharsetmeta http-equiv=Content-Type content="text/html; charset=ISO-8859-1">
<META id=Generation content="Gen 3.0"><TITLE>HtmlPage</TITLE>
<SCRIPT id=IBI_RelCallBack type=text/javascript>function AdjustChildrenPosition(){
}
</SCRIPT>
<SCRIPT id=IBI_OptionsScript type=text/javascript>
var cgipath = "cgipath";
var ibirls = "ibirls3";
var rltdyncalendar = "rltdyncalendar";
var gmap = "ibigmap";
var olap="olap";
var olappanebase="olappanebase";
var olapdrill="olapdrill";
var ibixmltree="ibixmltree";
var ibiOptions = new Array(cgipath,ibirls);
</SCRIPT>
<SCRIPT id=IBI_nls src="/ibi_html/javaassist/nls.js" type=text/javascript></SCRIPT>
<SCRIPT id=IBI_nlsVars src="/ibi_html/javaassist/nlsvars.js" type=text/javascript></SCRIPT>
<SCRIPT id=IBI_ibigbl src="/ibi_html/javaassist/ibi/html/js/ibigbl.js" type=text/javascript></SCRIPT>
<SCRIPT id=IBI_ibigblloadCss type=text/javascript>
ibigblloadCss(null);
</SCRIPT>
<SCRIPT id=clientEventHandlersJS type=text/javascript>
//Begin function window_onload
function window_onload() {
UpdateData();
// TODO: Add your event handler code here
//add onInitialUpdate() function to make changes before initial run of the reports
}
//End function window_onload
//Begin function button1_onclick
function button1_onclick(ctrl) {
document.getElementById('tabitem1').click() ;
}
//End function button1_onclick
</SCRIPT>
<SCRIPT for=window eventname="onload">window.onload = function() { window_onload();}</SCRIPT>
<STYLE id=ibi_defaultstyleElt type=text/css>.tabitemsclass {
BACKGROUND-COLOR: white
}
</STYLE>
<META content="MSHTML 6.00.2900.6049" name=GENERATOR></HEAD>
<BODY style="OVERFLOW: auto" edaconnectionrequired="false">
<SPAN id=tab1 style="Z-INDEX: 2; LEFT: 70px; WIDTH: 740px; POSITION: absolute; TOP: 40px; HEIGHT: 60px" tabIndex=2 tabedgerounded="straight" tabitemsdefaultheight="25" tabitemsdefaultwidth="100" tablocation="top" tabitemsdefaultdist="5" elementtype="38">
<SPAN class=tabitemsclass id=tabitem1 title="" style="BORDER-RIGHT: teal 1px solid; BORDER-TOP: teal 1px solid; Z-INDEX: 3; LEFT: 15px; BORDER-LEFT: teal 1px solid; WIDTH: 100px; CURSOR: hand; BORDER-BOTTOM: white thin; POSITION: absolute; TOP: 3px; WRITING-MODE: lr-tb; HEIGHT: 22px; TEXT-ALIGN: center" tabIndex=3 elementtype="39" selectedtab="false" tabbody="tabitembody1">
Tab #1
</SPAN>
<SPAN class=tabitemsclass id=tabitembody1 style="BORDER-RIGHT: teal 1px solid; BORDER-TOP: teal 1px solid; DISPLAY: none; Z-INDEX: 2; LEFT: 0px; BORDER-LEFT: teal 1px solid; WIDTH: 740px; BORDER-BOTTOM: teal 1px solid; POSITION: absolute; TOP: 25px; HEIGHT: 135px" tabIndex=4 elementtype="40">
</SPAN>
<SPAN class=tabitemsclass id=tabitem2 style="BORDER-RIGHT: teal 1px solid; BORDER-TOP: teal 1px solid; Z-INDEX: 3; LEFT: 120px; BORDER-LEFT: teal 1px solid; WIDTH: 100px; CURSOR: hand; BORDER-BOTTOM: white thin; POSITION: absolute; TOP: 3px; WRITING-MODE: lr-tb; HEIGHT: 22px; TEXT-ALIGN: center" tabIndex=5 elementtype="39" selectedtab="false" tabbody="tabitembody2">
Tab #2
</SPAN>
<SPAN class=tabitemsclass id=tabitembody2 style="BORDER-RIGHT: teal 1px solid; BORDER-TOP: teal 1px solid; DISPLAY: none; Z-INDEX: 2; LEFT: 0px; BORDER-LEFT: teal 1px solid; WIDTH: 740px; BORDER-BOTTOM: teal 1px solid; POSITION: absolute; TOP: 25px; HEIGHT: 135px" tabIndex=6 elementtype="40">
</SPAN>
<SPAN class=tabitemsclass id=tabitem3 style="BORDER-RIGHT: teal 1px solid; BORDER-TOP: gold 3px solid; Z-INDEX: 5; LEFT: 225px; BORDER-LEFT: teal 1px solid; WIDTH: 100px; CURSOR: hand; BORDER-BOTTOM: white thin; POSITION: absolute; TOP: 0px; WRITING-MODE: lr-tb; HEIGHT: 26px; TEXT-ALIGN: center" tabIndex=7 elementtype="39" selectedtab="true" tabbody="tabitembody3">
Tab #3
</SPAN>
<SPAN class=tabitemsclass id=tabitembody3 style="BORDER-RIGHT: teal 1px solid; BORDER-TOP: teal 1px solid; DISPLAY: block; Z-INDEX: 4; LEFT: 0px; BORDER-LEFT: teal 1px solid; WIDTH: 740px; BORDER-BOTTOM: teal 1px solid; POSITION: absolute; TOP: 25px; HEIGHT: 135px" tabIndex=8 elementtype="40">
<INPUT language=javascript id=button1 style="Z-INDEX: 6; LEFT: 100px; WIDTH: 210px; POSITION: absolute; TOP: 15px; HEIGHT: 30px" onclick=button1_onclick(this) tabIndex=9 type=button size=504 value="Tab #1" name=button1>
</SPAN>
</SPAN>
<INPUT id=layoutinfo style="LEFT: -100px; POSITION: absolute; TOP: -100px" type=hidden tabcontrolids="tab1">
<INPUT id=ibiapp_app style="LEFT: -100px; POSITION: absolute; TOP: -100px" type=hidden value="focalpoint ibisamp baseapp" name=ibiapp_app>
<SCRIPT id=IBI_loader type=text/javascript>
doBeforeLoad();
</SCRIPT>
<xml id=focus_xmlelement><script>
<rootxmlnode top="0" left="0" width="150" height="130">
<variables></variables>
<input_controls></input_controls>
<other_bound_objects></other_bound_objects>
<requests></requests></rootxmlnode></script>
</xml>
</BODY>
</HTML> February 15, 2011, 08:28 AM
MMcDonald Thanks Waz this worked..!!