Hover text at mouse created from firefox toolbar add-on - javascript

I'm creating a firefox add-on, and I have a situation where if someone clicks on a specific item in my toolbarbutton menupopup, I want to display some text to appear beside the mouse for a couple seconds. I don't mean mouseover text, because when they click on the item, then I close the menupopup. I mean something like what's shown at this site:
http://www.kingsquare.nl/cursormessage
The normal way of doing this would be with javascript and a div that would have the text I want to show. Unfortunately, I've discovered that the toolbarbutton can't have an effect on the main window, which is where I'd need to place the div to show. I've tried getting Jquery to work and haven't been successful either.

You can use panels together with openPopup() and hidePopup(). Remember to set the attribute noautohide to true on the panel.
More info on panels - https://developer.mozilla.org/en/XUL/panel

Related

Protractor CCS Selector can't locate element on hidden toolbar

I'm clicking on a link that opens a new window with a PDF document. I switch to the new Window, which I verified that I was on by getting the URL. The window has a toolbar at the top which is visible for a few seconds when the window opens, and then hides itself unless you move the mouse again. I'm trying to click on the Download button, but anything I try gives an error that the CSS Selector can't find the element. I'm suspecting it's because of the nature of the animated toolbar, but I'm not sure. At first I was just trying a regular click:
element(by.id('download').click;
And that was not working. So I tried navigating the mouse to click on it:
browser.driver.actions().mouseMove(element(by.id('download'))).perform();
element(by.id('download')).click();
I've also tried selecting by css:
element(by.css('#download').click();
All give me -Failed: No element found using locator.
Could someone please tell me if what I'm doing is possible, and if so, how I might be able to accomplish it?
screencapture
Element
This is more of a workaround than a solution, but what works for me with elements that are for some reason not visible (covered with other elements or working only on hover) is to just inject a script. Like:
browser.executeScript(
"document.querySelector('[id=\"download\"]').click()"
);

How to figure out browser scrolling issue

I am developing a web part within Sharepoint that makes heavy use of 3rd party web services.
In my page, I have a view element (div#act1_show) that is collapsed. When I click on the expand button, the data is shown. No problem there.
The data of that element can be edited when that element is collapsed when I click the edit button. This actually hides the view element (div#act1_show) and shows a different edit element (div#act1_edit). No problem there.
However, when I first expand the view element (div#act1_show) and then click the edit button to open the edit element (div#act1_edit), the edit element is opened but now I can now longer scroll the page. That is, I can no longer use the scroll bar on the right of the browser window.
I've looked for any css position fixed but found none.
So, can anybody suggest how I go about figuring out how to find the cause of no longer being able to scroll with the browser's scroll bar?
Thanks

displaying website in popup with javascript on element hover

I am trying to have a dynamic popup window in an html page. the popup will appear when the user hovers a word. and in the popup window i want to call a webpage with the hovered word as parameter. It does not need to work on every word in the page. Only hover on the words i select will work like that.
For example i have a text "hello this is a sample text" in my html page and the user hovers the mouse on the word "sample" a popup will appear and in the popup i will show the following page "www.blabla.com/?word=sample"
hope i was clear.
I want it to be able to work on a static page. I am very new to javascript. I am not even sure where to start so any help would be appreciated.
Thanks.
edit: i want the popup to be a modal popup.
That is very basic, read tutorials on http://www.tizag.com/javascriptT/javascriptevents.php and http://www.w3schools.com/jsref/met_win_open.asp
But I can tell you, that with this sort of method, browsers will trigger their pop up blocker.
Get the elements you want to have this effect, loop over them, add event listeners to each of them which pops a window up.
This is a crude implementation of something like this, where the words have the class popup around them:
[].slice.apply(document.getElementsByClassName('popup')).forEach(function (elem){
elem.addEventListener('mouseover', function (){
window.open('http://google.com/?q=' + this.innerHTML);
}, false);
});​
Demo

How to make a full page JS and CSS menu

To be more specific, how do we create a JavaScript menu with CSS styling that occupies the whole page, but the menu bar will be shown. There will be an icon on the top-left. Upon clicking that icon or symbol, the menu should appear and that image should glow. And after cliking it again, the menu goes away. I tried a lot but failed. I am just 14 year old. Please help me.
If there is something like that already which is open source, please post a link so that I can get on it.
UPDATE: I did it own my own.
Try this site here which gives you different menu bars to choose from. all you need to do is download a menu and change the menu details inside the script so that you can change menu names, add more or fewer menu tabs, etc. It uses jquery and contains its own css page which you can manipulate.
In order to hide and show the menu, how about using something like a html tooltip, except for hovering over the button to open/hide the menu, you can set it so that if you click the button, it opens/hide the button ?
Try this its opensource
http://www.interspire.com/content/2005/12/07/building-an-expanding-dhtml-menu-with-css-and-javascript/
http://www.noupe.com/css/13-awesome-java-script-css-menu.html

Watermark label positioned over top of select stops click propagation

I've created a watermark/hint solution for a drop down where I absolutely position a label over top of a select element.
Unfortunately, when the user clicks where the label is, the drop down doesn't open - obviously the click is being blocked by the label. Is there any way to have it so when a user clicks on the label, the drop down is opened? I understand you can't open a dropdown via javascript but can you do something like hide the label when the click fires?
Edit: Creating a custom drop down like gmail does on their dropdowns is not a viable option.
CSS can handle that: add pointer-events: none to the label.
That's supported in all modern browsers.. except for current versions of IE (and Opera), so you'll still unfortunately have to use JavaScript.

Categories