JScrollPane static positioning

How can I set the size of a JScrollPane within a contentPane if I want the contentPane to act as a transparent layer over an html form? I would like the content pane to be the same size as the form so I can position the JScrollPane over a position in the html form. Sorry my explanation is so horrible.
Thanks

Swing related questions should be posted in the Swing forum.
The scrollbars will appear automatically when the preferred size of the component added to scroll pane is greater than the size of the scroll pane.
When you use a LayoutManager the preferred size is calculated automatically.
When you use absolute positioning you are responsible for setting the preferred size of the component.

Similar Messages

  • JScrollPane Scroll Position

    Tried posting this in the newbie section with no luck....
    I created a class extending a JScrollPane that encompasses a JTextPane. The method below appends some text to the current JTextPane with a certain color (this part works fine). What I am also trying to do is force the JScrollPane to keep focus at the bottom after the append if it was there before the append. Now I am running into trouble.
    The code can determine fine if the scroll pane is at the end, but after the append, it sometimes prematurely puts the pane at the end again; i.e. the method is telling the scroll pane to go to the end before the text pane and/or scroll pane have finished updating their size. Thus, the scroll pane is moved to the bottom, then the text and scroll panes resize, and the scroll pane is no longer at the bottom.
    It seems that this problem occurs when the text appended is multiple lines, in which case it appears that the panes are resized multiple times- the scroll bar is positioned correctly after the first resize, but subsequent resizings sometimes occur after I reposition the scroll bar to the current "end" (which then changes).
    I've tried validating both panes to force them to update before repositioning the scroll bar, but this does not seem to stop the problem (although it may help).
    Does anyone know how to correct this problem? I'm still guessing that something (perhaps the doc?) is not fully updated by the time I reposition the scroll bar. If this is the problem, any suggestions on how to force the document to be updated before playing with these GUI panes? If possible, I prefer not to use a timer or sleep a thread to wait for this updating.
    Of course, if you know of existing methods/settings that help with this, please tell. I didn't manage to find anything in the API's that gave me what I want, but I've been known to overlook things from time to time ;)
    Again, this is a method in a class extending JScrollPane.
    textPane is the JTextPane embedded in the scroll pane.
    doc is the JTextPane document.
    public synchronized void append(String appendString, Color textColor)
         JScrollBar scrollBar;
         BoundedRangeModel rangeModel;
         boolean isMaxed;
         scrollBar = this.getVerticalScrollBar();
         rangeModel = scrollBar.getModel();
         isMaxed = ((rangeModel.getValue() + rangeModel.getExtent())
                             == rangeModel.getMaximum());
              // check if the scroll bar is at the bottom
         SimpleAttributeSet textAttributes = new SimpleAttributeSet();
         StyleConstants.setForeground(textAttributes, textColor);
         try
              doc.insertString(doc.getLength(), appendString, textAttributes);
              // append the formatted string to the document
         catch(BadLocationException ex)
              System.out.println("Error writing to the text pane");
         if (isMaxed)
              textPane.validate();     //force the text pane to validate
              this.validate();    //force the scroll pane to update
              scrollBar.setValue(rangeModel.getMaximum() - rangeModel.getExtent());
              // The above line is sometimes called before the text and scroll panes
              // have finished updating.  The maximum and extent of the scroll bar
              // depend on the size of the document.

    You are correct in your observation that the size of the JScrollPane is incorrectly reflected for the size of your newly appended document. I spent some time on this bug and eventually came up with the following solution:
    textPane.addComponentListener( new ComponentListener(){
    public void componentHidden(ComponentEvent e)
    public void componentMoved(ComponentEvent e)
    public void componentResized(ComponentEvent e)
    JViewport vp = scrollPane.getViewport();
    incoming.revalidate();
    Rectangle visRect = vp.getViewRect();
    Dimension viewDim = vp.getViewSize();
    Rectangle rect = new Rectangle( 0, (int)(viewDim.getHeight() - visRect.getHeight()),
    (int)visRect.getWidth(), (int)visRect.getHeight() );
    vp.scrollRectToVisible( rect );
    public void componentShown(ComponentEvent e )
    This solution also has the side benefit of scrolling to the bottom when the JTextPane is resized by the user.

  • JScrollPane resets position after JTable.changeSelection

    I have JTable inside JScrollPane (what a surprise!). Table has some 20 columns, and only 10 are shown at once. If a user scrolls to the right to see the last few columns, and after that I change selection in JTable using
    jTable.changeSelection(newSelectedRow, 0, false, false);
    JScrollPane resets it's position to show first columns again, and user has to scroll again to the left.
    I solved this by
    Point p=scrollPane.getViewport().getViewPosition();
    jTable.changeSelection(newSelectedRow, 0, false, false);
    scrollPane.getViewport().setViewPosition(p);
    Iz works, but the table first renders first 10 columns and then scrolls to the left, which is annoying.
    Is there any other way?

    jTable.changeSelection(newSelectedRow, 0, false, false);Well your are telling it to go to the specified row and column(0).
    Two options:
    a) get the current view X position and determine which column this represents and set the column accordingly
    b) use setAutoscrolls( false );

  • JScrollPane : save positions

    I am working on file browser. I have a table in JScrollPane. I want to save position of JScrollPane vertical bar when I select a folder. I realized a class that save value when I select a folder. When I move up it loads these values and sets these properties back. But I have a problem. If I move from a folder with big number of files (maximum is big) to a folder with a few files all works fine.
    JScrollPane s =...
    s.getVerticalScrollBar().setValue (400);
    assert s.getVerticalScrollBar().getValue() == 400;
    But if I move from a folder with a few files (maximum is small) t oa folder with a lot of files it doesn't work.
    JScrollPane s =...
    s.getVerticalScrollBar().setValue (400);
    assert s.getVerticalScrollBar().getValue() != 400; //s.getVerticalScrollBar().getValue() == 152 for example
    What should I do?

    Try something like this:
    SELECT substring(I.ItemCode+'XXXXXXXXXXXXXXXXXXXXX',1,18) from OITM I

  • How do you fix the position of an object vertically only ("static" position horizontally)?

    I want to fix a "title" bar of a table vertically, but allow it to scroll with the rest of the page content horizontally. At the moment it's position is "fixed" which fixes the position vertically but horizontally too. I would like to have the coloured cells move horizontally with the rest of the table in the case that the browser window is not wide enough.
    Can this be done? If so, how?
    (this picture shows that the horizontal positions are different - would like them to remain in line with each other)
    Sorry if this is a silly question, I've only started using Dreamweaver yesterday... Thank you in advance for any help and advice.

    If you want to align your item horizontally center, left or right (along with other website content), you can put that item within a fixed position container, then align the item within the container however you see fit.
    <html>
    <head>
    <title></title>
    </head>
    <body>
    <div id="container" style="position:fixed; top:0px; height:100px; width:100%; border:1px solid orange;">
         <div id="item" style="width:300px; margin:auto; border:1px solid black">Some Content</div>
    </div>
    </body>
    </html>
    In the simplified example above, the container div is fixed to the top of the page, the item div is also then fixed at the top, however using css, it is  centered to the browser window. The border properties are there for illustrative purposes

  • Positioning HorizontalBar in JScrollPane and scroller

    Hi,
    I have attached a JScrollPane to a text area.
    the code is as follows.
    JScrollPane jsp = new JScrollPane( jtx1 );
    however since the contents in the JTextArea is large horizontally, the text gets displayed in the textarea. However the scroller in the JScrollPane gets positioned towards the end of the text. How do I specify to make sure that the Scroller is always in the start of the text?
    and also i wanted the Vertical ScrollBar to be always visble and what i did was:
    int vpolicy = jsp.getVerticalScrollBarPolicy();
    jsp.setVerticalScrollBarPolicy(JScrollPane.VERTICAL_SCROLLBAR_ALWAYS);
    The Vertical ScrollBar gets displayed. However I am not ablt to see the scroller in the JScrollPane's vertical bar as I don't have sufficient text vertically. How do i specify that the scroller always be present in my vertical side...irrespective of the contents in the Textarea. i.e i always want to scroll. (I see the ScrollBAr. however am not able to scroll b'coz i have less text.)
    Thanks!
    Karthik.

    Hi,
    I have attached a JScrollPane to a text area.
    the code is as follows.
    JScrollPane jsp = new JScrollPane( jtx1 );
    however since the contents in the JTextArea is large horizontally, the text gets displayed in the textarea. However the scroller in the JScrollPane gets positioned towards the end of the text. How do I specify to make sure that the Scroller is always in the start of the text?
    and also i wanted the Vertical ScrollBar to be always visble and what i did was:
    int vpolicy = jsp.getVerticalScrollBarPolicy();
    jsp.setVerticalScrollBarPolicy(JScrollPane.VERTICAL_SCROLLBAR_ALWAYS);
    The Vertical ScrollBar gets displayed. However I am not ablt to see the scroller in the JScrollPane's vertical bar as I don't have sufficient text vertically. How do i specify that the scroller always be present in my vertical side...irrespective of the contents in the Textarea. i.e i always want to scroll. (I see the ScrollBAr. however am not able to scroll b'coz i have less text.)
    Thanks!
    Karthik.

  • Static v absolute position

    Many comments have been made elsewhere about the wisdom of
    using 'absolute', particularly when a crossbrowsers are considered
    and user's adjustment of text size..to quote one problem...
    So, in order to eliminate these glitches from my pages, I
    should apparently convert to 'static'..
    What would be the steps to take to accomplish this without
    too much hassle. I do have a lot of CSS code, which, I guess, when
    adjusted would take care of some of the problems.
    Is there a tutorial/publication which deals with this
    procedure?

    Any element without an explicit positioning style is static,
    by default,
    e.g.,
    <html>
    <head>
    </head>
    <body>
    <div>This is a static div</div>
    <p>This is a static paragraph</p>
    </body>
    > So, in order to eliminate these glitches from my pages,
    I should
    > apparently
    > convert to 'static'..
    That's a gross oversimplification. You should re-design your
    layout so that
    the page elements are placed on the page as dictated by THE
    NORMAL FLOW,
    mediated through the CSS rules. Simply taking a page that has
    been designed
    using absolutely positioned elements, and converting the
    absolute position
    to static position (by removing the positioning altogether)
    will most likely
    not work very well. I think you understand this, but I'm not
    sure.
    > I do have a lot of CSS code
    This, too, is a bit troubling. Having a lot of CSS often
    means inefficient
    use of rules and selectors.
    In general, you don't need many custom classes. And, in fact,
    they
    make your life more difficult when you come back to maintain
    the page a year
    later. Use ID selectors and create descendent selector rules.
    An example -
    #maintable { .... }
    #maintable td { .... }
    #maintable td table { ... }
    each of those rules would apply explicitly to a) this table -
    <table id="maintable">,
    and b) this cell -
    <table id="maintable">
    <tr>
    <td>...</td>
    </tr>
    </table> (and all others in that table),
    and to this table -
    <table id="maintable">
    <tr>
    <td>
    <table>
    <tr>
    <td></td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    Then you could use this rule -
    #maintable table td.special { .... }
    to apply to this cell explicitly -
    <table id="maintable">
    <tr>
    <td>
    <table>
    <tr>
    <td class="special">this one</td>
    <td>but not this one</td>
    <td class="special">this one</td>
    <td>but not this one</td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    Also, it is not necessary to define default styles, e.g.,
    font-weight:normal, unless you are trying to counteract some
    cascading rule.
    Further, it is not necessary to define styles that are
    normally inherited,
    e.g.,
    body { font-family: Calibri, verdana, arial, helvetica,
    sans-serif; }
    will style all characters used on the page, no matter where
    they are located
    or in which container.
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    ==================
    "Karlhevera" <[email protected]> wrote in
    message
    news:[email protected]...
    > Many comments have been made elsewhere about the wisdom
    of using
    > 'absolute',
    > particularly when a crossbrowsers are considered and
    user's adjustment of
    > text
    > size..to quote one problem...
    >
    > So, in order to eliminate these glitches from my pages,
    I should
    > apparently
    > convert to 'static'..
    > What would be the steps to take to accomplish this
    without too much
    > hassle.
    > I do have a lot of CSS code, which, I guess, when
    adjusted would take care
    > of
    > some of the problems.
    > Is there a tutorial/publication which deals with this
    procedure?
    >
    >

  • Problem in setting desired position for JPanel in JScrollPane!!!

    Dear Friends,
    I am having problem to set desired Scrollable(JScrollPane) JPanel position. I have a JPanel in a JFrame which is scrolable with lot of objects. It automatically displays on the top position inside JScrollPane, I want to set scroll position on the middle for the panel.
    I went through the search for the same in this forum, i found some posts related to this but they are linked with JTextArea(setCaretPosition). With JPanel i can't set caret position.
    Could anyone guide me how to set the scroll position on middle.
    Regards..
    Jayshree

    Replace:
    if(view.getValueAt(row,column) instanceof ImageIcon){
            ((Component)view.getColumnModel().getColumn(column).getCellRenderer().
            getTableCellRendererComponent(view,view.getValueAt(row,column),true,true,row,column)).setCursor(Cursor.getPredefinedCursor(Cursor.HAND_CURSOR));
          else
            ((Component)view.getColumnModel().getColumn(column).getCellRenderer().
            getTableCellRendererComponent(view,view.getValueAt(row,column),true,true,row,column)).setCursor(new Cursor(Cursor.DEFAULT_CURSOR));
          }with:
    if(view.getValueAt(row,column) instanceof ImageIcon)
            view.setCursor(Cursor.getPredefinedCursor(Cursor.HAND_CURSOR));
          else
           view.setCursor(new Cursor(Cursor.DEFAULT_CURSOR));

  • Question on positioning div elements

    I have a wrapper div and a footer div below that. I want to
    center the wrapper div in the middle of the page and then position
    sub elements within this wrapper div. For example, I would like to
    create a "nav" div and an "actual content" div within the wrapper
    div. I learned that I can relatively position the wrapper div to be
    in the middle of a page regardless of screen width and then
    absolutely position the "nav" div and "actual content" within the
    wrapper div. The problem with this is that as soon as I absolutely
    position the "actual content" div within the wrapper div then the
    footer div jumps up the page to be right in the middle of the
    wrapper div when it should be located completely below the wrapper
    div. The other way of doing it would be to relatively position (or
    don't specify) both the nav and actual content divs and just float
    the nav to the left. This seems to work but I am wondering why the
    footer jumped up when I tried to absolutely postion divs in the
    wrapper div. Is there a way to not make the footer jump up and also
    what is the standard way of doing this?

    This may help you understand positioning a bit -
    There are 4 different types of positioning:
    Absolute
    Relative
    Fixed
    Static
    Here is a brief explanation of each kind of positioning (with
    regard to
    placement of elements on the page only)....
    Position:absolute (or A/P elements)
    This does several things -
    1. It 'removes' the element from the flow of the code on
    the page so that
    it can no longer influence the size or position of any other
    page element
    (except for those contained within it, of course).
    2. The absolutely positioned element takes its position from
    the position of
    its closest PARENT *positioned* element - in the
    absence of any explicitly
    positioned parent, this will default to the <body> tag,
    which is always
    positioned
    at 0,0 in the browser viewport.
    This means that it doesn't matter where in the HTML code the
    layer's code
    appears (between <body> and </body>), its
    location on the screen will not
    change (this assumes that you have not positioned the A/P
    element within
    a table or another A/P element, of course).
    Furthermore, the space in
    which
    this element would have appeared were it not positioned
    is not preserved
    on the screen. In other words, absolutely positioned elements
    don't take
    up any space on the page. In fact, they FLOAT over the page.
    Position:relative (or R/P elements)
    In contrast to absolute positioning, a relatively positioned
    page element is
    *not* removed from the flow of the code on the page, so
    it will use the
    spot
    where it would have appeared based on its position in
    the code as its
    zero point reference. If you then supply top, right,
    bottom, or left
    positions
    to the style for this element, those values will be
    used as offsets from
    its
    zero point.
    This means that it DOES matter where in the code the
    relatively positioned
    element appears (, as it will be positioned in that location
    (factoring in
    the offsets) on the screen (this is true for any placement in
    the code).
    Furthermore, the space where this element would have
    appeared is
    preserved in the display, and can therefore affect the
    placement of
    succeeding elements. This means that the taller a relatively
    positioned element is, the more space it forces on the page.
    Position:static
    As with relative position, static positions also "go with
    the flow". An
    element with a static position cannot have values for
    offsets (top, right,
    left, bottom) or if it has them, they will be ignored. Unless
    explicitly
    positioned, all div elements default to static positioning.
    Position:fixed
    A page element with this style will not scroll as the page
    content scrolls.
    Support for this in elements other than page backgrounds is
    quirky
    There are several other things you need to know:
    1. ANY page element can be positioned - paragraphs, tables,
    images, lists,
    etc.
    2. The <div> tag is a BLOCK level tag. This means that
    if it is not
    positioned or explicitly styled otherwise, a) it will always
    begin on a new
    line on the screen, and b) it will always force content to a
    new line below
    it, and c) it will always take up the entire width of its
    container (i.e.,
    width:100%).
    3. The placement of A/P elements *can* affect the BEHAVIOR of
    other
    elements
    on the page. For example, a 'layer' placed over a hyperlink
    will mask that
    hyperlink.
    You can see a good example of the essential difference
    between absolute and
    relative positioning here -
    http://www.great-web-sights.com/g_layersdemo.asp
    You can see a good demonstration of why using layers for a
    page layout tool
    is dangerous here -
    http://www.great-web-sights.com/g_layer-overlap.asp
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    ==================
    "Johnny the boy" <[email protected]> wrote
    in message
    news:[email protected]...
    >I have a wrapper div and a footer div below that. I want
    to center the
    >wrapper
    > div in the middle of the page and then position sub
    elements within this
    > wrapper div. For example, I would like to create a "nav"
    div and an
    > "actual
    > content" div within the wrapper div. I learned that I
    can relatively
    > position
    > the wrapper div to be in the middle of a page regardless
    of screen width
    > and
    > then absolutely position the "nav" div and "actual
    content" within the
    > wrapper
    > div. The problem with this is that as soon as I
    absolutely position the
    > "actual content" div within the wrapper div then the
    footer div jumps up
    > the
    > page to be right in the middle of the wrapper div when
    it should be
    > located
    > completely below the wrapper div. The other way of doing
    it would be to
    > relatively position (or don't specify) both the nav and
    actual content
    > divs and
    > just float the nav to the left. This seems to work but I
    am wondering why
    > the
    > footer jumped up when I tried to absolutely postion divs
    in the wrapper
    > div.
    > Is there a way to not make the footer jump up and also
    what is the
    > standard way
    > of doing this?
    >

  • Can Layers be given RELATIVE, rather than ABSOLUTE position

    I'm having no luck finding an answer to this in HELP. I place
    the layer's anchor in a table, then position the layer. If I
    subsequently add (or remove) any lines above the anchor, everything
    on the page moves down (or up), but the layer stays where it was,
    relative to the page, not the anchor.
    If there are several layers on the page this means a wholeot
    of repositioning every time I do an edit up-page.
    Any advice?

    This may help you understand positioning a bit -
    There are 4 different types of positioning:
    Absolute
    Relative
    Fixed
    Static
    Here is a brief explanation of each kind of positioning (with
    regard to
    placement of elements on the page only)....
    Position:absolute (or A/P elements)
    This does several things -
    1. It 'removes' the element from the flow of the code on
    the page so that
    it can no longer influence the size or position of any other
    page element
    (except for those contained within it, of course).
    2. The absolutely positioned element takes its position from
    the position of
    its closest PARENT *positioned* element - in the
    absence of any explicitly
    positioned parent, this will default to the <body> tag,
    which is always
    positioned
    at 0,0 in the browser viewport.
    This means that it doesn't matter where in the HTML code the
    layer's code
    appears (between <body> and </body>), its
    location on the screen will not
    change (this assumes that you have not positioned the A/P
    element within
    a table or another A/P element, of course).
    Furthermore, the space in
    which
    this element would have appeared were it not positioned
    is not preserved
    on the screen. In other words, absolutely positioned elements
    don't take
    up any space on the page. In fact, they FLOAT over the page.
    Position:relative (or R/P elements)
    In contrast to absolute positioning, a relatively positioned
    page element is
    *not* removed from the flow of the code on the page, so
    it will use the
    spot
    where it would have appeared based on its position in
    the code as its
    zero point reference. If you then supply top, right,
    bottom, or left
    positions
    to the style for this element, those values will be
    used as offsets from
    its
    zero point.
    This means that it DOES matter where in the code the
    relatively positioned
    element appears (, as it will be positioned in that location
    (factoring in
    the offsets) on the screen (this is true for any placement in
    the code).
    Furthermore, the space where this element would have
    appeared is
    preserved in the display, and can therefore affect the
    placement of
    succeeding elements. This means that the taller a relatively
    positioned element is, the more space it forces on the page.
    Position:static
    As with relative position, static positions also "go with
    the flow". An
    element with a static position cannot have values for
    offsets (top, right,
    left, bottom) or if it has them, they will be ignored. Unless
    explicitly
    positioned, all div elements default to static positioning.
    Position:fixed
    A page element with this style will not scroll as the page
    content scrolls.
    Support for this in elements other than page backgrounds is
    quirky
    There are several other things you need to know:
    1. ANY page element can be positioned - paragraphs, tables,
    images, lists,
    etc.
    2. The <div> tag is a BLOCK level tag. This means that
    if it is not
    positioned or explicitly styled otherwise, a) it will always
    begin on a new
    line on the screen, and b) it will always force content to a
    new line below
    it, and c) it will always take up the entire width of its
    container (i.e.,
    width:100%).
    3. The placement of A/P elements *can* affect the BEHAVIOR of
    other
    elements
    on the page. For example, a 'layer' placed over a hyperlink
    will mask that
    hyperlink.
    You can see a good example of the essential difference
    between absolute and
    relative positioning here -
    http://www.great-web-sights.com/g_layersdemo.asp
    You can see a good demonstration of why using layers for a
    page layout tool
    is dangerous here -
    http://www.great-web-sights.com/g_layer-overlap.asp
    Based on this, a static div (no longer a 'layer') would be
    what you want.
    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
    ==================
    "bwilsonduncan" <[email protected]> wrote in
    message
    news:[email protected]...
    > I'm having no luck finding an answer to this in HELP. I
    place the layer's
    > anchor in a table, then position the layer. If I
    subsequently add (or
    > remove)
    > any lines above the anchor, everything on the page moves
    down (or up), but
    > the
    > layer stays where it was, relative to the page, not the
    anchor.
    >
    > If there are several layers on the page this means a
    wholeot of
    > repositioning
    > every time I do an edit up-page.
    >
    > Any advice?
    >

  • AP Div positioning

    My problem is that I have 3 apDivs inside my table layout and
    they do not move with the rest of the content on the page. The rest
    of the table is set to center align so that it always stays in the
    middle of the window when you resize it. The apDivs, however, do
    not move and it seems that if I change the position to anything
    other than absolute it has a negative effect. Does anyone know of a
    solution to this problem?

    Certainly. You need to understand how absolute positioning
    works, though.
    This may help you understand positioning a bit -
    There are 4 different types of positioning:
    Absolute
    Relative
    Fixed
    Static
    Here is a brief explanation of each kind of positioning (with
    regard to
    placement of elements on the page only)....
    Position:absolute (or A/P elements)
    This does several things -
    1. It 'removes' the element from the flow of the code on
    the page so that
    it can no longer influence the size or position of any other
    page element
    (except for those contained within it, of course).
    2. The absolutely positioned element takes its position from
    the position of
    its closest PARENT *positioned* element - in the
    absence of any explicitly
    positioned parent, this will default to the <body> tag,
    which is always
    positioned
    at 0,0 in the browser viewport.
    This means that it doesn't matter where in the HTML code the
    layer's code
    appears (between <body> and </body>), its
    location on the screen will not
    change (this assumes that you have not positioned the A/P
    element within
    a table or another A/P element, of course).
    Furthermore, the space in
    which
    this element would have appeared were it not positioned
    is not preserved
    on the screen. In other words, absolutely positioned elements
    don't take
    up any space on the page. In fact, they FLOAT over the page.
    Position:relative (or R/P elements)
    In contrast to absolute positioning, a relatively positioned
    page element is
    *not* removed from the flow of the code on the page, so
    it will use the
    spot
    where it would have appeared based on its position in
    the code as its
    zero point reference. If you then supply top, right,
    bottom, or left
    positions
    to the style for this element, those values will be
    used as offsets from
    its
    zero point.
    This means that it DOES matter where in the code the
    relatively positioned
    element appears (, as it will be positioned in that location
    (factoring in
    the offsets) on the screen (this is true for any placement in
    the code).
    Furthermore, the space where this element would have
    appeared is
    preserved in the display, and can therefore affect the
    placement of
    succeeding elements. This means that the taller a relatively
    positioned element is, the more space it forces on the page.
    Position:static
    As with relative position, static positions also "go with
    the flow". An
    element with a static position cannot have values for
    offsets (top, right,
    left, bottom) or if it has them, they will be ignored. Unless
    explicitly
    positioned, all div elements default to static positioning.
    Position:fixed
    A page element with this style will not scroll as the page
    content scrolls.
    Support for this in elements other than page backgrounds is
    quirky
    There are several other things you need to know:
    1. ANY page element can be positioned - paragraphs, tables,
    images, lists,
    etc.
    2. The <div> tag is a BLOCK level tag. This means that
    if it is not
    positioned or explicitly styled otherwise, a) it will always
    begin on a new
    line on the screen, and b) it will always force content to a
    new line below
    it, and c) it will always take up the entire width of its
    container (i.e.,
    width:100%).
    3. The placement of A/P elements *can* affect the BEHAVIOR of
    other
    elements
    on the page. For example, a 'layer' placed over a hyperlink
    will mask that
    hyperlink.
    You can see a good example of the essential difference
    between absolute and
    relative positioning here -
    http://www.great-web-sights.com/g_layersdemo.asp
    You can see a good demonstration of why using layers for a
    page layout tool
    is dangerous here -
    http://www.great-web-sights.com/g_layer-overlap.asp
    Now - to fix your problem, try this -
    Change this -
    </head>
    to this -
    <style type="text/css">
    <!--
    body { text-align:center; }
    #wrapper { text-align:left; width:760px; margin:0
    auto;position:relative; }
    /* 760px will display on an 800px screen maximized browser
    window without */
    /* horizontal scrollbars. */
    -->
    </style>
    </head>
    change this -
    <body ...>
    (the ellipsis represents any other attributes that might be
    mentioned in the
    body tag, and SHOULD NOT BE INCLUDED EXPLICITLY!)
    to this -
    <body ...>
    <div id="wrapper">
    and this -
    </body>
    to this -
    <!-- /wrapper -->
    </div>
    </body>
    and see if that helps.
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    ==================
    "JonnyBoy333" <[email protected]> wrote in
    message
    news:[email protected]...
    > My problem is that I have 3 apDivs inside my table
    layout and they do not
    > move
    > with the rest of the content on the page. The rest of
    the table is set to
    > center align so that it always stays in the middle of
    the window when you
    > resize it. The apDivs, however, do not move and it seems
    that if I change
    > the
    > position to anything other than absolute it has a
    negative effect. Does
    > anyone
    > know of a solution to this problem?
    >

  • Stacking Static Divs

    Hi,
    I've made a picture gallery
    http://www.olicorse.com/portfolio/graphics/logos/logos.html
    and have positioned the captions under each image using Absolute
    Positioned divs.
    For some reason it is displaying oddly in Internet Explorer,
    although it works fine in Firefox and Safari and when I asked why,
    a member on here though told me I shouldn't use AP Divs because
    they will always stay in the exact same place so if the viewer
    increases the font or something, everything else will move and this
    might be the problem.
    However, in order to make the captions appear and disappear
    when the viewer changes the image, I have stacked them one on top
    of each other and used Hide/Show behaviours. If I just use Static
    Positioned divs, the captions will appear after one another so that
    there is a big gap when they are hidden.
    Is there a way of stacking Static Divs on top of each other,
    rather than having them appear after one another? Failing that, can
    anyone take a look at the site in IE and try and work out what's
    going wrong? I also think that it's not showing the margin I have
    added to the main gallery picture as this is what pushed the footer
    down to make room for the caption.
    Please help!!!

    Please do not start a new thread for a problem that you have
    already posted.
    It makes it very hard for us to help you.
    What also makes it very hard for us to help you is when you
    a) don't read
    the replies you get fully, and b) don't then ask questions
    about the things
    you don't understand. You have not done this.
    Can we take this back to the original thread, please.
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    ==================
    "olicorse" <[email protected]> wrote in
    message
    news:[email protected]...
    > Hi,
    >
    > I've made a picture gallery
    >
    http://www.olicorse.com/portfolio/graphics/logos/logos.html
    and have
    > positioned
    > the captions under each image using Absolute Positioned
    divs.
    >
    > For some reason it is displaying oddly in Internet
    Explorer, although it
    > works
    > fine in Firefox and Safari and when I asked why, a
    member on here though
    > told
    > me I shouldn't use AP Divs because they will always stay
    in the exact same
    > place so if the viewer increases the font or something,
    everything else
    > will
    > move and this might be the problem.
    >
    > However, in order to make the captions appear and
    disappear when the
    > viewer
    > changes the image, I have stacked them one on top of
    each other and used
    > Hide/Show behaviours. If I just use Static Positioned
    divs, the captions
    > will
    > appear after one another so that there is a big gap when
    they are hidden.
    >
    > Is there a way of stacking Static Divs on top of each
    other, rather than
    > having them appear after one another? Failing that, can
    anyone take a look
    > at
    > the site in IE and try and work out what's going wrong?
    I also think that
    > it's
    > not showing the margin I have added to the main gallery
    picture as this is
    > what
    > pushed the footer down to make room for the caption.
    >
    > Please help!!!
    >

  • Positioning apdiv's

    Hi,
    I'm sure this is a pretty basic question. How do I set apdivs
    to maintain their position for different screen resolutions?
    Thanks in advance!

    They do. An AP element will always be the same distance from
    their nearest
    positioned ancestor container, no matter what screen
    resolution you see the
    page on. And by the way, screen resolution only affects the
    maximum browser
    width you can have, it has no effect on page rendering.
    Anyhow - if what you are really asking is "how do I make ap
    divs center?",
    then the answer is this -
    Change this -
    </head>
    to this -
    <style type="text/css">
    <!--
    body { text-align:center; }
    #wrapper { text-align:left; width:760px; margin:0
    auto;position:relative; }
    /* 760px will display on an 800px screen maximized browser
    window without */
    /* horizontal scrollbars. */
    -->
    </style>
    </head>
    change this -
    <body ...>
    to this -
    <body ...>
    <div id="wrapper">
    and this -
    </body>
    to this -
    <!-- /wrapper -->
    </div>
    </body>
    and see if that helps.
    This may help you understand positioning a bit -
    There are 4 different types of positioning:
    Absolute
    Relative
    Fixed
    Static
    Here is a brief explanation of each kind of positioning (with
    regard to
    placement of elements on the page only)....
    Position:absolute (or A/P elements)
    This does several things -
    1. It 'removes' the element from the flow of the code on
    the page so that
    it can no longer influence the size or position of any other
    page element
    (except for those contained within it, of course).
    2. The absolutely positioned element takes its position from
    the position of
    its closest PARENT *positioned* element - in the
    absence of any explicitly
    positioned parent, this will default to the <body> tag,
    which is always
    positioned
    at 0,0 in the browser viewport.
    This means that it doesn't matter where in the HTML code the
    layer's code
    appears (between <body> and </body>), its
    location on the screen will not
    change (this assumes that you have not positioned the A/P
    element within
    a table or another A/P element, of course).
    Furthermore, the space in
    which
    this element would have appeared were it not positioned
    is not preserved
    on the screen. In other words, absolutely positioned elements
    don't take
    up any space on the page. In fact, they FLOAT over the page.
    Position:relative (or R/P elements)
    In contrast to absolute positioning, a relatively positioned
    page element is
    *not* removed from the flow of the code on the page, so
    it will use the
    spot
    where it would have appeared based on its position in
    the code as its
    zero point reference. If you then supply top, right,
    bottom, or left
    positions
    to the style for this element, those values will be
    used as offsets from
    its
    zero point.
    This means that it DOES matter where in the code the
    relatively positioned
    element appears (, as it will be positioned in that location
    (factoring in
    the offsets) on the screen (this is true for any placement in
    the code).
    Furthermore, the space where this element would have
    appeared is
    preserved in the display, and can therefore affect the
    placement of
    succeeding elements. This means that the taller a relatively
    positioned element is, the more space it forces on the page.
    Position:static
    As with relative position, static positions also "go with
    the flow". An
    element with a static position cannot have values for
    offsets (top, right,
    left, bottom) or if it has them, they will be ignored. Unless
    explicitly
    positioned, all div elements default to static positioning.
    Position:fixed
    A page element with this style will not scroll as the page
    content scrolls.
    Support for this in elements other than page backgrounds is
    quirky
    There are several other things you need to know:
    1. ANY page element can be positioned - paragraphs, tables,
    images, lists,
    etc.
    2. The <div> tag is a BLOCK level tag. This means that
    if it is not
    positioned or explicitly styled otherwise, a) it will always
    begin on a new
    line on the screen, and b) it will always force content to a
    new line below
    it, and c) it will always take up the entire width of its
    container (i.e.,
    width:100%).
    3. The placement of A/P elements *can* affect the BEHAVIOR of
    other
    elements
    on the page. For example, a 'layer' placed over a hyperlink
    will mask that
    hyperlink.
    You can see a good example of the essential difference
    between absolute and
    relative positioning here -
    http://www.great-web-sights.com/g_layersdemo.asp
    You can see a good demonstration of why using layers for a
    page layout tool
    is dangerous here -
    http://www.great-web-sights.com/g_layer-overlap.asp
    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
    ==================
    "Scot K" <[email protected]> wrote in
    message
    news:[email protected]...
    > Hi,
    >
    > I'm sure this is a pretty basic question. How do I set
    apdivs to maintain
    > their position for different screen resolutions?
    >
    > Thanks in advance!
    >

  • HOW do I create a SIMPLE fading slideshow in dreamweaver CS5?????

    I would like to have a slow fading slideshow of a few images relating to the web page that the user is on.
    I have a seperate div tag, with the space 235 x 440 pixels allowed for the images. All I want is the slideshow to fade in and out of one another using 3 or 4 photos, no text, no control panel or thumbnails or any other frills, just basic good quality photos fading in a looped slideshow.
    I just want that when the page loads up that the slideshow starts automatically and slowly loops continuously until the user changes page.
    I have seen animated gifs from photoshop, which are no good because the image quality is awful, and in fireworks, where it comes with either thumbnails or a control panel for the user to navigate manually the images. I don't want that. Can it be done easily in flash? or does dreamweaver have an answer?
    Surely there must be a simple and basic way in dreamweaver alone to just swap/fade an image with another image a few times and thats that? no?
    If it can't be done in dreamweaver, PLEASE tell me which program it can be done in and how.
    Many many many thanks in advance for anyone with an easily explained solution.
    Ian.

    Here is the code in my header:
    <!-- include jQuery library --><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><!-- include Cycle plugin --><script type="text/javascript" src="http://aap.org/international/jquery.cycle.all.latest.js"></script><script type="text/javascript">$(document).ready(function() {    $('.slideshow').cycle({          fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...     });});</script>
    Here is the code in the body part of my page:
    <div class="slideshow"><img alt="one" src="img/WebsiteSlideshow/_Terrell_IL SnJessieJackson.jpg" width="592" height="509" /><img alt="dcsn" src="img/WebsiteSlideshow/ONEorg 1.JPEG" width="592" height="509" /><img alt="one2" src="img/WebsiteSlideshow/ONEorg.JPG" width="592" height="509" /><img alt="saltlakecity" src="img/WebsiteSlideshow/ShotatLifeSaltLakeCity.JPG" width="592" height="509" /><img alt="saltlakecity" src="img/WebsiteSlideshow/Dr Sato, Ohio ONE vols and Portman.jpg" width="592" height="502" /><img alt="saltlakecity" src="img/WebsiteSlideshow/photo_4.jpg" width="592" height="509" /><img alt="saltlakecity" src="img/WebsiteSlideshow/UNEP4 Mtg.jpeg" width="592" height="509" /><img alt="saltlakecity" src="img/WebsiteSlideshow/DSCN2035.jpg" width="592" height="509" /></div>
    Here is the code in the jquery site:
    <!DOCTYPE html>
    <html>
    <head>
    <title>JQuery Cycle Plugin - Basic Demo</title>
    <style type="text/css">
    .slideshow { height: 232px; width: 232px; margin: auto; overflow: hidden; }
    .slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
    </style>
    <!-- include jQuery library -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <!-- include Cycle plugin -->
    <script type="text/javascript" src="http://aap.org/international/jquery.cycle.all.latest.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('.slideshow').cycle({
              fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    </script>
    </head>
    <body>
    <div class="slideshow">
              <img src="img/WebsiteSlideshow/_Terrell_IL SnJessieJackson.jpg" width="592" height="509" />
              <img src="<img src="img/WebsiteSlideshow/DSCN2051.JPG"  width="592" height="509" />
              <img src="img/WebsiteSlideshow/ONEorg.JPG" width="592" height="509" />
              <img src="img/WebsiteSlideshow/ShotatLifeSaltLakeCity.JPG" width="592" height="509" />
              <img src="img/WebsiteSlideshow/Dr Sato, Ohio ONE vols and Portman.jpg" width="592" height="502" />
        <img src="img/WebsiteSlideshow/photo_4.jpg" width="592" height="509" />
        <img src="img/WebsiteSlideshow/UNEP4 Mtg.jpeg" width="592" height="509" />
        <img src="img/WebsiteSlideshow/DSCN2035.jpg" width="592" height="509" />
         <img src="img/WebsiteSlideshow/DSCN2052.JPG" width="592" height="509" />
      </div>
    </body>
    </html>
    // process the args that were passed to the plugin fn
    function handleArguments(cont, 1, fade) {
    if (cont.cycleStop == undefined)
      cont.cycleStop = 0;
    if (options === undefined || options === null)
      options = {};
    if (options.constructor == String) {
      switch(options) {
      case 'destroy':
      case 'stop':
       var opts = $(cont).data('cycle.opts');
       if (!opts)
        return false;
       cont.cycleStop++; // callbacks look for change
       if (cont.cycleTimeout)
        clearTimeout(cont.cycleTimeout);
       cont.cycleTimeout = 0;
       $(cont).removeData('cycle.opts');
       if (options == 'destroy')
        destroy(opts);
       return false;
      case 'toggle':
       cont.cyclePause = (cont.cyclePause === 1) ? 0 : 1;
       checkInstantResume(cont.cyclePause, arg2, cont);
       return false;
      case 'pause':
       cont.cyclePause = 1;
       return false;
      case 'resume':
       cont.cyclePause = 0;
       checkInstantResume(false, arg2, cont);
       return false;
      case 'prev':
      case 'next':
       var opts = $(cont).data('cycle.opts');
       if (!opts) {
        log('options not found, "prev/next" ignored');
        return false;
       $.fn.cycle[options](opts);
       return false;
      default:
       options = { fx: options };
      return options;
    else if (options.constructor == Number) {
      // go to the requested slide
      var num = options;
      options = $(cont).data('cycle.opts');
      if (!options) {
       log('options not found, can not advance slide');
       return false;
      if (num < 0 || num >= options.elements.length) {
       log('invalid slide index: ' + num);
       return false;
      options.nextSlide = num;
      if (cont.cycleTimeout) {
       clearTimeout(cont.cycleTimeout);
       cont.cycleTimeout = 0;
      if (typeof arg2 == 'string')
       options.oneTimeFx = arg2;
      go(options.elements, options, 1, num >= options.currSlide);
      return false;
    return options;
    function checkInstantResume(isPaused, arg2, cont) {
      if (!isPaused && arg2 === true) { // resume now!
       var options = $(cont).data('cycle.opts');
       if (!options) {
        log('options not found, can not resume');
        return false;
       if (cont.cycleTimeout) {
        clearTimeout(cont.cycleTimeout);
        cont.cycleTimeout = 0;
       go(options.elements, options, 1, (!opts.rev && !opts.backwards));
    function removeFilter(el, opts) {
    if (!$.support.opacity && opts.cleartype && el.style.filter) {
      try { el.style.removeAttribute('filter'); }
      catch(smother) {} // handle old opera versions
    // unbind event handlers
    function destroy(opts) {
    if (opts.next)
      $(opts.next).unbind(opts.prevNextEvent);
    if (opts.prev)
      $(opts.prev).unbind(opts.prevNextEvent);
    if (opts.pager || opts.pagerAnchorBuilder)
      $.each(opts.pagerAnchors || [], function() {
       this.unbind().remove();
    opts.pagerAnchors = null;
    if (opts.destroy) // callback
      opts.destroy(opts);
    // one-time initialization
    function buildOptions($cont, $slides, els, options, o) {
    // support metadata plugin (v1.0 and v2.0)
    var opts = $.extend({}, $.fn.cycle.defaults, options || {}, $.metadata ? $cont.metadata() : $.meta ? $cont.data() : {});
    if (opts.autostop)
      opts.countdown = opts.autostopCount || els.length;
    var cont = $cont[0];
    $cont.data('cycle.opts', opts);
    opts.$cont = $cont;
    opts.stopCount = cont.cycleStop;
    opts.elements = els;
    opts.before = opts.before ? [opts.before] : [];
    opts.after = opts.after ? [opts.after] : [];
    opts.after.unshift(function(){ opts.busy=0; });
    // push some after callbacks
    if (!$.support.opacity && opts.cleartype)
      opts.after.push(function() { removeFilter(this, opts); });
    if (opts.continuous)
      opts.after.push(function() { go(els,opts,0,(!opts.rev && !opts.backwards)); });
    saveOriginalOpts(opts);
    // clearType corrections
    if (!$.support.opacity && opts.cleartype && !opts.cleartypeNoBg)
      clearTypeFix($slides);
    // container requires non-static position so that slides can be position within
    if ($cont.css('position') == 'static')
      $cont.css('position', 'relative');
    if (opts.width)
      $cont.width(opts.width);
    if (opts.height && opts.height != 'auto')
      $cont.height(opts.height);
    if (opts.startingSlide)
      opts.startingSlide = parseInt(opts.startingSlide);
    else if (opts.backwards)
      opts.startingSlide = els.length - 1;
    // if random, mix up the slide array
    if (opts.random) {
      opts.randomMap = [];
      for (var i = 0; i < els.length; i++)
       opts.randomMap.push(i);
      opts.randomMap.sort(function(a,b) {return Math.random() - 0.5;});
      opts.randomIndex = 1;
      opts.startingSlide = opts.randomMap[1];
    else if (opts.startingSlide >= els.length)
      opts.startingSlide = 0; // catch bogus input
    opts.currSlide = opts.startingSlide || 0;
    var first = opts.startingSlide;
    // set position and zIndex on all the slides
    $slides.css({position: 'absolute', top:0, left:0}).hide().each(function(i) {
      var z;
      if (opts.backwards)
       z = first ? i <= first ? els.length + (i-first) : first-i : els.length-i;
      else
       z = first ? i >= first ? els.length - (i-first) : first-i : els.length-i;
      $(this).css('z-index', z)
    // make sure first slide is visible
    $(els[first]).css('opacity',1).show(); // opacity bit needed to handle restart use case
    removeFilter(els[first], opts);
    // stretch slides
    if (opts.fit && opts.width)
      $slides.width(opts.width);
    if (opts.fit && opts.height && opts.height != 'auto')
      $slides.height(opts.height);
    // stretch container
    var reshape = opts.containerResize && !$cont.innerHeight();
    if (reshape) { // do this only if container has no size http://tinyurl.com/da2oa9
      var maxw = 0, maxh = 0;
      for(var j=0; j < els.length; j++) {
       var $e = $(els[j]), e = $e[0], w = $e.outerWidth(), h = $e.outerHeight();
       if (!w) w = e.offsetWidth || e.width || $e.attr('width')
       if (!h) h = e.offsetHeight || e.height || $e.attr('height');
       maxw = w > maxw ? w : maxw;
       maxh = h > maxh ? h : maxh;
      if (maxw > 0 && maxh > 0)
       $cont.css({width:maxw+'px',height:maxh+'px'});
    if (opts.pause)
      $cont.hover(function(){this.cyclePause++;},function(){this.cyclePause--;});
    if (supportMultiTransitions(opts) === false)
      return false;
    // apparently a lot of people use image slideshows without height/width attributes on the images.
    // Cycle 2.50+ requires the sizing info for every slide; this block tries to deal with that.
    var requeue = false;
    options.requeueAttempts = options.requeueAttempts || 0;
    $slides.each(function() {
      // try to get height/width of each slide
      var $el = $(this);
      this.cycleH = (opts.fit && opts.height) ? opts.height : ($el.height() || this.offsetHeight || this.height || $el.attr('height') || 0);
      this.cycleW = (opts.fit && opts.width) ? opts.width : ($el.width() || this.offsetWidth || this.width || $el.attr('width') || 0);
      if ( $el.is('img') ) {
       // sigh..  sniffing, hacking, shrugging...  this crappy hack tries to account for what browsers do when
       // an image is being downloaded and the markup did not include sizing info (height/width attributes);
       // there seems to be some "default" sizes used in this situation
       var loadingIE = ($.browser.msie  && this.cycleW == 28 && this.cycleH == 30 && !this.complete);
       var loadingFF = ($.browser.mozilla && this.cycleW == 34 && this.cycleH == 19 && !this.complete);
       var loadingOp = ($.browser.opera && ((this.cycleW == 42 && this.cycleH == 19) || (this.cycleW == 37 && this.cycleH == 17)) && !this.complete);
       var loadingOther = (this.cycleH == 0 && this.cycleW == 0 && !this.complete);
       // don't requeue for images that are still loading but have a valid size
       if (loadingIE || loadingFF || loadingOp || loadingOther) {
        if (o.s && opts.requeueOnImageNotLoaded && ++options.requeueAttempts < 100) { // track retry count so we don't loop forever
         log(options.requeueAttempts,' - img slide not loaded, requeuing slideshow: ', this.src, this.cycleW, this.cycleH);
         setTimeout(function() {$(o.s,o.c).cycle(options)}, opts.requeueTimeout);
         requeue = true;
         return false; // break each loop
        else {
         log('could not determine size of image: '+this.src, this.cycleW, this.cycleH);
      return true;
    if (requeue)
      return false;
    opts.cssBefore = opts.cssBefore || {};
    opts.animIn = opts.animIn || {};
    opts.animOut = opts.animOut || {};
    $slides.not(':eq('+first+')').css(opts.cssBefore);
    if (opts.cssFirst)
      $($slides[first]).css(opts.cssFirst);
    if (opts.timeout) {
      opts.timeout = parseInt(opts.timeout);
      // ensure that timeout and speed settings are sane
      if (opts.speed.constructor == String)
       opts.speed = $.fx.speeds[opts.speed] || parseInt(opts.speed);
      if (!opts.sync)
       opts.speed = opts.speed / 2;
      var buffer = opts.fx == 'shuffle' ? 500 : 250;
      while((opts.timeout - opts.speed) < buffer) // sanitize timeout
       opts.timeout += opts.speed;
    if (opts.easing)
      opts.easeIn = opts.easeOut = opts.easing;
    if (!opts.speedIn)
      opts.speedIn = opts.speed;
    if (!opts.speedOut)
      opts.speedOut = opts.speed;
    opts.slideCount = els.length;
    opts.currSlide = opts.lastSlide = first;
    if (opts.random) {
      if (++opts.randomIndex == els.length)
       opts.randomIndex = 0;
      opts.nextSlide = opts.randomMap[opts.randomIndex];
    else if (opts.backwards)
      opts.nextSlide = opts.startingSlide == 0 ? (els.length-1) : opts.startingSlide-1;
    else
      opts.nextSlide = opts.startingSlide >= (els.length-1) ? 0 : opts.startingSlide+1;
    // run transition init fn
    if (!opts.multiFx) {
      var init = $.fn.cycle.transitions[opts.fx];
      if ($.isFunction(init))
       init($cont, $slides, opts);
      else if (opts.fx != 'custom' && !opts.multiFx) {
       log('unknown transition: ' + opts.fx,'; slideshow terminating');
       return false;
    // fire artificial events
    var e0 = $slides[first];
    if (opts.before.length)
      opts.before[0].apply(e0, [e0, e0, opts, true]);
    if (opts.after.length > 1)
      opts.after[1].apply(e0, [e0, e0, opts, true]);
    if (opts.next)
      $(opts.next).bind(opts.prevNextEvent,function(){return advance(opts,opts.rev?-1:1)});
    if (opts.prev)
      $(opts.prev).bind(opts.prevNextEvent,function(){return advance(opts,opts.rev?1:-1)});
    if (opts.pager || opts.pagerAnchorBuilder)
      buildPager(els,opts);
    exposeAddSlide(opts, els);
    return opts;
    // save off original opts so we can restore after clearing state
    function saveOriginalOpts(opts) {
    opts.original = { before: [], after: [] };
    opts.original.cssBefore = $.extend({}, opts.cssBefore);
    opts.original.cssAfter  = $.extend({}, opts.cssAfter);
    opts.original.animIn = $.extend({}, opts.animIn);
    opts.original.animOut   = $.extend({}, opts.animOut);
    $.each(opts.before, function() { opts.original.before.push(this); });
    $.each(opts.after,  function() { opts.original.after.push(this); });
    function supportMultiTransitions(opts) {
    var i, tx, txs = $.fn.cycle.transitions;
    // look for multiple effects
    if (opts.fx.indexOf(',') > 0) {
      opts.multiFx = true;
      opts.fxs = opts.fx.replace(/\s*/g,'').split(',');
      // discard any bogus effect names
      for (i=0; i < opts.fxs.length; i++) {
       var fx = opts.fxs[i];
       tx = txs[fx];
       if (!tx || !txs.hasOwnProperty(fx) || !$.isFunction(tx)) {
        log('discarding unknown transition: ',fx);
        opts.fxs.splice(i,1);
        i--;
      // if we have an empty list then we threw everything away!
      if (!opts.fxs.length) {
       log('No valid transitions named; slideshow terminating.');
       return false;
    else if (opts.fx == 'all') {  // auto-gen the list of transitions
      opts.multiFx = true;
      opts.fxs = [];
      for (p in txs) {
       tx = txs[p];
       if (txs.hasOwnProperty(p) && $.isFunction(tx))
        opts.fxs.push(p);
    if (opts.multiFx && opts.randomizeEffects) {
      // munge the fxs array to make effect selection random
      var r1 = Math.floor(Math.random() * 20) + 30;
      for (i = 0; i < r1; i++) {
       var r2 = Math.floor(Math.random() * opts.fxs.length);
       opts.fxs.push(opts.fxs.splice(r2,1)[0]);
      debug('randomized fx sequence: ',opts.fxs);
    return true;
    // provide a mechanism for adding slides after the slideshow has started
    function exposeAddSlide(opts, els) {
    opts.addSlide = function(newSlide, prepend) {
      var $s = $(newSlide), s = $s[0];
      if (!opts.autostopCount)
       opts.countdown++;
      els[prepend?'unshift':'push'](s);
      if (opts.els)
       opts.els[prepend?'unshift':'push'](s); // shuffle needs this
      opts.slideCount = els.length;
      $s.css('position','absolute');
      $s[prepend?'prependTo':'appendTo'](opts.$cont);
      if (prepend) {
       opts.currSlide++;
       opts.nextSlide++;
      if (!$.support.opacity && opts.cleartype && !opts.cleartypeNoBg)
       clearTypeFix($s);
      if (opts.fit && opts.width)
       $s.width(opts.width);
      if (opts.fit && opts.height && opts.height != 'auto')
       $slides.height(opts.height);
      s.cycleH = (opts.fit && opts.height) ? opts.height : $s.height();
      s.cycleW = (opts.fit && opts.width) ? opts.width : $s.width();
      $s.css(opts.cssBefore);
      if (opts.pager || opts.pagerAnchorBuilder)
       $.fn.cycle.createPagerAnchor(els.length-1, s, $(opts.pager), els, opts);
      if ($.isFunction(opts.onAddSlide))
       opts.onAddSlide($s);
      else
       $s.hide(); // default behavior
    // reset internal state; we do this on every pass in order to support multiple effects
    $.fn.cycle.resetState = function(opts, fx) {
    fx = fx || opts.fx;
    opts.before = []; opts.after = [];
    opts.cssBefore = $.extend({}, opts.original.cssBefore);
    opts.cssAfter  = $.extend({}, opts.original.cssAfter);
    opts.animIn = $.extend({}, opts.original.animIn);
    opts.animOut   = $.extend({}, opts.original.animOut);
    opts.fxFn = null;
    $.each(opts.original.before, function() { opts.before.push(this); });
    $.each(opts.original.after,  function() { opts.after.push(this); });
    // re-init
    var init = $.fn.cycle.transitions[fx];
    if ($.isFunction(init))
      init(opts.$cont, $(opts.elements), opts);
    // this is the main engine fn, it handles the timeouts, callbacks and slide index mgmt
    function go(els, opts, manual, fwd) {
    // opts.busy is true if we're in the middle of an animation
    if (manual && opts.busy && opts.manualTrump) {
      // let manual transitions requests trump active ones
      debug('manualTrump in go(), stopping active transition');
      $(els).stop(true,true);
      opts.busy = false;
    // don't begin another timeout-based transition if there is one active
    if (opts.busy) {
      debug('transition active, ignoring new tx request');
      return;
    var p = opts.$cont[0], curr = els[opts.currSlide], next = els[opts.nextSlide];
    // stop cycling if we have an outstanding stop request
    if (p.cycleStop != opts.stopCount || p.cycleTimeout === 0 && !manual)
      return;
    // check to see if we should stop cycling based on autostop options
    if (!manual && !p.cyclePause && !opts.bounce &&
      ((opts.autostop && (--opts.countdown <= 0)) ||
      (opts.nowrap && !opts.random && opts.nextSlide < opts.currSlide))) {
      if (opts.end)
       opts.end(opts);
      return;
    // if slideshow is paused, only transition on a manual trigger
    var changed = false;
    if ((manual || !p.cyclePause) && (opts.nextSlide != opts.currSlide)) {
      changed = true;
      var fx = opts.fx;
      // keep trying to get the slide size if we don't have it yet
      curr.cycleH = curr.cycleH || $(curr).height();
      curr.cycleW = curr.cycleW || $(curr).width();
      next.cycleH = next.cycleH || $(next).height();
      next.cycleW = next.cycleW || $(next).width();
      // support multiple transition types
      if (opts.multiFx) {
       if (opts.lastFx == undefined || ++opts.lastFx >= opts.fxs.length)
        opts.lastFx = 0;
       fx = opts.fxs[opts.lastFx];
       opts.currFx = fx;
      // one-time fx overrides apply to:  $('div').cycle(3,'zoom');
      if (opts.oneTimeFx) {
       fx = opts.oneTimeFx;
       opts.oneTimeFx = null;
      $.fn.cycle.resetState(opts, fx);
      // run the before callbacks
      if (opts.before.length)
       $.each(opts.before, function(i,o) {
        if (p.cycleStop != opts.stopCount) return;
        o.apply(next, [curr, next, opts, fwd]);
      // stage the after callacks
      var after = function() {
       $.each(opts.after, function(i,o) {
        if (p.cycleStop != opts.stopCount) return;
        o.apply(next, [curr, next, opts, fwd]);
      debug('tx firing; currSlide: ' + opts.currSlide + '; nextSlide: ' + opts.nextSlide);
      // get ready to perform the transition
      opts.busy = 1;
      if (opts.fxFn) // fx function provided?
       opts.fxFn(curr, next, opts, after, fwd, manual && opts.fastOnEvent);
      else if ($.isFunction($.fn.cycle[opts.fx])) // fx plugin ?
       $.fn.cycle[opts.fx](curr, next, opts, after, fwd, manual && opts.fastOnEvent);
      else
       $.fn.cycle.custom(curr, next, opts, after, fwd, manual && opts.fastOnEvent);
    if (changed || opts.nextSlide == opts.currSlide) {
      // calculate the next slide
      opts.lastSlide = opts.currSlide;
      if (opts.random) {
       opts.currSlide = opts.nextSlide;
       if (++opts.randomIndex == els.length)
        opts.randomIndex = 0;
       opts.nextSlide = opts.randomMap[opts.randomIndex];
       if (opts.nextSlide == opts.currSlide)
        opts.nextSlide = (opts.currSlide == opts.slideCount - 1) ? 0 : opts.currSlide + 1;
      else if (opts.backwards) {
       var roll = (opts.nextSlide - 1) < 0;
       if (roll && opts.bounce) {
        opts.backwards = !opts.backwards;
        opts.nextSlide = 1;
        opts.currSlide = 0;
       else {
        opts.nextSlide = roll ? (els.length-1) : opts.nextSlide-1;
        opts.currSlide = roll ? 0 : opts.nextSlide+1;
      else { // sequence
       var roll = (opts.nextSlide + 1) == els.length;
       if (roll && opts.bounce) {
        opts.backwards = !opts.backwards;
        opts.nextSlide = els.length-2;
        opts.currSlide = els.length-1;
       else {
        opts.nextSlide = roll ? 0 : opts.nextSlide+1;
        opts.currSlide = roll ? els.length-1 : opts.nextSlide-1;
    if (changed && opts.pager)
      opts.updateActivePagerLink(opts.pager, opts.currSlide, opts.activePagerClass);
    // stage the next transition
    var ms = 0;
    if (opts.timeout && !opts.continuous)
      ms = getTimeout(els[opts.currSlide], els[opts.nextSlide], opts, fwd);
    else if (opts.continuous && p.cyclePause) // continuous shows work off an after callback, not this timer logic
      ms = 10;
    if (ms > 0)
      p.cycleTimeout = setTimeout(function(){ go(els, opts, 0, (!opts.rev && !opts.backwards)) }, ms);
    // invoked after transition
    $.fn.cycle.updateActivePagerLink = function(pager, currSlide, clsName) {
       $(pager).each(function() {
           $(this).children().removeClass(clsName).eq(currSlide).addClass(clsName);
    // calculate timeout value for current transition
    function getTimeout(curr, next, opts, fwd) {
    if (opts.timeoutFn) {
      // call user provided calc fn
      var t = opts.timeoutFn.call(curr,curr,next,opts,fwd);
      while ((t - opts.speed) < 250) // sanitize timeout
       t += opts.speed;
      debug('calculated timeout: ' + t + '; speed: ' + opts.speed);
      if (t !== false)
       return t;
    return opts.timeout;
    // expose next/prev function, caller must pass in state
    $.fn.cycle.next = function(opts) { advance(opts, opts.rev?-1:1); };
    $.fn.cycle.prev = function(opts) { advance(opts, opts.rev?1:-1);};
    // advance slide forward or back
    function advance(opts, val) {
    var els = opts.elements;
    var p = opts.$cont[0], timeout = p.cycleTimeout;
    if (timeout) {
      clearTimeout(timeout);
      p.cycleTimeout = 0;
    if (opts.random && val < 0) {
      // move back to the previously display slide
      opts.randomIndex--;
      if (--opts.randomIndex == -2)
       opts.randomIndex = els.length-2;
      else if (opts.randomIndex == -1)
       opts.randomIndex = els.length-1;
      opts.nextSlide = opts.randomMap[opts.randomIndex];
    else if (opts.random) {
      opts.nextSlide = opts.randomMap[opts.randomIndex];
    else {
      opts.nextSlide = opts.currSlide + val;
      if (opts.nextSlide < 0) {
       if (opts.nowrap) return false;
       opts.nextSlide = els.length - 1;
      else if (opts.nextSlide >= els.length) {
       if (opts.nowrap) return false;
       opts.nextSlide = 0;
    var cb = opts.onPrevNextEvent || opts.prevNextClick; // prevNextClick is deprecated
    if ($.isFunction(cb))
      cb(val > 0, opts.nextSlide, els[opts.nextSlide]);
    go(els, opts, 1, val>=0);
    return false;
    function buildPager(els, opts) {
    var $p = $(opts.pager);
    $.each(els, function(i,o) {
      $.fn.cycle.createPagerAnchor(i,o,$p,els,opts);
    opts.updateActivePagerLink(opts.pager, opts.startingSlide, opts.activePagerClass);
    $.fn.cycle.createPagerAnchor = function(i, el, $p, els, opts) {
    var a;
    if ($.isFunction(opts.pagerAnchorBuilder)) {
      a = opts.pagerAnchorBuilder(i,el);
      debug('pagerAnchorBuilder('+i+', el) returned: ' + a);
    else
      a = '<a href="#">'+(i+1)+'</a>';
    if (!a)
      return;
    var $a = $(a);
    // don't reparent if anchor is in the dom
    if ($a.parents('body').length === 0) {
      var arr = [];
      if ($p.length > 1) {
       $p.each(function() {
        var $clone = $a.clone(true);
        $(this).append($clone);
        arr.push($clone[0]);
       $a = $(arr);
      else {
       $a.appendTo($p);
    opts.pagerAnchors =  opts.pagerAnchors || [];
    opts.pagerAnchors.push($a);
    $a.bind(opts.pagerEvent, function(e) {
      e.preventDefault();
      opts.nextSlide = i;
      var p = opts.$cont[0], timeout = p.cycleTimeout;
      if (timeout) {
       clearTimeout(timeout);
       p.cycleTimeout = 0;
      var cb = opts.onPagerEvent || opts.pagerClick; // pagerClick is deprecated
      if ($.isFunction(cb))
       cb(opts.nextSlide, els[opts.nextSlide]);
      go(els,opts,1,opts.currSlide < i); // trigger the trans
    //  return false; // <== allow bubble
    if ( ! /^click/.test(opts.pagerEvent) && !opts.allowPagerClickBubble)
      $a.bind('click.cycle', function(){return false;}); // suppress click
    if (opts.pauseOnPagerHover)
      $a.hover(function() { opts.$cont[0].cyclePause++; }, function() { opts.$cont[0].cyclePause--; } );
    // helper fn to calculate the number of slides between the current and the next
    $.fn.cycle.hopsFromLast = function(opts, fwd) {
    var hops, l = opts.lastSlide, c = opts.currSlide;
    if (fwd)
      hops = c > l ? c - l : opts.slideCount - l;
    else
      hops = c < l ? l - c : l + opts.slideCount - c;
    return hops;
    // fix clearType problems in ie6 by setting an explicit bg color
    // (otherwise text slides look horrible during a fade transition)
    function clearTypeFix($slides) {
    debug('applying clearType background-color hack');
    function hex(s) {
      s = parseInt(s).toString(16);
      return s.length < 2 ? '0'+s : s;
    function getBg(e) {
      for ( ; e && e.nodeName.toLowerCase() != 'html'; e = e.parentNode) {
       var v = $.css(e,'background-color');
       if (v.indexOf('rgb') >= 0 ) {
        var rgb = v.match(/\d+/g);
        return '#'+ hex(rgb[0]) + hex(rgb[1]) + hex(rgb[2]);
       if (v && v != 'transparent')
        return v;
      return '#ffffff';
    $slides.each(function() { $(this).css('background-color', getBg(this)); });
    // reset common props before the next transition
    $.fn.cycle.commonReset = function(curr,next,opts,w,h,rev) {
    $(opts.elements).not(curr).hide();
    opts.cssBefore.opacity = 1;
    opts.cssBefore.display = 'block';
    if (w !== false && next.cycleW > 0)
      opts.cssBefore.width = next.cycleW;
    if (h !== false && next.cycleH > 0)
      opts.cssBefore.height = next.cycleH;
    opts.cssAfter = opts.cssAfter || {};
    opts.cssAfter.display = 'none';
    $(curr).css('zIndex',opts.slideCount + (rev === true ? 1 : 0));
    $(next).css('zIndex',opts.slideCount + (rev === true ? 0 : 1));
    // the actual fn for effecting a transition
    $.fn.cycle.custom = function(curr, next, opts, cb, fwd, speedOverride) {
    var $l = $(curr), $n = $(next);
    var speedIn = opts.speedIn, speedOut = opts.speedOut, easeIn = opts.easeIn, easeOut = opts.easeOut;
    $n.css(opts.cssBefore);
    if (speedOverride) {
      if (typeof speedOverride == 'number')
       speedIn = speedOut = speedOverride;
      else
       speedIn = speedOut = 1;
      easeIn = easeOut = null;
    var fn = function() {$n.animate(opts.animIn, speedIn, easeIn, cb)};
    $l.animate(opts.animOut, speedOut, easeOut, function() {
      if (opts.cssAfter) $l.css(opts.cssAfter);
      if (!opts.sync) fn();
    if (opts.sync) fn();
    // transition definitions - only fade is defined here, transition pack defines the rest
    $.fn.cycle.transitions = {
    fade: function($cont, $slides, opts) {
      $slides.not(':eq('+opts.currSlide+')').css('opacity',0);
      opts.before.push(function(curr,next,opts) {
       $.fn.cycle.commonReset(curr,next,opts);
       opts.cssBefore.opacity = 0;
      opts.animIn    = { opacity: 1 };
      opts.animOut   = { opacity: 0 };
      opts.cssBefore = { top: 0, left: 0 };
    $.fn.cycle.ver = function() { return ver; };
    // override these globally if you like (they are all optional)
    $.fn.cycle.defaults = {
    fx:     'fade', // name of transition effect (or comma separated names, ex: 'fade,scrollUp,shuffle')
    timeout:    4000,  // milliseconds between slide transitions (0 to disable auto advance)
    timeoutFn:     null,  // callback for determining per-slide timeout value:  function(currSlideElement, nextSlideElement, options, forwardFlag)
    continuous:    0,   // true to start next transition immediately after current one completes
    speed:     1000,  // speed of the transition (any valid fx speed value)
    speedIn:    null,  // speed of the 'in' transition
    speedOut:    null,  // speed of the 'out' transition
    next:     null,  // selector for element to use as event trigger for next slide
    prev:     null,  // selector for element to use as event trigger for previous slide
    // prevNextClick: null,  // @deprecated; please use onPrevNextEvent instead
    onPrevNextEvent: null,  // callback fn for prev/next events: function(isNext, zeroBasedSlideIndex, slideElement)
    prevNextEvent:'click.cycle',// event which drives the manual transition to the previous or next slide
    pager:     null,  // selector for element to use as pager container
    //pagerClick   null,  // @deprecated; please use onPagerEvent instead
    onPagerEvent:  null,  // callback fn for pager events: function(zeroBasedSlideIndex, slideElement)
    pagerEvent:   'click.cycle', // name of event which drives the pager navigation
    allowPagerClickBubble: false, // allows or prevents click event on pager anchors from bubbling
    pagerAnchorBuilder: null, // callback fn for building anchor links:  function(index, DOMelement)
    before:     null,  // transition callback (scope set to element to be shown):  function(currSlideElement, nextSlideElement, options, forwardFlag)
    after:     null,  // transition callback (scope set to element that was shown):  function(currSlideElement, nextSlideElement, options, forwardFlag)
    end:     null,  // callback invoked when the slideshow terminates (use with autostop or nowrap options): function(options)
    easing:     null,  // easing method for both in and out transitions
    easeIn:     null,  // easing for "in" transition
    easeOut:    null,  // easing for "out" transition
    shuffle:    null,  // coords for shuffle animation, ex: { top:15, left: 200 }
    animIn:     null,  // properties that define how the slide animates in
    animOut:    null,  // properties that define how the slide animates out
    cssBefore:    null,  // properties that define the initial state of the slide before transitioning in
    cssAfter:    null,  // properties that defined the state of the slide after transitioning out
    fxFn:     null,  // function used to control the transition: function(currSlideElement, nextSlideElement, options, afterCalback, forwardFlag)
    height:    'auto', // container height
    startingSlide: 0,   // zero-based index of the first slide to be displayed
    sync:     1,   // true if in/out transitions should occur simultaneously
    random:     0,   // true for random, false for sequence (not applicable to shuffle fx)
    fit:     0,   // force slides to fit container
    containerResize: 1,   // resize container to fit largest slide
    pause:     0,   // true to enable "pause on hover"
    pauseOnPagerHover: 0, // true to pause when hovering over pager link
    autostop:    0,   // true to end slideshow after X transitions (where X == slide count)
    autostopCount: 0,   // number of transitions (optionally used with autostop to define X)
    delay:     0,   // additional delay (in ms) for first transition (hint: can be negative)
    slideExpr:    null,  // expression for selecting slides (if something other than all children is required)
    cleartype:    !$.support.opacity,  // true if clearType corrections should be applied (for IE)
    cleartypeNoBg: false, // set to true to disable extra cleartype fixing (leave false to force background color setting on slides)
    nowrap:     0,   // true to prevent slideshow from wrapping
    fastOnEvent:   0,   // force fast transitions when triggered manually (via pager or prev/next); value == time in ms
    randomizeEffects: 1,  // valid when multiple effects are used; true to make the effect sequence random
    rev:     0,  // causes animations to transition in reverse
    manualTrump:   true,  // causes manual transition to stop an active transition instead of being ignored
    requeueOnImageNotLoaded: true, // requeue the slideshow if any image slides are not yet loaded
    requeueTimeout: 250,  // ms delay for requeue
    activePagerClass: 'activeSlide', // class name used for the active pager link
    updateActivePagerLink: null, // callback fn invoked to update the active pager link (adds/removes activePagerClass style)
    backwards:     false  // true to start slideshow at last slide and move backwards through the stack
    })(jQuery);
    * jQuery Cycle Plugin Transition Definitions
    * This script is a plugin for the jQuery Cycle Plugin
    * Examples and documentation at: http://malsup.com/jquery/cycle/
    * Copyright (c) 2007-2010 M. Alsup
    * Version:  2.72
    * Dual licensed under the MIT and GPL licenses:
    * http://www.opensource.org/licenses/mit-license.php
    * http://www.gnu.org/licenses/gpl.html
    (function($) {
    // These functions define one-time slide initialization for the named
    // transitions. To save file size feel free to remove any of these that you
    // don't need.
    $.fn.cycle.transitions.none = function($cont, $slides, opts) {
    opts.fxFn = function(curr,next,opts,after){
      $(next).show();
      $(curr).hide();
      after();
    // scrollUp/Down/Left/Right
    $.fn.cycle.transitions.scrollUp = function($cont, $slides, opts) {
    $cont.css('overflow','hidden');
    opts.before.push($.fn.cycle.commonReset);
    var h = $cont.height();
    opts.cssBefore ={ top: h, left: 0 };
    opts.cssFirst = { top: 0 };
    opts.animIn   = { top: 0 };
    opts.animOut  = { top: -h };
    $.fn.cycle.transitions.scrollDown = function($cont, $slides, opts) {
    $cont.css('overflow','hidden');
    opts.before.push($.fn.cycle.commonReset);
    var h = $cont.height();
    opts.cssFirst = { top: 0 };
    opts.cssBefore= { top: -h, left: 0 };
    opts.animIn   = { top: 0 };
    opts.animOut  = { top: h };
    $.fn.cycle.transitions.scrollLeft = function($cont, $slides, opts) {
    $cont.css('overflow','hidden');
    opts.before.push($.fn.cycle.commonReset);
    var w = $cont.width();
    opts.cssFirst = { left: 0 };
    opts.cssBefore= { left: w, top: 0 };
    opts.animIn   = { left: 0 };
    opts.animOut  = { left: 0-w };
    $.fn.cycle.transitions.scrollRight = function($cont, $slides, opts) {
    $cont.css('overflow','hidden');
    opts.before.push($.fn.cycle.commonReset);
    var w = $cont.width();
    opts.cssFirst = { left: 0 };
    opts.cssBefore= { left: -w, top: 0 };
    opts.animIn   = { left: 0 };
    opts.animOut  = { left: w };
    $.fn.cycle.transitions.scrollHorz = function($cont, $slides, opts) {
    $cont.css('overflow','hidden').width();
    opts.before.push(function(curr, next, opts, fwd) {
      $.fn.cycle.commonReset(curr,next,opts);
      opts.cssBefore.left = fwd ? (next.cycleW-1) : (1-next.cycleW);
      opts.animOut.left = fwd ? -curr.cycleW : curr.cycleW;
    opts.cssFirst = { left: 0 };
    opts.cssBefore= { top: 0 };
    opts.animIn   = { left: 0 };
    opts.animOut  = { top: 0 };
    $.fn.cycle.transitions.scrollVert = function($cont, $slides, opts) {
    $cont.css('overflow','hidden');
    opts.before.push(function(curr, next, opts, fwd) {
      $.fn.cycle.commonReset(curr,next,opts);
      opts.cssBefore.top = fwd ? (1-next.cycleH) : (next.cycleH-1);
      opts.animOut.top = fwd ? curr.cycleH : -curr.cycleH;
    opts.cssFirst = { top: 0 };
    opts.cssBefore= { left: 0 };
    opts.animIn   = { top: 0 };
    opts.animOut  = { left: 0 };
    // slideX/slideY
    $.fn.cycle.transitions.slideX = function($cont, $slides, opts) {
    opts.before.push(function(curr, next, opts) {
      $(opts.elements).not(curr).hide();
      $.fn.cycle.commonReset(curr,next,opts,false,true);
      opts.animIn.width = next.cycleW;
    opts.cssBefore = { left: 0, top: 0, width: 0 };
    opts.animIn  = { width: 'show' };
    opts.animOut = { width: 0 };
    $.fn.cycle.transitions.slideY = function($cont, $slides, opts) {
    opts.before.push(function(curr, next, opts) {
      $(opts.elements).not(curr).hide();
      $.fn.cycle.commonReset(curr,next,opts,true,false);
      opts.animIn.height = next.cycleH;
    opts.cssBefore = { left: 0, top: 0, height: 0 };
    opts.animIn  = { height: 'show' };
    opts.animOut = { height: 0 };
    // shuffle
    $.fn.cycle.transitions.shuffle = function($cont, $slides, opts) {
    var i, w = $cont.css('overflow', 'visible').width();
    $slides.css({left: 0, top: 0});
    opts.before.push(function(curr,next,opts) {
      $.fn.cycle.commonReset(curr,next,opts,true,true,true);
    // only adjust speed once!
    if (!opts.speedAdjusted) {
      opts.speed = opts.speed / 2; // shuffle has 2 transitions
      opts.speedAdjusted = true;
    opts.random = 0;
    opts.shuffle = opts.shuffle || {left:-w, top:15};
    opts.els = [];
    for (i=0; i < $slides.length; i++)
      opts.els.push($slides[i]);
    for (i=0; i < opts.currSlide; i++)
      opts.els.push(opts.els.shift());
    // custom transition fn (hat tip to Benjamin Sterling for this bit of sweetness!)
    opts.fxFn = function(curr, next, opts, cb, fwd) {
      var $el = fwd ? $(curr) : $(next);
      $(next).css(opts.cssBefore);
      var count = opts.slideCount;
      $el.animate(opts.shuffle, opts.speedIn, opts.easeIn, function() {
       var hops = $.fn.cycle.hopsFromLast(opts, fwd);
       for (var k=0; k < hops; k++)
        fwd ? opts.els.push(opts.els.shift()) : opts.els.unshift(opts.els.pop());
       if (fwd) {
        for (var i=0, len=opts.els.length; i < len; i++)
         $(opts.els[i]).css('z-index', len-i+count);
       else {
        var z = $(curr).css('z-index');
        $el.css('z-index', parseInt(z)+1+count);
       $el.animate({left:0, top:0}, opts.speedOut, opts.easeOut, function() {
        $(fwd ? this : curr).hide();
        if (cb) cb();
    opts.cssBefore = { display: 'block', opacity: 1, top: 0, left: 0 };
    // turnUp/Down/Left/Right
    $.fn.cycle.transitions.turnUp = function($cont, $slides, opts) {
    opts.before.push(function(curr, next, opts) {
      $.fn.cycle.commonReset(curr,next,opts,true,false);
      opts.cssBefore.top = next.cycleH;
      opts.animIn.height = next.cycleH;
    opts.cssFirst  = { top: 0 };
    opts.cssBefore = { left: 0, height: 0 };
    opts.animIn    = { top: 0 };
    opts.animOut   = { height: 0 };
    $.fn.cycle.transitions.turnDown = function($cont, $slides, opts) {
    opts.before.push(function(curr, next, opts) {
      $.fn.cycle.commonReset(curr,next,opts,true,false);
      opts.animIn.height = next.cycleH;
      opts.animOut.top   = curr.cycleH;
    opts.cssFirst  = { top: 0 };
    opts.cssBefore = { left: 0, top: 0, height: 0 };
    opts.animOut   = { height: 0 };
    $.fn.cycle.transitions.turnLeft = function($cont, $slides, opts) {
    opts.before.push(function(curr, next, opts) {
      $.fn.cycle.commonReset(curr,next,opts,false,true);
      opts.cssBefore.left = next.cycleW;
      opts.animIn.width = next.cycleW;
    opts.cssBefore = { top: 0, width: 0  };
    opts.animIn    = { left: 0 };
    opts.animOut   = { width: 0 };
    $.fn.cycle.transitions.turnRight = function($cont, $slides, opts) {
    opts.before.push(function(curr, next, opts) {
      $.fn.cycle.commonReset(curr,next,opts,false,true);
      opts.animIn.width = next.cycleW;
      opts.animOut.left = curr.cycleW;
    opts.cssBefore = { top: 0, left: 0, width: 0 };
    opts.animIn    = { left: 0 };
    opts.animOut   = { width: 0 };
    // zoom
    $.fn.cycle.transitions.zoom = function($cont, $slides, opts) {
    opts.before.push(function(curr, next, opts) {
      $.fn.cycle.commonReset(curr,next,opts,false,false,true);
      opts.cssBefore.top = next.cycleH/2;
      opts.cssBefore.left = next.cycleW/2;
      opts.animIn    = { top: 0, left: 0, width: next.cycleW, height: next.cycleH };
      opts.animOut   = { width: 0, height: 0, top: curr.cycleH/2, left: curr.cycleW/2 };
    opts.cssFirst = { top:0, left: 0 };
    opts.cssBefore = { width: 0, height: 0 };
    // fadeZoom
    $.fn.cycle.transitions.fadeZoom = function($cont, $slides, opts) {
    opts.before.push(function(curr, next, opts) {
      $.fn.cycle.commonReset(curr,next,opts,false,false);
      opts.cssBefore.left = next.cycleW/2;
      opts.cssBefore.top = next.cycleH/2;
      opts.animIn = { top: 0, left: 0, width: next.cycleW, height: next.cycleH };
    opts.cssBefore = { width: 0, height: 0 };
    opts.animOut  = { opacity: 0 };
    // blindX
    $.fn.cycle.transitions.blindX = function($cont, $slides, opts) {
    var w = $cont.css('overflow','hidden').width();
    opts.before.push(function(curr, next, opts) {
      $.fn.cycle.commonReset(curr,next,opts);
      opts.animIn.width = next.cycleW;
      opts.animOut.left   = curr.cycleW;
    opts.cssBefore = { left: w, top: 0 };
    opts.animIn = { left: 0 };
    opts.animOut  = { left: w };
    // blindY
    $.fn.cycle.transitions.blindY = function($cont, $slides, opts) {
    var h = $cont.css('overflow','hidden').height();
    opts.before.push(function(curr, next, opts) {
      $.fn.cycle.commonReset(curr,next,opts);
      opts.animIn.height = next.cycleH;
      opts.animOut.top   = curr.cycleH;
    opts.cssBefore = { top: h, left: 0 };
    opts.animIn = { top: 0 };
    opts.animOut  = { top: h };
    // blindZ
    $.fn.cycle.transitions.blindZ = function($cont, $slides, opts) {
    var h = $cont.css('overflow','hidden').height();
    var w = $cont.width();
    opts.before.push(function(curr, next, opts) {
      $.fn.cycle.commonReset(curr,next,opts);
      opts.animIn.height = next.cycleH;
      opts.animOut.top   = curr.cycleH;
    opts.cssBefore = { top: h, left: w };
    opts.animIn = { top: 0, left: 0 };
    opts.animOut  = { top: h, left: w };
    // growX - grow horizontally from centered 0 width
    $.fn.cycle.transitions.growX = function($cont, $slides, opts) {
    opts.before.push(function(curr, next, opts) {
      $.fn.cycle.commonReset(curr,next,opts,false,true);
      opts.cssBefore.left = this.cycleW/2;
      opts.animIn = { left: 0, width: this.cycleW };
      opts.animOut = { left: 0 };
    opts.cssBefore = { width: 0, top: 0 };
    // growY - grow vertically from centered 0 height
    $.fn.cycle.transitions.growY = function($cont, $slides, opts) {
    opts.before.push(function(curr, next, opts) {
      $.fn.cycle.commonReset(curr,next,opts,true,false);
      opts.cssBefore.top = this.cycleH/2;
      opts.animIn = { top: 0, height: this.cycleH };
      opts.animOut = { top: 0 };
    opts.cssBefore = { height: 0, left: 0 };
    // curtainX - squeeze in both edges horizontally
    $.fn.cycle.transitions.curtainX = function($cont, $slides, opts) {
    opts.before.push(function(curr, next, opts) {
      $.fn.cycle.commonReset(curr,next,opts,false,true,true);
      opts.cssBefore.left = next.cycleW/2;
      opts.animIn = { left: 0, width: this.cycleW };
      opts.animOut = { left: curr.cycleW/2, width: 0 };
    opts.cssBefore = { top: 0, width: 0 };
    // curtainY - squeeze in both edges vertically
    $.fn.cycle.transitions.curtainY = function($cont, $slides, opts) {
    opts.before.push(function(curr, next, opts) {
      $.fn.cycle.commonReset(curr,next,opts,true,false,true);
      opts.cssBefore.top = next.cycleH/2;
      opts.animIn = { top: 0, height: next.cycleH };
      opts.animOut = { top: curr.cycleH/2, height: 0 };
    opts.cssBefore = { left: 0, height: 0 };
    // cover - curr slide covered by next slide
    $.fn.cycle.transitions.cover = function($cont, $slides, opts) {
    var d = opts.direction || 'left';
    var w = $cont.css('overflow','hidden').width();
    var h = $cont.height();
    opts.before.push(function(curr, next, opts) {
      $.fn.cycle.commonReset(curr,next,opts);
      if (d == 'right')
       opts.cssBefore.left = -w;
      else if (d == 'up')
       opts.cssBefore.top = h;
      else if (d == 'down')
       opts.cssBefore.top = -h;
      else
       opts.cssBefore.left = w;
    opts.animIn = { left: 0, top: 0};
    opts.animOut = { opacity: 1 };
    opts.cssBefore = { top: 0, left: 0 };
    // uncover - curr slide moves off next slide
    $.fn.cycle.transitions.uncover = function($cont, $slides, opts) {
    var d = opts.direction || 'left';
    var w = $cont.css('overflow','hidden').width();
    var h = $cont.height();
    opts.before.push(function(curr, next, opts) {
      $.fn.cycle.commonReset(curr,next,opts,true,true,true);
      if (d == 'right')
       opts.animOut.left = w;
      else if (d == 'up')
       opts.animOut.top = -h;
      else if (d == 'down')
       opts.animOut.top = h;
      else
       opts.animOut.left = -w;
    opts.animIn = { left: 0, top: 0 };
    opts.animOut = { opacity: 1 };
    opts.cssBefore = { top: 0, left: 0 };
    // toss - move top slide and fade away
    $.fn.cycle.transitions.toss = function($cont, $slides, opts) {
    var w = $cont.css('overflow','visible').width();
    var h = $cont.height();
    opts.before.push(function(curr, next, opts) {
      $.fn.cycle.commonReset(curr,next,opts,true,true,true);
      // provide default toss settings if animOut not provided
      if (!opts.animOut.left && !opts.animOut.top)
       opts.animOut = { left: w*2, top: -h/2, opacity: 0 };
      else
       opts.animOut.opacity = 0;
    opts.cssBefore = { left: 0, top: 0 };
    opts.animIn = { left: 0 };
    // wipe - clip animation
    $.fn.cycle.transitions.wipe = function($cont, $slides, opts) {
    var w = $cont.css('overflow','hidden').width();
    var h = $cont.height();
    opts.cssBefore = opts.cssBefore || {};
    var clip;
    if (opts.clip) {
      if (/l2r/.test(opts.clip))
       clip = 'rect(0px 0px '+h+'px 0px)';
      else if (/r2l/.test(opts.clip))
       clip = 'rect(0px '+w+'px '+h+'px '+w+'px)';
      else if (/t2b/.test(opts.clip))
       clip = 'rect(0px '+w+'px 0px 0px)';
      else if (/b2t/.test(opts.clip))
       clip = 'rect('+h+'px '+w+'px '+h+'px 0px)';
      else if (/zoom/.test(opts.clip)) {
       var top = parseInt(h/2);
       var left = parseInt(w/2);
       clip = 'rect('+top+'px '+left+'px '+top+'px '+left+'px)';
    opts.cssBefore.clip = opts.cssBefore.clip || clip || 'rect(0px 0px 0px 0px)';
    var d = opts.cssBefore.clip.match(/(\d+)/g);
    var t = parseInt(d[0]), r = parseInt(d[1]), b = parseInt(d[2]), l = parseInt(d[3]);
    opts.before.push(function(curr, next, opts) {
      if (curr == next) return;
      var $curr = $(curr), $next = $(next);
      $.fn.cycle.commonReset(curr,next,opts,true,true,false);
      opts.cssAfter.display = 'block';
      var step = 1, count = parseInt((opts.speedIn / 13)) - 1;
      (function f() {
       var tt = t ? t - parseInt(step * (t/count)) : 0;
       var ll = l ? l - parseInt(step * (l/count)) : 0;
       var bb = b < h ? b + parseInt(step * ((h-b)/count || 1)) : h;
       var rr = r < w ? r + parseInt(step * ((w-r)/count || 1)) : w;
       $next.css({ clip: 'rect('+tt+'px '+rr+'px '+bb+'px '+ll+'px)' });
       (step++ <= count) ? setTimeout(f, 13) : $curr.css('display', 'none');
    opts.cssBefore = { display: 'block', opacity: 1, top: 0, left: 0 };
    opts.animIn    = { left: 0 };
    opts.animOut   = { left: 0 };
    })(jQuery);
    I still cannot get it to work

  • File to file mapping without xml

    Hello,
    is there a possible way to use a PI7.1 file to file mapping (one static-positioned field must be mapped) without storing the file in xml format ?
    We are having a flatfile and have to send this flatfile through our jms receiver adapter(as flatfile structure) but there is one important field which has to be mapped/changed(static value for all files).
    Our SAP Applikation (File sender) would avoid to change this during or after creating the flatfiles in the R/3 System.
    Thanks,
    Gordon

    Hi Gordon,
    >- Do you have an example for that abap mapping ?
    DATA g_str TYPE string.
      CALL FUNCTION 'ECATT_CONV_XSTRING_TO_STRING'
        EXPORTING
          im_xstring  = source
          im_encoding = 'UTF-8'
        IMPORTING
          ex_string   = g_str.
      REPLACE 'ABC' WITH 'XYZ' INTO g_str.
      CALL FUNCTION 'ECATT_CONV_STRING_TO_XSTRING'
        EXPORTING
          im_string   = g_str
          im_encoding = 'UTF-8'
        IMPORTING
          ex_xstring  = result.
    >I think i have to use some entry parameters for my interface right ?
    ?? no..
    >- Is it possible to use that within the integrated configuration ?
    ??  yes..
    Regards,
    Udo

Maybe you are looking for