JavaScript - How To Set Focus On Image In Popup.

I'm an online web design student and i'm currently taking a javascript class
Ive used java in the past but that was ten years ago so ive been spending time refamiliarizing myself with it
I've ran into a problem with the popup coding I was given to use
I have to take this image gallery and make the image thumbnails pop up into the larger view of the image using just the java pop up window, but somehow for some reason my coding is opening up the image in both windows, the window that the thumbnails are on and the separate window, its frustrating me to death! i have to keep hitting the back button on the main page whenever i click on an image link because it opens it in both windows simultaenously. i have to submit the project because it's due but i want to work on getting this problem resolved for the future. I've attached a plain text notepad document to my post so you can see the coding

Hello everyone. I am trying to add the functionality of having a mouseover popup image with multiple different popup images. I have found the code seen below and altered it for my uses and was hoping to find out if someone can tell me why I am seeing the same image with each mouseover. Thanks.

<script type="text/javascript">
function ShowPopup(hoveritem)
{
hp = document.getElementById("hoverpopup");

// Set position of hover-over popup
hp.style.top = hoveritem.offsetTop + 18;
hp.style.left = hoveritem.offsetLeft + 20;

// Set popup to visible
hp.style.visibility = "Visible";
}

function HidePopup()
{
hp = document.getElementById("hoverpopup");
hp.style.visibility = "Hidden";
}
</script>
<table>
<tbody>
<tr>
<td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867796.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">
</a>
<div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851557.jpg" /></div>
</td>
<td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867803.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">
</a>
<div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851637.jpg" /></div>
</td>
<td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867802.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">
</a>
<div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851627.jpg" /></div>
</td>
<td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867799.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">
</a>
<div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851597.jpg" /></div>
</td>
<td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867797.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">
</a>
<div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851567.jpg" /></div>
</td>
<td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867798.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">
</a>
<div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851577.jpg" /></div>
</td>
<td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867800.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">
</a>
<div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851607.jpg" /></div>
</td>
<td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867801.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">
</a>
<div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851617.jpg" /></div>
</td>
<td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867804.jpg" /></a></td>
</tr>
</tbody>
</table>
<table width="270" cellspacing="1" cellpadding="1" border="0">
<tbody>
<tr>
<td><a href="javascriptopImage('http://entrixsports.com//ir/oi/1000954/1856598.jpg');"><img width="96" height="100" border="0" align="middle" alt="" src="http://entrixsports.com//ir/oi/1000954/1856097.jpg" /></a></td>
<td style="text-align: center;"><a href="javascriptopImage('http://entrixsports.com//ir/oi/1000954/1856227.jpg');"><img width="65" height="100" border="0" align="middle" src="http://entrixsports.com//ir/oi/1000954/1856098.jpg" alt="" /></a></td>
<td style="text-align: right;"><a href="http://entrixsports.com/linkTo/1304219/1000954" rel="nofollow" target="_blank"><img width="60" height="102" border="0" align="middle" alt="" src="http://entrixsports.com//ir/oi/1000954/1856099.JPG" /></a></td>
</tr>
</tbody>
</table>

Here is an extract of my coding

Code:

