onmouseover vs onmousemove to display info - javascript

I've got a minor issue with a legacy app. It displays a graph and when you move the mouse over a point on the graph, it displays some info in a tooltip as well as on the status bar at the bottom of the browser (it's an IE-only app). But it doesn't always display the info; sometimes you have to move the mouse off the point and back on again to get it to display. Back when the app was written, the developers used onmousemove to display the info, instead of onmouseover. Not really sure why so I changed it to onmouseover to see if it makes a difference and it seems to work more reliably, except that now the info doesn't show up on the status bar. Instead, the href info displays (the points on the graph are clickable to drill-down on that point).
Here is some simple sample HTML that displays the problem:
<html>
<script language="JavaScript">
function display(txt) {
window.event.srcElement.title = txt;
window.status = txt;
}
function reset() {
window.status = window.defaultStatus;
}
</script>
<body>
This is mouseover text.
<br/><br/>
This is mousemove text.
</body>
</html>
Is there a way to make the onmouseover event actually display the info on the status bar instead of showing the href info? When using onmousemove, the status bar very briefly shows the href info and then changes to the specified text. Is this just an issue with the order that the two events work?

If the <a> (anchor) in your app has no (real) href, you can replace it with any other html element. (<span> for example); the anchor isn't adding anything (from behavior perceptive), except default styling.
When replacing the anchor with another element some
additional styling is maybe needed. For styling I added the class 'link'
<span class="link" onclick="alert('do something');" onmouseover="display('Displaying mouseover!');" onmouseout="reset();">This is mouseover text.</span>
css:
span.link
{
color:blue;
text-decoration:underline;
}
I know this won't fix the problem with onmouseover + <a> but it gives
you the guarantee that the 'href' is never shown in the statusbar and the JavaScript functions will work.

That looks correct as far as I can tell. One thing you may want to check into is that modern browsers have disabled the ability to change status messages. This is done for various reasons - the primary one being security. If you mouse over a link, you should see where the link goes - not some hidden text that prevents you from knowing where you're heading next. You can change the settings on the browser to ensure that you see status messages.
In Internet Explorer:
Go to Tools > Internet Options
Click the Security tab
Ensure that the Internet option is selected/highlighted
Click Custom Level... (this launches the security settings for the Internet zone)
Scroll down until you see Allow status bar updates via script (under the Scripting option). Click Enable
Click OK to save this screen
Click OK again
Of course, you could always go another route and just make the tooltip show the coordinates rather than the status bar. Have you tried that? That's just basic HTML (using the alt attribute).

In my opinion the problem is that you are trying to make the legacy app remain a legacy app.
window.status: Sets the text in
the status bar at the bottom of the
browser or returns the previously set
text.
But its obslete now.
For example if you wanna make it work in Firefox, you have to follow this.
To allow scripts change the the
status bar text, the user must set the
dom.disable_window_status_change
preference to false in the
about:config screen.

Related

Text Disappears after page scroll and toggle

I saw a good website template and started making a website. The link is: https://html5up.net/lens. In the process, I observed a typical UI bug, where in if a user scrolls down the page and clicks on "X" of the image (to see fullscreen image),toggles back, scrolls to the top of the page, the content which was visible before disappears though it still appears in the DOM.
I saw the js function written for the toggle, it's straightforward and works fine until we don't scroll on the web page. Please see bug screenshot.Screenshot of the bug
This is a known, ongoing issue with Chrome and CSS visibility. You can 'fix' this by updating the CSS of the affected children, ie. changing classes or simply setting the visibility of the child element manually. I believe this to be because Chrome automatically prevents the rendering of the divs because at the time they are called to be shown, they are off screen and not viewable.

location.href make target appear in status bar when hovering over link

I have the following piece of code which when clicked takes me to the dynamically rendered details page:
<tr class="itemList" onclick="location.href='Details/' + #item.ID">
My only issue is, is that the target URL which would be website/Details/ID doesn't display in the status bar when you hover over the table row and this also means you can't open the link in a new tab (for instance in firefox this status bar appears in the bottom left corner when you hover over a link).
How can I get this target URL to appear in the status bar across different browsers and also be able to open them in new tabs.
Thanks in advance.
A little bit obvious, but still a correct answer in my opinion:
Use an anchor element, like below.
Click me

Is there a way of showing/indicating an updated tab from an extension/background page?

I'm looking for behaviour similar to pinned Gmail tabs, where tab head blinks when there's a new email and the tab is not in focus.
chrome.windows.update(..) has a 'drawAttention' option. But chrome.tabs.update(..) only has 'active' and 'highlight' options.
I couldn't locate a method of indicating an updated tab in the active window without switching to it/or highlighting it (which seems to have almost similar behaviour to active).
The glowing tab effect is specific to pinned tabs, and only happens when the page's title changes. This feature is not Chrome-specific, it also available in Firefox.
There is no way to get this effect for unpinned tabs, but if the tab is pinned, then you could change the page's title to get the desired effect via content script. To use this, you must declare the permissions to access the host.
Here is minimal example to achieve the goal:
chrome.tabs.executeScript(tabId, {
'document.title += ".";'
});
If you want to use this feature, I suggest to switch between two states (e.g. with trailing dot and without dot), to prevent the title from getting too long.
Unless the tab content is really updated, I recommend against using this trick, because the visual indicator is misleading when there is no update in the tab.
Alternative ugly ways to draw attentions to unpinned tabs with chrome.tabs.update are:
Pin/unpin tab
Move tabs across the tab strip
Activate/deactive the tab
I'm afraid that highlighting is as far as tabs API goes.
You could use a content script to show an annoying animated favicon until the tab gets visible as a possible workaround.

