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>

How to fix div position when it reaches middle of viewport?

I have reference image attach for description.As in figure it is having two section side by side.One is for image(mobile and tablet) and second is for is features.This whole section is below the fold.
Now when user scrolls to view it and when image reaches vertically middle of the viewport its position should remain fixed.While its position is fixed features should scroll as normally.As one feature goes out of viewport image should change. When all features are out of viewport, position of image should again become static.
I am using skrollr js plugin for this.Please help...
Here is the code
.featurenav {
margin: 0px;
padding: 0px;
list-style: none;
}
.featurenav li:before {
content: url('../images/point.png');
position: absolute;
left: 0px;
top: 5px
}
.featurenav li {
font-family: OpenSans-Light;
color: #838b80;
font-size: 30px;
margin-bottom: 90px;
padding-left: 83px;
position: relative;
}
.color {
float: left;
width: 74px;
height: 74px;
margin: 30px 25px 0px 0px;
border-radius: 5px;
}
.color1 {
background-color: #c9bda3;
}
.color2 {
background-color: #c99a32;
}
.color3 {
background-color: #838b80;
}
.color4 {
background-color: #fff;
}
.showcase img {
width: 100%;
}
.showcase img:not(:first-child) {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 padding-zero">
<div class="col-sm-6">
<ul class="featurenav">
<li class="firstli">Graphical Layout</li>
<li class="secondli">Open sans Font Used</li>
<li class="thirdli">Colors Used
<br>
<div class="color color1"></div>
<div class="color color2"></div>
<div class="color color3"></div>
<div class="color color4"></div>
<div class="clearfix"></div>
</li>
<li class="fourthli">Parallax Smooth Scrolling</li>
<li class="fifthli">Adaptable</li>
</ul>
</div>
<div class="col-sm-6 showcase">
<img src="images/mobile_tablet.png" data-bottom-top="display:block" alt="showcase" data-anchor-target=".firstli" />
<img src="images/mobile_tablet_2.png" alt="showcase" />
<img src="images/mobile_tablet_3.png" alt="showcase" />
<img src="images/mobile_tablet_4.png" alt="showcase" />
<img src="images/mobile_tablet_5.png" alt="showcase" />
</div>
<div class="clearfix"></div>
</div>

Your images aren't working, so here's a generic solution. All you have to do is change the element to position: fixed; when you scroll to wherever the image is minus half the browser viewport height
$(window).on('load', function() {
$affix = $('#affix');
$affix.attr('data-affix', $affix.offset().top);
}).on('scroll', function() {
var scrolled = $(window).scrollTop(),
vh = $(window).height(),
halfView = (vh / 2),
scrollPoint = $affix.attr('data-affix') - halfView;
if (scrolled >= scrollPoint) {
$('img').addClass('fixed');
} else {
$('img').removeClass('fixed');
}
});
* {margin:0;}
section {
height: 500vh;
}
img {
max-width: 600px;
width: 100%;
}
.fixed {
position: fixed;
top: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section></section>
<section><img id="affix" src="http://plusquotes.com/images/quotes-img/cool_cat.jpg" data-affix></section>

Issue showing a selected id

I am having an issue getting tabs to open based on the selection I am choosing. In the snippet you will see 4 boxes. If you click on box 1, I am wanting #marketing1 to open below it and so on.
The method I am using is to get the specific id of the button selection (the 1,2,3,4 box) and then declare a variable to just get the number. Then to add that number to the id of #marketing to show the appropriate section. I am not sure what I am doing wrong. No errors are showing.
Ps - I am also trying to add an .active class to the #marketing-service for when one of the selection boxes is clicked on to show my the active class (it creates a down arrow under the box. Am I implementing the .active wrong to the :before and :after?
//For tabs to stay active
$('.marketing-service').click(function() {
$('.marketing-service.active').removeClass('active');
$(this).toggleClass('active');
//To get the service display box to show
var item_number = $(this).attr('id').replace('marketing-tab', '');
/* $('html, body').animate({
scrollTop: $("#service-display-box").offset().top
}, 1500);*/
$('#marketing'+item_number).show().siblings('.marketing-section-wrap').hide();
});
.marketing-section-wrap, .marketing-section-wrap-main {
width: 100%;
height: auto;
padding: 80px 0;
border-bottom: 1px solid #EBEBEB;
}
.marketing-section-wrap {
display: none;
}
#marketing-services {
width: 95%;
margin: 0 2.5%;
}
.marketing-service {
display: inline-block;
width: 22%;
margin: 0 1%;
height: 400px;
background: #F0F0F0;
position: relative;
cursor: pointer;
}
.marketing-service:first-child {
margin-left: 0;
}
.marketing-service:last-child {
margin-right: 0;
}
.marketing-service:hover {
background: rgba(0, 255, 170, .4);
z-index: 1;
}
/*-- Down Arrow for boxes --*/
.marketing-service:after.active, .marketing-service:before.active {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
}
.marketing-service:after.active {
border-width: 0px;
margin-left: 0px;
border-color: rgba(136, 183, 213, 0);
border-right-color: #88b7d5;
margin-top: -30px;
}
.marketing-service:before.active {
border-color: #FFF;
border-top-color: #88b7d5;
border-width: 36px;
margin-left: -36px;
margin-top: 0;
}
.marketing-service-wrap {
padding: 10%;
width: 80%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="marketing-services">
<div class="marketing-service" id="marketing-tab1">
<div class="marketing-service-wrap total-center">
<h2 class="marketing-service-title">1</h2>
</div>
</div>
<div class="marketing-service" id="marketing-tab2">
<div class="marketing-service-wrap total-center">
<h2 class="marketing-service-title">2</h2>
</div>
</div>
<div class="marketing-service" id="marketing-tab3">
<div class="marketing-service-wrap total-center">
<h2 class="marketing-service-title">3</h2>
</div>
</div>
<div class="marketing-service" id="marketing-tab4">
<div class="marketing-service-wrap total-center">
<h2 class="marketing-service-title">4</h2>
</div>
</div>
</div>
<div id="marketing1">
<div class="marketing-section-wrap">
1
</div>
</div>
<div id="marketing2">
<div class="marketing-section-wrap">
2
</div>
</div>

Quite simple just try $('#marketing'+item_number).children().show() because marketing-section-wrap is display:none;
first run this to hide all marketing-section-wrap
$('.marketing-section-wrap').hide();
then this will show only the one which corresponds to this click.
$('#marketing'+item_number).children().show();

How do I stop my toggle function at the first and last list items?

I have an unordered list of numbers that scroll.
The selected/middle list item needs to show in a yellow font color.
I have applied a class toggle function to my scroll buttons. I just need help figuring out a solution that will stop the class toggle function when I get to my first and last list item.
The solution I need must allow for the addition and removal of list items without the need to adjust the JavaScript if possible.
As usual, I know this is light work for you guys.
Any and all help is very much appreciated.
HTML
<div id="container">
<div class="box">
<ul id="ulscroller">
<li value="22"> </li>
<li id="1" class="active">1</li>
<li id="2" class="target">2</li>
<li id="3" class="active">3</li>
<li id="4" class="target">4</li>
<li id="5" class="active">5</li>
<li value="21" class="lastitem"> </li>
</ul>
</div>
<!--Button Controls-->
<div class="buttholder">
<a href="#">
<button class="scrollup">UP</button>
</a>
<a href="#">
<button class="buttok">OK</button>
</a>
<a href="#">
<button class="scroll">Down</button>
</a>
</div>
CSS
.box li.target {
color: #fff;
}
.box li.active {
color: #fada15;
}
#container {
position: relative;
width: 310px;
height: 268px;
background: #000;
}
button {
width: 72px;
height: 72px;
margin-top: 5px;
margin-bottom: 5px
}
#container div {
position: absolute;
}
ul li {
font-size: 42px;
color: #fff;
overflow: hidden;
font-family: arial;
text-align: center;
}
li {
list-style-type: none;
margin-bottom: 30px;
margin-top: 32px;
}
.box {
border: 0px #00f solid;
height: 247px;
width: 199px;
overflow: hidden;
}
#container div.buttholder {
position: relative;
float: right;
border: 0px #0f0 solid;
width: 72px;
height: 236px;
top: 11px;
right: 13px;
}
.lastitem {height: 22px;}
JavaScript
$(document).ready(function() {
$('.scroll').click(function() {
$('li').toggleClass('active', 'target');
$('.box').animate({
scrollTop: '+=80'
}, 100);
});
});
$(document).ready(function() {
$('.scrollup').click(function() {
$('li').toggleClass('active', 'target');
$('.box').animate({
scrollTop: '-=80'
}, 100);
});
});

