Develop Reference

Continue and previous buttons not navigating Javascript bootstrap

Below is a piece of code I've been trying to get to work.
The Continue and previous buttons not working,The javascript is not showing the next and previous tabs.
Javascript:
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$('.prev').click(function () {
;
var prevId = $(this).parents('.tab-pane').prev().attr("id");
$('[href=#' + prevId + ']').tab('show');
return false;
});
$('.next').click(function () {
var nextId = $(this).parents('.tab-pane').next().attr("id");
$('[href=#' + nextId + ']').tab('show');
return false;
});
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
//update progress
var step = $(e.target).data('step');
var percent = (parseInt(step) / 6) * 100;
$('.progress-bar').css({ width: percent + '%' });
$('.progress-bar').text("Step " + step + " of 6");
//e.relatedTarget // previous tab
})
$('.first').click(function () {
$('#myWizard a:first').tab('show');
})
</script>
Html:
<div class="navbar">
<div class="navbar-inner">
<ul id="tabs1" class="nav nav-pills">
<li class="active">Basic Details</li>
<li>Data Source</li>
<li>Feature Generation</li>
<li>Aggregation over Time</li>
<li>Analysis</li>
<li>Output</li>
</ul>
</div>
the full code comes from:https://www.codeply.com/go/RMKW5H5u2e

