CSS not being applied to all appended list elements - javascript

Link to code: http://codepen.io/danessh/debug/uCBds
The desired effect is to have any added item to be appended to the menu with rounded corners. That part seems to work, but the CSS does not seem to work as I expected.
Issue:
The margin for any item added after the first overlaps instead of appearing like the last added item. I can see this because there is opacity set.
Question:
What is the possible cause of the first item being styled by CSS and all other items added in the same manner not displaying all the styling declarations?
Note: Items are being appended to $('#menu ul'); object. When I appended an item using $('li:last');, the first item displayed overlaps other menu items. margin: -2px; is set for the existing menu items so that no gaps appear.

The 2px spaces are actually coming from your markup (there are a bunch of articles on this). If you remove the whitespace between your <li> elements, the spaces will go away. This is a side effect of making your <li> elements inline.
The dynamically-created elements don't have this problem, so you're shifting them over 2px too far. To fix it, remove the negative margin completely and either remove the whitespace or float them to the left.

EDIT: I got your problem now, the problem is , when you are adding new li elements from code, there is no whitespace generated in the markup, as is there in the already added elements.
e.g from your markup:
<li><a id="first" href="#">Who</a></li>
<li>What</li>
<li><a id="last"href="#">When</a></li>
after adding your element on click
<li><a id="first" href="#">Who</a></li>
<li>What</li>
<li>When</li><li>Who</li><li><a id="last" href="#">What</a></li>
notice there are no whitespaces in the generatd markup
what you can try
menu.append('<li><a id="last" href="'+ itemUrl.val() + '">'+ item.val().toUpperCase() + '</a></li> ');
notice the extra two spaces after </li>
whitespace in the markup matters when you are dealing with inline elements.

try this css
#menu li {
display: inline;
float:left;
}
#menu a {
background-color: purple;
padding: 5px 30px;
color: white;
text-decoration: none;
font: 18px sans-serif;
opacity: .9;
text-transform: uppercase;
}

This is a known problem with DOM elements when using display: inline or inline-block.
What you need to be doing is float for the li elements.
Here's the updated codepen.
I've also made some modifications to your code like removing ids first & last and instead using css selectors: first-child and last-child.
JavaScript:
function addMenuItem () {
var menu = $('#menu ul');
var item = $('#itemName');
var itemUrl = $('#itemUrl');
if (item.val() && itemUrl.val()){
menu.append('<li>'+ item.val().toUpperCase() + '</li>');
item.val('');
itemUrl.val('');
}
}
CSS:
#menu ul {
list-style: none;
}
#menu li {
display: inline-block;
float: left;
}
#menu a {
background-color: purple;
padding: 5px 30px;
margin: 0px;
color: white;
text-decoration: none;
font: 18px sans-serif;
opacity: .9;
text-transform: uppercase;
}
li:first-child a {
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
li:last-child a {
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
#menu a:hover {
background-color: orange;
}
button {
background-color: pink;
font-size: 14px;
color: white;
font-weight: bold;
border-radius: 3px;
margin-top: 5px;
padding: 15px 32px;
}
button:hover {
background-color: lightblue;
}
input {
background-color: whitesmoke;
margin-top: 5px;
padding: 10px 10px;
display: block;
font-weight: bold;
}
input, button {
border: none;
}
#workSpace {
width: 95%;
padding: 20px;
background-color: white;
}
body{
background-color: whitesmoke;
}
form {
clear: both;
margin-top: 50px;
}
HTML markup:
<div id="workSpace">
<div id="menu">
<ul>
<li>Who</li>
<li>What</li>
<li>When</li>
</ul>
</div>
<form>
<input id="itemName" type="text" placeholder="Menu Item" />
<input id="itemUrl" type="url" placeholder="Item URL" />
<button type="button" onclick="addMenuItem()">Add Menu Item</button>
</form>
</div>

try the css
#menu ul {
list-style: none;
margin: 0;
width: 100%;
display: block;
float: left;
margin-bottom: 20px;
}
#menu li {
float: left;
}

Related

HTML and JS Conflicting Elements (MouseOver)

