JavaScript 'onclick' problem!??

Ziycon · 19-04-2007 3:32pm #1

<a href="javascript:void(0);" onclick="window.open('images/front/1.gif','TestSite :: Photo Test','width=200,height=200')"><img src="images/front/1_tumb.gif" width="150" height="50" alt="Unknown" border="0"></a>

I cant get this to work, basicly when the user clicks on an image i just want the image to display in a window thats the siz of the image!??

smcelhinney · 19-04-2007 4:03pm

When you say "wont work", quantify? Open up the error console and let us know whats going on..

Also

<a href="javascript:window.open('images/front/1.gif','TestSite :: Photo Test','width=200,height=200');"><img src="images/front/1_tumb.gif" width="150" height="50" alt="Unknown" border="0"></a>

is neater. Not that there's a problem with the other one. I just dont like using onclick attributes. Effectively, it is an onclick, but.. meh..

Paste the javascript error here. I'll see what I can do.

Ziycon · 19-04-2007 4:19pm

Nothing is coming up in the error console, when u click on it now setup the way you said there, it jus opens in the current browser with this:

[object Object]

louie · 20-04-2007 8:05am

are you sure you have JavaScript turned on in your browser?
your code should work.

Ziycon · 20-04-2007 10:42am

Yup its definatly turned on! I get the same from the above message in both IE and FF!

louie · 20-04-2007 10:44am

have you got a live site we can check it out?

Eoin · 20-04-2007 10:59am

I don't think the second parameter should have spaces in it.

Try putting it into a function and calling it from the link.

<script type="text/JavaScript">
	function doWin()
	{
		var x = window.open('images/front/1.gif','test','width=200,height=200');
	}
</script>

[html]
<a href="javascript: doWin()"><img src="images/front/1_tumb.gif" width="150" height="50" alt="Unknown" border="0"></a>
[/html]

Not too sure if that will validate or not, didn't have time to test it.

smcelhinney · 20-04-2007 11:16am

He's right..

Never noticed that. Second parameter is window name, and needs to be single string variable. The " :: " may cause parse errors.

Change it to

<a href="javascript:window.open('images/front/1.gif','testSitePhotoTest','width=200,height=200');"><img src="images/front/1_tumb.gif" width="150" height="50" alt="Unknown" border="0"></a>

and that will work.

Ziycon · 20-04-2007 12:04pm

smcelhinney wrote:
He's right..

Never noticed that. Second parameter is window name, and needs to be single string variable. The " :: " may cause parse errors.

Change it to
<a href="javascript:window.open('images/front/1.gif','testSitePhotoTest','width=200,height=200');"><img src="images/front/1_tumb.gif" width="150" height="50" alt="Unknown" border="0"></a>
and that will work.

Still getting that [Object object] thing.

Eoin · 20-04-2007 12:21pm

Ziycon wrote:

Still getting that [Object object] thing.

Did you try using it as a function like I suggested above?

Ziycon · 20-04-2007 1:07pm

eoin_s wrote:

Did you try using it as a function like I suggested above?

Yes, nothing at all happens when i click on the image now!

Ziycon · 20-04-2007 1:07pm

louie wrote:

have you got a live site we can check it out?

Not at the moment as its being developed offline!

Eoin · 20-04-2007 1:08pm

Ziycon wrote:

Yes, nothing at all happens when i click on the image now!

Can you post the source to the whole page? only so much guess work we can do!

Ziycon · 20-04-2007 2:41pm

[PHP]<?php
include("file3.php");
include("file1.php");
include("file2.php");
dbConnect();
date_default_timezone_set("Europe/Dublin");
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Testsite :: Photos <?php title_bar(); ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="images/lg.ico">

<script type="text/JavaScript">
function doWin()
{
var x = window.open('images/front/1.gif','test','width=200,height=200');
}
</script>

<style type="text/css">
#image_block
{
background-image:url(images/front/<?php echo rand(1,front_image()); ?>.gif);
height:150px;
width:140px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
color:#FFFFFF;
}
</style>
</head>

<body bgcolor="#ffffff" text="#000000">
<div align="center">
<table width="730" border="0" cellspacing="0" cellpadding="0" style="text-align:center; margin:0px auto; border-left:#cccccc 1px solid; border-right:#cccccc 1px solid; ">
<tr>
<td id="top_block" colspan="3" height="80" bgcolor="#000000" valign="top">

</td>
</tr>
<tr>
<td width="140" valign="top" bgcolor="#FFFFFF">
<div align="left"><?php displayNav(); ?></div><br/><?php valid(); ?>
</td>
<td width="450" valign="top" style="background-color:#FFFFFF; text-align:left; border-left:#cccccc 1px solid; border-right:#cccccc 1px solid;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="main_top_block" height="20" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;">
<?php echo date("d F Y H:i"); ?>
</td>
</tr>
<tr>
<td id="image_block" valign="top">

</td>
</tr>
<tr>
<td id="main_base_block" height="20">

