displaying website in popup with javascript on element hover - javascript

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

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()"
);

use jQuery to disable all clicking actions except scrollbar

I am trying to make a page COMPLETELY UNCLICKABLE (both right click and left click) and to display a message when someone clicks. Since I know that this will raise lots of questions such as
"why would anyone ever want to do this...this is stupid...then nobody
can navigate the site...and it doesn't protect your content
anyway...etc"
here is the explanation of my purpose. I have a page that is at the moment only a graphic mockup of what the finished website will eventually look like. No matter how many times I explain that the mockup is ONLY AN IMAGE and not a real navigable website, they still email me to say that they cannot click on the menus and links. Since it is a single page mockup, I want to pop up an alert() message (can't use a modal because you can't click to dismiss it if clicking is disabled) to let them know that they have clicked something non-functional. I am trying to do this in as few lines of code as possible, and have the following working at the moment:
<script>
$('html').mousedown(function(event) {
event.preventDefault();//To prevent following the link
alert('Demo Graphic Only...clicking on stuff will NOT work at this point.');
});
</script>
The issue is that when using .mousedown I capture the user trying to click on the browser scroll-bar to scroll down. I was surprised by this since it is not part of the actual PAGE CONTENT but rather a part of the BROWSER...but it is catching it nonetheless. I tried using .click in place of .mousedown however only seem to catch a normal (left) click in that case... Does anyone know how to easily (minimal lines of code if possible) capture the left AND right click event, but allow user interaction with the browser scrollbar?
Try this :
$(document).click(function(event) {
event.preventDefault();//To prevent following the link
console.log('Demo Graphic Only...clicking on stuff will NOT work at this point.');
});
This Function will be called when click is made on the page , not on the Scrollbars
Try to use
event.stopPropagation();
or
event.stopImmediatePropagation()
For people who come across this question, an alternative approach, good especially if you need to prevent mousedown specifically:
Put the scrolling content in a wrapper element and prevent mousedown only on the inner element. Set the wrapper element to overflow: auto; height: 100%;

Autoclick where is mouse position with javascript

I have search this kind of post and i didnt find anything.
So my question is :
Is it possible after a time make an auto click on current position mouse?
Example: If mouse is over link blablaba.com click on link or mouse over is over another link so click on that link.
Sorry for my English.
Thank you.
I want to add code on my website, and after a time do autoclick on current position of mouse.
You have this all wrong. Events like "click" are used to trigger function calls. You don't need to trigger the event manually, just call the functions that were about to be called if someone triggered it.
Specifically, if you want the user to land on a new page(that happens when the user clicks a link) you can use redirects

Popup div on close window

I saw this post: pop-up div over parent window and the message about yensdesign, which is fine, but it still doesn't "quite" cover what i would want, which is:
At this moment I have two popups. One for when the window closes and the other pops up when the visitor has been on the page for x seconds. Downfall of this is:
1. It's [fill in]-ugly
2. One of them looks like a div, the other like a popup (in firefox), while they look like very simple and ugly popups in other browsers.
So I would like to have the same function, but then with divs, so that they will look nicer and behave appropriately amongst all browsers.
The only stuff I can find has code for closing divs... so could someone help me out please?
Edit: See http://www.cornerstws.com/test.html for the simple javascript solution that I had so far.. (popup appears after 3 sec and the other popup appears when you close the window (or refresh.. not nice either)).
as i understood from ur question that you want a popup that can be triggered through java script function
u can check this blog for a simple popup
http://blog.theonlytutorials.com/a-very-simple-jquery-popup-ready-to-use-code/
and then u can restyle it to meet ur needs and u can use this function
$('#pop').click();
rather than clicking the link to open the popup.
hope this answer helped you

Hover text at mouse created from firefox toolbar add-on

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

Categories