CivicIdeas Forums Show

by Pete Fecteau

HTML

<script src="https://buttonpresser.com/CivicIdeas_BS/js/bootstrap.min.js"></script>
<script src="https://buttonpresser.com/CivicIdeas_BS/js/goog_trans.js"></script>
<div class="standard-nav alone navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <div class="nav-collapse" id="main-menu">
                <ul class="nav" id="main-menu-left">
                    <li class="nav-home"><a href="#">Home</a></li>
                    <li class="nav-ideas"><a href="#">Ideas</a></li>
                    <li class="nav-projects"><a href="#">Projects</a></li>
                    <li class="nav-discussions"><a href="#">Discussions</a></li>
                    <li class="nav-forums active"><a href="#">Forums</a></li>
                    <li class="nav-meetings"><a href="#">Meetings</a></li>
                    <li class="nav-surveys"><a href="#">Surveys</a></li>
                </ul>
                <ul class="nav pull-right" id="main-menu-right">
                    <li class="language">
                        <div id="google_translate_element"></div>
                    </li>
                    <li>
                        <form class="navbar-search pull-left" action="">
                            <input type="text" class="search-query span2" placeholder="Search" />
                        </form>
                    </li>
                    <li>
                        <a href="#" id="navbar-login" class="open-my-profile">Login or Register</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="row page-top">
    <div class="span12">
        <img src="https://buttonpresser.com/CivicIdeas_BS/img/banner.png" />
    </div>
</div>
<div class="row">
    <div class="span9">
        <section class="forum">
            <div class="header forum-header"></div>
            <h2>Abolish Work Meetings</h2>
            <div class="body">
                <img class="image"...

SCSS

@import url('https://buttonpresser.com/CivicIdeas_BS/css/bootstrap.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/bootstrap-custom.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/global-nav.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/global-sidebar.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/global-footer.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/global-modal.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/global-headers.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/header-forum.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/header-idea.css');
body {background:#DEDFE0;}
.ideation {margin-bottom:20px;}
section.idea {
    padding:10px 0 40px;
    .header.small-idea-header {
        margin:0 30px -10px -30px;
        cursor:pointer;
    }
    h2 {
        font-size:17.5px;
        line-height:161%;
        margin:0;
        text-overflow: ellipsis;
        width: 550px;
        white-space: nowrap;
        overflow: hidden;
    }
    .body {
        margin:0px 0 -40px;
        min-height:0;
        padding-top:0;
        float:left;
        width:100%;
        img {display:none;}
        p {display:none;}
        .avatar {
            position:relative;
            left:55px;
            display:block;
        }
        .cite {
            position:relative;
            left:55px;
        }
        .status {
            position:relative;
            float:right;
            right:600px;
        }
    }
    .btn-secondary {
        position:relative;
        top:0;
        height:30px;
    }
}

JavaScript

$('.open-my-profile').live('click', function() {                                                       
    $('#my-profile-modal').show();
    return false;
});
	
$(".close").live("click", function() {
    $('#my-profile-modal').hide();
    return false;
});

$('#modal-wrapper').css('width', wrapperWidth);
var boxWidth = $('#modal-body').width();
var boxCount = $('#modal-wrapper').children().length;
var boxPos = boxWidth + 20;
var currentPos = $('#modal-wrapper').css('left').replace('px', '');
var currentIndex = (currentPos/boxPos);                                                             
var wrapperWidth = (boxCount*boxPos)+100;

$('#modal-wrapper .modal-body-box').each(function( index ) {
    var boxPlacement = (boxPos*index);
    $(this).addClass('box' + index);
    $(this).css('left', boxPlacement);
});

$('.nav-list li a').each(function( index ) {
    $(this).addClass('nav' + index);
    $(this).click(function() {
        var boxSlide = index - currentIndex;
        var boxShift = (boxPos*boxSlide)*(-1);
        var after = 'px';
        var boxVal = boxShift + after;
        $('#modal-wrapper').animate({
            left: boxVal
        }, 800, 'linear', function() {
        });
        
        var activeNav = $('#modal-nav ul .active');
        var thisNav = $(this).parent('li');
        var thisNavSibs = thisNav.siblings('li');
        thisNavSibs.removeClass('active');
        thisNav.addClass('active');
        return false;
    });
});

$('.next-box').click(function() {
    var before = '-=';
    var after = 'px';
    var boxVal = before + boxPos + after;
    $('#modal-wrapper').animate({
        left: boxVal
    }, 500, function() {
    });
    var currentPos =  parseInt(($('#modal-wrapper').css('left').replace('px','')), 10);
    var newPos = (parseInt(($('#modal-wrapper').css('left').replace('px','')), 10) + (boxPos))*(-1);
    var nextIndex = (newPos/boxPos)+(2);
    var nextNavBefore = '.nav';
    var nextNavClass = nextNavBefore +...