Develop Reference

UL - with arrows between the LI - remove unnecessary arrow

#I edit the question:#
I have attached the html:
<div class="mainDiv">
<ul id="myUL">
<li id="li-1" class="myLI"></li>
<li id="li-2" class="myLI"></li>
<li id="li-2.1" class="myLI"></li>
<li id="li-2.2" class="myLI"></li>
</ul>
</div>
My UL is formatted dynamically, based on what comes back from the DB.
#-------------------------#
I have a UL, in which all the LIs within it are linked by an arrow.
In addition, I have LIs that consist of several LIs that are their subcategory, and when clicked on, the LIs subcategory - will go from dispaly: none mode, to display: inline-block mode.
My problem is when I have an LI that consists of several LIs, but is located at the end of the UL.
According to my CSS, after this LI, an arrow will appear, because basically, there is another LI in UL, it is just doesn't appear...
I have attached a picture that illustrates this.
As long as the LI that contains some LI is in the middle of the UL- everything is fine (like example A).
Once it's at the end of the UL (as in example B), I have an "unnecessary" arrow, which I would like not to show now, but only when my all LI are in display: inline-block.
I also attached my CSS.
ul#myUL {
list-style: none;
margin:auto;
}
li.myLI {
display:inline-block;
xpadding: 10px 25px;
xborder: 1px solid black;
margin: 0 25px;
position: relative;
}
li.myLI:not(:last-child):after {
content: '';
height: 1px;
background: black;
width: 50px;
position: absolute;
right: -50px;
top: 50%;
}
li.myLI:not(:last-child):before {
content: '';
position: absolute;
width: 0;
height: 0;
top: 50%;
border-style: solid;
border-width: 7px 0 7px 20px;
border-color: transparent transparent transparent black;
right: -50px;
transform: translateY(-50%);
}
div.mainDiv {
display:flex;
width:60%;
margin: auto;
border: 3px solid #73AD21;
}
I will really appreciate your help to resolve this.
Thanks!

Move content left and right on click

I am trying to move content left and right using on click event and need to stop by margins on the left or right. list-items generating dynamically. Here is the code I tried so far but no worth. By my code it is moving the container left and right. But I need to move list-items left and right.
How can I do this.?
function moveList(px) {
$('.list').animate({
'marginLeft': px
});
}
.list {
white-space: nowrap;
overflow: auto;
height: 85px;
padding: 10px 0;
margin: 25px 0;
position: relative;
}
.list-item {
display: inline-block;
min-width: 20%;
max-width: 150px;
padding: 10px 0;
border-radius: 3px;
background: #eee;
border: 1px solid #ddd;
margin: 0 5px;
cursor: pointer;
text-align: center;
}
#right-arrow {
width: 40px;
height: 40px;
display: block;
position: absolute;
right: 0;
top: 35px;
z-index: 999;
border-radius: 50%;
background: url(img/right-arrow.png) no-repeat #000;
}
#left-arrow {
width: 40px;
height: 40px;
display: block;
position: absolute;
left: 0;
top: 35px;
z-index: 999;
border-radius: 50%;
background: url(img/left-arrow.png) no-repeat #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="right-arrow" onclick="moveList('-=50px')"></div>
<div id="left-arrow" onclick="moveList('+=50px')"></div>
<div class="list">
<div class="list-item">1</div>
<div class="list-item">2</div>
<div class="list-item">3</div>
<div class="list-item">4</div>
<div class="list-item">5</div>
<div class="list-item">6</div>
<div class="list-item">7</div>
<div class="list-item">8</div>
<div class="list-item">9</div>
<div class="list-item">10</div>
</div>

Try script like this:
function moveList(px) {
$(".list-item:first-child").animate({
'marginLeft': px
});
}

It will be easier for you if you create a element that wraps the .list-items with:
position: absolute;
top: 0;
left:0;
Then, instead of modify the margin, you should modify the left value.
If you want to use semmantic content for your web it's better to use another HTML structure, not only div. For example:
<nav> <!-- As this is containing page navigation elements-->
<ol> <!-- As this is an ordered list of elements-->
<li> <!-- Each list element-->
First element
</li>
<li>
Second element
</li>
</ol>
</nav>

Simply translate them.
Define this (given that clicker is the selector for your click event).
var xValue = -5;
$("#clicker").on('click', function(e) {
e.preventDefault();
$(".list-item").css("transform","translateX("+xValue+")");
xValue -= 5;
});
Translate will not mess with your markup, and only move the objects it's working on to the left (in this case).
By keeping xValue you can keep moving them to the left by repeatedly clicking clicker.

Javascript Content Slider

