add tab
+3
Pizza Boi
Rhino.Freak
erchima
7 posters
Page 1 of 1
Re: add tab
Hi
Sorry, I believe that copying AvacWeb's style would merit you plagiarism; however, I do remember Ange helping a person with almost the same predicament as yours. Please search his profile for the topic concerning that or if he finds this, he can repaste the code here.
Regards,
Pizza Boi
Sorry, I believe that copying AvacWeb's style would merit you plagiarism; however, I do remember Ange helping a person with almost the same predicament as yours. Please search his profile for the topic concerning that or if he finds this, he can repaste the code here.
Regards,
Pizza Boi
Pizza Boi- Hyperactive
- Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!
Re: add tab
Kite Trojan wrote:So, what you mean is the navigation bar in tabs?
Hi
Nope, he means the topics, forums, etc. Like the one in Avacweb, the navigation bar is above.
Regards,
Pizza Boi
Pizza Boi- Hyperactive
- Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!
Re: add tab
I've seen ange tuteur post about this, but I forgot where it was xD
i already search it but is not showing
i already search it but is not showing
Re: add tab
Administration panel > modules > javascript codes management > create a new script
Title : what you wish
Placement : in the homepage
Paste the code below and save :
Then add this CSS :
Display > colors > CSS stylesheet
result should be similar to : http://generaltesting.forumotion.com/forum
Title : what you wish
Placement : in the homepage
Paste the code below and save :
- Code:
$(document).ready(function() {
$('.main:has(.statused) .main-content').each(function() { $(this).attr('id','forum'+$(this).index()).hide() });
$('.main:has(.statused) .main-head .page-title').each(function() { $(this).unwrap().attr('id','tab'+$(this).next().attr('id').replace(/forum/,'')) });
$('.main:has(.statused)').before('<div id="tabNav"></div><div id="forumList"></div>');
$('.main:has(.statused) .page-title').addClass('forumTab').appendTo('#tabNav');
$('.main:has(.statused) .main-content').addClass('forumCatg').appendTo('#forumList');
$('.forumTab').click(function() {
var n = $(this).attr('id').replace(/tab/,'');
if ($('#forum'+n).css('display') == 'none') {
$('.forumCatg').not($('#forum'+n)).hide();
$('#forum'+n).show()
}
else { $('#forum'+n).hide() }
});
});
Then add this CSS :
Display > colors > CSS stylesheet
- Code:
.forumTab {
display:inline-block;
background:#EEE;
border:1px solid #CCC;
padding:2px;
margin:0 3px;
cursor:pointer;
}
.forumTab:hover { background:#FFA; }
result should be similar to : http://generaltesting.forumotion.com/forum
Re: add tab
wohooooo thank you very much
i want it
edit:
do not close this topic first
if there is a problem I would ask here.
and if it is solved I will mark as solved
edit:
how to create tabs with tab content with what I want?
example;
Tab 1
content with forum list (full subforum)
Tab 2
content with h1-chatbox (html)
Tab 3
content with h2-request (html)
i want it
edit:
do not close this topic first
if there is a problem I would ask here.
and if it is solved I will mark as solved
edit:
how to create tabs with tab content with what I want?
example;
Tab 1
content with forum list (full subforum)
Tab 2
content with h1-chatbox (html)
Tab 3
content with h2-request (html)
Re: add tab
For loading an html page you would have to use an iframe :
You're just adding onto the code by creating a new tab, and an iframe for your HTML page :
- Code:
$(document).ready(function() {
$('.main:has(.statused) .main-content').each(function() { $(this).attr('id','forum'+$(this).index()).hide() });
$('.main:has(.statused) .main-head .page-title').each(function() { $(this).unwrap().attr('id','tab'+$(this).next().attr('id').replace(/forum/,'')) });
$('.main:has(.statused)').before('<div id="tabNav"></div><div id="forumList"></div>');
$('.main:has(.statused) .page-title').addClass('forumTab').appendTo('#tabNav');
$('.main:has(.statused) .main-content').addClass('forumCatg').appendTo('#forumList');
$('.forumTab').click(function() {
var n = $(this).attr('id').replace(/tab/,'');
if ($('#forum'+n).css('display') == 'none') {
$('.forumCatg').not($('#forum'+n)).hide();
$('#forum'+n).show()
}
else { $('#forum'+n).hide() }
});
$('#tabNav').append('<span id="h1Tab" class="forumTab">H1 PAGE</span>');
$('#forumList').append('<iframe id="h1Page" class="forumCatg" src="/h1-" style="display:none;"></iframe>');
$('#h1Tab').click(function() {
if ($('#h1Page').css('display') == 'none') {
$('.forumCatg').not($('#h1Page')).hide();
$('#h1Page').show()
}
else { $('#h1Page').hide() }
});
});
You're just adding onto the code by creating a new tab, and an iframe for your HTML page :
- Code:
$('#tabNav').append('<span id="h1Tab" class="forumTab">H1 PAGE</span>');
$('#forumList').append('<iframe id="h1Page" class="forumCatg" src="/h1-" style="display:none;"></iframe>');
$('#h1Tab').click(function() {
if ($('#h1Page').css('display') == 'none') {
$('.forumCatg').not($('#h1Page')).hide();
$('#h1Page').show()
}
else { $('#h1Page').hide() }
});
Re: add tab
thank you very much its work
i already making my tabs xD
but when click the tab content does not change
my tab is
i already making my tabs xD
but when click the tab content does not change
my tab is
- Code:
<div id="erctabs_container">
<ul id="ercstabs">
<li class="ercactive">
<a href="#erctab1">TAB1</a>
</li>
<li>
<a href="#erctab2">TAB2</a>
</li>
<li>
<a href="#erctab3">TAB3</a>
</li>
<li>
<a href="#erctab4">TAB4</a>
</li>
<li>
<a href="#erctab5">TAB5</a>
</li>
<li>
<a href="#erctab6">TAB6</a>
</li>
</ul>
</div>
<div id="erctabs_content_container">
<div style="display: block;" class="erctab_content" id="erctab1">
tab 1 content
</div>
<div id="erctab2" class="erctab_content">
content tab 2
</div>
<div id="erctab3" class="erctab_content">
content tab 3
</div>
<div id="erctab4" class="erctab_content">
content tab 5
</div>
<div id="erctab5" class="erctab_content">
content tab 5
</div>
<style>
.ercglow {
background: url("http://i45.servimg.com/u/f45/15/95/60/34/glitte10.gif");
}
.ercsyarat {
background: url("http://i39.servimg.com/u/f39/16/49/10/98/highli10.png") repeat-x scroll 0pt 1px rgb(153, 255, 153);
padding: 5px;
color: black;
font-weight: bold;
margin-bottom:20px;
}
#erctabs_container {
border-bottom: 1px solid #ccc;
}
#ercstabs {
list-style: none;
padding: 5px 0 4px 0;
margin: 0 0 0 10px;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 13px;
}
#ercstabs li {
display: inline;
}
#ercstabs li a {
border-style: solid solid none;
-moz-border-top-colors: none;
-moz-border-right-colors: none;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
border-image: none;
padding: 4px 6px;
text-decoration: none;
border-radius: 5px 5px 0px 0px;
font-weight: bold;
color: black;
border-width: 1px 1px medium;
border-color: grey;
outline: medium none;
background: #3AAA00 url(http://i.imgur.com/uvFX29f.png)!important;
}
#ercstabs li a:hover {
padding: 4px 6px;
background-color: grey;
color: white;
font-weight: bold;
}
#ercstabs li.active a {
padding: 4px 6px 5px;
border-bottom: medium none;
font-weight: bold;
color: white;
background: #00569C url(http://i.imgur.com/uvFX29f.png)!important;}
#ercstabs li.active a:hover {
padding: 4px 6px 5px;
border-bottom: medium none;
background-color: red;
}
#erctabs_content_container {
border-width: medium 1px 1px;
border-style: none solid solid;
border-color: -moz-use-text-color rgb(204, 204, 204) rgb(204, 204, 204);
-moz-border-top-colors: none;
-moz-border-right-colors: none;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
border-image: none;
padding: 10px;
background: #00569C url(http://i.imgur.com/uvFX29f.png)!important;
height: 200px;
overflow: auto;
}
.erctab_content {
display: none;
}
.erccoincopy{
float: center;
font-weight: bold;
color: black;
font-size: 13px;
}
</style><script> $(document).ready(function(){
// When user clicks on tab, this code will be executed
$("#ercstabs li").click(function() {
// First remove class "active" from currently active tab
$("#ercstabs li").removeClass('ercactive');
// Now add class "active" to the selected/clicked tab
$(this).ercaddClass("ercactive");
// Hide all tab content
$(".erctab_content").hide();
// Here we get the href value of the selected tab
var ercselected_tab = $(this).find("a").attr("href");
// Show the selected tab content
$(ercselected_tab).fadeIn();
// At the end, we add return false so that the click on the link is not executed
return false;
});
});</script>
<div style="clear:both;" id="w27f207">
<div align="center">
<div style="text-align:center; display:inline-block; margin:0 auto;">
<table syle="padding:0; margin:0; border:none;" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td style="padding:32px;" valign="top">
</td>
<td style="padding:32px;" valign="top">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div style="height:3px">
</div>
</div>
Re: add tab
Is this all in one code? You are mixing CSS and JavaScript together.
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: add tab
yes i want put to generalitiesSLGray wrote:Is this all in one code? You are mixing CSS and JavaScript together.
Re: add tab
no, I have the above code but the code does not run smoothly, when I click another tab, the content should not be changed like this:
TAB 1
content: erchima 1
TAB 2
content: erchima 2
When I click TAB 2 content was unchanged at erchima 1
the code I used was:
TAB 1
content: erchima 1
TAB 2
content: erchima 2
When I click TAB 2 content was unchanged at erchima 1
the code I used was:
- Code:
<div id="erctabs_container">
<ul id="ercstabs">
<li class="ercactive">
<a href="#erctab1">TAB1</a>
</li>
<li>
<a href="#erctab2">TAB2</a>
</li>
<li>
<a href="#erctab3">TAB3</a>
</li>
<li>
<a href="#erctab4">TAB4</a>
</li>
<li>
<a href="#erctab5">TAB5</a>
</li>
<li>
<a href="#erctab6">TAB6</a>
</li>
</ul>
</div>
<div id="erctabs_content_container">
<div style="display: block;" class="erctab_content" id="erctab1">
tab 1 content
</div>
<div id="erctab2" class="erctab_content">
content tab 2
</div>
<div id="erctab3" class="erctab_content">
content tab 3
</div>
<div id="erctab4" class="erctab_content">
content tab 5
</div>
<div id="erctab5" class="erctab_content">
content tab 5
</div>
<style>
.ercglow {
background: url("http://i45.servimg.com/u/f45/15/95/60/34/glitte10.gif");
}
.ercsyarat {
background: url("http://i39.servimg.com/u/f39/16/49/10/98/highli10.png") repeat-x scroll 0pt 1px rgb(153, 255, 153);
padding: 5px;
color: black;
font-weight: bold;
margin-bottom:20px;
}
#erctabs_container {
border-bottom: 1px solid #ccc;
}
#ercstabs {
list-style: none;
padding: 5px 0 4px 0;
margin: 0 0 0 10px;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 13px;
}
#ercstabs li {
display: inline;
}
#ercstabs li a {
border-style: solid solid none;
-moz-border-top-colors: none;
-moz-border-right-colors: none;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
border-image: none;
padding: 4px 6px;
text-decoration: none;
border-radius: 5px 5px 0px 0px;
font-weight: bold;
color: black;
border-width: 1px 1px medium;
border-color: grey;
outline: medium none;
background: #3AAA00 url(http://i.imgur.com/uvFX29f.png)!important;
}
#ercstabs li a:hover {
padding: 4px 6px;
background-color: grey;
color: white;
font-weight: bold;
}
#ercstabs li.active a {
padding: 4px 6px 5px;
border-bottom: medium none;
font-weight: bold;
color: white;
background: #00569C url(http://i.imgur.com/uvFX29f.png)!important;}
#ercstabs li.active a:hover {
padding: 4px 6px 5px;
border-bottom: medium none;
background-color: red;
}
#erctabs_content_container {
border-width: medium 1px 1px;
border-style: none solid solid;
border-color: -moz-use-text-color rgb(204, 204, 204) rgb(204, 204, 204);
-moz-border-top-colors: none;
-moz-border-right-colors: none;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
border-image: none;
padding: 10px;
background: #00569C url(http://i.imgur.com/uvFX29f.png)!important;
height: 200px;
overflow: auto;
}
.erctab_content {
display: none;
}
.erccoincopy{
float: center;
font-weight: bold;
color: black;
font-size: 13px;
}
</style><script> $(document).ready(function(){
// When user clicks on tab, this code will be executed
$("#ercstabs li").click(function() {
// First remove class "active" from currently active tab
$("#ercstabs li").removeClass('ercactive');
// Now add class "active" to the selected/clicked tab
$(this).ercaddClass("ercactive");
// Hide all tab content
$(".erctab_content").hide();
// Here we get the href value of the selected tab
var ercselected_tab = $(this).find("a").attr("href");
// Show the selected tab content
$(ercselected_tab).fadeIn();
// At the end, we add return false so that the click on the link is not executed
return false;
});
});</script>
<div style="clear:both;" id="w27f207">
<div align="center">
<div style="text-align:center; display:inline-block; margin:0 auto;">
<table syle="padding:0; margin:0; border:none;" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td style="padding:32px;" valign="top">
</td>
<td style="padding:32px;" valign="top">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div style="height:3px">
</div>
</div>
Re: add tab
Where are you adding this code?
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: add tab
on HTML page then will I call in generalitiesSLGray wrote:Where are you adding this code?
in the code there is code that conflicts
please help me to fix it
Re: add tab
Are you using the tab code I provided or someone else ? I'm not exactly sure what you're using anymore.
Re: add tab
i learn here https://jqueryui.com/tabs/Ange Tuteur wrote:Are you using the tab code I provided or someone else ? I'm not exactly sure what you're using anymore.
then I apply with css & js
but there is a code that does not run
Re: add tab
You wont be able to use the functions for jQueryUI without the library. Have you installed the library in your forum ?
Re: add tab
but I believe only the js under.
- Code:
<script> $(document).ready(function(){
// When user clicks on tab, this code will be executed
$("#ercstabs li").click(function() {
// First remove class "active" from currently active tab
$("#ercstabs li").removeClass('ercactive');
// Now add class "active" to the selected/clicked tab
$(this).ercaddClass("ercactive");
// Hide all tab content
$(".erctab_content").hide();
// Here we get the href value of the selected tab
var ercselected_tab = $(this).find("a").attr("href");
// Show the selected tab content
$(ercselected_tab).fadeIn();
// At the end, we add return false so that the click on the link is not executed
return false;
});
});</script>
Re: add tab
ercaddClass() isn't a function, use addClass() instead.
- Code:
$(document).ready(function(){
// When user clicks on tab, this code will be executed
$("#ercstabs li").click(function() {
// First remove class "active" from currently active tab
$("#ercstabs li").removeClass('ercactive');
// Now add class "active" to the selected/clicked tab
$(this).addClass("ercactive");
// Hide all tab content
$(".erctab_content").hide();
// Here we get the href value of the selected tab
var ercselected_tab = $(this).find("a").attr("href");
// Show the selected tab content
$(ercselected_tab).fadeIn();
// At the end, we add return false so that the click on the link is not executed
return false;
});
});
Re: add tab
wohoooo i love it.Ange Tuteur wrote:ercaddClass() isn't a function, use addClass() instead.
- Code:
$(document).ready(function(){
// When user clicks on tab, this code will be executed
$("#ercstabs li").click(function() {
// First remove class "active" from currently active tab
$("#ercstabs li").removeClass('ercactive');
// Now add class "active" to the selected/clicked tab
$(this).addClass("ercactive");
// Hide all tab content
$(".erctab_content").hide();
// Here we get the href value of the selected tab
var ercselected_tab = $(this).find("a").attr("href");
// Show the selected tab content
$(ercselected_tab).fadeIn();
// At the end, we add return false so that the click on the link is not executed
return false;
});
});
it's work
thank you very much
Re: add tab
great work for punbbAnge Tuteur wrote:Administration panel > modules > javascript codes management > create a new script
Title : what you wish
Placement : in the homepage
Paste the code below and save :
- Code:
$(document).ready(function() {
$('.main:has(.statused) .main-content').each(function() { $(this).attr('id','forum'+$(this).index()).hide() });
$('.main:has(.statused) .main-head .page-title').each(function() { $(this).unwrap().attr('id','tab'+$(this).next().attr('id').replace(/forum/,'')) });
$('.main:has(.statused)').before('<div id="tabNav"></div><div id="forumList"></div>');
$('.main:has(.statused) .page-title').addClass('forumTab').appendTo('#tabNav');
$('.main:has(.statused) .main-content').addClass('forumCatg').appendTo('#forumList');
$('.forumTab').click(function() {
var n = $(this).attr('id').replace(/tab/,'');
if ($('#forum'+n).css('display') == 'none') {
$('.forumCatg').not($('#forum'+n)).hide();
$('#forum'+n).show()
}
else { $('#forum'+n).hide() }
});
});
Then add this CSS :
Display > colors > CSS stylesheet
- Code:
.forumTab {
display:inline-block;
background:#EEE;
border:1px solid #CCC;
padding:2px;
margin:0 3px;
cursor:pointer;
}
.forumTab:hover { background:#FFA; }
result should be similar to : http://generaltesting.forumotion.com/forum
my forum is phpbb2 is there some thing like it for phpbb2 none template
Michael_vx- Forumember
- Posts : 659
Reputation : 29
Language : Arabic and some English
Location : Egypt
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum