We Keep Coding

Change tab color when button clicked

I have a multi-step form and i wanted to add a button at the bottom of the page so the user can click next instead of clicking on the tabs at the top.
The button works however, the tab's background color does not change when i click on next.
<div class="right-col">
<div class="profile-content"
<ul id="profile-tabs" class="nav nav-tabs">
<li class="active">
Customer Info
</li>
<li>
Lead Info
</li>
</ul>
<div class="tab-content tab-content-bordered panel-padding">
<div class="widget-article-comments tab-pane panel no-padding no-border fade in active" id="profile-tabs-board">
<form class="form-horizontal" action="leads_add_php.php" method="post" name="form1">
<div class="form-group">
<label for="tag" class="col-sm-3 control-label">Tag</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="tag" name="tag" placeholder="Tag" onchange="document.getElementById('output_tag').innerHTML = this.value"/>
</div>
</div>
<button type="button" id="next" name="next" class="btn btn-primary">Primary</button>
<script>
$("#next").click(function(){
$("#customer-tab").removeClass("active");
$("#leads-tab").addClass("active");
$("#leads-tab .theme-default .nav-tabs .a").css("background", "red");
});
</script>
</div>
BEFORE
AFTER
Here's the CSS when i inspect element
element.style {
}
.theme-default .nav-tabs>li.active>a, .theme-default .nav-tabs>li.active>a:focus, .theme-default .nav-tabs>li.active>a:hover {
background: #1d89cf;
border-bottom: 2px solid #1a7ab9;
}

You have to set id on li tag and give its color.
$(document).ready(function(){
$("#next").click(function(){
$("#licustomer-tab").removeClass("active");
$("#lileads-tab").addClass("active");
$("#profile-tabs .active a").css("background-color", "red");
});
});
<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"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.theme-default .nav-tabs>li.active>a, .theme-default .nav-tabs>li.active>a:focus, .theme-default .nav-tabs>li.active>a:hover {
background: #1d89cf;
border-bottom: 2px solid #1a7ab9;
}
</style>
<div class="right-col">
<div class="profile-content">
<ul id="profile-tabs" class="nav nav-tabs">
<li class="active" id="licustomer-tab">
Customer Info
</li>
<li id="lileads-tab">
Lead Info
</li>
</ul>
<div class="tab-content tab-content-bordered panel-padding">
<div class="widget-article-comments tab-pane panel no-padding no-border fade in active" id="profile-tabs-board">
<form class="form-horizontal" action="leads_add_php.php" method="post" name="form1">
<div class="form-group">
<label for="tag" class="col-sm-3 control-label">Tag</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="tag" name="tag" placeholder="Tag" onchange="document.getElementById('output_tag').innerHTML = this.value"/>
</div>
</div>
<button type="button" id="next" name="next" class="btn btn-primary">Primary</button>
</div>

try this script
var $tabs = $('.tabbable li');
$('#nexttab').on('click', function() {
$tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show');
$("#test").css("background-color", "red");
});
$('#test1').on('click', function() {
$("#test").css("background-color", "white");
});
<form class="form-horizontal" action='/products/add/' method='post'>
<fieldset>
<div class="tabbable">
<ul class="nav nav-tabs" id="tab_bar">
<li class="active">Product</li>
<li>Offer</li>
</ul>
<div class="tab-content">
<!-- TAB 1 -->
<div class="tab-pane active" id="tab1">
<div class="control-group">
<label class="control-label" for="id_title">Title</label>
<div class="controls">
<input type="text" name="title">
</div>
</div>
<div class="control-group">
<label class="control-label" for="id_manufacturer">Manufacturer</label>
<div class="controls">
<input type="text" name="manufacturer">
<span class="help-inline">
</div>
<div class="btn-group">
<button class="btn" id="nexttab" type="button">Next</button>
</div>
</div>
</div>
<!-- TAB 2 -->
<div class="tab-pane" id="tab2">
<div class="control-group">
<label class="control-label" for="id_condition">Condition</label>
<div class="controls">
<input type="text" name="condition">
</div>
</div>
<div class="control-group">
<label class="control-label" for="id_condition_note">Condition Note</label>
<div class="controls">
<input type="text" name="condition_note">
</div>
</div>
</div>
</div>
<hr class="border-line"> <!-- STYLED IN FORMS.CSS -->
</fieldset>
</form>
working fiddle click here

how to center align a group of radio buttons under the center of the quiz title and keep responsive?

