I need to hide the focus outline when I click on a link.
But i also need to show it when I slide links with tabindex.
Some websites doing this with any specific workaround.It seems that is the dafault behaviour.
But in my website, when I click on a link it shows also the outline.
How can I show he outline only when I slide links with tabindex key?
Thanks in advance.
Helmut
If the tab behaviour is specifically what you need to detect when adjusting the CSS outline property, I don't believe CSS can ascertain the input device type from the such states as :focus or :active.
Instead, you could hide the outline for all elements on the page with CSS:
a:focus, a:active {
outline:0;
}
a.tabbed {
outline:1px solid red;
}
Then you'd to use JavaScript to adjust the outline for certain elements that receive focus with the tab key.
document.addEventListener('keyup', function (e) {
var code = e.keyCode ? e.keyCode : e.which;
var el = document.activeElement;
if (code == 9 && el.tagName == 'A') {
el.className = "tabbed";
}
}, true);
I've added a quick example: http://codepen.io/anon/pen/aljsu
Related
By adding :
.scroll {
-webkit-user-select: text !important;
-moz-user-select: text !important;
-ms-user-select: text !important;
user-select: text !important;
}
I can select text on desktop browsers except on IE.
I figure out that when I comment my import :
//require('ionic-npm/js/ionic');
On IE I can select text but I need ionic so I can't comment that line. Also I don't what to touch to ionic.js.
Do you have any idea?
I found an answer here:
forum.ionicframework: How to make text selectable?
Link: Original forum Post
Are you referring to using this technique on mobile or desktop?
On mobile it still seems to be working for me, but If it isn't working for you on desktop, that might be because it doesn't work if the user can use their mouse to click-and-drag to scroll the page. To disable this type of scrolling you can either enable overflow-scroll on your content:
<ion-content overflow-scroll="true">
Or you can disable the mouse click-and-drag-to-scroll events by further changing ionic.js like so...
Add 'return;' to the beginning of this mouseDown function:
self.mouseDown = function(e) {
if ( ionic.tap.ignoreScrollStart(e) || e.target.tagName === 'SELECT' ) {
return;
}
self.doTouchStart(getEventTouches(e), e.timeStamp);
if( !ionic.tap.isTextInput(e.target) ) {
e.preventDefault();
}
mousedown = true;
};
So that it looks like this:
self.mouseDown = function(e) {
return; // <--- This disables all mouseDown events from scrolling the page
if ( ionic.tap.ignoreScrollStart(e) || e.target.tagName === 'SELECT' ) {
return;
}
self.doTouchStart(getEventTouches(e), e.timeStamp);
if( !ionic.tap.isTextInput(e.target) ) {
e.preventDefault();
}
mousedown = true;
};
This change makes it so you can still use the ionic scroll features with your mouse wheel, but disables mouse click-and-drag scrolling so that you can use your mouse to select text.
i am working on this Wordpress website and as you can see is a one scroll landing page. Every section as an id and this class id is connected to the navigation points like this
Example:
http://ergon.nowcommu.myhostpoint.ch/home/#idee
What i need is to highlight the active navigation point when you scroll with the mouse on the sections and when you click on the navigation on the relative link.
How can i do it?
Your website has already been built with functionality that changes the class of the menu item once it's content/counterpart is in the viewport of the end user.
If you inspect the element, you will notice that the a tags in your menu receive a class .mPS2id-highlight when their content counterparts are in view.
Thusly, you can simply add a CSS rule to achieve your goal.
I've tested the rule below in firebug on your website and it seems to work fine (the !important was necessary):
.mPS2id-highlight {
color: #b51339 !important;
}
If you would like to keep your border functionality, you can use the following rules instead:
.cssmenu > ul.menu > li:hover {
border-bottom: 0 solid;
}
.mPS2id-highlight {
border-color: #b51339 !important;
color: #b51339 !important;
}
You need declare the highlight with javascript particularly you do with jquery in custom code de your wordpress with something like this:
$(document).on("scroll", onScroll);
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
also you look at the console of the browser because it have an error in your page
How do I achieve something like this:
*:hover{
background-color:lightblue;
}
I am trying to change background color of any element on the page when hovering on the element. Not sure why it doesnt work.
It works fine http://jsfiddle.net/mendesjuan/9pta8vbz/
The problem is that it's highlighting the entire body since the mouse is over the body, so you don't see highlighting on children any differently.
The following example should clarify it http://jsfiddle.net/mendesjuan/9pta8vbz/1/ It will highlight items inside the body
CSS
body *:hover{
background-color:lightblue;
}
HTML
<p>1 <span>inside</span></p><p>2</p><p>3</p>
It will highlight the paragraphs, but the span will behave the same way since the paragraph will also be highlighted
What you are doing cannot be done with CSS alone, you can use JS to add a CSS class to the element that the mouse is over http://jsfiddle.net/mendesjuan/9pta8vbz/2/
CSS
.highlight {
background-color:lightblue;
}
JavaScript
// This is a simplified version that doesn't take care of edge cases
// known bugs: should use addEventListener, should not wipe out existing `className`,
// e.target is not 100% cross browser, but those are other topics
document.onmouseover = function(e) {
e.target.className = 'highlight';
}
document.onmouseout = function(e) {
e.target.className = '';
}
I was browsing other user questions a few minutes ago.. and it led me to trying to change the hover color of the hyperlink on mouse over of my image map.
Any idea how I might accomplish this for the 1 hyperlink I have up?
http://www.urlgone.com/d7ccf8/
You're using jquery as i can see.
So do something like that:
<script>
$(document).ready(function() {
$("area[shape='poly']").mouseover(function() {
var id = $(this).attr('id');
$('a.staffs').removeClass('active'); //make other link not ative
$('a.staff-' + id).addClass('active');
}).mouseout(function() {
$('a.staffs').removeClass('active');
});
});
</script>
And CSS (you have to change it to your style):
<style>
.active {
color:red;
text-decoration:underline;
}
</style>
A friend and myself are trying to workaround IE (7/8). We have built a canonical example here:
http://www.mathgladiator.com/share/ie-select-bug-hover-css-menus.htm
Using a CSS menu, we would like to have selects in them. However, in IE, the menu goes away when you interact with the select box. We believe this has to do with a bug in how selects affect events.
Is there a workaround? At least with pure CSS or DOM hacks?
I do not think there is a pure CSS way around this. This is due to a very common bug to the way IE handles events on select elements.
You can however work around it with Javascript:
<script type="text/javascript">
$(document).ready(function () {
$('.nav_element a').mouseover(function() {
$('.submenu').hide();
$(this).parent().find('.submenu').show();
});
$('.submenu').mouseover(function() {
$(this).show();
});
$('.submenu').mouseout(function (e) {
// Do not close if going over to a select element
if (e.target.tagName.toLowerCase() == 'select') return;
$(this).hide();
});
});
</script>
The code above uses jQuery.
Here is a way to improver select behavior in IE7/8, but it does not fix the issue
Change DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Add script
<script>
function ddlOut(e) {
setTimeout(function() { e.className = e.className.replace(' over', ''); }, 1000)
}
</script>
Add css
#nav .over div.submenu
{
display: block;
}
#nav .nav_element{
behavior: expression(
this.onmouseover = new Function("this.className += ' over'"),
this.onmouseout = new Function("ddlOut(this)"),
this.style.behavior = null
);
}
It will work better at least but of course not perfect.
My advice is to change select control to html equivalent. I use OboutDropDown that has a nice view. There are many implementations that can suite you needs.
First you need to expand the :hover surface underneath your menu.
So in your css add width:310px;height:220px to #nav .nav_element a.
(also add a class or an id on the second div styled with top:220px)
Now you just need to simulate a mousedown triggered when you click on the select which will halt when the selection between the options is done - you can probably do the last part if you check for the onfocus state of the select which will stop the mousedown.