Before I put the html and css, I am having 2 problems, please keep in my that I am almost a complete amateur at html and css, and have no idea what the javascript means.
Problems:
My 1st problem is that the content sider, doesnt slide far enough to the next content, but instead when clicking the button only brings the content over halfway (you will see what I mean when you paste the html and css into a page).
My second problem is that the buttons are meant to be horizontal with eachother, and I also want to add more in the future
so if someone could tell me how to do that in elaboration with the javascript problem that would be great!
here is the working demo jsfiddle please check-out
Working code
Thank-you in Advance..!!
// just querying the DOM...like a boss!
var links = document.querySelectorAll(".itemLinks");
var wrapper = document.querySelector("#wrapper");
// the activeLink provides a pointer to the currently displayed item
var activeLink = 0;
// setup the event listeners
for (var i = 0; i < links.length; i++) {
var link = links[i];
link.addEventListener('click', setClickedItem, false);
// identify the item for the activeLink
link.itemID = i;
}
// set first item as active
links[activeLink].classList.add("active");
function setClickedItem(e) {
removeActiveLinks();
var clickedLink = e.target;
activeLink = clickedLink.itemID;
changePosition(clickedLink);
}
function removeActiveLinks() {
for (var i = 0; i < links.length; i++) {
links[i].classList.remove("active");
}
}
// Handle changing the slider position as well as ensure
// the correct link is highlighted as being active
function changePosition(link) {
link.classList.add("active");
var position = link.getAttribute("data-pos");
wrapper.style.left = position;
}
#wrapper {
width: 5000px;
position: relative;
left: 0px;
transition: left .5s ease-in-out;
}
.content {
float: left;
width: 1250px;
height: 600px;
white-space: normal;
background-repeat: no-repeat;
}
#itemOne {
background-color: #ADFF2F;
background-image: url("http://www.kirupa.com/images/blueSquare.png");
}
#itemTwo {
background-color: #FF7F50;
background-image: url("http://www.kirupa.com/images/yellowSquare.png");
}
#itemThree {
background-color: #1E90FF;
background-image: url("http://www.kirupa.com/images/pinkSquare.png");
}
#itemFour {
background-color: #DC143C;
background-image: url("http://www.kirupa.com/images/graySquare.png");
}
#contentContainer {
width: 98%;
height: 600px;
border: 5px black solid;
overflow: hidden;
margin-left: 1%;
margin-right: 1%;
}
#navLinks {
text-align: center;
width: 22.5%;
}
#navLinks ul {
margin: 0px;
padding: 0px;
display: inline-block;
margin-top: 6px;
}
#navLinks ul li {
float: left;
text-align: center;
margin: 10px;
list-style: none;
cursor: pointer;
background-color: #CCCCCC;
padding: 100px;
border-radius: 10%;
border: white 5px solid;
}
#navLinks ul li:hover {
background-color: #FFFF00;
}
#navLinks ul li.active {
background-color: #333333;
color: #FFFFFF;
outline-width: 7px;
}
#navLinks ul li.active:hover {
background-color: #484848;
color: #FFFFFF;
}
#navLinks ul li.active {
background-color: #333333;
color: #FFFFFF;
outline-width: 7px;
}
#navLinks ul li.active:hover {
background-color: #484848;
color: #FFFFFF;
}
<body bgcolor='black'>
<div id="contentContainer">
<div id="wrapper">
<div id="itemOne" class="content">
</div>
<div id="itemTwo" class="content">
</div>
<div id="itemThree" class="content">
</div>
<div id="itemFour" class="content">
</div>
</div>
</div>
<div id="navLinks">
<ul>
<li class="itemLinks" data-pos="0px"></li>
<li class="itemLinks" data-pos="-550px"></li>
<li class="itemLinks" data-pos="-1100px"></li>
<li class="itemLinks" data-pos="-1650px"></li>
</ul>
</div>
</body>

The main areas to update;
1) your "#contentContainer". This is basically the window of your slider. The height and width need to be updated to match the slider items.
2) the "data-pos" values of your list items. This should be the same as their width * their index starting at 0 and negative.
3) the list container is too narrow. make it as wide as your #contentContainer.
CSS Changes:
#contentContainer {
width: 1250px;
height: 600px;
}
#navLinks {
width:1250px;
}
#navLinks ul li {
width:80px;
}
HTML change:
<li class="itemLinks" data-pos="0px"></li>
<li class="itemLinks" data-pos="-1250px"></li>
<li class="itemLinks" data-pos="-2500px"></li>
<li class="itemLinks" data-pos="-3750px"></li>
https://jsfiddle.net/partypete25/9gpyL6o1/7/embedded/result/