here is the code to reproduce the issue in bootstrap3.
what I want is to align the radio buttons below the center of the quiz title, while keeping text align left.
current title is inline flow by default bs3 sample form structure.
i'm thinking if using
position absolute; or display:block/inline-block; margin-left:auto; margin-right:auto; display:flex; methods etc. might break the responsive flow. any suggestions how you balance responsive and align nicely ?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<div class="main-content">
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
<h3 class="quiz-title" style="">Question: Do you think it's easy to center align the radio button groups and keep bootstrap responsive.</h3>
</div>
<div class="col-xs-12 ">
<div class="form-group">
<div class="radio">
<label for="Q2[score]" class="">
<input type="radio" name="Q2[score]" value="1" required="required">Agree
</label>
</div>
</div>
</div>
<div class="col-xs-12 ">
<div class="form-group">
<div class="radio">
<label for="Q2[score]"" class="">
<input type="radio" name="Q2[score]" value="2" required="required">Neither Agree nor Disagree
</label>
</div>
</div>
</div>
<div class="col-xs-12 ">
<div class="form-group">
<div class="radio">
<label for="Q2[score]" class="answered">
<input type="radio" name="Q2[score]" value="3" required="required">Disagree
</label>
</div>
</div>
</div>
</div>
<div class="clear-both" style="clear:both;"></div>
<div class="row-fluid">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
<button type="button" class="NextQuizBTN btn btn-default">NEXT</button>
</div>
</div>
</div><!--end of container-fluid-->
</div>
</body>
I received some suggestions among below answers for making it appear like center aligned in bootstrap3, however I also found some pitfalls using the above method , listed in below picture I roughly made.
Both the Answer text in radio label and the Quiz Title text length are Variable, so this is the tricky part in this case to make it center aligned while keep responsive using css.

Add Some CSS
.radio{display:inline-block;}
Add Class radio parent div to col-xs-12 with text-center

Have you tried changing the class "col-xs-12" to "col-xs-8 col-xs-offset-4" to center it?

You can achieve this by wrapping all your radio button divs inside a parent div. And then placing this div accordingly to the device using offset.
<div class="col-xs-8 col-xs-offset-4 col-sm-8 col-sm-offset-4 col-md-7 col-md-offset-5">
//.. all your radio buttons div's inside this
<div>
Below is the working snippet. Have a check.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<div class="main-content">
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
<h3 class="quiz-title" style="">Question: Do you think it's easy to center align the radio button groups and keep bootstrap responsive.</h3>
</div>
<div class="form-group">
<input type="hidden" name="Q2[cat]" value="Conscientiousness">
</div>
<div class="form-group">
<input type="hidden" name="Q2[POST_ID]" value="88">
</div>
<div class="col-xs-8 col-xs-offset-4 col-sm-8 col-sm-offset-4 col-md-7 col-md-offset-5">
<div class="col-xs-12 ">
<div class="form-group">
<div class="radio">
<label for="Q2[score]" class="">
<input type="radio" name="Q2[score]" value="1" required="required">Agree
</label>
</div>
</div>
</div>
<div class="col-xs-12 ">
<div class="form-group">
<div class="radio">
<label for="Q2[score]"" class="">
<input type="radio" name="Q2[score]" value="2" required="required">Neither Agree nor Disagree
</label>
</div>
</div>
</div>
<div class="col-xs-12 ">
<div class="form-group">
<div class="radio">
<label for="Q2[score]" class="answered">
<input type="radio" name="Q2[score]" value="3" required="required">Disagree
</label>
</div>
</div>
</div>
</div>
</div>
<div class="clear-both" style="clear:both;"></div>
<div class="row-fluid">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
<button type="button" class="NextQuizBTN btn btn-default">NEXT</button>
</div>
</div>
</div>
<!--end of container-fluid-->
</div>
</body>

How to show menu items in a pop-up in bootstrap modal dialog box according to the psd?

