LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » HTML-CSS-PHP-JavaScript / JavaScript Codes » Simple JavaScript Multi Tabbed Widget For Your Web Page

Simple JavaScript Multi Tabbed Widget For Your Web Page

Simple-JavaScript-Multi-Tabbed-Widget
Multi-Tab widgets are great for your websites or blogs to show more data in less space and can have unlimited pages in same size that will overlap them to save spaces and can be easily access via buttons to have views on that too. Its best for having same category widgets in same place so this can help in design too.

Now there are many one available only but not features are ok to use them because you have to watch out your loading time too so think twice before using the codes on your web that can make your loading time high of bad SEO effect. But this one is light weight and have to bunch of codes. All is here you you also do not have to hit any others URLs. Now go for it and garb the code to use it.

Features:

1.) Pure JavaScript Added.
2.) No External JavaScript Or JQuery File.
3.) Pure CSS Added.
4.) Simple And Fast Loading Code.
5.) Can Work With Any Browser.

How To Add In A WebPage?

1.) Just Go To Your “Web Page File”.
2.) Now “Copy” The Below Codes And “Paste” It To There Positions.
3.) “Save” It, Now You Are Done.

Recommended For You:
Image Zoom on Hover with Pure JavaScript & CSS

JavaScript:

<script type='text/javascript'>
//<![CDATA[
function JAVASCRIPTMULTITAB(NBTID, id)
{
 var JAVASCRIPTMULTITAB_WIDGET = document.getElementById(NBTID);
 var JMT = JAVASCRIPTMULTITAB_WIDGET.firstChild;
 while (JMT.className != "JMT" ) JMT = JMT.nextSibling;
 var NBT = JMT.firstChild;
 var i = 0;
 do
 {
 if (NBT.tagName == "A")
 {
 i++;
 NBT.href = "javascript:JAVASCRIPTMULTITAB_ubah('"+NBTID+"', "+i+");";
 NBT.className = (i == id) ? "Active" : "";
 NBT.blur();
 }
 }
 while (NBT = NBT.nextSibling);
 var Halamans = JAVASCRIPTMULTITAB_WIDGET.firstChild;
 while (Halamans.className != 'Halamans') Halamans = Halamans.nextSibling;
 var Halaman = Halamans.firstChild;
 var i = 0;
 do
 {
 if (Halaman.className == 'Halaman')
 {
 i++;
 if (Halamans.offsetHeight) Halaman.style.height = (Halamans.offsetHeight-2)+"px";
 Halaman.style.overflow = "auto";
 Halaman.style.display = (i == id) ? 'block' : 'none';
 }
 }
 while (Halaman = Halaman.nextSibling);
}
function JAVASCRIPTMULTITAB_ubah(NBTID, id) {
JAVASCRIPTMULTITAB(NBTID, id);
}
function JAVASCRIPTMULTITAB_inisial(NBTID) {
JAVASCRIPTMULTITAB(NBTID, 1);
document.write('');
}
//]]>
</script>

CSS:

<style type="text/css">
div.JAVASCRIPTMULTITAB_WIDGET div.JMT {
height: 24px;
overflow: hidden;
}
div.JAVASCRIPTMULTITAB_WIDGET div.JMT a:hover, div.JAVASCRIPTMULTITAB_WIDGET div.JMT a.Active {
background-color: #eee;
}
div.JAVASCRIPTMULTITAB_WIDGET div.Halamans {
clear: both;
border: 2px solid #f4f4f4;
overflow: hidden;
background-color: #ffffff;
}
div.JAVASCRIPTMULTITAB_WIDGET div.Halamans div.Halaman {
height: 100%; padding: 0px;
overflow: hidden;
}
div.JAVASCRIPTMULTITAB_WIDGET div.Halamans div.Halaman div.Alas {
padding: 3px 5px;
}
div.JAVASCRIPTMULTITAB_WIDGET div.JMT a {
border-left:1px solid #eee;
border-right:1px solid #eee;
border-top:1px solid #eee;
border-boNBTom:0px solid #eee;
float: left;
display: block;
width: 95px;
text-align: center;
vertical-align: middle;
height: 24px;
padding-top: 3px;
text-decoration: none;
font-family: "Arial", Serif;
font-size: 11px;
font-weight: 900;
color: #000000
}
</style>

HTML:

<form action="JAVASCRIPTMULTITAB_WIDGET.html" method="get">
<div id="JAVASCRIPTMULTITAB_WIDGET" class="JAVASCRIPTMULTITAB_WIDGET">
<div style="width: 300px;" class="JMT">
<a>Tab 1 Title</a>
<a>Tab 2 Title</a>
<a>Tab 3 Title</a>
</div>
<div style="width: 300px; height: 300px;" class="Halamans">
<div class="Halaman">
<div class="Alas">
<br/>
Tab 1 content goes here
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab 2 content goes here
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab 3 content goes here
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">JAVASCRIPTMULTITAB_inisial('JAVASCRIPTMULTITAB_WIDGET');</script>

Customization:

1.) Edit Your HTML & CSS As Per Your Requirements. Rest JavaScript Is Ok For General Us. If You Are Pro, Then You Can Do Any Thing.

Recommended For You:
Create Analog Clock Widget With HTML5 Canvas And JavaScript

Last Words:

That’s all we have. If you have any problem with this code in your blogger template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…

You Like It, Please Share This Recipe With Your Friends Using...

2 Responses to “Simple JavaScript Multi Tabbed Widget For Your Web Page”

  1. Debarpan says:

    It’s a fact that your blog posts are so unique and interesting and I enjoys a lot while reading your posts because you explained your post very deeply in a very easy and clear language. Thanks for your support.Great blog with such awesome article.So lucky to have here.

Leave a Reply

Your email address will not be published. Required fields are marked *