On hover of a url display the website in a popup div?

I am trying to do something like:
Google
When a user hovers the link:
<div id="display-site">
//working site contained in a div
</div>
Note I am aware that I can open the link in a new window using html, thought I am interested in figuring out how I would go about 'previewing' the website contained in the <a> tag, in a div container, (if the link is hovered).
This can be done by creating an <iframe> in the DOM on hovering over an <a> and loading the href as the iframe's src= attribute. In order to make it look like a popup, you would need to position the <iframe> at an absolute location, and set its z-index CSS property to a higher value than the rest of the page content.
However, if you need to make modifications to the display of the loaded frame, such as sizing some elements to accommodate the zoom level as suggested by #David's answer, you may run afoul of the same-origin policy, as scripts will not be permitted to access properties of the loaded frame outisde the same domain.
From MDN:
Scripts trying to access a frame's content are subject to the same-origin policy, and cannot access most of the properties in the other window object if it was loaded from a different domain. This also applies to a script inside a frame trying to access its parent window. Cross-domain communication can still be achieved with window.postMessage.
Before continuing - check this benefits the user experience. When I move my mouse over a page and brush over a hyperlink I don't always want a link preview to appear on top. However, assuming this is in the best interests of your users...
Implementation wise, this can be done, as #Michael suggests, by using an <iframe>, however the document within the iframe will be displayed at the user's set zoom level, but showing a 250x250 window of a document designed for at least 1024x768 isn't going to help the user. Thus you need to display a zoomed-out, birds' eye representation of the web-page to the user.
There are ways to get the current viewport zoom level ( How to detect page zoom level in all modern browsers? ) but I don't know how setting it works (in all liklihood it's probably impossible in most cases). Furthermore I don't think you can set zoom on a per-iframe basis (assuming you can set it all).
The best way forward then is to display a scaled-down bitmap page rendering to the user - like Google does for popular pages in its search results. However this means that for every page you link to you need to get a rendered image of the target page.
I remember a few years ago there were companies that provided page thumbnail services (it was part of those annoying doubly-underlined ad text in webpages that was popular around 2005-2008), but they're a rarity now.
I guess you'll have to then set up your own service and host a layout engine (Gecko, WebKit, or Trident) in a way it can generate page thumbnails for you.
All things considered, I don't think it's worth it.
Something like this, just an idea
$('a').hover(function()
{
$('#display-site').load((this).attr('href'));
$('#display-site').show();
});
You will need to set the css property as needed
1- Find a jquery plugin that displays tooltips on element hover.
2- Insert an Iframe of the website that the link refers to inside a div residing in the tooltip container.

How to change the panel position to mouse position in Firefox Add-on SDK

I want a panel to be shown at the position the mouse on the screen.
The Firefox SDK documentation is not very detailed and I face some problems understanding how I can change the panel position.
Sadly, you cannot. If I look at the source code, the Add-on SDK always shows the panels in the middle of the browser window. There is merely an undocumented option to anchor the panel at a node in some web page but this is clearly undocumented for a reason (SDK extensions usually cannot get hold of such nodes). Even if that option were usable, it wouldn't solve your problem. I guess that the "easiest" solution would be taking packages/addon-kit/lib/panel.js and using a modified version in your extension where the method show() can take screen coordinates (the parameters x and y in the openPopup() call at the bottom of this method are screen coordinates).
I was trying to create a button in the Nav Bar and then show a panel by it instead of using a Widget to show a button as that is tied to the Addon Toolbar.
To put a button in the Nav-Bar I used the code here:
http://kendsnyder.com/posts/firefox-extensions-add-button-to-nav-bar
In his code you will notice that there is a bit that looks like this:
btn.addEventListener('click', function() {
// do stuff, for example with tabs or pageMod
}, false)
As Wladimir mentioned you must anchor the panel to an element so in the click event I added the following:
panel.show(utils.getMostRecentBrowserWindow().document.getElementById("myButton"));
I declared utils as such:
var utils = require("sdk/window/utils");
You can actually anchor your Panel to any element in the browser. For example, you can anchor it to the nav bar:
panel.show(utils.getMostRecentBrowserWindow().document.getElementById("nav-bar"));
or anchor to the status bar like so:
panel.show(utils.getMostRecentBrowserWindow().document.getElementById("statusbar-display"));
Hope this helps someone. Cheers!

Categories

Resources