I'm using Bootstrap v3.3.5 in my website.
Now I've HTML code of modal dialog box as follows :
<div style="display: block; padding-right: 13px;" id="myModal-event" class="modal fade in" role="dialog">
<div role="document" style="width:600px;position:relative;margin:auto;margin-top:10px;">
<div class="modal-content" style="border:0;">
<div role="document" class="modal-dialog event-planner">
<div class="modal-content">
<div class="modal-header">
<h4 id="myModalLabel" class="modal-title">Event Details</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-6 col-md-6 col-sm-12">
<div class="event-title">
NewDemoEvent5
<input name="hid_event_id" id="hid_event_id" value="501" type="hidden">
</div>
<ul>
<li><img src="http://localhost/CKWEB_28-12-2015/user_ui_files/images/time.png" alt=""> 12:00 pm</li>
<li><img src="http://localhost/CKWEB_28-12-2015/user_ui_files/images/calender.png" alt=""> Thursday, January 7</li>
<li>
<img src="http://localhost/CKWEB_28-12-2015/user_ui_files/images/location.png" alt="">
Home Nightclub, Sydney, New South Wales, Australia
</li>
<li><img src="http://localhost/CKWEB_28-12-2015/user_ui_files/images/group_event.png" alt="">Group: Boxing Day</li>
</ul>
</div>
<div class="col-sm-6 col-md-6 col-sm-12">
<div class="form-group" align="right">
<select name="user_event_responce" id="user_event_responce" class="form-control" style="width:150px;">
<option value="0">I am..</option>
<option value="1" selected="selected">Going</option>
<option value="2">Maybe</option>
<option value="3">Not Going</option>
</select>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="event-menu">
<ul class="nav nav-tabs" id="myTab">
<li class=""><a aria-expanded="false" href="#description" data-toggle="tab">Description</a></li>
<li>Feeds</li>
<li>Going</li>
<li>Maybe</li>
<li class="active"><a aria-expanded="true" href="#notgoing" data-toggle="tab">Not Going</a></li>
</ul>
</div>
</div>
<hr>
<div class="tab-content">
<div class="tab-pane" id="description">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
DemoEvent5 is added successfully.
</div>
</div>
</div>
<div class="tab-pane" id="feeds">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
Work In Progress
</div>
</div>
</div>
<div class="tab-pane" id="going">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="col-md-2 col-sm-2 col-xs-12 no-padding">
<div class="block"> <img src="http://app.campusknot.com/file/pic/user/1585_100_square.jpg" class="img-event" alt="">
<span class="author">Sushil Kadam</span>
<span class="degree"></span>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="maybe">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
</div>
</div>
</div>
<div class="tab-pane active" id="notgoing">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
On this modal dialog I want to show three black colored bold dots and upon clicking on those dots a vertical pop-up menu should open up consisting of menus Edit Event, Invite Members, Delete Event. Each of the menu items should be separated by a horizontal line. When user clicks somewhere else apart from the opened-up menu the menu pop-up should get close.
PFA the psd image for reference of what I need to do.
Three bold black-colored dots are actually got hidden behind the pop-up menu.
I want the exactly same functionality working.
Thanks.

try this HTML which uses bootstrap :
<div class="dropdown">
<p class="dropdown-toggle" data-toggle="dropdown">
<a class="glyphicon glyphicon-option-horizontal"></a></p>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

Sliding Material Design Card View

I am writing a web ap which looks like this:
Instead of stacking a bunch of cards like in the image above, I want to try and have a slider that when swiped the next card is displayed.
My html looks like this:
<html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
<title>Starter Template - Materialize</title>
</head>
<body style="">
<div class="navbar-fixed ">
<nav class="orange " role="navigation">
<div id="replaceBar" class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">Statistics</a>
<ul class="right hide-on-med-and-down left">
<li>Statistics</li>
</ul>
<ul style="left: -250px;" id="nav-mobile" class="side-nav left">
<li>Statistics</li>
</ul>
<img style="vertical-align: middle;" src="img/menuIcon.png" height="30" width="30">
<ul id="search" class="right valign-wrapper">
<li class="valign">
<img style="vertical-align: middle;" src="img/searchIcon.png" height="30" width="30">
</li>
</ul>
</div>
</nav>
</div>
<div class="row" style="margin:1;">
<div class="col s12 m7">
<div class="card valign-wrapper">
<div class="card-content valign center-block">
<div class="row">
<h3 id="beerCount" class="center-align orange-text text-darken-2">410</h3>
<p class="center-align">Beers Tasted</p>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin:1;">
<div class="col s12 m7">
<div class="card valign-wrapper">
<div class="card-content valign center-block">
<div class="row">
<h3 id="breweryCount" class="center-align orange-text text-darken-2">161</h3>
<p class="center-align">Breweries Tried</p>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin:1;">
<div class="col s12 m7">
<div class="card valign-wrapper">
<div class="card-content valign center-block">
<div class="row">
<h3 id="breweryVisit" class="center-align orange-text text-darken-2">16</h3>
<p class="center-align">Breweries Visited</p>
</div>
</div>
</div>
</div>
</div>
<!-- Modal Structure -->
<div style="z-index: 1003; display: none; opacity: 0; transform: scaleX(0.7); top: 0px;" id="modal1" class="modal">
<div class="modal-content center">
<div>
<span class="card-title">99 bottles of beer on the wall...</span>
</div>
<div id="load" class="preloader-wrapper big active ">
<div class="spinner-layer spinner-yellow-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
</div>
<div style="left: 0px;" class="drag-target"></div><div class="hiddendiv common"></div></body></html>
I tried adding them to an image slider that is offered with materializecss which is what I am using to build my web app but it didnt work.
Anyway to slide them with html5 and css?
Here is a fiddle:
https://jsfiddle.net/mjbbc48h/

