MegaZone (zonereyrie) wrote,

  • Mood:
  • Music:

KBlogger: Variety Pack

I'm back... I've got to break this habit of not getting to this until the last minute Friday night though. I was going to write about an issue Kath inadvertently inspired in a thread on Webmaster Safari, but I decided I need to do more work to do it justice, so maybe next week. In lieu of that, there are a few short things that aren't really enough for their own entries, so I'll make this a variety pack.

First up, I've fielded the same question recently in a couple of different places - how do you open a link in a new window? Well, there are two main ways to do that, the target attribute and/or JavaScript. The former is nice because it works in most any browser and it has no dependency on JavaScript. On the other hand, JavaScript gives you a lot of control over the appearance of the new window.

The target attribute was introduced with frames. The idea being to 'target' a link to load in a particular frame. So in normal use it looks like <a href="newpage.html" target="frame_name">link text</a>. When you click on that link 'newpage.html' would load in the fame named 'frame_name'. However, a side effect is that if there is no frame, or window, by that name, a new window will open with that page loaded in it. There are also four reserved names:

  • _blank - Loads the document in a new, unnamed window.
  • _self - Loads the document in the same window/frame the link was in. This is what usually happens.
  • _parent - Loads the document into the frameset parent of the current frame. If there are no frames, or the current frame doesn't have a parent, it behaves like _self.
  • _top - Loads the document into the full window, replacing completely any current frameset. Again, acts like _self when there is no frameset.

Basically, to be safe, never use a name starting with an underscore and you won't conflict with any reserved terms. Now, if you use another name and a new window is opened, the window will have that name. So any links with the same target will open in the same window.

The downside to target is that you have no control over the size of the new window (generally it will open the same size as the current window), the location of the window, or what features it has. You get another full browser window, which isn't always what you want. To get something else you need to use JavaScript.

You use JavaScript via the onclick event handler on the link anchor. The handler will call the JavaScript function. This function takes four optional arguments, in this format:, name, features, replace).

url should be fairly obvious, it is the URL of the document to load into this window. It is optional, but it is generally a bit silly to open a new window and not load anything in it, so you'll likely always have a value for this.

name is the name to give the window, in the same way that target names a new window. This is optional (similar to using target="_blank"), but if you name the window then you'll be able to address it later if needed. And it someone clicks on the same link repeatedly they won't get a bunch of new windows with the same content, it'll load in the same window.

replace is true/false, if true the new document will replace the current document in the window's browsing history. (Yes, I skipped features for a second - it is the most complex.)

features is a comma-separated list of features for the new window. The list is in the format of feature1=yes,feature2=no,feature3=no,etc. Most features have yes/no values, while width and height attributes take a positive integer, which is a size in pixels. The DOM reference has an extensive list of the features, but most of them are browser specific, and you will normally only use a handful:

  • left - The offset, in pixels. for the left side of the new window from the left side of the user's desktop.
  • top - The offset, in pixels, for the top of the new window from the top of the user's desktop.
  • height - The height, in pixels, of the new window.
  • width - The width, in pixels, of the new window.
  • menubar - yes/no, toggles the rendering of the menubar on the new window.
  • toolbar - yes/no, toggles the rendering of the toolbar on the new window.
  • location - yes/no, toggles the rendering of the location bar on the new window.
  • directories - yes/no, toggles the rendering of the personal toolbar/bookmarks toolbar/links bar on the new window.
  • status - yes/no, toggles the rendering of the status bar on the new window.
  • resizable - yes/no, determines if the new window is resizable.
  • scrollbars - yes/no, toggles the display of scrollbars on the new window. I recommend always using yes, the browser will render them only if needed.

Those are all the features you're ever likely to use, and often you won't be using all of these.

Now, a common sin is for a web developer to do something like <a href="#" onclick=", etc)">. DO NOT DO THIS! That link will only work with JavaScript on. Not only will it result in a broken link for some surfers, but search engine spiders will be unable to follow the link as well. For most folks, that's a bad thing!

Now you have two ways to open links in a new window, but which do you use? Simple - both. The two methods can be used on the same link anchor without conflict, so you get the best of both worlds.

This link uses only target.

This link uses JavaScript with no features. Turn JavaScript off and it should load in the same window like a normal link.

This link uses both target and JavaScript. And the JavaScript features should open a new window with an 800x600 viewing pane, with all of the browser chrome off, but it will be resizable and have scrollbars if needed. Turn JavaScript off and you'll see it fall back to target.

