We Keep Coding

Div will not automatically close when click inside item

Fiddle: https://jsfiddle.net/scrfbe95/
Right now im using a main div with a list of item with a link once you click a certein list item it will show another div on the right side of the main div.
But what im trying to do is when u click a certein link inside the main div the main div will not close.
<div id="main-div1" class="main-div">
Main div 1
<div class="content">
<ul>
<li> item 1 </li>
<li> item 1 </li>
</ul>
</div>
</div>
<div id="main-div2" class="main-div">
Main div 2
<div class="content">
<ul>
<li> item 1 </li>
<li> item 1 </li>
</ul> </div>
</div>
<div id="main-div3" class="main-div">
Main div 3
<div class="content">
<ul>
<li> item 1 </li>
<li> item 1 </li>
</ul> </div>
</div>
.main-div {
padding: 10px;
margin-top: 5px;
background-color: #000;
color: #fff;
}
.main-div > .content {
display: none;
color: #fff;
}
(function($) {
$(document).on('click','.main-div',function() { showMainDiv($(this)); });
function showMainDiv($el) {
var $elContent = $el.find('.content');
if ($elContent.is(':visible')) {
$elContent.stop(true,true).slideUp(500);
}
else {
$('.main-div').find('.content').stop(true,true).not($elContent).slideUp(500);
$elContent.slideDown(500);
}
}
})(jQuery);

Modify the click listener to only react if the div clicked is the intended div like this
$(document).on('click','.main-div',function(e) {
if (e.target !== this)
return;
showMainDiv($(this)); });
Here is the fiddle;

jQuery switch active class depending on which section is showing

I have several sections within a document as follows:
<section id="step1">
</section>
<section id="step2" style="display:none">
</section>
<section id="step3" style="display:none">
</section>
I am showing and hiding these depending on user interaction. I wanted to have some kind of circular heading to indicate the user is on section 2 of 3 for example like so:
<div id="indicators" class="clearfix">
<div class="center-div">
<ul>
<li id="step1-circle" class="circle active"></li>
<li id="step2-circle" class="circle"></li>
<li id="step3-circle" class="circle"></li>
</ul>
</div>
</div>
How would I switch the active class depending on which section is showing?

