We Keep Coding

dynamic html element issue

when one of menus is chosen and option in select tag, apply button can be worked to be placed to be dynamic html element in Panel below. when a user clicks cancel button, that dynamic html element will be deleted.
As for an issue, when a user chooses one menu, dynamic html element will be redundantly placed to be in panels.
For example,
apply menu 2 > create dynamic html element in panel of menu2 > cancel menu 2 > apply menu other menu (3 or 1) > redundantly create dynamic html elements in previous panel of menu 2 and current panel of menu.
How am I able to completely delete dynamic html element when I click cancel button??
$(function() {
$(".section4 ul li:first-child").addClass("on");
//section4 ul li on
$("section.section4 ul li").click(function() {
$(this).addClass("on");
$("section.section4 ul li.on").not(this).removeClass("on");
});
// panel
$(".PaNel").hide();
$(".PaNel:eq(0)").show();
//addEventListner
$(".section4 ul li").click(function() {
$(".PaNel").hide();
$("#tab" + ($(this).index() + 1)).show();
});
//메뉴 선택
$(".section2").find("article").click(function() {
$(this).addClass("On");
$("article.On").not(this).removeClass("On");
});
//비활성신청
$(".btn2").css({
"display": "none"
});
//상단 메뉴
$("article").click(function() {
if ($(this).hasClass("On") && $("#menuSelect option:selected").index() > 0) {
$(".btn1").css({
"background": "red"
});
//$(".btn2").css({"display":"block"});
} else {
$(".btn1").css({
"display": "block"
});
$(".btn2").css({
"display": "none"
});
}
});
// while article is clicked, menuSelect.index() > 0
$("body").click(function() {
if ($("article").hasClass("On")) {
if ($("#menuSelect option:selected").index() > 0) {
$(".btn1").css({
"display": "none"
});
$(".btn2").css({
"display": "block"
});
}
}
})
$(".area_popup").addClass("none")
$(".end").addClass("none");
$(".section2").children("article").one("click", function() {
console.log($(this).index())
var target = $("#tab" + $(this).index())
$("#Apply").click(function() {
var menuSelect = document.getElementById("menuSelect");
//console.log(menuSelect);
switch (menuSelect.value) {
case "a":
case "b":
case "c":
case "d":
target.find(".Apply_Check").append("<div class='User'>" + menuSelect.value + "</div>");
break;
}
$(".end").removeClass("none");
$("#Apply").addClass("none");
//alert("신청 완료 되었습니다")
})
})
$(document).on("click", '.end', function() {
//본인꺼만
$(".User").remove();
$(".end").addClass("none");
$("#Apply").removeClass("none");
});
$("article").click(function() {
if (parseInt($(this).find("span").text()) == 0) {
//$(".button").css({"display":"none"});
//$(".btn1,.btn2, .end").css({"display":"none"})
//$(".btn4").css({"display":"block"});
$(".area_popup3").css({
"display": "block"
});
} else {
//$(".button").css({"display":"block"});
//$(".btn4").css({"display":"none"});
}
});
//메뉴 하$(단 클릭시 섹션 2 남은 수량이 없는 경우
$(".section4 ul").children("li").click(function() {
var article = $('article:eq(' + $(this).index() + ')')
if (parseInt(article.find("span").text()) == 0) {
$(".area_popup3").css({
"display": "block"
});
}
})
$("body").click(function(e) {
if ($("#menuSelect option:selected").index() == 0) {
$(".btn1").css({
"display": "block"
});
$(".btn2").css({
"display": "none"
});
}
})
});
function fn_popup_close(name) {
//$('body').removeClass('fixed');
//body class removeClass
$('.' + name).hide();
}
function fn_popup_open(name) {
//$('body').addClass('fixed');
$('.' + name).show();
}
/*//////////////////reset//////////////////////////////////////*/
* {
margin: 0;
padding: 0;
}
body,
header,
footer,
section,
nav,
article,
figure,
aside,
details,
main {
margin: 0;
padding: 0;
}
header,
footer,
section,
nav,
article,
figure,
aside,
details,
main {
display: block;
}
a:link,
a:visited {
color: #000;
text-decoration: none;
}
/*a:hover, a:focus{color:#aaa; text-decoration:none;}*/
body {
color: #333;
}
li {
list-style: none;
}
input[type="button"] {
cursor: pointer;
}
input[type=button],
select {
border-radius: 0;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
/*//////////////////reset//////////////////////////////////////*/
#wrap {
max-width: 100%;
margin: 0 auto;
}
/*//////////////section1/////////////////////////////////////*/
section.section1 {
width: 100%;
/*background:#F87141;*/
}
section.section1 .screen_info {
width: 100%;
overflow: hidden;
}
section.section1 .screen_info ul {
width: 300%;
overflow: hidden;
}
section.section1 .screen_info ul li {
width: 31.63%;
float: left;
padding: 10px 1% 10px .7%;
}
/*//////////////section2/////////////////////////////////////*/
section.section2 {
width: 100%;
overflow: hidden;
border: 1px solid #ccc;
border-width: 1px 0;
}
section.section2 h3 {
width: 100%;
height: 50px;
line-height: 50px;
border-bottom: 1px solid #ccc;
text-indent: 2%;
}
section.section2 article {
width: 31.33%;
padding-left: 2%;
height: 100px;
float: left;
}
section.section2 article div {
border-right: 1px solid #ccc;
}
.On {
background: #d4dbdd;
}
/*section.section2 article:last-child{border-right:none;}*/
section.section2 article h2 {
width: 100%;
height: 30px;
font-size: 14px;
line-height: 30px;
}
section.section2 article p.FoodName {
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
font-weight: 900;
font-size: 20px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
section.section2 article p.FoodCnt {
width: 90%;
height: 30px;
line-height: 30px;
text-align: right;
font-size: 13px;
}
/*//////////////section2/////////////////////////////////////*/
/*//////////////section3/////////////////////////////////////*/
section.section3 {
width: 100%;
padding-top: 30px;
}
section.section3 .Select {
border-top: 1px solid #ccc;
position: relative;
}
.Select {
display: block;
content: "";
clear: both;
}
section.section3 .Select p.Selected {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ccc;
}
section.section3 .Select p {
font-weight: 900;
text-indent: 9%;
}
section.section3 .Select p.Selected span {
cursor: pointer;
position: absolute;
right: 20px;
top: 4px;
}
section.section3 .Select p.Selected span img {
width: 10px;
}
.selection {
border-bottom: 1px solid #ccc;
}
/*.on{background:#ccc;}*/
section.section3 select {
width: 100%;
height: 30px;
background: #ECEFF0;
border: 1px solid #ccc;
border-width: 1px 0;
}
select#menuSelect::-ms-expand {
display: none;
}
/*IE*/
select#menuSelect {
appearance: none;
-webkit-appearance: none;
/*for chrome*/
-moz-appearance: none;
/*for firefox*/
background: url(./images/next_shadow.png) no-repeat right;
background-position-x: 97%;
background-size: 14px 24px;
text-indent: 2%;
}
section.section3 p.Avail_time {
width: 95%;
text-align: right;
line-height: 30px;
height: 30px;
padding-right: 5%;
}
section.section3 p input[type=button] {
width: 100%;
border: 1px solid #ccc;
border-width: 1px 0;
background: #F87141;
height: 40px;
color: #fff;
}
section.section3 p.btn1 input[type=button] {
background: #aaa;
}
section.section3 p.end input[type=button] {
background: #aaa;
}
.none {
display: none;
}
/*//////////////section3/////////////////////////////////////*/
/*//////////////section4/////////////////////////////////////*/
section.section4 {
padding-top: 30px;
}
section.section4 ul {
width: 100%;
overflow: hidden;
border: 1px solid #ccc;
border-width: 1px 0;
}
section.section4 ul li {
width: 25%;
height: 30px;
line-height: 30px;
float: left;
font-weight: 900;
font-size: 13px;
text-align: center;
background: #fff;
}
section.section4 ul li a {
display: block;
border-right: 1px solid #ccc;
}
.on>a {
background: #aaa;
color: #fff;
}
section.section4 ul li:last-child a {
border: none;
}
section.section4 .memo {
width: 100%;
}
section.section4 .memo input {
width: 100%;
}
section.section4 article.PaNel {
width: 98%;
padding-left: 2%;
height: 400px;
}
.Apply_Check {
width: 100%;
}
.Apply_Check p.Count {
width: 100%;
height: 50px;
line-height: 50px;
font-weight: 900;
}
#tab4 {
padding: 10px;
}
#tab4 p {
padding-bottom: 20px;
}
/*//////////////dynamic HTML Element ////////////////////////////////////*/
.User {
width: 100%;
height: 50px;
background: #aaa;
}
/*//////////////dynamic HTML Element ////////////////////////////////////*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<section class="section2">
<h3>choose menu</h3>
<article>
<div>
<h2>menu 1.</h2>
</div>
</article>
<article class="scene_two">
<div>
<h2>menu 2.</h2>
</div>
</article>
<article class="scene_three">
<div>
<h2>menu 3.</h2>
</div>
</article>
</section>
<section class="section3">
<select id="menuSelect">
<option value="menu" selected="selected">choose one</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
</select>
<!--<div class="Select">
<p class="Selected" id="reasonSelect" onclick="result();">신청사유 선택<span><img src="./images/next_shadow.png" alt="arrow"/></span></p>
<div class="selection">
<p>외근/출장</p>
<p>당직</p>
<p>당직</p>
<p>기타</p>
</div>
</div>-->
<p class="btn1 button"><input type="button" value="apply" /></p>
<p class="btn2 button"><input type="button" value="apply" id="Apply" /></p>
<p class="end button"><input type="button" value="cancel" onclick="fn_popup_open('area_popup')" /></p>
<!--<p class="btn4 button"><input type="button" value="신청 마감" onclick="fn_popup_open('area_popup')"/></p>-->
<!--<select>
<option>dd</option>
<option>dd</option>
<option>dd</option>
<option>ddd</option>
</select>-->
</section>
</section>
<section class="section4">
<ul>
<li>menu1</li>
<li class="scene_two">menu2</li>
<li class="scene_three">menu3</li>
<li>info</li>
</ul>
<article class="PaNel" id="tab1">
<div class="Apply_Check">
<p class="Count">Panel <span id="ppl1">1</span></p>
</div>
</article>
<article class="PaNel" id="tab2">
<div class="Apply_Check">
<p class="Count">Panel <span id="ppl2">2</span></p>
</div>
</article>
<article class="PaNel" id="tab3">
<div class="Apply_Check">
<p class="Count">Panel <span id="ppl3">3</span></p>
</div>
</article>
<article class="PaNel" id="tab4">
information
</article>
</section>
</div>

You could use JQuery's empty command, it removes all child elements from the parent element
$("#parent").empty()

How to create selectbox having check box

I am trying to implement a Selectbox which have some checkboxes in that selectbox like an image below. When i click on the select box it open the check box which exist in other div i have used z-index but its not working
it looks like this
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one"><input type="checkbox" id="one"/>First checkbox</label>
<label for="two"><input type="checkbox" id="two"/>Second checkbox </label>
<label for="three"><input type="checkbox" id="three"/>Third checkbox</label>
</div>
</div>
</form>
<div class="styled-select slate">
<select>
<option>Here is the first option</option>
<option>The second option</option>
<option>The third option</option>
</select>
</div>
This is CSS:-
<style>
.multiselect {
width: 200px;
height: 20px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
.styled-select {
background: url(http://i62.tinypic.com/15xvbd5.png) no-repeat 96% 0;
height: 29px;
overflow: hidden;
width: 240px;
}
.styled-select select {
background: transparent;
border: none;
font-size: 14px;
height: 29px;
padding: 5px; /* If you add too much padding here, the options won't show in IE */
width: 268px;
}
.styled-select.slate
{
background: url(http://i62.tinypic.com/2e3ybe1.jpg) no-repeat right center;
height: 34px;
width: 240px;
}
.styled-select.slate select {
border: 1px solid #ccc;
font-size: 16px;
height: 34px;
width: 268px;
}

#Sheraz, rather than modifying your code simply update with the following working code:
HTML
<dt>
<a href="#">
<span class="hida">Select</span>
<p class="multiSel"></p>
</a>
</dt>
<dd>
<div class="mutliSelect">
<ul>
<li>
<input type="checkbox" value="Apple" />Apple</li>
<li>
<input type="checkbox" value="Blackberry" />Blackberry</li>
<li>
<input type="checkbox" value="HTC" />HTC</li>
<li>
<input type="checkbox" value="Sony Ericson" />Sony Ericson</li>
<li>
<input type="checkbox" value="Motorola" />Motorola</li>
<li>
<input type="checkbox" value="Nokia" />Nokia</li>
</ul>
</div>
</dd>
<button>Filter</button>
</dl>
CSS
body {
font: normal 14px/100% "Andale Mono", AndaleMono, monospace;
color: #fff;
padding: 50px;
width: 300px;
margin: 0 auto;
background-color: #374954;
}
.dropdown {
position: absolute;
top:50%;
transform: translateY(-50%);
}
a {
color: #fff;
}
.dropdown dd,
.dropdown dt {
margin: 0px;
padding: 0px;
}
.dropdown ul {
margin: -1px 0 0 0;
}
.dropdown dd {
position: relative;
}
.dropdown a,
.dropdown a:visited {
color: #fff;
text-decoration: none;
outline: none;
font-size: 12px;
}
.dropdown dt a {
background-color: #4F6877;
display: block;
padding: 8px 20px 5px 10px;
min-height: 25px;
line-height: 24px;
overflow: hidden;
border: 0;
width: 272px;
}
.dropdown dt a span,
.multiSel span {
cursor: pointer;
display: inline-block;
padding: 0 3px 2px 0;
}
.dropdown dd ul {
background-color: #4F6877;
border: 0;
color: #fff;
display: none;
left: 0px;
padding: 2px 15px 2px 5px;
position: absolute;
top: 2px;
width: 280px;
list-style: none;
height: 100px;
overflow: auto;
}
.dropdown span.value {
display: none;
}
.dropdown dd ul li a {
padding: 5px;
display: block;
}
.dropdown dd ul li a:hover {
background-color: #fff;
}
button {
background-color: #6BBE92;
width: 302px;
border: 0;
padding: 10px 0;
margin: 5px 0;
text-align: center;
color: #fff;
font-weight: bold;
}
JS
/*
Dropdown with Multiple checkbox select with jQuery - May 27, 2013
(c) 2013 #ElmahdiMahmoud
license: http://www.opensource.org/licenses/mit-license.php
*/
$(".dropdown dt a").on('click', function() {
$(".dropdown dd ul").slideToggle('fast');
});
$(".dropdown dd ul li a").on('click', function() {
$(".dropdown dd ul").hide();
});
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide();
});
$('.mutliSelect input[type="checkbox"]').on('click', function() {
var title = $(this).closest('.mutliSelect').find('input[type="checkbox"]').val(),
title = $(this).val() + ",";
if ($(this).is(':checked')) {
var html = '<span title="' + title + '">' + title + '</span>';
$('.multiSel').append(html);
$(".hida").hide();
} else {
$('span[title="' + title + '"]').remove();
var ret = $(".hida");
$('.dropdown dt a').append(ret);
}
});
http://codepen.io/elmahdim/pen/hlmri
Hope that helps, Good luck.

