CivicIdeas Homepage

with Featured Slideshow

by Pete Fecteau

HTML

<script src="https://buttonpresser.com/CivicIdeas_BS/js/bootstrap.js"></script>
<script src="https://buttonpresser.com/CivicIdeas_BS/js/faux-feed.js"></script>
<div class="standard-nav 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 active"><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"><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>
                        <form class="navbar-search pull-left">
                            <input type="text" class="search-query" placeholder="Search" />
                        </form>
                    </li>
                    <li class="dropdown">
                      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Ron Swanson <span class="caret"></span></a>
                      <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                        <li><a href="../default">Log Out</a></li>
                        <li class="divider"></li>
                        <li><a href="#" class="open-my-profile">Edit Profile</a></li>
                        <li><a href="#">My Ideas</a></li>
                        <li><a href="#">My Connections</a></li>
                        <li><a href="#">My Apps</a></li>
                        <li><a href="#">Change Language</a></li>
                      </ul>
                    </li>
               ...

CSS

@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-hdr.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/header-idea.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/header-discussion.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/header-project.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/header-forum.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/header-meeting.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/header-survey.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/widget-open-ideation.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/widget-attach-media.css');
.ideation {width:902px;}
section {
    border-bottom: 1px solid #DEDFE0;
    padding:20px 0;
}
section .body {clear:left;padding-top:10px;}

.featured .featured-header {
    margin-top:-50px;
    display:block;
    margin-bottom:20px;
    width:720px;
    line-height:50px;
    border-bottom: 1px solid #DEDFE0;
}
.featured .featured-video {
    padding:20px 0;
}
.featured .media {
    padding:20px 0;
}
.featured .media .carousel {
    height:400px;
}
.featured .media .slideshow-header {
    position:relative;
    top:38px;
    margin-top:-38px;
    font-size:17.5px;
    line-height:161%;
    color:#FFF;
    background-color: rgba(0,0,0,0.4);
    padding:5px 20px;
    width:660px;
    z-index:999;
    cursor:default;
}
.carousel-inner .item img {
    position: relative;
    top: -50px;
}
section.media ul li h4.slideshow::before,
section.media ul li h4.video::before,
section.media ul...

JavaScript

$('.dropdown-toggle').dropdown();
$('.carousel').carousel();
$('.collapse').collapse();

$('.well.closer').each(function() {
  $(this).prepend('<div class="close-box">&times;</div>');
});
$(function(){
    $('.close-box').click(function() {
        $(this).parent().fadeOut(1000);
    });
}); 

$(function(){
    $(".new-idea").live("click", function() {
        var desc = $(this).parent().find('div.home-idea-desc');
        desc.animate({
            height: 300
          }, 800, function() {
      });
        return false;
	});
    $(".idea-clear").live("click", function() {
        var desc = $(this).parent().parent().parent().find('div.home-idea-desc')
        desc.animate({
            height: 0,
          }, 800, function() {
      });
	});
});

$(".hdr.off").live("click", function() {
    var voteBtn = $(this).parent().find('.meta').find('.btn.vote');
    var voteCount = parseInt($(this).data('vote'), 10);
    var newVoteCount = voteCount + 1;	
    $(this).attr('data-vote', newVoteCount);
    $(this).addClass('on');
    $(this).removeClass('off');
    $(voteBtn).html('Voted');
    $(voteBtn).addClass('voted');
    $(voteBtn).removeClass('vote');
});
$(".hdr.on").live("click", function() {
    var voteBtn = $(this).parent().find('.meta').find('.btn.voted');
    var voteCount = parseInt($(this).data('vote'), 10);
    var newVoteCount = voteCount;	
    $(this).attr('data-vote', newVoteCount);
    $(this).addClass('off');
    $(this).removeClass('on');    
    $(voteBtn).html('Vote');
    $(voteBtn).addClass('vote');
    $(voteBtn).removeClass('voted');
});
$(".btn.vote").live("click", function() {
    var hdr = $(this).parent().parent().find('.hdr');
    var followBtn = $(this).parent().find('.btn.follow');
    var voteCount = parseInt(hdr.data('vote'), 10);
    var newVoteCount = voteCount + 1;
    $(this).html('Voted');
    $(this).addClass('voted');
    $(this).removeClass('vote');
    $(hdr).attr('data-vote', newVoteCount);
    $(hdr).addClass('on');
   ...