I'm attempting to have an element in my layout to change text and background colors onMouseOver, and then revert to their original state when rolled off. The problem is that JS doesn't seem to recognize the nature of my CSS.
The element (#sidebar) has these pieces of CSS code (code of the sidebar itself not relevant):
#sidebar ul {
list-style-type: none;
}
#sidebar li {
width:100px;
border-radius: 25px;
text-align: center;
background-color: #AFCEEA;
border: 5px solid #195A94;
font-weight: bold;
line-height: 50px;
margin-top: 10px;
margin-left: 5px;
}
And it looks like this, prior to OnMouseOver:
This is the JS I'm using to attempt the onMouseOver:
<script type="text/javascript">
function changeColor(myColor) {
var sidebar = document.getElementById('sidebar li');
sidebar.style.fontcolor = "#6588C7";
sidebar.style.backgroundColor = "#6588C7";
}
</script>
With this implementation in the div:
<div id ="sidebar li">
<ul><li onmouseover="changeColor('new color')"><p class="class1">writing<p></li></ul>
</div>
But it does this to my sidebar instead:
How can I get the color to stay in the little boxes?
You can really simplify your code by using :hover instead of onmouseover.
I am using a flexbox for li to make center alignment easy. You do not longer need to suppress the list-style because the list items are no longer displayed as a list-item.
You may no longer need class1 for the paragraphs. I just kept them in.
function changeText(myText) {
//find variable on page called 'myContent' and give it var name display
var display = document.getElementById('content');
display.innerHTML = "";
display.innerHTML = "New content.";
}
#sidebar li {
width: 100px;
height: 100px;
border-radius: 25px;
background-color: #AFCEEA;
border: 5px solid #195A94;
font-weight: bold;
display: flex;
align-items: center; /* Vertical alignment */
justify-content: center; /* Horizontal alignment */
}
#sidebar li:hover {
background-color: red;
}
/* Apply top margin to all list elements except for the first one */
#sidebar li:not(:first-child) {
margin-top: 10px;
}
#content {
border-radius: 25px;
width: 750px;
height: 500px;
margin-top: 50px;
margin-left: 300px;
background-color: azure;
padding: 50px;
}
<div id="sidebar">
<ul>
<li>
<p class="class1">writing<p>
</li>
<li>
<p class="class1">games/art<p>
</li>
<li>
<p class="class1">music<p>
</li>
</ul>
</div>
<div id="content" onclick="changeText()"> <p>Content here.</p> </div>
getElementById accepts id argument, but you are passing it a selector instead. You may want to use document.querySelector instead. Query selector documentation:
Query Selector
Your div id is not correct. It should be like this:
<div id ="sidebar">
<ul><li onmouseover="changeText('new text')" onmouseout="resetText()"><p class="class1">writing<p></li>
</div>
You don't need javascript for something as trivial as this. You could use :hover CSS pseudo-class. Read more about it here
#sidebar ul {
list-style-type: none;
}
#sidebar li {
width:100px;
border-radius: 25px;
text-align: center;
background-color: #AFCEEA;
border: 5px solid #195A94;
font-weight: bold;
line-height: 50px;
margin-top: 10px;
margin-left: 5px;
}
#sidebar li:hover {
color: tomato;
background: #333
}
<div id ="sidebar">
<ul>
<li>
<p class="class1">writing<p>
</li>
<li>
<p class="class1">writing 2<p>
</li>
</ul>
</div>
div id name is incorrect
var sidebar = document.getElementById('sidebar-li');
<script type="text/javascript">
function changeColor(myColor) {
var sidebar = document.getElementById('sidebar-li');
sidebar.style.fontcolor = "#6588C7";
sidebar.style.backgroundColor = "#6588C7";
}
</script>
and
<div id ="sidebar-li">
<ul>
<li onmouseover="changeColor('#ffffff')">
<p class="class1">writing<p>
</li>
</ul>
</div>
Based on your code you could do :
#sidebar ul {
list-style-type: none;
}
#sidebar li {
width: 100px;
border-radius: 25px;
text-align: center;
background-color: #AFCEEA;
border: 5px solid #195A94;
font-weight: bold;
line-height: 50px;
margin-top: 10px;
margin-left: 5px;
}
<div id="sidebar">
<ul>
<li>
<p class="class1">writing<p>
</li>
</ul>
</div>
<script type="text/javascript">
function changeColor(e) {
var sidebar = e.currentTarget;
sidebar.style.color = "#fff";
sidebar.style.backgroundColor = "#6588C7";
}
var li_elements = document.getElementById('sidebar').getElementsByTagName('li');
for (var i = 0; i < li_elements.length; i++) {
li_elements[i].addEventListener('mouseover', changeColor);
}
</script>
But a simpler solution is to remove the JavaScript and to just do it with CSS :
#sidebar ul {
list-style-type: none;
}
#sidebar li {
width: 100px;
border-radius: 25px;
text-align: center;
background-color: #AFCEEA;
border: 5px solid #195A94;
font-weight: bold;
line-height: 50px;
margin-top: 10px;
margin-left: 5px;
}
#sidebar li:hover {
color: #fff;
background-color: #6588C7;
}
<div id="sidebar">
<ul>
<li>
<p class="class1">writing<p>
</li>
</ul>
</div>

