homepage Welcome to WebmasterWorld Guest from 54.167.179.48
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Create a smaller window, when opening in a new window?
Mandala72

5+ Year Member



 
Msg#: 4033231 posted 3:44 pm on Nov 28, 2009 (gmt 0)

Hi there

I have a site example.com

on my home page i have a 'vote' button for a site called 'top 100 bluewidget sites'
whereby you rise up their top 100 list the more people click the vote button on your page.

Format:

example.com/toplist/in.cgi?id= me

When someone clicks the vote button a new window opens (full screen) with the bluewidget top 100 page.
Can i make it so when they click on the vote button the window that opens is smaller and more discrete than a full screen. As i am concerned the window that opens is taking too much traffic away.

I'm trying to weigh up the benefits of having the button Vs not?

Cheers

Pete

[edited by: incrediBILL at 11:00 am (utc) on Nov. 29, 2009]
[edit reason] Use example.com only please [/edit]

 

rocknbil

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4033231 posted 7:53 pm on Nov 29, 2009 (gmt 0)

Pete,

Can i make it so when they click on the vote button the window that opens is smaller and more discrete than a full screen.

Your code is probably

<a href="http://www.example.com" target="_blank">link</a>

Which, depending on the browser config, will open a new window or a new tab.

The solution here is Javascript. The right way is to externally assign the link with window.onload so you don't have inline Javascript.

In the head of the document,

<script type="text/javascript" src="/js/my-javascript.js"></script>

contents of "my-javascript.js"


window.onload=function() { attachBehaviors(); }
function attachBehaviors() {
// we're only doing the one, but this function
// can attach behaviors to other elements.
if (document.getElementById('aff-link')) {
document.getElementById('aff-link').onclick = function() { return newWin(this.href); };
}
}
function newWin(url) {
var day = new Date();
var id=day.getTime();
var params='width=600,height=600,scrollbars,toolbar,resizable';
var win=open(url,id,params);
return false;
}

Now we only need to add the id to the link:

p><a id="aff-link" href="http://www.example.com" target="_blank">Link</a></p>

1. The link will still work with JS disabled, just as it does now.

2. With JS is enabled, return false from the function prevents the main window from navigating to the link in href.

3. No inline Javascript.

4. Do not remove controls by eliminating resizable, scrollbars, or toolbar from the window when navigating to an external site. You never know your user's environment and this can be very annoying if you do.

As i am concerned the window that opens is taking too much traffic away.

Don't be. People come to your site for it's content, fear of losing them through an external link is misguided. If your content is compelling, they will be back.

A redeeming factor is your voting function is not likely to be compelling enough to take them from the site, so it's appropriate to have a new window (IMO.) If this causes them to leave your site, they really have an attention span issue . . .

Otherwise, if you're too scared you're losing traffic, don't link to external sites, period. I frequently have this conversation with clients, and almost always lose the argument . . . so they have these annoying sites with a bunch of new windows opening which would otherwise be a portfolio piece, but unfortunately, is not. It's tragedy. :-)

An alternate and more complex solution is to have the voting thingy in an iframe, or a floating jQuery/thickbox window, or something.

Mandala72

5+ Year Member



 
Msg#: 4033231 posted 12:19 pm on Dec 8, 2009 (gmt 0)

Thanks for the code rock

so does just this section:
<script type="text/javascript" src="/js/my-javascript.js"></script>

contents of "my-javascript.js"

go in the head section?
and the rest in in a seperate code section.?

When i try this i see the code posted as normal text on my page

When i tried posting it all in the head section i also see the code as text?

rocknbil

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4033231 posted 7:45 pm on Dec 8, 2009 (gmt 0)

You do this in the head of the html document,

(your doctype goes here)
<html>
<head>
<title>And meta elements, etc.</title>
<script type="text/javascript" src="/js/my-javascript.js"></script>
</head>
<body>
<p><a id="aff-link" href="http://www.example.com" target="_blank">Link</a></p>
your page content
......

Then in the file "my-javascript.js", which is in a folder "js", is the javascript as posted, no "script type" or closing script tags.

'contents of "my-javascript.js" ' was just meant as instruction to put the code in a file named "my-javascript.js."

One thing I did do - if you are testing this on your local computer, it will probably not work, because of the the leading slash here:

/js/my-javascript.js

This means "start at the document or domain root" and is good practice as it allows you to use the same path wherever you move the file on your domain. Local computers aren't web servers so they don't know "document root." To test offline, just remove that leading slash, but it's a good idea to leave it in for any published files.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
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