Develop Reference

How to handle event Handler in jQuery 3.4.1

It shows two events at same time:
jQuery Code:
$('[data-trigger="dropdown"]').on('mouseenter', function(){
var submenu=$(this).parent().find('.submenu');
submenu.addClass('active');
}
HTML:
<ul class="profile-menu">
<li>
<a class="profile-menu-trigger" data-trigger="dropdown" href="#">Logged in as User</a>
</li>
<ul class="profile-submenu submenu ">
<li>Login</li>
<li> Logout</li>
<li>Options</li>
<li>Circus</li>
</ul>
</ul>
CSS:
.submenu{
list-style: none;
padding: 0px;
border: 1px solid #aaa;
background: #fff;
margin-top: 30px;
box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.3);
width: 250px;
position: absolute;
right: 20px;
display: none;
}
.submenu.active{ display: block; }
This program should show the menu on top right corner when touch on "User Logged in" but it can't.

Fixed header with horizontal scrolling

I'm working on a progressive web application, where the user can create code blocks that can expand horizontally (depending on the size of the content), and also, i have a fixed top app bar, but, when the page content overflow the page in the x axis, the top app bar options are pushed to the invisible side of canvas
Live web app: https://ide.code101.com.br
/* Prevent user from clicking on page elements before loading */
html {pointer-events: none}
a,
a:hover,
a:focus {text-decoration: none}
#editArea, #codeOutput {padding: 10px}
#editArea, .sortable {
list-style-type: none;
font-size: 18px;
}
#editArea *:not(.material-icons) {clear: both}
/* FIX SIZE ISSUES WITH MDC TEXTFIELD ON DIALOG (OUTLINED) */
.mdc-dialog .mdc-text-field {width: 100%}
.mdc-dialog .mdc-text-field--outlined::before,
.mdc-dialog .mdc-text-field--outlined::after {
width: 0 !important;
height: 0 !important;
}
/* ############################## */
.mdc-top-app-bar, .mdc-drawer, .mdc-dialog {user-select: none}
.mdc-top-app-bar--fixed-adjust {height: 100vh}
.list {min-height: 44.5px}
.codeide-logo {font-family: "Press Start 2P"}
.scrollDiv {
position: fixed;
width: 100%;
padding: 20px;
bottom: 0;
z-index: -1;
}
/* BLOCKS COLOR HIGHLIGHT (MONOKAI)
#272822 - BLACK
#F92672 - RED
#66D9EF - BLUE
#A6E22E - GREEN
#FD971F - ORANGE
-----------------------------*/
.commandBlock {
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
padding: 8px 16px !important;
margin-bottom: 16px !important;
border-radius: 4px;
float: left !important;
}
.code {display: none}
.drag {
float: left !important;
margin-right: 16px !important;
}
.close {
float: right !important;
margin-left: 16px !important;
}
.editable {
white-space: nowrap;
background-color: #FD971F;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
padding: 4px 8px !important;
border-radius: 4px;
}
.cmd_alert {background-color: #66D9EF}
.cmd_if, .cmd_else, .cmd_for {background-color: #A6E22E}
.cmd_comment {background-color: #BDC3C7}
/* ########## CODE BLOCKS ########## */
body.dragging, body.dragging * {cursor: move !important}
.dragged {
opacity: 0.5;
overflow: hidden;
}
ul.list {
padding-left: 0;
margin: 0 0 9px 0;
min-height: 10px;
}
ul.list li {
color: white;
display: block;
margin: 5px 0;
padding: 5px;
user-select: none;
box-sizing: content-box;
}
ul.list li.placeholder {
position: relative;
margin: 0;
padding: 0;
border-color: red;
border-style: dotted;
z-index: 2000;
}
ul.list li.placeholder:before {
position: absolute;
content: "";
width: 0;
height: 0;
margin-top: -8px;
left: -8px;
top: -1px;
border: 8px solid transparent;
border-left-color: red;
border-right: none;
z-index: 2000;
}
<!-- TOP APP BAR -->
<header class="mdc-top-app-bar mdc-top-app-bar--fixed w3-card">
<div class="mdc-top-app-bar__row">
<!-- CONTENT AT LEFT -->
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<!-- DRAWER BUTTON -->
<a id="drawerBtn" onclick="drawer.open = true" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<!-- APP TITLE -->
<span class="mdc-top-app-bar__title codeide-logo">codeIDE</span>
</section>
<!-- CONTENT AT RIGHT -->
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<!-- CHANGE VIEW MODE -->
<button class="mdc-icon-button material-icons" id="btnChangeView" onclick="changeViewMode()">code</button>
<!-- SIDE MENU -->
<div class="mdc-menu-surface--anchor">
<a onclick="menu.open = !menu.open" class="material-icons mdc-top-app-bar__action-item" aria-label="Opções" alt="Opções">more_vert</a>
<div class="mdc-menu mdc-menu-surface" tabindex="-1">
<ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical">
<!-- EXPORT FILE -->
<li onclick="exportFile($('#editArea').html())" class="mdc-list-item" role="menuitem">
<i class="mdc-list-item__graphic material-icons">save</i>
<span class="mdc-list-item__text">Exportar arquivo</span>
</li>
<!-- IMPORT FILE -->
<li onclick="importFile()" class="mdc-list-item" role="menuitem">
<i class="mdc-list-item__graphic material-icons">folder_open</i>
<span class="mdc-list-item__text">Importar arquivo</span>
</li>
<li class="mdc-list-divider" role="separator"></li>
<!-- NIGHT MODE -->
<li id="nightModeBtn" onclick="nightMode('trigger')" class="mdc-list-item" role="menuitem">
<i class="mdc-list-item__graphic material-icons">brightness_2</i>
<span class="mdc-list-item__text">Modo noturno</span>
</li>
<!-- ABOUT -->
<li onclick="displayAboutDialog()" class="mdc-list-item" role="menuitem">
<i class="mdc-list-item__graphic material-icons">info</i>
<span class="mdc-list-item__text">Sobre</span>
</li>
<li class="mdc-list-divider" role="separator"></li>
<!-- CODE101 -->
<li onclick="location.href='https://code101.com.br'" class="mdc-list-item" role="menuitem">
<i class="mdc-list-item__graphic material-icons">launch</i>
<span class="mdc-list-item__text">Visitar o code101</span>
</li>
</ul>
</div>
</div>
</section>
</div>
</header>

I Solved it!
by removing the overflow: scroll css property from the body, and passed it to the code blocks list element (#list)

Wont $('.headername').css('width',$(window).width()); not work? Considering you're only requiring your header in a viewable window space, since its floating

Navigation - transparent, horizontale center, difficult with Subnavigation

i would create this Navigation.
i have try some things with css and js.
but it works not on every browser and i think the code is dirty.
the driangle of the navigation-hover is center of the length. the transparent driangle is lay under the blue driangle and the body of the Subnavigation (or undernavigation) is flexible in width.
have you some ideas to create this navigation clean? and possibly without JS?
i hope you can help me. i have spend so much hours and it does nt correct work.
yours, yellow
$( ".active" ).mouseover(function() {
var xbreite = this.offsetWidth;
//Breite von nav-sub
var ybreite = this.nextElementSibling.offsetWidth;
var zbreite = ybreite - xbreite;
var xb = xbreite/2;
xb = xb - 23;
var zb = ybreite - xb;
xb = xb+"px";
zb = zb+"px";
// console.log(this.nextElementSibling.firstElementChild.firstElementChild);
//div rest -> aber bekomme kein element und style unter gebracht
var rest = this.nextElementSibling.firstElementChild.firstElementChild;
rest.style.width=xb;
var eck = this.nextElementSibling.firstElementChild.lastElementChild;
eck.style.width=zb;
//Subnav sichtbar machen
// this.nextElementSibling.style.top='59px';
this.nextElementSibling.style.visibility='visible';
});
//Subnavi schließen
$( ".nav-sub" ).mouseleave(function() {
var navsubs = $('.nav-sub');
var subsCount = $(navsubs).length;
for( hilf = 0; hilf < subsCount; hilf++){
//navsubs[hilf].style.top='-9999999px';
navsubs[hilf].style.visibility='hidden';}
});
.bcg{
position:absolute;
z-index:2;
}
.header{
position:fixed;
height:84px;
z-index:10;
background-color:#579dd3;
opacity: 0.75;
width:100%;
z-index: 100;
}
.logo{
float:left;
padding-left:1.875em;
padding-top:0.938em;
}
.nav{
float:left;
}
/* Navigation Primär */
.nav-prim{
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
position:absolute;
right:1.64em;
bottom: -1.2em;
font-size:17px;
text-transform:uppercase;
z-index:999;
}
/* Dreieck Navigation Primär */
.nav-prim ul li a {
position: relative;
}
.nav-prim ul li a:hover::after{
background-image: url("http://mattgelb.canopus.uberspace.de/nav_active.png");
bottom: -12px;
content: "";
display: block;
height: 32px;
position: absolute;
width: 65px;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
/*Aktiver Link */
.nav-prim .active{
position: relative;
}
.nav-prim .active::after{
background-image: url("http://mattgelb.canopus.uberspace.de/nav_active.png");
bottom: -12px;
content: "";
display: block;
height: 32px;
position: absolute;
width: 65px;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
/* Ende Dreieck Navigation Primär */
.nav-prim ul li{
float:left;
list-style:none;
padding-left:0.7em;
padding-right:0.7em;
/* position: relative; */
}
.nav-prim ul li:last-child{
padding-right:0;
}
.nav-prim ul li a{
text-decoration:none;
color:white;
height:56px;
display:block;
}
/* Subnavigation */
.nav-sub{
position:absolute;
color:blue;
padding:0;
margin:0;
z-index:11111;
visibility:hidden;
top: 59px;
/*
display:none;*/
}
.nav-sub li{
clear:both;
padding:0 !important;
margin:0;
background-color:white;
width:100%;
}
.nav-sub li:first-child{
background-color:transparent;
padding:0;
margin:0;
}
.nav-sub .eck{
background-image:url('http://mattgelb.canopus.uberspace.de/nav_bg_active.png');
background-repeat:no-repeat;
height:25px;
float:left;
}
.nav-sub .rest{
background-color:white;
height:25px;
width:30%;float:left;
}
.nav-sub a{
color:blue !important;
text-transform:none;
}
.nav-sub a:hover{
color:red !important;
background-image:none !important;
}
.nav-sub a:hover::after{
border:0 !important;
background-image:none !important;
}
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<img class="bcg" src="http://www.jessicajonesdesign.com/downloads/lines-wallpaper-orange.gif">
<div class="header">
<div class="logo">
<img width="60" src="https://davidwalsh.name/demo/codepenLogo.png">
</div>
<div class="nav">
<div class="nav-prim">
<ul>
<li>
<a class="active" href="#">Tätigkeitsbereiche</a>
<ul class="nav-sub">
<li>
<div class="rest"></div>
<div class="eck"></div>
</li>
<li>Seite 1</li>
<li>Coperate dsfsdfsdf Events blubb blieeee</li>
</ul>
</li>
<li>
Leistungen
</li>
<li>
Projekte
</li>
<li>
<a class="active" href="#">Fähigkeiten</a>
<ul class="nav-sub">
<li>
<div class="rest"></div>
<div class="eck"></div>
</li>
<li>Seite 1</li>
<li>Coperate dsfsdfsdf Events blubb blieeee</li>
</ul>
</li>
<li>
Aktuelles
</li>
</ul>
</div>
</div>
</div>

Hi You can use something like this
The HTML
<div class="nav">
<div class="nav-prim">
<ul>
<li>
<a class="active" href="#">Tätigkeitsbereiche</a>
<ul class="nav-sub">
<li>
<div class="rest">
<div class="eck"></div>
</div>
</li>
<li>Seite 1</li>
<li>Coperate dsfsdfsdf Events blubb blieeee</li>
</ul>
</li>
<li>
Leistungen
</li>
<li>
Projekte
</li>
<li>
<a class="active" href="#">Fähigkeiten</a>
<ul class="nav-sub">
<li>
<div class="rest"><div class="eck"></div></div>
</li>
<li>Seite 1</li>
<li>Coperate dsfsdfsdf Events blubb blieeee</li>
</ul>
</li>
<li>
Aktuelles
</li>
</ul>
</div>
</div>
And some css
body
{
background-color : #eeeeee;
}
div.nav ul
{
list-style-type : none;
}
div.nav ul li
{
font-family: Arial, Haettenschweiler, "Arial Narrow Bold", sans-serif;
color:black;
float: left;
padding: 10px;
vertical-align: middle;
text-transform:uppercase;
position : relative;
background-color : #0000ff;
}
div.nav a
{
color:black;
}
div.nav li ul
{
display: none;
position : absolute;
top : 100%;
left : -40px;
padding-top : 5px;
}
div.nav li:hover ul
{
display: block;
position: absolute;
z-index: 999;
}
div.nav li:hover li
{
float:none;
padding: 0;
text-align:left;
}
div.nav li:hover li a
{
min-width: 150px;
display:block;
}
.rest {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #eeeeee;
margin-left : 10px;
position : relative;
}
.eck {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #0000ff;
margin-left : 10px;
position : absolute;
top : -25px;
left : -30px;
z-index : 999;
}
You can also view the fiddle here https://jsfiddle.net/x8x2L93u/

change menu background color on selected

i need to change selected sub menu background color. but, i dont know how to change background color, when i click the submenu.
jsfiddle: http://jsfiddle.net/BJQ6y/
my Css code :
.menuContent { background-image:url("../images/new.png"); border:1px solid #C7C7C7; bottom: 0px; position: fixed; width:100%; margin: 0 auto; text-align: center; -moz-border-radius-topright: 10px; -moz-border-radius-topleft: 10px; border-top-right-radius: 10px; border-top-left-radius: 10px; -moz-box-shadow: 3px -3px 5px #B8B8B8; -webkit-box-shadow: 3px -3px 5px #B8B8B8; box-shadow: 3px -3px 5px #B8B8B8; }
.menuContent a.slider { background-color:#fff; background-image: -moz-linear-gradient(center top, #ddd, #FFF); background-image: -webkit-gradient(linear, center top, center bottom, from(#ddd), to(#FFF)); border: 1px solid #C7C7C7; border-bottom:none; cursor: pointer; float:right; height: 8px; margin:-15px 30px 0 0; padding:3px 20px; width: 8px; z-index: 2001; -moz-border-radius-topright: 7px; -moz-border-radius-topleft: 7px; border-top-right-radius: 7px; border-top-left-radius: 7px; -moz-box-shadow: 3px -2px 3px #B8B8B8; -webkit-box-shadow: 3px -2px 3px #B8B8B8; box-shadow: 3px -2px 3px #B8B8B8; }
.menuContent a.slider img { padding-bottom: 3px; }
#nav { list-style: none; padding: 0px; margin: 0px; }
#nav li { display: inline-block; background: #222; }
#nav li a { color:#858585; font-weight: bold; display: block; padding: 15px 25px; text-align:center; text-decoration:none; width: auto; -moz-border-radius-bottomright: 10px; -moz-border-radius-topleft: 10px; text-transform:uppercase; min-width: 125px; }
#nav li li a { padding: 10px 5px; text-align: left; }
#nav li li li a { padding: 7px 5px; text-align: left; }
#nav li ul { background: #333; margin: 0px; padding: 0px; }
#nav li a:hover, #nav li a.active, #nav li a.sel { background-color:#fff; color: #222; }
#nav li ul { display:none; }
#nav li ul li { background: #CCC; }
#nav li ul li ul{ background: #222; }
#nav li ul li li { background: #600; }
#nav li ul li { margin: 5px 0; display: block; }
#nav li a img { border-width: 0px; margin-right: 8px; vertical-align: middle; }
#nav ul li a img { background: url("../images/bulb.png") no-repeat; border-width:0px; height:16px; line-height:22px; vertical-align:middle; width:16px; }
#nav li ul li { border-bottom: 1px solid #ccc; }
#nav li li ul { margin-left: 25px; }
My Html CLde
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>Bharatanatyam</title>
<link rel="stylesheet" href="css/menu.css" type="text/css" media="screen">
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script>
$(function(){
$('.slider').click(function () {
$('#nav').slideToggle(300);
var img = $(this).find('img');
if ($(img).attr('id') == 'bot') {
$(img).attr('src', 'images/arrow_top.png');
$(img).attr('id', 'top');
} else {
$(img).attr('src', 'images/arrow_bottom.png');
$(img).attr('id', 'bot');
}
});
$('.sub').click(function () {
var cur = $(this).prev();
$('#nav li ul').each(function() {
if ($(this)[0] != $(cur)[0])
$(this).slideUp(300);
});
$(cur).slideToggle(300);
});
$('.sub_menu').click(function () {
var cur = $(this).prev();
$('#nav li li ul').each(function() {
if ($(this)[0] != $(cur)[0])
$(this).slideUp(300);
//$(this).css("background", "red");
});
$(cur).slideToggle(300);
});
});
</script>
</head>
<body>
<div class="menuContent"> <a class="slider"><img alt="" id="bot" src="images/arrow_bottom.png"></a>
<ul id="nav">
<li>
<ul id="1">
<li>
<ul id="2">
<li>Profile</li>
<li>Presentations</li>
<li>Recitals</li>
<li>Awards</li>
<li>Gallery</li>
<li>Media</li>
<li>Calendar</li>
<li>downloads</li>
</ul>
Bharatanatyam</li>
<li>
<ul id="3">
<li>Profile</li>
<li>Presentations</li>
<li>Recitals</li>
<li>Awards</li>
<li>Gallery</li>
<li>Media</li>
<li>Calendar</li>
<li>downloads</li>
</ul>
Kuchipudi</li>
</ul>
Sailaja </li>
<li>
<ul id="4">
<li>About Sailasudha</li>
<li>Admission</li>
<li>Presentation</li>
<li>Recticals</li>
<li>Gallery</li>
<li>Media</li>
<li>Calendar</li>
<li>Downloads</li>
</ul>
Sailasudha </li>
<li>
<ul id="5">
<li>Philosophy</li>
<li>
<ul id="6">
<li>Artist</li>
<li>Gallery</li>
<li>Media</li>
</ul>
<a href="#" class="sub_menu" >Year 1</a></li>
<li><ul id="7">
<li>Artist</li>
<li>Gallery</li>
<li>Media</li>
</ul><a href="#" class="sub_menu" >Year 2</a></li>
<li><ul id="8">
<li>Artist</li>
<li>Gallery</li>
<li>Media</li>
</ul><a href="#" class="sub_menu" >Year 3</a></li>
<li><ul id="9">
<li>Artist</li>
<li>Gallery</li>
<li>Media</li>
</ul><a href="#" class="sub_menu" >Year 4</a></li>
<li><ul id="10">
<li>Artist</li>
<li>Gallery</li>
<li>Media</li>
</ul><a href="#" class="sub_menu" >Year 5</a></li>
<li>Artist</li>
<li>Gallery</li>
<li>Media</li>
</ul>
Nrityanasangama </li>
<li>Contact Us</li>
</ul>
</div>
</body>
</html>
My Doubt :
When i will click "Kuchipudi" menu, its sub menu will be open. That time "Kuchipudi" background will be change as selected menu.
When i will click "Bharatanatyam" menu, its sub menu will be open. That time "Kuchipudi" background will be change like as previously and "Bharatanatyam" background color will be change as selected menu. I dont know how to change, its background color change.

Would this edit to your fiddle work:
$('.sub_menu').click(function () {
$('a.submenu').removeClass('selected');
$(this).addClass('selected');
var cur = $(this).prev();
$('#nav li li ul').each(function() {
if ($(this)[0] != $(cur)[0])
$(this).slideUp(300);
});
$(cur).slideToggle(300);
);
Then add this CSS:
.selected{background-color:#eee; //or whatever colour

Ideas for a complicated menu

I have a slightly complicated menu to code from PSD document and integrate into Wordpress.
This is how it looks:
The result of my work is this:
http://slavisaperisic.com/FlexE/meni_setap.html
Now, when I write function wp_list_pages(); I get the default markup:
<ul>
<li class="page_item"></li>
<li class="page_item"></li>
<li class="page_item"></li>
</ul>
But the markup I created (that gives me the appropriately styled dynamic menu) looks like this:
<div id="menu">
<div id="menu-left"></div>
<div id="main-menu">
<ul>
<li class="active first">
<div class="left_li"></div>
Exploring
<div class="right_li"></div>
</li>
<li class="second">
<div class="left_li"></div>
Using
<div class="right_li"></div>
</li>
<li class="third">
<div class="left_li"></div>
Downloading
<div class="right_li"></div>
</li>
</ul>
</div>
<div id="menu-right"></div>
</div>
I styled it so that it follows the length of the word in the menu item. Obviously, I can't use the wp_list_pages() function because the structure it gives me is different than the one I need.
Do you have some ideas? Maybe point me to somewhere where I can learn to code it differently or explain it to me?

Try this on for size. I've tested it in Chrome and Firefox.
Mark-up:
<ul>
<li class="page_item active"><a>Exploring</a></li>
<li class="page_item"><a>Using</a></li>
<li class="page_item"><a>Downloading</a></li>
</ul>
CSS:
ul, li { margin: 0; padding: 0; list-style: none; }
ul {
float: left;
background-color: #EEE;
border: 2px solid #DDD;
height: 46px;
position: relative;
border-radius: 12px 12px 0 0;
}
ul:after {
display: block;
content: "";
position: absolute;
right: -45px;
top: 3px;
width: 0;
height: 0;
border-style: solid;
border-color: transparent transparent #DDD transparent;
border-color: rgba(255,255,255,0) rgba(255,255,255,0) #DDD rgba(255,255,255,0);
border-width: 0 45px 45px 0;
}
li {
float: left;
height: 26px;
font-size: 1.2em;
padding: 10px 10px 10px 40px;
background-color: #EEE;
border-radius: 10px 10px 0 0;
position: relative;
}
li:after {
display: block;
z-index: 1;
position: absolute;
right: -40px;
top: 4px;
width: 0;
height: 0;
content: "";
border-style: solid;
border-color: transparent transparent #EEE transparent;
border-color: rgba(255,255,255,0) rgba(255,255,255,0) #EEE rgba(255,255,255,0);
border-width: 0 42px 42px 0;
}
li a {cursor: pointer;}
li a, li.active a:hover {color: #999;}
li a:hover, li.active a {color: white;}
li.active {background-color: lightblue;}
li.active:after {border-bottom-color: lightblue;}
You can see it in action here:
http://static.robinwinslow.co.uk/menustyling.html
I can't test in IE on this Ubuntu machine, but I think:
IE9 should be fine
IE8 should show triangles but not border radii
IE7 won't show triangles or border radii
Is that a good enough solution?

You can use wp_nav_menu to create custom menus. Details can be http://codex.wordpress.org/Function_Reference/wp_nav_menu
Using this you can create markup similar to:
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-5 current_page_item">
<a href="http://sewsoon.co.uk/">
<strong>Home</strong>
<span>Start Over</span>
</a>
</li>
However, you may want to look into using pseudo elements before: and after: to keep the markup more semantic. Depending upon if you're including javascript libraries or not you could use http://selectivizr.com/ to patch ie support.