Hey guys! Can someone help me fix the tabbing issue on here please? When you reload index the gaming tab slides up then back down, I'd like it to not do that and on reload to just display without sliding if possible, unless another tab is clicked. Thanks in advance all
Link:
http://gamerztemple.com/
JS code for the tabs:
<script type="text/javascript">
$(document).ready(function($){
$('.tab').click(function(){
$('.at').removeClass('at');
$(this).addClass('at');
$('.tabbed_content').slideUp();
var catshow = $(this).attr('rel');
$('#'+ catshow).slideDown();
});
$('.tabbed_content').slideUp();
$('#cat_20').slideDown();
});
</script>
Tab code:
<table><tr><td valign="top"><div style="float: left;width: 73%;margin-right: 0.2%;position: relative;left: 0;clear: both;">
<table border="0" width="100%" class="tab_cat_border" cellpadding="4" cellspacing="0" style="margin-bottom: 0px;">
<tr align="center">
<td class="tab_cat at tab" title="" rel="cat_20" border="1px">Gaming</td>
<td class="tab_cat tab" title="" rel="cat_40" border="1px">General</td>
<td class="tab_cat tab" title="" rel="cat_41" border="1px">Technology</td>
<td class="tab_cat tab" title="" rel="cat_42" border="1px">Gaming Market</td>
</tr>
</table>
(2016-12-11, 12:57 PM)Chucky. Wrote: [ -> ]Hey guys! Can someone help me fix the tabbing issue on here please? When you reload index the gaming tab slides up then back down, I'd like it to not do that and on reload to just display without sliding if possible, unless another tab is clicked. Thanks in advance all
Link: http://gamerztemple.com/
JS code for the tabs:
<script type="text/javascript">
$(document).ready(function($){
$('.tab').click(function(){
$('.at').removeClass('at');
$(this).addClass('at');
$('.tabbed_content').slideUp();
var catshow = $(this).attr('rel');
$('#'+ catshow).slideDown();
});
$('.tabbed_content').slideUp();
$('#cat_20').slideDown();
});
</script>
Tab code:
<table><tr><td valign="top"><div style="float: left;width: 73%;margin-right: 0.2%;position: relative;left: 0;clear: both;">
<table border="0" width="100%" class="tab_cat_border" cellpadding="4" cellspacing="0" style="margin-bottom: 0px;">
<tr align="center">
<td class="tab_cat at tab" title="" rel="cat_20" border="1px">Gaming</td>
<td class="tab_cat tab" title="" rel="cat_40" border="1px">General</td>
<td class="tab_cat tab" title="" rel="cat_41" border="1px">Technology</td>
<td class="tab_cat tab" title="" rel="cat_42" border="1px">Gaming Market</td>
</tr>
</table>
I am currently not near a computer to help much but just a random thought, have you tried .hide() & .show() Or .fade()
simply for example:
<script type="text/javascript">
$(document).ready(function($){
$('.tab').click(function(){
$('.at').removeClass('at');
$(this).addClass('at');
$('.tabbed_content').hide();
var catshow = $(this).attr('rel');
$('#'+ catshow).show();
});
});
</script>
(2016-12-25, 03:47 AM)vintagedaddyo Wrote: [ -> ] (2016-12-11, 12:57 PM)Chucky. Wrote: [ -> ]Hey guys! Can someone help me fix the tabbing issue on here please? When you reload index the gaming tab slides up then back down, I'd like it to not do that and on reload to just display without sliding if possible, unless another tab is clicked. Thanks in advance all
Link: http://gamerztemple.com/
JS code for the tabs:
<script type="text/javascript">
$(document).ready(function($){
$('.tab').click(function(){
$('.at').removeClass('at');
$(this).addClass('at');
$('.tabbed_content').slideUp();
var catshow = $(this).attr('rel');
$('#'+ catshow).slideDown();
});
$('.tabbed_content').slideUp();
$('#cat_20').slideDown();
});
</script>
Tab code:
<table><tr><td valign="top"><div style="float: left;width: 73%;margin-right: 0.2%;position: relative;left: 0;clear: both;">
<table border="0" width="100%" class="tab_cat_border" cellpadding="4" cellspacing="0" style="margin-bottom: 0px;">
<tr align="center">
<td class="tab_cat at tab" title="" rel="cat_20" border="1px">Gaming</td>
<td class="tab_cat tab" title="" rel="cat_40" border="1px">General</td>
<td class="tab_cat tab" title="" rel="cat_41" border="1px">Technology</td>
<td class="tab_cat tab" title="" rel="cat_42" border="1px">Gaming Market</td>
</tr>
</table>
I am currently not near a computer to help much but just a random thought, have you tried .hide() & .show() Or .fade()
simply for example:
<script type="text/javascript">
$(document).ready(function($){
$('.tab').click(function(){
$('.at').removeClass('at');
$(this).addClass('at');
$('.tabbed_content').hide();
var catshow = $(this).attr('rel');
$('#'+ catshow).show();
});
});
</script>
Thank you. This fixed the issue:
<script type="text/javascript">
$(document).ready(function($){
$('.tab').click(function(){
$('.at').removeClass('at');
$(this).addClass('at');
$('.tabbed_content').slideUp();
var catshow = $(this).attr('rel');
$('#'+ catshow).slideDown();
});
$('.tabbed_content').hide();
$('#cat_20').show();
$('#cat_52').show();
});
</script>