PDA

View Full Version : Is there a way to hide/not show the Javascript code on hover?



madnhate
10-05-2011, 07:18 PM
So I have tried this scroll to anchor javascript but the script shows in the status bar or bottom of the page where the status usually is when the mouse hovers over the link that leads to the anchor. The javascript code actually shows up. Does anyone know how to hide this? Or if there is a way to make it not show?

djr33
10-05-2011, 08:07 PM
Provide a link to your page (or the script you're using) so we have some idea what is going on. That way we can address your specific situation.

Generally, there are a few different ways to make Javascript do something when you click on a link:
1) <a href="javascript:MYCODE">
This is an older method and I personally find it annoying. This is probably what you're using. Try replacing it with the code below:
2) <a href="#" onclick="MYCODE; return false;">
This will display "[current.url]#" in the status bar. It works the same way. It also allows (optionally) for an alternate HREF that will only be loaded if the Javascript is not recognized by the browser-- it's a good backup.
3) Other options include programming a page-wide check to see if a link was clicked or adding an event to that link indirectly through Javascript somewhere else on the page, etc. Not very common, and complicated. Probably not what's happening on your page.

madnhate
10-05-2011, 09:32 PM
I was looking for a horizontal smooth scrolling javascript (if you know of any that work horizontally please point me in the direction!) and 1 person gave me a script he made, either because that was the only horizontal smooth scroll or no one else knew where to get one that worked horizontally(there are a lot that worked vertically)

