SilentGap

Hey everyone,

I’ve come across a problem when building out a template where we need to display one post one the home page, but it needs to be a single view (so that it displays comments on that post) but cannot impact the query that shows a list of blog posts below. So, here’s a solution: » Read the rest of this entry «

Ok, for all of you that like to laugh, here’s a new scam (or an old one, repackaged). As many of you know, I’m all mac now, at home and at work. I also set up Google Alerts for my work and church (and a few other things too). Well, spammers (or a new breed) are now setting up plain sites that have business names in it, there’s no text, just a really long title, with all of the business names. » Read the rest of this entry «

So, at 5.30am I was trying to get my kid to fall back asleep (and my swaddling skill’s have yet to improve past the point where he doesn’t get one arm loose), and in the process found myself waking up, wandering over to check my email and my reader. In it was a post recommended by boagworld from A Beautiful Web titled “Time to stop showing clients static design visuals“

The post brings up a few good points, the first one being:

Demonstrating our designs to clients as XHTML/CSS pages rather than as static Photoshop or Fireworks has streamlined our workflow and helped us to set and manage a client’s expectations better than ever before.

And as an example the post points the reader to http://forabeautifulweb.com/demo/2008/09/21/index.html.

I love the idea and agree with the author that a working mock up is extremely handy, and leaves a lot of un-answered questions, answered.

But for sites mock’s that are complicated or too time consuming to turn a static mock into a working build, how practical is this? And when the site requires some Ajax work, how far do you take it if the ajax has to integrate with a database?

Andy Clarke brings up some other good points about having a working mock up, read the full article at http://forabeautifulweb.com/blog/about/time_to_stop_showing_clients_static_design_visuals/

Tim Schoffelman of SilentGap

Jeff Atwood had a good post on protecting your site / blog from being hacked. » Read the rest of this entry «

I’ve just noticed that on the Google code site, there’s a new browser debug tool for all of us developers. The good news, it works across browser lines, that means not only Firefox, but also IE 6, IE 7, Opera, etc.

I originally found out about this guy on digg.com & the explanation is below:

code.google.com — pi.debugger is a cross browser web development tool allows you to examine web page’s structural and debug with console. A real alternative to Firebug because it works in all browsers and has more features than Firebug light.

Well, to say that it’s a “real alternative to Firebug” i think is a bit of a stretch, but for Firebug lite, it seems to be a great alternative (NOTE: I haven’t actually worked with Firebug lite – but it’s info can be found here (site currently not working) and a review on it can be found here).

Simply put – point an html script tag to src=“http://pi-js.googlecode.com/files/debugger.js” place it below your “title” tag & refresh your page. Viola.

The problem you run into w/ this type of JavaScript debugging insert is that you can’t edit the HTML or CSS at all, unlike the full version of Firebug for Firefox.

All in all, this is a handy tool if you’re lacking the IE debug toolbar or Firebug extension and is an informative ‘Read Only” tool, but don’t be expecting it to work like the full version of Firebug.

~tim

Ok, so one of the partners I work for at blend (nice plug huh) suggested that everyone should at least partisipate in editing or creating some sort of Wikipedia page. So, a month later i decided to take him up on his suggestion. Not having actually done anything yet, i wanted to show all of you what the next screen looks like after you create an account with them (which to edit a page – which i have done before – you don’t need an account – but instead it log’s your IP address).

In order to post on Wikipedia, you need to keep in mind a few things.

1. It’s basically an online encyclopedia, with information entered in by any user, and not a blog post or a plug to promote some event, person, place or thing – so keep it factual and informative.
2. Since information can be changed by anyone, don’t worry if you make a mistake, chances are someone out there can come back and help clean it up – depending on how popular the subject is. But having the ability to change any item can be contrivertial, so Wikipedia will flag it if it does become that.
3. Many other people have gone before you to create or edit a page, so if you get stuck on something, they have a good user Q&A section – http://en.wikipedia.org/wiki/Wikipedia:Questions

So have fun & enjoy!

~tim

Ok, so the documentation below has been contributed by a number of people. I’ll try to give credit where credit is due.

The following article describes in detail the problems and solutions behind the JavaScript rollover menu falling behind a flash element embedded on a web page.

Issue

---

The layout requests the use of a JavaScript dropdown menu. Everything works fine until there’s a Flash (or Java Applet) object embedded on the page just below the navigation. When the user rolls over the navigation and the dropdown is invoked, the dropdown falls behind the flash object instead of over.

Reason

---

From various sources on a Google search it sounds like there may be a few different explanations from this problem – very few of those sources come with good documentation. So far this is what has been found. From further research, it appears that all of these reasons may be playing a part.

The two that seems to have the most impact are below:

1. Flash – By default, a flash movie doesn’t actually play within the browser. Instead it’s given it’s own window, giving flash the power to render it’s files independent of the browser abilities, thereby increasing the performance of the object. Because of this, Flash then “floats” it’s movie over the browser to make it appear within the browsers window.
2. CSS – It all goes back to the div’s. When working with a dropdown DHTML menu, it needs to hover over all other objects & page elements, displaying the ‘hover over’ appearance to the user. The rules still apply, trying to ask a <div> / <ul> menu to display over a parent / higher ranking menu doesn’t work unless you obey the CSS gods.

A further note on the Adobe Flash issue, there is a parameter you can set that will change how flash is rendered. It’s with the ‘wmode’ parameter. Below are the three options you can set and an explanation of what each option does.