#Sheraj use this plugin from jquery..
http://www.jqueryscript.net/demo/jQuery-Plugin-For-Multi-Select-List-with-Checkboxes-MultiSelect/

Changing the background color of the span and ul when the element is brought into focus?

I really need your help,
How would I go about changing the background color of the span and ul when the element is brought into focus? (clicked on by the user?) Here is a before (left) and after (right) visual representation of the desired effect:
Here is HTML, CSS & jQuery:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="jquery-1.11.3.min.js"></script>
<script src="IE11support.js"></script>
<style type="text/css">
* {
font-family: Segoe UI;
font-size: 9pt;
}
.select {
margin: 0;
padding: 0;
}
.select dd, .select dt, .select ul {
margin: 0px;
padding: 0px;
}
.select dd {
position: relative;
}
.select a, .select a:visited {
color: #000;
text-decoration: none;
outline: none;
}
.select dt:hover, .select dd ul:hover {
border-color: rgb(128,128,128);
}
.select dd ul li a:hover {
background-color: rgb(112, 146, 190);
color: #FFF;
}
.select dt {
background: url(arrow.png) no-repeat scroll right center;
display: block;
padding-right: 20px;
border: 1px solid rgb(170, 170, 170);
width: 180px;
overflow: hidden;
}
.select dt span {
cursor: pointer;
display: block;
padding: 4px;
height: 15px;
}
.select dd ul {
background: #fff none repeat scroll 0 0;
border-bottom: 1px solid rgb(170, 170, 170);
border-left: 1px solid rgb(170, 170, 170);
border-right: 1px solid rgb(170, 170, 170);
border-top: 0;
display: none;
left: 0px;
padding: 5px 0px;
position: absolute;
top: -1px;
width: auto;
min-width: 200px;
list-style: none;
}
.select dd ul li a {
padding-left: 10px;
padding-top: 3px;
padding-bottom: 3px;
display: block;
}
.selected {
background: rgb(195, 195, 195);
}
.header-list, .header-list:hover {
padding-left: 3px;
font-weight: bold;
font-style: italic;
cursor: pointer;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".select dt").click(function(e) {
e.stopPropagation();
var select = $(this).closest('.select');
select.find('ul').toggle();
select.find("dt, dd ul").css('border-color', 'rgb(128,128,128)')
});
$(".select dd ul li a").click(function(e) {
var text = $(this).html();
var select = $(this).closest('.select');
if ((select.data('val') == 'multiple') && (e.ctrlKey)) {
e.stopPropagation()
$(this).addClass('selected');
select.find('dt span').html("(" + select.find('a.selected').length + ")");
//select.find('dt span').html(get_data_array(select.find('dd ul').attr('id')).join(",")) Comma-Seperated List
}
else {
var text = $(this).html();
select.find("dd a").removeClass('selected');
$(this).addClass('selected');
select.find("dt span").html(text);
//select.find("dt a").css("background-color", "");
select.find("dd ul").hide();
}
});
$(document).bind('click', function() {
$(".select dd ul").hide();
$(".select dt, .select dd ul").css('border-color', '');
});
});
</script>
</head>
<body>
<dl class="select">
<dt><span id="vegetables"></span></dt>
<dd>
<ul>
<li><a data-val="" href="#"> </a></li>
<li>Carrots</li>
<li>Celery</li>
<li>Brocoli</li>
</ul>
</dd>
</dl>
</body>
</html>

