i think thats very awesome if can toggle the widget
March 2024
Search
Similar topics
Who is online?
In total there is 1 user online :: 0 Registered, 0 Hidden and 1 Guest
None
Most users ever online was 140 on July 4th 2021, 2:03 pm
None
Most users ever online was 140 on July 4th 2021, 2:03 pm
Most Viewed Topics
Top posting users this week
No user |
Category Toggle [PunBB - PhpBB2]
Hey guys this is going to be a category toggle for you forum page. This will make it so when a users clicks the target area its contents will shrink. I have this for punbb and phpbb2, I made a few different codes to work with every different persons taste. This code is quite simple so I am giving it a difficulty level of 2 stars.
Make sure you select your forum type and which type of toggle you would like. There is multiple ways so check each of them out if you want to.
[hc = PunBB Click Head]
[hc = PunBB Click Button]
CSS TO ADD:
[hc = PhpBB2 Click Head]
[hc = PhpBB2 Image Click]
CSS to Add:
[/hc]
Make sure you select your forum type and which type of toggle you would like. There is multiple ways so check each of them out if you want to.
[hc = PunBB Click Head]
- Code:
$('.main-head').click(function() {
var g = $(this).next('.main-content').css('display');
if(g == "block") {
$(this).next('.main-content').slideUp();
} else {
$(this).next('.main-content').slideDown();
}
});
[hc = PunBB Click Button]
- Code:
$('.main-head').append('<span class="toggles"><img src="http://2img.net/i/fa/m/tabs_less1.gif"/></span>');
$('.toggles').on('click',function() {
var g = $(this).parent().next('.main-content').css('display');
if(g == "block") {
$(this).children('img').attr('src','http://2img.net/i/fa/subsilver/tabs_more.gif').parent().parent().next('.main-content').slideUp();
} else {
$(this).children('img').attr('src','http://2img.net/i/fa/m/tabs_less1.gif').parent().parent().next('.main-content').slideDown();
}
});
CSS TO ADD:
- Code:
.main-head{
position:relative;
}
.toggles {
position: absolute;
right: 5px;
top: 5px;
}
[hc = PhpBB2 Click Head]
- Code:
$('.secondarytitle').parent().addClass('toggles');
$('.toggles').on('click',function() {
var g = $(this).next('tr').css('display');
if(g == "table-row") {
$(this).parent().children('tr').not(":eq(0)").slideUp();
} else {
$(this).parent().children('tr').not(":eq(0)").slideDown();
}
});
[hc = PhpBB2 Image Click]
- Code:
$('.secondarytitle').parent().append('<span class="toggles"><img src="http://2img.net/i/fa/m/tabs_less1.gif"/></span>');
$('.toggles').on('click',function() {
var g = $(this).parent().next('tr').css('display');
if(g == "table-row") {
$(this).children('img').attr('src','http://2img.net/i/fa/subsilver/tabs_more.gif').parent().parent().parent().children('tr').not(":eq(0)").slideUp();
} else {
$(this).children('img').attr('src','http://2img.net/i/fa/m/tabs_less1.gif').parent().parent().parent().children('tr').not(":eq(0)").slideDown();
}
});
CSS to Add:
- Code:
.toggles {
position: absolute;
right: 5px;
top: 5px;
}
.forumline {
position:relative;
}
[/hc]
Similar topics
Just a quick question regarding this topic in PHBB2 format. When I post the first code (Not the CSS Code) It looks like Javascript, if I'm correct? Do I paste the Javascript code into the Javascript Coding Mangement, or where do I place that code?
I've placed the Javascript code into the Javascript Coding Managment with (In All Pages) checked, along with the CSS code into the CSS Code Management, and it doesn't seem to be working.
Is there something I'm doing wrong?
I've placed the Javascript code into the Javascript Coding Managment with (In All Pages) checked, along with the CSS code into the CSS Code Management, and it doesn't seem to be working.
Is there something I'm doing wrong?
Hey CJ, all you need to do is add the code in Javascript wrapped in a dom ready function... like so
- Code:
$(function() {
//code inside here
});
There is no demo for this, I will try to get some demos added up for you all ok. Sorry, it will be a trick so I can get the generated HTML to show you all.
|
|