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
Related
I have a single page website which has large divs as a section/page. I have managed to get the anchors to work etc however the problem I am having is that the CSS a:active does not work in this scenario because the actual div is not linked to the anchor link at the top.
There is a span above each div which is the height of the header so that the sections do not get hidden behind it.
I was wondering if there is any way (using CSS/JavaScript) to get the anchor links to change color by themselves when the user is on a specific section of the page.
A similar example is on this web page if someone wants to see it, this site actually uses an indicator rather than changing the links color. However I'm sure they're using JS because when I do inspect element in Google Chrome, as the indicator moves the CSS also changes position.
I guess you can.
$('#specific-section').bind('mouseenter', function(){
$('a').css('color','yellow');
}).bind('mouseleave', function(){
$('a').css('color','white');
});
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!
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.
chrome extension - popup page has links. need to show the description on hover of the links as a popup to the left side of the link(means the description div will come outside of the extension wondow).(popup page has popups)
similar to vertical drop down menu...
should work in the chrome extension.
I tried a lot , but its not working in chrome....
I have an idea for firefox ....
take a main div .
Take 2 more divs inside the main div both of same size and also give the positions properly.
show the links in the 1st div and the descriptions in the 2nd div...
Make the 2nd div's background = transparent. (CSS property)
and on hover of the links show the respective description div in 2nd div in front of the links..
Try it out......
Your link text
You need the TITLE in your links... this will display inside your popup...
"Nothing in the popup can be outside the window." as kinlan said.
i saw this on a site a couple of days ago and i cant seem to find it again.
in any case, this is what was on the site:
the page opened regularly when you entered the url. upon clicking one of the links on the page, it "transitioned" to the next page (there was a color change). and the url in the address bar was changed to reflect that. eg: if the background was blue on site.com, when clicking on the about link, the background would change to green and the browser would show site.com/about. and so on.
also, if the url entered was site.com/about, the bg would be green and on cliking the home page, the site would transition from green to blue and browser would show site.com
im interested in finding out how this was done. searching on google got me the meta-refresh tag, but the ffect was much more complex and worked on all browsers.
is there any other method out there?
There are a lot of realizations. The simplest way is jQuery
You can find page transition generator right here :
http://www.designerwiz.com/mf.htm?http&&&www.designerwiz.com/generator/dhtml_page_effect_generator.htm
if you wanna do it via jQuery, here is a tutorial about it :
http://weston.ruter.net/projects/jquery-css-transitions/
and sample :
http://weston.ruter.net/projects/jquery-css-transitions/code/example.html