I would like to know if there is a way to remove the "tooltip" (I don't know if is the right name for that element) that appears at the bottom-left of the screen when I stop the mouse cursor on a link.
I've taken this screenshot from my google search result page. As you can see the first site is underlined because the cursor is on it (you can't see the cursor because when I take a screenshot it disappears). The tooltip I'm talking about is the one at the bottom-left of the screen, surrounded by the smaller red rectangle.
I couldn't find any information about this element and, honestly, I don't know if it can be removed changing some browser setting.
I'm currently using Firefox and Chrome but I'm looking for a general solution.
Thank you in advance for your help.
you could do it in older browsers, which would hide the status bar.
But to switch it off manually you could put this script in page somewhere...it removes href tag attaches onclick event listener...
$("body").on('mouseover', 'a', function (e) {
var $link = $(this),
href = $link.attr('href') || $link.data("href");
$link.off('click.chrome');
$link.on('click.chrome', function () {
window.location.href = href;
})
.attr('data-href', href) //keeps track of the href value
.css({ cursor: 'pointer' })
.removeAttr('href'); // <- this is what stops Chrome to display status bar
});
You can replace the anchor tag with a button that when clicked executr a javascript function that links to your requested page
window.location.href = /route
Most modern browsers don't allow you to access the status bar to prevent phishing attacks. You can try this javascript but most likely it will be incompatibly with a majority of browsers:
<script language="javascript" type="text/javascript">
function hidestatus(){
window.status='';
return true;
}
if (document.layers)
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT | Event.MOUSEDOWN | Event.ONCLICK | Event.MOUSEMOVE | Event.MOUSEUP);
document.onmouseover=hidestatus;
document.onmouseout=hidestatus;
document.onclick =hidestatus;
document.onmousemove=hidestatus;
document.onmouseup=hidestatus;
document.onmousedown =hidestatus
</script>
Related
when a user clicks on a featured snippet in Google search results, the text element is highlighted by a text fragment. The browser address looks like example.com/landing-page#:~:text=Start%20of%20fragment%20an,End%20of%20fragement.
I now want to detect with JavaScript if a user visits the page with a highlighted text.
I already tried window.location.hash and document.URL but the value after # is not part of the result.
Is that possible with pure JS?
As far as I know, there is no clean and reliable way to do this.
But it's simple to remove this text-fragment hash and highlighting (in typical cases). All what you need is this:
if(/\.google\....?\/$/.test(document.referrer)) {
location.hash= "top";
history.pushState({}, "", location.pathname);
}
Detection of text-fragments is possible in cases, where the target text is "below the fold" and therefore the page scrolled down to make it visible. Example code:
onload= function() {
if(scrollY) {
alert("page has scrolled down likley because of text-fragment link");
// do what you need here
}
}
As an ugly hack, you can force this scrolling by moving all content below the fold and resetting afterwards. Something like this (code has room for improvement):
if(/\.google\....?\/$/.test(document.referrer) {
// add margin to <body> - move content down to force scrolling
document.body.style.marginTop= "111vh";
onload= function() {
if(scrollY) {
alert("page has scrolled down likley because of text-fragment link");
// do what you need here
}
// reset margin
document.body.style.marginTop= "";
}
}
When using a touchscreen, pressing / pressing holding on href links tags shows a tooltip box with the site address, I cant figure out how to remove this. Does anyone have an idea about this? it only happens in IE and Edge, chrome and Firefox do not experience this issue
investigated event listeners, but no listeners show an event pointing to this
I would be very happy if someone other than me has experienced this and maybe has a fix, its kinda a showstopper for a POS system.
You could try setting title to empty string ( or perhaps just space). title is used for built in tooltip text
var links = document.querySelectorAll('a');
for(var i=0; i < links.length; i++){
links[i].title = ' ';
}
Simple jQuery can do the trick, let's mess with the title property.
$(document).ready(function(){
$("a").removeAttr("title");
});
//
$(document).ready(function(){
$("a").attr("title", "");
});
// Hide tooltip on hover, and restore when hover-off
$(function() {
$('a').hover(function(e) {
$(this).attr('data-title', $(this).attr('title'));
$(this).removeAttr('title');
}, function(e) {
$(this).attr('title', $(this).attr('data-title'));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Hover over me
I've spent quite a while trying to find answers for this issue, but haven't had any success. Basically I need to scroll the user to the contact portion of the website when they go to healthdollars.com/#contact. This works just fine in Safari, but in Chrome I haven't had any luck. I've tried using jQuery/Javascript to force the browser to scroll down, but I haven't been able to.
Does anyone have any ideas? It's driving me crazy - especially since it's such a simple thing to do.
Not a full answer but in Chrome if you disable Javascript I believe you get the desired behavior. This makes me believe that something in your JavaScript is preventing default browser behavior.
It looks to me like the target element doesn't exist when when page first loads. I don't have any problem if I navigate to the page and then add the hash.
if (window.location.hash.length && $(location.hash)) {
window.scrollTo(0, $(location.hash).offset().top)
}
check for a hash, find the element's page offset, and scroll there (x, y).
edit: I noticed that, in fact, the page starts at #contact, then scrolls back to the top. I agree with the other answerer that there's something on your page that's scrolling you to the top. I'd search for that before adding a hack.
You can do this with JS, for example` if you have JQuery.
$(function(){
// get the selector to scroll (#contact)
var $to = $(window.location.hash);
// jquery animate
$('html'/* or body */).animate({ scrollTop: $to.offset().top });
});
The name attribute doesn't exists in HTML 5 so chrome looks to have made the name attribute obsolete when you use the DOCTYPE html.
The other browsers have yet to catch up.
Change
<a name="contact"></a>
to
<a id="contact"></a>
Maybe this workaround with vanilla javascript can be useful:
// Get the HTMLElement that you want to scroll to.
var element = document.querySelector('#contact');
// Stories the height of element in the page.
var elementHeight = element.scrollHeight;
// Get the HTMLElement that will fire the scroll on{event}.
var trigger = document.querySelector('[href="#contact"]');
trigger.addEventListener('click', function (event) {
// Hide the hash from URL.
event.preventDefault();
// Call the scrollTo(width, height) method of window, for example.
window.scrollTo(0, elementHeight);
})
I'm making my IFrame to be fullscreen, I want to make DOM Elements in Parent disable [on tabbing] using javascript. Any Idea?
thanks in advance
I think the scenario is very similar to content pop-overs (lightboxes), where you want it to:
Move the keyboard focus to the top of the iframe.
Keep the keyboard focus in the iframe.
To move the keyboard focus into the iframe use a proper link (with href) and trigger:
$("#myIframe").attr("tabindex", "-1").css("outline", "0");
$("#myIframe").focus(); // separate line to ensure the tabindex is applied first.
To keep the focus in the iframe, find the first and last elements and loop them around:
(function(){
var firstLink = $("#myIframe a:first").get(0);
var lastLink = $("#myIframe a:last").get(0);
$(firstLink).keydown(function(e) {
// if you shift-tab on first link, go to last
if(e.shiftKey && e.keyCode == 9) {
e.preventDefault();
$(lastLink).focus();
}
});
$(lastLink).keydown(function(e) {
// if you press tab without shift, loop to first link.
if (!e.shiftKey && e.keyCode == 9) {
e.preventDefault();
$(firstLink).focus();
}
});
})(); // end tabloop anonymous function
JavaScript/jQuery isn't my strong point, so you might need to adjust this. For example, if the first/last focusable element is a form control that wouldn't work.
Also, it is worth knowing that screen readers do not necessarily use tab to progress through the page, they 'arrow' through (browse mode) and do not necessarily trigger focus.
In order to keep them within the iframe you effectively need to 'hide' everything else.
If you have the main content and iframe on the same level this is straightforward, you would start with:
<div class="mainContent">...</div>
<iframe id="myIframe">...</iframe>
When the page loads use:
$("#myIframe").attr("aria-hidden", "true");
When the iframe becomes the focus:
$("#myIframe").attr("aria-hidden", "false");
$("div.mainContent").attr("aria-hidden", "true");
All the techniques for this (in the context of a lightbox) are in a gist here: https://gist.github.com/alastc/7340946
NB: The whole concept of full-screening an iframe sounds a bit dubious, if you provided some context there may be a better solution?
I am working with a site where all content is rendered via ajax postbacks using jquery. I am using Ben Alman's hashchange (http://benalman.com/projects/jquery-hashchange-plugin/) to manage the hash history which allows me to bookmark pages, use the back button etc... Everything works perfectly on everything but IE 9 of course. In IE there is a small issue with "visited" links not being marked as visited. You can see that the link turns purple(visited) for a split second after you click it before the new content is loaded. But once you click the back button the link appears as though it has never been visited. Here is a jfiddle example of what I am talking about:
http://jsfiddle.net/7nj3x/3/
Here is the jsfiddle code assuming you have jquery and the hashchange plugin referenced in head:
$(function(){
// Bind an event to window.onhashchange that, when the hash changes, gets the
// hash and adds the class "selected" to any matching nav link.
$(window).hashchange( function(){
alert("Hash changed to:"+location.hash);
var hash = location.hash;
// Set the page title based on the hash.
document.title = 'The hash is ' + ( hash.replace( /^#/, '' ) || 'blank' ) + '.';
//simulate body being rendered by ajax callback
if(hash == ""){
$("body").html("<p id='nav'><a href='#test1'>test 1</a> <a href='#test2'>test 2</a> <a href='#test3'>test 3</a></p>");
}
else{
$("body").html("Right click within this pane and select \"Back\".");
}
})
// Since the event is only triggered when the hash changes, we need to trigger
// the event now, to handle the hash the page may have loaded with.
$(window).hashchange();
});
You can simply use IE conditional comments to load a specific style:
<!--[if IE]>
a:visited {
padding-left: 8px;
background: url(images/checkmark.gif) no-repeat scroll 0 0;
}
<![endif]-->
Why not setup a code block only to be used by IE that sets the value of a hidden input tag to reflect the click behavior. If a link is clicked you could set the value of the input tag equal to that link id and allow you js to update the elements class to reflect the change.
HTML if IE
<input type="hidden" id="clicked_link" />
JQuery JS if IE
$(function() {
$(a).click(function() {
$(this).attr('id').addClass('visited_link_class');
});
});
CSS
.visited_link_class { color:#your color;}
Maybe if you create the proper elements and building a DOM segment before appending it to the document.
Not sure it would work, can't test it here, but here goes my try adapting your code.
$(function(){
// Bind an event to window.onhashchange that, when the hash changes, gets the
// hash and adds the class "selected" to any matching nav link.
$(window).hashchange( function(){
alert("Hash changed to:"+location.hash);
var hash = location.hash;
// Set the page title based on the hash.
document.title = 'The hash is ' + ( hash.replace( /^#/, '' ) || 'blank' ) + '.';
//simulate body being rendered by ajax callback
if(hash == ""){
$("body").html(
$("<p>").id("nav")
.append($("<a>")
.attr("href","#test1")
.text("teste 1"))
.append($("<a>")
.attr("href","#test2")
.text("test 2"))
.append($("<a>")
.attr("href","#test3")
.text("test 3"))
);
}
else{
$("body").text("Right click within this pane and select \"Back\".");
}
})
// Since the event is only triggered when the hash changes, we need to trigger
// the event now, to handle the hash the page may have loaded with.
$(window).hashchange();
});
Try to consider css LVHA roles, which means the order of an a tag pseudo class matters.
First time to define those class:
A:link
A:visited
A:hover
A:active
If this still did not solve your problem, you can use another js router(hashchange): https://github.com/flatiron/director
I used this one a lot and it works perfectly in many situations.
An option would be to also fake the browser history using the HTML5 history API. This way only after deleting the browser history the link will be 'unvisited'.
Like said on this useful page:
[...] method above switches out the URL in the address bar with
'/hello' despite no assets being requested and the window remaining on
the same page. Yet there is a problem here. Upon hitting the back
button we'll find that we don't return to the URL of this article but
instead we'll go back to whatever page we were on before. This is
because replaceState does not manipulate the browser's history, it
simply replaces the current URL in the address bar.
So like also mentioned on that page you'll have to do a:
history.pushState(null, null, hash);
You can simply use IE conditional comments to load a specific style:
<!--[if IE]>
a:visited {
padding-left: 8px;
background: url(images/checkmark.gif) no-repeat scroll 0 0;
}
<![endif]-->
This is a security feature in ie. The functionality of :visited has been restricted in many modern browsers to prevent CSS exploit.
Hence, there's no workaround for this issue.