Dynamic CSS

Hi All,
I hope this is simple, but what I would like to do is to include a css file, but have the FacesServlet do it's magic on it first.
Let's say I have this line right now (which in fact, I do):
<link rel="stylesheet" type="text/css" href="main.css"/>
I would like to have something like this line here:
<link rel="stylesheet" type="text/css" href="main.csf"/>
Where csf would be interpretted as jsf initially, but returned as a .css.
That way I could have lines that specify font, for instance, and have that font be dynamically substituted for dynamically:
/* text and font styles */
.pfNormalText {
font-size: 8pt;
font-family: ${myFontVariableName};
margin: 0px;
padding: 0px;
color: rgb(0, 0, 0);
I read in another forum, or perhaps this one, that a custom filter could be employed, but I don't know how to set this up. If someone knows how, I would appreciate a helping hand.
Thanks,
Scott

This sounds very hopeful. Right now I don't use JSP; instead I'm using XHTML and Facelets. Can the same be achieved in that manner?
Replacing this line:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
With:
<meta http-equiv="Content-Type" content="text/css"; charset=UTF-8"/>
Then in web.xml I would add:
<servlet-mapping>
<servlet-name>myServletName</servlet-name>
<url-pattern>*.csf</url-pattern>
</servlet-mapping>
In faces-config.xml I have:
<context-param>
<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
<param-value>.xhtml</param-value>
</context-param>
I was thinking I could create a file main.xhtml, that will be parsed and turned into css, but as I'm looking at this, I'm not sure how to do it, since the meta tag above is only valid in the context of the <head> an html document.
If I try to mix and match jsp with xhtml, there are configuration problems, parsing issues having to do with what versions of libraries and jsp I have.

Similar Messages

Safari, DIVs over Flash and any dynamic CSS.

Having done my research it appears there is a bug that has been around for a while that remains unfixed. I was hoping the recent update 2.0.1 may have resolved this issue.
This is unique to Safari. While 'Window Mode' and using 'z-index' enables you to overlay a div layer in other browsers, it doesn't fully work in Safari. For sure, the functionality was added, but any dynamic interaction, for example CSS roll-over, makes the background Flash jump to the foreground. Lots of flashing and flickering. Other than that we love Safari, just a shame it has taken so long to fix this since version 1. Any idea when this will be fixed?

I have also had difficulty with flash and CSS layers in Safari. The on(release) action of some buttons in a flash movie I was working on would not function; however, the animated "over" states would function. The site's php/css programmer removed a css layer that was BEHIND the flash file and the functionality of the flash file was restored.
A fix for this type of behavior ( or a work around ) would be helpful.
Safari is a great browser -- an excellent gauge for global accessibility.

Image URL in the CSS issue

ALL,
I have a problem in URL of images in CSS. in the CSS, URL for the images. so we have checked-in the content server. we have given the url path in the css. URL would would look */idc/groups/public/documents/cp_images/imagename.gif*. offcource I have checked-in the CSS in the content server. images from content server appering in the site studio designer preview as well as the browser.
But when I have published the this site in to specific location, i am facing problem. I am not getting in any ERRORS/warnings while Site crawling & Site publishing. All images paths in the CSS changing including images in the index.htm pages. But problem is images used in css are not appering on pages. other than that css effect like Color/effects are comming on htm pages. Images are also avaible in the published folder.
My question is is there specific way to specify the images paths in the CSS in the oracle site studio designer?
Any help would be much apriciated...
Regards & thanks,
Nirmala Vijaya Sekhar Varre

I cant say for sure is there any standard way to avoid this behavior but here are some technique's which can be suitable to solve your problem.
- you can place all your site images into constant relative path to yours CSS. So if your css file is included in page like
<link href="groups/public/documents/web_asset/file.css" type="text/css" rel="stylesheet" />then you can place images into groups/public/documents/web_images/ and refer to them in CSS like that
div {
background:url(../web_images/file.gif);
}- next try you can move all CSS definitions requiring urls into page template leaving main pack in CSS set like that
<link href="groups/public/documents/web_asset/file.css" type="text/css" rel="stylesheet" />
<style type="text/css">
div {
background:url(groups/public/documents/web_images/file.gif);
</style>or make a fragment to hold this dynamic css definition and include it in header in standard way
- next try (for a curvy ones, havent tried myself, but seems working) you can create a idoc script with css commands, but include some commands to make it work like css
i mean this very commands setContentType (page-720), setExpires (page-722), setHttpHeader (page-724) (pages are from idoc reference guide)
i'd recommend using 1st method to avoid complexivity.
Edited by: ivanko on Nov 30, 2009 3:20 PM

Problem with PHP, CSS & Code Navigator in CS4

Hi,
I've got al little problem with code navigator. To show the problem, I created this 3 files:
test1.html
The CSS-Definition is defined static, with simple HTML.
<html>
<head>
     <style type="text/css">
          @import "test.css";
     </style>
</head>
<body>
      <p>Hello World</p>
</body>
</html>
test2.php
The CSS-Definition is defined dynamic, with PHP-Code.
<html>
<head>
     <style type="text/css">
          <? echo "@import \"test.css\";\n"; ?>
     </style>
</head>
<body>
      <p>Hello World</p>
</body>
</html>
test.css
The CSS-File which is imported in test1.html and test2.php
p {
     font-size:20px;
The Problem in Dreamweaver CS4
When opening the test.html - File in Dreamweaver CS4, I can easily see the CSS-Definition of the <p>-Tag in Code Navigator. To edit these definition I can simple open the test.css by clicking on the definition in Code navigator. For a complex webpage this is a greate feature. Sadly, this does not work, when I open the test2.php. Although when going to Live View and selecting the <p>-Tag I can see the CSS-Definition and the file in which it is defined in Code Navigator. But by clicking on the definition the test.css DOES NOT OPEN!
Has anybody a solution? Because many of our projects have dynamic CSS-Definitions, it would be a shame, if this would not work.
Tanks for help! :-)

I've done some testing, which might point you in the direction of an interim solution.
This is the code for related_files.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Related files test</title>
<?php include('include.css'); ?>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
This is the code for include.css:
<style type="text/css">
p {
     font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
     color:#F00;
</style>
Note that the include file contains the opening and closing style tags.
By including your styles like this in a PHP include file, Dreamweaver applies the CSS in Design view (you don't need to turn on Live View). Holding down the Alt key while clicking in Design view brings up the Code Navigator with all the details of the CSS. The one missing link in the chain is that clicking the style selector in the Code Navigator does not open the CSS file. However...
The file that contains the CSS is listed in the Related Files toolbar, so you can edit it in Split view, and see the results in Design view in exactly the same way as with an HTML page and ordinary style sheet.
As I say, not the full solution that you wanted, but it might be something worth experimenting with.

Firefox won't load css file, due to incorrect MIME type.

I am using dynamic css to rotate header background images. It requires the line:
echo "<style type='text/css' media='screen'> @import url('images/random-images/dynamic_css.php');</style>\n";
to be added between the <head> tags. The file 'dynamic_css.php' contains a line telling the browser that the file type is "text/css", but Firefox treats it as "text/html" and refuses to load it. If I duplicate the style declaration by also adding it outside of the head tags, Firefox loads it, but that causes other issues. What do I need to do to get Firefox to load the script from inside the head tags?

That is probably because the server doesn't send a file with the php file extension as text/css.<br />
Did you try to add a PHP header to make sure that the file gets send as text/css ?<br />
Firefox may try to load such files from the cache and not reload them from the server.
A good place to ask questions and advice about web development is at the mozillaZine Web Development/Standards Evangelism forum.<br />
The helpers at that forum are more knowledgeable about web development issues.
You need to register at the mozillaZine forum site in order to post at that forum.<br />
See http://forums.mozillazine.org/viewforum.php?f=25

Dynamic Tree menu with checkbox

Dear Boss
Now I am in a problem for some task. But I have not ever done these. Please help me if you possible for you. I need a tree menu in java which has the following attributes:
v This check box will implement on Oracle form
v Checkbox Event tracking
v On check event data will save in database
v On check event text item of form will be re-query
I am looking for your reply
Aktar Chowdhury

Play around with it, it is simpler than you think! Add a spry menu to a page with a css menu on it, see how it is structured, then make the changes to get the results you want. A Spry menu uses a UL/LI structure very similar to that generated by css_menu, you just need to add a class to the LI.
//CSS Dynamic Menus required file
require_once('includes/cssmenus2/gwb_Menu2.inc.php');
//Begin Menu1
$Menu1 = new MX_Menu2('MenuBar1');
$Menu1->setQuery($rs_Menu1);
$Menu1->setPK("MenuID");
$Menu1->setFK("ParentID");
$Menu1->setNameField("MenuLabel");
$Menu1->setTitleField("Tip");
//URL parameters
$Menu1->setLinkField("Link");
$Menu1->setTargetField("");
// Layout
$Menu1->setLevel(-1);
$Menu1->setSkin("MenuBarVertical"); <---------
//End Menu1
body
<?php // Dynamic CSS Menu
echo $Menu1->render();
?>
css_menu2.inc.php
foreach($this->DBItems[$id] as $key=>$val){
$li_class = ' class="MenuBarItemSubmenu"'; <-----
//the efective row

Drop down dynamic menu

Hi all. Please could you help with why this isn't working? I'm trying to create a navigation bar that links to my database, specifically I want to show all guitar bodies (drawn from mysql) on a drop down menu when the user hovers over Guitars on the top menu. I've downloaded something called Chrome CSS Drop Down Menu from http://www.empoweradvertising.com/36/dynamic-css-mysql-website-menus.html to do this. It's correctly showing the horizontal main menu items via the first part of the code below, but when I hover over 'Guitars' nothing happens. Am I missing something from the second part of the code? And is this a good way to do a dynamic nav bar or is there something else you'd recommend? Many thanks.
<div class="chromestyle" id="chromemenu">
<ul>
<?php do { ?>
<li><a href="<?php echo $row_rs_menuitems['link']; ?>"><?php echo $row_rs_menuitems['menuitem']; ?></a></li>
<?php } while ($row_rs_menuitems = mysql_fetch_assoc($rs_menuitems)); ?>
</ul>
</div>

<div id="dropmenu1" class="dropmenudiv">
<?php do { ?>
<a href="<?php echo $row_rs_bodies['link']; ?>"><?php echo $row_rs_bodies['name']; ?></a>
<?php } while ($row_rs_bodies = mysql_fetch_assoc($rs_bodies)); ?>
</div>

This is a very helpful execellent sample code.
However, If I'm using Model-View-Control approach, then what's the way of applying these codes
to each indivisual file? Say, I have 20 files and only 4 of the 20 need to be treated as they like
to have drop down menu in particular column(s)??? How could the custom tag be applied as the
controller tells the view to present these special treat? or it is not possible (I have to treat each
file, filtered by controller -- one by one as it encounters the special need)?
Thx, Tzae

Why is my flash content not working on my dreamweaver created html site?

This is a problem that's happening on my website I'm creating. I created a quick test website to show you the problem on the fourm. It's the same problem, and if you can provide the solution to this test website I can apply it to my main website.
Test website on server:
test331754952.net23.net
What I did:
-launched flash
-typed "test" and made it spin 360 degrees
-published swf
-launched dreamweaver
-created a site
-moved swf to site folder
-saved a html file to the site folder
-in dreamweaver, went to insert, media, swf, then selected the swf I made
-it inserted the swf, creating a gray placeholder for it
-re-saved the html document, at which point dreamweaver created a folder named script and 2 files, an swf, and a javascript file
Site Directory:
Scripts Sub-Directory:
What happens:
-when I launch the swf on my machine, it plays fine
-when I open the swf directly on the test website on the server, it plays fine
-when I open the html with the embended swf on the test website on the server, it shows a gray box, then goes white
-In dreamweaver, when I go to preview in browser and choose internet explorer, it tells me I don't have new flashplayer(I do: flashplayer 11)
Ie also pokes up a box at the bottom that says its not allowing content. When I click allow content, it creates a gray box
-In dreamweaver, when I go to preview in borwser and choose google chrome, it tells me flash player has stopped a potentionally unsafe operation. When I close this dialog box, it gives me a gray box where my swf should be embeded.
-I've tried changing global flash secuirty setting and it does nothing
-I've tried visiting the test website on multiple computers in my household to no avail
-I've tried having friends visit the site on their computer at their house to no avail
-I did't touch the code on this test website-the code is exactly what dreamweaver generated
Html Document Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<body>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550" height="400" id="FlashID" title="test">
<param name="movie" value="test.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="15.0.0.0" />

<param name="expressinstall" value="Scripts/expressInstall.swf" />


<object type="application/x-shockwave-flash" data="test.swf" width="550" height="400">
    
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="swfversion" value="15.0.0.0" />
    <param name="expressinstall" value="Scripts/expressInstall.swf" />
    
    <div>
      <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
      <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
    </div>
    
</object>

</object>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>
</html>
Javascript file code(the one dreamweaver made when I inserted swf):
/*! SWFObject v2.0 <http://code.google.com/p/swfobject/>
Copyright (c) 2007 Geoff Stearns, Michael Williams, and Bobby van der Sluis
This software is released under the MIT License <http://www.opensource.org/licenses/mit-license.php>
var swfobject = function() {
var UNDEF = "undefined",
OBJECT = "object",
SHOCKWAVE_FLASH = "Shockwave Flash",
SHOCKWAVE_FLASH_AX = "ShockwaveFlash.ShockwaveFlash",
FLASH_MIME_TYPE = "application/x-shockwave-flash",
EXPRESS_INSTALL_ID = "SWFObjectExprInst",
win = window,
doc = document,
nav = navigator,
domLoadFnArr = [],
regObjArr = [],
timer = null,
storedAltContent = null,
storedAltContentId = null,
isDomLoaded = false,
isExpressInstallActive = false;
/* Centralized function for browser feature detection
- Proprietary feature detection (conditional compiling) is used to detect Internet Explorer's features
- User agent string detection is only used when no alternative is possible
- Is executed directly for optimal performance
var ua = function() {
var w3cdom = typeof doc.getElementById != UNDEF && typeof doc.getElementsByTagName != UNDEF && typeof doc.createElement != UNDEF && typeof doc.appendChild != UNDEF && typeof doc.replaceChild != UNDEF && typeof doc.removeChild != UNDEF && typeof doc.cloneNode != UNDEF,
   playerVersion = [0,0,0],
   d = null;
if (typeof nav.plugins != UNDEF && typeof nav.plugins[SHOCKWAVE_FLASH] == OBJECT) {
   d = nav.plugins[SHOCKWAVE_FLASH].description;
   if (d) {
    d = d.replace(/^.*\s+(\S+\s+\S+$)/, "$1");
    playerVersion[0] = parseInt(d.replace(/^(.*)\..*$/, "$1"), 10);
    playerVersion[1] = parseInt(d.replace(/^.*\.(.*)\s.*$/, "$1"), 10);
    playerVersion[2] = /r/.test(d) ? parseInt(d.replace(/^.*r(.*)$/, "$1"), 10) : 0;
else if (typeof win.ActiveXObject != UNDEF) {
   var a = null, fp6Crash = false;
   try {
    a = new ActiveXObject(SHOCKWAVE_FLASH_AX + ".7");
   catch(e) {
    try {
     a = new ActiveXObject(SHOCKWAVE_FLASH_AX + ".6");
     playerVersion = [6,0,21];
     a.AllowScriptAccess = "always"; // Introduced in fp6.0.47
    catch(e) {
     if (playerVersion[0] == 6) {
      fp6Crash = true;
    if (!fp6Crash) {
     try {
      a = new ActiveXObject(SHOCKWAVE_FLASH_AX);
     catch(e) {}
   if (!fp6Crash && a) { // a will return null when ActiveX is disabled
    try {
     d = a.GetVariable("$version"); // Will crash fp6.0.21/23/29
     if (d) {
      d = d.split(" ")[1].split(",");
      playerVersion = [parseInt(d[0], 10), parseInt(d[1], 10), parseInt(d[2], 10)];
    catch(e) {}
var u = nav.userAgent.toLowerCase(),
   p = nav.platform.toLowerCase(),
   webkit = /webkit/.test(u) ? parseFloat(u.replace(/^.*webkit\/(\d+(\.\d+)?).*$/, "$1")) : false, // returns either the webkit version or false if not webkit
   ie = false,
   windows = p ? /win/.test(p) : /win/.test(u),
   mac = p ? /mac/.test(p) : /mac/.test(u);
/*@cc_on
   ie = true;
   @if (@_win32)
    windows = true;
   @elif (@_mac)
    mac = true;
   @end
return { w3cdom:w3cdom, pv:playerVersion, webkit:webkit, ie:ie, win:windows, mac:mac };
/* Cross-browser onDomLoad
- Based on Dean Edwards' solution: http://dean.edwards.name/weblog/2006/06/again/
- Will fire an event as soon as the DOM of a page is loaded (supported by Gecko based browsers - like Firefox -, IE, Opera9+, Safari)
var onDomLoad = function() {
if (!ua.w3cdom) {
   return;
addDomLoadEvent(main);
if (ua.ie && ua.win) {
   try { // Avoid a possible Operation Aborted error
    doc.write("<scr" + "ipt id=__ie_ondomload defer=true src=//:></scr" + "ipt>"); // String is split into pieces to avoid Norton AV to add code that can cause errors
    var s = getElementById("__ie_ondomload");
    if (s) {
     s.onreadystatechange = function() {
      if (this.readyState == "complete") {
       this.parentNode.removeChild(this);
       callDomLoadFunctions();
   catch(e) {}
if (ua.webkit && typeof doc.readyState != UNDEF) {
   timer = setInterval(function() { if (/loaded|complete/.test(doc.readyState)) { callDomLoadFunctions(); }}, 10);
if (typeof doc.addEventListener != UNDEF) {
   doc.addEventListener("DOMContentLoaded", callDomLoadFunctions, null);
addLoadEvent(callDomLoadFunctions);
function callDomLoadFunctions() {
if (isDomLoaded) {
   return;
if (ua.ie && ua.win) { // Test if we can really add elements to the DOM; we don't want to fire it too early
   var s = createElement("span");
   try { // Avoid a possible Operation Aborted error
    var t = doc.getElementsByTagName("body")[0].appendChild(s);
    t.parentNode.removeChild(t);
   catch (e) {
    return;
isDomLoaded = true;
if (timer) {
   clearInterval(timer);
   timer = null;
var dl = domLoadFnArr.length;
for (var i = 0; i < dl; i++) {
   domLoadFnArr[i]();
function addDomLoadEvent(fn) {
if (isDomLoaded) {
   fn();
else {
   domLoadFnArr[domLoadFnArr.length] = fn; // Array.push() is only available in IE5.5+
/* Cross-browser onload
- Based on James Edwards' solution: http://brothercake.com/site/resources/scripts/onload/
- Will fire an event as soon as a web page including all of its assets are loaded
function addLoadEvent(fn) {
if (typeof win.addEventListener != UNDEF) {
   win.addEventListener("load", fn, false);
else if (typeof doc.addEventListener != UNDEF) {
   doc.addEventListener("load", fn, false);
else if (typeof win.attachEvent != UNDEF) {
   win.attachEvent("onload", fn);
else if (typeof win.onload == "function") {
   var fnOld = win.onload;
   win.onload = function() {
    fnOld();
    fn();
else {
   win.onload = fn;
/* Main function
- Will preferably execute onDomLoad, otherwise onload (as a fallback)
function main() { // Static publishing only
var rl = regObjArr.length;
for (var i = 0; i < rl; i++) { // For each registered object element
   var id = regObjArr[i].id;
   if (ua.pv[0] > 0) {
    var obj = getElementById(id);
    if (obj) {
     regObjArr[i].width = obj.getAttribute("width") ? obj.getAttribute("width") : "0";
     regObjArr[i].height = obj.getAttribute("height") ? obj.getAttribute("height") : "0";
     if (hasPlayerVersion(regObjArr[i].swfVersion)) { // Flash plug-in version >= Flash content version: Houston, we have a match!
      if (ua.webkit && ua.webkit < 312) { // Older webkit engines ignore the object element's nested param elements
       fixParams(obj);
      setVisibility(id, true);
     else if (regObjArr[i].expressInstall && !isExpressInstallActive && hasPlayerVersion("6.0.65") && (ua.win || ua.mac)) { // Show the Adobe Express Install dialog if set by the web page author and if supported (fp6.0.65+ on Win/Mac OS only)
      showExpressInstall(regObjArr[i]);
     else { // Flash plug-in and Flash content version mismatch: display alternative content instead of Flash content
      displayAltContent(obj);
   else { // If no fp is installed, we let the object element do its job (show alternative content)
    setVisibility(id, true);
/* Fix nested param elements, which are ignored by older webkit engines
- This includes Safari up to and including version 1.2.2 on Mac OS 10.3
- Fall back to the proprietary embed element
function fixParams(obj) {
var nestedObj = obj.getElementsByTagName(OBJECT)[0];
if (nestedObj) {
   var e = createElement("embed"), a = nestedObj.attributes;
   if (a) {
    var al = a.length;
    for (var i = 0; i < al; i++) {
     if (a[i].nodeName.toLowerCase() == "data") {
      e.setAttribute("src", a[i].nodeValue);
     else {
      e.setAttribute(a[i].nodeName, a[i].nodeValue);
   var c = nestedObj.childNodes;
   if (c) {
    var cl = c.length;
    for (var j = 0; j < cl; j++) {
     if (c[j].nodeType == 1 && c[j].nodeName.toLowerCase() == "param") {
      e.setAttribute(c[j].getAttribute("name"), c[j].getAttribute("value"));
   obj.parentNode.replaceChild(e, obj);
/* Fix hanging audio/video threads and force open sockets and NetConnections to disconnect
- Occurs when unloading a web page in IE using fp8+ and innerHTML/outerHTML
- Dynamic publishing only
function fixObjectLeaks(id) {
if (ua.ie && ua.win && hasPlayerVersion("8.0.0")) {
   win.attachEvent("onunload", function () {
    var obj = getElementById(id);
    if (obj) {
     for (var i in obj) {
      if (typeof obj[i] == "function") {
       obj[i] = function() {};
     obj.parentNode.removeChild(obj);
/* Show the Adobe Express Install dialog
- Reference: http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=6a253b75
function showExpressInstall(regObj) {
isExpressInstallActive = true;
var obj = getElementById(regObj.id);
if (obj) {
   if (regObj.altContentId) {
    var ac = getElementById(regObj.altContentId);
    if (ac) {
     storedAltContent = ac;
     storedAltContentId = regObj.altContentId;
   else {
    storedAltContent = abstractAltContent(obj);
   if (!(/%$/.test(regObj.width)) && parseInt(regObj.width, 10) < 310) {
    regObj.width = "310";
   if (!(/%$/.test(regObj.height)) && parseInt(regObj.height, 10) < 137) {
    regObj.height = "137";
   doc.title = doc.title.slice(0, 47) + " - Flash Player Installation";
   var pt = ua.ie && ua.win ? "ActiveX" : "PlugIn",
    dt = doc.title,
    fv = "MMredirectURL=" + win.location + "&MMplayerType=" + pt + "&MMdoctitle=" + dt,
    replaceId = regObj.id;
   // For IE when a SWF is loading (AND: not available in cache) wait for the onload event to fire to remove the original object element
   // In IE you cannot properly cancel a loading SWF file without breaking browser load references, also obj.onreadystatechange doesn't work
   if (ua.ie && ua.win && obj.readyState != 4) {
    var newObj = createElement("div");
    replaceId += "SWFObjectNew";
    newObj.setAttribute("id", replaceId);
    obj.parentNode.insertBefore(newObj, obj); // Insert placeholder div that will be replaced by the object element that loads expressinstall.swf
    obj.style.display = "none";
    win.attachEvent("onload", function() { obj.parentNode.removeChild(obj); });
   createSWF({ data:regObj.expressInstall, id:EXPRESS_INSTALL_ID, width:regObj.width, height:regObj.height }, { flashvars:fv }, replaceId);
/* Functions to abstract and display alternative content
function displayAltContent(obj) {
if (ua.ie && ua.win && obj.readyState != 4) {
   // For IE when a SWF is loading (AND: not available in cache) wait for the onload event to fire to remove the original object element
   // In IE you cannot properly cancel a loading SWF file without breaking browser load references, also obj.onreadystatechange doesn't work
   var el = createElement("div");
   obj.parentNode.insertBefore(el, obj); // Insert placeholder div that will be replaced by the alternative content
   el.parentNode.replaceChild(abstractAltContent(obj), el);
   obj.style.display = "none";
   win.attachEvent("onload", function() { obj.parentNode.removeChild(obj); });
else {
   obj.parentNode.replaceChild(abstractAltContent(obj), obj);
function abstractAltContent(obj) {
var ac = createElement("div");
if (ua.win && ua.ie) {
   ac.innerHTML = obj.innerHTML;
else {
   var nestedObj = obj.getElementsByTagName(OBJECT)[0];
   if (nestedObj) {
    var c = nestedObj.childNodes;
    if (c) {
     var cl = c.length;
     for (var i = 0; i < cl; i++) {
      if (!(c[i].nodeType == 1 && c[i].nodeName.toLowerCase() == "param") && !(c[i].nodeType == 8)) {
       ac.appendChild(c[i].cloneNode(true));
return ac;
/* Cross-browser dynamic SWF creation
function createSWF(attObj, parObj, id) {
var r, el = getElementById(id);
if (typeof attObj.id == UNDEF) { // if no 'id' is defined for the object element, it will inherit the 'id' from the alternative content
   attObj.id = id;
if (ua.ie && ua.win) { // IE, the object element and W3C DOM methods do not combine: fall back to outerHTML
   var att = "";
   for (var i in attObj) {
    if (attObj[i] != Object.prototype[i]) { // Filter out prototype additions from other potential libraries, like Object.prototype.toJSONString = function() {}
     if (i == "data") {
      parObj.movie = attObj[i];
     else if (i.toLowerCase() == "styleclass") { // 'class' is an ECMA4 reserved keyword
      att += ' class=" + attObj[i] + "';
     else if (i != "classid") {
      att += ' ' + i + '="' + attObj[i] + '"';
   var par = "";
   for (var j in parObj) {
    if (parObj[j] != Object.prototype[j]) { // Filter out prototype additions from other potential libraries
     par += '<param name="' + j + '" value="' + parObj[j] + '" />';
   el.outerHTML = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"' + att + '>' + par + '</object>';
   fixObjectLeaks(attObj.id); // This bug affects dynamic publishing only
   r = getElementById(attObj.id);
else if (ua.webkit && ua.webkit < 312) { // Older webkit engines ignore the object element's nested param elements: fall back to the proprietary embed element
   var e = createElement("embed");
   e.setAttribute("type", FLASH_MIME_TYPE);
   for (var k in attObj) {
    if (attObj[k] != Object.prototype[k]) { // Filter out prototype additions from other potential libraries
     if (k == "data") {
      e.setAttribute("src", attObj[k]);
     else if (k.toLowerCase() == "styleclass") { // 'class' is an ECMA4 reserved keyword
      e.setAttribute("class", attObj[k]);
     else if (k != "classid") { // Filter out IE specific attribute
      e.setAttribute(k, attObj[k]);
   for (var l in parObj) {
    if (parObj[l] != Object.prototype[l]) { // Filter out prototype additions from other potential libraries
     if (l != "movie") { // Filter out IE specific param element
      e.setAttribute(l, parObj[l]);
   el.parentNode.replaceChild(e, el);
   r = e;
else { // Well-behaving browsers
   var o = createElement(OBJECT);
   o.setAttribute("type", FLASH_MIME_TYPE);
   for (var m in attObj) {
    if (attObj[m] != Object.prototype[m]) { // Filter out prototype additions from other potential libraries
     if (m.toLowerCase() == "styleclass") { // 'class' is an ECMA4 reserved keyword
      o.setAttribute("class", attObj[m]);
     else if (m != "classid") { // Filter out IE specific attribute
      o.setAttribute(m, attObj[m]);
   for (var n in parObj) {
    if (parObj[n] != Object.prototype[n] && n != "movie") { // Filter out prototype additions from other potential libraries and IE specific param element
     createObjParam(o, n, parObj[n]);
   el.parentNode.replaceChild(o, el);
   r = o;
return r;
function createObjParam(el, pName, pValue) {
var p = createElement("param");
p.setAttribute("name", pName);
p.setAttribute("value", pValue);
el.appendChild(p);
function getElementById(id) {
return doc.getElementById(id);
function createElement(el) {
return doc.createElement(el);
function hasPlayerVersion(rv) {
var pv = ua.pv, v = rv.split(".");
v[0] = parseInt(v[0], 10);
v[1] = parseInt(v[1], 10);
v[2] = parseInt(v[2], 10);
return (pv[0] > v[0] || (pv[0] == v[0] && pv[1] > v[1]) || (pv[0] == v[0] && pv[1] == v[1] && pv[2] >= v[2])) ? true : false;
/* Cross-browser dynamic CSS creation
- Based on Bobby van der Sluis' solution: http://www.bobbyvandersluis.com/articles/dynamicCSS.php
function createCSS(sel, decl) {
if (ua.ie && ua.mac) {
   return;
var h = doc.getElementsByTagName("head")[0], s = createElement("style");
s.setAttribute("type", "text/css");
s.setAttribute("media", "screen");
if (!(ua.ie && ua.win) && typeof doc.createTextNode != UNDEF) {
   s.appendChild(doc.createTextNode(sel + " {" + decl + "}"));
h.appendChild(s);
if (ua.ie && ua.win && typeof doc.styleSheets != UNDEF && doc.styleSheets.length > 0) {
   var ls = doc.styleSheets[doc.styleSheets.length - 1];
   if (typeof ls.addRule == OBJECT) {
    ls.addRule(sel, decl);
function setVisibility(id, isVisible) {
var v = isVisible ? "inherit" : "hidden";
if (isDomLoaded) {
   getElementById(id).style.visibility = v;
else {
   createCSS("#" + id, "visibility:" + v);
function getTargetVersion(obj) {
     if (!obj)
         return 0;
var c = obj.childNodes;
var cl = c.length;
for (var i = 0; i < cl; i++) {
   if (c[i].nodeType == 1 && c[i].nodeName.toLowerCase() == "object") {
       c = c[i].childNodes;
       cl = c.length;
       i = 0;
   if (c[i].nodeType == 1 && c[i].nodeName.toLowerCase() == "param" && c[i].getAttribute("name") == "swfversion") {
      return c[i].getAttribute("value");
return 0;
function getExpressInstall(obj) {
     if (!obj)
         return "";
var c = obj.childNodes;
var cl = c.length;
for (var i = 0; i < cl; i++) {
   if (c[i].nodeType == 1 && c[i].nodeName.toLowerCase() == "object") {
       c = c[i].childNodes;
       cl = c.length;
       i = 0;
   if (c[i].nodeType == 1 && c[i].nodeName.toLowerCase() == "param" && c[i].getAttribute("name") == "expressinstall") {
       return c[i].getAttribute("value");
return "";
return {
/* Public API
   - Reference: http://code.google.com/p/swfobject/wiki/SWFObject_2_0_documentation
registerObject: function(objectIdStr, swfVersionStr, xiSwfUrlStr) {
   if (!ua.w3cdom || !objectIdStr) {
    return;
   var obj = document.getElementById(objectIdStr);
   var xi = getExpressInstall(obj);
   var regObj = {};
   regObj.id = objectIdStr;
   regObj.swfVersion = swfVersionStr ? swfVersionStr : getTargetVersion(obj);
   regObj.expressInstall = xiSwfUrlStr ? xiSwfUrlStr : ((xi != "") ? xi : false);
   regObjArr[regObjArr.length] = regObj;
   setVisibility(objectIdStr, false);
getObjectById: function(objectIdStr) {
   var r = null;
   if (ua.w3cdom && isDomLoaded) {
    var o = getElementById(objectIdStr);
    if (o) {
     var n = o.getElementsByTagName(OBJECT)[0];
     if (!n || (n && typeof o.SetVariable != UNDEF)) {
         r = o;
     else if (typeof n.SetVariable != UNDEF) {
      r = n;
   return r;
embedSWF: function(swfUrlStr, replaceElemIdStr, widthStr, heightStr, swfVersionStr, xiSwfUrlStr, flashvarsObj, parObj, attObj) {
   if (!ua.w3cdom || !swfUrlStr || !replaceElemIdStr || !widthStr || !heightStr || !swfVersionStr) {
    return;
   widthStr += ""; // Auto-convert to string to make it idiot proof
   heightStr += "";
   if (hasPlayerVersion(swfVersionStr)) {
    setVisibility(replaceElemIdStr, false);
    var att = (typeof attObj == OBJECT) ? attObj : {};
    att.data = swfUrlStr;
    att.width = widthStr;
    att.height = heightStr;
    var par = (typeof parObj == OBJECT) ? parObj : {};
    if (typeof flashvarsObj == OBJECT) {
     for (var i in flashvarsObj) {
      if (flashvarsObj[i] != Object.prototype[i]) { // Filter out prototype additions from other potential libraries
       if (typeof par.flashvars != UNDEF) {
        par.flashvars += "&" + i + "=" + flashvarsObj[i];
       else {
        par.flashvars = i + "=" + flashvarsObj[i];
    addDomLoadEvent(function() {
     createSWF(att, par, replaceElemIdStr);
     if (att.id == replaceElemIdStr) {
      setVisibility(replaceElemIdStr, true);
   else if (xiSwfUrlStr && !isExpressInstallActive && hasPlayerVersion("6.0.65") && (ua.win || ua.mac)) {
    setVisibility(replaceElemIdStr, false);
    addDomLoadEvent(function() {
     var regObj = {};
     regObj.id = regObj.altContentId = replaceElemIdStr;
     regObj.width = widthStr;
     regObj.height = heightStr;
     regObj.expressInstall = xiSwfUrlStr;
     showExpressInstall(regObj);
getFlashPlayerVersion: function() {
   return { major:ua.pv[0], minor:ua.pv[1], release:ua.pv[2] };
hasFlashPlayerVersion:hasPlayerVersion,
createSWF: function(attObj, parObj, replaceElemIdStr) {
   if (ua.w3cdom && isDomLoaded) {
    return createSWF(attObj, parObj, replaceElemIdStr);
   else {
    return undefined;
createCSS: function(sel, decl) {
   if (ua.w3cdom) {
    createCSS(sel, decl);
addDomLoadEvent:addDomLoadEvent,
addLoadEvent:addLoadEvent,
getQueryParamValue: function(param) {
   var q = doc.location.search || doc.location.hash;
   if (param == null) {
    return q;
    if(q) {
    var pairs = q.substring(1).split("&");
    for (var i = 0; i < pairs.length; i++) {
     if (pairs[i].substring(0, pairs[i].indexOf("=")) == param) {
      return pairs[i].substring((pairs[i].indexOf("=") + 1));
   return "";
// For internal usage only
expressInstallCallback: function() {
   if (isExpressInstallActive && storedAltContent) {
    var obj = getElementById(EXPRESS_INSTALL_ID);
    if (obj) {
     obj.parentNode.replaceChild(storedAltContent, obj);
     if (storedAltContentId) {
      setVisibility(storedAltContentId, true);
      if (ua.ie && ua.win) {
       storedAltContent.style.display = "block";
     storedAltContent = null;
     storedAltContentId = null;
     isExpressInstallActive = false;
Can someone please help! I've looked and tried prety much everything. If you can provide a solution I would GREATLY apreciate it!

There is no Flash player version 15... as in your code:
<param name="swfversion" value="15.0.0.0" />
For some reason Adobe thought it would be a good idea to target a Flash player version (15) as default.....which may be out a couple years in the future. Go figure!!!
If you don't like player version 9, change to 10 or 11.... just not 15 (yet).
Best wishes,
Adninjastrator

Display images in a 4x8 table problem

Hi all,
I know you can get scripts out there to make photo galleries
but I
want to create a table that shows images in rows of 4 images
per row
and up to 10 rows.
I have create this using 10 record sets restriced to show 4
consecutive images in a row.
Each record set show the next set of 4 images.
Is there a better way to do this? There must be.
If I get DW to display all the images in the db they will
just fill
the left to right.
Should I be using dynamic CSS to place the images in a
flowing
manner???
Regards a stumped
Coder.
Kevin.

You need a nested looper - one that lets you loop 4 times on
the inner loop,
with each insertion filling a cell, and then loop once on the
outer loop, to
produce a new row. You can use this either to produce a page
showing ALL of
the images, or one that shows a set number, allowing you to
then 'navigate'
to the next/previous set of the same number of images. I
believe Tom Muck
has such a nested looper on his site (
http://www.tommuck.com), but
I'm not
sure what scripting methods it supports.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Kevin Doyle" <[email protected]> wrote in message
news:f7jhs1$c6h$[email protected]..
> Hi all,
> I know you can get scripts out there to make photo
galleries but I
> want to create a table that shows images in rows of 4
images per row
> and up to 10 rows.
> I have create this using 10 record sets restriced to
show 4
> consecutive images in a row.
> Each record set show the next set of 4 images.
>
> Is there a better way to do this? There must be.
> If I get DW to display all the images in the db they
will just fill
> the left to right.
>
> Should I be using dynamic CSS to place the images in a
flowing
> manner???
>
> Regards a stumped
> Coder.
> Kevin.
>
>

How to get rendered JSF page (send it as HTML email)

Hello,
I would like to send notification email in my application. Could you please help me to find a way how to get HTML result of JSF page as string-file-stream. Simply anything I could handle and use it as email body or attachment.
My use case: User click to button (raise a action) which change something in DB and confirmation.xhtml(.jsf) is shown to him to confirm that this action was succesful. And I would like to send notification email to all other users with this page (simplified version).
I need a something like String getJsfPage(String url) but I could not find anything in JSF API.
Thanks for any clue.

quote gimbal2: +...now write the code to generate the email body...+
Thanks for reply...
Is that mean that I could not use already written code (confirmation.xhtml)? The beuty on JSF is that JSF parser take care about CSS styles, EL, templating (ui: ...), ... When anybody (administrators) wants to change how this email looks - just change this XHTML file.
How should I write email body? I thought about several way but nothing what looks good:
- I really dont want to use StringBuilder do build HTML.
- I dont want to write my own parser of .xhtml template (confirmation.xhtml).
- Write HTML (xml) template and parse it with XSLT transformation seems to me acceptable but complicated. Needs a special library to perform XSLT, complicated template service (future changes)
- JSP page, more-or-less the same problems like JSF page
The sad is that this email (html) body is quite small but highly dynamic (css, language of texts, logos...).

Putting cf variables in non cf files...

I had asked a similar question before, but this one is a bit different (and that one wasn't really answered completely anyway). What I am trying to do is to read in a file that has cf variables in it (like '#VarName#'), and output it in the http response stream.
Basically, I am trying to create a themeable interface for my site. So, in my CSS files, for things like colors and backgrounds, I want to place something where I can swap out that placeholder for a value. This modified CSS content would be the only thing written to the stream, and altering the "content-type" header, it would be handled like a css file by the browser.
I though that if I used #'s to delimit variables, read the file, set the variables, and then use CFOUTPUT, I could do this. Well, I guess I was wrong. No errors were being thrown, and I was just getting the '#VarName#' directly in the output.
Then, I though about using a CFINCLUDE, and I used it in inline code, within a CFOUTPUT, and also a CFSAVECONTENT, but I was still just getting '#VarName#' in the output.
If possible, I want to stay away from having to do a global string replacement, but if that is the only way...
Does anyone have a way in which to do the task at hand? I'll keep playing with it, and if I find something, I will let you all know...

Basically, I am trying to create a themeable interface for my site. So, in my CSS files, for things like colors and backgrounds, I want to place something where I can swap out that placeholder for a value. This modified CSS content would be the only thing written to the stream, and altering the "content-type" header, it would be handled like a css file by the browser.
I though that if I used #'s to delimit variables, read the file, set the variables, and then use CFOUTPUT, I could do this. Well, I guess I was wrong. No errors were being thrown, and I was just getting the '#VarName#' directly in the output.
The web server, by default, does not pass requests for CSS files to CF, so CF will never find out about said request, so none of the CFML in the CSS file will get processed by CF. You can tell the webserver to pass requests for CSS files to CF, but then CF will need to process all requests for CSS files. Not ideal.
You could rename your dynamic CSS files to have .CFM extensions, but then your browser won't consider them cachable, so you will lose a lot of the benefit of using CSS files: that the browser caches them, therefore lowering the overhead of making a request. I am fairly certain using a combination of headers and HTTP codes one could get get the browser to cache the file, though. But then you have the reverse problem: you lose the dynamicism of the CF-driven CSS file.
To be honest... I'd just have a bunch of themed CSS files and be done with it. I don't imagine you will have so many combinations of themes that this becomes impractical? Then CF handles the variable which identifies which CSS file to call in, given the current theme.
Adam

Event_log: "Garbage document update"

I use iAS 9.0.2.0 Webcache in front of Portal 3.0.9.8.2. I allready read note 178424.1 and followed the instructions. The dynamic css-files and the public "Welcome" page of the portal are inserted in the cacheability rules. The Caching of the gifs and jpegs and even dynamic css files seems okay but unfortunately the welcome page itself couldn't get cached:
logs/event_log:
6/Sep/2002:12:48:53 +0200 -- Garbage document update for <my.host.name>:7778/servlet/page?_pageid=63&_dad=elport&_schema=ELPORT&stadt=Gelsenkirchen
The "Welcome" Page is logged in the Apache access-logfile of the portal, but isn't listed in the "Cache content" of Webcaches Admin-Page.
Do you have any clue to find out the reason? What means "Garbage document update" and how can I avoid this? Is there a input-checker in Webcache who labels the content as "garbage" because of not-clean HTML? I could find any hint in the documentation of webcache so please give me some informations about the internals and illuminate the blackbox "webcache".
Many thanks
Oliver

I was referring to you programatically invalidating this content via e.g a database trigger when the source was updated (involves sending an XML doc to your invalidation port, usually 4000, with info on the content you want to invalidate). It doesn't sound like you are doing this though.
The version of Web Cache that you are using will allow you to set an expiry rule when configuring your cachable rule (in the admin gui). If you have set the expiry rules there, that will cause your Welcome page to be binned. Something else to consider is the "maximum cache size" you have set in your resource limits. If this is set too low for the number of cachable documents being cached, Web Cache will start to bin the older cached docs to make way for the new ones sooner than you may like.

My website has extra space?

http://www.samkhyayoga.org/
on the right side and the bottom there is extra white space , what do I need in order to fix it?

Upload your changes to the server.
Validate your code & fix errors
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.samkhyayoga.org%2F
In addition, you're missing quite a few CSS files. These are all 404 not found...
query.css
lightbox.css (possibly a duplicate?)
moduleStyleSheets.css
dynamic-css.css
Nancy O.

Dynamic path does not work in Css files

Hi,
I have a css file in which i have used few images, but when i try to make the path dynamic and include that css in my page the image doesn't appear but when i put the complete path in it it works.
It works when used in this way :
.inputrightbg
background-image: url(http://<hostname>:<port>/idc/groups/public/documents/omp_images/input_rightbg.gif); background-repeat: no-repeat; background-
position: right top; float: left; padding: 4px 10px 4px 0px; height: 26px;
Doesn't work when use in this way :
background-image: url(groups/public/documents/omp_images/input_rightbg.gif); background-repeat: no-repeat;
background-position: right top; float: left; padding: 4px 10px 4px 0px; height: 26px;
Thanks,
Abhijit

Right, you can't put IdocScript in css.
You can use the Web URL Map though to make urls that are easy to deposit in CSS.
Check these out:
http://www.corecontentonly.com/index.php/2009/10/14/web-url-map-extras/
http://blogs.oracle.com/kyle/2009/09/friendly_urls_for_ucm.html
-Jason
http://www.corecontentonly.com
http://www.redstonecontentsolutions.com

How do I edit the CSS of a Dynamic Menu with Dreamweaver and Business Catalyst.

I've watched tutorials on v2 menu module and it obviously was not made for someone just starting out in Business Catalyst. I want to edit the CSS of my Dynamic Module, preferably V1, but if I have to use version 2 I will. The problem I am running into is that the width of the menu I am trying to make is not big enough. The menu is extremely simple, I could whip it up with css and html in a matter of minutes. Just black words horizontal layout with a dark red hover color and selected state. I can change all that in Business Catalyst Site Manager just fine, however, the width of my menu when I look at it on the site, is way too small. Probably only 750px wide. I want it 1000px wide, but I haven't the faintest idea of where to find that information to change. When I add the menu module to my html code i get this: {module_menu,1534789}. How do I add or find css/html to edit the properties? I know I can add classes to the items inside the menu in the Site Manager, but where do I find the html code that shows those names?
I'm obviously missing something important and probably really easy, so I hope someone can help.
Thanks, Evan Schmidt

I went ahead and built the navigation without a module, easier than wasting all this time trying to figure it out.
But initially my main problem was when I add the Menu module to my html in dreamweaver, this: {module_menu,1534789} would be put in my html instead of css/html code. Now if publish my site and look at the page source, it shows the css/html, but it doesn't in dreamweaver. So is that the only way to edit the css/html code, copy the page source and replace the {module_menu,1534789} with the copied code in dreamweaver?

Dynamic CSS

Similar Messages

Maybe you are looking for