Display link on mouseover - javascript

I've got certain regions of the page that, when clicked, will redirect the user to certain addresses. My problem is that when the user 'mouses over' these regions, they see a pointer, but have no idea where it links to. For my purposes it is important that the user knows where they are being linked to. I believe Google displays 'fake' links when you mouseover links.
How can I achieve this? Is it impossible without having actual <a> tags?
I'm currently using location.href="http://www.site.com" to redirect the user where "site" is stored in a javascript array and changes depending on the mouse position.
EDIT: The link should be displayed in the normal mouseover link area - in chrome this is the bottom left corner - just like when you mouseover an ordinary link and you see where the link leads to.

I don't believe this is possible without using <a> tags, the best you could hope for is to use the title attribute to show a tooltip.
e.g.
<div title='www.google.co.uk' style='cursor:pointer'>
This is my div!
</div>
Using anchor links (as Google does), you can do something like:
<a href="http://www.mwhahaha.com"
onmouseover="this.href='http://www.test.com';"
onmouseout="this.href='http://www.mwhahaha.com';"
onclick="this.href='http://www.mwhahaha.com';">Link</a>​​​​​​​
This will show a link that looks like it's going to www.test.com, but clicking it actually goes to www.mwhahaha.com, although I'm not sure how legal/good practice this is (only tested this in Chrome)...

If I remember correctly, Google changes the href of the link to the real url during the mousedown event. Try pressing the mouse button while hovering over a link, but moving your mouse cursor off the link before releasing the button. When you hover over the link again, you should see a new URL.
I'm answering from my phone or else I'd check it myself. They may be doing it differently now.

Related

TagCommander - Fire tag at user's click

I'm using TagCommander and I'm trying to fire a specific tag when a user click or scroll within a certain page.
I can easily detect clicks and scroll and fire an event/set a variable according to that, but I can't find a way to fire a Tag when that happens.
My tag should actually fire according to a specific perimeter (a subset of pages) and when a user does some specific action on the page (i.e. click or scroll).
Is there any way to do that?
it's been a while, maybe you found a solution.
To let a click fire, you should go to:
Triggers > edit > choose "Clicks" from the horizontal menu. Under "selector path" insert the CSS selector path of the Button/Link/Call to Action that you want to track. Click on "done".
If you don't know how to select the CSS selector,
go to your website,
open the chrome console,
activate the tab "Elements",
activate the array,
select with the mouse the Button you want to track
in the Tab "Elements" the Elements will be highlighted in its code
if you go on the line all to the left it will appear 3 points (...), click on them and select "copy selection" > CSS Path
it should be something with #, for example #tab1234

I want to get an event for an HTML onContextMenu *after* the final selection, not at initial click

