I want to achieve this:
What I already achieve:https://plnkr.co/edit/a3XfJo6Fxtru9V5zpVYR?p=preview
.dropdown-menu { //container
overflow-y: overlay;
background-color: transparent;
}
.dropdown-menu::-webkit-scrollbar {
width:10px;
}
.dropdown-menu::-webkit-scrollbar * {
background:transparent;
}
.dropdown-menu::-webkit-scrollbar-thumb {
background:$blue !important;
border-radius: 6px;
}
Does someone have any ideas how I can do that? How can I make the items stay between their container and the container's scrollbar so they looks like the design?
I tried putting z-index in the elements but seems not to work.
Just switch the unit in body tag from % to vw
and you will get the over content effect.
body {
width: 100vw;
overflow-x: hidden;
}
body::-webkit-scrollbar {
width: 0.7em;
background: transparent;
}
body::-webkit-scrollbar-thumb {
background: #c0392b;
}
http://manos.malihu.gr/jquery-custom-content-scroller/
This plugin works pretty well. Suggested! Easy to modify as well!
Make some changes in your css file use this code
.dropdown-menu::-webkit-scrollbar-track {
background-color: #E0E0E0;
}
remember to remove display: none; property from your code or change it to display: block;
Related
i am trying to make a website, but for some reason i am stuck on the hover. I knew how to do this, but i thing i forgot something.
What i want is that when i hover over the black bar the black turns into white so you can see the text.
This is my code:
div.spoiler1:hover div.spoiler1 {
background-color: white;
}
<div style='display:inline; background-color: black;' class='spoiler1'>hey</div>
I also tried this css:
spoiler1:hover spoiler1 {
background-color: white;
}
div.spoiler1:hover,.spoiler1 {
background-color: white;
}
spoiler1:hover {
background-color: white;
}
Good efforts. The issue is that the inline style overrides the sheet. In general, don't use inline styles (hard to debug/maintain, not reusable):
div.spoiler1 {
background-color: black;
display: inline;
}
div.spoiler1:hover {
background-color: white;
}
<div class='spoiler1'>hey</div>
See this JSFiddle.
Whenever I click on the checkbox, the browser window (firefox) will scroll on the top of the screen.
How can I prevent this behavior so when I click on the checkbox the browser window will not scroll on top?
Here is the code found from here http://jsfiddle.net/zAFND/6/
Thank you.
<html>
<head>
<title>Test</title>
<style>
div label input {
margin-right: 100px;
}
body {
font-family:sans-serif;
}
#ck-button {
margin: 4px;
background-color: #EFEFEF;
border-radius: 4px;
border: 1px solid #D0D0D0;
overflow: auto;
float: left;
}
#ck-button {
margin: 4px;
background-color: #EFEFEF;
border-radius: 4px;
border: 1px solid #D0D0D0;
overflow: auto;
float: left;
}
#ck-button:hover {
margin: 4px;
background-color: #EFEFEF;
border-radius: 4px;
border: 1px solid red;
overflow: auto;
float: left;
color: red;
}
#ck-button label {
float: left;
width: 4.0em;
}
#ck-button label span {
text-align: center;
padding: 3px 0px;
display: block;
}
#ck-button label input {
position: absolute;
top: -20px;
}
#ck-button input:checked + span {
background-color: #911;
color: #fff;
}
</style>
</head>
<body>
<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="ck-button">
<label>
<input type="checkbox" value="1"><span>red</span>
</label>
</div>
</body>
The problem is this rule:
#ck-button label input {
position:absolute;
top:-20px;
}
When you click on a label the browser tries to focus the related input. In your case the checkbox element is lying at the top of the page, even outside the viewport – so Firefox tries to scroll there.
You can solve it like this by adding:
#ck-button label {
display: block;
position: relative;
overflow: hidden;
}
Demo
Try before buy
Alternative
Heisenberg points out a problem in his answer which can occur when using extreme values. Unfortunately the proposed idea has the same quirk as the one shown above.
So an alternative solution is simply to hide the input. The functionality is not affected.
CSS
#ck-button label input {
display: none;
}
Demo
Try before buy
The answer accepted is not entirely true. Works, but not in all cases.
If you use the common css to hide elements (probably -999em or similar) at the "top" attribute, in this case position:relative has nothing to do because always -999em will be much higher than the viewport.
The answer accepted works fine because the "top" is only -20px . Try to set it a more higher number and you´ll see the problem.
So, the solution is not to set a relative position.
I think the correct way is only to set a negative value at left position (not top).
Try it. :)
you could hide your checkbox input like this:
#ck-button label input {
position:absolute;
top:+20px;
visibility: hidden;
}
Sorry if the question is a little vague, I found it quite hard to title. Anyway, I am currently creating a new design and I have hit an issue, I basically want one div to start underneath another, as I am using rounded edges on the div before and want to cover up the whitespace.
I am able to get the div to underlay, however when I set the z-index it becomes the bottom element and the interaction with links etc can't be done. (e.g links can't be clicked, can't highlight text)
To better explain, I have created this JSFiddle link, it shows exactly what I am trying to do. Try clicking the link, it will simply not work.
The code on the JSFiddle is as follows:
#div-1, #div-2 {
width: 350px;
border-radius: 0 0 16px 16px;
}
#div-1 {
background-color: grey;
}
#div-2 {
background-color: black;
position: relative;
z-index: -1;
margin-top:-25px;
}
Any help is appreciated, and if you would like me to clarify anything please do ask.
Thanks,
Jake
Demo http://jsfiddle.net/Amn7S/
Dont use z-index:-1; use z-index:1; and z-index:2; then it works.
#div-1 {
background-color: grey;
z-index:2;
position:relative;
}
#div-2 {
background-color: black;
position: relative;
margin-top:-25px;
z-index:1;
}
instead using z-index-1; you should use positive z-index and tell each div where to stand.
http://jsfiddle.net/wdQWu/3/
#div-1, #div-2 {
width: 350px;
border-radius: 0 0 16px 16px;
position:relative;
z-index:1;
}
#div-1 {
background-color: grey;
}
#div-2 {
background-color: black;
position: relative;
z-index: 0;
margin-top:-26px;
}
oups, little late, answer already there :)
You could change the z-index of the link to be above the 2nd div
something like this maybe ?
http://jsfiddle.net/wdQWu/1/
I've used a div with a class wrapper as you can see in the code.
.wrapper {
width: 350px;
border-radius: 0 0 16px 16px;
background-color: black;
}
Hope it's useful..
I have a simple "fill the gaps" excercise in html. There are gaps, looking like this:
Earth closest star is _ _ _ _.
The gaps are not supposed to be fillable on the computer - the document is supposed to be printed with the gaps enpty. But they have a content so, when howered, answers may be checked.
I use border-bottom property to make the gaps. There is a text filled in the gaps but it is white, so the user only can see it on hover.
The CSS:
span.gap {
color: white;
border-bottom: 1px solid black;
}
span.gap:hover {
color: gray;
}
The HTML:
Stephen Hawking is famous for his research of <span class="gap">black holes</span>.
Stackoverflow only helps you if you ask <span class="gap">simple questions</span>.
Browser seems to fix the color from white to black, so the gap content is visible in the printed document. How should I hide the text then?
I cannot use the visibility property, because the border must be visible.
Of all of the image replacement techniques, there are a few that will work without adding extra elements. All of them will require setting a width on the span if you want it to appear inline.
http://jsfiddle.net/TZD84/
span.gap {
display: inline-block;
width: 8em;
white-space: pre;
overflow: hidden;
border-bottom: 1px solid black;
text-indent: 110%;
}
span.gap:hover {
color: gray;
text-indent: 0;
}
If you need to support older browsers, there's always the negative text-indent method
http://jsfiddle.net/TZD84/1/
span.gap {
display: inline-block;
width: 8em;
overflow: hidden;
border-bottom: 1px solid black;
text-indent: -10em;
}
span.gap:hover {
color: gray;
text-indent: 0;
}
You can use CSS media types to handle different display/media situations. I.e add something like this to your CSS:
#media print { .gap { /* add your styles */ }}
Also, in combination with this you could add a separate span that would display only for print. Like:
HTML:
Stackoverflow only helps you if you ask
<span class="gap">simple questions</span>
<span class="print-gap"></span>.
CSS:
span.gap, span.print-gap {
color: white;
border-bottom: 1px solid black;
}
span.gap:hover {
color: gray;
}
#media screen {
span.print-gap { display: none; }
}
#media print {
span.gap { display: none; }
span.print-gap { display: inline-block; width: 100px; }
}
I have some links to my facebook and twitter, these links are images. I want these links to turn lighter when I hover over them. I was thinking I could do this by making two images and making the images change when I hover over the image link. Is this the best way to do it and if it is how do i do it? I couldn't find any help on how to do it this way.
Here is my HTML:
<div class="social">
<a href="https://www.facebook.com/seth.urquhart?sk=wall&v=wall">
<img src="../img/facebook_logo_extended.jpg"/>
</a>
</div>
<br>
<div class="social">
<a href="https://twitter.com/SethUrquhart">
<img src="../img/twitter_logo_extended.jpg"/>
</a>
</div>
Here is my CSS:
p {
color: #232323;
text-indent:0px;
margin-left:30px;
padding-right: 30px;
}
ul {
text-align: center;
color: gray;
}
ul a {
text-decoration: none;
color: black;
}
ul a:hover {
text-decoration: underline;
margin-right: auto;
margin-left: auto;
}
html {
background: #e8e9e1;
}
h1 {
text-align: center;
}
body {
font-family: sans-serif;
color: #232323;
}
.wrap {
min-width: 600px;
width: 1200px;
margin: auto;
height: 100px;
text-align: center;
background-color: none;
}
.content {
background: #ffffff;
width: 900px;
margin-left: auto;
margin-right:auto;
height: auto;
text-indent: 50px;
}
.footer {
text-align: center;
background-color: #383838;
width: 900px;
margin-left: auto;
margin-right: auto;
color: #e8e9e1;
}
.social {
width: 900px;
margin: auto;
height: 100px;
text-align: center;
background-color: none;
}
.social:hover {
margin-right: auto;
margin-left: auto;
background:#cccccc;
color:#000;
}
ul#list-nav {
padding: 0;
list-style: none;
width: 605px;
margin: 0 auto;
}
ul#list-nav li {
display:inline;
}
ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:150px;
background:#383838;
color:#eee;
float:left;
border-left:1px solid #fff;
}
ul#list-nav li a:hover {
margin-right: auto;
margin-left: auto;
background:#cccccc;
color:#000;
}
Assuming you're willing to use CSS3, I created an example showing one way to get a brief widening effect for the icons (I suppose that is what "dense" means in the question). Reduced code here:
.icon {
-webkit-transition: 0.25s;
transition: 0.25s;
}
.icon:hover {
position: relative;
z-index: 1;
transform: scale(1.7);
-ms-transform: scale(1.7); /* IE 9 */
-webkit-transform: scale(1.7); /* Safari and Chrome */
}
The transform property has good support. The effect with transition isn't so well supported (no IE9 support), but if you are thinking on graceful degration, I think it's quite valid to use that.
EDIT
I'm updating this answer because it could help other people in future. The accepted answer isn't the right approach, since it's using obtrusive JavaScript to do things about styling, where CSS is the right tool. I really hope the OP will take a look here and change their code.
Based on the OP's feedback, I updated the example showing how to get a brightness effect simulated by changing the opacity property with a fallback using filter for IE6-8. In short, here's the code:
.icon {
opacity: 1;
filter: Alpha(Opacity=100);
}
.icon:hover {
opacity: .6;
filter: Alpha(Opacity=60);
}
It's easy and works very well when the parent's background-color is lighter than the element. If you need something more elaborated (if you really want changing between two images), I really suggests you to use CSS sprites.
I don't know what you mean by dense, but you can alter any image property via the onmouseover and restore it with onmouseout. Here's a code snippet to show how to do it. This code simply makes an image dimmer when the mouse is over it, then restores it when the mouse leaves:
<img
src = "test.jpg"
style = "width:50%;"
id = "test"
onmouseover = "document.getElementById('test').style.opacity=0.5"
onmouseout = "document.getElementById('test').style.opacity=1" />
If you wanted to make the images bigger on the hover, you'd change any of the size attributes. For instance, here's a particularly dramatic size jump:
<img
src = "test.jpg"
style = "width:50%;"
id = "test"
onmouseover = "document.getElementById('test').style.width='75%'"
onmouseout = "document.getElementById('test').style.width='50%'" />
Please note that the above is for illustrative purposes only. There are other ways of doing this, and I am not saying the way I presented is the best or even a good one. However, it's clear and I just want you to clearly see how this can be done.
The simpliest solution would probably for you to use background-images rather than images so you can just switch between them. You can even go as far as creating 3 states this way.. inactive, hover, and selected..
Consider cascades and specificity.. If you define your inactive state first, hover state is defined second overwriting the same definitions, selected state is defined last, again with the same definitions and level of specificity. Now each will overwrite the other in the appropriate or they will happen.
An image
div { background:url('http://www.placehold.it/200x200/f2f2f2') no-repeat; }
On hover display a different image
div:hover { background:url('http://www.placehold.it/200x200/666666') no-repeat; }
If the element is an anchor or has some onclick function defined with it.. display a different image on select with a new class
div.selected { background:url('http://www.placehold.it/200x200/000000') no-repeat; }