Make the element focusable:
<dl tabindex="-1" class="select"><!-- if you want it to have
a real tab index you can set it to another number -->
<dt><span id="vegetables"></span></dt>
<dd>
<ul>
<li><a data-val="" href="#"> </a></li>
<li>Carrots</li>
<li>Celery</li>
<li>Brocoli</li>
</ul>
</dd>
</dl>
Then, in your CSS using :focus
.select:focus {
outline: 0; /* if that matters */
background-color: yellow;
}

You could probably just add a class to the container.
$('ul').on('click', function(){
$('.select').toggleClass('active');
})
And in your CSS
.select.active > span {
background-color: 'yellow';
}

Ng-repeat doesn't update after pushing value to array, tried $scope.$apply() but returns error

When you open chat and click on a name, it calls $scope.openChat(user) which pushes a name to the $scope.chat.openChats array. The ng-repeat is suppoused to watch this array for new values but does NOT update. I tried using $scope.$apply() after I push the value to array but get this error
Error: [$rootScope:inprog] http://errors.angularjs.org/1.3.14/$rootScope/inprog?p0=%24apply
Thanks for any help! Heres my codepen.
HTML
<div ng-app="MyApp" ng-controller="AppCtrl">
<div id="menubar">
<div class="logo"><img src="http://i.imgur.com/yS9Ug9Z.png"/></div>
<ul class="middle">
<div class="r1">Project Name <i class="glyphicon glyphicon-pencil"></i></div>
<ul class="r2">
<li class="dropdown">
<button href="#" data-toggle="dropdown" class="dropdown-btn">File</button>
<ul class="dropdown-menu">
<li>Action 1</li>
<li>Action 2</li>
<li>Action 3</li>
</ul>
</li>
<li class="dropdown">
<button href="#" data-toggle="dropdown" class="dropdown-btn">Edit</button>
<ul class="dropdown-menu">
<li>Action 1</li>
<li>Action 2</li>
<li>Action 3</li>
</ul>
</li>
<li class="dropdown">
<button href="#" data-toggle="dropdown" class="dropdown-btn">Help</button>
<ul class="dropdown-menu">
<li>Action 1</li>
<li>Action 2</li>
<li>Action 3</li>
</ul>
</li>
</ul>
</ul>
<div class="menu-btns">
<button id="comment-btn"><i class="material-icons">assignment</i> <span>Comment</span></button>
<button id="share-btn"><i class="material-icons">supervisor_account</i> <span>Share</span></button>
<button id="chat-btn" ng-click="openChatDialog()"><i class="material-icons">chat</i> <span>Chat</span></button>
</div>
<button id="user-btn"></button>
<div id="user-drop" class="shadow-1">
<ul>
<li>Smile</li>
<li>You</li>
<li>Goodlookin</li>
<li>Get Shwify</li>
<li>Cellar Door Is Beautiful</li>
<hr/>
<li>Your Profile</li>
<ul class="links">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
</ul>
</div>
</div>
<div id="chat-cntnr">
<div ng-repeat="chat in chat.openChats track by $index" class="chat-box"></div>
</div>
</div>
JS
angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('AppCtrl', function($scope, $mdDialog) {
//CHAT
$scope.chat = {};
$scope.chat.openChats = [];
$scope.collaborators = ['Dan', 'Miles', 'Ryan', 'kevin'];
var chatCntnr = document.getElementById('chat-cntnr');
// open a chat box
var isChatOpen = function(user) {
if ($scope.chat.openChats.indexOf(user) < 0) return false;
else return true;
};
$scope.openChat = function(user) {
if (!isChatOpen(user)) {
if (chatCntnr.style.display !== 'flex') {
chatCntnr.style.display = 'flex';
}
$scope.chat.openChats.push(user);
$scope.$apply();
}
};
// CHAT DIALOG
$scope.openChatDialog = function() {
$mdDialog.show({
controller: 'AppCtrl',
template: '<md-button ng-click="openChat(\'everybody\')">Everybody</md-button><md-button ng-repeat="user in collaborators" ng-click="openChat(user)"><svg class="status-light" height="17" width="17"><circle cx="8" cy="8" r="8" fill="lightGreen" /></svg>{{user}}</md-button>',
hasBackdrop: false,
clickOutsideToClose: true,
openFrom: '#chat-btn',
closeTo: '#chat-btn'
})
};
});
// chat dialog
// chat
/**
* MENUBAR
*/
var dropdownBtns = document.querySelectorAll('.middle .dropdown-btn');
var dropdowns = document.querySelectorAll('.middle .dropdown');
var userBtn = document.getElementById('user-btn');
var userDrop = document.getElementById('user-drop');
document.addEventListener('click', (e) => {
if (userDrop.classList.contains('open')) {
userDrop.classList.toggle('open');
}
});
userBtn.addEventListener('click', (e) => {
userDrop.classList.toggle('open');
e.stopPropagation();
})
for (var i = 0; i < dropdownBtns.length; i++) {
(function() {
var dropdownBtn = dropdownBtns[i];
var k = i;
dropdownBtn.addEventListener('mouseover', () => {
var x = isDropOpen();
if (x > -1 && x !== k) {
dropdowns[x].classList.toggle('open');
dropdowns[k].classList.toggle('open');
}
})
})();
}
var isDropOpen = () => {
for (var i = 0; i < dropdowns.length; i++) {
var dropdownClasses = dropdowns[i].classList;
if (dropdownClasses.contains('open')) return i;
}
return -1;
}
/**
* menubar
*/
CSS
html, body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
html ul, body ul {
padding: 0;
margin: 0;
}
#menubar {
font-family: sans-serif;
background-color: black;
display: flex;
position: relative;
white-space: nowrap;
}
#menubar .logo {
display: flex;
align-items: center;
padding: 10px;
background-color: lightGrey;
}
#menubar .logo img {
height: 40px;
}
#menubar .middle {
padding: 10px;
padding-top: 8px;
padding-bottom: 0px;
color: white;
width: 100%;
position: relative;
font-family: inherit;
margin-left: 8px;
margin-right: 20px;
}
#menubar .middle .r1 {
font-size: 20px;
}
#menubar .middle .r1 i {
position: relative;
top: -1px;
font-size: 12px;
font-weight: 700;
margin-left: 2px;
cursor: pointer;
}
#menubar .middle .r1 i:hover {
color: lightGrey;
}
#menubar .middle .r2 {
margin-top: 2px;
margin-left: -6px;
font-size: 15px;
padding-bottom: 6px;
}
#menubar .middle .r2 li {
display: inline-block;
}
#menubar .middle .dropdown-btn {
position: relative;
outline: 0;
background-color: transparent;
border: none;
cursor: pointer;
padding: 2px 6px;
z-index: 100;
margin: 0 1px;
margin-top: 1px;
}
#menubar .middle .dropdown-btn:hover {
background-color: grey;
}
#menubar .middle .open .dropdown-btn {
background-color: black;
margin: 0 !important;
border: white 1px solid;
border-bottom: none;
}
#menubar .middle .dropdown-menu {
background-color: black;
border: white 1px solid;
border-radius: 0;
margin-top: -1px;
z-index: 10;
}
#menubar .middle .dropdown-menu li {
display: block;
}
#menubar .middle .dropdown-menu a {
color: white;
}
#menubar .middle .dropdown-menu a:hover {
background-color: dodgerBlue;
}
#menubar .menu-btns {
display: flex;
margin: 12px;
margin-right: 0px;
color: white;
right: 0;
}
#menubar .menu-btns button {
outline: 0;
position: relative;
background-color: transparent;
border-radius: 2px;
border: #343436 3px solid;
margin: 0 5px;
padding: 2px 12px;
font-size: 15px;
white-space: nowrap;
}
#menubar .menu-btns button:hover {
background-color: #4d4d50;
}
#menubar .menu-btns button i {
position: relative;
top: 5px;
color: #aeaeae;
}
#menubar .menu-btns button span {
position: relative;
top: -3px;
}
#user-btn {
margin: 10px;
margin-bottom: 8px;
outline: 0;
width: 70px;
background: url("https://www.fillmurray.com/70/92");
border: none;
border-radius: 2px;
}
#chat-btn {
background-color: #343436 !important;
}
#chat-btn:hover {
background-color: #4d4d50 !important;
}
.shadow-1 {
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: all 0.2s ease-in-out;
}
#user-drop {
display: none;
position: absolute;
right: 0;
top: 100%;
background-color: white;
}
#user-drop ul {
list-style-type: none;
padding: 6px 0;
padding-bottom: 2px;
font-size: 15px;
font-weight: 500;
}
#user-drop ul li {
cursor: pointer;
padding: 4px 16px;
padding-right: 38px;
}
#user-drop ul li:hover {
background-color: #e7e7e7;
}
#user-drop ul hr {
margin: 8px 0;
border-top: black 1px solid;
}
#user-drop ul .links {
padding-top: 0;
}
#user-drop ul .links li {
display: inline-block;
padding-right: 2px;
font-size: 11px;
color: darkGrey;
}
#user-drop ul .links li:hover {
background-color: white;
color: black;
}
#user-drop.open {
display: initial;
}
md-dialog {
position: absolute;
right: 25px;
top: 80px;
}
md-dialog svg {
position: absolute;
left: 16px;
top: 11px;
}
#chat-cntnr {
display: none;
position: fixed;
bottom: 0;
right: 0;
}
#chat-cntnr .chat-box {
height: 250px;
width: 200px;
background-color: blue;
border: 1px solid black;
margin: 0 4px;
}
#chat-cntnr .chat-box:last-child {
margin-right: 0;
}