</td>
</tr>
<tr>
<td>
<div align="center">
<table width="95%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td colspan="2" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:15px;">
<div align="left"><u>Site Photos</u></div>
</td>
</tr>
<tr>
<td colspan="2" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;">
<div align="left">If you would like your photo featured on Testsite then send it to <a href="mailto:info@testsite.ie">info@testsite.ie</a><br/>
<br/></div>
</td>
</tr>
<tr>
<td width="170" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;">
<div align="left"><a href="javascript: doWin()"><img src="images/front/1_tumb.gif" width="150" height="50" alt="Unknown" border="0"></a></div>
</td>
<td width="100%" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;">
<div align="left">
Photo by: Unknown
</div>
</td>
</tr>
<tr>
<td width="170" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;">
<div align="left"><a href="images/front/2.gif" target="_blank"><img src="images/front/2_tumb.gif" width="150" height="50" alt="Gary MacWhale" border="0"></a></div>
</td>
<td width="100%" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;">
<div align="left">
Photo by: Gary MacWhale (<a href="http://www.macwhale.net" target="_blank">www.macwhale.net</a>)
</div>
</td>
</tr>
<tr>
<td width="170" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;">
<div align="left"><a href="images/front/3.gif" target="_blank"><img src="images/front/3_tumb.gif" width="150" height="50" alt="Geo D. Oliver" border="0"></a></div>
</td>
<td width="100%" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;">
<div align="left">
Photo by: Geo D. Oliver, Alaska (<a href="http://www.PHOTOhype.com" target="_blank">www.PHOTOhype.com</a>)
</div>
</td>
</tr>
<tr>
<td width="170" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;">
<div align="left"><a href="images/front/4.gif" target="_blank"><img src="images/front/4_tumb.gif" width="150" height="50" alt="DN Crew" border="0"></a></div>
</td>
<td width="100%" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;">
<div align="left">
Photo by: Unknown
</div>
</td>
</tr>
<tr>
<td width="170" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;">
<div align="left"><a href="images/front/5.gif" target="_blank"><img src="images/front/5_tumb.gif" width="150" height="50" alt="DN Crew" border="0"></a></div>
</td>
<td width="100%" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;">
<div align="left">
Photo by: Barry Delaney (<a href="http://www.flickr.com/photos/thebaz/" target="_blank">www.flickr.com</a>)
</div>
</td>
</tr>
<tr>
<td width="170" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;">
<div align="left"><a href="images/front/6.gif" target="_blank"><img src="images/front/6_tumb.gif" width="150" height="50" alt="Test Crew" border="0"></a></div>
</td>
<td width="100%" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;">
<div align="left">
Photo by: Barry Delaney (<a href="http://www.flickr.com/photos/thebaz/" target="_blank">www.flickr.com</a>)
</div>
</td>
</tr>
<tr>
<td width="170" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;">
<div align="left"><a href="images/front/7.gif" target="_blank"><img src="images/front/7_tumb.gif" width="150" height="50" alt="DN Crew" border="0"></a></div>
</td>
<td width="100%" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;">
<div align="left">
Photo by: Lee Furlong, Dublin (<a href="http://www.flickr.com/photos/37631907@N00/" target="_blank">www.flickr.com</a>)
</div>
</td>
</tr>
</table>

</div>
</td>
</tr>
</table>
</td>
<td width="140" valign="top" bgcolor="#FFFFFF">
<div align="left">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="header_block" height="20" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;">
<font color="#FFFFFF"><b>:: Stats</b></font>
</td>
</tr>
<tr>
<td class="static" height="20" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:8px;">
<table width="100%" border="0" cellspacing="0" cellpadding="2">
<tr>
<td style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;">
<div align="center">
<font color="<?php echo $stat_text; echo'">'; echo displayHitCount(); ?></font> have visited.<br/>
Newest member:<br/>
<font color="<?php echo $stat_text; echo'">'; display_Latest_User(); ?></font><br/>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="header_block" height="20" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;">
<font color="#FFFFFF"><b>:: Login</b></font>
</td>
</tr>
<tr>
<td style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;">
<table width="98%" border="0">
<tr>
<td>
<center><?php ssi_welcome($redirect_to = selfURL()); ?>
<?php ssi_logout($redirect_to = selfURL()); ?></center>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="header_block" height="20" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;">
<div align="left"> <font color="#FFFFFF"><b>:: Testsite on Bebo</b></font></div>
</td>
</tr>
<tr>
<td style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;">
<center><a href="http://bebo.com/" target="_blank"><img src="images/bebo.gif" border="0" alt="Visit Testsite on Bebo.com"/></a></center>
</td>
</tr>
<tr>
<td class="header_block" height="20" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;">
<font color="#FFFFFF"><b>:: Links</b></font>
</td>
</tr>
<tr>
<td style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;">
<?php display_Ad();?>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td id="base_block" colspan="3" height="20" valign="middle" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:8px;">
<div align="left">
<font color="#FFFFFF">
<b><?php echo $copyright;?></b>
</font>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
<?php closeConnect(); ?>[/PHP]

Eoin · 20-04-2007 2:53pm

Using IE: didn't work when I accessed the file from my filesystem (got an activex security warning). Did work when I put it in my wwwroot and accessed it through http://localhost/

Firefox: worked both times

Ziycon · 20-04-2007 4:59pm

eoin_s wrote:

Using IE: didn't work when I accessed the file from my filesystem (got an activex security warning). Did work when I put it in my wwwroot and accessed it through http://localhost/

Firefox: worked both times

Could be an option on my apache server not setup right? I did a standard installation over a year ago and have never had any problems!

Eoin · 20-04-2007 5:02pm

Ziycon wrote:

Could be an option on my apache server not setup right? I did a standard installation over a year ago and have never had any problems!

I doubt it's a webserver issue - couldn't be a popup blocker on your browser?

louie · 20-04-2007 5:14pm

try this and if it still doesn't work I don't know what else to say.

<script language="javascript">
    function PopupPic() { 
        window.open("your_page_name.php","","width=400,height=400,resizable,scrollbars=no,status=0");
    }                                            
</script>

<a href="javascript:PopupPic()"><img src="/path_to_image.jpg" align="left" border="0" /></a>

Ziycon · 20-04-2007 5:31pm

Ok, some progress, the window is coming up now(norton pop-up blocker), but when the new window opens with the image in it, the main page goes to a blank page with '[Object object]'??

louie · 20-04-2007 5:33pm

depending what are you using add return:false; to the onclick function

Ziycon · 20-04-2007 6:00pm

Cool, got it sorted now with FF but IE wont work???? im using this code:

<a href="#" onclick="javascript:window.open('images/front/1.gif','Photo 1','width=470,height=170,resizable,scrollbars=no,status=1');"><img src="images/front/1_tumb.gif" width="150" height="50" alt="Unknown" border="0"></a>

Just one last quicky, as you prob guessed i dont use JS that often, is it possible to change BG color and add text into these popup boxes?

louie · 20-04-2007 7:25pm

first what error do you get in IE?
Check some toolbars you might have for pop-up blockers in IE and not in FF.

second if you want to add style to your page, you need to open a page. Here you just open an image.

Ziycon · 21-04-2007 2:36am

I dont get any error, all i have is the little javascript error icon in the bottom left of the IE browser!

mewso · 21-04-2007 1:04pm

Well thats an error. Double-click on the icon to see it.
Someone already mentioned about using return false at the end of the onclick function. This would allow you to have the href link to the image too so someone with js turned off would also see the image but then I imagine standards and accessibility are not a priority here especially considering inline js is being used.

Ziycon · 21-04-2007 1:53pm

musician wrote:

Well thats an error. Double-click on the icon to see it.
Someone already mentioned about using return false at the end of the onclick function. This would allow you to have the href link to the image too so someone with js turned off would also see the image but then I imagine standards and accessibility are not a priority here especially considering inline js is being used.

Nothing will come up when i click the error icon! I want everything to be accessibile and conform to web standards! Any pointers with JS are greatly apreciated!

louie · 21-04-2007 1:55pm

from the accessibile point of view, you are going tthe wrong way about it.
everything above is not valid. There are other ways of doing it if that's what you have in mind. Google for it.

smcelhinney · 21-04-2007 5:30pm

Ziycon wrote:
Cool, got it sorted now with FF but IE wont work???? im using this code:
<a href="#" onclick="javascript:window.open('images/front/1.gif','Photo 1','width=470,height=170,resizable,scrollbars=no,status=1');"><img src="images/front/1_tumb.gif" width="150" height="50" alt="Unknown" border="0"></a>
Just one last quicky, as you prob guessed i dont use JS that often, is it possible to change BG color and add text into these popup boxes?

You've gone back to using spaces in the parameter for window name? Whats the point in giving advice if you dont listen to it?

The window name parameter cannot have spaces in it, this is how you reference the window as an object.

use Photo_1 if you need to. Why do you insist on having a space in the parameter? Is this a requirement or something?

mewso · 21-04-2007 6:01pm

O.k. heres a few links worth checking out:-

Unobtrusive Javascript Popup Windows - this shows how you can create an external js file to handle all links using css class declarations (behaviours). It still uses the window.open method which pop-blockers will block.

Lightbox - this is an excellent script for opening images in particular. It opens as a modal pop-up and dims the page behind. If you search the web this method has been adapted for use with pdfs, movies etc. Well worth giving a go.

Ziycon · 21-04-2007 6:29pm

smcelhinney wrote:

You've gone back to using spaces in the parameter for window name? Whats the point in giving advice if you dont listen to it?

The window name parameter cannot have spaces in it, this is how you reference the window as an object.

use Photo_1 if you need to. Why do you insist on having a space in the parameter? Is this a requirement or something?

Sorry, it was a slip, i dont us JS at all, i appreiate all the help you guys are goiving me and no its not a requirement!
It still doesn't work when i remove the space!

P.S. - Thanks for those links musician!

JavaScript 'onclick' problem!??

Comments