You can simply replace the image content in the materializecss slider with your card element. Like so:
<div class="slider">
<ul class="slides">
<li>
<div class="row" style="margin:1;">
<div class="col s12 m7">
<div class="card valign-wrapper">
<div class="card-content valign center-block">
<div class="row">
<h3 id="breweryVisit" class="center-align orange-text text-darken-2">16</h3>
<p class="center-align">Breweries Visited</p>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="row" style="margin:1;">
<div class="col s12 m7">
<div class="card valign-wrapper">
<div class="card-content valign center-block">
<div class="row">
<h3 id="beerCount" class="center-align orange-text text-darken-2">410</h3>
<p class="center-align">Beers Tasted</p>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
This should give you what you are looking for. Remember to initialize the slider.

Constrain fixed column width on drag

OK, so here's the situation:
I'm experimenting with a fixed-width (resizeable) left sidebar
The sidebar contains draggable elements
If one of the elements is dragged to the right, then the sidebar column seems to be scrolling right.
Why is that happening? Any ideas on how this could be resolved?
Fiddle: http://jsfiddle.net/t5nnmh94/
Main HTML:
<div id="main_wrap">
<div id="sidebar" class="content-fluid">
<span id="position"></span>
<div id="dragbar"></div>
<div id="components"><div class="panel panel-default">
<div class="panel-heading">Components</div>
<div class="panel-body">
<div class="col-xs-6 component-item"><div class="wrp" id="one"><i class="glyphicon glyphicon-envelope"></i><br/>E-mail</div></div>
<div class="col-xs-6 component-item"><div class="wrp" id="two"><i class="glyphicon glyphicon-italic"></i><br/>Input</div></div>
<div class="col-xs-6 component-item"><div class="wrp" id="three"><i class="glyphicon glyphicon-text-width"></i><br/>Textarea</div></div>
<div class="col-xs-6 component-item"><div class="wrp" id="four"><i class="glyphicon glyphicon-file"></i><br/>File Upload</div></div>
<div class="col-xs-6 component-item"><div class="wrp" id="five"><i class="glyphicon glyphicon-asterisk"></i><br/>Password</div></div>
<div class="col-xs-6 component-item"><div class="wrp" id="six"><i class="glyphicon glyphicon-check"></i><br/>Checkbox</div></div>
</div>
</div>
</div>
</div>
<div id="content" class="content-fluid">
<div class="row">
<div class="col-xs-8" id="maina">
<div class="panel panel-default" id="droppanel">
<div class="panel-heading">Main</div>
<div class="panel-body" id="droppanelbody" >
<ul class="nav nav-tabs" role="tablist">
<li class="active">UI Editor</li>
<li>Code</li>
</ul>
<div class="tab-content" style="margin-top:40px;">
<div class="tab-pane fade in active" id="ui-editor">
<form role="form" id="theform">
</form>
</div>
<div class="tab-pane fade" id="code">
<textarea class="form-control" rows="5" id="thecode">
</textarea>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-4" id="options">
<div class="panel panel-default">
<div class="panel-heading">Options</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div>
</div>
</div>

Okay, I have it - just do this:
#components{
overflow: visible;
}
#draggableHelper{
z-index: 100;
}
.panel{
z-index: 99;
}
#sidebar{
overflow: visible;
}
should work.

When you move an item in your panel's body, it changes the panel size to match all the content within.
This is the default behaviour.
You can try with :
overflow: hidden;
It will hide any visible overflow and keep the block size untouched.