The problem is that $mdDialog is creating another (isolated) scope. To use your existing scope you have to call it like this:
$mdDialog.show({
scope: $scope,
controller: 'AppCtrl',
...
For further information check this post.
Also, you have to remove $scope.$apply(): you have to call it only when changes happen outside Angular (in a setTimeout() for example).
Why do I need to link the scope?
Short answer: because $mdDialog documentation says so
The dialog is always given an isolate scope.
Long answer: $mdDialog is a service that basically adds a directive to the page
The dialog's template must have an outer < md-dialog > element
Since directives can be added multiple times in a page, by default they have an isolated scope (see Angular documentation on directive), but you can link your scope to a directive if you need it.

Editing html+css+js for a drop down nav bar

I found perfect code for drop down nav bar. But I'm stuck trying to edit it for my needs. Original complete code is situated here: https://github.com/vandoan/Elli/blob/master/dropDownNav.html
And how it looks: http://codepen.io/Xia-lj/pen/KdKOxw
HTML:
<div id="topbar">
<div id="logo">LOGO</div>
<div id="sections_btn_holder">
<button onclick="toggleNavPanel('sections_panel')">Navigator <span id="navarrow">▾</span></button>
</div>
<div id="sections_panel">
<div>
Try adding things like more child div containers, links, buttons, menus, pictures, paragraphs, videos, etc...
</div>
</div>
</div>
CSS:
body {
margin: 0px;
background: #999;
}
div#topbar {
background: -webkit-linear-gradient(#666, #000);
background: linear-gradient(#666, #000);
height: 60px;
}
div#topbar > #logo {
float: left;
width: 140px;
height: 35px;
margin: 8px 0px 0px 30px;
font-size: 36px;
color: #999;
}
div#topbar > #sections_btn_holder {
float: left;
width: 144px;
height: 46px;
padding-top: 16px;
}
div#topbar > #sections_btn_holder > button {
background: #F90;
}
div#topbar > #sections_panel {
position: absolute;
height: 0px;
width: 550px;
background: #000;
top: 60px;
left: 160px;
border-radius: 0px 0px 8px 8px;
overflow: hidden;
z-index: 10000;
transition: height 0.3s linear 0s;
}
div#topbar > #sections_panel > div {
background: #333;
padding: 20px;
height: 238px;
margin: 10px;
color: #FC0;
}
JS:
function toggleNavPanel(x) {
var panel = document.getElementById(x),
navarrow = document.getElementById("navarrow"),
maxH = "300px";
if (panel.style.height == maxH) {
panel.style.height = "0px";
navarrow.innerHTML = "▾";
} else {
panel.style.height = maxH;
navarrow.innerHTML = "▴";
}
}
What I'm trying to get: drop down nav bar like in example, but with three buttons "History", "Philosophy", "Physics". And each of this three sections must contain few books' names, e.g:
History:-
The History of Herodotus.
Titus Livius. The History of Rome.
Ivan Krypiakevych. The Great History of Ukraine.
"Philosophy":-
Works by Plato.
Nicomachean Ethics By Aristotle.
Fables And Aphorisms by Hryhorii Skovoroda.
"Physics":-
Stephen Hawking. A Brief History of Time.
Yakov Perelman. Physics for Entertainment.
I would be grateful to hear from anyone who may be able to help. I'm new in Web-development.

