Using collapsible divs with cfoutput

Hi there -
I haven't quite got started yet - I'm trying to avoid a bunch
of time-consuming experimentation and was hoping
someone here had already done something like this and could
point me in the right direction -
I'm attaching some code created by Dynamic Drive that creates
collapsible divs from hard-coded info (as in a
dynamic menu tree). What I'd like to do is figure out a way
to replace that hard-coded info with data dynamically
generated with a query, looping through as one does with a
table. I'm avoiding using the table because the number
of variables is so many, outputting them to table rows is
overwhelming for the viewer. I'm thinking collapsible divs
will do the trick nicely.
How would I go about using the attached code to loop through
the query and dynamically create divs? It doesn't
seem like it's a simple matter of creating a cfoutput using
this code with the necessary variables, like when you
use a query to generate rows in a table... From what I've
seen, it looks like maybe I'd have to convert to query to
xml (as per another collapsible div example I've seen). This
looks hairy to me! so I'm wondering if that's strictly
necessary. If this is the only way, I guess I just need
someone to tell me so and that's what I'll do. Any ideas?
Here's what I'm trying to create:
Output name of first teacher - a date - a second kind of date
**beginningoffirstcollapsiblediv**
Information about a workshop - more info - more info
Information about a workshop - more info - more info
**endoffirstcollapsiblediv**
Output name of second teacher - a date - a second kind of
date
**beginningofsecondcollapsiblediv**
Information about a workshop - more info - more info
Information about a workshop - more info - more info
Information about a workshop - more info - more info
Information about a workshop - more info - more info
**endofsecondcollapsiblediv**
Output name of third teacher - a date - a second kind of date
**beginningofthirdcollapsiblediv**
Information about a workshop - more info - more info
Information about a workshop - more info - more info
Information about a workshop - more info - more info
**endofthirdcollapsiblediv**
and so on... for as many staff as fit the query's parameters.

Okay - I'm feeling pretty dumb - I just discovered that there
is a Spry widget that does this sort of thing - boy, do things move
quickly!

Similar Messages

Using CSS and Javascript to display a div with flash in it, mozilla reloads the flash file!

I am using CSS and Javascript to display a div with an
embedded flash object in it. Mozilla Firefox reloads the flash file
when the div is displayed! (I dont want this to happen, as it's
unexpected functionality, my expectation would be that the flash
file would not change it's state at all, and would remain in
whatever state it was left in.)
I was wondering if anyone has come across this issue and is
there something I can do to prevent this from occurring?
To be more specific, I have a single HTML page with 8 flash
files embedded in it (yeah I know, it's a bit much). I am then
using CSS and Javascript to display (via a numbered link (with an
id)) an equivalent numbered div tag containing the flash file.
Mozilla Firefox reloads the flash object that is in the div.
Internet Explorer will not do this and will instead, load the flash
object only upon initial view of the flash object. All subsequent
links (in IE) will NOT reload the flash object on the page. I'm
guessing this is some kind of difference in the flash player as an
Active X object and the plugin, or is it just IE being clever? Or
am I way off?
Anyway, here is the code...

I am using CSS and Javascript to display a div with an
embedded flash object in it. Mozilla Firefox reloads the flash file
when the div is displayed! (I dont want this to happen, as it's
unexpected functionality, my expectation would be that the flash
file would not change it's state at all, and would remain in
whatever state it was left in.)
I was wondering if anyone has come across this issue and is
there something I can do to prevent this from occurring?
To be more specific, I have a single HTML page with 8 flash
files embedded in it (yeah I know, it's a bit much). I am then
using CSS and Javascript to display (via a numbered link (with an
id)) an equivalent numbered div tag containing the flash file.
Mozilla Firefox reloads the flash object that is in the div.
Internet Explorer will not do this and will instead, load the flash
object only upon initial view of the flash object. All subsequent
links (in IE) will NOT reload the flash object on the page. I'm
guessing this is some kind of difference in the flash player as an
Active X object and the plugin, or is it just IE being clever? Or
am I way off?
Anyway, here is the code...

A Case Study Question in the Use of Stills with Final Cut Pro

Believe it or not, for the last week I have been reading endlessly about pixels, resolution, aspect ratio, Photoshop resizing, the bloody battle over the usefulness of the term "dpi" in video discussions, and generally about what one should do in order to use still images in a film edited in Final Cut Pro. And yet, though I have a PhD from an Ivy League university, and can understand a lot of things, I am sorry to say I am still at a loss.
Much of the discussions of photos on forums like this one are either quite technical or broadly philosophical. But my questions are completely practical and specific. I am not a photographer or a printer, nor am I an experienced editor. I am just a fairly smart person trying to use photos in his film. So I am going to ask some specific questions and hope for specific answers, without any philosophical waffling or technical mumbo jumbo.
I have one of those HP all in one printer/fax/scanner machines. I am told this device, while not fancy, is perfectly adequate to the task. Some of my photos I scan with this device from prints. Some of them I get from other people. (I have stopped downloading photos from the web, as the quality is nearly always poor.) I have Photoshop Essentials (not Photoshop). I am making a 90-minute HDV documentary, 16x9. The doc is mostly HDV footage with a still here and there. I want to be able to move on the photos (zoom, pan, etc.). I want, obviously, for them to look good. My sense is that the work flow is: (a) scan the photo (or obtain from some source as a digital file); alter the photo in some way in Photoshop; and (b) import the photo into your FCP project.
Question #1: If I have a 6x8 print, what settings should I scan it in with -- is it possible there really is no difference between scanning in it at 72dpi and 300dpi? Is it really all about the dimensions of the image? Isn't a photo whose dimensions are enlarged in Photoshop to make it available for panning and zooming in my sequence going to look fuzzier and more pixelated if it was originally scanned at 72dpi than at 300dpi? Also: Does it matter if I save it as a jpeg or tiff? Bottom line: What settings do I use in my scanning software when I scan a photo for this purpose?
Question #2: Once I have the image file on my hard drive, I suppose I now have to load it into Photoshop Elements and do something to it. What is it exactly I am using this program for? I'm going to take a wild guess. I use PS Elements to (1) crop the photo so that it has a 16x9 aspect ratio, and (2) resize it so that I can do pans and other Ken Burnsy moves on it in FCP. Bottom line: What exactly do I do in PSE to the photo and what settings do I use to both (a) make it available for moves and (b) not injure the quality of the photo by increasing its dimensions?
(In passing, I will say that I have done experiments that show that if I increase a photo's dimensions to, say, 4000 pixels by 2000 pixels, the photo's quality definitely and obviously suffers. I don't understand how a picture can be increased in size without losing sharpness. So, what am I doing wrong? Is this a function of it having been scanned in improperly to begin with?)
Question #3: If I am obtaining a photo from an outside source -- say, a professional photographer -- what are the specifications I ask for in both a hard print and a photo file? If the former, what dimensions do I ask for? If the latter, do I specify resolution and dimensions and file type?
These are my questions. At this point, I really don't want to know WHY any of this is the way it is. I just want someone to say: "Do this; do this; and then do this."
Thank you very much.

Studio X is absolutely correct; while DPI has no meaning in the video world, it often has significant meaning in scanning (and, of course, printing). If your scanning program only allows image size adjustments in DPI, then you'll have to adapt to that ... keeping in mind that the scanner's DPI setting directly relates to pixel resolution. And it is pixel resolution (not DPI) that will make all the difference in the world for images used in video. You can test this yourself by scanning an image at 1000 x 1200 @ 72 DPI and again at 1000 x 1200 at 300 DPI. They will look identical on TV or projection as long as the pixel resolution remains the same.
As an example, my Epson scanning software allows me to adjust image size by DPI or pixel resolution. Wanting to maintain the correct aspect ratio for the image area that I'm scanning, I adjust the DPI setting which in turn adjusts the pixel resolution automatically. But it doesn't work the other way around; if I adjust the pixel resolution settings manually, the DPI setting does not change. Your software may vary.
As Jim Cookman suggested, a scan setting of 300 DPI works well for most images ranging from 3 x 5 to 4 x 6 (typical snapshot size) in a DV Sequence. I may scan smaller images at 400 or 600 DPI and larger images (8 x 10 and up) at 150 DPI. Other size images fall in between those numbers. But I'm constantly watching the pixel resolution numbers to make sure I'm getting what I'll need to support the animation I intend to apply to the images once in FCP. Also bear in mind that I don't always scan the entire image. I only scan the area of an image that I intend to use in my program.
So the answer is that it all depends on your scanner's software and how far you plan to push into an image once in FCP. Do a few experiments ... you're a bright fellow so it shouldn't take long for you to find the formula that suits your purposes.
I haven't edited an HD Sequence using images yet, so I cannot offer definitive pixel resolutions for you there.
On to your specific questions:
1. See above. There is no one correct answer It all depends on what you intend to do with the image once it's in FCP. If you only plan to push in about 10%, you won't need much higher resolution than the equivalent of your FCP Sequence resolution. If you plan to push in further, you'll need a higher resolution to support that move.
2. I've been doing these for many years (SD Sequences only) and I've never loaded them into Photoshop first. I import the entire folder into FCP and drop it on the Timeline so I can see what the images look like on TV; unless your program is for CD-ROM or web delivery, that's where it counts. When you place them on the Timeline, FCP will automatically scale to your Sequence settings and pixel aspect ratio. If I see that some of them need adjustment using an external editor such as Photoshop, then and only then do I use that program. And by the way, if you have a vertical image and a 16 x 9 aspect ratio in FCP, how do you propose to crop it to fit? Perhaps you meant another term instead of "crop."
3. If it's a print, it won't matter what size they supply because you'll control the image size when scanning. If it's a file ... once again, the size (pixel resolution) depends on what you intend to do with the image once in FCP.
I really don't want to know WHY any of this is the way it is. I just want someone to say: "Do this; do this; and then do this."<<</div>
With that attitude, how did you ever earn a PhD from an Ivy League university? But if that is truly all you want, you might consider hiring an experienced editor to do it for you.
-DH

How to use Stylesheet (XSL) with JSPX ?

Hi!
How to use XSL stylesheets with JSPX pages?
I want use an xsl transformations with jspx pages, I tried using the following syntax, but it didn't work....
<?xml version='1.0' stylesheet type="text/xsl" href="mathml.xsl" encoding='UTF-8'?>
<tr:html xmlns="http://www.w3.org/1999/xhtml">
what is the best way to use xslt with jspx pages?
Thanking you in advance,
Samba

Thanks Ric,
But My problem is not solved..
I'm getting the transformation working in plain HTML
The file given below :
<?xml-stylesheet type="text/xsl" href="mathml.xsl"?>

<html xmlns="http://www.w3.org/1999/xhtml"
>
<head>
<title>Content MathML Examples</title>
</head>
<body>
<div style="border-style:solid; border-width:1px; margin: 1em 1em 1em 1em; padding: 1em 1em 1em 1em;color:gold;background:grey;">
<pre><![CDATA[<math xmlns="http://www.w3.org/1998/Math/MathML">
<apply>
<eq/>
<apply>
<abs/>
<ci> x </ci>
</apply>
<piecewise>
<piece>
      <apply><minus/><ci> x </ci></apply>
      <apply><lt/><ci> x </ci> <cn> 0 </cn></apply>
</piece>
<piece>
      <cn> 0 </cn>
      <apply><eq/><ci> x </ci> <cn> 0 </cn></apply>
</piece>
<piece>
      <ci> x </ci>
      <apply><gt/><ci> x </ci> <cn> 0 </cn></apply>
</piece>
</piecewise>
</apply>
</math>]]>
</pre>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<apply>
<eq/>
<apply>
<abs/>
<ci> x </ci>
</apply>
<piecewise>
<piece>
      <apply><minus/><ci> x </ci></apply>
      <apply><lt/><ci> x </ci> <cn> 0 </cn></apply>
</piece>
<piece>
      <cn> 0 </cn>
      <apply><eq/><ci> x </ci> <cn> 0 </cn></apply>
</piece>
<piece>
      <ci> x </ci>
      <apply><gt/><ci> x </ci> <cn> 0 </cn></apply>
</piece>
</piecewise>
</apply>
</math>
</div>
</body>
</html>But the same thing is not working when put in jspx page..
And I tried to use JSTL as you have suggested :
But the content is not getting transformed.
Here is the jspx page :
<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0"
          xmlns:h="http://java.sun.com/jsf/html"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
          xmlns:c="http://java.sun.com/jsp/jstl/core"
          xmlns:x="http://java.sun.com/jsp/jstl/xml"
          xmlns:m="http://www.w3.org/1998/Math/MathML"
          xmlns:xh="http://www.w3.org/1999/xhtml">
<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<f:view>
    <af:document binding="#{backing_xsltTest.document1}" id="document1">
<div style="border-style:solid; border-width:1px; margin: 1em 1em 1em 1em; padding: 1em 1em 1em 1em;color:gold;background:grey;">
<f:verbatim>
<pre><![CDATA[<math xmlns="http://www.w3.org/1998/Math/MathML">
<apply>
<eq/>
<apply>
<abs/>
<ci> x </ci>
</apply>
<piecewise>
<piece>
      <apply><minus/><ci> x </ci></apply>
      <apply><lt/><ci> x </ci> <cn> 0 </cn></apply>
</piece>
<piece>
      <cn> 0 </cn>
      <apply><eq/><ci> x </ci> <cn> 0 </cn></apply>
</piece>
<piece>
      <ci> x </ci>
      <apply><gt/><ci> x </ci> <cn> 0 </cn></apply>
</piece>
</piecewise>
</apply>
</math>]]>
</pre>
</f:verbatim>
<c:import var ="mathml" url="/mathml.xsl"/>
<x:transform xslt="${mathml}">
<math xmlns="http://www.w3.org/1998/Math/MathML">
<apply>
<eq/>
<apply>
<abs/>
<ci> x </ci>
</apply>
<piecewise>
<piece>
      <apply><minus/><ci> x </ci></apply>
      <apply><lt/><ci> x </ci> <cn> 0 </cn></apply>
</piece>
<piece>
      <cn> 0 </cn>
      <apply><eq/><ci> x </ci> <cn> 0 </cn></apply>
</piece>
<piece>
      <ci> x </ci>
      <apply><gt/><ci> x </ci> <cn> 0 </cn></apply>
</piece>
</piecewise>
</apply>
</math>
</x:transform>
</div>
      <af:form binding="#{backing_xsltTest.form1}" id="form1">
      </af:form>
    </af:document>
</f:view>

</jsp:root>Can you please suggest where I'm doing wrong?
Thanking you in advance,
Samba

Space between DIV with image and DIV with image background

I have just about finalized the new design on my website. The only issue I am having now is on the gallery page. There is a thin space between a DIV with an image and DIV with an image background. I am using these DIV's to give the illusion of a blue border. If you look at any of the other main pages on the site the space is not there. Any ideas?
http://liquidfirefishing.com/index.php
http://liquidfirefishing.com/gallery/main.php
Here are a couple of screenshots to show exactly what I mean.

Hello,
both my "IE8" and my "FF 7.01" show the blue boundary lines. Here my screenshots, left side IE8, right side FF:
Header 1
Header 2
Hans-Günter

How to use a div id as a php var

Hello,
I have a form that is generated from a database with unique links that users can click and edit details about various vehicles.
Now these links are each in their own div that has an id that i would like to use for insertion back into the database. (the users click the vehicles, then edit details, then it is submitted)
The link is clicked for the vehicle, some details are changed via js windows etc, then the user click a finalize upload button to submit form
For some reason i cant figure out how to use the div id to pass via php back to the database.
what is the correct way to do this? not very experienced with ajax, and dont want to use.... but maybe hidden fields? confused.... the clicking of the unique divs does not submit the form, so not sure how to store the data effectively.... page cant be refreshed.
[CODE]
<div id="vehicle57">
<a href="javascript:showSlider(57, 2001, 'Audi', 'A6' , 57, false);">
<span class="videoStatHeading">VEHICLE: </span>
2001 Audi A6</a>
</div>
<div id="vehicle54">
<a href="javascript:showSlider(54, 1999, 'Dodge', 'Caravan' , 3, false);"><span class="videoStatHeading">VEHICLE: </span>
1999 Dodge Caravan</a>
</div>
[/CODE]
thanks a lot

hello Shocker,
here is the showSlider function, sorry didnt include it earlier
function showSlider(vID,year,make,model,setupId,clickPOS){
          //remove default style
          //$("#uploadOptions").removeAttr("style");
          //window.alert("ID: " + vID);
          addMask();
    var pos;
    if(!clickPOS){
              //make sure radio button 1 is showing
              $("#firstRadio").show();
              pos = calcPos(vID);//pos contains the position of the link clicks.
    }else{
              //this means were clicked (change vehicle setup), hide
              $("#firstRadio").hide();
              pos = $("#bottomFieldset").offset();
              pos.top           = pos.top-40;
              pos.left           = pos.left-40;
    //reset error container
    $("#errorContainer").html("");
          //set width and height to zero before animation
          $("#uploadOptions").attr("style","height:0;width:0;opacity:0;filter:alpha(opacity=0)");
          //set position attributes rel to document
          $("#uploadOptions").offset(pos);
          /** AJAX request */
          if(!clickPOS){ //only reset
                    $.get("../ajaxResponders/getSetups.php",
                              {vId: vID},
                              function(data){
                                        $("#setup_span").html(data);//to strip the html headers from data
                    /** end AJAX request */
                    /** AJAX request */
                    $.get("../ajaxResponders/getSetupPic.php",
                              {vId: vID},
                              function(data){
                                        $("#setupThumb").html(data);//to strip the html headers from data
                     //reset error container
    $("#setupThumb").html(" ");
                    /** end AJAX request */
          //set element values of box
          $("#setupTextBoxWrapper").hide();//hide textbox
          $("#setupTextBox").html("").val("");//reset the textbox
          //set actionButton button text/script
          $("#actionButton").html("Confirm");
          $("#actionButton").attr("href","javascript:confirm();")
          $("#setupRadioOptions").attr("style",'');
          //$("#setupType").attr("checked",'false');//uncheck prev selected
          $("input[name='setupType']:checked").attr("checked",false);
          $("#vYear").html(year);
          $("#vModel").html(model);
          $("#vMake").html(make);
          $("#vID").attr('value',vID);
          $("#setupId").attr('value',setupId);//add setupId for case 1 & 2
          //animate box to open
          //$("#uploadOptions").hide().slideDown("slow");
          $("#setup_span").hide();
          //calculate height of setupbox
          var outerHeight = $("#setup_span").outerHeight(true);
          var fH = 280 +outerHeight;
          $("#uploadOptions").hide().css("z-index",9999);
          $("#uploadOptions").hide().animate({
                    "width": "500px",
                    "height": fH,
                    "opacity" : "1"
          },600,"swing",function(){
                    //adjust height to fit
                    $("#uploadOptions").css("height","");
                    //if no setups found in the db
                    if(!clickPOS){
                              $("#setupLabel").html("Is this the setup for the media displayed?");
                              var setSpanHTML = $("#setup_span").html();
                              if($.trim(setSpanHTML)== "" && !clickPOS){
                                        //hide setup
                                        $("input[name='setupType']:checked").attr("checked",false);//uncheck selected box
                                        $("#setupType1").attr("disabled","disabled");
                                        $("#setupType3").attr("disabled","disabled");
                                        $("#setupType2").attr("checked",true);
                                        //no setup from db
                                        $("#setup_span").html('<span style="color:red">No setups found for this vehicle</span>');
                                        //flash setup span
                                        $("#setup_span").show().animate({
                                        "opacity":"0"
                                        },300,"swing",function(){
                                                            $("#setup_span").animate({
                                                                      "opacity":"1"
                                                            },300);
                                                  });//end function
                                        //flash confirm button
                              }else{
                                        $("#setup_span").hide().slideDown("slow");
                    }else{
                              $("#setupLabel").html("Change Setup");
          });//end function
}//end function

Layoutpositioning without using ap div's

hey guys
i'm having a really hard time getting a knack for layout without using absolute positoning. When i initially started learning web design, i used ap divs and everything was fairly straighforward.Just draw a rectangle, give it width, height, coordinates and there u go. unfortunately when testing it live, it didn't look so good and didnt look the same throughout. back to the drawing board. Now i'm trying to use divs but with padding, margins etc but this is very unintuitive way to build sites (to me). I had a member here even moinck up my entire site in probably one hour whereas i've been working months trying to get mine going! its been very frustrating to say the least.
can anyone give me pointers about this. Before i could mock up a site in photoshop, contruct it using ap divs and everything fits (in design view at least). i look at a site and see a header, body, footer, aside see in my mind how its going to look but then creating the style entries before the layout hhas been contructed.. lets just say it looks like magic.
so i understand to use margins and padding etc to push the designs around on a page to mock up your design, but how do you visualize this and know ahead of time to give a certain divs this much padding, or margins or any of the other style markups?
can someone explain when you use margins vs padding? both of these are ordered by Top Right Bottom Left entries? but what does
"margin: 0 auto" mean??
what is the difference between
padding and padding-top when you have T R B L entries for normal padding?
what is the diff between margin and margin-left??
padding vs padding-bottom??
what does min-height do?
margin: 0 auto mean??
what is border top:nonw do??
if someone could explain this i would greatly appreciate it.
thanks!

westwm wrote:
so i understand to use margins and padding etc to push the designs around on a page to mock up your design, but how do you visualize this and know ahead of time to give a certain divs this much padding, or margins or any of the other style markups?
The way I work is by looking at the final design (which I usually mock up in Fireworks) and break it down visually and mentally into a simple box concept. This does take a bit of getting used to because you need to think and anticipate what will happen to the design if this or that happens or if the user does this or that.
Once I have a clear idea of the box construction in my mind I then start to insert the applicable <divs>, without intially adding any css styling. At a point where I have the main <divs> on the page I then being to apply the css styling. I almost never use padding on the main <div> construction as that is a PITA because of the box-model whereby it gets added to the width of the <div>, you can soon find your mathematics are incorrect which will junk the construction very quickly. Whenever and wherever possible I'll add padding to elements withing the main <divs>. So for a simple example rather that add a 25px left and right padding to a <div> which will hold some text where I need some clear space left and right I'll add it to the paragraph or heading tags which are inserted into the <div>, much cleaner and simpler.
This really is not rocket science, once you grasp the idea it's just a series of simple boxes you are inserting onto the page everything becomes very clear.
westwm wrote:
can someone explain when you use margins vs padding? both of these are ordered by Top Right Bottom Left entries? but what does
"margin: 0 auto" mean??
This means top/bottom padding 0. auto is used to automatically calculate and evenly distrubute the left and right padding of a container, commonly used when horizontally centering a container with a specified width within another container which could be the <body> tag or another <div> etc.
westwm wrote:
what is the difference between
padding and padding-top when you have T R B L entries for normal padding?
padding-top just adds the 'top' padding so this wont work:
padding-top: 10px 3px 7px 8px;
while this will work:
padding: 10px 3px 7px 8px;
westwm wrote:
what is the diff between margin and margin-left??
padding vs padding-bottom??
Margin adds a margin to top, left, bottom, right, whereas margin-left or margin-right just specifically adds a margin left or right.
margin is added outside of the container whilst padding is added inside of the container.
So in an instance where you might want to move a <div> to the right by 50px you would use margin-left: 50px;
In an instance where you want to add 50px between the left border of a <div> and its contents you would add padding-left: 50px; (but as I explained above I almost never apply padding to a main <div> as you then have to recaculate the width of the <div> (if its specified) to account for the padding you have added.
westwm wrote:
what does min-height do?
That sets a minimum height for a container i.e.' the container will never be less than the minimum height set but if it is higher as a result of it's content it will exceed the minimum height to accomodate the content, which is what you want it to do.
westwm wrote:
what is border top:nonw do??
Don't know never come across it before - nonw

Anyone use cfdocument tag with a cfloop

Anyone use <cfdocument> tag with a <cfloop>
I am trying to generate multiple documents like this -
<cfloop query="myquery">
   <cfdocument type=pdf>
        <html>...html code here...<html>
</cfdocument>
</cfloop>
But only the first document is generated in the browser?
my requirement i wnat to create multiple PDF and upload in to folder then zip folder so user can able to download ZIP file
thanks in advance

my requirement i wnat to create multiple PDF and upload in to folder then zip folder so user can able to download ZIP file
1) Create a folder named, say, docsDir, in the currect directory.
2) Create the PDFs, using Eddie Lotter's suggestion, naming each file dynamically, and storing each in the folder docsDir.
<cfloop query="myquery">
    
   <cfset filename='doc' & myquery.currentRow & '.pdf'>
   <cfdocument format="pdf" filename="#expandPath('docsDir\#filename#')#" overwrite="true">
        <html> Code to generate content of <cfoutput>#filename#</cfoutput> goes here. </html>
</cfdocument>
</cfloop>
3) Zip the folder, docsDir, storing the resulting file, docsDir.zip, in the current directory.
<cfzip action="zip" file="#expandPath('.')#/docsDir.zip"   source="#expandPath('docsDir')#">

AP Div with Rounded Corners

Hi All,
I want to draw an AP Div but I want it to have rounded corners. The reason being is that when I add a seperate background it will be more obvious and look better.
If anybody knows of a better way of adding a body of text with it's own background and rounded corners please can you let me know how to do it?
Many Thanks
Big_Gee

Wow Big_Gee! I think that's a Big_Question!
For a start, you can add rounded corners using CSS3 but it isn't widely supported accross all browsers. I don't think that DW will add those CSS rules but it won't take too much to find sample code on the web with a quick Google search on CSS Rounded Corners or something. Nancy O has recently responded to a rounded corner question here: http://forums.adobe.com/thread/657158?tstart=30. I don't konw if it makes a difference that you want the effect on AP Divs or not. I haven't read that you can't.
Adding a background image is achieved with CSS and you might be able to think about putting the rounded corners on the image in your graphics editor. That will depend partly on how flexible you site is and whether users can increase text size in the browser.
If you are using AP Divs (position: absolute) you need to be a bit cautious. General advice is to use them very sparingly and when other options don't achive what you want.
Martin

Removing div with flash/flex from page crushes browser

Hallo to all Flex experts !
For an application based on dojo ( javascript ) we prototype
the migration to flex -
The application is very big, we already work on it more than
2 years, so we try to make the migration smooth by implementing
parts of the application in flex.
To do that, we dynamically open a div with an <object>
/ <embed> in it, and close it on demand, by calling
javascript from flex, and simply remove the div from the document.
Problem is: this results in a browser crash ! (linux, FF 2,
Flash 9.0.31)
So, what is the recommended way to do that ( without crashing
the browser) ? how do we gracefully remove a flash/flex from the
page ?
Cheers,
Ron

or [simple typo funonmars ;-) ]
my_vars.send("
http://some.com/file.php","_blank","POST");
I used it a few times today for just the type of thing you're
describing... it should do what you're after.

(CSS) Rounded corner divs with shadows...

Hi,
It appears that with IE9, it's now safe to use CSS-generated rounded corner divs.
What about rounded corner divs with shadows?
Is this now do-able? (and by do-able, I mean viewable in IE9 and FF4)
Thanks!

Most modern browsers support CSS Border-Radius. However, you will need some webkit and mozilla specific rules for Firefox 3, Safari/Chrome.
BORDER-RADIUS
#Your-Div-Name{
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
/**NOTICE THE SYNTAX DIFFERENCES FOR MOZILLA**/
#Complex-Borders {
background: #FFF;
color: #000;
border: 9px solid red;
/**MOZILLA**/
-moz-border-radius-topright: 55px;
-moz-border-radius-bottomright:8px;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-topleft: 22px;
/**WEBKIT**/
-webkit-border-top-right-radius: 55px;
-webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius:0;
-webkit-border-top-left-radius:22px;
/**OPERA, OTHERS**/
border-top-right-radius: 55px;
border-bottom-right-radius: 8px;
border-bottom-left-radius:0;
border-top-left-radius:22px;
BOX-SHADOWS:
#Your-Div-Name {
-moz-box-shadow: 5px 5px 5px #000;
-webkit-box-shadow: 5px 5px 5px #000;
box-shadow: 5px 5px 5px #000;
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Im scrolling a div with a flash scrollbar and it works, almost

I have successfully created a flash scrollbar that controls a
div on my page as opposed to using the standard scrollbar or
coloring the standard scrollbar which only works in IE. All I am
doing is calling "getURL("javascript:jumptoPercent(percent);")
from my flash movie and it scrolls beautifully using that
function I made. I even put in mousewheel support. But there a few
shortcoming so far, and I was hoping someone would have a pointer
or two.
1. The mousewheel doesn't work in firefox, only in IE (havent
tested other browsers yet). Anybody know how to add firefox support
in?
2. The mousewheel only works when the mouse is over the
scrollbar itself. I would love for it to work when the user is over
the div being scrolled as well. I tried giving focus to the
scrollbar when the user mouses over the div with
onMouseOver="window.document.scrollbarSWF.focus();" , but it
doesn't seem to help.
3. If the user is dragging the scroller and the user leaves
the movie area, the movie loses focus and the scrollbar stops (I
dont know that there is much that can be done here). Is there
anyway for the movie to continue tracking the mouse (the drag
tracking) if the user leaves the movie area so it will function as
a normal scrollbar would?
Thanks for any advice on this.
Jon

Interesting....
1) I've not had a problem where the mousewheel doesn't work
in FireFox, but it doesn't work on the Mac in general.
2-3) There's no convenient way around this. Something crazy
you could consider doing is to use Flash 8 and ExternalInterface.
Basically, you could use JavaScript to do all the listening for
mousewheel actions, then report them to Flash via
ExternalInterface. But it might be easier and safer to just put the
whole content area in Flash, or leave it as a normal HTML/Browser
scrollbar, as ugly as they are.

How can I add more than one same spry menu (eg. collapsible menu) with in different styles (font size, color, background, etc) on current page?

How can I add more than one same spry menu (eg. collapsible menu) with in different styles (font size, color, background, etc) on current page?

Hi Nancy,
This screenshot was only for imagination. A part of the code (not all) is below. In the code there are some background images but they are not seem in live mode.
<!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></title>
<link href="css/my_site.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css"/>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<style>
#CollapsiblePanel1 .CollapsiblePanelOpen .CollapsiblePanelTab {
    background-color: #003366;
    font-size: 18px;
    line-height: 52px;
    color: #FFF;
#CollapsiblePanel1 .CollapsiblePanelTabHover .CollapsiblePanelTab {
    background-color: #003366;
    color: #FFF;
    text-shadow: 1px 1px #000;
    font-weight: bold;
    line-height: 52px;
#CollapsiblePanel1 .CollapsiblePanelClosed .CollapsiblePanelTab {
    background-color: #C3CFDF;
    border-radius: 5px 5px 0px 0px;
    color: #999
    text-shadow: 1px 1px #000;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    line-height: 52px;
#CollapsiblePanel2 .CollapsiblePanelOpen .CollapsiblePanelTab {
    background-image: url(images/international.jpg);
    background-repeat: no-repeat;
    font-size: 18px;
    line-height: 52px;
    color: #FFF;
#CollapsiblePanel2 .CollapsiblePanelTabHover .CollapsiblePanelTab {
    background-color: #003366;
    color: #FFF;
    text-shadow: 1px 1px #000;
    font-weight: bold;
    background-image: url(images/TR_Col-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
#CollapsiblePanel2 .CollapsiblePanelClosed .CollapsiblePanelTab {
    background-color: #C3CFDF;
    border-radius: 5px 5px 0px 0px;
    color: #999
    text-shadow: 1px 1px #000;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    background-image: url(images/TR_Gray2-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
#CollapsiblePanel2 .CollapsiblePanelContent {
    background-color: blue;
#CollapsiblePanel3 .CollapsiblePanelOpen .CollapsiblePanelTab {
    background-image: url(images/TR_Col-WEB.png);
    background-repeat: no-repeat;
    font-size: 18px;
    line-height: 52px;
    color: #FFF;
#CollapsiblePanel3 .CollapsiblePanelTabHover .CollapsiblePanelTab {
    background-color: #003366;
    color: #FFF;
    text-shadow: 1px 1px #000;
    font-weight: bold;
    background-image: url(images/TR_Col-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
#CollapsiblePanel3 .CollapsiblePanelClosed .CollapsiblePanelTab {
    background-color: #C3CFDF;
    border-radius: 5px 5px 0px 0px;
    color: #999
    text-shadow: 1px 1px #000;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    background-image: url(images/TR_Gray2-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
#CollapsiblePanel4 .CollapsiblePanelOpen .CollapsiblePanelTab {
    background-image: url(images/TR_Col-WEB.png);
    background-repeat: no-repeat;
    font-size: 18px;
    line-height: 52px;
    color: #FFF;
#CollapsiblePanel4 .CollapsiblePanelTabHover .CollapsiblePanelTab {
    background-color: #003366;
    color: #FFF;
    text-shadow: 1px 1px #000;
    font-weight: bold;
    background-image: url(images/TR_Col-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
#CollapsiblePanel4 .CollapsiblePanelClosed .CollapsiblePanelTab {
    background-color: #C3CFDF;
    border-radius: 5px 5px 0px 0px;
    color: #999
    text-shadow: 1px 1px #000;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    background-image: url(images/TR_Gray2-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
#CollapsiblePanel5 .CollapsiblePanelOpen .CollapsiblePanelTab {
    background-image: url(images/TR_Col-WEB.png);
    background-repeat: no-repeat;
    font-size: 18px;
    line-height: 52px;
    color: #FFF;
#CollapsiblePanel5 .CollapsiblePanelTabHover .CollapsiblePanelTab {
    background-color: #003366;
    color: #FFF;
    text-shadow: 1px 1px #000;
    font-weight: bold;
    background-image: url(images/TR_Col-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
#CollapsiblePanel5 .CollapsiblePanelClosed .CollapsiblePanelTab {
    background-color: #C3CFDF;
    border-radius: 5px 5px 0px 0px;
    color: #999
    text-shadow: 1px 1px #000;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    background-image: url(images/TR_Gray2-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
</style>

How do I use your iPhone with multiple iTunes libraries

Hi, I have my music spread out between 3 seperate Itunes libraries on 3 different profiles on my computer. I have the newest generation Ipod Nano, Ipod Shuffle, and Iphone 4s. My Ipod's are both full, so I've decided to start putting music onto my phone. With my Ipod's, I can plug them into one profile on the computer, download the music on the Itunes library that exists on that profile, then do the same with the other profiles with no issue. However when I try to do this with my phone, It asks me to erase the music I have gotten from one Itunes library and sync with the current library, as soon as I plug it in to a different Itunes on one of the other profiles. I have my Iphone configured with the Manually manage music option, and I still haven't found a way to use my Iphone with multiple music libraries. PLEASE HELP

http://support.apple.com/kb/PH12113 - If you use manual syncing, you can sync items from more than one iTunes library to your iPod. (You can sync iPod touch, iPhone, and iPad with only one iTunes library.)
http://support.apple.com/kb/HT1202 - When manually managing content, you can add content from multiple libraries to your iPod or iPad. Even when manually managing music, some content may be available from only one library at time. This includes all content on iPhone and video content on iPod and iPad.
They seem inconsistent as far as the iPad is concerned but in both articles the iPhone appears to only be able to sync to one library at a time.
Troubleshooting Home Sharing - http://support.apple.com/kb/TS2972

Using multiple desktops with a 4 finger swipe on a Mac Book Pro running Lion- is there a way that I can allow Safari open on several but not all?? Looks like I can set it for one but not others. All, one, or nothing

Using multiple desktops with a 4 finger swipe on a Mac Book Pro running Lion- is there a way that I can allow Safari open on several but not all?? Looks like I can set it for one but not others. All, one, or nothing

Hey Eric,
Thanks for taking the time. Unfortunately no that does not solve it. Same as swipe it will get me there and it will show separate programs spaced out. The issue I am having is that all my open word files are bunched up in a pile on top of each other. I can see the edges of each one but I want them to be separated from each other enough that I can visually identify what file is what.
Again, thanks for trying, it is appreciated.

Using collapsible divs with cfoutput

Similar Messages

Maybe you are looking for