1. Window (default) mode [example] – This is the mode that’s described above in point one. It’s usually the fastest performing setting and is the way Flash worked before version 6 (it think – don’t have a reference to back this up, but remember reading it somewhere).
2. Opaque mode [example] – This enables a ‘windowless’ mode which “means that the browser tells the Flash Player when and where to draw onto the browser’s own rendering surface.” When this mode is set, it will now accept CSS values and positioning.
3. Transparent mode [example] – This mode is similar to the “Opaque” mode, in that it gives the control back to the browser, different in that “the Flash Player zeros the alpha of the movie background color and draws only the parts of the Flash stage that contain actual objects.”1 This will come in handy if you have a flash move that’s not square or is irregular shaped in some way. The other drawback is that this mode can cause the Flash rendering performance to go down. NOTE: “If you have overlayed your Flash movie on top of a DHTML layer containing a text field, you will not be able to get the focus to go to the text field. Each time you click on the text field, the Flash movie will grab the focus. Though I did not experiment with this, Scott Barnes from MossyBlog suggests you may want to swap the z-indexes when you no longer need the overlayed Flash movie.”1
   

NOTE: “Windowless Mode is available by publishing for Flash Player 6 or 7 in the following browsers:”

• Windows
  

• IE

• Netscape 7.0

• AOL
• FireFox *.*
  

Mac OS X

• Mozilla 1.0
• IE 5.1 & 5.2
• Netscape 7.0
• AOL
• Mozilla 1.0
• CompuServe
• FireFox *.*
  

Linux – Your guess is as good as mine

Solution

---

“You may have read that to change the mode, you should go back into Flash and republish your Flash movie. That’s not necessary. If you haven’t yet published your Flash movie, certainly use the publish settings dialog box to choose your wmode setting. That option is in the HTML tab of the Publish Settings. Choose either transparent windowless or opaque windowless in the tab and publish the document.”1

You’ll have to change the two Flash tags or if using the SWFObject JavaScript file – it will change both of them for you.

• Param Tag – <param name=”wmode” value=”opaque”>
• Embed tag – <object wmode=”opaque”>
• SWFObject – add to your script tag, just after the new SWFObject(); function

• so.addParam(“wmode”, “opaque”);

Next, you’ll have to make sure you’re dynamic dropdown menu is on the same level as the flash file level. Suggestion, create a placeholder image to mimic your flash and get the dropdown to hover over the image first, and then work with the flash.

You can control this with setting both the menu class and flash class files to position: and then setting the z-index higher for the menu div than the flash div.

There’s a good chance this still won’t work due to the amount of different div levels in between the actual menu and the flash movie, so you may have to use the following hack to get around this problem.

For your Navigation code -

==========================
<ul id=”nav”>
<li><a href=”">Link 1</a>
<ul>
<li><a href=”">Child 1</a></li>
<li><a href=”">Child 2</a></li>
</ul>
</li>
<li><a href=”">Link 2</a>
<ul>
<li><a href=”">Child 1</a></li>
<li><a href=”">Child 2</a></li>
</ul>
</li>
<li><a href=”">Link 3</a></li>
</ul>
<div id=”flashContent”>
<img src=”/images/photo.jpg” width=”300″ height=”300″ border=”0″ alt=”" />
</div>
<script type=”text/javascript”>
// <![CDATA[
var so = new SWFObject("/flash/flashfile.swf", "flashContent", "300", "300", "7", "#FF6600");
so.addParam("wmode", "transparent");
so.write("flashContent");
// ]]>
</script>
=========================

Then in your CSS – set your dropdown as below (you can add additional attributes as you see fit.)

=========================
#nav li ul {
position:absolute;
z-index: 20; /*or as long as this z-index value is higher than the flash div. So this value could be 2 if the flash div z-index value is 0 or 1 */ /* reference note below*/
}

#flashContent {
position:relative;
z-index: 10; /* reference Note below*/
display:inline;
float:right;
}
=========================

Then, in your body, create a placeholder div that will frame out the section you want to display the flash movie

=========================
#flash_place_holder {
width:300px;height:300px;
}
=========================

Note: You’ll want to set the z-index of the flash content to a value higher than zero in order to be able to access content in the flash. Along with that make sure you keep the z-index of the navigation higher than the flash content.

Once the placeholder is positioned in the correct location, go back and float your Flash div over the placeholder. The use of 1px borders really help when trying to place the flash in the exact position.

Also, it doesn’t seem that this problem can be fixed by setting the z-index when the menu and flash are in separate container div’s. The z-index seems only to change the values within a containing wrapper and not ones outside of that containing wrapper.

IE.
=========================
<div id=”header_containing_wrapper”>
<div id=”nav_wrapper”>
<ul id=”nav”> <!– Setting the z-index on this guy doesn’t seem to impact the id=”flash_container“ in the id=“body_containing_wrapper“ but it does in the id=”header_containing_wrapper” id=”flash_container” b/c it’s in the same containing div tag –>
<etc></etc>
</ul>
<div id=”flash_container”> <!– impacted by z-index set from the id=”nav” –>
</div>
</div>
</div>
<div id=”body_containing_wrapper”>
<div id=”right_col”>
</div>
<div id=”left_col”>
<div id=”flash_container”> <!– Not impacted by z-index set from the id=”nav” –>
</div>
</div>
</div>
=========================

If you find any additional hacks or other information that needs to modified or added – please feel free to do so.

Sources & Original Articles:

1. http://www.communitymx.com/content/source/E5141/
2. http://www.adobe.com/go/tn_15523
3. People who have contributed to this documentation are myself, and two guys that I work with, Chris Lukenbill and Ben Bertrand – as well as some influence by a few other gentlemen from Blend Interactive.