Play a video in its own window or bring up a contact form. Controlling the window properties can add a professional touch to any website. Learn how to use the open method to bring up a web page in a new window.

View an Example: Chocolate Souffle Video From YouTube

View another Demo: This video takes longer to load.

Bring Up A Contact Form

Adding a YouTube Video into a new window:

• Bring up a Video in YouTube.com
• Right-mouse click on the video and select “Copy embed html”. (HTML code is copied to the clipboard.)
• OR Click the Embed link below the video. Copy the selected code.
• Paste code into a new html page
• Use the open.window to call your new html page.

Here’s the open window call:

 
<a href="#" 
   onclick="window.open('http://www.sonrisasdental.org/video.html', 'sonrisasdental', 'toolbar=no,location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=550, height=450');" 
   class="uline" >View the Demo
   </a>

open method parameters:

• URL – instead of adding the url to the href attribute, it is the first parameter of the open method. Add a # to href so it will behave like a hyperlink.
• Name – gives a name to the window. (This is not the page title.)

Features – here are some features:
toolbar = {yes | no} – display the toolbar
location = {yes | no} – displays the browser’s location in the window.
directories = {yes | no} – displays the directory buttons.
status = {yes | no} – displays the window’s status bar.
menubar = {yes | no} – displays the menus.
scrollbars = {yes | no} – controls the display of scrollbars for the window.
resizable = {yes | no} – can the window be resized?
width = {number} – defines the width of the window in pixels.
height = {number} – defines the height of the window in pixels.
left = {number} – left margin of the window in pixels.
right = {number} – right margin of the window in pixels.

Here’s an implementation using a button instead of a hyperlink:

Here’s the call from a button:

 
<form method="POST" name="contactjan" >
<input type = "button" value = "Contact Jan" 
  onclick = "window.open('http://www.janbthomas.com/jansblog/contact/','contactjan','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=550, height=500');" />
</form>

RELATED ARTICLES:
http://www.pageresource.com/jscript/jwinopen.htm

Enhance your website navigation with a drop down menu. Here’s a quick and simple implementation of a menu using a select box and a few lines of JavaScript. With Select And Go users pull down the menu, make a selection and instantly navigate to their chosen web page. With Select And Push Go, a Go button press is required after the selection is made.

View Demo

1. SELECT AND GO

Add this javascript into the head section of your html:

<script language="JavaScript" type="text/JavaScript">
function changePage(newLoc)
 {
   nextPage = newLoc.options[newLoc.selectedIndex].value
 
   if (nextPage != "")
   {
      document.location.href = nextPage;
   }
 }
</script>

Add this html into the body of your web page:

<form method="POST" name="SelectAndGo" >
  <label>SELECT AND GO:  &nbsp;&nbsp;</label>
  <select name="selectedPage" 
    onChange="changePage(this.form.selectedPage)">
    <option value = "">Make a Selection</option>
    <option value = "http://www.yahoo.com">Yahoo</option>
    <option value = "http://www.nytimes.com">New York Times</option>
    <option value = "http://www.amazon.com">Amazon.com</option>
  </select>
</form>

2. SELECT AND PUSH GO

In this solution, the user must press the GO button after the selection is made.

The JavaScript piece is the same changePage function call as above.

Here’s the HTML code to insert into the body section:

<form method="POST" name="SelectAndGo" >
  <label>SELECT AND PUSH THE GO BUTTON:  &nbsp;&nbsp;</label>
  <select name="selectAndPushGo" >
    <option value = "http://www.yahoo.com">Yahoo</option>
    <option value = "http://www.nytimes.com">New York Times</option>
    <option value = "http://www.amazon.com">Amazon.com</option>
  </select>
  <input type = "button" value = "Go Now" 
    onClick="changePage(this.form.selectAndPushGo)" />
</form>

The Select And Go solution is used to change photo galleries: View Gallery

RELATED ARTICLES:

http://www.netmechanic.com/news/vol3/javascript_no12.htm
http://www.sbrady.com/hotsource/javascript/selectandgo.html