function displayTitle(name) {
return name + " <a href='#' ><img src='direction.png' alt='Get driving directions'/></a>";

I have a map inserted into my aspx page.
When I click on one icon, the name and the direction.png picture will appear as a pop up box within the map

I want to make the direction.png picture into a link, whereby when I click on it, a pop up box will appear.

How?

I have a sitelock.com image on my website that when clicked on, shows info that my site is verfifed through them. However, when clicking on the image it opens up in a whole new window.
Pathetic sitelock.com will offer no support in getting this in a popup window.

I need some help please in getting this to open in a popup window that I can resize to any size I want and to only have the address bar showing up top, no toolbars or anything else.

My website is in joomla and I have a plugin called 'sourcerer' that will allow me to insert code anywhere i want.

Here is the code that sitelock.com gave me:

<a href="https://www.sitelock.com/verify.php?site=ecig-skins.com" target="_blank" ><img alt="website security" title="SiteLock" border="0" src="//shield.sitelock.com/shield/ecig-skins.com"/></a>

Any help is appreciated

Hi ,

Pls solve it

Javascript problem. I have a page called gallery.html in which we have photo albums.when u click on one of the photo albums opens up all images belongs to that album on same page ( javascript). when click on one of the images it has to open up in a popup ( including other images) which is happening but the probleem is that when u close popup and again click on same images popup is happening but images are not loading.


what might be the problem ..pls solve it .......its too urgent

thanks in advance

nagaraja kharvi

Hey guys i'm making a clothing website and i was just wondering.. if i have a bunch of thumbnail sized images on the page atm, how would i go about so if people put their mouse over the thumbnail, it would load the full sized T-shirt? I obviously have the images on my computer and host for the Thumbnails and the Real-image sized shirts.


Thanks

xx

Hey guys, I'm trying to accomplish something similar to what the develop on this site did: http://backlinkwatch.com/

When you click on the text area, a clickable image, with a 50% black opacity background overlay, and an exit either through a link or clicking outside of the box, shows up.

I want to accomplish the same thing, but have the image popup show up on the page load instead of requiring a click of the text area. In addition, I would like this popup only once to each IP address; ie, if you visit a page on my site, this will show up, but if you close it and refresh the page or visit another page on the site a cookie will be stored that knows its already been opened once and it won't try to do it again.

Thanks to anyone who can help me with this!

Just curious if anyone has a crossbrowser version of the Popup Image Viewer script that's in the Post a JavaScript section. Seems that all of the ones in there (original and modifications) are browser specific, whereas I need something that will work for all browsers, or at least IE and firefox.

Hi,

I'm kinda hoping this is possible but haven't found any reference to it...

I have a parent page that opens a popup on click that launches a sidebar navigation on the right of the screen and resizes the parent page. What I am wanting to do is create a second popup (approx 250px high) that opens below the navigation (which is only around 600px high) but I have noticed that even when you have no status bar in the popup windows, they can still end up overlapping because of additional tools or plugins that the viewer has in their browser.

Is there any way to get the popups to butt up against each other instead of overlapping? More like a relative popup?

Any assistance would be appreciated. :-)

Everything up until the focus line works, any ideas?

Code:

else {
	alert ("Please enter your Postcode correctly, this includes:\n \n * Correct Spacing - AA1 1AA \n * Correct amount of letters and numbers. \n \n Sorry if this causes any inconvenience, but it is to your benefit.");
	document.delAdd.postcode.value = "";
	document.delAdd.postcode.focus();}

Hello,

I am researching an issue in a rather big app which displays pdf files in IE window.
The issue is that inside javascript code we call 'window.setTimeout( win.focus() ...)' (for the child window), but it doesn't come into focus every time, seems a bit random when it does and does not come into focus.

At present I wrote a much smaller app + javascript to reproduce the issue, but it does not manifest in same way.
Specifically this is the confusing part:
window.setTimeout( function() {win.focus(); win.moveTo( 200 , 200 ); } , 500 , "JavaScript" );
the 'win' does move, but never comes into focus.

Any ideas about why the focus function does not accomplish what I'm trying to do?

Here's the code of my simplified app + html + javascript:

JAVASCRIPT:
Code:

var win;

function f(s) {
   	website="http://machine/apache/jsfnu/mytest" + s + ".txt";
   	if (!win)
   		win = window.open( website , "thetest" , "toolbar=yes,resizable=yes");
   	else
   	{
   		win.url = website;
   	}
   	win.navigate(website);
   	win.focus();
   	window.setTimeout( function() {win.focus(); win.moveTo( 200 , 200 ); } , 500 , "JavaScript" );
   }
   

function emitApplet() {
document.write("<APPLET CODE=\"mytest.class\" archive=\"mytest.jar,netscape.jar\" NAME=\"myApplet\"  MAYSCRIPT HEIGHT=1000 WIDTH=1000> </APPLET>");
}

function window_onUnload()
{
}

JAVA code:
Code:

