Contact Jan Thomas Consulting

May 31, 2007

Firefox cursor is an insertion caret on Popup Menus

Filed under: Programming Techniques — jan @ 2:17 am

When I created a popup menu in Fireworks and Dreamweaver the popup menu in Firefox has an insertion caret. Here’s a way to fix this:

Add a line in the javascript MM_showMenu
document.body.style.cursor = ‘pointer’;

At the end of the function add another line:
document.body.style.cursor = ‘default’;

May 14, 2007

CSS: create a navigation bar using the CSS list tag

Filed under: Programming Techniques — jan @ 1:20 pm

Here’s a quick way to create a navigation bar in CSS:  use a list.  The list-style: none removes the bullets.  The display: inline tells the list items to be positioned horizontally across the page.  I’ve used this solution when the navigation is simple.

#navlist li
{
list-style: none;
display: inline;
}

The top menu bar of this blog is created using this technique.

Fade-in slideshow written in javascript

Filed under: Programming Techniques — jan @ 1:11 pm

I found this slideshow that fades the images during transitions.  The images can be setup with hyperlinks. The code allows for 2 slideshows simultaneously on the same page. 

Here’s a working version of this slideshow:
http://www.cccwinternights.org

Here’s where I found the code:
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

May 12, 2007

Opening a new window: Play video in its own window, Open a Contact Form

Filed under: Programming Techniques — jan @ 11:55 am

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”
  • 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

Dropdown: Select and Go

Filed under: Programming Techniques — jan @ 11:47 am

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

Focus rings in Firefox

Filed under: Programming Techniques — jan @ 11:38 am

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.

40×40 px Thumbnails

Filed under: Programming Techniques — jan @ 11:33 am

 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/

Photo Gallery using xml and php in a server-side transformation

Filed under: Programming Techniques — jan @ 10:54 am

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;
 
?>

Displaying the image in an RSS feed

Filed under: Programming Techniques — jan @ 10:31 am

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” />

Open files using URL in php

Filed under: Programming Techniques — jan @ 10:22 am

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.

Next Page »

Powered by WordPress