[Javascript] View Basic and Advanced Topics

Tutorial: View Basic and Advanced Topic [Cookies included]

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

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

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

Michael_vx wrote:[link="/t739-javascript-view-basic-and-advanced-topics#4753"]im confused
more details please
if possible :/
thanks