list of items added in cart shows when click on bag icon

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li style="float:right"><a class="active" href="#about" onClick="testMy()">CART</a></li>
<div>Empty cart add something</div>
</ul>
i'm developing a navigation menu for shopping cart where on right corner side i have created a Link clickable named "CART" so i'm trying to make it like,. when user click on "CART" one div appears with a list of items which he have added into CART and clicking again it will close.
looking for javascript code for that div so div will appear exactly under cart menu link with arrow pointed to cart as showed in image i have attached.
Item list in cart with arrow
My suggestion would be to create a new, absolute positioned element which is set to the right hand side of the screen (just under the nav) using jQuery you can fade in the element.
HTML
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li class="cartButton">CART</li>
</ul>
<div class="cart">
<div>Empty cart add something</div>
</div>
CSS
ul {
position: relative;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
li.cartButton {
position: absolute;
height: 100%;
padding: 5px 10px;
color: #fff;
right: 0px;
padding-top: 10px;
}
li.cartButton.active {
background-color: #4CAF50;
}
.active {
a {
background-color: #4CAF50;
}
}
.cart {
position: absolute;
display: none;
top: 50px;
right: 0;
width: 400px;
height: 300px;
background-color: #4CAF50;
}
jQuery
$('.cartButton').click(function() {
$('.cartButton').toggleClass('active');
$('.cart').fadeIn();
})
See jsFiddle
Note
You will need to add a condition to fade out the cart element using jquery using the fadeToggle function instead of fadeIn.
Alternatively, It may suite you better to just add a css class to the cart element so you can assign css transitions.
See jsFiddle (Updated with cart arrow)
The cart arrow was created with a square div rotated 45 degrees and place underneath the navigation bar by adding a z-index to the nav. By adding the .cart class, it will only show when the cart button it clicked.
I hope this helps.

How can I override an anchor element's font color when applying an active class to its parent li element?

I have a navigation bar with three buttons which I'm trying to highlight when they're active by applying "active" class to the li elements using jQuery - the border and font color are supposed to change. So far, only the border color changes while the text remains the same.
Also, I'd like to override or prevent the :hover pseudo class when the link is active.
Here's the codepen which will hopefully make this clearer.
Could you please advise how to override the a element's font color?
Thanks!
You have HTML looking like
<ul class="topnav">
<li class="topnavli">
Link 3
</li>
.......
Then styles for the anchors
.topnav a { color: #fff; }
then you add the active class to the LI elements, but the styles are only set as
.active { color: #FFADA0; }
That's just styling the LI element, not the anchors inside, and the specification states that by default an anchor tag does not inherit attributes like color from the parent element if a href attribute is present, so those styles must be set directly on the anchor with something like
li.active a { color: #FFADA0; }
As the border is set on the LI element, that should be changed with a specific style for that element, so you end up with
li.active {
border:3px solid #FFADA0;
}
li.active a {
color: #FFADA0;
}
Codepen
Add
.topnav .active a {
color: #FFADA0 ;
}
$('.topnav li').click(function() {
$(".topnav li.active").removeClass("active");
$(this).addClass('active');
});
.header h1 {
font-family: 'Montserrat', sans-serif;
font-size: 44px;
letter-spacing: 3px;
margin: 0;
padding: 15px 0 15px 30px;
display: inline-block;
color: #fff;
}
.topnav {
position: fixed;
top: 0;
width: 100%;
list-style: none;
font-family: 'Montserrat', sans-serif;
background-color: #000;
z-index: 1;
}
.topnav li {
display: block;
float: right;
margin: 20px 8px 0 0;
}
.topnavli {
border: 3px solid #fff;
}
.topnav li:first-child {
margin-right: 50px;
}
.topnav li:hover {
border: 3px solid #6fb7b7;
transition: 0.3s;
}
.topnav .active a {
color: #FFADA0 ;
}
.topnav a {
display: block;
color: #fff ;
font-weight: 600;
padding: 10px 0 ;
font-family: 'Raleway', sans-serif;
text-align: center;
text-decoration: none;
width: 120px;
}
.topnav a:hover {
color: #6fb7b7;
text-decoration:none;
transition: 0.3s;
}
.active {
color: #FFADA0 ;
border:3px solid #FFADA0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="header">
<ul class="topnav">
<li class="topnavli">
Link 3
</li>
<li class="topnavli">Link 2</li>
<li class="topnavli">Link 1</li>
<h1>website</h1>
</ul>
</div>

Show submenu with CSS without using an unordered list

I got a question regarding showing a submenu with CSS.
I have the following HTML code:
<div class="navigation">
<a class="active" href="/">Home</a>
Test1
Test2
<div class="submenu-wrapper">
Test3
<div class="submenu">
Submenu1
Submenu2
</div>
</div>
Test4
</div>
Due to implementation restriction I can not change my structure to, for example a <ul> format.
I did some research on the web to find out how I could show my submenu by using CSS. I tried the following thing:
.navigation .submenu-wrapper a:hover > .submenu{display:block;}
Can anyone tell my why this does not work and how could I solve this, with respect to my current implementation.
Full code here: JSFIDDLE
PS. Any answers like use bootstrap or transform your menu to a <ul> format is not what I am looking ;)
Your code:
.navigation .submenu-wrapper a:hover > .submenu{display:block;}
Your .submenu is not inside the a. You could use the sibling selector:
.navigation .submenu-wrapper a:hover + .submenu{display:block;}
But to make the submenu usable, make sure your .submenu-wrapper has the same height as its content (by giving it a fixed height or an :after{clear:both;} and do this:
.navigation .submenu-wrapper:hover .submenu{display:block;}
Since your .submenu is absolutely positioned, you also need to position its parent, or else .submenu will fall off the screen (because you gave it top:100% relative to body). Like this:
.navigation .submenu-wrapper {position: relative;}
Updated fiddle: https://jsfiddle.net/xrtjngdr/4/
You can achieve this by changing
.navigation .submenu-wrapper a:hover > .submenu{display:block;}
To .navigation .submenu-wrapper a:hover + .submenu{display:block;}
You also have to add
.submenu:hover{
display:block;
}
Because if you want to click on your submenu, the links will disappear
Just a few small changes and you're golden.
See the comments in the code below for your changes.
.navigation {
margin: 0;
padding-left: 0;
list-style: none;
float: left;
}
.navigation .submenu-wrapper {
float: left;
display: block;
position: relative; /* add relative position */
}
.navigation > a,
.navigation .submenu-wrapper a {
float: left;
position: relative;
display: block;
font-size: 20px;
padding-right: 14px;
padding-left: 14px;
padding-top: 5.5px;
padding-bottom: 8.5px;
color: #000;
text-decoration: none;
}
.submenu {
position: absolute;
display: none; /* display none */
top: 100%;
left: 0;
z-index: 1000;
float: left;
min-width: 160px;
list-style: none;
font-size: 18px;
text-align: left;
background-color: #245d94;
border: 1px solid #fff;
border-radius: 0;
box-shadow: none;
border-left: none;
border-right: none;
}
.navigation a:hover {
color: #fff;
background-color: #245d94;
}
.navigation a.active {
color: #fff;
background-color: #e36c0a;
}
.navigation .submenu-wrapper:hover .submenu { /* As you want the menu to remain open when you move to the submenu */
display: block;
}
<div class="navigation">
<a class="active" href="/">Home</a>
Test1
Test2
<div class="submenu-wrapper">
Test3
<div class="submenu">
Submenu1
Submenu2
</div>
</div>
Test4
</div>

css floating elements error

I have a small problem about div and input floating:
This is my problem, with a jQuery script when you wrote in the input box and press enter, a div element will be added, but if we wrote more then 4 element, the input box remain in the first line and the element go down. Can anyone could help me?
div.box {
width: 300px;
height: 200px;
border: 1px solid #ddd;
padding: 5px;
}
div.box>div.element {
background-color: #00B5B5;
display: inline-block;
color: #fff;
font-size: 11px;
text-transform: uppercase;
padding: 2px 8px 2px 8px;
border-radius: 5px;
line-height: normal;
cursor: pointer;
margin-right: 4px;
margin-bottom: 4px;
float: left;
}
div.box>input#group-input {
height: 11px;
/*border: none;*/
font-size: 12px;
outline: none;
vertical-align: top;
width: 8px;
}
<div class="box" id="box-ins-group">
<div class="element" id="1">prova</div>
<input type="text" id="group-input">
</div>
I have tried everything but still not working :( sorry for my bad english
-- Jquery code:
var counter = 0;
$('#group-input').keypress(function(e) {
if(e.which == 13) {
if($('#group-input').val().length > 3) {
$( "div#box-ins-group" ).append('<div class="element" id="'+counter+'">'+$("#group-input").val()+'</div>');
$('#group-input').val('');
counter++;
}
}
});
counter is a variable
You need to set float: left on the input, and then change this in your js:
$( "div#box-ins-group" ).append
to:
$( "input#group-input" ).before
The problem is that you're appending those elements to the element that contains both the .element divs and the input, so even if you'd fixed the float issue on the input, the new .element divs would always appear after the input in the DOM. Here's a fiddle.
It's also worth noting that you can remove display: inline-block, as it's ignored when you use floats.
Seems that the pills are floating but the input is not. Try this (if you haven't already):
div.container div.edit-local div.form table tr td>div.box>input#group-input {
height: 11px;
/*border: none;*/
font-size: 12px;
outline: none;
vertical-align: top;
width:8px;
float: left;
}

Categories