This is the anchor tag for the last link: <a href="" target="PayCash3" onclick="'','PayCash3', 'width=800,height=600,resizable=yes,menubar=no,toolbar=no,status=no,location=no,directories=no,scrollbars=yes'); return false;"> The 'return false;' cancels the default action of the link if JavaScript is on. Without that the browser would load the page twice - once do to 'onlick' and once do to 'href'. (Which is also a way you can have one link load multiple documents, since they don't have to both do the same thing.)

Now, I am not going to get into the debate over pop-ups being evil or not. They're a tool, like any other tool they can be used for good or for evil - as Ani DiFranco sings, "Every tool is a weapon, if you hold it right." Pop-ups can be damn annoying when mis-used, but sometimes they are useful and really the best way to handle a given situation. I advise using them sparingly, there is often a better solution. For example, I've seen them used for 'pop-up' help messages on some sites. I think those would be better handled with a DIV that has its visibility toggled on/off, you could even do it with just XHTML+CSS, no scripting. Anyway, it is a tool, use it wisely. I do strongly advise never setting resizable or scrollbars to no, that's very annoying. In fact, if you leave any feature out of the list, it defaults to 'yes'. I put a couple in the example to be explicit about it.

OK, another question I've fielded is how can you have a scrolling area of text in a page without using frames? The answer is clever use of CSS. The magic is really in the overflow property - in particular overflow: auto;. If you use CSS to set the size of an object, and set overflow to auto, if the contents of the object are too large to fit in the provided space, then you get scroll bars on the object. Simple really. Normally you'd do this with an element like DIV. Here, check out this demo page I just whipped up. Note that there are no frames, or iframes, used on that page. The scrolling regions are simply divs.

Now, if you're using something other than IE, the red box on the left demonstrates an interesting way to do this. It doesn't have a fixed height, but the top and bottom are fixed relative to the browser pane. I say something other than IE because IE's support for position: fixed; is broken. You can still use it in IE if you use the library I mentioned in an earlier entry. I just didn't feel like it for this quick demo. I've used that effect in production, see the list of press releases on the left side of this page.

By the way, while you're checking out that production page, try the menus across the top. The pop-up menus are also pure XHTML+CSS. You can really do a lot with CSS, many things people turn to scripting for you can do with just CSS.

So, there you go, scrolling regions in a page without resorting to frames. Now, just like pop-ups, they can be abused. Try to resist putting a dozen little scrolling regions on a page, that's nearly as bad as using frames. But it can be used to good effect too. Just another tool in your toolbox.

While I have your ear, well, eyes, unless you're using a screen reader, and then I guess it is ear, or fingers if your using a braille output... hmm... OK, while I have one or more of your senses engaged, I want to encourage you to donate to any shareware, freeware, or open source projects that produce products that make your life easier. If you use the IE7 library, toss Dean a donation. If you find Firefox useful, donate to the Mozilla Foundation. If you use software which had development hosted by SourceForge, drop them a little something. Sure, you're probably thinking "I use freeware so I don't have to pay!" Which is probably how many people feel.

But think of what a commercial package would cost to do the same thing, or think of the time and effort you've saved because someone else produced a tool, library, etc, that made your work easier. Help ensure those tools remain available and updated, and continue to improve. You don't have to send a lot, just what you feel it is worth. Personally if I find myself using something repeatedly, or if it really makes my life easier, I'll register it if it is shareware, or drop a donation if it is freeware and they accept it. And it never hurts to drop by the support boards, or send an email, just to say "Thanks" if someone's work helped you out. Developers are human too, and it is always nice to know your work is appreciated. Even nicer when you have a few bucks for pizza and Jolt to keep developing. Support your neighborhood developer, they support you!

OK, there were a couple of other things I was thinking I'd put in here when I started, but it is already getting kind of long, so I'll save those for the next time I need to do grab bag entry. I hope to have an interesting entry next week, I just need to make the time to write it up, get some illustrations together... we'll see. Thanks for reading, and, as always, if you have any questions or something you'd like to see covered, just let me know. Until next time!

Note: I just realized LJ doesn't allow some of the markup I used, so the examples don't work as intended, etc. You can see the page as intended here.

Tags: css, geek, kblogger, software, web
  • Post a new comment


    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded