Good art is a taste, good design is an opinion.


Come as guest, stay as family.
Board Index

Come as guest, stay as family.


You are not connected. Please login or register

Foto

[Javascript] View Basic and Advanced Topics



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

1
Offline

  Shadow

avatar
Administrator
Administrator


Tutorial: View Basic and Advanced Topic [Cookies included]

This tutorial will provide you the function of browsing forums without looking avatars and profile details with a cookie function to save chosen option per every browser.

Credits: @Tubolik (Possibly @Daemon)

--> Tutorials, tips and tricks <--
View Basic and Advanced Topics [Cookies included]



- Javascript
Placement In topics
Code:
[panda=js]$(function () {
            $('div.main-head.clearfix:first p.h2').prepend('<div class="topicViewIcons"><a id="topicViewRegular" title="Regular View" class="active"><img src="http://i57.servimg.com/u/f57/17/68/86/50/spacer10.gif" alt=""></a><a id="topicViewBasic" title="Basic View"><img src="http://i57.servimg.com/u/f57/17/68/86/50/spacer11.gif" alt=""></a></div>');
            function topicViewBasic() {
                $(".pun .post .user").hide("user");
                $(".postmain").css('margin-left', '0px');
                $(".postfoot").css('margin-left', '0px');
                $("#topicViewRegular").removeClass("active");
                $("#topicViewBasic").addClass('active');
                $("div.main-content.topic").addClass("basicTopicView");
            }
            function topicViewRegular() {
                $(".pun .post .user").show("user");
                $(".postmain").css('margin-left', '17em');
                $(".postfoot").css('margin-left', '-17em');
                $("#topicViewBasic").removeClass("active");
                $("#topicViewRegular").addClass('active');
                $("div.main-content.topic").removeClass("basicTopicView");
            }
            var cookie = my_getcookie('topicViewBasic');
            if (cookie == 1) topicViewBasic();
            $('#topicViewBasic').click(function () {
                my_setcookie('topicViewBasic', 1);
                topicViewBasic();
            });
            $('#topicViewRegular').click(function () {
                my_setcookie('topicViewBasic', 0);
                topicViewRegular();
            });
        });


- CSS
Code:
[panda=css]        /*viewTopic*/
        .topicViewIcons {
        overflow: hidden;
        position: relative;
        padding-bottom: 1px;
        margin: -3px 10px -5px 0;
        float: left;
        }
        .topicViewIcons a {
        cursor: pointer;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        float: left;
        width: 22px;
        height: 22px;
        text-decoration: none;
        text-align: center;
        outline: none;
        margin-right: 5px;
        opacity: 0.6;
        }
        .topicViewIcons a:hover {
          background:url("http://i72.servimg.com/u/f72/18/07/42/17/trans110.png") repeat;
          background:rgba(0,0,0,0.1);
          opacity:0.8
        }
        .topicViewIcons #topicViewRegular.active img {
        background-position: 0 -16px;
        }
        .topicViewIcons a.active {
        background: url("http://i72.servimg.com/u/f72/18/07/42/17/trans510.png") repeat;
        background: rgba(0,0,0,0.5);
        -webkit-box-shadow: inset rgba(0,0,0,0.6) 0px 1px 3px, rgba(255,255,255,0.3) 0px 1px 0px;
        -moz-box-shadow: inset rgba(0,0,0,0.6) 0px 1px 3px, rgba(255,255,255,0.3) 0px 1px 0px;
        box-shadow: inset rgba(0,0,0,0.6) 0px 1px 3px, rgba(255,255,255,0.3) 0px 1px 0px;
        opacity: 1;
        }
        .topicViewIcons #topicViewRegular img {
        background-position: 0 0;
        }
        .topicViewIcons img {
        opacity: 1!important;
        vertical-align: top;
        margin-top: 4px;
        width: 16px;
        height: 16px;
        background: url("http://i72.servimg.com/u/f72/18/07/42/17/topicv10.png") no-repeat;
        }
        .topicViewIcons #topicViewBasic.active img {
        background-position: -16px -16px;
        }


- Preview






© PunBB Design


If you have any questions related to this topic create a topic with the following title:
View Basic and Advanced Topic [Cookies included]

Powered by PunBB
Currently 0 users have thanked Shadow for this post:

2
Offline

  Michael_vx

avatar
Punbb Junior
Punbb Junior
im confused
more details please
if possible :/
thanks

Powered by PunBB
Currently 0 users have thanked Michael_vx for this post:

3
Offline

  Virus

avatar
★Moderator★
★Moderator★
@Michael_vx wrote:[link="/t739-javascript-view-basic-and-advanced-topics#4753"]im confused
more details please
if possible :/
thanks
This will hide the profiles in the posts and view only the posts and as soon as you click the other image it will appear the profiles again.

Powered by PunBB
Currently 0 users have thanked Virus for this post:

4
Offline

  RoyalLand

avatar
Punbb Rookie
Punbb Rookie
thanks punbb its working 100% on my forum

forum version punbb love u punbb

Powered by PunBB
Currently 0 users have thanked RoyalLand for this post:

5
Offline

  Sponsored content



Powered by PunBB
Currently 0 users have thanked Sponsored content for this post:

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


Topic URL's

URL
BBcode
HTML

Permissions in this forum:
You cannot reply to topics in this forum