window.location.hash
When using a link for a javascript action, I usually do something like this:
Link Text
That way, when someone clicks the link before the page loads nothing terrible happens.
Html Base Tag
On my current project I use this same construct, but with a base tag:
<html>
<head>
<base href="http://example.com/" />
</head>
<body>
Link Text
</body>
</html>
However, if the page url is:
http://example.com/dir/page
clicking the link navigates to
http://example.com/#
rather than
http://example.com/dir/page#
How can I fix this?
Either remove your base tag or change your href attributes to be fully qualified. What you are observing is the intended behavior when you mix base with a elements.
If you're inclined to use an a tag another solution is to not use # as the href target (when you don't specify one it causes a jump to the top of the page which I find undesirable). What you can do is:
Some Link that Goes nowhere
Really though, unless you are doing something that requires that to be an a tag a span would be your best bet:
CSS:
.generic_link {
text-decoration:underline;
}
.generic_link:hover {
text-decoration:none;
}
HTML:
<span class="generic_link">Something that really isn't a link</span>
If there's no URL that is suitable for a non-javascript user, then don't use an <a>. <a> tags are for links to other pages.
Any visible HTML element can have an onclick and won't have this problem you describe.
Return false on the onclick event to disable the link:
Link Text
(This is just an example of how you’d do it inline. But try to avoid inline declarations and use techniques of progressive enhancements.)
<html>
<head>
<base href="http://example.com/" />
</head>
<body>
Link Text
</body>
</html>
I had the same issue in the past.
I had a link that i wanted to be empty, to link to the current page.
Without the base html element this will be just an a element with href="#".
My example without using the base html element,
<li>
<div>The text of my Link</div>
</li>
The same example with the solution i found,
<li style="cursor: pointer !important;">
<div>The text of my Link</div>
</li>
This solution only uses css to disable the link.
With the first css rule cursor: pointer !important; i ensure that this link will have the correct (for my case) pointer icon.
With the second rule pointer-events: none; i ensure that this link will not be clickable.
You can find more about this rule following this link.
You can just simply remove href attribute from your <a> tag.
<a href="#"> => <a>
Related
Hello recently I'm facing a new problem. I used a custom html code in the middle section of my website. After implement the html my website automatically go to that section after loading. I think this is the culprit:3
<div class="results" id="results">
<a class="domain" href="#" id="domain">helloworld.com</a>
</div>
Here there is an hash tag that force browser to go to this particular section. That is to say I used "javascript:void(0)" instead of # but nothing improved.
My question is how can I push browser to say header and not to follow that result id.
Simple use javascript
It will changes hash in url from anything to your required header
Make sure your header has the id attribute header.
window.location.hash = "header";
You can prevent the browser to follow a link (with an assigned href) with some simple JS code:
document.getElementById("domain").onclick(e => e.preventDefault());
Where e is the Click event object.
Although a javascript:void(0) on the href property should do the trick too.
You should probably also set the link's rel property to nofollow, like this:
<a class="domain" href="#" id="domain" rel="nofollow">helloworld.com</a>
UPDATEI finally found a simple and easy way:
<font onclick="window.open('https://www.google.pt/', '_self');" style="background:0;border:0;outline:0">Link
I had to use a tag to add the event to the text so I used font because it doesn't modify anything. P.S.: This doesn't work on JS Fiddle as, for some reason, it doesn't open the link (it stays blank).
Probably duplicated but I couldn't find it so, is there any way to prevent the URL of a link to show when I move my mouse over it?
Code with image of the URL:
Google
<br>
When I over the mouse on the link, it shows the URL on the bottom left corner.
<br>
<img src="http://i.imgur.com/pq3ket7.png">
<br>
Is there any way to prevent it?
I'm using Chrome.
https://jsfiddle.net/1tbg478j/
The JSFiddle broke so I will just paste all the code here. Please note that the links won't work in JSFiddle because they do not allow window.location but it will work in your website.
HTML:
<a class="no-href" data-location="https://www.google.pt">Google</a><br />
<a class="no-href" data-location="https://www.google.com">Link 2</a><br />
<a class="no-href" data-location="https://www.google.co.za">Link 3</a><br />
Normal Link<br />
<br>
When I over the mouse on the link, it shows the URL on the bottom left corner.
<br>
<img src="http://i.imgur.com/pq3ket7.png">
<br>
Is there any way to prevent it?
I'm using Chrome.
JS:
$('.no-href').click(function(e){
e.preventDefault();
window.location = $(this).attr('data-location');
});
CSS:
.no-href {
color: blue;
cursor: pointer;
text-decoration: underline;
}
It's uncontrolled browser behavior.
You can convert it to a div, attach a click event listener an open the wanted url in the callback function.
Simply add it to OnClick like this:
Google
Hope it helps you.
According to this it cant be done : https://productforums.google.com/forum/?hl=en#!category-topic/chrome/discuss-chrome/FtD7qjochgw
I am very new to jQuery and not entirely sure what I'm doing. Will try my best to explain the problem I'm facing.
I'm trying to lock some content on a landing page until a user shares the link using FB, Twitter, LinkedIN or G+. The first version of the script I wrote (which worked fine) ran like this:
<head>
<script type="text/javascript">
...
$(document).ready(function()
{
$('.class').click(clearroadblock());
buildroadblock();
}
</script>
<style>
.class
{
[css stuff]
}
</style>
</head>
<body>
<div id="something">
<ul>
<li> Link1 </li>
<li> Link2 </li>
</ul>
</div>
</body>
The problem I'm now facing is changing out this code to replace the list elements with social share buttons. As they are no longer under .class, but classes like fb-share-button and twitter-share-button. Please help me understand what I need to modify to accommodate this? PS: This is not a Wordpress site.
function clearroadblock()
{
$('#roadblockdiv').css('display', 'none');
$('#roadblockBkg').css('display','none');
}
This is the way I'm clearing the overlay once a click is detected, BTW.
Can I wrap the social buttons in divs, assign them IDs and use those IDs to trigger the click like below?
<div id="Button">
Tweet
</div>
$('#Button').click(clearroadblock());
You can have multiple classes on an element by separating them with a space. Try the following:
class="class fb-share-button"
Your jquery will still work off the "class" class. I would recommend you change this name to something more meaningful though. Your css can target the "class" for general styles, but you can also target fb and twitter separately.
Update
I decided to create a quick JSFiddle for this.
Some of the styles etc won't be the same as what you're doing, but the problem is resolved. I've created a div with id main that contains the content that you want to hide. There's an absolutely positioned div over the top of this, this is the roadblock. The javascript is showing the roadblock (assuming that's what you wanted to do with buildroadblock()).
On click of a link in the ul with id socialMedia we call clearroadblock. Notice the lack of parenthesis. This hides the roadblock.
This isn't a great way of preventing someone from seeing information, you might want to think about pulling the content down from the server when the action is performed, however, I think this answers your question.
I am having issues with my CMS - its seems it doesn't like having an <a> tag within an <a> tag as my Fancy Box 2 set up has.
To test I replaced:
<a class="fancybox" href="#popup">
with
<div class="fancybox" href="#popup">
This solved my original issue, but because its not legitimate mark up and breaks a lot of the other code.
Would anyone know a correct way to modified Fancy Box 2 to do this?
You can always bind fancybox to any element other than the <a> tag with a valid (HTML5) structure and functionality, using the special fancybox's data-* attributes like :
<div class="fancybox" data-fancybox-href="#popup">open fancybox</div>
See JSFIDDLE
I have a a link as below
link
and javascript function1 include submit form action
now I want to use JavaScript to prevent Ctrl + mouse click to open new tab on this a link for IE(>=6), FF, and Chrome.
Updated to fix
1. update href="javascript:void(0)"
2. update onclick="function1();return false;"
Note: I'm not using a JavaScript library such as jQuery or Dojo.
The A tag is used for links or references. If you mainly want a clickable function I would suggest to use the button tag and style it like a link with css.
For example, bootstrap does this with the btn-link class:
<button type="button" onclick="function()" class="btn btn-link">Link</button>
This has the advantage over using a span or div element that it is clear to browsers, search machines and screenreaders that this is supposed to be a clickable element.
If you want to execute a function on click of an element, use a div tag instead of an anchor tag
<div onclick="function1()" style="cursor:pointer">link</div>
EDIT: a div tag is a block element and will push the link to a new line. And as Jan has suggested move styles to a CSS. Used inline style for ease here.
<span onclick="function1()" style="cursor:pointer">link</span>
[Edited]
You can do whatever you want to do from within the event's function (onclick) and don't use href at all. For the mouse hover cursor effect use style="cursor:pointer".
example code:
<html>
<head>
<title></title>
<script type="text/javascript">
function fn(){
/* do something */
}
</script>
</head>
<body>
<a style="cursor:pointer" onclick="fn()">1234</a>
</body>
</html>