Back To Top
Login
Register
Visit Us At TwitterVisit Us At YouTubeVisit Us At Facebook
KandiChat is in Beta Release. Try It Out
HomeHome  
  • UpdatesUpdates  
  • SearchSearch  
  • RegisterRegister  
  • Log inLog in  
  • July 2017
    MonTueWedThuFriSatSun
         12
    3456789
    10111213141516
    17181920212223
    24252627282930
    31      

    Calendar Calendar

    Search
     
     

    Display results as :
     


    Rechercher Advanced Search

    Shopmotion


    Who is online?
    In total there is 1 user online :: 0 Registered, 0 Hidden and 1 Guest

    None

    Most users ever online was 22 on June 26th 2013, 6:10 am
    RSS feeds


    Poll
    Top posting users this week


    View previous topic View next topic Go down  Message [Page 1 of 1]

    avatar

    Category Toggle [PunBB - PhpBB2]

    Mr.EasyBB
    03/19/2013
      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]
    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]


    [hc = PunBB Click Button]
    Code:
    $('.main-head').append('<span class="toggles"><img src="http://illiweb.com/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://illiweb.com/fa/subsilver/tabs_more.gif').parent().parent().next('.main-content').slideUp();
    } else {
     $(this).children('img').attr('src','http://illiweb.com/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]


    [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]

    [hc = PhpBB2 Image Click]
    Code:
    $('.secondarytitle').parent().append('<span class="toggles"><img src="http://illiweb.com/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://illiweb.com/fa/subsilver/tabs_more.gif').parent().parent().parent().children('tr').not(":eq(0)").slideUp();
    } else {
    $(this).children('img').attr('src','http://illiweb.com/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]
    Share this post on: Excite BookmarksDiggRedditDel.icio.usGoogleLiveSlashdotNetscapeTechnoratiStumbleUponNewsvineFurlYahooSmarking

    avatar
    i think thats very awesome if can toggle the widget

    Post on March 21st 2013, 7:22 am by tommycoo

    avatar
    You want to toggle widgets? Like how, each individual widget or all the widgets together?

    Post on March 21st 2013, 1:14 pm by Mr.EasyBB

    avatar
    i want it individual not all Very Happy

    Post on March 21st 2013, 7:53 pm by tommycoo

    avatar
    Ok I will work on something for you my friend. And I will PM you when done ok

    Post on March 21st 2013, 8:07 pm by Mr.EasyBB

    avatar
    ok thanks easy Very Happy

    Post on March 21st 2013, 10:53 pm by tommycoo

    avatar
    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?

    Post on April 11th 2013, 12:47 pm by CJDesigns

    avatar
    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
    });

    Post on April 11th 2013, 4:10 pm by Mr.EasyBB

    avatar
    CJDesigns wrote:+-----
    test quoteing

    Post on April 13th 2013, 10:52 am by ConanSSC

    avatar
    please add demo Very Happy:

    Post on May 1st 2013, 2:22 am by mostone

    avatar
    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.

    Post on May 1st 2013, 3:22 pm by Mr.EasyBB

    avatar
    add the screenshot please

    Post on May 19th 2013, 1:36 am by FelixEdogawa

    Post  by Sponsored content

    View previous topic View next topic Back to top  Message [Page 1 of 1]