Below is the CSS and HTML for the custom cursors I have, when I apply the classes to divs the cursors do not show.
If anyone wants to take a look at the SVG file as well I've linked it here
* {
cursor: url(../assets/cdefault.svg), auto;
}
.noclick {
cursor: url(../assets/cno.svg), 8 8, move !important;
}
.select {
cursor: url(../assets/cselect.svg), auto !important;
}
.text {
cursor: url(../assets/ctext.svg), 8 8, move !important;
}
.itemtext {
width: 40vw;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 12px;
color: white;
}
.item {
width: 40vw;
padding: 12px;
display: flex;
flex-direction: column;
align-items: center;
border-style: solid;
border-width: 0.1rem;
background-color: black;
border-color: white;
border-radius: 10px;
transform: scale(1);
}
.item img {
width: 40vw;
border-radius: 0.4rem 0.4rem 0rem 0rem;
}
<div class="item noclick" onclick="window.location = '/example/unavailable';">
<img class="noclick" src="example/example.png">
<div class="itemtext noclick">
<p class="title noclick">example<span> - example</span></p>
<p class="date noclick">example</p>
</div>
</div>
To clarify, the global cursor cdefault.svg, does show across the whole page, in this example the noclick class does not want to appear when hovering over the specified elements.
EDIT
Just as clarification, my cursors are all 16x16px and have worked when applied to classes individually. I have also tried using PNGs instead of SVGs but has not changed anything.
Please make sure the svg files are within 32 x 32px which is the size limit for most browsers. Otherwise the browser ignores your custom cursor file. There are similar answers for example here
Figured out what I was doing wrong! I shouldn't have been placing the comma after the svg url. Below is the fixed CSS
.noclick {
cursor: url(../assets/cno.svg) 8 8, auto;
}
Related
I'm trying to create a responsive navbar where each item gets its' background highlighted (color change to higher saturation) on hover. However, only the link text gets highlighted.
I'm using a flexbox container with evenly distribution, plus a logo with margin-right:auto so it stays fixed at the left side.
What I want is getting the whole space (as seen in the dev console
) highlighted on hover. After digging around, I believe that area highlighted using the dev-console is the margin, thus the question title.
I figured it out using padding but it looks sketchy, it jumps around so it's far from ideal.
Here's my code:
* {
margin: 0;
padding: 0;
}
.top-nav {
background-color: rgb(148, 174, 186);
height: 120px;
display: flex;
justify-content: space-evenly;
}
.logo {
height: 100px;
margin-right: auto;
}
.nav-links {
font-family: 'Montserrat';
font-style: bold;
text-align: center;
margin: auto;
font-size: 45px;
color: white;
text-decoration: wavy; //don't mind this, just how I managed to clear the links default styling
height: auto;
}
.nav-links:hover {
background: rgb(39, 136, 180);
color: black;
}
<div class="top-nav">
<a class="logo-link" href="index.html"><img class="logo" src=img/Logotipo.png> </img>
</a>
<a class="nav-links" href=m y-bio.html>MY BIO</a>
<a class="nav-links" href=e xperience.html>EXPERIENCE</a>
<a class="nav-links" href=projects.html>PROJECTS</a>
<a class="nav-links" href=hire-me.html>HIRE ME!</a>
</div>
I was thinking about making the links into divs but I'm afraid it will end up with the same result.
You can't add a background colour to a margin value, that isn't possible. If you want it to be in the links add the following to your .nav-links class:
.nav-links {
padding: 1rem;
transition: .2s;
}
If you want the menu items to fill the full height of the parent element with the same effect you can do:
.nav-links {
height: 100%;
display: flex;
align-items: center;
padding: 0 1rem;
transition: .2s;
}
I'm not quite sure I know what you wish to achieve though.
Can someone help me with the following progress element of Element UI library:
Element UI - Progress link
I'm trying to reach for this result:
put the value at the end of each bar
Currently, having this:
with the following code:
HTML:
<el-progress :text-inside="true" :percentage="item.value" color="#6A7EC7" :stroke-
width="12"></el-progress>
CSS:
.el-progress-bar__outer {
background-color: transparent;
}
I've tried to do put the text div as relative like the following:
>>> .el-progress-bar__innerText {
color: $color-tremor-black;
position: relative;
left: 30px;
}
But the text is being cut when the value is close to the end.
What I'm missing? need to do?
Thank you.
I've decided to remove this component and build my own progress bar by using div and CSS.
Like the following:
HTML
<div class="newProgress">
<div class="progressBar" :style="{width:`${item.value}%`}"></div>
<span class="newProgressValue">{{item.value}}%</span>
</div>
CSS
.newProgress {
display: flex;
flex-direction: row;
width: 400px;
}
.progressBar {
width: 80%;
margin: 3px 0px 0px 10px;
background: #6A7EC7;
border: 1px solid #6A7EC7;
height: 12px;
border-radius: 50px;
}
.newProgressValue {
padding-left: 5px;
font-size: $font-size-small-plus;
}
I've couldn't find some information about Element UI library and its styles.
So I'm trying to make custom slider that's cross browser (IE11, Chrome, Firefox, Edge) that's also a11y accessible and I'm having trouble getting the label element to respond to space bar for selection like a natural checkbox. I can do it easily with code of course but was curious if there's maybe something I'm missing with just the html/css I could do to accomplish the same thing.
As example see below, tabindex of course provides the visual and tabbing, but I can't seem to get the label to toggle it like a click would on label element. Should I just go the easy route and let some code handle it or does someone want to teach me something? Cheers!
// not yet, and yes I know I haven't added the aria attributes etc, it's just a quick PoC :)
main {
display: block;
margin: 0 auto;
padding: 2rem;
width: auto;
}
.slide-toggle {
margin: 0 3rem;
display: inline-block;
}
.slide-toggle:last-of-type {
margin-left: 0;
}
.slide-toggle input {
display: none;
}
.slide-toggle input:checked ~ label {
color: #fff;
background-color: skyblue;
}
.slide-toggle input:checked ~ label:after {
transform: translateX(100%);
}
.slide-toggle label {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
position: relative;
padding: .25rem 0;
cursor: pointer;
user-select: none;
border: #bbb 1px solid;
border-radius: 3px;
}
.slide-toggle label:after {
display: block;
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 45%;
margin: .25rem;
border: #bbb 1px solid;
border-radius: 3px;
background-color: #ddd;
transition: transform 0.25s cubic-bezier(0.6, 0.82, 0, 0.76);
}
.slide-toggle label:focus {
box-shadow: 0 0 0 8px red;
}
.slide-toggle label:hover {
border-color: #777;
}
.slide-toggle label div {
flex-grow: 1;
flex-basis: 50%;
flex-wrap: nowrap;
text-align: center;
min-width: 1rem;
margin: .25rem 1rem;
}
<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet"/>
<main>
<h2>Please click a slide toggle for example;</h2>
<div class="slide-toggle">
<input id="guidLater"
type="checkbox"/>
<label for="guidLater"
tabindex="0"
role="checkbox">
<div>YES</div>
<div>NO</div>
</label>
</div>
No Translation Option:
<div class="slide-toggle">
<input id="guidLater4"
type="checkbox"/>
<label for="guidLater4"
tabindex="0"
role="checkbox">
<div><i class="fas fa-check" style="color:green"></i></div>
<div><i class="fas fa-times" style="color:red;"></i></div>
</label>
</div>
</main>
Without getting too far into the specifics, as there are many, I'll just attack this from a pure solution perspective and provide some insight.
With HTML5 elements, the idea is that they have functionality assigned to them by default. For example, a checkbox inherits the behaviors that a checkbox should have because it's a default element. You also shouldn't be re-purposing elements for other uses if native ones are available as this breaks the first two rules of ARIA.
If you can use a native HTML element [HTML51] or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.
And
Do not change native semantics, unless you really have to.
The input types of Range (a slider) and Checkbox have two vastly different sets of keyboard behaviors, so i'm not surprised that this isn't working correctly.
I think what you mean to create is a "switch"
You shouldn't have display: none on the actual checkbox. You need to visually hide it, but still have it on the page because only then it would catch the space key press.
An easy (& suggested) way to do that is
.slide-toggle input {
width: 0;
height: 0;
}
also you don't need to have role="checkbox" and tabindex on the label.
I show/hide a container with boxes inside as showed below.
I use a simple mechanism with toggleClass to show/hide the container.
$("#btn").click(
function () {
$("#switch-apps-panel").toggleClass('flex-apps-panel');
}
);
The problem is I had to use the important attribute on the css and I prefer to avoid it.
.flex-apps-panel {
display: flex !important;
}
Any help on slightly changing my code to avoid using the important attribute ?
jsFiddle: https://jsfiddle.net/hg60e8gf/
You defined switch-apps-panel as an ID. IDs are always higher ranked and more specific than class names.
In order to get rid of your !important statement, either change the ID to a class or make your selector more specific and add the ID selector to your .flex-apps-panel like this:
#switch-apps-panel.flex-apps-panel {
display: flex;
}
Here I changed it to be a class:
$(document).ready(function() {
$("#btn").click(
function() {
$(".switch-apps-panel").toggleClass('flex-apps-panel');
}
);
});
.switch-apps-panel {
display: none;
z-index: 9999;
position: fixed;
top: 70px;
left: 10px;
background-color: white;
border: 1px solid #b6b6b6;
box-sizing: content-box;
box-shadow: 0 1px 15px rgba(0, 0, 0, .4);
padding: 10px 10px 10px 10px;
}
.flex-apps-panel {
display: flex;
}
.box-1 {
margin: 8px;
width: 100px;
background-color: yellow;
}
.box-2 {
margin: 8px;
width: 100px;
background-color: blue;
}
.box-3 {
margin: 8px;
width: 100px;
background-color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
By default, boxes are hidden.
<button id="btn">Click here to show/hide boxes</button>
<div class="switch-apps-panel">
<div class="box-1">
<span>First</span>
</div>
<div class="box-2">
<span>Second</span>
</div>
<div class="box-3">
<span>Third</span>
</div>
</div>
You need to increase your selector's specificity. ID selectors have higher specificity than class selectors, so you can just try to select your ID with class like this:
#switch-apps-panel.flex-apps-panel {
display: flex;
}
You can read more about specificity on MDN, and also try to avoid styling by IDs in the future.
i try to put a button under a text using css but i tried different solutions (, white-space: pre-wrap;..) but nothing changes i'm getting the button ( OK ) near the text .
Here's the code:
CSS:
/* Styles for game Help popup */
#popupHelp {
font-family: 'Orbitron', serif;
font-size: 20px;
font-weight: 600;
text-shadow: 0px 1px 2px #fff;
color: #222;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0,0,0,.5);
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
-webkit-transition: all .5s ease-in;}
#popupHelp h1 {
font-weight: 400;}
#popup-box {
width: 400px;
height: 400px;
background: #ccc url(../images/popup_bg.jpg);
border-radius: 10px;
position: relative;
-webkit-box-shadow: 0 5px 5px #333;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
-webkit-transition: all .5s ease-in;}
#popup-box small {
font-size: .6em;}
/* the type of OK button */
#popup-box a.buttonOk {
background: white;
border-radius: 5px;
display: inline;
font-size: 30px;
margin: 230px auto 0;
padding: 10px;
width: 150px;
border: 3px solid #006438;
color:#006438;
text-decoration:none;}
#popup-box a.buttonOk:hover {
background: #006438;
color:#fff;
text-decoration:none;}
HTML:
<section id="popupHelp" class="hide">
<div id="popup-bg"></div>
<div id="popup-box">
Cards are laid out in a grid face down,
and players take turns flipping pairs of cards over.
On each turn, the player will first turn one card over,
then a second. If the two cards match,
the player scores one point,
the two cards are removed from the game,
and the player gets another turn.
If they do not match, the cards are turned back over.
<div> <p><a id="ok" class="buttonOk" href="">OK</a></p
</div>
</div>
</section>
Any idea please thank u in advance
Quick glance the easiest option seems to be to simply move the button outside of the popup-box div.
<section id="popupHelp" class="hide">
<div id="popup-bg"></div>
<div id="popup-box">
Cards are laid out in a grid face down,
and players take turns flipping pairs of cards over.
On each turn, the player will first turn one card over,
then a second. If the two cards match,
the player scores one point,
the two cards are removed from the game,
and the player gets another turn.
If they do not match, the cards are turned back over.
</div>
<div><p><a id="ok" class="buttonOk" href="">OK</a></p>
</div>
</section>
Did you try taking out the <div>?
also you're missing a ">" at the end of the
<p><a id="ok" class="buttonOk" href="">OK</a></p>