You're missing quotes in $('[href=#' + nextId + ']') and $('[href=#' + prevId + ']')
Should be:
$('[href="#' + nextId + '"]').tab('show');
//and
$('[href="#' + prevId + '"]').tab('show');

So your problem is the jQuery syntax (you should look at your console output, you would have caught the error).
What need is:
$('.prev').click(function(){
var prevId = $(this).parents('.tab-pane').prev().attr("id");
$('a[href$=\"#'+prevId+'\"]').tab('show');
return false;
})
$('.next').click(function(){
var nextId = $(this).parents('.tab-pane').next().attr("id");
$('a[href$=\"#'+nextId+'\"]').tab('show');
return false;
})
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
//update progress
var step = $(e.target).data('step');
var percent = (parseInt(step) / 6) * 100;
$('.progress-bar').css({width: percent + '%'});
$('.progress-bar').text("Step " + step + " of 6");
//e.relatedTarget // previous tab
})
$('.first').click(function(){
$('#myWizard a:first').tab('show')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" id="myWizard">
<h3>New Anomaly Detection Model</h3>
<hr>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="6" style="width: 20%;">
Step 1 of 6
</div>
</div>
<div class="navbar">
<div class="navbar-inner">
<ul class="nav nav-pills">
<li class="active">Basic Details</li>
<li>Data Source</li>
<li>Feature Generation</li>
<li>Aggregation over Time</li>
<li>Analysis</li>
<li>Output</li>
</ul>
</div>
</div>
<div class="tab-content">
<div class="tab-pane fade in active" id="step1">
<div class="well">
<label>Security Question 1</label>
<select class="form-control input-lg">
<option value="What was the name of your first pet?">What was the name of your first pet?</option>
<option value="Where did you first attend school?">Where did you first attend school?</option>
<option value="What is your mother's maiden name?">What is your mother's maiden name?</option>
<option value="What is your favorite car model?">What is your favorite car model?</option>
</select>
<br>
<label>Enter Response</label>
<input class="form-control input-lg">
</div>
<a class="btn btn-default btn-lg next" href="#">Continue</a>
</div>
<div class="tab-pane fade" id="step2">
<div class="well">
<label>Choose Your Input Source</label>
<select class="form-control input-lg">
<option selected="" value="CSV">CSV</option>
<option value="Database">Database</option>
</select>
<br>
<label>Path</label>
<input class="form-control input-lg">
</div>
<a class="btn btn-default prev" href="#">Previous</a>
<a class="btn btn-default next" href="#">Continue</a>
</div>
<div class="tab-pane fade" id="step3">
<div class="well"> <h2>Step 3</h2> Add another step here..</div>
<a class="btn btn-default prev" href="#">Previous</a>
<a class="btn btn-default next" href="#">Continue</a>
</div>
<div class="tab-pane fade" id="step4">
<div class="well"> <h2>Step 4</h2> Add another almost done step here..</div>
<a class="btn btn-default prev" href="#">Previous</a>
<a class="btn btn-default next" href="#">Continue</a>
</div>
<div class="tab-pane fade" id="step5">
<div class="well"> <h2>Step 5</h2> Almost there!</div>
<a class="btn btn-default prev" href="#">Previous</a>
<a class="btn btn-default next" href="#">Continue</a>
</div>
<div class="tab-pane fade" id="step6">
<div class="well"> <h2>Step 6</h2> Last one!</div>
<a class="btn btn-default prev" href="#">Previous</a>
<a class="btn btn-success first" href="#">Start over</a>
</div>
</div>
<hr>
Edit on Bootply
<hr>
</div>
Do note the $("a[href$=\"#'+prevId+'\").tab('show'); is what makes your buttons work.
Source for my answer: Select tag with href

Bootstrap Wizard Issues

I am trying to use the twitter bootstrap wizard (http://vinceg.github.io/twitter-bootstrap-wizard/) and for some reason when the first tab/pill the next button is showing that it is disabled. The button does work when I click on it, but it doesn't appear to be fully active.
Here is video of the functionality I am seeing. You will notice that when the tab first opens tab 1 is selected. The progress bar is a 0% and the next button is showing disabled. When I click next it does move to the next tab. When I go back to the first tab, the progress bar has the correct width for tab 1 and now the next button for tab 1 is no longer disabled. Ideally I would like this functionality to work from the beginning.
YouTube Video:
https://youtu.be/zq9yCCUJQ68
HTML:
<div class="row">
<div class="col-md-12">
<ul class="nav nav-pills">
<li><a id="mywebsitesLink" data-toggle="tab" href="#mywebsites">My Websites</a></li>
<li><a data-toggle="tab" href="#billing">Billing</a></li>
<li><a data-toggle="tab" href="#suppport">Support</a></li>
<li><a data-toggle="tab" href="#newWebsite">Add a new website</a></li>
</ul>
<div class="tab-content">
<div id="mywebsites" class="tab-pane fade">
<!-- <div class="col-md-4 website-container">
<strong>Website URL: </strong><p>https://powerfastwebsites.com</p>
<strong>Website Admin Login: </strong><p>https://powerfastwebsites.com/wp-admin</p>
<strong>Plan: </strong><p>Basic</p>
<button type="button" class="btn btn-primary">Upgrade Plan</button>
<button type="button" class="btn btn-danger">Cancel</button>
</div>
<div class="col-md-4 website-container">
<strong>Website URL: </strong><p>https://powerfastwebsites.com</p>
<strong>Website Admin Login: </strong><p>https://powerfastwebsites.com/wp-admin</p>
<strong>Plan: </strong><p>Basic</p>
<button type="button" class="btn btn-primary">Upgrade Plan</button>
<button type="button" class="btn btn-danger">Cancel</button>
</div>
<div class="col-md-4 website-container">
<strong>Website URL: </strong><p>https://powerfastwebsites.com</p>
<strong>Website Admin Login: </strong><p>https://powerfastwebsites.com/wp-admin</p>
<strong>Plan: </strong><p>Basic</p>
<button type="button" class="btn btn-primary">Upgrade Plan</button>
<button type="button" class="btn btn-danger">Cancel</button>
</div>
<div class="col-md-4 website-container">
<strong>Website URL: </strong><p>https://powerfastwebsites.com</p>
<strong>Website Admin Login: </strong><p>https://powerfastwebsites.com/wp-admin</p>
<strong>Plan: </strong><p>Basic</p>
<button type="button" class="btn btn-primary">Upgrade Plan</button>
<button type="button" class="btn btn-danger">Cancel</button>
</div>-->
</div>
<div id="billing" class="tab-pane fade">
<h3>Billing</h3>
<p>Some content in menu 2.</p>
</div>
<div id="suppport" class="tab-pane fade">
<h3>Support</h3>
<p>Some content in menu 2.</p>
</div>
<div id="newWebsite" class="tab-pane fade">
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav nav-pills" id="myTab">
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Forth</li>
<li>Fifth</li>
<li>Sixth</li>
<li>Seventh</li>
</ul>
</div>
</div>
</div>
<div id="bar" class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
</div>
<div class="tab-content">
<div class="tab-pane" id="tab1">
1
</div>
<div class="tab-pane" id="tab2">
2
</div>
<div class="tab-pane" id="tab3">
3
</div>
<div class="tab-pane" id="tab4">
4
</div>
<div class="tab-pane" id="tab5">
5
</div>
<div class="tab-pane" id="tab6">
6
</div>
<div class="tab-pane" id="tab7">
7
</div>
<ul class="pager wizard">
<li class="previous first" style="display:none;">First</li>
<li class="previous">Previous</li>
<li class="next last" style="display:none;">Last</li>
<li class="next">Next</li>
</ul>
</div>
</div>
</div>
</div>
</div>
JS
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({
'onTabShow': function(tab, navigation, index) {
var $total = navigation.find('li').length;
var $current = index+1;
var $percent = ($current/$total) * 100;
$('#rootwizard .progress-bar').css({width:$percent+'%'});
},
'tabClass': 'nav nav-pills',
'onNext': function(){alert("You hit next");}
});
});

I think the issue is happening because it is within another tab pane. I tried to append the HTML using JQuery using this and it seems to have resolved the issue.

Do not show content while the page is loading and wrong script working

I faced a following problem: I have a simple selector where user can choose the selector's option. This action triggers my script and and the user is shown the content, depending on the option selected. The problem is that firstly, I see all the hidden content while the page loads (screenshot attached). Secondly, for some reason, the content for pr-btn (Add to cart) began to be shown completely. What am I doing wrong? I'm absolutely dummy in javascript, so I will be very grateful to the help.
jQuery(function () {
jQuery('.pr-price').hide();
jQuery('.d2').show();
jQuery('#select').on("change",function () {
jQuery('.pr-price').hide();
jQuery('.d'+jQuery(this).val()).show();
}).val("2");
jQuery('#select').on("change",function () {
jQuery('.pr-btn').hide();
jQuery('.b'+jQuery(this).val()).show();
}).val("2");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="tabbable full-width-tabs">
<ul class="nav nav-tabs">
<li class="w-100">
<a href="#tab1default" data-toggle="tab">
Subscribers</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1default">
<div class="col-md-6">
<span class="service__details">Details</span>
<select id="select" name="cd-dropdown" class="cd-select">
<option value="1">50 YouTube Subscribers</option>
<option value="2">100 YouTube Subscribers</option>
<option value="3">300 YouTube Subscribers</option>
<option value="4" selected>500 YouTube Subscribers</option>
<option value="5">1000 YouTube Subscribers</option>
<option value="6">2000 YouTube Subscribers</option>
<option value="7">5000 YouTube Subscribers</option>
</select>
</div>
<div class="col-md-3">
<span class="service__details">Price $</span>
<div class="pr-price d1">$15</div>
<div class="pr-price d2">$20</div>
<div class="pr-price d3">$30</div>
<div class="pr-price d4">$45</div>
<div class="pr-price d5">$80</div>
<div class="pr-price d6">$150</div>
<div class="pr-price d7">$300</div>
<div class="pr-price d8">$550</div>
</div>
<div class="col-md-3">
Add to cart
Add to cart
Add to cart
Add to cart
Add to cart
Add to cart
Add to cart
Add to cart
</div>
</div>
</div>
</div> <!-- /tabbable -->

You can use css (style="display:none") to hide all the elements at the start before the JS even loads. Then your callbacks on select change will show appropriate elements. Have a look at the example below.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
jQuery(
function () {
jQuery('#select').on("change",function () {
jQuery('.pr-price').hide();
jQuery('.d'+jQuery(this).val()).show();
});
jQuery('#select').on("change",function () {
jQuery('.pr-btn').hide();
jQuery('.b'+jQuery(this).val()).show();
});
}
);
</script>
<div class="tabbable full-width-tabs">
<ul class="nav nav-tabs">
<li class="w-100">
<a href="#tab1default" data-toggle="tab">
Subscribers</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1default">
<div class="col-md-6">
<span class="service__details">Details</span>
<select id="select" name="cd-dropdown" class="cd-select">
<option value="1">50 YouTube Subscribers</option>
<option value="2">100 YouTube Subscribers</option>
<option value="3">300 YouTube Subscribers</option>
<option value="4">500 YouTube Subscribers</option>
<option value="5">1000 YouTube Subscribers</option>
<option value="6">2000 YouTube Subscribers</option>
<option value="7">5000 YouTube Subscribers</option>
</select>
</div>
<div class="col-md-3">
<span class="service__details">Price $</span>
<div style="display:none" class="pr-price d1">$15</div>
<div style="display:none" class="pr-price d2">$20</div>
<div style="display:none" class="pr-price d3">$30</div>
<div style="display:none" class="pr-price d4">$45</div>
<div style="display:none" class="pr-price d5">$80</div>
<div style="display:none" class="pr-price d6">$150</div>
<div style="display:none" class="pr-price d7">$300</div>
<div style="display:none" class="pr-price d8">$550</div>
</div>
<div class="col-md-3">
<a style="display:none" href="123" class="pr-btn b1">Add to cart</a>
<a style="display:none" href="456" class="pr-btn b2">Add to cart</a>
<a style="display:none" href="789" class="pr-btn b3">Add to cart</a>
<a style="display:none" href="111" class="pr-btn b4">Add to cart</a>
<a style="display:none" href="123" class="pr-btn b5">Add to cart</a>
<a style="display:none" href="123" class="pr-btn b6">Add to cart</a>
<a style="display:none" href="123" class="pr-btn b7">Add to cart</a>
<a style="display:none" href="123" class="pr-btn b8">Add to cart</a>
</div>
</div>
</div>
</div> <!-- /tabbable -->

jquery hide and show in list

<div class="card-media">
<!-- media container -->
<div class="card-media-object-container">
<div class="card-media-object"><img data-original="{{asset($ad->images()->first()->image_path.'/'.$ad->images()->first()->image_name)}}" height="125px" width="100%"></div>
</div>
<!-- body container -->
<div class="card-media-body">
<div class="card-media-body-top">
<span class="subtle">{{$ad->time_elapsed_string($ad->created_at)}}</span>
</div>
<span class="title card-media-body-heading">{{$ad->title}}</span>
<div class="card-media-body-supporting-bottom">
<span class="card-media-body-supporting-bottom-text subtle">
<ol class="breadcrumb">
<li class="categorie">{{$ad->categorie->name}}</li>
<li class="subcategorie">{{$ad->subcategorie->name}}</li>
<li class="type active">{{$ad->type->name}}</li>
</ol>
</span>
<span id="price" style="color: red;" class="card-media-body-supporting-bottom-text subtle u-float-right">{{$ad->price}}</span>
</div>
<div class="card-media-body-supporting-bottom card-media-body-supporting-bottom-reveal">
<span class="card-media-body-supporting-bottom-text subtle">{{$ad->phone}}</span>
ДЭЛГЭРЭНГҮЙ
</div>
</div>
</div>
This is my repeated list and i wanna hide by select value
<select id="test" multiple class="form-control">
<option>1</option>
<option>100</option>
<option>1000</option>
<option>10000</option>
<option>100000</option>
<option>1000000</option>
</select>
$('#test').on('change',function(){
var selected = this.value;
prices = $('#price');
$.each(prices,function(){
if(selected<$(this).text()){
$(this).parent().parent().parent().hide();
}
if(selected>$(this).text()){
$(this).parent().parent().parent().show();
}
});
});
This is my jquery when i select value from select then if #price value < than select hide other list elements in my case card-media is list item.

columns don't line up, using bootstrap 3

I am using twitter bootstrap version 3 and for some reason the width of the columns don't add up right.
Take a look at this shot: http://i.imgur.com/LhgqL12.png
The right column doesn't line up with the end of the carousel and I cannot figure out why!
Here's the html for the page:
<!-- navbar -->
<div class="col-md-12">
<div class="container">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-home"></span></li>
<li>Donate</li>
<li>Sales</li>
<li>Submit Tip</li>
<li>Gaming Wiki</li>
<li>About Us</li>
<li class="dropdown">
Community <b class="caret"></b>
<ul class="dropdown-menu">
<li>Forum</li>
<li>IRC Chat</li>
<li>Twitter</li>
<li>Sales Twitter</li>
<li>Google+</li>
<li>Links</li>
</ul>
</li>
<li class="dropdown">
<span class="glyphicon glyphicon-user"></span> liamdawe <b class="caret"></b>
<ul class="dropdown-menu">
<li>View Profile</li>
<li>User CP</li>
<li>Private Messages</li>
<li>Admin CP <span class="badge badge-important">3</span></li>
<li>Logout</li>
</ul>
</li>
</ul>
<form method="get" action="/index.php?module=search" class="navbar-form navbar-right" role="search">
<input type="hidden" name="module" value="search">
<input type="text" class="form-control" name="q" placeholder="Search Articles">
<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>
</form>
</nav>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- logo -->
<img src="/templates/default/images/logo.png" height="120" width="600" alt="logo" class="logo-center" />
</div>
</div>
<div class="row">
<!-- image carousel -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="/uploads/carousel/1294630814id6gol.jpg" class="logo-center" alt="" />
<div class="carousel-caption">
<h3>Join our Minecraft server!</h3>
</div>
</div><div class="item">
<img src="/uploads/carousel/882399500id7gol.jpg" class="logo-center" alt="" />
<div class="carousel-caption">
<h3>Natural Selection 2 Out on the 30th for Linux!</h3>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!-- /.carousel -->
</div>
<!-- main content -->
<div class="row">
<!-- Articles -->
<div class="col-md-9">
<!-- notification -->
<div class="row">
<div class="alert alert-warning text-center">
You have <span class="badge badge-important">3</span> admin items needing review!
</div>
</div>
<!-- new sales -->
<div class="row">
<div class="alert alert-success text-center">
<strong>Latest Games On Sale:</strong> <span class="label label-info">Steam</span> Sparkle 2 Evo, <span class="label label-info">Steam</span> Shadow Warrior Classic Redux, <span class="label label-info">Steam</span> Redshirt, <span class="label label-info">Steam</span> Gravity Badgers - See all
</div>
</div>
<ul class="nav nav-tabs">
<li class="active">Our News</li>
<li >Featured Videos</li>
<li >News Elsewhere</li>
</ul>
<div id="maincontent">
<!-- Article -->
<div class="row gol-news-article">
<!-- Image -->
<div class="col-md-5">
<a href="/articles/sdasd-asdasdasdasdasdasdasdasd.2121" class="thumbnail">
<img data-src="holder.js/350x220" alt="article-image" src="/uploads/articles/topimages/549850194id2121gol.jpg">
</a>
</div>
<!-- Text -->
<div class="col-md-5">
<h4>Sdasd Asdasdasdasdasdasdasdasd</h4>
<p class="small muted">by liamdawe January 17, 2014 at 1:56 pm</p>
<p>
Your text here, use the uploader for an image!Your text here, use the uploader for an image!Your text here, use the uploader for an image!
<p class="small muted">In: <span class="label label-info">Interview</span> </p>
<i class="icon-pencil"></i><strong>Edit</strong> <i class="icon-heart"></i><strong>Make Editors Pick</strong>
</p>
<p class="small muted"><span class="glyphicon glyphicon-comment"></span> 1 Comments</p>
</div>
</div>
<div class="seperator"></div>
<!-- Article -->
<div class="row gol-news-article">
<!-- Image -->
<div class="col-md-5">
<a href="/articles/test-hhhhhhhhhhhhhhhhhhhh.2120" class="thumbnail">
<img data-src="holder.js/350x220" alt="article-image" src="/uploads/articles/topimages/5407865id2120gol.">
</a>
</div>
<!-- Text -->
<div class="col-md-5">
<h4>Test Hhhhhhhhhhhhhhhhhhhh</h4>
<p class="small muted">by liamdawe January 17, 2014 at 1:52 pm</p>
<p>
Your text here, use the uploader for an image!Your text here, use the uploader for an image!Your text here, use the uploader for an image!
<p class="small muted">In: <span class="label label-info">Interview</span> </p>
<i class="icon-pencil"></i><strong>Edit</strong> <i class="icon-heart"></i><strong>Make Editors Pick</strong>
</p>
<p class="small muted"><span class="glyphicon glyphicon-comment"></span> 0 Comments</p>
</div>
</div>
<div class="seperator"></div>
</div>
<div class="row">
<div class="span3">
<div class="pagination">
<ul><li class="disabled previouspage">Prev</li><li class="disabled">1</li><li class="disabled">/</li><li>99</li><li class="nextpage">Next</li></ul></div></div>
<div class="span2" style="padding-top: 18px; padding-bottom: 18px;">
<form name="form2" class="form-inline">
Pick Page: <select class="input-mini" name="jumpmenu" onchange="window.open(this.options[this.selectedIndex].value, '_self')"><option value="/home/page=1">1</option><option value="/home/page=2">2</option><option value="/home/page=3">3</option><option value="/home/page=4">4</option><option value="/home/page=5">5</option><option value="/home/page=6">6</option><option value="/home/page=7">7</option><option value="/home/page=8">8</option><option value="/home/page=9">9</option><option value="/home/page=10">10</option><option value="/home/page=11">11</option><option value="/home/page=12">12</option><option value="/home/page=13">13</option><option value="/home/page=14">14</option><option value="/home/page=15">15</option><option value="/home/page=16">16</option><option value="/home/page=17">17</option><option value="/home/page=18">18</option><option value="/home/page=19">19</option><option value="/home/page=20">20</option><option value="/home/page=21">21</option><option value="/home/page=22">22</option><option value="/home/page=23">23</option><option value="/home/page=24">24</option><option value="/home/page=25">25</option><option value="/home/page=26">26</option><option value="/home/page=27">27</option><option value="/home/page=28">28</option><option value="/home/page=29">29</option><option value="/home/page=30">30</option><option value="/home/page=31">31</option><option value="/home/page=32">32</option><option value="/home/page=33">33</option><option value="/home/page=34">34</option><option value="/home/page=35">35</option><option value="/home/page=36">36</option><option value="/home/page=37">37</option><option value="/home/page=38">38</option><option value="/home/page=39">39</option><option value="/home/page=40">40</option><option value="/home/page=41">41</option><option value="/home/page=42">42</option><option value="/home/page=43">43</option><option value="/home/page=44">44</option><option value="/home/page=45">45</option><option value="/home/page=46">46</option><option value="/home/page=47">47</option><option value="/home/page=48">48</option><option value="/home/page=49">49</option><option value="/home/page=50">50</option><option value="/home/page=51">51</option><option value="/home/page=52">52</option><option value="/home/page=53">53</option><option value="/home/page=54">54</option><option value="/home/page=55">55</option><option value="/home/page=56">56</option><option value="/home/page=57">57</option><option value="/home/page=58">58</option><option value="/home/page=59">59</option><option value="/home/page=60">60</option><option value="/home/page=61">61</option><option value="/home/page=62">62</option><option value="/home/page=63">63</option><option value="/home/page=64">64</option><option value="/home/page=65">65</option><option value="/home/page=66">66</option><option value="/home/page=67">67</option><option value="/home/page=68">68</option><option value="/home/page=69">69</option><option value="/home/page=70">70</option><option value="/home/page=71">71</option><option value="/home/page=72">72</option><option value="/home/page=73">73</option><option value="/home/page=74">74</option><option value="/home/page=75">75</option><option value="/home/page=76">76</option><option value="/home/page=77">77</option><option value="/home/page=78">78</option><option value="/home/page=79">79</option><option value="/home/page=80">80</option><option value="/home/page=81">81</option><option value="/home/page=82">82</option><option value="/home/page=83">83</option><option value="/home/page=84">84</option><option value="/home/page=85">85</option><option value="/home/page=86">86</option><option value="/home/page=87">87</option><option value="/home/page=88">88</option><option value="/home/page=89">89</option><option value="/home/page=90">90</option><option value="/home/page=91">91</option><option value="/home/page=92">92</option><option value="/home/page=93">93</option><option value="/home/page=94">94</option><option value="/home/page=95">95</option><option value="/home/page=96">96</option><option value="/home/page=97">97</option><option value="/home/page=98">98</option><option value="/home/page=99">99</option></select></form></div></div>
</div>
<!-- Sidebar -->
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<!-- Articles Sidebar -->
<ul class="list-group">
<li class="list-group-item"><i class="icon-heart"></i> Editor's Picks</li>
<li class="list-group-item"><i class="icon-star"></i> Popular this week</li>
<li class="list-group-item"><i class="icon-th-large"></i> View by Category</li>
<li class="list-group-item">
<form name="form1">
<select onchange="window.open(this.options[this.selectedIndex].value, '_self')" class="form-control">
<option>Pick One</option>
<option value="/articles/category/17">Coming Soon</option>
<option value="/articles/category/14">Competition</option>
<option value="/articles/category/7">Crowdfunding</option>
<option value="/articles/category/13">Desura</option>
<option value="/articles/category/1">Editorial</option>
<option value="/articles/category/20">FPS</option>
<option value="/articles/category/16">First Look</option>
<option value="/articles/category/9">Free Game</option>
<option value="/articles/category/8">Game Bundle</option>
<option value="/articles/category/4">Game Sale</option>
<option value="/articles/category/6">Indie Game</option>
<option value="/articles/category/18">Indie Game</option>
<option value="/articles/category/3">Interview</option>
<option value="/articles/category/10">MMO</option>
<option value="/articles/category/0">No Category</option>
<option value="/articles/category/11">Open Source</option>
<option value="/articles/category/21">RTS</option>
<option value="/articles/category/2">Review</option>
<option value="/articles/category/5">Steam</option>
<option value="/articles/category/12">Unity3D</option>
<option value="/articles/category/15">Wine</option>
</select>
</form>
</li>
<li class="list-group-item">Article Search</li>
<li class="list-group-item">Submit Article</li>
</ul>
<!-- twitter Sidebar -->
<div class="well well-sm">
<a class="twitter-timeline" href="https://twitter.com/gamingonlinux" data-widget-id="381375312019218432" height="400">Tweets by #gamingonlinux</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>
<!-- Footer -->
<div class="row">
<div class="col-md-12">
<div class="well text-center">
<strong>GamingOnLinux</strong> the Linux Games website, Copyright © GamingOnLinux.com 2009-2014.
<br />Page generated in 0.025 seconds, MySQL queries: 10<br />
</div>
</div>
</div>
</div>
</div>
What I want is for the right panels width to extend to the end of the carousel, currently it falls short as you can see there is a gap on the right of blank space after the sidebar.

I think that the problem is not the right hand panel but a couple of other things.
First, the carousel is inside a .row but not inside a .col-md-12 mean there'll be a negative margin to the sides, but no padding on the col to negate that.
So add that in here:
<div class="row">
<div class="col-md-12">
<!-- image carousel -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
...
</div>
</div>
</div>
Second, you've nested some rows (.row) for your alert boxes. That's causing them to be pulled out of line because of the negative margin that rows have. You either need to add a col-md-12 around each alert (because the padding on cols negates the rows negative margin) or you remove the .row completely. That works because the div is just 100% width of the parent column which is fine.
So remove the row below:
<!-- notification -->
<div class="row"> <!-- REMOVE THIS -->
<div class="alert alert-warning text-center">
You have <span class="badge badge-important">3</span> admin items needing review!
</div>
</div> <!-- REMOVE THIS CLOSING DIV TOO -->
Demo

Try to define your col-md-3 boostrap is a grid of 12, you have defined mid to be 9
also to avoid the padding of container / row create a .nopadding { padding:0 !important }