outline behaviour while focus on click and focus on tab - javascript

I got CSS or jQuery/JavaScript question.
I set on many elements tabindex="0" because I need to provide tabbing through page, but I'm wondering why on pages like stackoverflow.com or developer.mozilla.org when I click by mouse I can't see outline on focus, but on my page when I click by mouse I can see outline.
Are they really setting some jQuery/JS preventing showing outline or maybe there is some good way of setting outline in css to prevent showing it?
Edit:
1. Elements on my page should have outline when user is tabbing through page by tab key,
2. Elements on my page should not have outline when user is clicking on elements by mouse

You Can Use
input,button,textarea,-----{
outline: 0; //or outline: none;
} (OR)
// Create One Class With Above Property ,Give That Class To Particular Html Element Like Below ,
.className{
outline: 0; //or outline: none;
}

Related

I am looking for more options / information for the HTML attribute: "contenteditable = 'true'" and the javascript: "focus()" function

I would like to learn more about the "HTML contenteditable =' true '" attribute and the javascript focus () function.
For example, I would like to know how I can influence the position of the focused line or how to edit the background of a focused line.
I have already googled some things but I can't find the right information.
Does anyone have a good tip?
You can check which element is on focus by writing in the Google Chrome console:
document.activeElement
The contenteditable attribute specifies whether the content of an element is editable or not.
If you want to trigger the focus on a contenteditable element you can do it by:
$(".contenteditableClassName").focus();
Any other background change on this element is done by CSS for example you can use
.no-touchevents &:hover, &:focus, &:active {
border-color: white;
color: blue;
You can apply different changes on the element on focus this way.
Also you can remove the focus border on click by using:
.pointer-focus &:focus {
outline: none;
}

How to disable the cursor but not only visually? [duplicate]

This question already has answers here:
How to completely DISABLE any MOUSE CLICK
(5 answers)
Closed 5 years ago.
I want to hide the cursor until my function is done but I can't find how to disable it. I mean I have found how to hide it and show it but when it's hidden I can still click So how to disable it?
window.document.styleSheets[0].insertRule('* {cursor: none;}', window.document.styleSheets[0].cssRules.length);
Meteor.call("lockTheMachine", machine.nameMachine, Session.get("loggedUser"), function(err, res) {
if (!err) {
Session.set("lastMachineUsed", machine.nameMachine);
window.document.styleSheets[0].insertRule('* {cursor: default ;}', window.document.styleSheets[0].cssRules.length);
} else {
console.error(err);
}
});
}
There's a CSS property for that called pointer-events.
The CSS property pointer-events allows authors to control under what circumstances (if any) a particular graphic element can become the target of mouse events.
In addition to indicating that the element is not the target of mouse events, the value none instructs the mouse event to go "through" the element and target whatever is "underneath" that element instead.
If you were to disable any click interaction on your whole site you could simply add:
body.block { pointer-events: none; }
And trigger the class .block programatically via Javascript.
You can solve your problem by simply adding the following style in your CSS file.
button {
pointer-events: none;
}
The problem with this is that the button is not clickable but the cursor is still displayed when you hover on the button.
To overcome this problem you can add "disable" attribute to the button and add the following CSS.
button {
cursor: not-allowed; // or cursor: none;
}
When you add the css "cursor": "not-allowed" or "none" to a input type or a button, the button is still clickable. For doing the input type or button non clickable you have to add "disable" attribute.
A disabled input element is unusable and un-clickable. The disabled attribute can be set to keep a user from using the element until some other condition has been met (like selecting a checkbox, etc.). Then, a JavaScript could remove the disabled value, and make the element usable.
But when you using bootstarp library, when you disabled a button or input type, then you can't see any cursor when hover onto that element. At the newest bootstrap library, we can find this rule:
.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
pointer-events: none;
cursor: not-allowed;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
opacity: .65;
}
So I assume that bootstrap tried to implement the cursor: not-allowed for disabled buttons, or input's.
So for doing this you have to overwrite the bootstrap class for it.
But it works fine when you don't link bootstrap library in your html.
e.g.:
HTML code:
<button class="disabled-button" disabled>
I am disabled and not clickable too
</button>
CSS code:
.disabled-button {
cursor: not-allowed;
}
or you can trigger ".disabled-button" class programmetically by javascript to unclickable it.

