I have no idea how to style the box that you drag to scroll on jScrollPane. I have tried .jspScrollBar; no luck.
Fiddle
I updated your fiddle with the solution I think you are looking for.
Specifically, you change the color of the "drag" portion of the scrollbar using the jspDrag class like so:
.jspDrag {
background-color: #000; /*Changes drag box to black */
}
Updated fiddle: http://jsfiddle.net/n8Xgz/16/
Related
I am trying to get the following behavior in my Flickity gallery:
Click anywhere on the entire image, and it advances to the next image.
I am finding that resizing (+hiding) the buttons isn't behaving as expected. Can anybody suggest a better approach? Website built using Semplice, the CSS I'm using is:
.flickity-prev-next-button.next {
width:100%;
height:100%;
opacity:0;
}
The corners of the image are draggable but not clickable when I style it this way. Weirder to me, the clickable region is shaped like a diamond.
I want the entire image to be clickable to advance the gallery. I'd be grateful for any help. Thank you.
You have some more default styling you need to overwrite:
.flickity-prev-next-button.next {
width:100%;
height:100%;
opacity:0;
top: 0;
right: 0;
bottom: auto;
left: auto;
transform: none;
}
Should do it
Edit: also your header makes it so you can't click images behind it. Personally I'd fix that by just making the header white.
Solved by defining a border-radius and background color for the Flickity control button.
My layperson's thought is that default background transparency in the button was affecting its shape. Only the "arrow" part had a color, the background was transparent, so the shape got defined by this into a diamond shape and that's why I had a "diamond" inside of the image that was clickable.
Once a border-radius and background color were added, the dimensions of the button were fully rectangular instead of the diamond shape of the arrow control.
.flickity-prev-next-button.next {
width:100%;
height:100%;
background: #333;
border-radius:15px;
opacity:0;
}
Firefox is cutting off the border of dropdown select or making them look hideous in some cases(making left border grey and right border black).
Is there a fix for this in CSS?
I am using Bootstrap, UniformJS(removing this didn't change anything).
Its a firefox bug. You can check it here.
Best way would be to give width 99.99% instead of 100% in your css.
To complete the answer by Rhythm Patel, add the following to your CSS or element.
select {
width: 99% !important;
}
Yes.. It is a bug From Firefox web browser.
Set Width Of Your Select Box In CSS
select {
width: 99% !important;
}
or add class to select tag and set width
Ive used negative margin to make a link larger than its container, and ive hidden the overflow of the parent element. My reasons for doing so are explained in this question:
Responsive navigation - keep links the same height when some wrap?
Here is a working fiddle: http://jsfiddle.net/uwEGj/
The issue is that the tap highlight shows the element being larger than its container. If you use a device like an iPhone on the link above you will see what I mean.
To solve this ive set the link to have this CSS rule:
-webkit-tap-highlight-color: rgba(0,0,0,0);
However I would like a tap highlight over the visible area of the link. I tried to set a tap highlight color to the li e.g. -webkit-tap-highlight-color: rgba(100,100,100,0.6); but it doesnt seem to do anything. See here: http://jsfiddle.net/uwEGj/3/
How can I have a tap highlight colour only over the visible area of the link?
Considering I understand your problem correctly - you are annoyed that the highlighted area overflows a bit over the edge of the link, as on the following image I've got from Google images to illustrate the problem:
AND you want all links to be same height no matter how much text they contain.
First I would correct the markup to fit your table-cell display logic. As you know a table has 3 main elements - table, table-row, table-cell - you are missing the table-row element which makes thing render improperly cross platforms.
I would do the HTML as following:
<div class="link-list">
<div class="link-list-row">
Link 1
Link 2 which has very very very long text and loger
Link 3
</div>
</div>
Than forget about the negative margin (-10em negative margin).
So change the CSS to the following:
.link-list {
display:table;
width:100%;
}
.link-list-row {
display:table-row;
}
a {
display:table-cell;
padding: 10px;
width:33.3%;
heigth:100%;
background: grey;
padding: 10px;
border: 2px solid red;
overflow:hidden;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* disable the highlight */
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
Your highlight is now disabled and your <a> with longer text wraps to next line and also shorter <a> 's will still get same height since they are now displaying as cells.
Now in order to make the highlight as precise as possible you will need some simple javascript to toggle a class on tap events, since the highlight event is system bound.
Most simple solution is using jQuery obviously, but can be accomplished with pure javascript too if you can't use any frameworks.
$('a').on({
'touchstart' : function(){
$(this).addClass('tap');
},
'touchend' : function(){
$(this).removeClass('tap');
}
});
and add a class to your css for the tap event:
a.tap {
background:green;
}
Now you can style your hightlighted state as you wish + the highlight will work on non-webkit browsers also.
Working sample (try on touch enabled device): http://jsfiddle.net/7M6Ey/2/
I have div box which is inside anchor tag.
Want to create some effect on the text inside div.
I coded but it does not show effect.
I wanted that when user take mouse over url in then background should change to Yellow color:
.fragment h4: hover {
background-color:yellow;
}
Also the button here does not give on hover effect. Can someone let me know which effect is there in CodePan.com
I want to keep my color and trying to create gradient and hover effect as it is on Codepan.com buttons
http://www.codepen.io/karimkhan/pen/riklv
UPDaTE
I want to keep box single clickable. And want to change url when it is mouse overed.
There's a typo in your code, h4:hover MUST go together:
.fragment h4:hover {
background-color:yellow;
}
Please note how I removed the space between h4: and hover
The problem you're having with your button is that your CSS is incorrect, you forgot to add a . before the name of the class, i.e : .button. I just updated the jsfiddle to add this as well.
Here's a working jsfiddle.
Try:
.fragment:hover h4 {
background-color: yellow;
}
I am trying to replicate the following effect : http://amplifiedvideodesign.com/capture.png
I can set the background color for hover but how can i do the border and the little arrow that are on the bottom?
Thanks.
For the border you can just use the same code you just have to set a border and update its color. You can try my example on jsFiddle
.tabs a:hover {
background-color: #444;
border-bottom-color: #484;
color: #484;
}
As for the arrow/diamond/triangle whatever: That's something you can't setup that easily, but the easiest solution would be adding a background rather than using plain HTML/CSS.
Update: Here's an animated example.