I am trying to change the cursor to a custom image of a "previous" and "next" arrow via CSS but am not having any luck.
I would like for the cursor to change to a left arrow when hovering on the left side, and to a right arrow when hovering on the ride side.
It seems that something is overriding my CSS when I add it in the stylesheet.
.leftarrow:hover {cursor: url(leftarrow.png), auto;}
.rightarrow:hover {cursor: url(rightarrow.png), auto;}
Is this possible to do via CSS, or do I need some JS for this?
Thanks
Why css?
you can change it in plugin options ;)
$('#fotorama').fotorama({
arrowPrev: '<img src="/path-to-image/Previous.png" width="30" height="30" >',
arrowNext: '<img src="/path-to-image/Next.png" width="30" height="30" >'
});
Related
using Next 13 and Tailwind, i'm trying to render the some images of products from fakestoreapi on my e-commerce page, i want this images to have the same size so i'm using this code. But the images are not resizeing correctly.
this component only has one parent div with no properties.
<Image src={image} width={200} height={200} style={{ objectFit: "contain" }} />
do you know what could be the reason ? Let me know if i need to provide more info.
thankyou in advance
Setting height of your element via style attribute should override tailwind default.
<Image src={image} width={200} height={200} style={{ objectFit: "contain", height: "200px" }} />
I'm using a Webview in Xamarin to draw an RGraph.Bar.
The user can press a "+" button to manipulate the Graph then Graph is refreshed. The thing is for some reason the Webview is cutting off the labelsAbove the bars.
I was wondering if there's a chance to put labelsAbove in the center of the bar or at the beggining of it so it's not that obvious or... a solution to the WebView cutting the graph (Height)
A few things to try:
Try increasing the marginTop property. Try setting it to 50 and see how that looks.
Try wrapping your canvas in a div and adding some margin-top to it:
<div style="margin-top: 50px; display: inline-block">
<canvas id="cvs" width="700" height="300"></canvas>
</div>
Now I am using Summernote text editor. It is so easy and customizable. But I want to customize width. Example:
$("#editor").summernote({
'width':200px,
});
Above code is not effect. How can I do it?
you can use width like below.
$('.editor').summernote({
width: 150, //don't use px
});
For me it helped to wrap editor with another div with style
<div style="width: 80%;">
I need to "slide in" a (background-)image in a div.
When I load the page, some div with a bg image or image inside it (and overflow?) needs to go from invisible/width=0 to 100px width. This needs to ease in.
Can anyone please help me out with the js?
<div style="overflow:hidden; width:100px; height:40px;">
<img src="someimg.png" height="40" width="100" />
</div>
This uses jquery on document ready.. For easing can use the standard jquery 'linear' but I included the jquery.easing plugin where you can have different easing options.
http://jsfiddle.net/DyW7M/1/
$(document).ready(function () {
$('#makeitlong').animate({ width: '400'}, 2000, 'linear');
});
It's a known bug that -moz-border-radius doesnt work on images in firefox. What's a way to get this functionality without resorting to putting the image as a background on a rounded div?
In current Firefox you can use SVG filters. Have an SVG file clip.svg like this:
<svg:svg height="0">
<svg:clipPath id="c1" clipPathUnits="objectBoundingBox">
<svg:rect x="0" y="0" rx="0.05" ry="0.05" width="1" height="1"/>
</svg:clipPath>
</svg:svg>
And apply it in CSS like this:
.target { clip-path: url(clip.svg#c1); }