I have designed a html tabs. I applied float
property to it. The problem is when I minimize browser tabs are not visible properly. Here the my fiddle:
http://jsfiddle.net/raghavendram040/vn1Leuq3/
and JavaScript is copied from Internet so can any one tell how this JavaScript works and applying float property? It really helps me. Here is JavaScript code:
JavaScript
x
38
38
1
tabs = function(options) {
2
3
var defaults = {
4
selector: '.tabs',
5
selectedClass: 'selected'
6
};
7
8
if(typeof options == 'string') defaults.selector = options;
9
var options = $.extend(defaults, options);
10
11
return $(options.selector).each(function(){
12
13
var obj = this;
14
var targets = Array();
15
16
function show(i){
17
$.each(targets,function(index,value){
18
$(value).hide();
19
})
20
$(targets[i]).fadeIn('fast');
21
$(obj).children().removeClass(options.selectedClass);
22
selected = $(obj).children().get(i);
23
$(selected).addClass(options.selectedClass);
24
};
25
26
$('a',this).each(function(i){
27
targets.push($(this).attr('href'));
28
$(this).click(function(e){
29
e.preventDefault();
30
show(i);
31
});
32
});
33
34
show(0);
35
36
});
37
}tabs('nav ul');
38
Advertisement
Answer
Supress from nav and ul
JavaScript
1
2
1
height: 28px;
2
Add
JavaScript
1
2
1
overflow: auto;
2
To your ul element. That will prevent your tab links to disapear. If you want them to stay in a line, you will need to set to your ul element min-width property like this:
JavaScript
1
2
1
min-width: 800px;
2