When toggleClass() has two parameters, the second parameter is expected to be a boolean (and not just truthy/falsy).
Therefore, 'target' is ignored in this code:
$('li').toggleClass('active', 'target');
What you could do is set the first li as "active," then move the active class to the previous or next li, depending on which button is pressed.
If the next li is the last child, or the previous li is the first child, then don't move the active class.
Snippet
$(document).ready(function() {
$('.scroll').click(function() {
var current= $('li.active'),
next= current.next().not(':last-child');
if(next.length) {
next.addClass('active');
current.removeClass('active');
}
$('.box').animate({
scrollTop: '+=80'
}, 100);
});
$('.scrollup').click(function() {
var current= $('li.active'),
prev= current.prev().not(':first-child');
if(prev.length) {
prev.addClass('active');
current.removeClass('active');
}
$('.box').animate({
scrollTop: '-=80'
}, 100);
});
});
.box li.target {
color: #fff;
}
.box li.active {
color: #fada15;
}
#container {
position: relative;
width: 310px;
height: 268px;
background: #000;
}
button {
width: 72px;
height: 72px;
margin-top: 5px;
margin-bottom: 5px
}
#container div {
position: absolute;
}
ul li {
font-size: 42px;
color: #fff;
overflow: hidden;
font-family: arial;
text-align: center;
}
li {
list-style-type: none;
margin-bottom: 30px;
margin-top: 32px;
}
.box {
border: 0px #00f solid;
height: 247px;
width: 199px;
overflow: hidden;
}
#container div.buttholder {
position: relative;
float: right;
border: 0px #0f0 solid;
width: 72px;
height: 236px;
top: 11px;
right: 13px;
}
.lastitem {
height: 22px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="box">
<ul id="ulscroller">
<li value="22"> </li>
<li id="1" class="active">1</li>
<li id="2">2</li>
<li id="3">3</li>
<li id="4">4</li>
<li id="5">5</li>
<li value="21" class="lastitem"> </li>
</ul>
</div>
<!--Button Controls-->
<div class="buttholder">
<a href="#">
<button class="scrollup">UP</button>
</a>
<a href="#">
<button class="buttok">OK</button>
</a>
<a href="#">
<button class="scroll">Down</button>
</a>
</div>

There are two solutions:
Solution #1
You can use the .first and .last functions of jQuery:
$('li').not($('li').first()).not($('li').last())
I am choosing all "li" elements,and then remove the first one and the last one.
https://api.jquery.com/last/
Solution #2:
You can also use slice function, like in arrays:
$('li').slice(1,-1)
This will remove the first and last item in the 'li' array of elements.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

Answer of Rick Hitchcock is perfect, however I would just like to add one point.
For every jQuery function you call, you don't need to encapsulate it in a $(document).ready(function() or jQuery(document).ready(function($). A page manipulation begins only when the page has been loaded. So you don't need to check it twice whether the page has been loaded or not.

How to put RGBA background above the image or div area?

I need to use RGBA background above this grid. I used some of the jQuery to interect with div area. But I don't know how to put this background-color in image while I'm using jQuery. Is there a way I can do this using jQuery ? or any other methods ?
// Grid function
$(function() {
$(".single_grid").hover(function() {
var panelId = $(this).attr("data-panelId");
$("#" + panelId).css({}).toggle();
})
$(".single_grid").mouseover(function() {
var imageId = $(this).attr("data-imageId");
$("#" + imageId).css({
opacity: "0.3"
})
})
$(".single_grid").mouseleave(function() {
var imageId = $(this).attr("data-imageId");
$("#" + imageId).css({
opacity: "1"
})
})
})
.grid_panel {
width: 100%;
height: auto;
}
#sub_grid_panel {
height: 760px;
margin: 0 auto;
width: 1125px;
}
#sub_grid_panel li {
float: left;
}
.single_grid {
width: 280px;
height: 200px;
overflow: hidden;
position: relative;
top: 0px;
left: 0px;
}
.image_hover_preview h3 {
text-align: center;
display: block;
margin-bottom: 5px;
font-weight: normal;
font-family: 'RalewayLight';
color: #FF8500;
}
.image_hover_preview {
position: absolute;
top: 65px;
width: 100%;
display: none;
}
div.image_hover_preview a i {
color: #333;
font-size: 20px;
padding: 5px 10px;
background: #FF8500;
color: #FFFFFF;
}
div.image_hover_preview {
text-align: center;
}
<li class="single_grid" data-panelId="panel1" data-imageId="image1">
<div class="grid_column_bar">
<img src="img/grid/grid1.jpg" alt="" id="image1">
<div class="image_hover_preview" id="panel1">
<h3>Lorem ipsum dolor</h3>
<i class="fa fa-search-plus"></i>
<i class="fa fa-link"></i>
</div>
</div>
</li>
<li class="single_grid" data-panelId="panel2" data-imageId="image2">
<div class="grid_column_bar">
<img src="img/grid/grid2.jpg" alt="" id="image2">
<div class="image_hover_preview" id="panel2">
<h3>Lorem ipsum dolor</h3>
<i class="fa fa-search-plus"></i>
<i class="fa fa-link"></i>
</div>
</div>
</li>

Personally, I'm a fan of this little box-shadow: inset trick.
Just add a background like you normally would and on top of that,
add a box-shadow property like so :
.element {
background-image: url(myBgImage.jpg);
box-shadow: inset 0px 0px 0px 1000px rgba(51,51,51,0.3);
}
Note: the spread-radius of 1000px is arbitrarily chosen. Just make sure it exceeds the width/height of your element.
Box Shadow Generator

I'm not entirely sure what you wanted since your code snippet didn't work at all.
This changes the background color:
$(element).css({
backgroundColor:"rgba(50,50,50,.5)"
});
To put the color on top of the background image, you can use gradients:
$(element).css({
backgroundImage:"linear-gradient(rgba(50,50,50,.5),rgba(50,50,50,.5)),url(background.jpg)"
});