The Catfish - Part 1

This article explains how to create a persistent "Catfish" ad banner that remains visible at the bottom of a webpage even when scrolling. The technique uses a combination of CSS and JavaScript, with special handling for Internet Explorer.

Key Concepts:

• Persistent Bottom Banner: The core functionality is a DIV element positioned at the bottom of the page using CSS (position: fixed).
• Cross-Browser Compatibility: The initial CSS-only approach, using position: fixed, doesn't work in older versions of Internet Explorer. The solution involves conditional comments and DOM manipulation to add a wrapper DIV (div#zip) for IE only. This wrapper uses position: absolute for the banner and overflow: auto to manage scrolling within the wrapper.
• IE-Specific Handling: A custom JavaScript function (wrapFish) dynamically injects the wrapper DIV into the IE DOM, ensuring compatibility without impacting other browsers.
• Conditional Comments: These comments allow for browser-specific CSS and JavaScript inclusion. This ensures that only IE receives the extra markup needed for the fix.
• Efficient Markup: The extra DIV and associated styles are only added for Internet Explorer, avoiding unnecessary bloat for other browsers.

Code Snippets:

The following code snippets illustrate the CSS and JavaScript used. Note that this is a simplified version for demonstration.

catfish.css:

#catfish {
  position: fixed;
  bottom: 0;
  background: transparent url(images/catfish-tile.gif) repeat-x left bottom;
  padding: 0;
  height: 79px; /* includes transparent part */
  cursor: pointer;
  margin: 0;
  width: 100%;
}

html {
  padding: 0 0 58px 0; /* 58px = height of the opaque part of the Catfish */
}

IEhack.css:

div#zip {
  width: 100%;
  padding: 0;
  margin: 0;
  height: 100%;
  overflow: auto;
  position: relative;
}

catfish.js:

function wrapFish() {
  // ... (JavaScript code to wrap the content in div#zip for IE) ...
}

Conditional Comments (Example):

<!--[if lte IE 6]>
  <link rel="stylesheet" type="text/css" href="IEhack.css">
  
  
<![endif]-->

This approach ensures a consistent user experience across browsers while minimizing unnecessary code. Further refinements, such as conditional banner selection and placement control, would enhance the functionality.

The above is the detailed content of The Catfish - Part 1. For more information, please follow other related articles on the PHP Chinese website!