I want to create a dictionary-like feature where I want to design a custom scroll bar.
I can customize it using CSS but it is up to some extent. I can't achieve what I want.
Any help is appreciated.
This is what I want
This is what I can able to customize (ignore color)
.scrolling-area::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 12px #fff;
border-radius: 0px;
background-color: transparent;
border-left: 4px solid $primary;
border-right: 4px solid $primary;
}
.scrolling-area::-webkit-scrollbar-thumb {
border-radius: 20px;
-webkit-box-shadow: inset 0 0 px #fff;
background-color: #fff;
}
Note:
I saw one jquery plugin offer this type of scrollbar
But I want to do it using vanilla js or vuejs specific solution also appreciated.
Related
I am trying to custom the md-virtual-repeat-scroller with a cross browser solution without jQuery.
I learned that the angular-material team won't implement it : scrollBar: customize scrollbar UX per Material Design specifications. #5064
Is there someone who achieveed to do it ? For the moment I use this CSS solution using webkit but it's not supported everywhere.
.md-virtual-repeat-scroller::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: $grey;
}
.md-virtual-repeat-scroller::-webkit-scrollbar
{
width: 6px;
background-color: $grey;
}
.md-virtual-repeat-scroller::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: $primary;
}
Thanks.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I am having a link on the website which says "USE CURRENT LOCATION". I want to change that link to a shape of button.
ID of the button is btnGeolocation
You can have a look at that link in this page https://order.subway.com/Stores/Find.aspx?pid=1#pg1
Html for button
button
and css
.link{
text-decoration:none
font-family: "Lato", sans-serif;
font-size: 18px;
font-weight: normal;
}
.link:hover{
text-decoration:none;
padding: 10px 25px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
border: none;
outline: none;
position: relative;
text-align: center;
text-decoration: none;
color: #fff; }
.link:hover {
box-shadow: 0 4px 0 0 #f9b980, 0 2px 0 0px #f9b980;
background-color: #fc983f; }
.visual-button:active {
top: 5px;
box-shadow: 0 0px 0 0px #f9b980, 0 0px 0px 0px #f9b980; }
add this to your stylesheet! it should work... edit the css to get the shape you want!
#divSearchLocation #btnGeolocation{
border: 1px solid #b5b5b5;
border-radius: 100px;
padding: 8px;
background: #e1e1e1;
box-shadow: inset 0px -18px 25px -18px black;}
No jquery required here. Use CSS border and background property, you will achieve the result.
You can use only CSS to do that,
Check out this link :
https://www.freshdesignweb.com/css3-buttons/
I hope this could help you
I want to add a caret symbol (down arrow or V) next to a menu item which has sub menu items. I know that it can be achieved using bootstrap. But, I can't update my custom css with bootstrap css as it would become messy.
I'm happy to integrate only a part of bootstrap if that is going to work.
Please suggest me a solution asap.
You can try be using pure CSS to achieve a triangle:
Markup:
<div class="triangle"></div>
Style:
.triangle {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid black;
}
As result, you have a solid down arrow that you can use. If you want to go beyond, you can override this property with another similar triangle over it and make an exactly caret in a "V" format:
Markup:
<div class="triangle">
<div class="over-triangle"></div>
</div>
Style:
.triangle {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid black;
}
.over-triangle {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid white;
position: relative;
top: -10px;
left: -5px;
}
This way you can get the exact form of a caret:
You can apply it to another element by making the triangle display: inline-table to align to the same line.
Now, it goes to you implement it on links!
If you are looking for easy symbol intergrations, I would suggest font-awesome if you want to avoid bootstrap.
http://fortawesome.github.io/Font-Awesome/
Similar to a previous question but I gave up on that an decided to come back to it later, now things are different as I'm using jQuery. I'm having a dropzone on my site and for image files I would like there to be a border shadow, but for files I don't want one. Multiple files can be dropped and the previews display inline, so say if 2 images and one file were dropped, I would want the shadow on both the images, but not the file preview box. I made 2 CSS classes, identical except for the shadow:
.dz-preview {
background: transparent;
position: relative;
display: inline-block;
margin: 40px;
vertical-align: top;
border: 1px solid transparent;
padding: 10px 13px 10px 10px;
-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16);
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16);
}
.dz-preview-noshadow {
background: transparent;
position: relative;
display: inline-block;
margin: 40px;
vertical-align: top;
border: 1px solid transparent;
padding: 10px 13px 10px 10px;
}
Simplest way to go seemed to be with jQuery and I was using it in the project anyway, so I made this (.dz preview is the default class):
mydropzone.on("addedfile", function(file) {
if (!file.type.match(/image.*/)) {
$('.dz-preview').addClass('dz-preview-noshadow').removeClass('dz-preview');
mydropzone.emit("thumbnail", file, "http://i.local.dev:5000/jLNutaV.png")
}
});
It works initially-but goes wrong. I drop 2 images and they get their shadowed border just fine, but when I drop a file, it loses its shadow, which is what I wanted - but so do the two images that were dropped before it. If I drop another image it will get its shadow again, but the previous elements don't change. I know I'm missing something really stupid here about the scope of how JS is affecting these classes, but is there a way to change the class for JUST that instance, without muddling up everything before it, or do I need to run more checks and manually add the class back on?
Can't post codes in comments, so I'll make it an answer.
Since .dz-preview and .dz-preview-noshadow shares a lot of same codes, you can have a class that just holds the shadow. For eg:
.dz-preview {
background: transparent;
position: relative;
display: inline-block;
margin: 40px;
vertical-align: top;
border: 1px solid transparent;
padding: 10px 13px 10px 10px;
}
.shadow {
-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16);
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16);
}
So instead of adding and remove, you can just do a remove.
trying to make an input box do the following: normal sate the input box text is x, hover state the input text is y and was you leave the box its z and can stay z through all states again.
-update
have a search box which the background image and text are faded out, once you hover it is is vivid, once you focus it, it is vivid with a 2px border, but once you leave it i loose verything:( so need a trick to get it to stay vivid the background picture (of which there are x and y, one for each state) and the text but loose the 2px border
---UPDATE ---
/* Search box */
.searchbox {
background: url(../images/search-grey.gif) no-repeat 6px -5px #f8f8f8;
width:240px;
margin-right:4px;
margin-left:11px;
color:#cccccc;
vertical-align: top;
padding: 4px 2px 4px 79px;
border-color: #4FA4F9;
}
.searchbox:hover {
background: url(../images/search-greyb.gif) no-repeat 6px -5px #f8f8f8;
color:#888888;
}
.searchbox:focus {
background: url(../images/search-greyb.gif) no-repeat 5px -6px #ffffff;
width:239px;
color:#888888;
padding: 3px 2px 3px 78px;
}
.searchbox.blur {
background: url(../images/search-greyb.gif) no-repeat 6px -5px #ffffff;
width:239px;
color:#000000;
padding: 4px 2px 4px 79px;
}
#-moz-document url-prefix() {
.searchbox {
background: url(../images/search-grey.gif) no-repeat 6px -4px #f8f8f8;
}
}
#-moz-document url-prefix() {
.searchbox:hover {
background: url(../images/search-greyb.gif) no-repeat 6px -4px #f8f8f8;
}
}
#-moz-document url-prefix() {
.searchbox:focus {
background: url(../images/search-greyb.gif) no-repeat 5px -5px #f8f8f8;
}
}
input::-moz-focus-inner /*Remove button padding in FF*/
{
border: 0;
padding: 0;
}
input, select, textarea {
margin: 1 0 0;
}
input, textarea, .date {
border: 1px solid #aaa;
border-radius: 3px;
color:#333;
}
input {
font-size: 13px;
padding: 0px;
}
textarea {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
padding: 4px 4px 4px 4px;
}
select:hover {border: 1px solid #4FA4F9;}
input:hover {border: 1px solid #4FA4F9;}
textarea:hover {border: 1px solid #4FA4F9;}
select:focus {padding: 0px;}
input:focus {padding: 0px;}
textarea:focus {padding: 3px 3px 3px 3px;
}
--- html ---
<input id="searchdomain" name='domain' type="text" style="font-size:15px;" class="searchbox"/>
---js----
/* Search Box Leave */
$(".searchbox").blur(function(){
$(this).addClass("blur");
});
You could do this using jQuery by setting a class.
$(".searchable").blur(function() {
$(this).addClass("blur");
});
Then in your css you can set the color like this
.searchable.blur
{
color:#000;
}
Here is a jsfiddle example -> http://jsfiddle.net/y46Wk/2/
Just bear in mind that the element won't show its hover color again unless you remove the class.
This isn't really an answer to your question.... but I have a feeling you're doing some validation on a form, so why not look at a jQuery validation plugin like this
http://docs.jquery.com/Plugins/Validation
Here is a list of other form related jQuery stuff
http://speckyboy.com/2010/06/22/50-jquery-plugins-for-form-functionality-validation-security-and-customisation/
If none of them help, perhaps you could tell us which one comes close to give us a bit of a clue as to what you want ;-)
Are you trying to do this: http://jsfiddle.net/akhurshid/y46Wk/4/
What you are describing (maintaining a state) is technically possible with just CSS.
Here is an article explaining the process.
In summary you use a transition state, triggered by focus, to keep styles applied to the element. I'm not advocating it as the best method, but it is really quite interesting to see what you can do with CSS3 properties.
More of a curiosity than a straight answer but hopefully its helpful to you / others who hit this question :)