Sliding Panels Problem: Content panels with different width?

I'm trying to create the exact same behaviour as this Argentinian Photographer have done:
http://germansaezphoto.com/music/radiohead/
I've read and used the files in your tutorial: http://www.adobe.com/devnet/dreamweaver/articles/sliding_panel.html
and searched the forum but couldn't find an answer.
I'm almost there. The problem is that I have 6 test photos that are of the same height (and the same height as the slidingpanel view port) but different in width. If I set the class .SlidingPanelsContent to the same width as the largest picture(i.e. panel) then it creates a white space until the next pic starts. And If I set the width to the same as the smallest picture then it crops the other ones.
Here is the div in the index file:
<div class="SlidingPanels" id="panelwidget">
  <div class="SlidingPanelsContentGroup">
    <div class="SlidingPanelsContent" <img src="images/panel-2.jpg" width="645" height="430" /></div>
    <div class="SlidingPanelsContent" <img src="images/panel-1.jpg" width="594" height="430" /></div>
  <div class="SlidingPanelsContent" <img src="images/panel-3.jpg" width="645" height="430" /></div>
  <div class="SlidingPanelsContent" <img src="images/panel-4.jpg" width="645" height="430" /></div>
  <div class="SlidingPanelsContent" <img src="images/panel-5.jpg" width="645" height="430" /></div>
  <div class="SlidingPanelsContent" <img src="images/panel-6.jpg" width="594" height="430" /></div>
  </div>
  </div><br />
  <a href="#" onclick="sp1.showFirstPanel();">First Panel</a> | <a
    href="#" onclick="sp1.showPreviousPanel();">Previous Panel</a> |
<a href="#" onclick="sp1.showNextPanel();">Next Panel</a> | <a href="#"
    onclick="sp1.showLastPanel();">Last Panel</a>
  <script type="text/javascript">