You can use the addClass() method in tandem with the removeClass() method like:
function makeIndicatorCircleActive(id){
// Remove active state of current circle
$('#indicators .active').removeClass('active');
// Add active state to desired element
$(id).addClass('active');
}
// Somewhere else in the code...
makeIndicatorCircleActive('#step2-circle);

I've added a button for the animation. You'd need to show more example code of your implementation, but you may be able to get away with let $section = $('section:visible') and instead of putting this in a click function, create a generic function name, which is triggered whenever your event occurs.
$('button').click(function() {
// context used for jQuery
let $section = $(this).closest('section');
// get next circle, if current circle is last, then get first circle
var $next = $('.circle.active', $section).next('.circle'),
$next = ($next.length && $next) || $('.circle', $section).first();
$('.circle.active', $section).removeClass('active'); // remove all actives
$next.addClass('active'); // add new active
});
.circle {
background: black;
border-radius: 25px;
display: inline-block;
list-style-type: none;
width: 50px;
height: 50px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
}
.active {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div class="clearfix">
<div class="center-div">
<ul>
<li class="circle active"></li>
<li class="circle"></li>
<li class="circle"></li>
</ul>
</div>
<button>Next</button>
</div>
</section>
<section>
<div class="clearfix">
<div class="center-div">
<ul>
<li class="circle active"></li>
<li class="circle"></li>
<li class="circle"></li>
</ul>
</div>
<button>Next</button>
</div>
</section>

Appended content do not get the proper CSS effect

I want append an HTML element into a DIV, but this one do not get the proper CSS like the original ones.
I have a dropdown menu, and want append on it new <li> rows.
My HTML code:
<br/><br/>
Append it
<div class="container">
<div class="row">
<div class="col-sm-3">
<h5>Normal Dropdown Button</h5>
<div class="panel panel-default">
<div class="panel-body">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span data-bind="label">Select One</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<div id="append">
</div>
<li>Item 1</li>
<li>Another item</li>
<li>This is a longer item that will not fit properly</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<br/><br/>
My Javascript code:
$( document.body ).on( 'click', '.append', function( event ) {
$("#append").append("<li>Item 1</li>");
return false;
});
Here a live example: http://jsfiddle.net/dJDHd/2136/
EDITED WITH MY MAIN PROBLEM:
https://jsfiddle.net/Lr7gn020/1/
Click on APPEND IT, and then check the appended element by clicking on Select One button (Dropdown menu), and you will see that it do not get the proper CSS like the others (Item Test).

You've nested a div in the ul and the styles target .dropdown-menu>li>a so the div is breaking that. A div can't be a direct child of a ul and li can't be a direct child of a div. Instead of nesting a div in the ul, then appending li's to the div, you can $.prepend() li's directly to the menu, if you want them to appear at the beginning of the menu when you add them. If you don't care where they appear, you can $.append() them to the bottom instead.
$(document.body).on('click', '.append', function(event) {
$(".dropdown-menu").prepend("<li>Item Test</li>");
return false;
});
.btn-input {
display: block;
}
.btn-input .btn.form-control {
text-align: left;
}
.btn-input .btn.form-control span:first-child {
left: 10px;
overflow: hidden;
position: absolute;
right: 25px;
}
.btn-input .btn.form-control .caret {
margin-top: -1px;
position: absolute;
right: 10px;
top: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br/><br/>
Append it
<div class="container">
<div class="row">
<div class="col-sm-3">
<h5>Normal Dropdown Button</h5>
<div class="panel panel-default">
<div class="panel-body">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span data-bind="label">Select One</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Item 1</li>
<li>Another item</li>
<li>This is a longer item that will not fit properly</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<br/><br/>

The reason behind the appended option having different css is due to the fact that you are appending it inside a div element.
The current CSS of the li elements comes from the bootstrap css with this selector.
dropdown-menu>li>a
Since you have a div node inside ul (which is wrong and make html invalid) and you are appending a new li inside this div with JS, the above selector will not reach this node and CSS will not be applied.
You should add the li node directly under the ul node.
Fiddle : http://jsfiddle.net/9med3Lou/

Change your jquery part.
$( document.body ).on( 'click', '.append', function( event ) {
$(".dropdown-menu").append("<li>Item 1</li>"); //append with ul, not div
return false;
});

Backbone: Different views for different tab content

I have a generic view and 4 other views. I am using bootstrap tabs (nav-tabs) in the generic view. I want the other 4 views to be the content of 4 tabs in the generic view.
As I am new to backbone and bootstrap I am not able to figure out how to do that. Also, I am using only views in backbone for now (which means, there is no model or controller).
Would sure appreciate the idea of how to do this.
Thank you.

I would suggest breaking things down.
1st you build your bootstrap HTML for your tabs and give a unique selector to each one of them. For instance, on this file here https://gist.github.com/mnewt/4228037 :
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active">Red</li>
<li>Orange</li>
<li>Yellow</li>
<li>Green</li>
<li>Blue</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="red">
<h1>Red</h1>
<p>red red red red red red</p>
</div>
<div class="tab-pane" id="orange">
<h1>Orange</h1>
<p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="yellow">
<h1>Yellow</h1>
<p>yellow yellow yellow yellow yellow</p>
</div>
<div class="tab-pane" id="green">
<h1>Green</h1>
<p>green green green green green</p>
</div>
<div class="tab-pane" id="blue">
<h1>Blue</h1>
<p>blue blue blue blue blue</p>
</div>
</div>
2nd now you can create your 4 content views passing el as the id for each content tab:
var tab1 = new ContentView({
el: '#red'
});
var tab2 = new ContentView({
el: '#orange'
});
var tab3 = new ContentView({
el: '#yellow'
});
var tab4 = new ContentView({
el: '#green'
});

I approached this differently using css driven tabs based on this.
The idea is to have it so that the css will handle the hiding and displaying of tabs. The js just simply listens for which tab is clicked and renders the view accordingly.
For example, the following could be the html which defines the tab structure and the containers which will hold each view. Html:
<div>
<ul id="profileMainView" class="tabs">
<li class="labels" >
<label class="profile-selectTab selectedTab" for="tab0" id="profile-label0">
Tab 0
</label>
<label class="profile-selectTab" for="tab1" id="profile-label1">
Tab 1
</label>
<label class="profile-selectTab" for="tab2" id="profile-label2">
Tab 2
</label>
</li>
</ul>
</div>
<ul class="tabs">
<li>
<input type="radio" checked name="tabs" id="tab0">
<div id="tab-content0" class="tab-content">
Tab 1 Content
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab1">
<div id="tab-content1" class="tab-content">
Tab 2 Content
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab2">
<div id="tab-content2" class="tab-content">
Tab 3 Content
</div>
</li>
</ul>
This css can handle hiding and showing the tabs:
.tabs input[type=radio] {
display:none;
}
.tabs {
float: none;
list-style: none;
padding: 0;
}
.tabs li {
display: block;
}
.labels{
border-bottom: 1px solid #DDD;
height: 55px;
}
.labels:after {
content: '';
display: table;
clear: both;
}
[id^=tab]:checked ~ div[id^=tab-content] {
display: block;
}
[id^=tab]:checked ~ div[id^=tab-content] {
display: block;
}
Finally the js can just listen for which tab is selected and then render the view by passing in the id of the selected tab:
var mainView = Backbone.View.extend({
events: {
'click .profile-selectTab' : function(e) {
this.renderTab(e.currentTarget.id);
},
renderTab: function(id){
if(id == 'profile-label0'){
yourView1.render('tab-content0');
} else if(id == 'profile-label1'){
yourView2.render('tab-content1');
} else if(id == 'profile-label2'){
yourView3.render('tab-content2');
}
}
});
Each view would just render and append to the correct tab's div. For example:
var yourView1 = Backbone.View.extend({
render : function(targetDiv){
$('#' + targetDiv).append(...);
}
});

How to get a hidden content to show over cursor using html, css, javascript?

There are many words like this:
test1 test2 test3 test4 test5 test6 test7 test8 test9 test10 test11 ...
Each word is associated with multiple example sentences. And I want them to be hidden before the cursor is over the word. Here's my code.
DEMO: https://jsfiddle.net/kyubyong/umxf19vo/
HTML:
<a><b>test1</b></a>
<div class="divs">
<li>This is the first example</li>
<li>This is the second example</li>
<li>This is the third example</li>
</div>
<a><b>test2</b></a>
<div class="divs">
<li>This is the first example</li>
<li>This is the second example</li>
<li>This is the third example</li>
</div>
CSS
a:hover
{
background-color: lightgray;
}
.divs
{
display: none;
}
a:hover + .divs
{
display: block;
position: absolute;
background-color: lightgray;
width: 100%;
padding: 5px;
}
The problem is when the original line is more than one, the block of example sentences covers the words in the bottom line. I want them to go down so the example sentences don't cover them.

Since you're using the Javascript, HTML and CSS tags I'm assuming you don't mind using Javascript to solve the issue. The reason why your problem is happening is because you're using position: absolute on your <div>'s. This means that the position will be positioned in absolute terms relative to it's ancestor element.
What you could do instead is palce all the titles first and then all the lists and then use javasript to select the appropiate element to show/hide. Below you can find an example of how to do it with jQuery.
$('div').hover(function() {
$($(this).attr("target")).toggle();
}, function() {
$($(this).attr("target")).toggle();
});
div {
display: inline;
background: lightgray;
}
div:hover {
background: darkgray;
}
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div target="#test">Test</div>
<div target="#animals">Animals</div>
<div target="#fruits">Fruits</div>
<div target="#vegetables">Vegetables</div>
<div target="#cars">Cars</div>
<div target="#countries">Countries</div>
<div target="#continents">Continents</div>
<div target="#sports">Sports</div>
<div id="test" class="hidden">
<ul>
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
</div>
<div id="animals" class="hidden">
<ul>
<li>Lion</li>
<li>Tiger</li>
<li>Gazzele</li>
</ul>
</div>
<div id="fruits" class="hidden">
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
</div>
<div id="vegetables" class="hidden">
<ul>
<li>Potatoe</li>
<li>Tomatoe</li>
<li>Lettuce</li>
</ul>
</div>
<div id="cars" class="hidden">
<ul>
<li>Ferrari</li>
<li>Porsche</li>
<li>Audi</li>
</ul>
</div>
<div id="countries" class="hidden">
<ul>
<li>United States</li>
<li>Canada</li>
<li>Mexico</li>
</ul>
</div>
<div id="continents" class="hidden">
<ul>
<li>America</li>
<li>Europe</li>
<li>Africa</li>
</ul>
</div>
<div id="sports" class="hidden">
<ul>
<li>Tennis</li>
<li>Football</li>
<li>Basketball</li>
</ul>
</div>

If you add a margin-top to the block of example sentences then it will go down
a:hover + .divs
{
display: block;
position: absolute;
background-color: lightgray;
width: 100%;
padding: 5px;
margin-top: 20px;
}
Updated fiddle link https://jsfiddle.net/umxf19vo/1/

Here, i used a jquery mouseover function for this
$(document).ready(function(){
$(".test").mouseover(function(){
if($(".test").find(".divs").hasClass("divs-hover")){
$(".test").find(".divs").removeClass("divs-hover");
$(".test").find("a").css("background-color","transparent");
}
$(this).find(".divs").addClass("divs-hover");
$(this).find("a").css("background-color","lightgray");
})
$(".test").mouseleave(function(){
$(".test").find(".divs").removeClass("divs-hover");
$(".test").find("a").css("background-color","transparent");
})
})
i don`t know if can make this with only css, but u can make with this way
https://jsfiddle.net/umxf19vo/14/