This is the link to the thread where I got my code (http://www.dynamicdrive.com/forums/showthread.php?t=63729)

The code is a code user vwphillips himself made I believe.

Okay here is the link to the site that uses the code with the issue. Thanks for responding. If it cannot be fixed and you know a horizontal smooth scroll code or something like an endless scrolling gallery effect script please direct me to it thanks!

LINK to smooth scroll webpage (http://madnhate.freeiz.com/)

mburt
10-05-2011, 09:58 PM
Alternatively, you could do this:


<a href="javascript: ; " onclick="some_function(); ">text</a>

Of course you'd still see the "javascript: ;" but I guess it's a judgement call you'll have to make.

djr33
10-05-2011, 10:31 PM
In each of the HTML links in the code that vwphillips provided, change it from this format:
<a href="javascript:S.ScrollTo('TR');">Right</a>

to this format:
<a href="#" onclick="S.ScrollTo('TR'); return false;">Right</a>


mburt, using # is better because it will be valid for all browsers. Of course if you really want to display "Javascript" in the task bar, that's fine but I don't see the advantage personally.

madnhate
10-05-2011, 11:10 PM
So basically no matter what I'll have something in the status bar? Now it's just address/# which is much nicer but is there a way to not display anything at all in the status bar through hover or clicking? Or is that impossible?

Thanks for all the help by the way.

And do you guys happen to know of any scripts that work in a similar fashion horizontal smooth scroll javascript? Thanks again greatly appreciated!

djr33
10-06-2011, 04:21 AM
You're using an <a href...> tag. That's a link, and those display a status in the status bar.
The more general <a> tag isn't necessarily a link and that won't display anything in the status bar.

If you want you can just remove the href part entirely and it won't display anything at all.

However, that will also make it seem like it's not a link to the browser. So:
1. Browsers without Javascript or with it disabled will have no response at all.
2. The cursor probably won't change as expected.


Generally speaking you can put onclick attributes on anything. So you could replace those links with <p onclick="..."> tags and you'd be fine.

But I don't know if you really want to do that.


The main advantage to using an <a href> tag is that you CAN include a link. This works as a backup to the Javascript in case JS isn't available, and for accessibility that really is important to consider.



As for a direct answer to your question: there are some methods of changing what the status bar says. So you could use those to change it to nothing when the mouse is over the link. But they don't work, at least not in the modern browsers (for security reasons). Theoretically there is code in Javascript that will do this, but the browsers just ignore it. It might still work in one or two if configured properly, but it won't help much.

The # symbol refers to a location on the existing page. You must minimally have at least that for the page to not change when you click the link. Javascript CAN override that, but if JS fails then you will have the page randomly going other places if you use other text. For example, if the HREF is blank, the page will reload to the current location.

On a more general note, though, why do you want to interfere with the user's browser? It does that for a reason and 99% of the time someone wants to mess with the browser there's no real reason to be doing so. If there is a good reason maybe there's another overall approach you could take to fix it. Let us know.

---
Edit: I just tried a couple ideas about using Javascript to override the URL displayed and I can't get anything (at least anything simple) to work.
Using the onmouseover event/attribute we can attempt to stop the browser from showing this. Using "return false;" should make it display nothing, if it works the same way as for the onclick attribute. But that doesn't work.
The only thing I could get to work was to make it display an alternate URL when you hover over the link. Add this to the <a> tag:
onmouseover="this.href='';"
That will set the HREF to empty, so that the current page's URL will be displayed. That's as close as you'll get. It defaults to a relative path (relative to the existing URL) so you can't make it actually blank. You could supply something random, like, potentially empty://nothing.is/here, but I don't see the point of that, obviously. The shortest you could get would be http://, I believe.
This is better than removing the HREF because the browser still sees it as a link and it's better than changing the URL in the first place because this way Javascript does it, so if you have JS disabled it will use the # link, and thus not reload the page.

mburt
10-06-2011, 04:34 AM
Completely untested, but try this:


<a href="javascript: ; " onclick="..." onmouseover=" window.status = ''; return false; ">text</a>

EDIT: Nevermind, this doesn't work in Firefox or Chrome- so I can safely assume it doesn't work in Opera or Safari and well, Internet Explorer, who really knows what that would do with it.

The only reason I like doing it this way is because I hate the "#" in the URL bar- just a personal preference.

mburt
10-06-2011, 04:41 AM
Why not use a floating div that looks like a link?


<div style="float: left; cursor: pointer; margin-right: 5px; " onclick="...">text</div>
<div class="clear: left; "></div>

Daniel, I read through your post about the link being a good backup if the user doesn't have Javascript- but I think nowadays, Javascript is a pretty standard thing. I can't imagine there being a measurable population of web users who have Javascript disabled.

I'm not necessarily disagreeing with what you said, but I think that it's a slight abstraction from what really needs to be done here. At the end of the day, if you really wanted to put something there for non-javascript users you could use the <noscript> tag (or whatever it is, I forget).

djr33
10-06-2011, 05:19 AM
The <noscript> tag may actually be invalid in those browsers. It probably won't hurt anything, but that's not a real solution. The "noscript" tag really means "the-hide-me-if-you-recognize-me" tag. If browsers don't recognize it, then they ignore it, so the HTML inside it is displayed as if it wasn't there. That's ironic, if unimportant.

You're right that it's a very small percentage of users. But there are complicated reasons that some users might not have Javascript. But if you want a few good reasons: there are some mobile devices (such as the popular trend of ebook readers) that don't have Javascript, or at least not very complex JS. And perhaps more importantly search engines don't use Javascript. So google won't index anything you're showing unless you have backup content or alternate ways to get to it.



That is a side issue though.

What you posted is completely correct, I believe. window.status=''; is the correct JS code for disabling the scrollbar. But as I said, it's blocked/ignored by most modern browsers. It might work in IE, or at least I believe it did a while ago, maybe not after IE6 or something. I've never used it, so I wouldn't know.



Your last suggestion is fine, but honestly what's the point in making something look and behave like a link but not actually using a link? If all that effort is worth it to you, that's fine.
A secondary problem is that it won't necessarily work all that well in all browsers, especially changing the cursor. From what I know, making a cursor change consistently in every browser is very difficult.
But what about accessibility? Links can usually be accessed by the tab key. I don't think a non-link will work with tab. So you can make a fake link, but it won't actually work like the real thing.


Of course this is all about what matters. There are LOTS of cases where you don't want a link at all, and maybe this is one of them. Maybe you just thought that only links could do fancy things, and now that onclick is known to be available for every element, adding it to an image, to a button or to a paragraph or div will solve everything. There are lots of good reasons to do that.
But if you want a link, I suggest a real link. And the browser will handle it as it should-- and the user probably wants it that way. It's unlikely that your site is special enough to really need the special treatment.

madnhate
10-06-2011, 05:30 PM
oh interesting. thanks for the help. Actually you are right to completely hide the address might be silly. But I guess maybe just the site address would be nice. Like instead of websiteaddress.com/# just websiteaddress.com
I think you actually gave me a way to remove the # just now but I will have to try it later. But thanks guys for helping me out I've actually learned more from this.

mburt
10-06-2011, 08:13 PM
I agree with Daniel, and really to be honest, if the functionality of your website is hinging on what's displayed in the browser's status bar, then it's probably something you can live with.

djr33
10-07-2011, 05:00 AM
Another final point: the reality of the situation is that in the vast majority of cases, you will care a lot more about your websites and any details (like this) related to it than any of your visitors will. For that reason, worrying about this is probably not important, and probably will go entirely unnoticed by almost everyone.

There might be reasons where this would be particularly problematic (please share if that's the case), but in general even if you don't like it, you can relax knowing that you'll be the only one bothered by it probably.

(Of course the situation changes if you have a hugely popular site like facebook or google, and in that case you'll have users noticing a lot more than you will. But those are extreme examples for a reason.)

madnhate
10-23-2011, 12:23 AM
Is there a way to implement the javascript but not on the <a href> tags? Or is that not possible?

djr33
10-23-2011, 12:53 AM
Yes, just use <tag onclick="...."> as needed. But realize that it will be completely dependent on Javascript and it won't behave like a link: the URL won't change, the mouse won't become a "hand", etc. I described this in detail a few posts ago. Look back through the discussion for more information.