var sp1 = new Spry.Widget.SlidingPanels("panelwidget");
</script>
And here is the classes in the css:
.SlidingPanels {
     position: relative;
     float: left;
     width: 1000px;
     height: 430px;
     padding: 0px;
     border: none;
.SlidingPanelsContentGroup {
     position: relative;
     float: left;
     width: 10000px;
     margin: 0px;
     padding: 0px;
     min-height:0;
     border: none;
.SlidingPanelsContent {
     width: 645px;
     height: 430px;
     float: left;
     overflow: hidden;
     margin: 0px;
     padding: 0px;
     border: none;
In the css file before the .SlidingPanelsContent class Adobe states that they in their default implementation has set the width to the same as the view port to ensure that only one panel at a time can be viewed within the view port. But I want the opposite.
How do I solve this?

It seems to me that if you have all different width images, you will want to remove the width from the content pane. That should allow the images to butt up next to each other without either extra white space (for smaller images) or cropping (of larger images). Saenz's photos are in divs with a class of .panelfoto that has the definition of float: left; width: auto;
I have not played around a lot with sliding panels, but it seems reasonable to me that that would work.
You have probably already read and digested this page: http://labs.adobe.com/technologies/spry/articles/sliding_panels/index.html
You know, if you really want something very close to what the example site looks like, look into his code and imitate it.
It does not appear that every move of the pane goes the same distance, and I'm not sure what controls that, but I see some of his images moving part-way, exposing part of the next, and so forth, instead of a complete image change each time. Using different width photos will do that partly, of course.
Beth

Similar Messages

  • Ability to process several raw files with the same content but with different exposure into the single picture

    Can you add to the Lightroom an ability to process several raw files with the same content but with different exposure into the single picture?
    Base raw files can be given with exposure bracketing during shooting, for example.
    The goal - to get maximum details in darks and lights (if we use the "ligths recovery" or "fill lights" we lose the quality because raw file just have no all required information).
    The similar (but not the same, only the idea) thing - is High Dynamic Range Photography in Adobe Photoshop
    Thank you

    The plugin LR/Enfuse does this already. And of course Photomatix have a plugin available for Lightroom. This essentially amounts to pixel editing, which is beyond the range of Lightroom's metadata editing.

  • To create multiple files with same content but with different names

    Hi SapAll.
    here i have got a tricky situation on Idoc to File Scenario.
    in my interface of an Idoc to file ,there  is requirement to create multiple files with different file names but with same content based on one Idoc Segment.
    which means there will be one Zsegment with two fields in the idoc,where one field with (content refers to the name which file name should start with .so lets say if this segment is repeated for 3 times then PI should create 3 files in the same directory with same content but with different file names (from the filed).
    so here for now iam using one reciever file communication channel.
    can any body give me the quick answer.
    regards.
    Varma

    What do you mean by different names?
    when i make proper setting in the Receiver Channel....on how to create the filename (what to append) like add Timestamp, counter, date, messageid.....even in this case you will ahve file with different names and that too from same File channel.
    You can perform multi-mapping in XI/ PI and then your File channel will place the files in the target folder with relevant names. You cannot use Dynamic Configuration with Multi-Mapping!
    If you intend to use different File channels, then do the configuration as required (normal)...even over here you can follow multi-mapping.
    Do not use a BPM!
    Regards,
    Abhishek.

  • Tables with different-width columns

    Whist creating a table with multiple rows and columns, I need some of the columns to be different widths on each row. I can do this easily in Word by simply selecting the cell and command-drag the vertical line at the left or right hand side.
    When I do this in InDesign, the whole damn column moves. I do not want this.
    Also - as in Word - I need to be able to calculate sums.
    Why is none of this possible with such a powerful application like InDesign CC 2014? Seems like Microsoft Word kicks InDesign CC 2014's *** on this.

    I do not want InDesign to work like Word, oh no. I just designed a 200 page book in InDesign - it was a breeze. I shudder at the thought of having to do that in Word. The table functions of the application are limited. Here's the thing, I want to be able to layout a specialised table/form with my specialised design tool and be able to specify the sizes of columns, cells and rows as I choose, and change on the fly if necessary. My screwdriver drives screws in - and back out again as I choose. I can slide an individual column divider one way but not the other. It's a bit like having an all singing-all dancing  Swiss Army knife that doesn't have the corkscrew, and your out on a picnic with a nice bottle of red in your basket.
    A guy from Adobe remote-shared my screen, telling me what I wanted to achieve was possible. I showed him using Word how easy it was. He tried and failed in InDesign and conceded that it was in fact not possible. He gave me a link to Adobe for a feature request!

  • Problem saving files with different name with DFS installed

    I have a server that I have DFS installed and running on. This appears to work fine. There is one problem that I have encountered though:
    On a share I have a folder that is not inheriting rights from it parent object. This works fine with DFS. When I create a new word document and try to save it in this folder with a different name other than the default (doc1.doc) I get an error saying that the user doesn't have permission, but I can save it as the default name of doc1.doc. I can then re-name the file to what I want from windows explorer, open it up in word, work on it and save it again. Even with the new file name I can't do a save-as and save it as a different file.
    All the other folders under the share that inherit rights from the parent folder work.
    eg save-as in \\server\share\folder or below works
    save-as it in \\server\share\no_inheritance or below does not work
    Anyone have any ideas?

    Originally Posted by ndean
    I have a server that I have DFS installed and running on. This appears to work fine. There is one problem that I have encountered though:
    On a share I have a folder that is not inheriting rights from it parent object. This works fine with DFS. When I create a new word document and try to save it in this folder with a different name other than the default (doc1.doc) I get an error saying that the user doesn't have permission, but I can save it as the default name of doc1.doc. I can then re-name the file to what I want from windows explorer, open it up in word, work on it and save it again. Even with the new file name I can't do a save-as and save it as a different file.
    All the other folders under the share that inherit rights from the parent folder work.
    eg save-as in \\server\share\folder or below works
    save-as it in \\server\share\no_inheritance or below does not work
    Anyone have any ideas?
    I have the same problem... how did you solve it?
    Thanks!
    Andres, Blogger

  • NetGroup problems connecting devices with different internet connection

    Create a chat using technology Cirrus (p2p) and class NetGroup.
    If the device is a mobile phone, and has network via 3G or 4G, then connect to the same group with other devices is not happening.
    For example, there are a PC and the mobile device:
    1 If both are connected to one Wi-Fi:
    onNetConnectionNetStatus: NetConnection.Connect.Success
    onNetConnectionNetStatus: NetGroup.Connect.Success
    onNetGroupNetStatus: NetGroup.Neighbor.Connect
    A connection is made.
    2 If both are connected to different Wi-Fi:
    onNetConnectionNetStatus: NetConnection.Connect.Success
    onNetConnectionNetStatus: NetGroup.Connect.Success
    onNetGroupNetStatus: NetGroup.Neighbor.Connect
    A connection is made.
    3.If one device is connected to Wi-Fi, and the other to a 3G or G4
    onNetConnectionNetStatus: NetConnection.Connect.Success
    onNetConnectionNetStatus: NetGroup.Connect.Success
    No connection.
    Sample code that was tested:
    package {
    import flash.display.Sprite;
    import flash.events.NetStatusEvent;
    import flash.net.GroupSpecifier;
    import flash.net.NetConnection;
    import flash.net.NetGroup;
    import flash.text.TextField;
    public class NetGroupSample extends Sprite {
       private static const CIRRUS_URL:String = "rtmfp://p2p.rtmfp.net";
       private static const CIRRUS_DEVELOPER_KEY:String = "************************";
       private var _netConnection:NetConnection;
       private var _netGroup:NetGroup;
       private var _outputTextField:TextField;
       public function NetGroupSample() {
      _outputTextField = new TextField();
      _outputTextField.width = this.stage.stageWidth;
      _outputTextField.height = this.stage.stageHeight;
       this.addChild(_outputTextField);
      _netConnection = new NetConnection();
      _netConnection.addEventListener(NetStatusEvent.NET_STATUS, this.onNetConnectionNetStatus);
      _netConnection.connect(CIRRUS_URL, CIRRUS_DEVELOPER_KEY);
       private function onNetConnectionNetStatus(event:NetStatusEvent):void {
       this.traceToOutput("onNetConnectionNetStatus:", event.info.code);
       switch (event.info.code) {
       case "NetConnection.Connect.Success":
       var gspec:GroupSpecifier = new GroupSpecifier("Group1");
      gspec.multicastEnabled = true;
      gspec.postingEnabled = true;
      gspec.serverChannelEnabled = true;
      gspec.objectReplicationEnabled = true;
      gspec.routingEnabled = true;
      _netGroup = new NetGroup(_netConnection, gspec.groupspecWithAuthorizations());
      _netGroup.addEventListener(NetStatusEvent.NET_STATUS, this.onNetGroupNetStatus);
      break;
       private function onNetGroupNetStatus(event:NetStatusEvent):void {
       this.traceToOutput("onNetGroupNetStatus:", event.info.code);
       private function traceToOutput(...strings):void {
      _outputTextField.appendText(strings.join(" ") + "\n");
    Tested on Adobe AIR SDK 3.2, 3.4, 13.0.0.111

    the results you're showing indicate a symmetric NAT (that is, a NAT that uses a different translation for each unique destination).  there is no way for a peer behind a symmetric NAT to coordinate and find another peer that's behind a different symmetric NAT or behind a port-restricted cone NAT.
    this posting by Matthew Kaufman explains the situation with NATs in more detail:
      https://forums.adobe.com/message/1064983#1064983
    as far as "fixing" it: the issue isn't the protocol -- a symmetric NAT is inherently defective.  the only fix is to not use a symmetric NAT in your network.  unfortunately this is often outside your control (such as with your mobile provider).

  • Problem in deserialization with different versions of JDK

    I have problem related to serialization, pls suggest the most appropriate solution, the problem is that I have a class AAAA.java which extends AbstractListModel.java class of JDK, and it is serializable. When i saw the serialVersionUID of AbstractListModel.java using the java tool serialver in jdk 1.3.1 from the command line it gives 2622425607724314306 (Unique ID of class) but when i saw it in JDK 1.4.1 then it given -3285184064379168730. As the UID is changed from JDK1.3.1 to 1.4.1, Now the problem is that i serialized a file which uses AAAA.java using the 1.3.1 and now i want to open that file in my project using 1.4.1 it gives exception.
    java.io.InvalidClassException: javax.swing.AbstractListModel; local class incompatible: stream classdesc serialVersionUID = 2622425607724314306, local class serialVersionUID = -3285184064379168730
    at java.io.ObjectStreamClass.initNonProxy(ObjectStreamClass.java:459)
    at java.io.ObjectInputStream.readNonProxyDesc(ObjectInputStream.java:1521)
    Can u suggest me appropriate solution as this file must be desirialized (Compatibility issue) as it is generated from project.
    U may also try using this command in jdk 1.3.1 & 1.4.1
    on command prompt
    serialver javax.swing.AbstractListModel.

    From the API (you already know this, though through experience...)
    Warning: Serialized objects of this class will not be compatible with future Swing releases. The current serialization support is appropriate for short term storage or RMI between applications running the same version of Swing. A future release of Swing will provide support for long term persistence.
    So there seems to be no easy solution (in 1.4 you would use XMLEncoder for persistence with future versions, no possible in 1.3.1). You will probably have to study the serialized code and figure out how to deserialize manually... like find what the header size and format is, how objects' classes and values are labeled etc, then rebuild the object on the receiving end using a datainput stream or something...

  • How to bind a WrapPanel's items with different width to respective Grid's ColumnWidth??

    I have a Grid which has two columns. Inside the grid there will be WrapPanel which starts from column 0 and has columnspan of 1. This WrapPanel has two children. I want one children's width to be the width of col0 and other to be the width of col1. I have
    tried something(code below) but it is not working.[Initially I implemented this without wrappanel that is my grid will have two columns,one column takes 60% of the total width and also has minimum width, other column  takes 40% of the total width.So everything
    is fine.But when I resize my window I want the second column to get wrapped to the bottom of the 1st column.So I added wrappanel].
    The following code explains well:
    <Grid Grid.Row="1" Margin="0,20,0,0">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="6*"></ColumnDefinition>
                                    <ColumnDefinition Width="4*"></ColumnDefinition>
                                </Grid.ColumnDefinitions>
                                <WrapPanel Orientation="Horizontal" Grid.Column="0" Grid.ColumnSpan="2"  HorizontalAlignment="Left" VerticalAlignment="Top">
                                    <StackPanel Margin="0" Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type Grid}}, Path=ColumnDefinitions[0].ActualWidth}">
               <Button Margin="0,3,0,0" Style="{DynamicResource StartPage.RSS.TitleTextStyle}" FontSize="13"/>
                                           <Button Margin="0,3,0,0" Style="{DynamicResource StartPage.RSS.TitleTextStyle}"/>
    </StackPanel>
                                    <StackPanel Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type Grid}}, Path=ColumnDefinitions[1].ActualWidth}">
                                        <TextBlock Foreground="{DynamicResource VsBrush.ToolWindowText}"></TextBlock>
                                        <Button Margin="0,5,0,0" Style="{DynamicResource StartPage.RSS.TitleTextStyle}"/>
                                    </StackPanel>
                                </WrapPanel>
     </Grid>

    Why don't you just remove the WrapPanel and set the Grid.Column attached properties of the StackPanels?:
    <Grid Grid.Row="1" Margin="0,20,0,0">
    <Grid.ColumnDefinitions>
    <ColumnDefinition Width="6*"></ColumnDefinition>
    <ColumnDefinition Width="4*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <StackPanel Grid.Column="0" Margin="0" Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type Grid}}, Path=ColumnDefinitions[0].ActualWidth}">
    <Button Margin="0,3,0,0" Style="{DynamicResource StartPage.RSS.TitleTextStyle}" FontSize="13"/>
    <Button Margin="0,3,0,0" Style="{DynamicResource StartPage.RSS.TitleTextStyle}"/>
    </StackPanel>
    <StackPanel Grid.Column="1" Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type Grid}}, Path=ColumnDefinitions[1].ActualWidth}">
    <TextBlock Foreground="{DynamicResource VsBrush.ToolWindowText}"></TextBlock>
    <Button Margin="0,5,0,0" Style="{DynamicResource StartPage.RSS.TitleTextStyle}"/>
    </StackPanel>
    </Grid>
    I am afraid that it makes no sense to define two ColumnDefinitions if you just put a single element with the Grid.ColumnSpan property set to 2 in the Grid. This effetively makes the WrapPanel span the two columns and then there is only a single column...You
    might as well put the Grid inside the WrapPanel then:
    <WrapPanel Orientation="Horizontal" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Left" VerticalAlignment="Top">
    <Grid Grid.Row="1" Margin="0,20,0,0">
    <Grid.ColumnDefinitions>
    <ColumnDefinition Width="6*"></ColumnDefinition>
    <ColumnDefinition Width="4*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <StackPanel Grid.Column="0" Margin="0" Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type Grid}}, Path=ColumnDefinitions[0].ActualWidth}">
    <Button Margin="0,3,0,0" Style="{DynamicResource StartPage.RSS.TitleTextStyle}" FontSize="13"/>
    <Button Margin="0,3,0,0" Style="{DynamicResource StartPage.RSS.TitleTextStyle}"/>
    </StackPanel>
    <StackPanel Grid.Column="1" Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type Grid}}, Path=ColumnDefinitions[1].ActualWidth}">
    <TextBlock Foreground="{DynamicResource VsBrush.ToolWindowText}"></TextBlock>
    <Button Margin="0,5,0,0" Style="{DynamicResource StartPage.RSS.TitleTextStyle}"/>
    </StackPanel>
    </Grid>
    </WrapPanel>
    There is also a SharedSizeGroup property that you can set if you are adding several Grids to the WrapPanel and want the columns of all Grids to have a common width:
    https://msdn.microsoft.com/en-us/library/system.windows.controls.definitionbase.sharedsizegroup(v=vs.110).aspx
    <WrapPanel Orientation="Horizontal" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Left" VerticalAlignment="Top">
    <Grid Grid.Row="1" Margin="0,20,0,0">
    <Grid.ColumnDefinitions>
    <ColumnDefinition Width="6*" SharedSizeGroup="a"></ColumnDefinition>
    <ColumnDefinition Width="4*" SharedSizeGroup="b"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    </Grid>
    <Grid Grid.Row="1" Margin="0,20,0,0">
    <Grid.ColumnDefinitions>
    <ColumnDefinition Width="6*" SharedSizeGroup="a"></ColumnDefinition>
    <ColumnDefinition Width="4*" SharedSizeGroup="b"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    </Grid>
    </WrapPanel>
    Please remember to close your threads by marking helpful posts as answer.

  • Spry Collapsible Panel problem when previewing in web browser

    Hello.
    I have inserted a spry collapsible panel into my website, made ZERO adjustments to any of the scripting or even css styling, and previewed the panel in my Safari browser. It does not seem to be working correctly. I've attached a couple of images showing what the panel looks like in the browser. My site is not published yet, so I cannot give out the url.
    Is something wrong with the js file? I tried the panel earlier on a different site on the same computer and it was working fine.
    the "Tab" menu text does not fit inside the grey box. Everything collapses fine, however, the gray box is too thin for the text. I've tried adjusting it in the CSS sheet, but it doesn't seem to change anything.
    This is the panel in the collapsed state. It looks bad. I know it's not supposed to work like this.
    When I preview the site in "live view" everything works fine...
    // SpryCollapsiblePanel.js - version 0.8 - Spry Pre-Release 1.6.1
    // Copyright (c) 2006. Adobe Systems Incorporated.
    // All rights reserved.
    // Redistribution and use in source and binary forms, with or without
    // modification, are permitted provided that the following conditions are met:
    //   * Redistributions of source code must retain the above copyright notice,
    //     this list of conditions and the following disclaimer.
    //   * Redistributions in binary form must reproduce the above copyright notice,
    //     this list of conditions and the following disclaimer in the documentation
    //     and/or other materials provided with the distribution.
    //   * Neither the name of Adobe Systems Incorporated nor the names of its
    //     contributors may be used to endorse or promote products derived from this
    //     software without specific prior written permission.
    // THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
    // AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
    // IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
    // ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
    // LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
    // CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
    // SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
    // INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
    // CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
    // ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
    // POSSIBILITY OF SUCH DAMAGE.
    (function() { // BeginSpryComponent
    if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
    Spry.Widget.CollapsiblePanel = function(element, opts)
    this.element = this.getElement(element);
    this.focusElement = null;
    this.hoverClass = "CollapsiblePanelTabHover";
    this.openClass = "CollapsiblePanelOpen";
    this.closedClass = "CollapsiblePanelClosed";
    this.focusedClass = "CollapsiblePanelFocused";
    this.enableAnimation = true;
    this.enableKeyboardNavigation = true;
    this.animator = null;
    this.hasFocus = false;
    this.contentIsOpen = false;
    this.openPanelKeyCode = Spry.Widget.CollapsiblePanel.KEY_DOWN;
    this.closePanelKeyCode = Spry.Widget.CollapsiblePanel.KEY_UP;
    Spry.Widget.CollapsiblePanel.setOptions(this, opts);
    this.attachBehaviors();
    Spry.Widget.CollapsiblePanel.prototype.getElement = function(ele)
    if (ele && typeof ele == "string")
    return document.getElementById(ele);
    return ele;
    Spry.Widget.CollapsiblePanel.prototype.addClassName = function(ele, className)
    if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
    return;
    ele.className += (ele.className ? " " : "") + className;
    Spry.Widget.CollapsiblePanel.prototype.removeClassName = function(ele, className)
    if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
    return;
    ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
    Spry.Widget.CollapsiblePanel.prototype.hasClassName = function(ele, className)
    if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
    return false;
    return true;
    Spry.Widget.CollapsiblePanel.prototype.setDisplay = function(ele, display)
    if( ele )
    ele.style.display = display;
    Spry.Widget.CollapsiblePanel.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
    if (!optionsObj)
    return;
    for (var optionName in optionsObj)
    if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
    continue;
    obj[optionName] = optionsObj[optionName];
    Spry.Widget.CollapsiblePanel.prototype.onTabMouseOver = function(e)
    this.addClassName(this.getTab(), this.hoverClass);
    return false;
    Spry.Widget.CollapsiblePanel.prototype.onTabMouseOut = function(e)
    this.removeClassName(this.getTab(), this.hoverClass);
    return false;
    Spry.Widget.CollapsiblePanel.prototype.open = function()
    this.contentIsOpen = true;
    if (this.enableAnimation)
    if (this.animator)
    this.animator.stop();
    this.animator = new Spry.Widget.CollapsiblePanel.PanelAnimator(this, true, { duration: this.duration, fps: this.fps, transition: this.transition });
    this.animator.start();
    else
    this.setDisplay(this.getContent(), "block");
    this.removeClassName(this.element, this.closedClass);
    this.addClassName(this.element, this.openClass);
    Spry.Widget.CollapsiblePanel.prototype.close = function()
    this.contentIsOpen = false;
    if (this.enableAnimation)
    if (this.animator)
    this.animator.stop();
    this.animator = new Spry.Widget.CollapsiblePanel.PanelAnimator(this, false, { duration: this.duration, fps: this.fps, transition: this.transition });
    this.animator.start();
    else
    this.setDisplay(this.getContent(), "none");
    this.removeClassName(this.element, this.openClass);
    this.addClassName(this.element, this.closedClass);
    Spry.Widget.CollapsiblePanel.prototype.onTabClick = function(e)
    if (this.isOpen())
    this.close();
    else
    this.open();
    this.focus();
    return this.stopPropagation(e);
    Spry.Widget.CollapsiblePanel.prototype.onFocus = function(e)
    this.hasFocus = true;
    this.addClassName(this.element, this.focusedClass);
    return false;
    Spry.Widget.CollapsiblePanel.prototype.onBlur = function(e)
    this.hasFocus = false;
    this.removeClassName(this.element, this.focusedClass);
    return false;
    Spry.Widget.CollapsiblePanel.KEY_UP = 38;
    Spry.Widget.CollapsiblePanel.KEY_DOWN = 40;
    Spry.Widget.CollapsiblePanel.prototype.onKeyDown = function(e)
    var key = e.keyCode;
    if (!this.hasFocus || (key != this.openPanelKeyCode && key != this.closePanelKeyCode))
    return true;
    if (this.isOpen() && key == this.closePanelKeyCode)
    this.close();
    else if ( key == this.openPanelKeyCode)
    this.open();
    return this.stopPropagation(e);
    Spry.Widget.CollapsiblePanel.prototype.stopPropagation = function(e)
    if (e.preventDefault) e.preventDefault();
    else e.returnValue = false;
    if (e.stopPropagation) e.stopPropagation();
    else e.cancelBubble = true;
    return false;
    Spry.Widget.CollapsiblePanel.prototype.attachPanelHandlers = function()
    var tab = this.getTab();
    if (!tab)
    return;
    var self = this;
    Spry.Widget.CollapsiblePanel.addEventListener(tab, "click", function(e) { return self.onTabClick(e); }, false);
    Spry.Widget.CollapsiblePanel.addEventListener(tab, "mouseover", function(e) { return self.onTabMouseOver(e); }, false);
    Spry.Widget.CollapsiblePanel.addEventListener(tab, "mouseout", function(e) { return self.onTabMouseOut(e); }, false);
    if (this.enableKeyboardNavigation)
    // XXX: IE doesn't allow the setting of tabindex dynamically. This means we can't
    // rely on adding the tabindex attribute if it is missing to enable keyboard navigation
    // by default.
    // Find the first element within the tab container that has a tabindex or the first
    // anchor tag.
    var tabIndexEle = null;
    var tabAnchorEle = null;
    this.preorderTraversal(tab, function(node) {
    if (node.nodeType == 1 /* NODE.ELEMENT_NODE */)
    var tabIndexAttr = tab.attributes.getNamedItem("tabindex");
    if (tabIndexAttr)
    tabIndexEle = node;
    return true;
    if (!tabAnchorEle && node.nodeName.toLowerCase() == "a")
    tabAnchorEle = node;
    return false;
    if (tabIndexEle)
    this.focusElement = tabIndexEle;
    else if (tabAnchorEle)
    this.focusElement = tabAnchorEle;
    if (this.focusElement)
    Spry.Widget.CollapsiblePanel.addEventListener(this.focusElement, "focus", function(e) { return self.onFocus(e); }, false);
    Spry.Widget.CollapsiblePanel.addEventListener(this.focusElement, "blur", function(e) { return self.onBlur(e); }, false);
    Spry.Widget.CollapsiblePanel.addEventListener(this.focusElement, "keydown", function(e) { return self.onKeyDown(e); }, false);
    Spry.Widget.CollapsiblePanel.addEventListener = function(element, eventType, handler, capture)
    try
    if (element.addEventListener)
    element.addEventListener(eventType, handler, capture);
    else if (element.attachEvent)
    element.attachEvent("on" + eventType, handler);
    catch (e) {}
    Spry.Widget.CollapsiblePanel.prototype.preorderTraversal = function(root, func)
    var stopTraversal = false;
    if (root)
    stopTraversal = func(root);
    if (root.hasChildNodes())
    var child = root.firstChild;
    while (!stopTraversal && child)
    stopTraversal = this.preorderTraversal(child, func);
    try { child = child.nextSibling; } catch (e) { child = null; }
    return stopTraversal;
    Spry.Widget.CollapsiblePanel.prototype.attachBehaviors = function()
    var panel = this.element;
    var tab = this.getTab();
    var content = this.getContent();
    if (this.contentIsOpen || this.hasClassName(panel, this.openClass))
    this.addClassName(panel, this.openClass);
    this.removeClassName(panel, this.closedClass);
    this.setDisplay(content, "block");
    this.contentIsOpen = true;
    else
    this.removeClassName(panel, this.openClass);
    this.addClassName(panel, this.closedClass);
    this.setDisplay(content, "none");
    this.contentIsOpen = false;
    this.attachPanelHandlers();
    Spry.Widget.CollapsiblePanel.prototype.getTab = function()
    return this.getElementChildren(this.element)[0];
    Spry.Widget.CollapsiblePanel.prototype.getContent = function()
    return this.getElementChildren(this.element)[1];
    Spry.Widget.CollapsiblePanel.prototype.isOpen = function()
    return this.contentIsOpen;
    Spry.Widget.CollapsiblePanel.prototype.getElementChildren = function(element)
    var children = [];
    var child = element.firstChild;
    while (child)
    if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
    children.push(child);
    child = child.nextSibling;
    return children;
    Spry.Widget.CollapsiblePanel.prototype.focus = function()
    if (this.focusElement && this.focusElement.focus)
    this.focusElement.focus();
    Spry.Widget.CollapsiblePanel.PanelAnimator = function(panel, doOpen, opts)
    this.timer = null;
    this.interval = 0;
    this.fps = 60;
    this.duration = 500;
    this.startTime = 0;
    this.transition = Spry.Widget.CollapsiblePanel.PanelAnimator.defaultTransition;
    this.onComplete = null;
    this.panel = panel;
    this.content = panel.getContent();
    this.doOpen = doOpen;
    Spry.Widget.CollapsiblePanel.setOptions(this, opts, true);
    this.interval = Math.floor(1000 / this.fps);
    var c = this.content;
    var curHeight = c.offsetHeight ? c.offsetHeight : 0;
    this.fromHeight = (doOpen && c.style.display == "none") ? 0 : curHeight;
    if (!doOpen)
    this.toHeight = 0;
    else
    if (c.style.display == "none")
    // The content area is not displayed so in order to calculate the extent
    // of the content inside it, we have to set its display to block.
    c.style.visibility = "hidden";
    c.style.display = "block";
    // Clear the height property so we can calculate
    // the full height of the content we are going to show.
    c.style.height = "";
    this.toHeight = c.offsetHeight;
    this.distance = this.toHeight - this.fromHeight;
    this.overflow = c.style.overflow;
    c.style.height = this.fromHeight + "px";
    c.style.visibility = "visible";
    c.style.overflow = "hidden";
    c.style.display = "block";
    Spry.Widget.CollapsiblePanel.PanelAnimator.defaultTransition = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };
    Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.start = function()
    var self = this;
    this.startTime = (new Date).getTime();
    this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
    Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.stop = function()
    if (this.timer)
    clearTimeout(this.timer);
    // If we're killing the timer, restore the overflow property.
    this.content.style.overflow = this.overflow;
    this.timer = null;
    Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.stepAnimation = function()
    var curTime = (new Date).getTime();
    var elapsedTime = curTime - this.startTime;
    if (elapsedTime >= this.duration)
    if (!this.doOpen)
    this.content.style.display = "none";
    this.content.style.overflow = this.overflow;
    this.content.style.height = this.toHeight + "px";
    if (this.onComplete)
    this.onComplete();
    return;
    var ht = this.transition(elapsedTime, this.fromHeight, this.distance, this.duration);
    this.content.style.height = ((ht < 0) ? 0 : ht) + "px";
    var self = this;
    this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
    Spry.Widget.CollapsiblePanelGroup = function(element, opts)
    this.element = this.getElement(element);
    this.opts = opts;
    this.attachBehaviors();
    Spry.Widget.CollapsiblePanelGroup.prototype.setOptions = Spry.Widget.CollapsiblePanel.prototype.setOptions;
    Spry.Widget.CollapsiblePanelGroup.prototype.getElement = Spry.Widget.CollapsiblePanel.prototype.getElement;
    Spry.Widget.CollapsiblePanelGroup.prototype.getElementChildren = Spry.Widget.CollapsiblePanel.prototype.getElementChildren;
    Spry.Widget.CollapsiblePanelGroup.prototype.setElementWidget = function(element, widget)
    if (!element || !widget)
    return;
    if (!element.spry)
    element.spry = new Object;
    element.spry.collapsiblePanel = widget;
    Spry.Widget.CollapsiblePanelGroup.prototype.getElementWidget = function(element)
    return (element && element.spry && element.spry.collapsiblePanel) ? element.spry.collapsiblePanel : null;
    Spry.Widget.CollapsiblePanelGroup.prototype.getPanels = function()
    if (!this.element)
    return [];
    return this.getElementChildren(this.element);
    Spry.Widget.CollapsiblePanelGroup.prototype.getPanel = function(panelIndex)
    return this.getPanels()[panelIndex];
    Spry.Widget.CollapsiblePanelGroup.prototype.attachBehaviors = function()
    if (!this.element)
    return;
    var cpanels = this.getPanels();
    var numCPanels = cpanels.length;
    for (var i = 0; i < numCPanels; i++)
    var cpanel = cpanels[i];
    this.setElementWidget(cpanel, new Spry.Widget.CollapsiblePanel(cpanel, this.opts));
    Spry.Widget.CollapsiblePanelGroup.prototype.openPanel = function(panelIndex)
    var w = this.getElementWidget(this.getPanel(panelIndex));
    if (w && !w.isOpen())
    w.open();
    Spry.Widget.CollapsiblePanelGroup.prototype.closePanel = function(panelIndex)
    var w = this.getElementWidget(this.getPanel(panelIndex));
    if (w && w.isOpen())
    w.close();
    Spry.Widget.CollapsiblePanelGroup.prototype.openAllPanels = function()
    var cpanels = this.getPanels();
    var numCPanels = cpanels.length;
    for (var i = 0; i < numCPanels; i++)
    var w = this.getElementWidget(cpanels[i]);
    if (w && !w.isOpen())
    w.open();
    Spry.Widget.CollapsiblePanelGroup.prototype.closeAllPanels = function()
    var cpanels = this.getPanels();
    var numCPanels = cpanels.length;
    for (var i = 0; i < numCPanels; i++)
    var w = this.getElementWidget(cpanels[i]);
    if (w && w.isOpen())
    w.close();
    })(); // EndSpryComponent

    I have inserted a spry collapsible panel into my website, made ZERO
    adjustments to any of the scripting or even css styling
    That is good, that means that I have a local copy of the scripting and css files eliminating the need to attach the code to a post.
    Is something wrong with the js file? I tried the panel earlier on a
    different site on the same computer and it was working fine
    The fact that it works on a different site means that something is correct. My assumption is that the scripting and css files are doing their job correctly and to answer your question regarding the js file, no.
    Having eliminated the Spry original JavaScript and CSS files as being the culprits, there must be a problem with the rest of the site, incorrect HTML, other interfering JavaScript or CSS.
    I can keep guessing, but only those persons that are privy to your code can give you any positive input. Please find a way to upload your files so that we can see the code in context.
    To this end, screen captures do not assist in solving the problem, they only add to others' amusement at seeing the problem.
    Ben
    PS I forgot to say, welcome to our community and yes I am a cynical old codger, sorry.

  • How to generate a pulse train with different pulse width and delay?

    How to generate a triggered pulse train with different pulse width. for example, after each trigger signal, let's say 2 ms, then the counter output a pulse with pulsewidth of 1 ms, and then after 3 ms delay after the first pulse, the second pulse was generated with a pulse width of 4 ms.  Next cycle when the trigger signal comes, the same two pulses will be generated and so on. Is it possible to achieve this by using 6601 counter card? and if yes, how to achieve this? Thanks!

    Unfortunately you can not create a hardware timed pulse train with different widths on each pulse from a counter. Whilst it can be changed on the fly using software, since you require a hardware triggered signal getting the software involved will not give a huge amount of accuracy when the pulse will actually change.
    So in short you can't use your 6601 card (or a counter timer) to achieve this
    There are three possible Alternative solutions
    1 You could use a high speed digital IO device such as the (6533/34) to generate your variable signal which would require setting up the pulse train as a series of states based around the burst transmission mode where the clock would give you your specific timing.
    2 A timed analogy output (for example on a MIO card with a clock (PCI-6220 / 62xx), i.e. Not the 6704 style static analogy output cards)
    3 A high speed digital waveform card such as the (, 656x , 655x, 654x, 6534, 6533 (http://www.ni.com/modularinstruments/find_right.ht​m) ) this could then be scripted to work with your triggering and also there is a digital waveform editor which will enable you to set up the pattern you wish to generate (http://sine.ni.com/nips/cds/view/p/lang/en/nid/135​55) 
    Hope that helps
    Tim Matthews
    NI (UK)

  • To create 3 diff files with same content but with diff names in same target

    Hi SapAll.
    i have got a a requirement where pi need to create 3 different files with same content but with different names under same target from a single Idoc.
    its an IDOC to 3 File Inteface.
    can any body help me in providing the differnt solutions for this without use of any script executions.
    will be waiitng for response.
    regards.
    Varma

    > i want to use only one communication channel to produce 3 different file names with same content ,so here i should use only one message mapping in 3 operation mappings .
    This is not possible to produce 3 different file names with single CC. You have to use 3 different CCs. unless you have going to use some other trick e.g some script to rename the file etc..
    As I suggested in my previous reply use Multi-Mapping Or create 3 different Interface Mappings (by using the same MM).
    Note: You have to create 3 different Inbound Message Interfaces (you can use the same Inbound Message Type) otherwise while creating the 3 Interface Determination it won't allow because of same Outbound & Inbound Message Interface. It will simply say Interface alreday exists..
    So, just use the Multi-Mapping which is best solution in my opinion, because the benefit of using multi-mapping are:
    1. You have to create only single Message Mapping
    2. Single Interface Mapping
    3. Single Receiver Determination
    4. Single Interface Determination
    5. 3 Receiver CCs (3 you have to use in any case)
    6. Performance wise it is good (read the blog's last 2 para)
    7. And last but not the least easy to maintain the scenario.

  • Horizontal Sliding Panels with 100% width

    Hi,
    Im trying to use horizontal sliding panels with a width of 100% for an expandable website. So far i got it working with the vertical sliding panles where if i increase the width of the site the sliding panels width increases as well, but how do i get them to float left and slide horizontally, if i change the slidingpanelscontentgroup width it messe up. so far here is the css:
    .SlidingPanelsP {
    width: 100%;
    position: relative;
    height: 300px;
    padding: 0px;
    border: none;
    .SlidingPanelsContentGroupP {
    width: 100%;
    position: relative;
    margin: 0px;
    padding: 0px;
    min-height:0;
    border: none;
    .SlidingPanelsContentP {
    float: left;
    width: 100%;
    height: 300px;
    overflow: hidden;
    margin: 0px;
    padding: 0px;
    border: none;
    .SlidingPanelsAnimatingP * {
    overflow: hidden !important;
    .SlidingPanelsCurrentPanelP {
    Thanks in advance

    Had a hard time find the solution, but this seem to work in major browsers, except Opera which does not like the 33.33% width apparently and shows a bit of next panel. You may be able to play with margin or padding to correct this behavior.
    You have to know the number of panels and make the calculation of the SlidingPanelsContent class width accordingly. Here's my test page and code for you:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Document sans nom</title>
    <script language="javascript" type="text/javascript" src="SpryAssets/SprySlidingPanels.js"></script>
    <link href="SpryAssets/SprySlidingPanels.css" rel="stylesheet" type="text/css" />
    <style>
    #slidingPanel_1 {
        height: 200px;
    .SlidingPanelsContentGroup {
        width: 300%;
    .SlidingPanelsContent {
        height: 200px;
        float: left;
        width: 33.33%;
    #content1 { background: yellow; }
    #content2 { background: red; }
    #content3 { background: green; }
    </style>
    </head>
    <body>
    <a href="#" onClick="sp1.showPanel(0);">Panel 1</a>
    <a href="#" onClick="sp1.showPanel(1);">Panel 2</a>
    <a href="#" onClick="sp1.showPanel(2);">Panel 3</a>
    <div id="slidingPanel_1" class="SlidingPanels">
         <div class="SlidingPanelsContentGroup">
            <div id="content1" class="SlidingPanelsContent">The Content 1</div>
            <div id="content2" class="SlidingPanelsContent">The Content 2</div>
            <div id="content3" class="SlidingPanelsContent">The Content 3</div>
         </div>
      </div>
    <script language="javascript" type="text/javascript">
       var sp1 = new Spry.Widget.SlidingPanels("slidingPanel_1");
    </script>
    </body>
    </html>

  • Bridge CC - Content Panel looks different than Preview

    Problem - Images in the Content panel look dull and desaturated. The view of the same image in the Preview Panel, as well as Photoshop CC, looks fine (ie, like I expect from working with these images in CS6). This applies to NEF, JPEG and PSD files. In the attached screenshot, note the distinct lack of red in the skin tones in the Content Panel compared to Preview. Blues look a little dull as well. This is a PSD file. This image is tagged sRGB, verified in the Metadata panel as well as in Photoshop CC.
    I have read similar threads here (where all of Bridge was dull and desaturated), but I don't see anything that mentions the two panels in Bridge displaying images differently.
    Background - 10 years as a pro photographer, and I know what I'm doing around a Mac and color management. I finally "upgraded" from CS6 to CC when I got my new Mac.
    System -
    Retina iMac w/Yosemite. Second monitor - HP LP2475w (Bridge sits on the HP monitor)
    Both monitors have profiles generated with an i1 Display and the i1 Profiler application.
    Both monitors are using their correct profiles
    Steps Already taken (condensed)
    1. Purge cache (multiple times throughout the process).
    2. Check color cache and cache permissions.
    3. Reinstall Bridge at the behest of Adobe support, even though this was a new install.
    4. Check that "Always high quality" thumbnails is checked in Bridge (this seems to have no effect either way).
    5. Check color settings - NA GP2 in Bridge. Interestingly, the same behavior is exhibited no matter what I select here.
    6. Drag Bridge to the iMac display - everything now looks good. Drag back - now BOTH Content and Preview are desaturated. Will stay like this until Bridge is restarted.
    7. Recalibrate the HP (Bridge) monitor. No change in behavior.
    8. Verify no sidecar xmp for this image, to rule out ACR in the problem.
    9. Open Output module to verify that the content panel looks the same way there (it does).
    10. Investigate ~user/Library/Caches/Adobe/Bridge CC/Cache/ folders. Wow, the preview for this particular image in /1024/xxxx LOOKS CORRECT (like it does in the Preview panel). So Bridge IS generating high quality previews correctly.
    Thoughts -
    1. This seems unlikely to be a monitor profile issue. Bridge itself is displaying the same PSD two different ways. A bad profile would make everything on that monitor look wrong, wouldn't it?
    2. Some of my images sit on an external drive, but the screenshot here is from the internal mac drive, to try and rule that out.
    3. It's not some strange issue with the HP monitor not displaying color evenly across it's surface - if it were, than the screenshot would not show the difference between the panels. I also moved the Bridge window around the display to further verify that color is the same across the whole panel.
    4. Maybe Bridge ignores the profile for the content panel - but in the case of no profile, it assumes sRGB (or does it?) which is exactly what this image is. I have tried this with Adobe RGB images and the same behavior is exhibited.
    5. Previews are being generated correctly, but do not seem to be what is read off disc to display in the Content Panel.
    Any thoughts would be appreciated. My gut feeling is that for some reason, Bridge is not showing me the saved high quality preview in the Content panel. But why?

    Is your file tagged?  I.e. does it have the proper color profile embedded?
    Is your monitor accurately calibrated and profiled?
    What are your preferences in Bridge re previews and profiles?

  • Spry tabbed panels, opening a tabbed panel,  problem with IE

    i've have made a site, with tabbed panels,
    all the pages are made of a template;
    everythings works fine; in Firefox and Opera,
    but only in IE when i open a tabbed panel from a menubar, the contents  is opened behind my header location;
    i've used spry 1.6.1 and spryUtils to open the tabbed panel.
    because there no other posibilty to open  a tabbed panel from my other page.
    i've tested the site on CSS and all, and i've don't get any errors.
    this site is only on our intranet, and DVD;
    so is not a online site
    i' dont have anything modified in the java script.
    just changed some minor adjustments to the CSS of the tabbed panels
    The page is containing a fixed footer and header, FOR all browsers therefore is the CSS IE hacks also.
    and all other functions work normal.
    i'm only a beginner at this
    CSS
    body,html {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
    body{
        color: #000;
        background-attachment: fixed;
        background-image: url(../afbeeldingen/Sitepictures/HaupteingangPB.jpg);
        font-family: Arial, Helvetica, sans-serif;
        font-size: 95%;
    #img2 {
        height: 2cm;
        width: 2cm;
        border:0;
    #img {
        margin-right: 10px;
        height: 3cm;
        width: 3cm;
        border:0;
    TD{
        font-family: Arial;
        font-size: 8pt;
        line-height: normal;
        vertical-align: top;
        text-align: left;
    #header-wrap {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 5;
    #header-container {
        height: 120px;
        background-repeat: repeat-x;
        background-position: left bottom;
    #header {
        width: 1040px;
        margin: 0 auto;
        position: relative;
    #header-content{
        width: 1040px;
        position: relative;
        background-image: url(../afbeeldingen/Sitepictures/background.jpg);
        margin-top: 0;
        margin-right: auto;
        margin-bottom: 0;
        margin-left: auto;
    #header ul li {
        float: left;
        margin-right: 2px;
    #container {
        width: 1040px;
        padding-top: 120px;
        padding-bottom:50px;
        background-color: #FFF;
        margin-bottom: 0px;
        left: auto;
        right: auto;
        margin-right: auto;
        margin-left: auto;
        position: relative;
        height: auto;
        min-height:100%;
    #container a:link {
        color: #00C;
        text-decoration: none;
    #container a:visited {
        color: #F8495A;
        text-decoration: none;
    #container a:hover {
        color: #00C;
        text-decoration: underline;
    #container a:active {
        color: #00B004;
        text-decoration: none;
    #kolommaker
        width:1040px;
        background-color: #CEECAE;
        height: 100%;
        float: left;   
    #boven {
        width: 1040px;
        position: static;
        height: 180px;
        background-color: #FFF;
    #sitecontent {
        width: 1040px;
        background-color: #FFF;
        height: 100%;
    #TabbedPanels1 {
        width: 1040px;
        position: static;
        background-color: #FFF;
        height: 100%;
        float: left;
    .links, .rechts, .midden {
        height:100%;
        display: inline-table;
        background-color: #FFF;
    .links{
        float: left;
        width: 330px;
        font-size: 12px;
        padding-top: 5px;
        margin-top: 0px;
        margin-right: auto;
        margin-left: auto;
    .rechts{
        padding-top: 5px;
        float: right;
        width: 330px;
        text-align: left;
        font-size: 12px;
        margin-top: 0px;
        margin-right: auto;
        margin-left: auto;
    .midden{
        padding-top: 5px;
        width: 330px;
        text-align: left;
        font-size: 12px;
        margin-top: 0px;
        margin-right: auto;
        margin-left: auto;   
    #footer-wrap {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 5;
    #footer-container {
        height: 50px;
        background-image: url(../images/footer-bg.png);
        background-repeat: repeat-x;
        background-position: left bottom;
    #footer {
        width: 1040px;
        margin: 0 auto;
        position: relative;
        background: #FFF;
    #contentfooter {
        width: 1040px;
        margin-top: 0;
        margin-right: auto;
        position:relative;
        margin-bottom: 0;
        margin-left: auto;
        height:50px;
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: #F00;
        text-align: center;
    .leftfooter {
        float: left;
    .rightfooter {
        float: left;
    #iframe {
            height: 600px;
            min-height: 600px; }
    .result_title a:link {
        color: #00C;
        text-decoration: none;
    .result_title a:visited {
        color: #F8495A;
        text-decoration: none;
    .result_title a:hover {
        color: #00C;
        text-decoration: underline;
    .result_title a:active {
        color: #00B004;
        text-decoration: none;
    .description { font-size: 100%; color: #008000; }
    .docs {border:0;}
    .pdf {border:0;}
    .images {border:0;}
    .excell {border:0;}
    .exe {border:0;}
    .clock {
        text-align: center;
        background: #FFF;
        border: 1px solid #CCC;
        height: 20px;
        width: 175px;
        font-size: 12px;
    .clearfix {
        content:".";
        width:100%;
        height: 0;
        clear: both;
        display: block;
        visibility: hidden;
    /* Hides from IE-mac \*/
    .clearfix {height: 1%;}  /* for IE/Mac */
    CSS IE hacks
    html{
        overflow: hidden;
    body{
        overflow: auto;
    #header-wrap, #footer-wrap {
        position: absolute;
    #header-container, #footer-container,{
    margin-right: 16px;
    #ie6-container-wrap {
        position: absolute;
        width: 100%;
        height:100%;
        overflow:auto;
    #TabbedPanels1 {
        position: absolute;
    .TabbedPanels {
        position: absolute;
    #boven {
        padding-top: 100px;
    #container {
        padding-top: 60px;
        height :100%;
    #sitecontent {
        height: 100%;
    #footer-wrap {
        bottom: -1px;
    #header img, #footer img
    display: block;
    Template
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- TemplateBeginEditable name="doctitle" -->
    <title>Naamloos document</title>
    <!-- TemplateEndEditable -->
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->
    <link href="../Stijlbladen/main4.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="../Stijlbladen/pro_dropdown_3.css"/>
    <script src="../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <script type="text/javascript" src="../SpryAssets/SpryURLUtils.js"></script>
    <script type="text/javascript">var params = Spry.Utils.getLocationParamsAsObject(); </script>
    <link href="../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    <script src="../Scripts/stuHover.js" type="text/javascript"></script>
    <script type="text/javascript" src="../Scripts/percentageProgressBar.js"></script>
    <script type="text/javascript" src="../Scripts/paswoord.js"></script>
    <!--[if lt IE 7 ]>
    <link href="../Stijlbladen/ie6hacks.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    </head>
    <body>
    <!--ZOOMSTOP-->
    <div id="header-wrap">
        <div id="header-container">
            <div id="header">
                    <div id="header-content">
                    <table width="890" border="0" cellspacing="1">
          <tr>
            <td width="100" height="50"><a href="../Sites/Index.html"><img src="../afbeeldingen/Sitepictures/WN_OriginalImage.jpg" width="90" height="50"/></a></td>
            <td width="680">
         <span class="preload1"></span>
        <span class="preload2"></span>
            <ul id="nav">
                <li class="top"><a href="#nogo2" id="Algemeen" class="top_link"><span class="down">Algemeen</span></a>
                    <ul class="sub">
                    <li><b>Alg. Procedure</b></li>
                    <li><a href="#nogo3" class="fly">Car Policy</a>
                        <ul>
                            <li><a href="../Algemeen/CAR POLICY WN_dec2009.doc">Carpolicy NL</a></li>
                            <li><a href="../Algemeen/CAR POLICY WNdec2009FR.doc">Carpolicy FR</a></li>
                        </ul>
                    </li>
                    <li><a href="#nogo7" class="fly">Gsm Policy</a>
                        <ul>
                            <li><a href="#nogo8">Gsm Policy NL</a></li>
                            <li><a href="#nogo9">Gsm Policy FR</a></li>
                        </ul>
                    </li>
                    <li><b>Diversen</b></li>
                    <li><a href="../Algemeen/Skills.htm">Skills</a></li>
                    <li><a href="../Sites/Verlof-Recup.html">Verlof</a></li>
                    <li><a href="../Sites/Verlof-Recup.html">Recup</a></li>
            </ul>
                </li>
                <li class="top"><a href="#nogo2" id="Support" class="top_link"><span class="down">Support</span></a>
                    <ul class="sub">
                        <li><a href="../Algemeen/support/Artikellijst.xls">ArtikelLijst</a></li>
                        <li><a href="../Algemeen/support/Retail Algemeen.xls">Retail Algemeen</a></li>
                        <li><a href="../Algemeen/support/Barcodes v2-2.pdf">Barcode's ALL</a></li>
                        <li><a href="../Algemeen/support/CRM 2.2.pdf">CRM 2.2</a></li>
                        <li><a href="#nogo7" class="fly">Onkostennota</a>
                        <ul>
                            <li><a href="../Algemeen/dbourdon_1109.xls">Onkostennota NL</a></li>
                            <li><a href="../Algemeen/décompte de frais July 2009.xls">Onkostennota FR</a></li>
                        </ul>
                        </li>
                        <li><a href="#nogo7" class="fly">Online Tools</a>
                        <ul>
                            <li><a href="file://///Wincor-nixdorf/projects/BE/D34POOL/STOCK MAALBEEK/FIELD/PLOMPEN RETAIL LOC WB.xls">Stock E.Plompen</a></li>
                            <li><a href="../Sites/login.html">Online map</a></li>
                            <li><a href="../Sites/Fujitsu.html">Fujitsu Portal</a></li>
                        </ul>
                    </li>
                         <li><a href="#nogo7" class="fly">FAX Franchisé</a>
                        <ul>
                            <li><a href="../Algemeen/support/Fax franchisé NL4.doc">Franchisé NL</a></li>
                            <li><a href="../Algemeen/support/Fax franchisé FR4.doc">Franchisé FR</a></li>
                        </ul>
                        </li>
            </ul>
        </li>
        <li class="top"><a href="#nogo22" id="Contacts" class="top_link"><span class="down">Contacts</span></a>
            <ul class="sub">
                <li><a href="../Algemeen/contacts/technician.pdf">Retail Tech</a></li>
                <li><a href="../Algemeen/contacts/telretail.xls">Tel Ret/Helpdesk</a></li>
                <li><a href="../Algemeen/contacts/Telefoonlijst WN + WNS.xls">Tel WN/WNS</a></li>
            </ul>
        </li>
        <li class="top"><a href="#nogo27" id="Klanten" class="top_link"><span class="down">Klanten</span></a>
            <ul class="sub">
                <li><a href="../Sites/Aldi.html">Aldi</a></li>
                <li><a href="../Sites/Little Customers.html?tab=0#tabbedpanels1">Belgique Loisirs</a></li>
                <li><a href="../Sites/Bonita.html">Bonita</a></li>
                <li><a href="../Sites/Carrefour.html">Carrefour</a></li>
                <li><a href="../Sites/C&amp;A.html">C &amp; A</a></li>
                <li><a href="../Sites/Decathlon.html">Decathlon</a></li>
                <li><a href="../Sites/Delhaize.html">Delhaize</a></li>
                <li><a href="../Sites/Ici Paris XL.html">Ici Paris</a></li>
                <li><a href="../Sites/Ikea.html">Ikea</a></li>
                <li><a href="../Sites/Little Customers.html?tab=3#tabbedpanels1">Koodza</a></li>
                <li><a href="../Sites/Kruidvat.html">Kruidvat</a></li>
                <li><a href="../Sites/Lidl.html">Lidl</a></li>
                <li><a href="../Sites/Living Tomorrow.html">Living Tomorrow</a></li>
                <li><a href="../Sites/Mediamarkt.html">Mediamarkt</a></li>
                <li><a href="../Sites/Scapino.html">Scapino</a></li>
                <li><a href="../Sites/Little Customers.html?tab=2#tabbedpanels1">Takko</a></li>
                <li><a href="../Sites/Little Customers.html?tab=1#tabbedpanels1">Texto</a></li>
            </ul>
        </li>
        <li class="top"><a href="#nogo63" id="ThirdParty" class="top_link"><span class="down">3th Party</span></a>
            <ul class="sub">
                <li><a href="../Sites/third party.html?tab=5#tabbedpanels1">Fujitsu Siemens</a></li>
                <li><a href="../Sites/third party.html?tab=4#tabbedpanels1">HP</a></li>
                <li><a href="../Sites/third party.html?tab=6#tabbedpanels1">Datalogic</a></li>
                <li><a href="../Sites/third party.html?tab=7#tabbedpanels1">Vensafe</a></li>
                <li><a href="../Sites/third party.html?tab=1#tabbedpanels1">Scanners</a></li>
                <li><a href="../Sites/third party.html?tab=0#tabbedpanels1">Scales</a></li>
            </ul>
        </li>
        <li class="top"><a href="../Sites/Wincor-Nixdorf materiaal.html" id="WN-Material" class="top_link"><span>WN-Material</span></a></li>
        <li class="top"><a href="../Sites/Technician tools.html" id="Techtools" class="top_link"><span>Techtools</span></a></li>
    </ul>
            </td>
          </tr>
        </table>
      <table width="1038" border="0" cellspacing="1">
      <tr>
        <td><form method="get" action="../indexer/search.html">
    <input type="text" name="zoom_query" size="30" />
    <input type="submit" value="Search" />
    </form></td>
        <td> </td>
        <td><div class="clock"><script type="text/javascript" language="javascript" src="../Scripts/datetime.js">
    </script></div>
    </td>
      </tr>
    </table>
             </div>
            </div>
        </div>
    </div>
    <!--ZOOMRESTART-->
    <div id="ie6-container-wrap" >
    <div id="container">   
            <!-- TemplateBeginEditable name="EditRegion1" -->
         <div id="boven">test<br />
           <br />
         </div> 
         <div id="TabbedPanels1" class="TabbedPanels">
          <ul class="TabbedPanelsTabGroup">
            <li class="TabbedPanelsTab" tabindex="0">Algemeen</li>
            <li class="TabbedPanelsTab" tabindex="0">Tools</li>
            <li class="TabbedPanelsTab" tabindex="0">Pc's</li>
            <li class="TabbedPanelsTab" tabindex="0">Kassa's</li>
            <li class="TabbedPanelsTab" tabindex="0">Selfscanning</li>
            <li class="TabbedPanelsTab" tabindex="0">Self Check Outs</li>
            <li class="TabbedPanelsTab" tabindex="0">EN andere</li>
          </ul>
          <div class="TabbedPanelsContentGroup">
            <div class="TabbedPanelsContent">
              <div class="links">Hier wordt de inhoud voor  id left weergegeven</div>
              <div class="rechts">Hier wordt de inhoud voor  id right weergegeven</div>
              <div class="midden">Hier wordt de inhoud voor  id midden weergegeven
                <p>Hier wordt de inhoud voor  id midden weergegeven</p>
                <p> </p>
                <p> </p>
                <p> </p>
                <p> </p>
                <p> </p>
                <p> </p>
                <p> </p>
                <p> </p>
                <p> </p>
                <p> </p>
                <p> </p>
                <p> </p>
                <p> </p>
                <p> </p>
              </div>
            </div>
            <div class="TabbedPanelsContent">
              <div class="links">Hier wordt de inhoud voor  id left weergegeven</div>
              <div class="rechts">Hier wordt de inhoud voor  id right weergegeven</div>
              <div class="midden">Hier wordt de inhoud voor  id midden weergegeven</div>
            </div>
            <div class="TabbedPanelsContent">
              <div class="links">Hier wordt de inhoud voor  id left weergegeven</div>
              <div class="rechts">Hier wordt de inhoud voor  id right weergegeven</div>
              <div class="midden">Hier wordt de inhoud voor  id midden weergegeven</div>
            </div>
            <div class="TabbedPanelsContent">
              <div class="links">Hier wordt de inhoud voor  id left weergegeven</div>
              <div class="rechts">Hier wordt de inhoud voor  id right weergegeven</div>
              <div class="midden">Hier wordt de inhoud voor  id midden weergegeven</div>
            </div>
            <div class="TabbedPanelsContent">
              <div class="links">Hier wordt de inhoud voor  id left weergegeven</div>
              <div class="rechts">Hier wordt de inhoud voor  id right weergegeven</div>
              <div class="midden">Hier wordt de inhoud voor  id midden weergegeven</div>
            </div>
            <div class="TabbedPanelsContent">
              <div class="links">Hier wordt de inhoud voor  id left weergegeven</div>
              <div class="rechts">Hier wordt de inhoud voor  id right weergegeven</div>
              <div class="midden">Hier wordt de inhoud voor  id midden weergegeven</div>
            </div>
            <div class="TabbedPanelsContent">
              <div class="links">Hier wordt de inhoud voor  id left weergegeven</div>
              <div class="rechts">Hier wordt de inhoud voor  id right weergegeven</div>
              <div class="midden">Hier wordt de inhoud voor  id midden weergegeven</div>
            </div>
            <div class="TabbedPanelsContent">
              <div class="links">Hier wordt de inhoud voor  id left weergegeven</div>
              <div class="rechts">Hier wordt de inhoud voor  id right weergegeven</div>
              <div class="midden">Hier wordt de inhoud voor  id midden weergegeven</div>
            </div>
          </div>
          <div class="clearfix:after"> </div>
    </div>
    <!-- TemplateEndEditable -->
        </div>
        <div class="clearfix:after"> </div>
      </div>
      <!--ZOOMSTOP-->
    <div id="footer-wrap">
        <div id="footer-container">
            <div id="footer">
             <div id="contentfooter"><div class="leftfooter"><a href="../Sites/Index.html"> <img src="../afbeeldingen/Sitepictures/Homebutton.gif" width="40" height="40" border="none" /></a></div>
           <div class="rightfooter"><a href="../Sites/Index.html"> <img src="../afbeeldingen/Sitepictures/mail_button.gif" border="none" /></a></div>RELEASE CANDITATE VERSIE 3 BUILD 27041002 </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
    <!--
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab: params.tab ? params.tab : 0});
    //-->
    </script>
    </body>
    </html>
    PAGE where i open the tabbed panels
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/Naamloos-2.dwt" codeOutsideHTMLIsLocked="false" -->
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- InstanceBeginEditable name="doctitle" -->
    <title>Third Party</title>
    <!-- InstanceEndEditable -->
    <!-- InstanceBeginEditable name="head" -->
    <!-- InstanceEndEditable -->
    <link href="../Stijlbladen/main4.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="../Stijlbladen/pro_dropdown_3.css"/>
    <script src="../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <script type="text/javascript" src="../SpryAssets/SpryURLUtils.js"></script>
    <script type="text/javascript">var params = Spry.Utils.getLocationParamsAsObject(); </script>
    <link href="../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    <script src="../Scripts/stuHover.js" type="text/javascript"></script>
    <script type="text/javascript" src="../Scripts/percentageProgressBar.js"></script>
    <script type="text/javascript" src="../Scripts/paswoord.js"></script>
    <!--[if lt IE 7 ]>
    <link href="../Stijlbladen/ie6hacks.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    </head>
    <body>
    <!--ZOOMSTOP-->
    <div id="header-wrap">
        <div id="header-container">
            <div id="header">
                    <div id="header-content">
                    <table width="890" border="0" cellspacing="1">
          <tr>
            <td width="100" height="50"><a href="Index.html"><img src="../afbeeldingen/Sitepictures/WN_OriginalImage.jpg" width="90" height="50"/></a></td>
            <td width="680">
         <span class="preload1"></span>
        <span class="preload2"></span>
            <ul id="nav">
                <li class="top"><a href="#nogo2" id="Algemeen" class="top_link"><span class="down">Algemeen</span></a>
                    <ul class="sub">
                    <li><b>Alg. Procedure</b></li>
                    <li><a href="#nogo3" class="fly">Car Policy</a>
                        <ul>
                            <li><a href="../Algemeen/CAR POLICY WN_dec2009.doc">Carpolicy NL</a></li>
                            <li><a href="../Algemeen/CAR POLICY WNdec2009FR.doc">Carpolicy FR</a></li>
                        </ul>
                    </li>
                    <li><a href="#nogo7" class="fly">Gsm Policy</a>
                        <ul>
                            <li><a href="#nogo8">Gsm Policy NL</a></li>
                            <li><a href="#nogo9">Gsm Policy FR</a></li>
                        </ul>
                    </li>
                    <li><b>Diversen</b></li>
                    <li><a href="../Algemeen/Skills.htm">Skills</a></li>
                    <li><a href="Verlof-Recup.html">Verlof</a></li>
                    <li><a href="Verlof-Recup.html">Recup</a></li>
            </ul>
                </li>
                <li class="top"><a href="#nogo2" id="Support" class="top_link"><span class="down">Support</span></a>
                    <ul class="sub">
                        <li><a href="../Algemeen/support/Artikellijst.xls">ArtikelLijst</a></li>
                        <li><a href="../Algemeen/support/Retail Algemeen.xls">Retail Algemeen</a></li>
                        <li><a href="../Algemeen/support/Barcodes v2-2.pdf">Barcode's ALL</a></li>
                        <li><a href="../Algemeen/support/CRM 2.2.pdf">CRM 2.2</a></li>
                        <li><a href="#nogo7" class="fly">Onkostennota</a>
                        <ul>
                            <li><a href="../Algemeen/dbourdon_1109.xls">Onkostennota NL</a></li>
                            <li><a href="../Algemeen/décompte de frais July 2009.xls">Onkostennota FR</a></li>
                        </ul>
                        </li>
                        <li><a href="#nogo7" class="fly">Online Tools</a>
                        <ul>
                            <li><a href="file://///Wincor-nixdorf/projects/BE/D34POOL/STOCK MAALBEEK/FIELD/PLOMPEN RETAIL LOC WB.xls">Stock E.Plompen</a></li>
                            <li><a href="login.html">Online map</a></li>
                            <li><a href="Fujitsu.html">Fujitsu Portal</a></li>
                        </ul>
                    </li>
                         <li><a href="#nogo7" class="fly">FAX Franchisé</a>
                        <ul>
                            <li><a href="../Algemeen/support/Fax franchisé NL4.doc">Franchisé NL</a></li>
                            <li><a href="../Algemeen/support/Fax franchisé FR4.doc">Franchisé FR</a></li>
                        </ul>
                        </li>
            </ul>
        </li>
        <li class="top"><a href="#nogo22" id="Contacts" class="top_link"><span class="down">Contacts</span></a>
            <ul class="sub">
                <li><a href="../Algemeen/contacts/technician.pdf">Retail Tech</a></li>
                <li><a href="../Algemeen/contacts/telretail.xls">Tel Ret/Helpdesk</a></li>
                <li><a href="../Algemeen/contacts/Telefoonlijst WN + WNS.xls">Tel WN/WNS</a></li>
            </ul>
        </li>
        <li class="top"><a href="#nogo27" id="Klanten" class="top_link"><span class="down">Klanten</span></a>
            <ul class="sub">
                <li><a href="Aldi.html">Aldi</a></li>
                <li><a href="Little Customers.html?tab=0#tabbedpanels1">Belgique Loisirs</a></li>
                <li><a href="Bonita.html">Bonita</a></li>
                <li><a href="Carrefour.html">Carrefour</a></li>
                <li><a href="C&amp;A.html">C &amp; A</a></li>
                <li><a href="Decathlon.html">Decathlon</a></li>
                <li><a href="Delhaize.html">Delhaize</a></li>
                <li><a href="Ici Paris XL.html">Ici Paris</a></li>
                <li><a href="Ikea.html">Ikea</a></li>
                <li><a href="Little Customers.html?tab=3#tabbedpanels1">Koodza</a></li>
                <li><a href="Kruidvat.html">Kruidvat</a></li>
                <li><a href="Lidl.html">Lidl</a></li>
                <li><a href="Living Tomorrow.html">Living Tomorrow</a></li>
                <li><a href="Mediamarkt.html">Mediamarkt</a></li>
                <li><a href="Scapino.html">Scapino</a></li>
                <li><a href="Little Customers.html?tab=2#tabbedpanels1">Takko</a></li>
                <li><a href="Little Customers.html?tab=1#tabbedpanels1">Texto</a></li>
            </ul>
        </li>
        <li class="top"><a href="#nogo63" id="ThirdParty" class="top_link"><span class="down">3th Party</span></a>
            <ul class="sub">
                <li><a href="third party.html?tab=5#tabbedpanels1">Fujitsu Siemens</a></li>
                <li><a href="third party.html?tab=4#tabbedpanels1">HP</a></li>
                <li><a href="third party.html?tab=6#tabbedpanels1">Datalogic</a></li>
                <li><a href="third party.html?tab=7#tabbedpanels1">Vensafe</a></li>
                <li><a href="third party.html?tab=1#tabbedpanels1">Scanners</a></li>
                <li><a href="third party.html?tab=0#tabbedpanels1">Scales</a></li>
            </ul>
        </li>
        <li class="top"><a href="Wincor-Nixdorf materiaal.html" id="WN-Material" class="top_link"><span>WN-Material</span></a></li>
        <li class="top"><a href="Technician tools.html" id="Techtools" class="top_link"><span>Techtools</span></a></li>
    </ul>
            </td>
          </tr>
        </table>
      <table width="1038" border="0" cellspacing="1">
      <tr>
        <td><form method="get" action="../indexer/search.html">
    <input type="text" name="zoom_query" size="30" />
    <input type="submit" value="Search" />
    </form></td>
        <td> </td>
        <td><div class="clock"><script type="text/javascript" language="javascript" src="../Scripts/datetime.js">
    </script></div>
    </td>
      </tr>
    </table>
             </div>
            </div>
        </div>
    </div>
    <!--ZOOMRESTART-->
    <div id="ie6-container-wrap" >
    <div id="container">   
            <!-- InstanceBeginEditable name="EditRegion1" -->
    <div id="boven"><img src="../afbeeldingen/Sitepictures/Datalogic_logo.jpg" alt="Datalogic" name="img2" width="100" height="100" id="img2" /> <img src="../afbeeldingen/Sitepictures/PSC-Logo4C.jpg" alt="PSC" name="img2" width="450" height="160" id="img2" /> <img src="../afbeeldingen/Sitepictures/NCRlogo.jpg" alt="NCR" name="img2" width="116" height="116" id="img2" /> <img src="../afbeeldingen/Sitepictures/symbol-logo.jpg" alt="Symbol" name="img2" width="200" height="150" id="img2" /></div>
        <div id="TabbedPanels1" class="TabbedPanels">
          <ul class="TabbedPanelsTabGroup">
            <li class="TabbedPanelsTab" tabindex="0">kassascanners</li>
            <li class="TabbedPanelsTab" tabindex="0">Handscanners</li>
            <li class="TabbedPanelsTab" tabindex="0">Scales</li>
            <li class="TabbedPanelsTab" tabindex="0">Kassaprinters</li>
            <li class="TabbedPanelsTab" tabindex="0">HP</li>
            <li class="TabbedPanelsTab" tabindex="0">Fujitsu-Siemens</li>
            <li class="TabbedPanelsTab" tabindex="0">Datalogic</li>
            <li class="TabbedPanelsTab" tabindex="0">Vensafe</li>
          </ul>
          <div class="TabbedPanelsContentGroup">
            <div class="TabbedPanelsContent">
               <div class="links"></div>
              <div class="rechts"></div>
             <div class="midden"></div>
            </div>
            <div class="TabbedPanelsContent">
             <div class="links"></div>
               <div class="rechts"></div>
              <div class="midden"></div>
            </div>
           <div class="TabbedPanelsContent">
              <div class="links"></div>
              <div class="rechts"></div>
              <div class="midden"></div>
            </div>
            <div class="TabbedPanelsContent">
              <div class="links"></div>
              <div class="rechts"></div>
              <div class="midden"></div>
            </div>
            <div class="TabbedPanelsContent">
              <div class="links"></div>
              <div class="rechts"></div>
              <div class="midden"></div>
            </div>
            <div class="TabbedPanelsContent">
             <div class="links"></div>
             <div class="rechts"></div>
            <div class="midden"></div>
            </div>
            <div class="TabbedPanelsContent">
             <div class="links"></div>
             <div class="rechts"></div>
            <div class="midden"></div>
            </div>
            <div class="TabbedPanelsContent">
             <div class="links"></div>
             <div class="rechts"></div>
            <div class="midden"></div>
            </div>
          </div>
           <div class="clearfix:after"> </div>
        </div>
    <!-- InstanceEndEditable -->
        </div>
        <div class="clearfix:after"> </div>
      </div>
      <!--ZOOMSTOP-->
    <div id="footer-wrap">
        <div id="footer-container">
            <div id="footer">
             <div id="contentfooter"><div class="leftfooter"><a href="Index.html"> <img src="../afbeeldingen/Sitepictures/Homebutton.gif" width="40" height="40" border="none" /></a></div>
           <div class="rightfooter"><a href="Index.html"> <img src="../afbeeldingen/Sitepictures/mail_button.gif" border="none" /></a></div>RELEASE CANDITATE VERSIE 3 BUILD 27041002 </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
    <!--
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab: params.tab ? params.tab : 0});
    //-->
    </script>
    </body>
    <!-- InstanceEnd --></html>
    TABBED PANELS CSS
    @charset "UTF-8";
    /* SpryTabbedPanels.css - version 0.4 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    /* Horizontal Tabbed Panels
    * The default style for a TabbedPanels widget places all tab buttons
    * (left aligned) above the content panel.
    /* This is the selector for the main TabbedPanels container. For our
    * default style, this container does not contribute anything visually,
    * but it is floated left to make sure that any floating or clearing done
    * with any of its child elements are contained completely within the
    * TabbedPanels container, to minimize any impact or undesireable
    * interaction with other floated elements on the page that may be used
    * for layout.
    * If you want to constrain the width of the TabbedPanels widget, set a
    * width on the TabbedPanels container. By default, the TabbedPanels widget
    * expands horizontally to fill up available space.
    * The name of the class ("TabbedPanels") used in this selector is not
    * necessary to make the widget function. You can use any class name you
    * want to style the TabbedPanels container.
    .TabbedPanels {
        width: 1040px; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
        position: static;
        float: left;
    /* This is the selector for the TabGroup. The TabGroup container houses
    * all of the tab buttons for each tabbed panel in the widget. This container
    * does not contribute anything visually to the look of the widget for our
    * default style.
    * The name of the class ("TabbedPanelsTabGroup") used in this selector is not
    * necessary to make the widget function. You can use any class name you
    * want to style the TabGroup container.
    .TabbedPanelsTabGroup {
        margin: 0px;
        padding: 0px;
    /* This is the selector for the TabbedPanelsTab. This container houses
    * the title for the panel. This is also the tab "button" that the user clicks
    * on to activate the corresponding content panel so that it appears on top
    * of the other tabbed panels contained in the widget.
    * For our default style, each tab is positioned relatively 1 pixel down from
    * where it wold normally render. This allows each tab to overlap the content
    * panel that renders below it. Each tab is rendered with a 1 pixel bottom
    * border that has a color that matches the top border of the current content
    * panel. This gives the appearance that the tab is being drawn behind the
    * content panel.
    * The name of the class ("TabbedPanelsTab") used in this selector is not
    * necessary to make the widget function. You can use any class name you want
    * to style this tab container.
    .TabbedPanelsTab {
        position: static;
        top: 1px;
        float: left;
        font: bold 0.7em sans-serif;
        background-color: #FF0033;
        list-style: none;
        border-left: solid 1px #CCC;
        border-bottom: solid 1px #999;
        border-top: solid 1px #999;
        border-right: solid 1px #999;
        -moz-user-select: none;
        -khtml-user-select: none;
        cursor: pointer;
        margin-top: 0px;
        margin-right: 1px;
        margin-bottom: 0px;
        margin-left: 0px;
        padding-top: 4px;
        padding-right: 5px;
        padding-bottom: 4px;
        padding-left: 5px;
    /* This selector is an example of how to change the appearnce of a tab button
    * container as the mouse enters it. The class "TabbedPanelsTabHover" is
    * programatically added and removed from the tab element as the mouse enters
    * and exits the container.
    .TabbedPanelsTabHover {
        background-color: #75A7D0;
    /* This selector is an example of how to change the appearance of a tab button
    * container after the user has clicked on it to activate a content panel.
    * The class "TabbedPanelsTabSelected" is programatically added and removed
    * from the tab element as the user clicks on the tab button containers in
    * the widget.
    * As mentioned above, for our default style, tab buttons are positioned
    * 1 pixel down from where it would normally render. When the tab button is
    * selected, we change its bottom border to match the background color of the
    * content panel so that it looks like the tab is part of the content panel.
    .TabbedPanelsTabSelected {
        border-bottom: 2px solid #EEE;
        color: #FFF;
        background-color: #000;
    /* This selector is an example of how to make a link inside of a tab button
    * look like normal text. Users may want to use links inside of a tab button
    * so that when it gets focus, the text *inside* the tab button gets a focus
    * ring around it, instead of the focus ring around the entire tab.
    .TabbedPanelsTab a {
        color: black;
        text-decoration: none;
    /* This is the selector for the ContentGroup. The ContentGroup container houses
    * all of the content panels for each tabbed panel in the widget. For our
    * default style, this container provides the background color and borders that
    * surround the content.
    * The name of the class ("TabbedPanelsContentGroup") used in this selector is
    * not necessary to make the widget function. You can use any class name you
    * want to style the ContentGroup container.
    .TabbedPanelsContentGroup {
        clear: both;
        border-top-width: 1px;
        border-right-width: 1px;
        border-bottom-width: 1px;
        border-left-width: 1px;
        border-top-style: none;
        border-right-style: none;
        border-bottom-style: none;
        border-left-style: none;
        float: left;
    /* This is the selector for the Content panel. The Content panel holds the
    * content for a single tabbed panel. For our default style, this container
    * provides some padding, so that the content is not pushed up against the
    * widget borders.
    * The name of the class ("TabbedPanelsContent") used in this selector is
    * not necessary to make the widget function. You can use any class name you
    * want to style the Content container.
    .TabbedPanelsContent {
        padding: 4px;
        height: 100%;
        width: 1032px;
        float: left;
    /* This selector is an example of how to change the appearnce of the currently
    * active container panel. The class "TabbedPanelsContentVisible" is
    * programatically added and removed from the content element as the panel
    * is activated/deactivated.
    .TabbedPanelsContentVisible {
        background-color: #FFF;
    /* Vertical Tabbed Panels
    * The following rules override some of the default rules above so that the
    * TabbedPanels widget renders with its tab buttons along the left side of
    * the currently active content panel.
    * With the rules defined below, the only change that will have to be made
    * to switch a horizontal tabbed panels widget to a vertical tabbed panels
    * widget, is to use the "VTabbedPanels" class on the top-level widget
    * container element, instead of "TabbedPanels".
    /* This selector floats the TabGroup so that the tab buttons it contains
    * render to the left of the active content panel. A border is drawn around
    * the group container to make it look like a list container.
    .VTabbedPanels .TabbedPanelsTabGroup {
        float: left;
        width: 10em;
        height: 20em;
        background-color: #CCC;
        position: relative;
        border-top: solid 1px #999;
        border-right: solid 1px #999;
        border-left: solid 1px #CCC;
        border-bottom: solid 1px #CCC;
    /* This selector disables the float property that is placed on each tab button
    * by the default TabbedPanelsTab selector rule above. It also draws a bottom
    * border for the tab. The tab button will get its left and right border from
    * the TabGroup, and its top border from the TabGroup or tab button above it.
    .VTabbedPanels .TabbedPanelsTab {
        float: none;
        margin: 0px;
        border-top: none;
        border-left: none;
        border-right: none;
    /* This selector disables the float property that is placed on each tab button
    * by the default TabbedPanelsTab selector rule above. It also draws a bottom
    * border for the tab. The tab button will get its left and right border from
    * the TabGroup, and its top border from the TabGroup or tab button above it.
    .VTabbedPanels .TabbedPanelsTabSelected {
        background-color: #EEE;
        border-bottom: solid 1px #999;
    /* This selector floats the content panels for the widget so that they
    * render to the right of the tabbed buttons.
    .VTabbedPanels .TabbedPanelsContentGroup {
        clear: none;
        float: left;
        padding: 0px;
        width: 30em;
        height: 20em;

    added also the css for the menubar
    pro_dropdown_3.css
    .preload1 {
        background-image: url(../afbeeldingen/Sitepictures/three_0a.gif);
    .preload2 {
        background-image: url(../afbeeldingen/Sitepictures/three_1a.gif);
    #nav {
        padding:0;
        margin:0;
        list-style:none;
        height:38px;
        position:relative;
        z-index:500;
        font-family:arial, verdana, sans-serif;
        background-image: url(../afbeeldingen/Sitepictures/three_0.gif);
        background-repeat: repeat-x;
    #nav li.top {
        display:block;
        float:left;
        width: auto;
    #nav li a.top_link {
        display:block;
        float:left;
        height:35px;
        line-height:33px;
        color:#ccc;
        text-decoration:none;
        font-size:11px;
        font-weight:bold;
        cursor:pointer;
        background-image: url(../afbeeldingen/Sitepictures/three_0.gif);
        width: 85px;
        padding-top: 0;
        padding-right: 0;
        padding-bottom: 0;
        padding-left: 2px;
    #nav li a.top_link span {
        float:left;
        display:block;
        height:35px;
        background-image: url(../afbeeldingen/Sitepictures/three_0.gif);
        background-repeat: no-repeat;
        background-position: right top;
        width: 70px;
        padding-top: 0;
        padding-right: 10px;
        padding-bottom: 0;
        padding-left: 10px;
    #nav li a.top_link span.down {
        float:left;
        display:block;
        padding:0 10px 0 12px;
        height:35px;
        background-image: url(../afbeeldingen/Sitepictures/three_0a.gif);
        background-repeat: no-repeat;
        background-position: right top;
    #nav li:hover a.top_link {
        color:#fff;
        background-image: url(../afbeeldingen/Sitepictures/three_1.gif);
        background-repeat: no-repeat;
    #nav li:hover a.top_link span {
        background-image: url(../afbeeldingen/Sitepictures/three_1.gif);
        background-repeat: no-repeat;
        background-position: right top;
    #nav li:hover a.top_link span.down {
        padding-bottom:3px;
        background-image: url(../afbeeldingen/Sitepictures/three_1a.gif);
        background-repeat: no-repeat;
        background-position: right top;
    /* Default list styling */
    #nav li:hover {position:relative; z-index:200;}
    #nav li:hover ul.sub
    {left:1px; top:38px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; height:auto; z-index:300;}
    #nav li:hover ul.sub li
    {display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
    #nav li:hover ul.sub li a
    {display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #50b5d0;}
    #nav li ul.sub li a.fly
        background-color: #50b5d0;
        background-image: url(../afbeeldingen/Sitepictures/arrow.gif);
        background-repeat: no-repeat;
        background-position: 80px 6px;
    #nav li:hover ul.sub li a:hover
    {background:#3f96a9; color:#fff; border-color:#fff;}
    #nav li:hover ul.sub li a.fly:hover
        color:#fff;
        background-color: #3f96a9;
        background-image: url(../afbeeldingen/Sitepictures/arrow_over.gif);
        background-repeat: no-repeat;
        background-position: 80px 6px;
    #nav li b {display:block; font-size:11px; height:18px; width:88px; line-height:18px; margin-bottom:3px; text-indent:6px; color:#ff6; border-bottom:1px solid #ff6; cursor:default;}
    #nav li:hover li:hover ul,
    #nav li:hover li:hover li:hover ul,
    #nav li:hover li:hover li:hover li:hover ul,
    #nav li:hover li:hover li:hover li:hover li:hover ul
    {left:90px; top:-4px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; z-index:400; height:auto;}
    #nav ul,
    #nav li:hover ul ul,
    #nav li:hover li:hover ul ul,
    #nav li:hover li:hover li:hover ul ul,
    #nav li:hover li:hover li:hover li:hover ul ul
    {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
    #nav li:hover li:hover a.fly,
    #nav li:hover li:hover li:hover a.fly,
    #nav li:hover li:hover li:hover li:hover a.fly,
    #nav li:hover li:hover li:hover li:hover li:hover a.fly
        color:#fff;
        border-color:#fff;
        background-color: #3f96a9;
        background-image: url(../afbeeldingen/Sitepictures/arrow_over.gif);
        background-repeat: no-repeat;
        background-position: 80px 6px;
    #nav li:hover li:hover li a.fly,
    #nav li:hover li:hover li:hover li a.fly,
    #nav li:hover li:hover li:hover li:hover li a.fly
        color:#000;
        border-color:#50b5d0;
        background-color: #50b5d0;
        background-image: url(../afbeeldingen/Sitepictures/arrow.gif);
        background-repeat: no-repeat;
        background-position: 80px 6px;

  • Java Applet Panel problems with CardLayout

    Hi, I have a problem a I have been stucked for 2 days.
    I created 3 Panels to use with CardLayout. I would switch between those 3 panels depending on user interaction. I have some textfields and text areas on the 2nd and 3rd Panel. On the 1st panel, I would like to use g.drawstring to write some stuff on that panel, but the words would be blocked off if it goes to where the components are on the other panels.
    Thanks.

    import java.applet.Applet;
    import java.awt.*;
    import java.awt.event.*;
    import java.awt.font.*;
    public class CardTest extends Applet
        Panel panel;
        CardLayout cards;
        public void init()
        {   cards = new CardLayout();
            panel = new Panel(cards);
            panel.add("one", new GraphicPanel());
            panel.add("two", getPanel("panel two"));
            panel.add("three", getPanel("panel three"));
            setLayout(new BorderLayout());
            add(getNavPanel(), "North");
            add(panel);
        private Panel getNavPanel()
            final Button
                last = new Button("last"),
                next = new Button("next");
            ActionListener l = new ActionListener()
                public void actionPerformed(ActionEvent e)
                    Button button = (Button)e.getSource();
                    if(button == last)
                        cards.previous(panel);
                    if(button == next)
                        cards.next(panel);
            last.addActionListener(l);
            next.addActionListener(l);
            Panel panel = new Panel();
            panel.add(last);
            panel.add(next);
            return panel;
        private Panel getPanel(String s)
            Panel panel = new Panel(new GridBagLayout());
            GridBagConstraints gbc = new GridBagConstraints();
            gbc.weighty = 1.0;
            gbc.gridwidth = GridBagConstraints.REMAINDER;
            panel.add(new Button("button"), gbc);
            panel.add(new TextArea(s, 8, 16), gbc);
            return panel;
        public static void main(String[] args)
            Applet applet = new CardTest();
            Frame f = new Frame();
            f.addWindowListener(new WindowAdapter()
                public void windowClosing(WindowEvent e)
                    System.exit(0);
            f.add(applet);
            f.setSize(400,400);
            f.setLocation(200,200);
            applet.init();
            f.setVisible(true);
    class GraphicPanel extends Panel
        Font font;
        String text;
        final int PAD = 25;
        public GraphicPanel()
            font = new Font("lucida bright regular", Font.PLAIN, 22);
            text = "Hello World";
        public void paint(Graphics g)
            super.paint(g);
            Graphics2D g2 = (Graphics2D)g;
            g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
                                RenderingHints.VALUE_ANTIALIAS_ON);
            int w = getWidth();
            int h = getHeight();
            int dia = Math.min(w,h)/6;
            g2.setPaint(Color.blue);
            g2.drawLine(PAD, PAD, w - PAD, PAD);
            g2.drawLine(PAD, h - PAD, w - PAD, h - PAD);
            g2.setPaint(Color.green.darker());
            g2.drawOval(w/2 - dia/2, h*2/3, dia, dia);
            g2.setFont(font);
            FontRenderContext frc = g2.getFontRenderContext();
            float width = (float)font.getStringBounds(text, frc).getWidth();
            LineMetrics lm = font.getLineMetrics(text, frc);
            float x = (w - width)/2;
            float y = (h + lm.getHeight())/2 -lm.getDescent();
            g2.setPaint(Color.black);
            g2.drawString(text, x, y);
    }

Maybe you are looking for