I have a link in Iframe and am redirecting users to final destination say x.com through an intermediate php script. However I want the users to see the final destination link in their status bar when they mouseover the link.
I have tried everything to change the window.status(in desperation) but nothing works. I have tried so far :
<a onmouseover='window.top.status="x.com";return true;'....
<a onmouseover='window.parent.status="x.com";return true;'....
<a onmouseover='parent.window.status="x.com";return true;'....
This has been disabled in most modern (and even not so modern) browsers: https://developer.mozilla.org/en-US/docs/Web/API/window.status
If you want to do this, you can create a function onload to create the link element, and change it on mousedown. There is a good example here: How to change window.status by onmouseover of a createElement()
Alternatively, you can skip the status all together and use a tooltip or something else to let users know where they will be forwarded.
It's better you to have the desired href inside tag. So users will see the needed string in status bar. Then change href on click to go to the needed php script.
Related
I have hyperlinks with href="#" that are assigned to client-side javascript event handlers. When making requests via ajax, these links behave as expected (via "click" events) but when I occasionally use a link generated by the Rails link_to helper these href values suddenly become corrupted: href="#" becomes href="users/1/photo/4" for example. Every link on the page picks up the same value!
When I use Chrome's Inspect Element, it reveals that the rendered href value remains href="#", yet rolling over it reveals it is pointed to the unwanted url. The event listeners fail. Is this turbolinks forcing my link placeholders to take on unwanted values? Why is rails messing with my links?
Here is typical javascript code assigning an event handler:
Menu.prototype.activatePhotosLink = function() {
var self = this;
// ======= get all user photos =======
$("#main-nav").on("click", function(){
event.preventDefault();
self.getUserPhotos();
});
}
Here's how the link looks via Chrome's Inspect Element with href="#":
photos
I tried to fix this problem with data-no-turbolink="true" but that did not work. Meanwhile, here is what I see in the browser's "link to tooltips" on rollover:
localhost:30000/users/1#
Why not href="#"? Thank you for any thoughts!
The path is not corrupted. It should be the path of the page you are at with the hashtag appended to it. This is not related to Rails nor JavaScript, but rather a feature in HTML. In HTML, if you want to create an anchor link to a certain element in the page, you pass its id to the href. You can read more about it here.
If you don't want a url to appear when you roll over the link, you can use href='javascript:void(0)'
this is the html line where i call the function:
Oranges
and this is the javascript:
function showMe (whichClass) {
var fruitShow = document.getElementsByClassName('fruit')[whichClass];
fruitShow.style.display = 'inline';
}
it works when i click the link and displays the fruit but it disappears. When the site loads the fruits are all set to display: none, i'm not sure if its reverting back or something else is going on. I have also tried using return before the function call (return showMe(1);)
Clicking the link triggers a reload of the page. Passing an empty value to href is equivalent to using the URL of the current page.
There are a couple of ways to prevent the page from following the link:
Change the href value to "#". This will make the page jump scroll to the top though, so you probably have to do the next option either way.
Stop the default behavior via event.preventDefault(). The default behavior is to load the URL. You can prevent that via the event object:
onclick="event.preventDefault();showMe(0)";
(note: while this works, there are better ways to bind event handlers)
Better yet: Don't use a link (since you don't link to anything), use a <button> instead. You can style it anyway you like with CSS.
Try changing your anchor href from "" to #.
replace
Oranges
with
Oranges
Or this
Oranges
change to this (prevent jumping)
Oranges
Just to have a tip more, but as already pointed out, using a button on this situation is a better solution.
Okay so this one has some similar threads but I couldn't find anything that nailed it on the head, so here we go.
I'm trying to simulate a link using the anchor tag, like so:
<a onClick="javascript: DownloadPorn();">Click Here!</a>
All of this works fine and dandy; the link shows, I can click it, and my javascript method is successfully executed.
The question here, is how can I correctly force the link to display in the 'same manner' as an actual 'HTML Link'? Or rather, in the 'same manner' as if I were to have an href in the above mentioned tag; like so:
Click Here!
Now... THIS Code snippet forces the link to display in the manner that I expect it to, but in using this method, when a link is clicked, the scroll location is bounced back to the top.
It's probably clear, that this is not an intended behavior for the framework I am trying to develop. If anyone has any suggestions to overcome this particular issue, I would greatly appreciate your input.
--- While typing this all up, I considered that I could place a static anchor at the top of the screen( say 0,0 or -,- ), and force all of my links to reference that anchor. If anyone sees any viability in this solution, I'm likely to explore it.
--- Edited ---
Accepted Answer:
In order to have an anchor behave as a hyperlink, without manipulating the browsers current position; utilize a Javascript method returning nothing(?) in the href attribute, or a valid return of 'false' in one of the alternate event handlers for an anchor, I.E. the onClick method.
Possible solutions:
Link
Link
Link
Thanks again, everyone.
--- End Edit ---
If you use return false at the end of your onclick attribute it will not make it scroll anywhere.
Click Here!
or you can make your function return false, and return its result (false) as well as execute it in the onclick attribute, which is shorter:
<script type="text/javascript">
function someFunc() {
// all your function code here
return false;
}
</script>
Click Here!
Set the javascript function to the href.
Click Here!
Edit: Just to note some consider this bad practice.
Set the href to javascript:void(0);, this will mean the browser displays the link as if it had a real href:
Click Here!
There are other methods such as setting the href to #, but the advantage of the one shown is that you don't have to worry about returning false or specifying return DownloadBooks().
This question has some good info about the use of javascript:void(0).
I have seen the following href used in webpages from time to time. However, I don't understand what this is trying to do or the technique. Can someone elaborate please?
An <a> element is invalid HTML unless it has either an href or name attribute.
If you want it to render correctly as a link (ie underlined, hand pointer, etc), then it will only do so if it has a href attribute.
Code like this is therefore sometimes used as a way of making a link, but without having to provide an actual URL in the href attribute. The developer obviously wanted the link itself not to do anything, and this was the easiest way he knew.
He probably has some javascript event code elsewhere which is triggered when the link is clicked, and that will be what he wants to actually happen, but he wants it to look like a normal <a> tag link.
Some developers use href='#' for the same purpose, but this causes the browser to jump to the top of the page, which may not be wanted. And he couldn't simply leave the href blank, because href='' is a link back to the current page (ie it causes a page refresh).
There are ways around these things. Using an empty bit of Javascript code in the href is one of them, and although it isn't the best solution, it does work.
basically instead of using the link to move pages (or anchors), using this method launches a javascript function(s)
<script>
function doSomething() {
alert("hello")
}
</script>
click me
clicking the link will fire the alert.
There are several mechanisms to avoid a link to reach its destination. The one from the question is not much intuitive.
A cleaner option is to use href="#no" where #no is a non-defined anchor in the document.
You can use a more semantic name such as #disable, or #action to increase readability.
Benefits of the approach:
Avoids the "moving to the top" effect of the empty href="#"
Avoids the use of javascript
Drawbacks:
You must be sure the anchor name is not used in the document.
The URL changes to include the (non-existing) anchor as fragment and a new browser history entry is created. This means that clicking the "back" button after clicking the link won't behave as expected.
Since the <a> element is not acting as a link, the best option in these cases is not using an <a> element but a <div> and provide the desired link-like style.
is just shorthand for:
It's used to write js codes inside of href instead of event listeners like onclick and avoiding # links in href to make a tags valid for HTML.
Interesting fact
I had a research on how to use javascript: inside of href attribute and got the result that I can write multiple lines in it!
<a href="
javascript:
a = 4;
console.log(a++);
a += 2;
console.log(a++);
if(a < 6){
console.log('a is lower than 6');
}
else
console.log('a is greater than 6');
function log(s){
console.log(s);
}
log('function implementation working too');
">Click here</a>
Tested in chrome Version 68.0.3440.106 (Official Build) (64-bit)
Tested in Firefox Quantum 61.0.1 (64-bit)
It is a way of making a link do absolutely nothing when clicked (unless Javascript events are bound to it).
It is a way of running Javascript instead of following a link:
link
When there isn't actually javascript to run (like your example) it does nothing.
Refer to this:
Link to the website opened in different tab
Link to the div in the page(look at the chaneged url)
Nothing happens if there is no javaScript to render
javascript: tells the browser going to write javascript code
Old thread but thought I'd just add that the reason developers use this construct is not to create a dead link, but because javascript URLs for some reason do not pass references to the active html element correctly.
e.g. handler_function(this.id) works as onClick but not as a javascript URL.
Thus it's a choice between writing pedantically standards-compliant code that involves you in having to manually adjust the call for each hyperlink, or slightly non-standard code which can be written once and used everywhere.
Since it is a styling issue, instead of polluting the HTML with non valid syntax, you could/should use a W3 valid workaround:
Format the HTML properly, without href, following the W3 accessibility guide lines for buttons.
Use CSS to fix the initial goal of applying a clickable UX effect on a control.
Here's a live example for you to try the UX.
HTML
<a role="button" aria-pressed="false">Underlined + Pointer</a>
<a role="button" aria-pressed="false" class="btn">Pointer</a>
CSS
a[role="button"]:not([href]):not(.btn) { text-decoration: underline; }
a[role="button"]:not([href]) { cursor: pointer; }
I was searching for a solution that does not refresh pages but opens menu items on Ipads and phones.
I tried it on also mobile, It works well
Dr
1. Use that java script to Clear an HTML row Or Delete a row using the id set to a span and use JQuery to set a function to that span's click event.
2. Dynamically set the div html to a string variable and replace {id} with a 1 or 2 etc. cell of a larger div table and rows
<div class="table-cell">
<span id="clearRow{id}">
Clear
</span>
</div>
<div class="table-cell">
<span id="deleteRow{id}">
Delete
</span>
</div>
//JQuery - Clear row
$("#clearRow" + idNum).click(function(){
$("someIDOrWildcardSelector" + idNum).val("");
$("someIDOrWildcardSelector" + idNum).val("");
$("someIDOrWildcardSelector" + idNum).val("");
});
//JQuery to remove / delete an html row
$("#deleteRow" + idNum).click(function(){
//depending upon levels of parent / child use 1 to many .parent().parent().parent()
$(this).parent().remove();
});
I have a href which pointed to #
<a href="#" id="bla" >Bla<a>
I have onclick function which displaying popup on click on that a href.
function doingClick()
{
//display popup
return false;
}
But after click symbol # every time added to the url in browser.
So for example if url was like that before I click on my link http://mywebsite.com
But after click on a href the url looking like that: http://mywebsite.com#
Is there any way to avoid such behavior?
To avoid this try adding return false;
Link
You could also use void(0)
Link
There's a popular question related to this (small religious war!) at Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?
Link
Do not forget to return the return of your function. Otherwise you will just call it without suspending the subsequent events.
While there are other valid solutions, I personally prefer this shorter solution.
Link
Another benefit is that this solution does not scroll to the top of the window.
So i think the better way of doing this is to remove href from a element
<a id="bla" class="href" >Bla</a>
and than to make it looks like a href just add simple css class
.href
{
color: #2289b8; //color of the link
cursor: pointer;
}
This idea comes to me when i looked in to source of SO add comment button
Instead of adding a href, you could add a style="cursor:pointer;"
this has the same effect of displaying it like a hyperlink, without the in-page anchor effect.
<a id="bla" onclick="return doingClick()" style="cursor:pointer;">Link</a>
The url is not pointed to nowhere. The URL is a relative URL to # in other words the URL resolves to <current_url># which in this case is http://mywebsite.com#.
To avoid this behaviour, you have to change the URL.
If you have a onclick-handler that returns false, then that should prevent the link being active :
link
You can also use javascript:void(0) as the link href.
In either case, be mindful of the decreased accessibility of your site when you use javascript to access some parts of it. Those users that have javascript disabled, doesn't have javascript enabled browsers or use a screenreader or other accessibilty tools may not be able to use the site.
If you don't get better answer, you could make nasty ugly workaround by placing script tag very early on page (on the beginning of body or in head) with following javascript:
if(document.location.href[document.location.href.length-1]=='#'){
document.location.href = document.location.href.substring(0, document.location.href.length-2)
}
I DO NOT RECOMMEND you to do this as will cause double requests to server when # is in url, but it is here if you have to.
The # is used for linking the element ID's, and will always be added to your URL when used in "empty" hrefs. What you could do, if it REALLY annoys you, is to remove it from location.href in your doingClick function
A simple workaround would be set the href empty:
<a href="" id="bla" onClick="alert('Hi');">Bla<a>
Which still works.
If you want to keep the "events" that happens in href="#"
You can simply leave it empty: href=""