I have list of items. When hover, the background should highlight gray per item. I also want to be able to hover on "X" to change its background to red.
However, in the code below, when I hover on each line, the item background lays on top of "X" and there is no way to hover on "X".
Code: http://jsfiddle.net/qhoc/7vtZT/2/
HTML:
<ul>
<li>
<a>Long title for Item 1</a>
<i class=icon></i>
</li>
<li>
<a>Item 2</a>
<i class=icon></i>
</li>
<li>
<a>Item 3</a>
<i class=icon></i>
</li>
<li>
<a>Item 4</a>
<i class=icon></i>
</li>
<li>
<a>Item 5</a>
<i class=icon></i>
</li>
</ul>
CSS:
ul {
border: 1px solid green;
overflow: hidden;
padding: 0;
list-style: none;
width: 100px;
}
a {
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
padding-right: 20px;
white-space: nowrap;
width: 80px;
}
a:hover {
background: gray;
}
.icon {
display: inline-block;
float: right;
margin-top: -20px;
background: yellow;
}
.icon:before {
content: "X";
}
.icon:hover:before {
background: red;
}
Question: How to change CSS (preferably) to be able to hover on "X" to change its background color & be "clickable" in JS but also have the item's background in that line highlighted gray?
Right now I cannot event hook "click" event in the "X" because it keeps going under the items.
Requirements:
Width for ul is fixed of 100px
"X" must be in the same line of each li a element and stays in ul's width
If text in a is too long, it must go under "X" but not show outside box ul. There is no wrap.
Each li a has hardcoded width with ellipsis to show "..." on long text. This width can be changed.
No Javascript. Hardcoded CSS position is OK but less prefer.
Change the anchor css from inline-block to block also as a recommendation change the width from 100px (which is hardcoded) to 100% our auto to set the same width as the container
fiddle solution
Add position: relative; to all the li and add position: absolute;, right: 0;, top: 0; to .icon
Link to fiddle
May this can help u i think so..
a {
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
padding-right: 10px;
white-space: nowrap;
width: 80px;
height:15px;
}
Related
I'm new to web applications, so I don't know HTML, CSS and JS good enough to handle problems by myself yet. I followed some YT tutorial to create collapsible sidebar, but I don't know why it is collapsed as default and i can't make it opened. I think that the problem is that i don't know what exactly is going on in my code. Can you tell me what I'm doing wrong and help me understand how this should work?
HTML:
<div id="wrapper">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li>
<a href="#selectGameSubmenu" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle">
<i class="fa fa-fw fa-gamepad"></i> Select something</a>
<ul class="collapse list-unstyled">
<li>
Link1
</li>
<li>
Link2
</li>
<li>
Link3
</li>
</ul>
</li>
<li>
<i class="fa fa-fw fa-home"></i> Home
</li>
<li>
<i class="fa fa-fw fa-user"></i> My profile
</li>
<li>
<i class="fa fa-fw fa-question-circle"></i> FAQ
</li>
<li>
<i class="fa fa-fw fa-phone"></i> Contact
</li>
<li>
<i class="fa fa-fw fa-sign-out-alt"></i> Logout
</li>
</ul>
</div>
<!-- Page content -->
<div id="page-content-wrapper">
<!-- some code -->
</div>
</div>
CSS:
#sidebar-wrapper{
z-index: 1;
position: fixed;
width: 0;
height: 100%;
overflow-y: hidden;
transition: 0.15s;
background-color: var(--black) ;
font-size: 1em;
}
#sidebar-wrapper .sidebar-header {
padding: 20px;
background: var(--black);
}
#page-content-wrapper{
width: 100%;
position: absolute;
padding: 15px;
transition: 0.15s;
color: black;
}
#wrapper.menuDisplayed #sidebar-wrapper{
width: 250px;
}
#wrapper.menuDisplayed #page-content-wrapper {
padding-left: 250px;
}
.sidebar-nav{
padding: 0;
list-style: none;
}
.sidebar-nav li{
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a{
display: block;
text-decoration: none;
color: var(--gray);
}
.sidebar-nav ul li a {
font-size: 0.9em;
display: block;
color: var(--lightGray)
}
.sidebar-nav li a:hover{
color: #fff;
background: var(--gray);
}
.sidebar-nav ul li.active > a, a[aria-expanded="true"] {
color: #fff;
background: var(--deepBlue);
}
JS:
$("#menu-toggle").click(function(e){
e.preventDefault();
$("#wrapper").toggleClass("menuDisplayed");
});
Ok, I'll tell you how to achieve what you want (2 methods) and then I’ll explain how your code works.
method 1
in your first div (#wrapper), add the class menuDisplayed:
<div id="wrapper" class="menuDisplayed">
method 2
you can also change your CSS to do what you want and make the "menu displayed" the default style:
replace "menuDisplayed" with "menuHidden" throughout your code, so that it continues to make sense semantically
update styles for #sidebar-wrapper giving it a value other than 0 for width.
#sidebar-wrapper{
z-index: 1;
position: fixed;
width: 250px;
height: 100%;
overflow-y: hidden;
transition: 0.15s;
background-color: var(--black) ;
font-size: 1em;
}
now change styles for #page-content-wrapper too, so that it leaves room for your sidebar:
#page-content-wrapper{
width: 100%;
position: absolute;
padding: 15px;
padding-left: 250px; /* leaving 250px of space on the left */
transition: 0.15s;
color: black;
}
the next step is to make the closed sidebar have the right styles:
#wrapper.menuHidden #sidebar-wrapper{
width: 0; /* the element of id 'wrapper' and class 'menuHidden' must have width 0 */
}
#wrapper.menuHidden #page-content-wrapper {
padding-left: unset; /* clears the attribute that gave space to the sidebar */
}
now I'll explain how your code works (before you change the sidebar behavior):
your CSS tells the browser that the element with the sidebar-wrapper id should have null width (so it does not appear as soon as you load the page), but it also says that the element with id sidebar-wrapper should be 250px wide when inside another element that has the wrapper id and the menuDisplayed class.
the magic is in your javascript: it tells the browser to toggle the menuDisplay class of the element with id wrapper, which activates the CSS style that makes your sidebar 250px wide, and so it appears. when toggled again, the menuDisplayed class is deleted from the element with id wrapper and your sidebar returns to having width equal to 0.
the $("#menu-toggle").click adds an event listener for the 'click' event using jQuery. when this event is fired (someone clicks in the element with the menu-toggle id), the callback function is executed:
function(e){
e.preventDefault(); // prevents the default behavior of the element (if it is an anchor (<a></a>), it loses the ability to change pages, etc.)
$("#wrapper").toggleClass("menuDisplayed"); // toggles the class 'menuDisplayed' of the element with id 'wrapper'
}
You can add the class menuDisplayed to the navbar (with id #wrapper) initially, so on page load, it will be displayed.
<div id="wrapper" class="menuDisplayed">
you should add the class menuDisplayed to your #wrapper. then it can show by default.
<div id="wrapper" class="menuDisplayed">
full example can be found here :http://jsfiddle.net/9ojvnutc/
I have a created a box where I want to horizontally scroll the content from left to right on mobile and I wanted to swipe using touch and hide the scrollbar, here is a working JSfiddle
Should I try any JSplugin to handle this or is this something doable easily? Please suggest
.spotlight_graphs {
bottom: 30px;
clear: both;
left: 0;
margin-left: auto;
margin-right: auto;
max-width: 360px;
overflow: auto;
position: absolute;
right: 0;
width: 100%;
background-color:#cbcbcb;
overflow:auto;
padding:10px;
}
.spotlight_graphs > ul {
font-size: 0;
list-style: outside none none;
margin: 0;
padding: 0;
text-align:left;
width:200%;
}
.spotlight_graphs > ul > li {
max-width: 90px;
width: 33%;
display:inline-block;
background-color:#dec8c8;
height:100px;
margin:0 5px 5px 0;
border:1px solid #333333;
}
.spotlight_graphs > ul > li > .graph_detail {
color: #404040;
float: left;
font-size: 14px;
text-align: center;
text-transform: uppercase;
width: 100%;
}
<div class="spotlight_graphs">
<ul>
<li>
<div class="graph_detail"> This is dummy title </div>
</li>
<li>
<div class="graph_detail"> This is dummy title </div>
</li>
<li>
<div class="graph_detail"> This is dummy title </div>
</li>
<li>
<div class="graph_detail"> This is dummy title </div>
</li>
<li>
<div class="graph_detail"> This is dummy title </div>
</li>
</ul>
</div>
If you are using webkit browser such as chrome and safari, you could easiy add the following code to your CSS. Demo -> https://jsfiddle.net/xzc7khk0/5/
::-webkit-scrollbar { display: none; }
I think the easiest way to get this is using only CSS and baiscly rotating the items 90deg.
you can find it explained really well here:
Here's a link! where you can find this solution explained really well.
Another solution is to place the div that has the scrollbar into another div that has a height less than the scrolling div and overflow hidden in order to cover the scrollbar like this:
.hideScroll {
height: 129px;
overflow: hidden;
position: relative;
}
I edited your fiddle here: https://jsfiddle.net/xzc7khk0/6
You can do it with CSS as #Stan George said.
But this css is only for mobile, because you want to disappear scrollbar in mobile, so apply css on your scrollable div.
.spotlight_graphs::-webkit-scrollbar{
background-color:transparent;
}
it will disappear the scrollbar not scrolling.
Easy to do with css Webkit
html {
overflow: scroll;
overflow-x: hidden;
}
.spotlight_graphs::-webkit-scrollbar {
width: 0px; //remove scrollbar width
background: transparent; //optional: it will make scrollbar invisible
}
My jsFiddle is here : https://jsfiddle.net/r1s6651y/1/
I am not able to get Navigation with Numerals to be aligned horizontally.
I have applied display : inline-block for upper ul but still the next menu item begins on the second line.
Any clues ?
It should be stacked as :
1111111 22222222
AAAAAAAAAAAAA
BBBBBBBBBBBBB
You can't have li with width: 100%; and then expect them to align next to eachother. Ofcourse they naturally fall to 2 lines instead of 1, they're inline elements after all (Think of it like this: the <p> tag is also "inline" bu default. When the text in a <p> is too long, the text "breaks" to a new line. As will your li when it is set to be inline). You also want the li to next to eachother, not the ul which is what contains the li. So apply the display: inline-block; to the (correct) li elements
ul#myRow li {
width: auto; //could also be set to 50% if it's just 2 li elements
display: inline-block;
}
Two things. As already noted, you want the li items to be display:inline. You also need to remove the width:100% from the lis of #myRow. Then it will collapse and display inline as long as the container is wide enough for them (otherwise it will wrap).
li {
background: #00945f;
border-bottom: 1px solid #016e39;
clear: both;
float: none;
height: 62px;
margin: 0;
padding: 0 30px 30px;
width: 100%;
}
ul {
list-style-type: none;
}
ul#myRow li {
display:inline-block;
width: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<ul id="myRow" class="row">
<li>
11111111
</li>
<li>
2222222
</li>
</ul>
<ul class="row">
<li>
AAAAAAAAAAAAAAa
</li>
<li>
BBBBBBBBBBBBBBB
</li>
</ul>
</section>
Man, you do some mistakes.
I fixed it at: https://jsfiddle.net/r1s6651y/4/
li {
display: inline-block;
background: #00945f;
border-bottom: 1px solid #016e39;
margin: 0;
padding: 10px 20px;
}
put a class on the li you want horizontal, then add css display: inline
.horiz {
display: inline;
}
<section>
<ul id="myRow" class="row">
<li class="horiz">
11111111
</li>
<li class="horiz">
2222222
</li>
</ul>
<ul class="row">
<li>
AAAAAAAAAAAAAAa
</li>
<li>
BBBBBBBBBBBBBBB
</li>
</ul>
</section>
I am trying to make a menu that has some links in two levels.
What I am trying to do is to make it so that when you click on the top level then level 2 opens.
Right now my problem is that I want to have two columns but I want level two to be one full width column.
See my codepen here: http://codepen.io/mathiasha/pen/KdzmBL
I don't know if it's easiest to make it in CSS or jQuery.
I dont have control of the HTML.
<div class="block block-menu-block">
<ul class="menu">
<li>
1
</li>
<li>
2
<ul class="menu">
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
<li>2.4</li>
</ul>
</li>
<li>
3
<ul class="menu">
<li>3.1</li>
<li>3.2</li>
<li>3.3</li>
<li>3.4</li>
</ul>
</li>
<li>
4
</li>
<li>
5
</li>
<li>
6
<ul class="menu">
<li>6.1</li>
</ul>
</li>
</ul>
</div>
See the CSS below:
.block-menu-block {
width: 100%;
border: 5px solid red;
overflow: hidden;
}
ul.menu {
list-style-type: none;
padding: 0;
margin: 0;
font-weight: bold;
}
ul.menu li {
display: block;
width: 50%;
border: 1px solid #000;
margin: -1px;
float: left;
text-align: center;
}
ul.menu li a {
display: block;
padding: 20px;
text-decoration: none;
}
li a ~ ul a {
color: green;
}
As long as first level LIs are set to be width:50%, children are bounded. Setting sub-level absolutely positionned could have been a solution, but in your case, it breaks the desired effect.
So a "dirty" solution that I can give you is to use this :
.block-menu-block ul li ul{ width:200%; margin-left:-100%; }
.block-menu-block ul li ul li{ width:100%; background:#fff;}
Sub-level UL width will be multiplied by two, and then has the same width as the menu. Used negative margin to make a translation, otherwise, it will start under the parent LI and will expend out of the menu boundaries.
And finally, reset the sub LIs width to 100% (background is used to hide parent borders).
Updated Codepen
I have this mobile menu:
As you can see, the <li> tags with the image make the bottom expand a little bit, while "Boxing" which doesn't have any image inside the <li> tag doesn't.
I tried "height: 27px" to the <li> tag. worked perfect. the problem is that when clicking the image - a submenu opens inside the <li> - when defining the height it doesn't expand.
This is how the html list item looks like:
<ul class="sports">
<a href="#" >
<li url="http://google.com">NFL
<img src="strokesmenu.jpg" id="sub-menu" />
<ul class="sports2">
<a href="#" class="selected">
<li>Superbowl</li>
</a>
</ul>
</li>
</a>
// one without an image:
<li> Boxing</li>
and this is my css:
.sports li{
list-style-image:none;
list-style-type: none;
border-bottom: 2px solid #eeeeee;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 10px;
width:100%;
font-family: arial;
text-decoration: none;
overflow: hidden;
/*height: 27px;*/
z-index: 100;
}
Give Max-height to the image that way it will not get bigger tha tthe li
li > img{
max-height:100%;
}
i hope it works