We Keep Coding

How to fix the CSS before/after content and improve the expand/collapse function?

The sidebar menu below works as expected but there are some elements that I would like to fix and improve.
#1 If you expand the 'System Admin' section the line that is displayed on the left side a in the correct place. However, if you
click on the 'Access Control' the line eon the left side is going
below the horizontal line that's pointing to that section. I tried
fixing that with css 'last-child' method but still is not working
correct. If I change percentage from 50% to 85% then the other
section will have an issue.
#2 I'm looking for a better way to expand/collapse the sections. The function show mimic the existing one, but instead of using the object
with key items I would like to use classes instead if possible.
$( document ).ready(function() {
SIDEBAR_OLD.BASE.ExpandCollapse('Auto');
});
const SIDEBAR_OLD = {};
SIDEBAR_OLD.BASE ={};
SIDEBAR_OLD.BASE.ToggleContent = function(section_id) {
let $sContents = $("#section_" + section_id);
if ( $sContents.css("display") != "none" ) {
$sContents.css("display","none");
} else { // Default to seeing the folder's contents:
$sContents.css("display","");
}
};
$("#main-page-wrapper").on("click", ".toggle-menu", function(e){
e.preventDefault();
let section_id = $(this).attr("data-id");
SIDEBAR_OLD.BASE.ToggleContent(section_id);
});
SIDEBAR_OLD.BASE.ExpandCollapse = function(action) {
let $sContents = null,
sExpand = null,
sRoot = false,
items = {1:"m",2:"sysadmin",5:"access"};
for (key in items) {
$sContents = $("#section_" + items[key]);
switch (action) {
case "Expand":
sExpand = "Yes";
break;
case "Collapse":
sExpand = "No";
break;
default:
if ( !(sExpand = $sContents.attr("data-expand")) ) sExpand = "Yes";
}
// Never close root elements automatically. Only ToggleContent(pNumber), below, can do that.
if ( sRoot = $sContents.attr("data-root") ) { // Note! Assignment! "=", not "=="!
if (sRoot == "Yes") sExpand = "Yes";
}
if ( sExpand == "No" ) {
$sContents.css("display","none");
} else { // Default to seeing the folder's contents:
$sContents.css("display","");
}
}
return true;
};
$("#main-page-wrapper").on("click", ".collapse-menu", function(e){
e.preventDefault();
let action = $(this).attr("data-action");
SIDEBAR_OLD.BASE.ExpandCollapse(action);
});
.sidebar {
position: absolute;
top: 56px;
right: 0px;
bottom: 0px;
left: 0px;
width: 180px;
background-color: #0071bc;
color: #fff;
height: calc(100vh - 98px);
overflow: auto;
font-size: 9pt !important;
white-space: nowrap;
}
.sidebar a {
color: #fff;
}
.menuitem {
color: #fff;
font-weight: bold;
text-decoration: none;
}
.menuitem:hover, .menuitem:focus {
color: #ff0;
}
#tree {
font-weight: bold;
padding: 1px;
}
#expandcollapse {
border: 1px solid white;
text-align: center;
}
.sb-row {
border: 0px;
height: 22px;
margin: 0px;
overflow: hidden;
padding: 0px 0px 0px 3px;
position: relative;
white-space: nowrap;
}
.fa-folder-open:before {
color: #DBDB2A !important;
}
.nav>li {
position: relative;
display: block;
}
.nav>li>a {
position: relative;
display: block;
padding: 7px 22px 6px;
}
.nav>li>a:focus {
text-decoration: none;
background: transparent;
background-color: transparent;
}
.nav > li > a:hover {
color: red;
background-color: transparent;
text-decoration: none;
}
.nav.side-menu>li {
position: relative;
display: block;
cursor: pointer;
}
.nav.child_menu li {
padding-left: 20px;
}
.nav.child_menu>li>a {
font-weight: 500;
font-size: 12px;
font-weight: bold;
}
li.first-level::before {
background: #fff;
bottom: auto;
content: "";
height: 1px;
left: 10px;
margin-top: 14px;
position: absolute;
right: auto;
width: 8px;
}
li.first-level::after {
border-left: 1px solid #fff;
bottom: 0;
content: "";
left: 10px;
position: absolute;
top: 0;
}
ul.nav.side-menu li.first-level:last-child::after {
bottom: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<body>
<div class="container body" id="main-page-wrapper">
<div class="sidebar">
<div id="tree" role="navigation" data-expandall="Auto">
<div id="expandcollapse">
<a class="menuitem collapse-menu pr-2" href="#" data-action="Expand">Expand</a> | <a class="menuitem collapse-menu pl-2" href="#" data-action="Collapse">Collapse</a>
</div>
<div class="sb-row">
<a class="toggle-menu" title="Open/Close Folder - System Management" data-id="m">
<i class="fa fa-folder-open fa-lg"></i> System Management
</a>
</div>
<div id="section_m" class="menu-section" data-root="Yes" data-expand="Yes">
<ul class="nav side-menu">
<li class="first-level">
<a class="toggle-menu" href="#" title="System Admin" data-id="sysadmin"><i class="fa fa-folder-open"></i> System Admin</a>
<ul class="nav child_menu first" id="section_sysadmin" data-expand="No">
<li><a class="link-item" data-action="param" title="System Parameters">System Parameters</a></li>
<li><a class="link-item" data-action="schema" title="Select Schema">Select Schema</a></li>
<li><a class="link-item" data-action="item" title="Menu Item">Menu Items</a></li>
</ul>
</li>
<li class="first-level">
<a class="toggle-menu" href="#" title="Access Control" data-id="access"><i class="fa fa-folder-open"></i> Access Control</a>
<ul class="nav child_menu first" id="section_access" data-expand="No">
<li><a class="link-item" data-action="user" title="Manage User">Manage User</a></li>
<li><a class="link-item" data-action="role" title="Manage Role">Manage Role</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>

Show Info-Box when hover with CSS and JQuery

I want a Info-Box (here <div class="inner">...</div>) which knows if there is enough space on the right, left, up or down to open and then does.
I already can check the space on the left and right, but I didn't get the box to open to the left side.
If I hover over the 'i' span the Box will be showed, and the z-index of all ".inner" will be set to 100 without the one I hovered. If I leave the "inner" div container all will be set to Normal
$(document).on("mouseenter", ".container", function() {
//höhe des Documents
let getD = $(document).width();
console.log(" getD: " + getD);
//breite des Documents
let getDh = $(document).height();
console.log("getDh: " + getDh);
//Aktuelle Position offset
var offset = $(this).offset();
console.log("Offset, Left: " + offset.left + " Top: " + offset.top)
var space_right = getD - offset.left;
var space_inner = $(".inner").width()
console.log(space_inner);
if (space_right >= space_inner) {
$(".inner").css("z-index", 100);
$(this).css("z-index", 5000);
console.log("true");
} else {
console.log("false");
}
});
$(document).on("mouseleave", ".inner", function() {
$(".inner").css("z-index", 5000);
$(".container").delay(400)
.queue(function(next) {
$(this).css("z-index", 100);
next();
})
});
.tabelle-test,
tr,
td,
th {
border-style: solid;
}
#collapse {
border-collapse: collapse;
}
.container {
width: 20px;
height: 20px;
position: relative;
}
.inner {
position: absolute;
z-index: 5000;
background: rgb(9, 201, 153);
padding: 1em;
border-radius: 10px;
width: 250px;
clip-path: circle(5% at 5% 8%);
transition: all .5s ease-in-out;
cursor: pointer;
}
.inner>.info_p {
color: white;
font-size: .8rem;
}
.inner>.info_span {
float: left;
color: white;
font-weight: bold;
transition: color .5s;
position: relative;
top: -14px;
left: -4px;
}
.inner>.info_h {
color: white;
margin: 0;
}
.inner:hover {
clip-path: circle(75%);
z-index: 1000;
background: #00B6FF;
}
.innen:hover span {
color: rgba(255, 255, 255, 0)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tabelle-test" id="collapse">
<tr width="1020px">
<th width="1000px">ganz viel BlaBla</th>
<th width="20px" height="20px">Info</th>
</tr>
<tr>
<td>blaaaaaaaaa</td>
<td class="info-td">
<div class="container">
<div class="inner">
<span class="info_span">i</span>
<h1 class="info_h">Hey</h1>
<p class="info_p">This is an informative card that will tell you something that's... well, important!</p>
</div>
</div>
</td>
</tr>
</table>

Here is the code. There are changes in css. I have changed into .inner, .container. There is no change in jquery. And if any changes , Please let me know.
.tabelle-test,tr,td,th{border-style:solid;}
#collapse{border-collapse:collapse;}
.container{width: 100%;height: 20px;position: relative;top: 0;}
.inner{position:absolute;z-index:5000;background:rgb(9, 201, 153);padding:1em;border-radius:10px;width:250px;clip-path:circle(5% at 93% 8%);transition:all .5s ease-in-out;cursor:pointer;right: -5px;}
.inner>.info_p{color:white;font-size:.8rem;}
.inner>.info_span{color:white;font-weight:bold;transition:color .5s;position: absolute;top:1px;right:18px;}
.inner>.info_h{color:white;margin:0;}
.inner:hover{clip-path:circle(75%);z-index:1000;background:#00B6FF;}
.innen:hover span{color:rgba(255, 255, 255, 0)}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tabelle-test" id="collapse">
<tr width="1020px">
<th width="1000px">ganz viel BlaBla</th>
<th width="20px" height="20px">Info</th>
</tr>
<tr>
<td>blaaaaaaaaa</td>
<td class="info-td">
<div class="container">
<div class="inner">
<span class="info_span">i</span>
<h1 class="info_h">Hey</h1>
<p class="info_p">This is an informative card that will tell you something that's... well, important!</p>
</div>
</div>
</td>
</tr>
</table>

How can I make my skills graph use a grade letter, rather than a percentage?

I've looked everywhere for this specific need but cannot find any good sources. I have a 'skills' graph that shows how well I can accomplish things. My issue is that I don't want it to display a percentage, but a letter grade (A+, A, B, C)
Here is the link
Here is the code
<script type="text/javascript">
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
function grow() {
var element = '.bar';
var i = 1;
$(element).each(function(index, value) {
var percent = $(this).attr('data-percent');
var timing = percent / 100;
setTimeout(function() {
$(value).css('max-width', +percent + '%').css('transition', timing + 's ease all');
$(value).append('<div class="num">' + percent + '%</div>');
}, i * 50);
i++;
});
}
$(window).load(function() {
requestAnimationFrame(grow);
});
</script>
.bar {
background: white;
border-top: 1px solid #b4996d;
width: 100%;
max-width: 0;
height: 25px;
margin: 0 0 10px 0;
border-top-style: dotted;
}
.num {
line-height: 22px;
color: #b4996d;
font-size: 12px;
text-align: right;
font-family: 'open_sansbold';
}
.label-graph {
line-height: 22px;
position: absolute;
color: #333;
font-size: 12px;
font-family: 'open_sansbold';
}
.holder {
margin: 0 auto;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="holder">
<div class="bar" data-percent="95">
<span class="label-graph">Web Design</span>
</div>
<div class="bar" data-percent="95">
<span class="label-graph">Graphic Design</span>
</div>
<div class="bar" data-percent="95">
<span class="label-graph">Photoshop</span>
</div>
<div class="bar" data-percent="80">
<span class="label-graph">HTML5</span>
</div>
<div class="bar" data-percent="90">
<span class="label-graph">Illustration</span>
</div>
<div class="bar" data-percent="85">
<span class="label-graph">Print</span>
</div>
</div>

Here is a simple example with what #lux suggests in the comment. You add conditions on what you get with the data-percent attribute and it's on :)
See it here
$(function(){
$('.bar').each(function(i,v){
data = $(this).data('percent');
// just an example, you can set whatever you wants as value and conditions
if(data > 80){
$(this).addClass('grade-Aplus');
}
else if(data <= 80 && data > 60){
$(this).addClass('grade-A');
}else{
$(this).addClass('grade-B');
}
});
});
CSS
.bar:before {content:""; width: 0; height: 30px; background: blue; position: absolute; left: 0; top: 0; transition: all 0.5s; }
.bar { position: relative; margin: 15px 0; padding: 7px 0 0 110px}
.bar.grade-Aplus:before { width: 100px; content: "A+"; color: #fff;}
.bar.grade-A:before { width: 80px; content: "A"; color: #fff}
.bar.grade-B:before { width: 30px; content: "B"; color: #fff}
/* and so on ... :) */

Menu navigation not working with jquery datepicker

I have database generated menu with child menu items in my MVC4 web application which was working fine until I didn't implemented Jquery datepicker. As soon as I included datetimepicker.js and jqueryui bundle, my menu stopped expending. I had tried to change order of scripts and style but no success. I am fairly new to css so I am not be able to figure out whats going wrong here.
Here is my _Layout.cshtml:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="~/Images/Company-logo/logo.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jqueryui")
#Styles.Render("~/Content/themes/base/css","~/Content/themes/base", "~/Content/css")
<script src="~/Scripts/DatePickerReady.js"></script>
<link href="~/Content/indexView.css" rel="stylesheet" />
</head>
<body>
<header>
<div>
<img src="~/Images/Company-logo/header_bar.png" style="width:100%"/>
</div>
<div class="content-wrapper">
<div class="float-right">
#Html.Partial("Menu")
</div>
</div>
</header>
<div id="body">
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<footer>
</footer>
<script src="#Url.Content("~/Scripts/dbGeneratedMenu.js")" type="text/javascript"></script>
<link href="#Url.Content("~/Content/dbGeneratedMenu.css")" rel="stylesheet" type="text/css" />
#RenderSection("scripts", required: false)
</body>
<script type="text/javascript">
$m = jQuery.noConflict();
$m(document).ready(function () {
$m('.menu').dbGeneratedMenu();
});
</script>
</html>
Following is my css for menu:
.menu, .menu ul
{
margin: 0;
padding: 0;
list-style-type: none;
position: relative;
line-height: 2.5em;
}
.menu a
{
text-decoration: none;
}
.menu > li
{
margin-left: 15px;
}
.menu > li:first
{
margin-left:0px!important;
}
.menu > li > a
{
padding: 0px 10px;
margin: 0;
width: 100%;
text-decoration: none;
color: #005D7C;
font-weight: bold;
}
div.box
{
position: absolute;
z-index: -1;
background-color: #75CDD2;
left: 0;
top: 0;
border-radius: 4px 4px 0px 0px;
-moz-border-radius: 4px 4px 0px 0px;
-webkit-border-radius: 4px 4px 0px 0px;
}
li.pull-down
{
padding-right:6px;
}
li.pull-down > a
{
background-image: url(/Images/menu/darrow.png);
background-position: 96% 75%;
background-repeat: no-repeat;
padding-right: 20px;
}
li.right-menu > a
{
background-image: url(/Images/menu/rarrow.png);
background-position: 97% 45%;
background-repeat: no-repeat;
}
.menu a.selected
{
background-color: #75CDD2;
border-radius: 0px 4px 4px 4px;
-moz-border-radius: 0px 4px 4px 4px;
-webkit-border-radius: 0px 4px 4px 4px;
}
.menu li
{
float: left;
position: relative;
}
.menu ul
{
position: absolute;
display: none;
width: 200px;
top: 2.5em; /*padding-right: 10px;*/
background-color: #B8C402; /*-moz-opacity: .50; filter: alpha(opacity=50); opacity: .50;*/
border-radius: 0px 4px 4px 4px;
-moz-border-radius: 0px 4px 4px 4px;
-webkit-border-radius: 0px 4px 4px 4px;
}
.menu li ul a
{
width: 180px;
height: auto;
float: left;
color: #FFFFFF;
padding: 0 10px;
}
.menu li ul li
{
padding: 0;
margin: 0;
}
.menu ul ul
{
top: auto;
}
.menu li ul ul
{
left: 198px; /*margin: 0px 0 0 10px;*/
}
.menu-item-selected > a
{
background-color: #000000;
-moz-opacity: .50;
filter: alpha(opacity=50);
opacity: .50;
font-weight: bold;
}
a:hover {
background-color: #B8C402;
color: #FFFFFF !important;
}
.menu-item-selected > a:hover
{
background-color: #000000;
color: #FFFFFF !important;
}
This is JQuery fiddle for database generated menu:
(function ($) {
$.fn.extend({
dbGeneratedMenu: function () {
return this.each(function () {
//add class .drop-down to all of the menus having drop-down items
var menu = $(this);
var timeoutInterval;
if (!menu.hasClass('menu')) menu.addClass('menu');
$("> li", menu).each(function () {
if ($(this).find("ul:first").length > 0)
$(this).addClass('pull-down');
});
$("> li ul li ul", menu).each(function () {
$(this).parent().addClass('right-menu');
});
$("li", menu).mouseenter(function () {
var isTopLevel = false;
//if its top level then add animation
isTopLevel = $(this).parent().attr('class') === 'menu';
if (isTopLevel) {
clearTimeout(timeoutInterval);
var w = $(this).outerWidth();
// if ($(this).hasClass('pull-down')) w += 10;
var h = $(this).outerHeight();
var box = $('<div/>').addClass('box');
$('> li', menu).removeClass('selected');
$('>li div.box', menu).remove();
$('>li ul', menu).css('display', 'none').slideUp(0);
$(this).prepend(box);
$(this).addClass('selected');
box.stop(true, false).animate({ width: w, height: h }, 100, function () {
if ($(this).parent().find('ul:first').length == 0) {
timeoutInterval = setTimeout(function () {
box.stop(true, false).animate({ height: '+=5' }, 300, function () {
box.parent().find('ul:first').css('display', 'block').css('top', box.height()).stop(true, false).slideDown(100);
});
}, 10);
}
else {
timeoutInterval = setTimeout(function () {
box.stop(true, false).animate({ height: '+=0' }, 0, function () {
box.parent().find('ul:first').css('display', 'block').css('top', box.height()).stop(true, false).slideDown(100);
});
}, 10);
}
});
}
else {
$(this).find('ul:first').css('display','block').stop(true, false).slideDown(100);
}
}).mouseleave(function () {
isTopLevel = $(this).parent().attr('class') === 'menu';
if (isTopLevel) {
$(this).parent().find('div.box').remove();
}
$(this).find('ul').slideUp(100, function () {
$(this).css('display', 'none');
});
});
$('> li > ul li a', menu).hover(function () {
$(this).parent().addClass('menu-item-selected');
}, function () {
$(this).parent().removeClass('menu-item-selected');
});
});
}
});
})(jQuery);
Partial view for date:
#model DateTime?
#{
var value = "";
if (Model.HasValue) {
value = String.Format("{0:d}", Model.Value.ToString("dd-MM-yyyy"));
}
}
#Html.TextBox("", value, new { #class = "datefield", type = "date" })
model:
public class LEAVE_REQUEST
{
[Display(Name = "Id"), Required, DatabaseGenerated(DatabaseGeneratedOption.None)]
public long ALLOTMENT_REQUEST_ID { get; set; }
[Display(Name = "Request date"), Required]
public Nullable<System.DateTime> REQUEST_DATE { get; set; }
[Display(Name = "Leave start date"), Required(ErrorMessage="Leave start date not entered")]
[DataType(DataType.Date), DisplayFormat(DataFormatString = "{0:dd-mm-yyyy}")]
public Nullable<System.DateTime> LEAVE_START_DATE { get; set; }
}
View where I am implementing datetimepicker
#model TESTAPP.Models.LEAVE_REQUEST
#{
ViewBag.Title = "Create";
}
<script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
#using (Html.BeginForm()) {
#Html.AntiForgeryToken()
<fieldset>
<legend>LEAVE_REQUEST</legend>
<div class="editor-label">
#Html.LabelFor(model => model.LEAVE_START_DATE)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.LEAVE_START_DATE)
#Html.ValidationMessageFor(model => model.LEAVE_START_DATE, "*")
</div>
#Html.ValidationSummary(false)
<p>
<input type="submit" value="Submit" class="submitButton"/>
</p>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
I really appreciate any help from you guys. Thanks

I finally solved my problem. I think something is conflicting in JQuery bundle with js file I'd used for menu navigation. I used jquery-1.8.2.min.js only instead of rendering entire bundle. and now its working as expected. However, I am still not be able to find what conflict with what :(

Change div tag into table for IE7

I have created a Div tables with display:table; but its not working ie7 or ie6.. And i don't want to use display-table.htc Hack for this...
I want to change
"<div class='divTable'> into <table class='divTable'>"
"<div class='divRow ieclear'> into <tr class='divRow ieclear'>"
"<div class='divCell'> into <td class='divCell'>"
Now I'm trying to convert 'Div' with 'Table' if browser.version == 7 || browser.version == 6... I'm new to Jquery..:D...
<div id="test">
<div class="divTable">
<div class="divRow ieclear">
<div class="divCell">Cell Wording1</div>
<div class="divCell">Cell Wording2</div>
<div class="divCell">Cell Wording3</div>
<div class="divCell">Cell Wording4</div>
</div>
</div>
</div>
CSS//----
.divTable {
font-family: Arial;
font-size: 12px;
display: table;
width: 981px;
border: 10px soild #ECECEC;
border-spacing: 0px;
overflow: hidden; /* border-collapse:separate;*/}
.divRow {
display: table-row;
*display: block;*
height: 100%;
width: 981px;
}
.divCell {
*float: left;*
display: inline-block;
display: table-cell;
width: 200px;
padding: 10px;
border-bottom: 1px solid #E9E9E4;
border-right: 1px solid #fff;
background: #F5F6F0;
}
.ieclear {
clear: both;
}
jQuery//
$(function () {
//alert($.browser.version);
jQuery("#test").find(".divTable").html('<table class="divTable">' + $(".divTable").html() + "</table>").html();
//or
$('div').replaceWith(function () {
return $("<table />", { html: $(this).html() });
});
});
Please suggest me or help me to solve this...:)

try to use:
position:relative;
display: table-cell /*IE9+ and other browsers*/;
display: block /*IE8 and lower*/;