How about something like this CodePen which is same example you provided just a bit modified on the HTML and CSS parts, inside div#sections_panel I've added 3 divs - you mentioned 3 sections in the question - with a .sub_sections class name.
function toggleNavPanel(x) {
var panel = document.getElementById(x),
navarrow = document.getElementById("navarrow"),
maxH = "300px";
if (panel.style.height == maxH) {
panel.style.height = "0px";
navarrow.innerHTML = "▾";
} else {
panel.style.height = maxH;
navarrow.innerHTML = "▴";
}
}
body {
margin: 0px;
background: #999;
}
div#topbar {
background: -webkit-linear-gradient(#666, #000);
background: linear-gradient(#666, #000);
height: 60px;
}
div#topbar > #logo {
float: left;
width: 140px;
height: 35px;
margin: 8px 0px 0px 30px;
font-size: 36px;
color: #999;
}
div#topbar > #sections_btn_holder {
float: left;
width: 144px;
height: 46px;
padding-top: 16px;
}
div#topbar > #sections_btn_holder > button {
background: #F90;
}
div#topbar > #sections_panel {
position: absolute;
height: 0px;
width: 550px;
background: #000;
top: 60px;
padding:0 10px;
left: 160px;
border-radius: 0px 0px 8px 8px;
overflow: hidden;
z-index: 10000;
transition: height 0.3s linear 0s;
}
div#topbar > #sections_panel > .sub_sections {
background: #333;
padding: 10px;
height: 258px;
margin:10px 2px 0 0;
color: #FC0;
width:calc(31% - 10px);
display:inline-block;
float:left;
}
#sections_panel > .sub_sections > a{
color:#EEE;
display:block;
padding:10px 5px;
text-decoration:none;
border-bottom:1px dotted #666;
}
#sections_panel > .sub_sections > a:hover{
color:#333;
background-color:orange;
}
#sections_panel > .sub_sections > h3{
color:orange;
text-align:center;
padding-bottom:5px;
border-bottom:1px #222 solid;
}
<div id="topbar">
<div id="logo">LOGO</div>
<div id="sections_btn_holder">
<button onclick="toggleNavPanel('sections_panel')">Navigator <span id="navarrow">▾</span></button>
</div>
<div id="sections_panel">
<div class="sub_sections">
<h3>Search Engines</h3>
Google
Yahoo!
Bing
</div>
<div class="sub_sections">
<h3>Social Networks</h3>
Facebook
Twitter
</div>
<div class="sub_sections">
<h3>Video Networks</h3>
Youtube
Vimeo
</div>
</div>
</div>