Remove dotted border from dialog box when click on it

I have this problem :
I have a dialog box that I open through JQuery and everithing goes fine, but when I click on it, a thin dotted line appears around the div that contains the dialog box (I have two buttons so this append every time). I would like to remove this line via Jquery or Css, it doesn't matter, I just don't want it to shows.
I think i have to override some css class from dialog box, but I can't figure out wich one.
Thanks.
I guess you can use CSS:
.button-selector {
outline: none;
}
Ok, thanks to your advice I managed what I want.
I've just to set
.ui-widget-content {
outline: none;
}

How to remove the border around image appearing after clicking on the image in Google Chrome?

Actually I'm using a plugin SpryTabs to navigate the menu. I've used two background-images for activating and deactivating of tabs. I'm activating a tab on hover. Means the tab gets highlighted and deactivate the selected tab on clicking other tab.
Until here everything is fine. But the real problem comes when user clicks on the tab after hover, the border gets displayed around the image.
This doesn't happen in Firefox, it happens only in Chrome and IE.
You can add the following code in CSS for specific elements
textarea:focus, input:focus{
outline: none;
}
And for all elements on a page use this generalized code in your css
*:focus {
outline: none;
}
This worked for me when there was an orange coloured border appearing around the images and input boxes.
Try outline: none; on the images
Had same issue once, following style fixed problem:
outline: 1px solid transparent;
Btw outline:none has no effect for chrome for some reason
Useoutline:none or outline:0
Check the similar one here

How to display file browser from click on text and have mouse cursor change to pointer when hovering text

I'm trying to display a file chooser when a user clicks a link on my page. I've looked around a bit, but still haven't found a complete solution.
I have ruled out binding a listener to the click event on my link and simulating the click event on my form's file field because I've read that Safari doesn't support programmatically clicking on an input[type=file].
Currently I am using the approach where I set the opacity of the file field to 0 and absolute position it over the top of the link, effectively intercepting any clicks on the link. The problem with this is that I can't figure out a way to change the user's cursor when they hover the link since it is obscured by the file input, which doesn't allow for such styling. I have given all immediate parent elements the css style cursor: pointer, but still no luck.
Does anyone have an idea of a different approach I could take in order to get the cursor to change to a pointer on hover of my link? Is my best bet going to be going with something like they have at http://www.uploadify.com/?
EDIT
To explain a little better, I have this file input on my page:
<div class="logo_file">
<input id="logo_file_field" type="file">
</div>
With this css:
.logo_file {
position: absolute; /* this element's parent has position: relative */
top: -65px;
left: 0;
width: 175px;
overflow: hidden;
cursor: pointer;
}
input#logo_file_field {
opacity: 0;
-moz-opacity: 0;
filter: alpha(opacity=0);
cursor: pointer;
}
And I am trying to show the file chooser corresponding to that field when the user clicks this link:
<div class="logo_link_wrap">
<a id="logo_change_link">Change Photo</a>
</div>
Which has this css:
.logo_link_wrap {
margin-top: 38px;
cursor: pointer;
}
Right now I am placing the invisible file field over the link, but the cursor is not turning into a pointer like it should when you hover over a link. The file chooser does display, it's really only the cursor not changing that is holding me up. Thanks
The problem is that you are placing the input field over the link and making the input field invisible by using opacity:0;. But the input field is still there and is blocking the cursor access to the link.
Would it not be better to replace the opacity with display:none?
With display:none you hide the input field and remove it from the flow. I'm assuming that you want the link to be used to active the upload function of the input field, and I'm also assuming that you know how to do that.
Try wrapping the input tag in an anchor tag
<input type="file" ... />

Categories