I am executing some javascript on clicking on anchor tags and use href="javascript:void(null);" to disable anchor tag.
Now if I hover on anchor tag browser status bar will show javascript:void(null).
Is there any way hiding it from status bar?
Use events instead of the href attribute.
Example with jQuery:
I'm a link
$('a#link').click(function(ev) {
ev.preventDefault();
....
do whatever you want
....
});
EDIT:
For the sake of completeness here is a pure JavaScript solution as mentioned in the comments below:
document.getElementById('link').onclick = function(ev) {
ev.preventDefault();
// other stuff
};
Related
I am using wordpress visual composer tabs in my wordpress theme, I am also using same tab menus in Wordpress main menu with hastags like #mylink. When I click on that anchor tag in menu I given page reload option. But before page reload it is scrolling down for it's related content of that tab content.
Here is the code that I am using
$('.sub-menu .menu-item a').click(function(e) {
location = this.href;
location.reload(true);
});
I want to remove the scroll when you click on the the hashed anchor tag.
for reference URL: http://wtastudios.com/novus2/projectsservices/#solar_Rooftops
Try this
$(document).on('click','.sub-menu .menu-item a',function(e) {
if($(this).attr('href')).indexOf('#') > -1){
//return false;
e.preventDefault();
}
});
dont use clik() anymore, on is better, because it is been trigger even after document.ready.
then you must target only href that contains #.
I have a navigation bar with many links. The problem is that I am not done with all the pages. Is there anyway that I can block my users from clicking on certain links and instead display a little message that notifies them that the content will be coming soon?
Edit: It did not allow me to include bootstrap within the tags--but if a solution includes bootstrap, I am comfortable with it.
Edit 2: I have some jQuery effects on the navigation bar, is there anyway to also disable these effects when the link is clicked?
Put a class to your links which are not ready. For i.e. inactive class. And then in jQuery you can simply do it like below:
$( ".inactive" ).click(function(event) {
alert("This page is coming soon!");
event.preventDefault();
});
You can also use alert for displaying message :
HTML
Link
Link Wroking
JS
$('a.inactive').click(function( event ) {
event.preventDefault();
var yesno = alert("Coming Soon");
});
Add class inactive for showing message. For the link which are working, don't add class inactive.
Here is a fiddle.
Simply, you can use href="#" and alert message onclick:
MenuName
I need to turn off some jquery fade in and out on a single page because it causes it not to load properly.
The page is not public to view, but it has tabs created in css when I click the tabs it fades out as if I were changing the page and then nothing loads back up.
Is it possible to change the javascript, or disable it on a single page??
Thnx
Add the following after the default JS code is included, in order to override its behaviour.
<script type="text/javascript">
$(document).ready(function()
{
$("a").unbind("click");
$("a").click(function(event)
{
event.preventDefault();
});
});
</script>
This should remove the biding that the <a> element has with the fade effect.
Docs: http://api.jquery.com/unbind/
How can I hide URL from displaying when mouse hovers on a hyperlink?
Hyperlink
How can I hide URL from displaying in browser's bottom status bar when mouse hovers?
Don't put the URL in the href (or keep it href="#") and attach a JavaScript function to the onclick event which puts the actual link in the a element. This way you won't see the actual URL when hovering over the link but the link will be inserted when the user actually clicks.
This way you can easily hide url when mouse hover on hyperlink.
Simply add one id on anchor link.
HTML
<a href="url" id='no-link'>Hyperlink</a>
Jquery code
$(document).ready(function () {
setTimeout(function () {
$('a[href]#no-link').each(function () {
var href = this.href;
$(this).removeAttr('href').css('cursor', 'pointer').click(function () {
if (href.toLowerCase().indexOf("#") >= 0) {
} else {
window.open(href, '_blank');
}
});
});
}, 500);
});
Here is demo link https://jsfiddle.net/vipul09so/Lcryjga5/
you technically have window.status to make custom status bar messages. you can set it during an "onmouseover" event for that element and set the window.status to a blank string.. thats how we did it a long time ago however..
browsers these days prevent the modification of the status bar by default (as far as i know, firefox prevents it). so there is no guarantees as to this approach will do anything at all.
<button class="class" onclick="window.location.href='https://stackoverflow.com'">Visit StackOverflow</button>
OR
<button class="class" onclick="window.location.replace('https://stackoverflow.com')">Visit StackOverflow</button>
Just use onclick="location.href='#'"
just remove href attribute from a element. :)
Sometimes it makes sense to have a link within a fancybox to launch another fancybox (or load content within the current one).
Say, you have a fancybox error message on login. You also have a "email me my password" widget that works via a fancybox. You may want to combine the two to say (in a fancybox):
Bad password!
Forgot my password!
Unfortunately, this will not work. I considered adding the following js:
$('#fancybox-content a').live('click', function(){
$(this).fancybox();
});
Surprisingly, this sort of worked: You have to click on the link twice and then the right thing happens. Ugh.
Finally, I found a hacky ugly work-around (it works!):
$('#fancybox-content a').live('click', function(){
var href = $(this).attr('href'); //assume there is a selector inside href
$.fancybox($(href).html()); //find the html manually and load
});
What is the right way to accomplish this?
This is i how i solved this problem in my projects:
$('a.fancybox').live("click",function(event) {
event.preventDefault();
var href = $(this).attr('href');
$.fancybox({href: href})
});
In this way you can add fancybox to any current un future A elements with .fancybox class so you don't have to define new events after opening fancybox.
Version 2 is already using "live", so using class names - `$(".fancybox").fancybox();' - would also work on elements loaded using ajax
You should be telling elements to open a Fancybox from within your plugin.
Somewhere you have the following ->
$(document).ready(function(){
$("#my_element").fancybox();
});
That's a very basic function to open a Fancybox, and not only that, but it will also what to open based on the href of the element. You don't need to do any leg work here.
So if you have ->
Forgot my password!
Simply add an ID, such as 'x' for simplicity ->
<a id="x" href="#forgot-password">Forgot my password!</a>
Then, enable the Fancybox plugin for this element.
$(document).ready(function(){
$("#my_element").fancybox();
//this is for our new container to fire
$("#x").fancybox();
});
That should be all you need.