I am trying the customise the cursor when it is over some svg files to indicate to the user the possibility to click.
I stated for a tuto from https://websitebeaver.com/how-to-make-an-interactive-and-responsive-svg-map-of-us-states-capitals, changed jquery part to javacript and added the cursor's customisation (css and JS)
Unfortunately when I add those 2 lines of code :
customCursor.style.top = (e.pageY-10)+"px";
customCursor.style.left = (e.pageX-10)+"px";
it makes the svg image hover "shivering"(sorry i do not find a better word to describe it). Some time the element is not even highlighted and also I have noticed the behavior is even different on chrome and firefox
See the code
If I remove even one of those line the svg file looks good, no more cursor customisation but it behave good.
I am running out of ideas and I need fresh ones to solve it....
Thanks in advance for your help.
At the moment the cursor is intercepting pointer events and causing the hover to be removed. That then gets rid of the cursor, reinstating the hover etc etc etc.
Give the cursor the CSS property pointer-events: none;
cursor {
position: absolute;
width: 20px;
height: 20px;
border: 1px solid red;
border-radius: 50%;
z-index:10;
pointer-events: none;
}
Related
I have a round < button > with a < div > inside that represents a Unicode image. Currently the button is set to border-radius: 12px; height: 24px; and width: 24px; and the < div > is to font-size: 17px. The < div > Unicode image sits inside but not centered and the button is slightly off to the side.
How can I get the < div > to center inside an oval button despite what font-size the < div > is?
EDIT
I want to create a circle/round button with an emoji center to the middle of the button despite the button's size or the emoji image's size.
CSS for the button and emoji image for div:
#emoji-button {
border-radius: 19px;
width: 38px;
height: 38px;
}
#thumb-emoji:after {
content: "\01F44C";
font-size: 20px;
}
And round/circle button with emoji image inside:
<button
type="submit"
id="emoji-button"
>
<div id="thumb-emoji"></div>
</button>
But it is not centered.
And is there a way to just back the emoji image alone to be clickable for a method?
First off:
A <div> is a block element by nature. It will always become 100% wide. If you want it to not be 100% wide, give it a display:inline-block so it won't get bigger than it needs to be. Then give it a margin:0 auto; or a text-align:center on the parent to center it.
HOWEVER, You are not allowed to put <div>s inside of <buttons>. it is invalid HTML
See this answer for more information:
Why can't a <button> element contain a <div>?
Or, you could read here, from W3 that only phrasing content is expected to be used within a button:
https://www.w3.org/TR/2012/WD-html5-20120329/the-button-element.html#the-button-element
If you do not know what phrasing content is, See this page:
https://www.w3.org/TR/2012/WD-html5-20120329/content-models.html#phrasing-content
-- if you are looking into styling buttons specifically, maybe this very short tutorial would help:
http://web.archive.org/web/20110721191046/http://particletree.com/features/rediscovering-the-button-element/
Here is a fiddle of a working button like yours:
https://jsfiddle.net/68w6m7rr/
I honestly didn't have many problems with this. I only replaced your <div> with a span, that's it.
can you post your code?
You should NOT need a div inside the button. If you need the button to have a specific style give it a class. You could do something like this
CSS:
button.something {
padding: 25px;
border-radius: 100%;
font-size: 20px;
border: none;
}
HTML:
<button class="something">👌</button>
For clean and valid code, you'd better use a :before or :after pseudo-element. This would also take care of the centering by default.
It's even easy to set the content. Either in css only, like this:
1.
button:before {content:"\25b6";}
(put your unicode value there and classes/ids as needed, then specify them in turn in css)
2.
Or if you need to specify the value in mark-up, drop a custom data-* attribute like this:
<button data-myunicode="\25b6"></button>
with each button taking it's own value, then drop this single line in css:
button:before {content:attr(data-myunicode);}
Before answering, let's clear some things out.
div is a block level element, used in an inline element, which is the button element. Browsers will consider this invalid and will fix it by removing the block element from the inline element. For more about CSS concepts like box model, box generation please refer to these resources:
https://developer.mozilla.org/en/docs/Web/HTML/Block-level_elements#Block-level_vs._inline
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Visual_formatting_model
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
Also, if you are using an IDE, make sure you have installed linting/hinting tools to help you out. These tools can help you in code authoring so, make sure you have them. If you are using software like VSCode or Sublime Editor, there are many free code analysis tools out there.
Let's go back to the code now.
You said
I want to create a circle/round button with an emoji center to the
middle of the button despite the button's size or the emoji image's
size.
I went ahead and created a plunk here where I demonstrate this. Essentially, I wrapped the button around a div which serves as a container and through some CSS magic, I made it to have the same height as its width. More on that you can find at this SO answer.
The #emoji-button then has a border-radius: 100% in order to be round, width is inherited from the parent, meaning it has the same as the container and it position is absolute in order to fit in the container.
The #thumb-emoji has changed to a span element. By user agent styles it has text-align:center.
<div class="button-group">
<button type="submit" id="emoji-button">
<span id="thumb-emoji"></span>
</button>
</div>
CSS:
.button-group {
position: relative;
width: 100px;
}
.button-group:before {
content: "";
display: block;
padding-top: 100%;
}
#emoji-button {
width: inherit;
border-radius: 100%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#thumb-emoji:after {
content: "\01F44C";
font-size: 200%;
}
You can change the .button-group width to whatever width you want, it will still keep its 1:1 ratio.
You can use then media queries on .button-group to adjust the font-size of your #thumb-emoji, by setting your desired breakpoints.
I'm using Lightbox2: http://lokeshdhakar.com/projects/lightbox2/.
The plugin seems to have been written in a way that produces a 'flash' effect when navigating to a new image in a collection. I believe this is because the old image simply disappears, rather than fading out first or crossfading (this would be ideal) with the new image that is fading in.
For a demo of this flaw, just view the example on the Lightbox2 link above.
Is there a way to add some sort of fade out transition when the user advances to the next image? As a developer rather unskilled in JS, what could I add to the lightbox.js script that would allow me to achieve 100% smooth transitions between images?
I can't work out a way to fade out the image like you suggested, but I think this really helps to avoid the white flash between images.
In the lightbox.css file between lines 43 and 51, simply change the background colour to black, or something similar, basically meaning you'll get a black flash instead of white. If you still want a white border around the image, just add one here (You'll also need to remove lines 59 to 61). So you'll end up with this:
.lb-outerContainer {
position: relative;
background-color: black;
*zoom: 1;
width: 250px;
height: 250px;
margin: 0 auto;
border-radius: 4px;
border: 4px solid white;
}
Also, if you're not happy with the fade in speed, take a look at line 313 in the lightbox.js file.
Specifically on line 316, change ('slow') to a numerical value e.g. (800).
// Display the image and its details and begin preload neighboring images.
Lightbox.prototype.showImage = function() {
this.$lightbox.find('.lb-loader').stop(true).hide();
this.$lightbox.find('.lb-image').fadeIn('slow');
this.updateNav();
this.updateDetails();
this.preloadNeighboringImages();
this.enableKeyboardNav();
};
I need to make a see-through window when user click in a given position of the screen, something like this:
It is, I need to highlight an arbitrary area in the screen (with a fixed width and height) in the position where the user clicks.
I have two options:
Use a plugin to take screenshots (like these).
Create 4 grayed boxes.
I don't like none of these options for different reasons:
The use of these plugins exceds my needs and adds an extra page load time and undesired complexity.
Manage these boxes may be complex in a future and browser compatibility may be an issue.
So, my question is, is there any way to do this in a simple manner using HTML (HTML5 and canvas is ok), CSS and Javascript/Jquery? A specific Jquery plugin will be an option due I could forget the maintenance of this code.
I did this once, I am not sure everyone will agree with my implementation but it worked for me at the time:
Create a div in the location you want, set height and width (for window effect);
position the div in the place you wish and then just add outline to it.
body {
background-image: url(http://lorempixel.com/800/800/nature/5/);
background-size: cover;
}
.windowDiv {
position: absolute;
top: 100px;
left: 100px;
height: 300px;
width: 300px;
outline: 4000px solid rgba(0, 0, 0, 0.5);
}
<div class="windowDiv"></div>
EDIT: use background-color rather than opacity.
2nd EDIT: as A.Wolf suggested you should use outline instead of border for easier positioning.
I'm trying to create a textarea control in which it is possible to mention other users. The feature is pretty much similar to the one found in Facebook, and the implementation is similar too. When the user types an "#", a dropdown is presented from which a user can be selected which is then displayed with a highlight in the textarea. To be able to selectively render highlights in the textarea, I'm using an overlay div with the same text, but with span tags to create highlights.
The overlay has the same width, the same font and font-size, the same letter-spacing, same line-height, etc., to make sure all highlights will align properly with the text in the textarea. All the text in the overlay div, except for the highlights themselves, is transparent to avoid artifacts of rendering anti-aliased text over text.
This all works pretty well, except that when there is a mention highlight, the text in the highlight is somehow just slightly less wide than the text below it in the textarea, which causes a very slight mismatch. Worse, this small mismatch accumulates when there are multiple highlights, and it can sometimes cause a line to wrap in the textarea but not in the div, after which the whole illusion just falls apart.
I have verified that all text rendering options are exactly the same for the text in the textarea and in the overlay and in the highlights. All have equal font, font-size, letter-spacing, line-height, there's no margin, border or padding on the highlights, etc.. I have also looked in the WebKit Inspector to see if I might have missed any properties that could still affect text rendering, but couldn't find any. Simply put, I can't explain where this slight rendering difference comes from.
Please note that the rendering difference does not occur as long as the overlay doesn't contain any highlights.
I have also tried only rendering the overlay and not rendering the textarea at all (instead of having the overlay be transparent outside of the highlights), but this has the nasty side-effect that I won't see any cursor anymore.
Is there some CSS property that I still might have overlooked or is there some other reason why breaking the text into multiple spans would cause the total width of the text to slightly differ from an uninterrupted text node? Any suggestions would be greatly appreciated!
Update: For any others who might run into this problem, it's illustrated in the following jsfiddle: http://jsfiddle.net/brt8w85z/5/
<style type="text/css">
.parent {
text-rendering: optimizeLegibility;
position: relative;
}
textarea {
border: 0;
color: #000;
resize: none;
}
.overlay {
color: transparent;
pointer-events: none;
}
textarea,.overlay {
font-family: Helvetica,sans-serif;
font-size: 12px;
left: 10px;
letter-spacing: normal;
margin: 0;
padding: 0;
position: absolute;
top: 10px;
width: 200px;
}
.highlight {
background-color: #00f;
color: #fff;
}
</style>
<div class="parent">
<textarea>Tom Kleijn, Mark van der Velden and Arend van Beelen</textarea>
<div class="overlay"><span class="highlight">Tom Kleijn</span>, <span class="highlight">Mark van der Velden</span> and <span class="highlight">Arend van Beelen</span></div>
</div>
The problem can be fixed by adding "text-rendering: geometricPrecision" to the "textarea,.overlay" rule.
Seems I have found the solution myself: On the body there's a definition of "text-rendering: optimizeLegibility". Setting this back to "text-rendering: geometricPrecision" on the textarea fixed the problem. The reason this was not obvious before was because the WebKit Inspector did not show the inherited text-rendering on the textarea, even though it does so for (most?) other inherited properties.
I am guessing no, but it would be really sweet to be able to set the z-index of the cursor with CSS or Javascript.
Let's say you've got some buttons and you want to add a semi-transparent image on top of the buttons for effect. Or in my current case, some SVG paths that have hover and click actions. If I could set the button or SVG z-index to 0, my cursor's z-index to 1 and the image overlays z-index to 2, that would be pretty sweet! The mouse would be going under the overlay and still be able to click on the buttons. It would be even more spectacular to set the visual z-index (which layer the cursor appears to be), separate from the effective z-index (which layer the cursor actually is). So the cursor could appear to be on top of the overlay, but still be able to click on the buttons underneath.
I have my doubts, but I thought I would check if anyone has heard of someone doing this or something like it.
Since no answer has been accepted, I want offer the right answer.
The pointer-events: none is the solution.
See simple CSS example:
.emotion_message {
pointer-events: none;
background-color: rgb(144,238,144,0.5);
height: 20%;
width: 94%;
position: absolute;
top: 40%;
color: darkgreen;
padding: 1%;
text-align: center;
border-radius: 10px;
margin-left:3%;
margin-right:3%;
}
In this example, I wanted to display a chart, with a static summary box over the top, but I wanted the cursor to interact with the chart underneath. I also added opacity to the background-color, so the user can both see and interact with the submerged element (in this case the chart). Now the user sees the box, but the cursor does not.
Thanks #FabricioMatte for this answer in the comments.
You can play with the cursor:none;
See a related Q: Is it possible to put the mouse cursor behind an element or does the mouse cursor have an z-index?
There is no such thing as a cursor z-index.. what you can do is have a jQuery hover function that gets the object that the cursor is hovering over, which in return allows you to find the objects z-index. So really instead of wanting a cursor to have z-indexes, just have hover states.
Then have custom cursors depending on location. Which as everyone is saying cursor:none would be fun to play with for this. Say you want to go under a alpha block, you could just render a cursor under that alpha block to get the effect of the cursor being under it.