import netscape.javascript.*;
import java.awt.*;
import java.awt.event.*;
public class mytest
extends java.applet.Applet implements ActionListener
{
	Button nextButton;
	Button prevButton;

	int _page=1;
	public void init() {
		System.err.println("init started");
		setLayout(new FlowLayout());
		System.err.println("setLayout done");
		nextButton = new Button("Next!");
		System.err.println("next button created");
		prevButton = new Button("Prev!");
		System.err.println("prev button created");
		add(prevButton);
		System.err.println("prev button added");
		add(nextButton);
		System.err.println("next button added");

		nextButton.addActionListener(this);
		System.err.println("next button action");
		prevButton.addActionListener(this);
		System.err.println("prev button created");
	}
	public void actionPerformed(ActionEvent evt)
	{
		if (evt.getSource() == nextButton)
		{
			doButton(++_page);
		}
		else if (evt.getSource() == prevButton)
		{
			doButton(--_page);
		}
	}
	public void doButton(int page)
	{
		JSObject win = JSObject.getWindow(this);
		JSObject doc = (JSObject) win.getMember("document");

		JSObject loc = (JSObject) doc.getMember("location");
		String s = (String) loc.getMember("href");
		String []args = new String[1];
		args[0] = (new Integer(page)).toString();
		win.call("f", args);
	}
	public void paint (java.awt.Graphics g)
	{
		g.drawString("Hello, World9!",50,25);
	}
}

HTML:
Code:

<script type="text/javascript" src="StartTest.js"> </script>
<html>
        <head>
                <title>try</title>
        </head>
        <body bgcolor="#fdf8ed" text="black" language="Javascript" onload="window_onUnload()">

                <center>
                        <script type="text/javascript">

                                        emitApplet();

                        </script>

                </center>
        </body>
</html>

Hi

I am opening a child window with the following href.

If it is a completly new window, it is opened and the focus shifts to it,
... but ...

if that href has been clicked on before and the window exists, the focus stays with the parent window and does NOT shift to the child

How can I make the focus shift ?

here is my href:


PHP Code:
echo "<a href='$Ad_detail' rel=\"external\" onclick=\"window.open (this.href, '$Ad_detail', 'height=800,width=960,scrollbars');  return false\" > 


I guess I need a "window. ??? focus();" in there somewhere - but I don't know what the ??? should be.

If you can help - many thanks

I've got a div named "iframe_container". Inside it are an iframe used to display floor maps and another div named "compass_rose". I have a function that moves compass_rose around the map based on an office number.

Now iframe_container is scrollable, it's only big enough to display about 2/3 of the map at any one time. I designed it that way to properly fit in the sharepoint site it's going in. To help some of our less tech savvy users it would be nice if iframe_container would automatically shift its view to keep the compass_rose visible at all times. Can that be done? Thanks.

<div id="iframe_container" style="width:1000px; height:635px; position: relative; overflow:hidden">

<div id="compass_rose" style="top: 10px; left: 10px; position: absolute; z-index: 2; visibility:hidden;"><img alt="Compass Rose" src="compass_rose_animated2.gif" width="80" height="80" /></div>

<iframe id="viewer" width="1600" height="635" src="front_page2.jpg" marginwidth="1" marginheight="1" name="viewer" scrolling="no"></iframe>

</div>

Hello,

I have a search textbox field which populates the results in a dropdown after searched.

But there is no way, to let users to explain to click or use the dropdown to see the results.. thus, I would like to have a focus on the dropdown, so after the user searches through the search textfield, and enter, the dropdown gets the focus so it will user friendly.

can anyone help me on this.
thank you in advance

Hi,

I need your help guys. I've got a little problem.

I have some smileys which I enter to a textarea when clicking on them. It works perfect, but once the user clicks on a smiley, the focus goes off of the textfield. I use document.getElementById('message').value += smileycode
It works perfectly, it enters the smileycode to the textarea.

My problem is... When I say document.getElementById('message').focus()
it goes back to where the cursors has last been so before the smileycode.

Instead of this, I want the focus to go back after the insertion of the code.

I hope it's understandable. And thanks in advance!