If I do
<a href ... oncontextmenu="myFunction(event)">
It gets called when the user right clicks on a link, before the context menu appears. But I want to get an event after a context menu item has been selected. Ideally, only when they have selected "Open link in ...", so having access to what they actually clicked is desirable.
Would prefer a non-JQuery answer, but if needed, JQuery is o.k.
Added: Explanation what I'm trying to do:
When the user directly clicks a link to another (commercial hotel finder) site, I bring up a little alert "If you book a room, please enter XXXX as the Gift Code"). Would also like to put up this alert if they right click and open the link in a new tab etc.,.,
Added#2: Thanks for the prompt and direct answers. See my "answer" below for what I ended up doing. I'll leave this question open in case there are other options.
This is not possible to do in Javascript, but you might be able to achieve what you are looking for by replacing the default context menu with a custom one.
You can't. The primary purpose of the contextmenu event is to allow a page to replace the browser's context menu with a menu of its own rendered as HTML. The contents of the browser's context menu are not specified by any HTML standard, and will vary from browser to browser. Most of the options in the context menu refer to actions outside the scope of the page (e.g, "copy", "view page source", "open link in new window", "save as", etc.), and there is no event fired on the page when they are selected unless the action being performed would normally fire an event. (For instance, selecting "Print" might fire onbeforeprint and onafterprint events.)
The WHATWG HTML5 specification specifies a menu element which can be used to add items to the browser's context menu, but it's currently only supported under Firefox. So that's probably not really an option either.
Just an idea, and I'm not sure exactly what you are trying to do, but I would try calling the function on a set delay, like this:
Right-Click Me, then wait for 3 seconds.
The only downside is that once the alert() is called, the context menu is hidden.
Hope this helps!
What I ended up doing is inserting an intermediate page on my site.
Instead of directly going to the external site, the route (I'm using node & Express) brings up a intermediate page with the explanatory text, a checkbox "Got it, don't show this page again", (in my case, the answer gets stored in localStorage, others might store on the server) and a big green OK button that takes you to the external site.
If the route includes the query "?directXXX=true", (read from localStorage) you skip over the intermediate page and are immediately redirected to the external page.
This way I get a much nicer explanatory page, with an image, etc... (dialogs, even if you use something like alertify, look klunky) and I get to "intercept" all calls to the external site.

Can't edit HTML in Chrome dev tools Sources tab

I have a noob question about the Sources panel in dev tools: when in the Elements tab I see my CSS to the right. I click on a CSS file and am brought to the Sources tab where I can make live edits.
I can bring up the JS and do the same, but...
If I bring up the HTML file, I am unable to make any edits to the HTML. Why is this? Is this by design? What am I missing?
Once the DOM is loaded, the browser doesn't use the original source, since the DOM can be modified on the fly by Javascript. If you want to make live edits to the DOM, you can do it in the Elements tab. Right click on an element or attribute, and there are options to edit it.
If I understood you correctly, you are trying to edit the left side of source. Try to double click on position when you want to edit code or get right click mouse and click on "Edit as HTML".
In this case, you can click on three horizontal dots which will appear on the left side of the same line where you will click once( just single click and enjoy ). A single click on the line to edit and then single click on three dots which will appe
I had the same issue and a search got me to here.
For me what fixed it was to open the navagator bar, then click "filesystem", then click "add folder to workspace" , then click the folder location of whatever file you are wanting to edit. Once done, I was able to edit the html freely.

On hover tooltip by using javascript or GWT

I am create an web application in Google Web Toolkit.
I want to create a On-hover tool-tip on hyperlink. In this tool-tip i need to show the user image, username, her/his designation, and address of that user.
Problem :
My problem is to stay that tooltip when i move the cursor from hyperlink to tooltip just like G+ and facebook shows the user information when i move the cursor on any user name it show an toolitp and we can easily from the cursor from username hyperlink to tooltip.
Secondly, that tooltip position should be changed dynamically, similar to facebook like sometime that tooltip shows on upper side and sometimes it shows on downside of the username hyperlink.
NOTE : i can only use javascript and GWT. No jquery answer needed.
Use a PopupPanel widget. It has a useful method showRelativeTo(), which you can use to show this panel next to your Anchor widget.
You can add your own logic when this popup shows and hides.

Is there a textarea/rich text editor that allows the user to follow links that render in them while entering?

I am looking for something like like FCKEditor that allows users to follow links by left clicking them.
For example, the markdown editor in StackOverflow does not allow you to click the links you add as you are entering data into the editor. I would like to render a text area pre-populated with some links to lab results that the user can choose to review while making their comments.
both tinyMCE and fck editor will highlight the links with blue color and if you ctrl+click on them, will open in a new tab/window (depends of you browser configuration)
Most HTML richtext don't do anything to the link (with the exception that you can place the cursor in them with a single left click, in order to edit their text) that would prevent you from, for instance, right-clicking to open the link, copy it, or whatever your browser allows.
TinyMCE allows you to preview within the same page and then click on any links with the click of a button/icon. I'm thinking there must be a way of triggering this outside of the TinyMCE and possibly having it populate another field/area. (You probably could also grab the value of the textarea and put that somewhere else on the page.)
Not sure if this is what you are looking for.
Or you could try a preview mode, just like StackOverflow. See How can I enable live preview for FCKeditor in an ASP.Net site?

Categories

Resources