Firefox: When you click on a hyperlink image there is an active box that frames the image. If you happen to stay on the page after an image is clicked, the active box stays. Here’s one way to prevent this:

This has to be put into the css:

/* Remove focus rings (dotted rectangle) around active tabs */
tab:focus > .tab-middle { -moz-outline: none !important }

If that doesn’t fix the problem, add this into the css as well:
a
{
  outline: none;
}

 Hopefully, that will take care of the problem.

 http://www.myxmlproject.com/projects/autogallery/autogallery.php5?category=../imagesphotos

This webpage takes portrait and landscape format photos from a folder on the server and reformats them into a 40×40 thumbnails.  I created an XML file photos.xml – When xslt styling is applied to photos.xml the images are displayed in a Photo Gallery.

Previous attempts to display thumbnails in HTML were distorted.  I found an article on www.phpit.net that described how to improve the look of these images:
http://www.phpit.net/article/image-manipulation-php-gd-part2/

This is a New Photo Gallery with thumbnails on the left and the enlarged selection on the right. This technique uses php in a server-side xml transformation.

http://www.myxmlproject.com/projects/autogallery/displayautogallery.php5?category=../imagesphotos 

Here is yet another attempt at a photo gallery.  In this version, the photos are listed in an xml file and formatting is defined by xsl.  The key to this successful attempt lies in the very small but important php file that sets up the transformation.  Previous attempts at creating a photo gallery using only xml and xsl files failed in firefox because the javascript didn’t run.

Click to see the xsl file.

Click to see the xml file.

Here is the php code:

<?php
 
if (isset($_GET['category']))
  $rssfeed_category = (get_magic_quotes_gpc()) ? $_GET['category'] : addslashes($_GET['category']);
else
  $rssfeed_category = '';
 
$xml = new DomDocument();
$xml->load('photos.xml');
 
$xsl = new DomDocument();
$xsl->load('photogallery.xsl');
 
$xslt = new XsltProcessor();
$xslt->importStylesheet($xsl);
 
$transformation = $xslt->transformToXml($xml);
echo $transformation;
 
?>

Display RSS using XSLT transformation. img tag does not display the image.

Mercury News RSS feeds include a title with an img tag:
Brokaw urges Stanford grads to live beyond computers<img src=”http://www.mercurynews.com/multimedia/mercurynews/archive/icons/photo.gif” border=”0″ alt=”(Story has photos)”>

The < and > get translated into < > so the image doesn’t get displayed.  The <img> is not read as a tag because it gets converted to ordinary text.

Here’s what I did to fix the problem:  disable-output-escaping=”yes”

The full xslt code is:
   <xsl:value-of select=”title” disable-output-escaping=”yes” />

Problem: To open a file that was given as a local path, I didn’t have any trouble opening and reading from the file.  When I used the full URL on the same file, I got errors.

Here’s what I found out:
In php you need to set a variable allow_url_fopen = On
Put this parameter in php.ini file and save the file in the directory where I need to open a url.

Javascript solution that works in Firefox and IE using sarissa

Use DOM and javascript and sarissa to build html code:

‘<img src=”images/’ + nodes.item(i).getAttribute(‘target’) + ‘” />’ + ‘</a><br />’;
A labeled <div id=”menudiv”> gives you a way to send HTML to a document:
document.getElementById(‘menudiv’).innerHTML = output;

I used this in a photo gallery to hold photo names in an xml file that can be read into html:

http://www.myxmlproject.com/projects/sherrypicsmenu/sherrypicsmenu.html

I read that Sarissa was a way to do xml transformations with cross-browser support.  I gave this a try and had some problems with javascript that was unsupported.  I found another solution to xml transformations – using php version 5 and doing the transformations on the server.

 This works OK with Firefox but it has problems in IE.

window.onload = function() {
 var xslt = new XSLTProcessor();
 xslt.importStylesheet(xsl);
 var out = xslt.transformToDocument(xml);
 document.write(Sarissa.serialize(out));
};