homepage Welcome to WebmasterWorld Guest from 54.145.183.169
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
JS help
I want to launch 'onclick' in new window
limbo

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 384 posted 10:36 am on Apr 30, 2003 (gmt 0)

Hello

I have pieced together this code (I am learning JS as I go) for nice rollover table cells but need the onclick action to open the link in a new window

I have highlighted the incriminating text in bold below

Anybody know what I am missing here?

Thanks

Limbo

-----------------------------------------

<html>
<title> Why wont the page load in new window?</title>
<head>

<SCRIPT language=Javascript>
<!--
function mOvr(src,clrOver){
if (!src.contains(event.fromElement)){
src.style.cursor = 'hand'; src.bgColor = clrOver;
}
}
function mOut(src,clrIn){
if (!src.contains(event.toElement)){
src.style.cursor = 'default';
src.bgColor = clrIn;
}
}
function mClk(src){
if(event.srcElement.tagName=='TD'){
src.children.tags('A')[0].click();
}
}
//-->
</SCRIPT>

</head>
<body bgcolour="#ffffff">

<table width="100" height="20">
<tbody>
<tr>
<td onMouseOver="mOvr(this,'#999999');"
onClick="self.location='http://www.google.com', target='_blank'"
onMouseOut="mOut(this,'#EBEBEB');" valign=top bgcolor=#EBEBEB colspan=5><font color="#FF6666"></font></td>
</tr>
</tbody>
</table>

</body>
</html>

 

Paul in South Africa

10+ Year Member



 
Msg#: 384 posted 11:02 am on Apr 30, 2003 (gmt 0)

Something like

onclick='window.open("somepage.htm",null,"width=520,height=380,status=no, toolbar=no,menubar=no,location=no,scrollbars=no");'

should work. This will open the page in a new window of the specified size with no toobar etc.

limbo

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 384 posted 11:06 am on Apr 30, 2003 (gmt 0)

Paul

That was exactly what I needed :)

Ta

Limbo

Macguru

WebmasterWorld Senior Member macguru us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 384 posted 11:12 am on Apr 30, 2003 (gmt 0)

Hi limbo,

You could also put this script in a real HTML anchor to serve 2 purposes :

a) make it work for JS disabled browsers (about 8 % of market)
b) make this link readable by search engine spiders, so pop-up page is indexable

I use this in original page :

<a href="page.htm" onClick="window.open('page.htm','','scrollbars=XX,resizable=XX,
menubar=XX,toolbar=XX');return false;"
target="_blank">Anchor text</a>

And this in pop-up <body> tag:

onLoad=window.resizeTo(WWW,HHH);

ShawnR

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 384 posted 1:11 pm on Apr 30, 2003 (gmt 0)

The reason that your code in the firsst post didn't work is that you are using a <TD.. tag, and, unlike the <A tag, the <TD tag doesn't have a target= attribute.

Just to add to Macguru's post:

<a href="page.htm" onClick="javascript:window.open('page.htm','_blank','scrollbars=XX,resizable=XX,
menubar=XX,toolbar=XX,width=XX,height=YY');return false;"
target="_blank">Anchor text</a>

then you don't need the onLoad=window.resizeTo(WWW,HHH); in your pop-up.

Also, you don't need the javascript to do the mouse-over, you can do it in css:
A {
color: #FF6666;
background-color: #EBEBEB;
cursor: default;
}
A:hover {
background-color: #999999;
cursor: hand;
}

Then you won't need your <font color="#FF6666"></font> tag either.

Shawn

Macguru

WebmasterWorld Senior Member macguru us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 384 posted 1:17 pm on Apr 30, 2003 (gmt 0)

I add window size in onload event because I want visitors to know they are in a pop-up when they open the page from a search engine. This may not be applicable to all cases...

It is also a good idea to add a link to a 'normal' page in the pop-up.

limbo

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 384 posted 1:23 pm on Apr 30, 2003 (gmt 0)

Thanks Macguru

Correct me if I'm wrong but the code you have posted only works on text links?

I wanted a new window to open when the 'onclick' function was called anywhere over a table cell regardless of it's text content. This way I can save time making rollover images for a navigation menu and reduce download times of the page by having the rollover as JS.

Is it possible to do this so the link for the table cell will be spidered by SE's.

ShawnR

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 384 posted 2:19 pm on Apr 30, 2003 (gmt 0)

"...I add window size in onload event because I want visitors to know they are in a pop-up when they open the page from a search engine..."

OK, thanks

limbo

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 384 posted 2:37 pm on Apr 30, 2003 (gmt 0)

>> The reason that your code in the firsst post didn't work is that you are using a <TD.. tag, and, unlike the <A tag, the <TD tag doesn't have a target= attribute.

Cheers Shawn

I see that now :)

With the CSS, will it change the background of the entire table cell? or will it just change the background of the link text?

ShawnR

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 384 posted 12:59 am on May 1, 2003 (gmt 0)

>>> "...With the CSS, will it change the background of the entire table cell?..."

Just the text in the <A> tag. And I don't think you can define :hover css properties for other tags, just for <A>. There are 2 things that you can do, however:

1. Define height and width css properties of the <A> tag to be 100% (i.e. 100% of what contains it, being the table cell). Not sure if it will work, or how browser dependant it is. You can try it.

2. And this one I am sure of... Between the <A> and the </A> define a "<div> your link text </div>". Then in the css you can define the size of the div to be whatever you want.

Shawn

limbo

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 384 posted 10:40 am on May 1, 2003 (gmt 0)

Shawn R

Will give that a go.

But I am no expert with CSS. One of the many things on my list of 'things to learn'. Problem is that list seems to get bigger, faster than I can tick em off.

C'est la vie :)

ShawnR

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 384 posted 10:58 am on May 1, 2003 (gmt 0)

>>"..that list seems to get bigger.."
Me too. But the good news is that CSS is really easy. The other bit of good news is that technology changes so fast and technologies become obsolete, so if you don't get to half of the technologies in the list it doesn't matter. They'll be obsolete by the time you get to them. Problem is choosing which half ;)

WibbleWobble

10+ Year Member



 
Msg#: 384 posted 3:03 pm on May 1, 2003 (gmt 0)

Setting display: block on the anchor within the cell ought to give the same impression as the entire cell rolling over, iirc. Its been a while since I tried it.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved