?
Solved

How to specify new window dimensions in html?

Posted on 2009-02-15
10
Medium Priority
?
762 Views
Last Modified: 2012-05-06
I'm learning html and I'm creating a link calling a new window. I'd like this new window to have specific dimensions I would specify. After searching on the web (including on EE) I've tried a couple of things without success. See my original line and an example of what I tried.

Additional question: What is the difference between a new window or a popup window (if there's a difference)?
ORIGINAL LINE:
<a href="description-activites.html#sculpture" target="_blank">Défi sculpture</a>
 
TRIED:
<a href="javascript:;" onClick="javascript:window.open('description-activites.html#sculpture','width=400,height=100,top=100,left=100')">Défi sculpture</a>

Open in new window

0
Comment
Question by:gahute
  • 5
  • 5
10 Comments
 
LVL 39

Accepted Solution

by:
Roger Baklund earned 2000 total points
ID: 23646102
The window.open method takes three parameters: url, name and settings. Try this:

<a href="javascript:;" onClick="javascript:window.open('description-activites.html#sculpture','windowname','width=400,height=100,top=100,left=100')">Défi sculpture</a>
0
 
LVL 39

Assisted Solution

by:Roger Baklund
Roger Baklund earned 2000 total points
ID: 23646116
>> What is the difference between a new window or a popup window (if there's a difference)?

Using target="_blank" works in any browser, while window.open() requires javascript. window.open() allows setting size (as you are trying now) and some other configuration, like removing the toolbar. Except from that, it's the same type of window, i.e. a "normal" browser window.
0
 

Author Comment

by:gahute
ID: 23646218
Thanks cxr,

2 more questions:
1) what's the use of the parameter "name" (I didn't change it and it works...)
2) Do you have a list of all the existing settings for window.open?
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 39

Assisted Solution

by:Roger Baklund
Roger Baklund earned 2000 total points
ID: 23646242
1) You can use it as a target for other links, to open them in the previously opened window:

 <a href="page2.html" target="windowname">Page 2</a>

2) Check the link below. All settings are not available in all browsers, this page has a good overview of what works where.

http://www.quirksmode.org/js/popup.html
0
 

Author Comment

by:gahute
ID: 23646266
In my case, I want to use the new window to show the description of some activities listed in a page. Will the target "windowname" work if the window isn't open yet?
0
 

Author Comment

by:gahute
ID: 23646466
Ok. I tried it and it's correct.

I read your link but how can I incorporate the focus in my code to make "windowname" on top every time?
0
 
LVL 39

Expert Comment

by:Roger Baklund
ID: 23646650
newwindow=window.open(...
if(window.focus) newwindow.focus();
0
 

Author Comment

by:gahute
ID: 23655815
Where do I incorporate it in my line? Before, within, after?

<a href="javascript:;" onClick="javascript:window.open('description-activites.html#sculpture','windowname','width=400,height=100,top=100,left=100')">Défi sculpture</a>

Thanks,
0
 
LVL 39

Expert Comment

by:Roger Baklund
ID: 23657962
You can append it in the onclick event:

<a href="javascript:;" onClick="javascript:newwindow=window.open('description-activites.html#sculpture','windowname','width=400,height=100,top=100,left=100');if(window.focus) newwindow.focus();">Défi sculpture</a>
0
 

Author Comment

by:gahute
ID: 23700380
Thank you cxr!
0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Suggested Courses

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question