I assume that the CSS posted in the bottom of your question is the content of the main.css file. As matt points out in the comments, experiment with changing the sizes of the divs. Particularly the #wrapper, which is specified by it's ID using tha hash tag (#):
#wrapper {
width: 5000px;
position: relative;
left: 0px;
transition: left .5s ease-in-out;
}
And referenced in the javascript here:
var wrapper = document.querySelector("#wrapper");
where it is assigned to the variable wrapper. It is 5000 pixels wide. The typical desktop web screen is around 1200 - 1700 pixels wide, I believe, for reference. This is about the size you want the .content, referenced by class using a . and what holds each displayed "slide" to be - keeping in mind that a responsive site that displays properly on phones and other mobile devices would need to have variations on the size using #media queries.
So I would add visible css borders where applicable (for development and to be removed later) and change around the numerical variables (data-pos, #wrapper and .container sizes) to find the optimal solution. As mentioned above, jsfiddle is a great resource, whether or not you're needing to share publicly.
For the navlinks, which should be displayed in a row, try the following CSS on the div that holds the list (<ul>):
#navLinks {
text-align: center;
width: 90.5%;
border:1px solid white;
}
The border:1px solid white; will help you to see where the div is. Then experiment with a smaller padding size in #navLinks ul li to be sure you have room on the page to display horizontally.
I believe the last step is to adjust the <li class="itemLinks" data-pos="0px"></li>, where the data-pos attributes are just holding information for the javascript to use in the changePosition function, which is the last few lines of the javascript.
eloquentjavascript.net is a wonderful, free source to learn all of this.

<!DOCTYPE html>
<html>
<head>
<title>Dinosaurs 4 Kids!</title>
<style>
#wrapper {
width: 98%;
position: relative;
left: 0px;
transition: left .5s ease-in-out;
}
.content {
float: left;
width: 100%;
height: 600px;
white-space: normal;
background-repeat: no-repeat;
background-position: center;
}
#itemOne {
background-color: #ADFF2F;
background-image: url("http://www.kirupa.com/images/blueSquare.png");
}
#itemTwo {
background-color: #FF7F50;
background-image: url("http://www.kirupa.com/images/yellowSquare.png");
}
#itemThree {
background-color: #1E90FF;
background-image: url("http://www.kirupa.com/images/pinkSquare.png");
}
#itemFour {
background-color: #DC143C;
background-image: url("http://www.kirupa.com/images/graySquare.png");
}
#contentContainer {
width: 98%;
height: 600px;
border: 5px black solid;
overflow: hidden;
margin-left: 1%;
margin-right: 1%;
}
#navLinks {
text-align: center;
}
#navLinks ul {
margin: 0px;
padding: 0px;
display: inline-block;
margin-top: 6px;
}
#navLinks ul li {
float: left;
text-align: center;
margin: 10px;
list-style: none;
cursor: pointer;
background-color: #CCCCCC;
padding: 20px;
border-radius: 10%;
border: white 5px solid;
}
#navLinks ul li:hover {
background-color: #FFFF00;
}
#navLinks ul li.active {
background-color: #333333;
color: #FFFFFF;
outline-width: 7px;
}
#navLinks ul li.active:hover {
background-color: #484848;
color: #FFFFFF;
}
#navLinks ul li.active {
background-color: #333333;
color: #FFFFFF;
outline-width: 7px;
}
#navLinks ul li.active:hover {
background-color: #484848;
color: #FFFFFF;
}
</style>
</head>
<body bgcolor='black'>
<div id="contentContainer">
<div id="wrapper">
<div id="itemOne" class="content">
</div>
<div id="itemTwo" class="content">
</div>
<div id="itemThree" class="content">
</div>
<div id="itemFour" class="content">
</div>
</div>
</div>
<div id="navLinks">
<ul>
<li class="itemLinks" data-pos="0px"></li>
<li class="itemLinks" data-pos="-550px"></li>
<li class="itemLinks" data-pos="-1100px"></li>
<li class="itemLinks" data-pos="-1650px"></li>
</ul>
</div>
<script>
// just querying the DOM...like a boss!
var links = document.querySelectorAll(".itemLinks");
var wrapper = document.querySelector("#wrapper");
// the activeLink provides a pointer to the currently displayed item
var activeLink = 0;
// setup the event listeners
for (var i = 0; i < links.length; i++) {
var link = links[i];
link.addEventListener('click', setClickedItem, false);
// identify the item for the activeLink
link.itemID = i;
}
// set first item as active
links[activeLink].classList.add("active");
function setClickedItem(e) {
removeActiveLinks();
var clickedLink = e.target;
activeLink = clickedLink.itemID;
changePosition(clickedLink);
}
function removeActiveLinks() {
for (var i = 0; i < links.length; i++) {
links[i].classList.remove("active");
}
}
// Handle changing the slider position as well as ensure
// the correct link is highlighted as being active
function changePosition(link) {
link.classList.add("active");
var position = link.getAttribute("data-pos");
wrapper.style.left = position;
}
</script>
</body>
</html>

How to split a long list and display in columns

I am using ddlevelsmenu.js from dynamic drive to display menu items on mouseover. everything works fine. just i have one very long list which appears little bit odd. Can i split the list items into different columns?
Below are my HTML codes followed by CSS codes:
<ul>
<li>Indian States</li>
</ul>
The above codes will trigger the below list items on mouseover
<ul id="stts" class="submenustyle">
<li>Andhra Pradesh</li>
<li>Arunachal Pradesh</li>
<li>Assam</li>
<li>Bihar</li>
<li>Chattisgarh</li>
<li>Goa</li>
<li>Gujarat</li>
<li>Haryana</li>
<li>Himachal pradesh</li>
<li>Jammu Kashmir</li>
<li>Jharkhand</li>
<li>Karnataka</li>
<li>Kerala</li>
<li>Madhya Pradesh</li>
<li>Maharashtra</li>
<li>Manipur</li>
<li>Meghalaya</li>
<li>Mizoram</li>
<li>Nagaland</li>
<li>Odisha</li>
<li>Punjab</li>
<li>Rajasthan</li>
<li>Srinagar</li>
<li>Sikkim</li>
<li>Tamil Nadu</li>
<li>Telangana</li>
<li>Uttar Pradesh</li>
<li>Uttaranchal</li>
<li>West Bengal</li>
</ul>
Below are the css codes
.ddsubmenustyle, .ddsubmenustyle div{ /*topmost and sub DIVs, respectively*/
font: normal 1.2vw;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: white;
border: 1px solid black;
border-bottom-width: 0;
visibility: hidden;
z-index: 100;
}
.ddsubmenustyle ul{
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
border: 0px none;
}
.ddsubmenustyle li a{
display: block;
width: 180px; /*width of menu (not including side paddings)*/
color: white;
background-color:#999999;
text-decoration: none;
padding: 4px 5px;
border-bottom: 1px solid black;
}
.ddsubmenustyle li a:hover{
background-color:#333333;
}
* html .ddsubmenustyle li{ /*IE6 CSS hack*/
display: inline-block;
width: 180px; /*width of menu (include side paddings of LI A*/
}
/* ######### Neutral CSS ######### */
.downarrowpointer{ /*CSS for "down" arrow image added to top menu items*/
padding-left: 4px;
border: 0;
}
.rightarrowpointer{ /*CSS for "right" arrow image added to drop down menu items*/
position: absolute;
padding-top: 3px;
left: 100px;
border: 0;
}
.ddiframeshim{
position: absolute;
z-index: 500;
background: transparent;
border-width: 0;
width: 0;
height: 0;
display: block;
}

have you tried setting widths on the li?
ul{
width:800px;
}
li{
width: 40%;
display: inline-block;
}

this was already answered here: How to display an unordered list in two columns? by Gabriel. Following css should resolve your issue:
ul {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
I have created jsfiddle to test it and it works nicely. Have a look http://jsfiddle.net/tralala/jg0zycfw/1/.

How to change style for before/after in Angular?

I'm trying implement breadcrumbs with triangles using before/after in the CSS, as shown in this tutorial:
http://css-tricks.com/triangle-breadcrumbs/
Relevant snippets:
<ul class="breadcrumb">
<li>Home</li>
</ul>
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 10px 0 10px 65px;
background: hsla(34,85%,35%,1);
position: relative;
display: block;
float: left;
}
.breadcrumb li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid hsla(34,85%,35%,1);
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
However, I'm using it as a directed flow, something like:
Main_Category >> Sub_Category >> Details
This flow starts with Main_Category highlighted and other 2 parts dark, and there's a underneath that you can select from. On select, Sub_Category becomes highlighted and another pops up.
My question is how to change the before/after border colors if they're pseudo-elements? So from the tutorial, I think can do this on the main part:
<li>Home</li>
But there's no where for me to set ng-style for before/after, and the triangle colors end up unchanged.

If I understand your question correctly, you want to know how to use an angular directive to dynamically style the before/after pseudo-tags.
Instead of using ng-style, use ng-class to attach a class that will determine which before/after pseudo class to use.
<ul class="breadcrumb">
<li>Home</li>
</ul>
And in CSS:
.breadcrumb li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid hsla(34,85%,35%,1);
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
.breadcrumb li a.color-0:after {
background: black;
}
.breadcrumb li a.color-1:after {
background: blue;
}

I would avoid using ng-style in this instance you may find it easier to use ng-class and apply a different class depending, this will allow you to keep all your CSS in a single place rather than overriding within the HTML.
Simply change your code to:
<li>Home</li>
Where subCategory should be a boolean, on click you set subCategory and then it will add breadcrumb-color as a class value, you should end up with something like this:
<li>Home</li>
Some sample css, now you can set the before and after as you please:
.breadcrumb-color li a {
background: red;
}
.breadcrumb-color li a:after {
background: red;
}

ng-class should work for what you are trying to do.
<li>Home</li>
rough code example