try this......
Html
<div id="topbar">
<div id="logo">LOGO</div>
<div id="sections_btn_holder">
<button onclick="toggleNavPanel('The History of Herodotus,Titus Livius. The History of Rome,Ivan Krypiakevych. The Great History of Ukraine','sections_panel')">History <span id="navarrow">▾</span></button>
<button onclick="toggleNavPanel('Works by Plato,Nicomachean Ethics By Aristotle,Fables And Aphorisms by Hryhorii Skovoroda','sections_panel')">Philosophy <span id="navarrow">▾</span></button>
<button onclick="toggleNavPanel('Stephen Hawking. A Brief History of Time,Yakov Perelman. Physics for Entertainment','sections_panel')">Physics <span id="navarrow">▾</span></button>
</div>
<div id="sections_panel">
<div>
</div>
</div>
</div>
CSS
body {
margin: 0px;
background: #999;
}
div#topbar {
background: -webkit-linear-gradient(#666, #000);
background: linear-gradient(#666, #000);
height: 60px;
}
div#topbar > #logo {
float: left;
width: 140px;
height: 35px;
margin: 8px 0px 0px 30px;
font-size: 36px;
color: #999;
}
div#topbar > #sections_btn_holder {
float: left;
width: auto;
height: 46px;
padding-top: 16px;
}
div#topbar > #sections_btn_holder > button {
background: #F90;
}
div#topbar > #sections_panel {
position: absolute;
height: 0px;
width: 550px;
background: #000;
top: 60px;
left: 160px;
border-radius: 0px 0px 8px 8px;
overflow: hidden;
z-index: 10000;
transition: height 0.3s linear 0s;
}
div#topbar > #sections_panel > div {
background: #333;
padding: 20px;
height: 238px;
margin: 10px;
color: #FC0;
}
JS
function toggleNavPanel(text,x) {
var panel = document.getElementById(x),
navarrow = document.getElementById("navarrow"),
maxH = "300px";
var books=text.split(",");
var html='';
for(var i=0; i<books.length; i++){
html+=(i+1)+") "+books[i]+"<br/>";
}
if (panel.style.height == maxH) {
panel.style.height = "0px";
panel.innerHTML="";
navarrow.innerHTML = "▾";
} else {
panel.style.height = maxH;
panel.innerHTML="<div>"+html+"</div>";
navarrow.innerHTML = "▴";
}
}

