Search content within the blog

Friday, January 23, 2009

Create tabs using Javascript

Javascript:


function selecttab(what){
for (var x = 1; x < = 2; x++)
{
document.getElementById("tab" + x).className='edittabOff';
document.getElementById("tabpanel" + x).style.display='none';
}
document.getElementById("tab" + what).className='edittabOn';
document.getElementById("tabpanel" + what).style.display='';
}

function doinitialize(){
selecttab('< %=whichtab%> ');
}


HTML Side:

< body onload="doinitialize();">
< table>
< tr>
< td valign="top" class="labelclass">
< a href="javascript:selecttab(1);" style="margin: 0;">
< img src="images/tabVideourl.gif" alt="Upload Video File" name="tab1" width="126"
height="32" border="0" id="tab1" /> < /a> < a href="javascript:selecttab(2);" style="margin: 0;"> < img
src="images/tabVideocode.gif" alt="External URL" width="126" height="32" border="0"
class="editTabHover" id="tab2" /> < /a> < a href="javascript:selecttab(3);" style="margin-bottom: 0;"> < /a>
< div id="tabpanel" class="labelclass">
< span id="tabpanel1">
< p>
Video File :< br />
< asp:TextBox ID="txtVideofile" Columns="40" runat="server" MaxLength="300" CssClass="inputclass" />
< a href="javascript:selvideo();">
< img src="images/btnUploadfile.gif" alt="Upload File" width="99" height="38" border="0"
align="absmiddle"> < /a> < a href="javascript:viewvideo();" />
< img src="images/btnOpenFile.gif" alt="Open" width="99" height="38" border="0" align="absmiddle" /> < /a> < br />
< br />
Enter the virtual path to the video file< br />
or < a href="javascript:selvideo();"> upload / select< /a> a video from the ones available
in the server< /p>
< p id="fflabel" runat="server">
< asp:CheckBox ID="chkEncode" Text="Re-encode video file to " runat="server" CssClass="inputclass" /> < br />
< span class="SmallNotes"> Please note that this is a resource intensive process which
requires FFMPEG to be installed on the web server (the bigger the file the more
intensive the process). This option will only work for local files.< /span> < /p>
< /span> < span id="tabpanel2" class="labelclass">
< p>
Embed Video HTML Code :< br />
< asp:TextBox TextMode="MultiLine" Rows="5" Width="80%" Wrap="false" ID="txtVideocode"
runat="server" CssClass="inputclass" />
< /p>
< p>
Use this option to embed a video through HTML code into your pages.< br />
This is useful if the video is hosted externally and you have a code to embed and
display it in your pages.< /p>
< /span>
< /div>
< /td>
< /tr>
< /table>
< /body>

No comments:

Post a Comment