are you looking for something like http://codepen.io/fwpolice/pen/pqlgy
jQuery(document).ready(function (e) {
function t(t) {
e(t).bind("click", function (t) {
t.preventDefault();
e(this).parent().fadeOut()
})
}
e(".dropdown-toggle").click(function () {
var t = e(this).parents(".button-dropdown").children(".dropdown-menu").is(":hidden");
e(".button-dropdown .dropdown-menu").hide();
e(".button-dropdown .dropdown-toggle").removeClass("active");
if (t) {
e(this).parents(".button-dropdown").children(".dropdown-menu").toggle().parents(".button-dropdown").children(".dropdown-toggle").addClass("active")
}
});
e(document).bind("click", function (t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-menu").hide();
});
e(document).bind("click", function (t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-toggle").removeClass("active");
})
});
body {
background-color: #eee;
text-align: center;
padding-top: 50px;
}
.nav {
display: block;
font: 13px Helvetica, Tahoma, serif;
text-transform: uppercase;
margin: 0;
padding: 0;
}
.nav li {
display: inline-block;
list-style: none;
}
.nav .button-dropdown {
position: relative;
}
.nav li a {
display: block;
color: #333;
background-color: #fff;
padding: 10px 20px;
text-decoration: none;
}
.nav li a span {
display: inline-block;
margin-left: 5px;
font-size: 10px;
color: #999;
}
.nav li a:hover, .nav li a.dropdown-toggle.active {
background-color: #289dcc;
color: #fff;
}
.nav li a:hover span, .nav li a.dropdown-toggle.active span {
color: #fff;
}
.nav li .dropdown-menu {
display: none;
position: absolute;
left: 0;
padding: 0;
margin: 0;
margin-top: 3px;
text-align: left;
}
.nav li .dropdown-menu.active {
display: block;
}
.nav li .dropdown-menu a {
width: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li>
<a href="#">
No dropdown
</a>
</li>
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
Dropdown 1 <span>▼</span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">
Drop Item 1
</a>
</li>
<li>
<a href="#">
Drop Item 2
</a>
</li>
<li>
<a href="#">
Drop Item 3
</a>
</li>
</ul>
</li>
<li>
<a href="#">
No dropdown
</a>
</li>
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
Dropdown 2 <span>▼</span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">
asdf
</a>
</li>
</ul>
</li>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

Maybe this toolbar is one for you:
http://w2ui.com/web/demo/toolbar