Animated menus in Swing?

Has anyone tried doing or seen examples of animated menus and buttons made in java (swing)
What im looking for, is input on how to create menues that i.e. opens by scrolling down or fading up the popupmenu.
Looked at http://search.java.sun.com/ClickThru?qt=slides+menu&url=http%3A%2F%2Fforum.java.sun.com%2Fthread.jsp%3Fforum%3D57%26thread%3D277596&pathInfo=%2Fsearch%2Fjava%2Findex.jsp&hitNum=2&col=javaforums
which did'nt help much...
Thanx in advance...
Barsum

One simple way is:
label.setText("<html><img src=.....></html>");

Similar Messages

Animated Gifs in Swing

Is it possible to draw an animated Gif in a swing gui? I know how I can display animated gifs in an applet, but I really would like to do it in a gui that does not use the class Applet.

Welcome to the Sun forums.
KarlStroetmann wrote:
Is it possible to draw an animated Gif in a swing gui? E.G.
import javax.swing.*;
import java.net.URL;
class ShowGif {
public static void main(String[] args) throws Exception {
    final URL url = new URL(
      "http://pscode.org/media/starzoom-thumb.gif");
    Runnable r = new Runnable() {
      public void run() {
        ImageIcon ii = new ImageIcon(url);
        JOptionPane.showMessageDialog( null, ii );
    SwingUtilities.invokeLater(r);
KarlStroetmann wrote:.. I know how I can display animated gifs in an applet, but I really would like to do it in a gui that does not use the class Applet.A JApplet is Swing, and offers all the methods an Applet does. ;)
Edit 1:
Note that it is usually necessary to wrap an ImageIcon in a JLabel before display, but JOptionPane does that automatically.
Edited by: AndrewThompson64 on Jul 10, 2009 5:26 AM

How to use Flash buttons/animation in a Swing/Applet?

Hello,
I want to use flash button as like as JButton that we use in Swing/ Applet. How can I do So?
Please help me.
Thanks-

[http://java.sun.com/docs/books/tutorial/uiswing/misc/timer.html]
Or maybe just...
import java.awt.*;
import java.net.*;
import javax.swing.*;
public class Blinky {
    public static void main(String[] args) {
        EventQueue.invokeLater(new Runnable(){
            public void run() {
                URL url = null;
                try {
                    url = new URL("http://www.gifanimations.com/GA/image/animations/bodyparts/eyes/eye-01.gif");
                } catch (MalformedURLException e) {
                    throw new RuntimeException(e);
                JFrame f = new JFrame("Blinky");
                f.getContentPane().add(new JButton(new ImageIcon(url)));
                f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                f.pack();
                f.setLocationRelativeTo(null);
                f.setVisible(true);
}

DVD Animated Menus Going Dark at Still Frame...

I'm creating menus in Motion and bringing them into DVD Studio Pro. For some reason, if I set the menus to go 'Still' at the end of the animation, the background of the animation goes dark. There is nothing but the animated menu file and some overlays (colored boxes) for buttons. But somehow, DVD Studio Pro manages to make the background of the animation go dark. Or maybe it doesn't? Maybe this is Motion's fault?
If you've seen this before, please enlighten me. Thanks!

It's a little more complex than you might think. Dave nagel wrote a good article about it way back in time (DVDSP version 2, believe it or not). Have a read here:
http://creativemac.digitalmedianet.com/articles/viewarticle.jsp?id=23956
and here:
http://forums.digitalmedianet.com/cgi-bin/readwholethread.fcgi?forum=astarte_dvd &post=040815203049.htm&toppostid=3295#2

Animanted Menus, Buttons

Unless I'm missing something it would be great to have sub-menus that fade or slide in and out, as well as fading rollovers on buttons and links. I know there are some tricky workarounds to create similar effects but as far as I can see there's no easy way. Little subtle touches like this much such a difference to the look and feel of a site.

Because my poor english I don't understand the appearence of your buttons. But you can change the appearance of the buttons by creating a new UI class. I've already done another ButtonUI class for our application. I copy hier, just to see an example without comments because of the language for the javadoc is not english. It follows the appearance of the Metal L&F, the flat style.
public class CoreButtonUI
extends BasicButtonUI
public CoreButtonUI() { }
private final static CoreButtonUI buttonUI = new CoreButtonUI();
private boolean defaults_initialized = false;
protected int dashedRectGapX;
protected int dashedRectGapY;
protected int dashedRectGapWidth;
protected int dashedRectGapHeight;
protected Color focusColor;
public static ComponentUI createUI(JComponent jcomponent)
return buttonUI;
public void installDefaults(AbstractButton button)
super.installDefaults(button);
if (!defaults_initialized)
String pp = getPropertyPrefix();
focusColor = UIManager.getColor(pp + "focus");
dashedRectGapX = UIManager.getInt(pp + "dashedRectGapX");
dashedRectGapY = UIManager.getInt(pp + "dashedRectGapY");
dashedRectGapWidth = UIManager.getInt(pp + "dashedRectGapWidth");
dashedRectGapHeight = UIManager.getInt(pp + "dashedRectGapHeight");
defaults_initialized = true;
public void uninstallDefaults(AbstractButton button)
super.uninstallDefaults(button);
defaults_initialized = false;
protected void paintButtonPressed(Graphics g, AbstractButton abstractbutton)
setTextShiftOffset();
protected void paintFocus(Graphics g, AbstractButton b, Rectangle viewRect, Rectangle textRect, Rectangle iconRect)
JButton button = (JButton)b;
int width = b.getWidth();
int height = b.getHeight();
if (!button.isRolloverEnabled())
g.setColor(focusColor);
BasicGraphicsUtils.drawDashedRect(g, dashedRectGapX, dashedRectGapY,
width - dashedRectGapWidth, height - dashedRectGapHeight);

Menus in Swing

How do you respond to menu events in Swing?

you add an action listener to the menu ... look up the swing help thread or the doc for ActionListener

Animated gif on createCustomCursor

Hello All,
I am trying to show an animated gif on one of my custom cursors using :
Toolkit tk = Toolkit.getDefaultToolkit();
try{
myFrame.setCursor(
tk.createCustomCursor(ImageIO.read(this.getClass().getResourceAsStream("test.gif")),new Point(15,15),"MyCursor" ) );
catch(Exception e){}But i always see a static image for that gif.
And when i try to use the same Image to show it on a JLabel something like this :
ImageIcon ii = new ImageIcon(this.getClass().getResource("test.gif"));
JLabel label3 = new JLabel(ii);I see the animated image here.
Can someone help in showing the animated gif on the customcursor.
I have tried using the below discussion for reference but it didnt help for animated images.
http://forums.sun.com/thread.jspa?threadID=267944
Thanks for your time.

Hello,
But i always see a static image for that gif.[http://java.sun.com/javase/6/docs/api/java/awt/Toolkit.html#createCustomCursor(java.awt.Image,%20java.awt.Point,%20java.lang.String)]
Note that multi-frame images are invalid and may cause this method to hang.--------
Here is another approach:
import java.awt.*;
import java.awt.event.*;
import java.net.*;
import javax.swing.*;
class AnimatedCursorTest {
private javax.swing.Timer animator;
private JButton button;
private Toolkit tk    = Toolkit.getDefaultToolkit();
private Cursor[] list = new Cursor[3];
private URL url00 = getClass().getResource("32x32_00.png");
private URL url01 = getClass().getResource("32x32_01.png");
private URL url02 = getClass().getResource("32x32_02.png");
private Point p   = new Point(0,0);
public JComponent makeUI() {
    list[0] = tk.createCustomCursor(tk.createImage(url00), p, "00");
    list[1] = tk.createCustomCursor(tk.createImage(url01), p, "01");
    list[2] = tk.createCustomCursor(tk.createImage(url02), p, "02");
    animator = new javax.swing.Timer(100, new ActionListener() {
      private int counter = 0;
      public void actionPerformed(ActionEvent e) {
        button.setCursor(list[counter]);
        counter = (counter<list.length-1)?counter+1:0;
    button = new JButton(new AbstractAction("Start") {
      public void actionPerformed(ActionEvent e) {
        JButton b = (JButton)e.getSource();
        if(animator.isRunning()) {
          b.setText("Start");
          animator.stop();
        }else{
          b.setText("Stop");
          animator.start();
    button.setCursor(list[0]);
    JPanel p = new JPanel(new BorderLayout());
    p.add(button);
    p.setBorder(BorderFactory.createEmptyBorder(5,5,5,5));
    return p;
public static void main(String[] args) {
    EventQueue.invokeLater(new Runnable() {
      public void run() { createAndShowGUI(); }
public static void createAndShowGUI() {
    JFrame frame = new JFrame();
    frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
    frame.getContentPane().add(new AnimatedCursorTest().makeUI());
    frame.setSize(320,240);
    frame.setLocationRelativeTo(null);
    frame.setVisible(true);
}

"File not found" error when I try to render an animated menu (on mac) Encore CS4

I'm making a dvd with at least 2 animated menus. It means that I have a 1 movie in the background of each menu. Over my background, I have 3 thumbnail buttons which contain a small piece of movie animated movie too. When I try to to view my menus, in order to see the animation in the background and in the thumbnails I need to render the animation through File - Render - Motion menus.
The problem is that it works for the first menu but then when I continue my navigation to the second menu that has animation in background and thumbnails too, if I choose Render Motion menus,after 3/4 of the rendering it says "file not found" even if all the files are well in place in their folders.
Does anyone would have an idea of how to resolve this stupid problem that prevents me to burn my project on a DVD since the same errors will appear during the burning process (I use a mac with Encore CS4). Is it a bug? What are the solutions? Thanks for answering.
Steven.

SteveDVD,
The use of the .WMV was because that was part of the Library .EM template. I would not anticipate problems with other formats, so long as they are supported and the same for all of your Menus in the Project.
If you have done several Motion Menu Renderings, you might want to clear Encore's Media Cache, just in case it is still referencing previous Render files.
And yes, the re-Importation should yield the same result as Linking/re-Linking.
Unfortunately, I do not have CS4, so I can't test this for you. There do seem to be a few real Bugs in the various CS4 programs, and maybe this is one?
That "File Not Found" rings a bell in my feeble brain. Seems that there was a post on that, but I do not remember it being related to Motion Menus. Maybe search will yield something of use.
Good luck,
Hunt

Synchronizing sound and animation

Hi All..
I have an animation of a swinging sign that is accompanied by a squeaking/swinging sound that is loaded externaly.. What I would like to do is go a step further and synchrinize the sound with the swinging sign.. Can someone please point me in a direction of where I should look? I've seen some tutorials about synking imported sound with animation - but is there a way to also synk an external sound? Thanks so much ahead of time!

you can't sync a loaded sound and animation unless you load your sound BEFORE your animation appears. or, at least, before the part of the animation that needs sound appears.
so, either don't load a sound that needs to be sync'd or use code to ensure loading is complete before the corresponding animation is displayed.

Commerical release with the iDVD menus

Does anyone know if the annimated menus that you use in iDVD are ok to use in commerical releases? in other words, are they freeware?
I plan to release a feature film / DVD using an apple animated menus. BTW, anyone know how to get rid of the apple symbol at the bottom right?
mark

Hi
As far as I know it's OK
Loggo. Go up to iDVD preferences (under iDVD menu)
Here You can select Show loggor or Hide it.
information for Apple Legal is at http://www.apple.com/legal/contacts.html
Yours Bengt W

Menus that animate turn white after 15 seconds

I've spent some time trying to resolve this issue with animated menus that turn white after so many seconds. I'm on a Vista, Core 2 Quad, Gateway, 4 gigs of ram; and it's doing well with CS4, but this issue has me stumped. Static menus are working fine. I even tried rendering the animated menus also, but didn't help.
Does anyone have a simple answer to this?
Thank you,
LB47

Hi Hunt,
After I wrote you this morning, I tried again to work with the Animated Film Menu. I was able to eliminate the white problem by making the audio track playing the same length as the Film Menu Animation which was 16 sec.
The original problem was that I was using the full length music track from that video clip. Instead I exported it to the 16 sec. length of the Film Menu Animation. Afterwards I did render it, and that went quickly.
Now that was working as programmed in the Preview Mode; however, after I made the DVD, it only played once and after the 16 sec interval - it totally stopped and went out of DVD play mode.
In another test before letting the DVD play thru the 16 sec interval, I checked the links and they all work fine, each one bringing me back to the menu and each time the animation played with music in the background fine. But after that interval, it stopped playing and jumped out of the DVD mode again, showing me the DVD Machines Icon which happens to be Panasonic. I tried this twice by making 2 DVD's.
That’s the latest update for now,
...hope this helps to eventually resolve this problem.
Layne

Animations, Themes in DVD Studio Pro 2 Stopped Working! HELP!

Hey All,
I upgraded to 10.4 and did all the necessary updates, including pro app support. now DVD Studio Pro 2 is no longer displaying any type of Animation. Whether it is a movie file or Theme Animation, all I get is a black screen in preview, Canvas and Final Burn. It has totally hindered my ability to create any type of animated menus. I've checked DVDSP2's packages and all the movie files are there and work fine in QT but not in DVDSP2. I need some serious DVDSP2 genius to help!
Thanks!
PowerMac Dual G4 1.2 - 1.5 GB RAM - GeForce 4 Ti Card - Quicktime 7 Pro Mac OS X (10.4.6)

I wasn't going to say anything, but, some people on these boards, (having simalar issues) had to wipe there drives and reinstall, before everything went back to normal.
I just didn't want to have you go that far, unless everything else failed and it's beginning to look that way.
I personally, when a major upgrade to the OS occurs, wipe my drive, just so there is no strange behavior with my application and gives me a chance get rid of all the unseen trash in the background, (that can cause problems) which are invisible to the user, (I do this about once a year.)
G5 Quad Core 2.5GHz 6GB RAM Mac OS X (10.4.6) [storage] X RAID's : [capture] Io : [decks] Betacam SP, S-VHS, DSR-11

How do i make this page adapt to all screen sizes???

if i copy and paste my index code can someone please tell me if theres anything i can add so it will adapt to all screen sizes??
<!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>Nicola Campbell Photography</title>
<style type="text/css">
#apDiv1 {
          position:absolute;
          width:1001px;
          height:170px;
          z-index:1;
          left: 438px;
          top: 221px;
#navbar {
          height: 40px;
          width: 900px;
          margin-right: auto;
          margin-left: auto;
          border-top-style: none;
          border-right-style: none;
          border-bottom-style: none;
          border-left-style: none;
</style>
<script src="js/modernizr-2.5.2-respond-1.1.0.min.js" type="text/javascript"></script>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery.flexslider-min.js" type="text/javascript"></script>
<script src="js/jquery.mousewheel.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/flexslider.css" rel="stylesheet" type="text/css" />
<script type="text/xml">

</script>
<style type="text/css">
#apDiv2 {
          position:absolute;
          width:901px;
          height:49px;
          z-index:2;
          left: 487px;
          top: 51px;
          text-align: center;
          color: #FF99FF;
          font-size: 80px;
          font-family: HaloHandletter;
#apDiv3 {
          position:absolute;
          width:409px;
          height:56px;
          z-index:3;
          left: 768px;
          top: 96px;
          color: #999999;
          font-family: "Adobe Garamond Pro";
          font-size: 24px;
#apDiv2 div {
          font-size: 100px;
          font-family: HaloHandletter;
          color: #999999;
#apDiv4 {
          position:absolute;
          width:901px;
          height:449px;
          z-index:4;
          left: 451px;
          top: 202px;
#apDiv5 {
          position:absolute;
          width:848px;
          height:152px;
          z-index:11;
          left: 433px;
          top: 201px;
#apDiv6 {
          position:absolute;
          width:200px;
          height:115px;
          z-index:5;
          left: 1250px;
          top: 138px;
#apDiv7 {
          position: absolute;
          width: 891px;
          height: 42px;
          z-index: 5;
          left: 552px;
          top: 174px;
#apDiv8 {
          position:absolute;
          width:48px;
          height:50px;
          z-index:6;
          left: 102px;
          top: 51px;
#apDiv9 {
          position:absolute;
          width:49px;
          height:51px;
          z-index:7;
          left: 152px;
          top: 51px;
#apDiv10 {
          position:absolute;
          width:49px;
          height:49px;
          z-index:8;
          left: 202px;
          top: 51px;
#apDiv11 {
          position:absolute;
          width:52px;
          height:52px;
          z-index:9;
          left: 252px;
          top: 51px;
</style>
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
<meta name="Description" content="Welcome to Nicola Campbell Photography. I am based in Lancashire and specialise in Wedding Photography." />
<meta name="viewport" content="width=device-width" />
<link href="untitled.css" rel="stylesheet" type="text/css" />

<link href="iphone.css" rel="stylesheet" type="text/css" media="only screen and (max-width:320px)" />

<link href="ipad.css" rel="stylesheet" type="text/css" media="only screen and (min-width:321px) and (max-width:768px)" />

<link href="desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width:769px)" />
<style type="text/css">
#apDiv12 {
          position:absolute;
          width:1013px;
          height:648px;
          z-index:1;
          left: 321px;
          top: 299px;
</style>
</head>
<body onload="MM_preloadImages('navbaroriginalroll_r1_c1.jpg','navbaroriginalroll_r1_c2.jpg','n avbaroriginalroll_r1_c5.jpg','navbaroriginalroll_r1_c6.jpg','navbaroriginalroll_r1_c7.jpg' ,'navbaroriginalroll_r1_c8.jpg','navbar_r1_c4.jpg')">
<div id="apDiv2">
<div align="center">nicola campbell</div>
</div>
<div id="apDiv3">P H O T O G R A P H Y</div>
<div id="apDiv7"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('navbar','','navbaroriginalroll_r1_c1.jpg',1)"><img src="navbaroriginal_r1_c1.jpg" alt="c1" name="navbar" width="111" height="40" border="0" id="navbar2" /></a><a href="Aboutme.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','navbaroriginalroll_r1_c2.jpg',1)"><img src="navbaroriginal_r1_c2.jpg" name="Image13" width="111" height="40" border="0" id="Image13" /></a><a href="Gallery.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image21','','navbaroriginalroll_r1_c5.jpg',1)"><img src="navbaroriginal_r1_c5.jpg" alt="c5" name="Image21" width="111" height="40" border="0" id="Image21" /></a><a href="Blog.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image22','','navbaroriginalroll_r1_c6.jpg',1)"><img src="navbaroriginal_r1_c6.jpg" alt="c6" name="Image22" width="111" height="40" border="0" id="Image22" /></a><a href="ContactMe.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image23','','navbaroriginalroll_r1_c7.jpg',1)"><img src="navbaroriginal_r1_c7.jpg" alt="c7" name="Image23" width="111" height="40" border="0" id="Image23" /></a><a href="Clients.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image24','','navbaroriginalroll_r1_c8.jpg',1)"><img src="navbaroriginal_r1_c8.jpg" alt="c8" name="Image24" width="111" height="40" border="0" id="Image24" /></a><a href="Weddings.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image25','','navbar_r1_c4.jpg',1)"><img src="navbar_r1_c41.jpg" alt="" name="Image25" width="111" height="40" border="0" id="Image25" /></a></div>
<div id="apDiv5">
<script type="text/javascript">
// BeginOAWidget_Instance_2827522: #OAWidget
$(window).load(function() {
      $('#slider').flexslider({
              namespace: "flex-",             //{NEW} String: Prefix string attached to the class of every element generated by the plugin
    selector: ".slides > li",       //{NEW} Selector: Must match a simple pattern. '{container} > {slide}' -- Ignore pattern at your own peril
      animation: "slide",
             easing: "swing",               //{NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
      direction: "horizontal",   //String: Select the sliding direction, 'horizontal' or 'vertical'
    reverse: false,                 //{NEW} Boolean: Reverse the animation direction
    animationLoop: false,             //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
    smoothHeight: true,            //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode
      slideshow: true,                //Boolean: Animate slider automatically
      slideshowSpeed: 5000,           //Integer: Set the speed of the slideshow cycling, in milliseconds
      animationSpeed: 600,         //Integer: Set the speed of animations, in milliseconds
      initDelay: 0,                   //{NEW} Integer: Set an initialization delay, in milliseconds
      randomize: false,               //Boolean: Randomize slide order
             useCSS: true,                   //{NEW} Boolean: Slider will use CSS3 transitions if available
      touch: true,                    //{NEW} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices
       video: false,                   //{NEW} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches
      directionNav: true,             //Boolean: Create navigation for previous/next navigation? (true/false)
      controlNav: true,               //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
      keyboard: true,              //Boolean: Allow slider navigating via keyboard left/right keys
      mousewheel: false,              //Boolean: Allow slider navigating via mousewheel
      prevText: "Previous",           //String: Set the text for the "previous" directionNav item
      nextText: "Next",               //String: Set the text for the "next" directionNav item
      pausePlay: false,               //Boolean: Create pause/play dynamic element
      pauseText: "Pause",             //String: Set the text for the "pause" pausePlay item
      playText: "Play",               //String: Set the text for the "play" pausePlay item
      startAt: 0,                //Integer: The slide that the slider should start on. Array notation (0 = first slide)
      pauseOnAction: true,            //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
      pauseOnHover: true,            //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
      start: function(){},            //Callback: function(slider) - Fires when the slider loads the first slide
            controlsContainer: "",          //Selector: Declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is                                                             not found, the default action will be taken.
       manualControls: "",             //Selector: Declare custom control navigation. Example would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
       // Carousel Options
    itemWidth: 0,                   //{NEW} Integer: Box-model width of individual carousel items, including horizontal borders and padding.
    itemMargin: 10,                  //{NEW} Integer: Margin between carousel items.
    minItems: 0,                    //{NEW} Integer: Minimum number of carousel items that should be visible. Items will resize fluidly when below this.
    maxItems: 0,                    //{NEW} Integer: Maxmimum number of carousel items that should be visible. Items will resize fluidly when above this limit.
    move: 0,                        //{NEW} Integer: Number of carousel items that should move on animation. If 0, slider will move all visible items.
            before: function(){},           //Callback: function(slider) - Fires asynchronously with each slider animation
      after: function(){},            //Callback: function(slider) - Fires after each slider animation completes
      end: function(){}               //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
// EndOAWidget_Instance_2827522
</script>
<script type="text/javascript">
// BeginOAWidget_Instance_2827522: #OAWidget
$(window).load(function() {
      $('#slider').flexslider({
              namespace: "flex-",             //{NEW} String: Prefix string attached to the class of every element generated by the plugin
    selector: ".slides > li",       //{NEW} Selector: Must match a simple pattern. '{container} > {slide}' -- Ignore pattern at your own peril
      animation: "slide",
             easing: "swing",               //{NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
      direction: "horizontal",   //String: Select the sliding direction, 'horizontal' or 'vertical'
    reverse: false,                 //{NEW} Boolean: Reverse the animation direction
    animationLoop: false,             //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
    smoothHeight: true,            //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode
      slideshow: true,                //Boolean: Animate slider automatically
      slideshowSpeed: 5000,           //Integer: Set the speed of the slideshow cycling, in milliseconds
      animationSpeed: 600,         //Integer: Set the speed of animations, in milliseconds
      initDelay: 0,                   //{NEW} Integer: Set an initialization delay, in milliseconds
      randomize: false,               //Boolean: Randomize slide order
             useCSS: true,                   //{NEW} Boolean: Slider will use CSS3 transitions if available
      touch: true,                    //{NEW} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices
       video: false,                   //{NEW} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches
      directionNav: true,             //Boolean: Create navigation for previous/next navigation? (true/false)
      controlNav: true,               //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
      keyboard: true,              //Boolean: Allow slider navigating via keyboard left/right keys
      mousewheel: false,              //Boolean: Allow slider navigating via mousewheel
      prevText: "Previous",           //String: Set the text for the "previous" directionNav item
      nextText: "Next",               //String: Set the text for the "next" directionNav item
      pausePlay: false,               //Boolean: Create pause/play dynamic element
      pauseText: "Pause",             //String: Set the text for the "pause" pausePlay item
      playText: "Play",               //String: Set the text for the "play" pausePlay item
      startAt: 0,                //Integer: The slide that the slider should start on. Array notation (0 = first slide)
      pauseOnAction: true,            //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
      pauseOnHover: true,            //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
      start: function(){},            //Callback: function(slider) - Fires when the slider loads the first slide
            controlsContainer: "",          //Selector: Declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is                                                             not found, the default action will be taken.
       manualControls: "",             //Selector: Declare custom control navigation. Example would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
       // Carousel Options
    itemWidth: 0,                   //{NEW} Integer: Box-model width of individual carousel items, including horizontal borders and padding.
    itemMargin: 0,                  //{NEW} Integer: Margin between carousel items.
    minItems: 0,                    //{NEW} Integer: Minimum number of carousel items that should be visible. Items will resize fluidly when below this.
    maxItems: 0,                    //{NEW} Integer: Maxmimum number of carousel items that should be visible. Items will resize fluidly when above this limit.
    move: 0,                        //{NEW} Integer: Number of carousel items that should move on animation. If 0, slider will move all visible items.
            before: function(){},           //Callback: function(slider) - Fires asynchronously with each slider animation
      after: function(){},            //Callback: function(slider) - Fires after each slider animation completes
      end: function(){}               //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
// EndOAWidget_Instance_2827522
</script>
<div id="main-container">
    <p> </p>
    <div id="main" class="wrapper clearfix">
      
      <div id="container">
        <div id="slider" class="flexslider">
          <ul class="slides">
            <li> <img src="hollie.jpg" width="500" height="600" /> </li>
            <li> <img src="slider2.jpg" width="500" height="600" /> </li>
            <li> <img src="slider3.jpg" width="500" height="600" /> </li>
            <li> <img src="slider8.jpg" width="500" height="600" /> </li>
            <li> <img src="slider4.jpg" width="500" height="600" /> </li>
            <li> <img src="slider5.jpg" width="500" height="600" /> </li>
            <li> <img src="slider6.jpg" width="500" height="600" /> </li>
            <li> <img src="slider1.jpg" width="500" height="600" /> </li>
          </ul>
        </div>
        <div id="carousel" class="flexslider" style="display:none;">
          <ul class="slides">
            <li> <img src="hollie.jpg" width="500" height="600" /> </li>
            <li> <img src="slider2.jpg" width="500" height="600" /> </li>
            <li> <img src="slider3.jpg" width="500" height="600" /> </li>
            <li> <img src="slider8.jpg" width="500" height="600" /> </li>
            <li> <img src="slider4.jpg" width="500" height="600" /> </li>
            <li> <img src="slider5.jpg" width="500" height="600" /> </li>
            <li> <img src="slider6.jpg" width="500" height="600" /> </li>
            <li> <img src="slider1.jpg" width="500" height="600" /> </li>
          </ul>
        </div>
      </div>
    </div>
    
</div>

</div>

<div id="apDiv8"><a href="https://www.facebook.com/nicola.shulmancampbell?fref=ts"><img src="Retro-Facebok-Rounded-128.png" width="48" height="48" /></a></div>
<div id="apDiv9"><img src="Retro-Flickr-Rounded-128.png" width="48" height="48" /></div>
<div id="apDiv10"><img src="Retro-Tumblr-Rounded-128.png" width="48" height="48" /></div>
<div id="apDiv11"><a href="https://twitter.com/nicola_shulman"><img src="Retro-Twitter-Rounded-128.png" width="48" height="48" /></a></div>
<script type="text/javascript">
$(window).load(function() {
      $('#slider').flexslider({
              namespace: "flex-",             //{NEW} String: Prefix string attached to the class of every element generated by the plugin
    selector: ".slides > li",       //{NEW} Selector: Must match a simple pattern. '{container} > {slide}' -- Ignore pattern at your own peril
      animation: "slide",
             easing: "swing",               //{NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
      direction: "horizontal",   //String: Select the sliding direction, 'horizontal' or 'vertical'
    reverse: false,                 //{NEW} Boolean: Reverse the animation direction
    animationLoop: false,             //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
    smoothHeight: true,            //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode
      slideshow: true,                //Boolean: Animate slider automatically
      slideshowSpeed: 5000,           //Integer: Set the speed of the slideshow cycling, in milliseconds
      animationSpeed: 600,         //Integer: Set the speed of animations, in milliseconds
      initDelay: 0,                   //{NEW} Integer: Set an initialization delay, in milliseconds
      randomize: false,               //Boolean: Randomize slide order
             useCSS: true,                   //{NEW} Boolean: Slider will use CSS3 transitions if available
      touch: true,                    //{NEW} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices
       video: false,                   //{NEW} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches
      directionNav: true,             //Boolean: Create navigation for previous/next navigation? (true/false)
      controlNav: true,               //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
      keyboard: true,              //Boolean: Allow slider navigating via keyboard left/right keys
      mousewheel: false,              //Boolean: Allow slider navigating via mousewheel
      prevText: "Previous",           //String: Set the text for the "previous" directionNav item
      nextText: "Next",               //String: Set the text for the "next" directionNav item
      pausePlay: false,               //Boolean: Create pause/play dynamic element
      pauseText: "Pause",             //String: Set the text for the "pause" pausePlay item
      playText: "Play",               //String: Set the text for the "play" pausePlay item
      startAt: 0,                //Integer: The slide that the slider should start on. Array notation (0 = first slide)
      pauseOnAction: true,            //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
      pauseOnHover: true,            //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
      start: function(){},            //Callback: function(slider) - Fires when the slider loads the first slide
            controlsContainer: "",          //Selector: Declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is                                                             not found, the default action will be taken.
       manualControls: "",             //Selector: Declare custom control navigation. Example would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
       // Carousel Options
    itemWidth: 0,                   //{NEW} Integer: Box-model width of individual carousel items, including horizontal borders and padding.
    itemMargin: 10,                  //{NEW} Integer: Margin between carousel items.
    minItems: 0,                    //{NEW} Integer: Minimum number of carousel items that should be visible. Items will resize fluidly when below this.
    maxItems: 0,                    //{NEW} Integer: Maxmimum number of carousel items that should be visible. Items will resize fluidly when above this limit.
    move: 0,                        //{NEW} Integer: Number of carousel items that should move on animation. If 0, slider will move all visible items.
            before: function(){},           //Callback: function(slider) - Fires asynchronously with each slider animation
      after: function(){},            //Callback: function(slider) - Fires after each slider animation completes
      end: function(){}               //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
// EndOAWidget_Instance_2827522
</script>
</body>
</html>

APDivs cannot be resized.
APDivs in primary layouts won't work in Responsive Web Design.
APDivs are a very poor layout method.
For this reason, Adobe removed APDivs from Dreamweaver CC.
Example of Fluid Grid Layout with floats & margins, no APDivs required.
http://alt-web.com/FluidGrid/Fluid2.html
Nancy O.

Features I would very much like to see in Flash CS5

Just a preface: I'm coming at this from the perspective of a professional Flash character animator. I've worked on two TV shows and one big-budget online virtual world/game and I've been using Flash professionally since MX 2004. I've also written a lot of JSFL commands and done a little actionscript programming (I used to be a software engineer, so the programming comes pretty maturally to me).
So with that said, here are some of the things that I'd really like to see in the next version of Flash, approximately in order from more to les important:
3. Stability and user friendliness. Please, guys, spend a little more time on polish and leave off the one or two extra cool features that you were thinking about throwing in.
13. Color management. I can't emphasize this one enough. COLOR MANAGEMENT! Take a look at Toon Boom Studio for what I'm talking about. Particularly in large projects, the ability to have a real color palette, rather than just having each shape have an RGBA value, would be incredibly useful. That way if I decide I don't like the color of a character's shirt I could just change the shirt color palette entry and it would automatically update every shape in the file that used that palette entry. An extra bonus, though less important, would be to be able to control it from Actionscript -- to be able to change a palette entry dynamically at run-time.
5. non-affine transforms for symbols. Particularly, we want trapezoidal/perspective skew! I've heard SO many people talk about wanting this. I was hoping that the 3D stuff in CS4 would allow it, but no such luck. While it's theoretically possible the controls just aren't set up to allow it.
1. Make EVERYTHING in the Flash authoring environment scriptable. Currently there are a number of things that can be neither scripted nor given a keyboard shortcut, (for instance the onionskinning controls).
2. Make Flash remember its maximized status from the previous session (this is a problem in many Adobe products).
4. Real hardware 3d acceleration.
6. Refine the JSFL API to be more thorough and consistent (see also #1). Make it so that everything you can do in JSFL happens in a way that makes sense. For instance, a couple problems I had recently: delete a shape from the stage and then draw a new one with Path.makeShape() and the new shape is created as if the old one were still there (with extra vertices at edge intersections); and Path.makeShape() won't create cubic paths -- it automatically converts cubic contours to quadrilateral ones.
7. Speaking of types of paths: Make the distinction between quadrilateral and cubic paths clearer to the user. Most people I talk to don't have any idea what the difference is, or that cubic paths are likely to produce more vertices than they expect in the final SWF. In fact, I think you should consider ditching the distinction entirely, at least from the user's perspective. Make every path in the authoring environment cubic, and just convert them to quadrilateral (if you must) on export. This'll relieve a lot of annoyance from users unexpectedly finding that their shape they just created very frugally suddenly has three times as many vertices.
8. Make bones work better on raw shapes. In fact, make them work more like Maya: each bone should affect each vertex to a degree decidable by the user. Currently bones affect each vertex either 0% or 100%, which means that, for instance, it's nearly impossible to get a smoothly curving snake.
9. Add at least one new fill style: we have radial blending, but the major one we're missing is the OTHER kind of radial -- with rays shooting our from a center. Perhaps less realistically, I can't tell you how much it would rock to be able to use a path-based color blend -- where the blend actually follows an arbitrary path (like what you can do in Synfig -- www.synfig.org).
10. Add precision to the stage. Currently it's very hard to position things when zoomed in close, and display artifacts are show up on curves, where they get flattened out for no apparent reason. I think the display artifacts are new to CS4, so perhaps it's just a bug that needs to be worked out in the new display engine? But the current situation is a real pain -- where any symbol that's created relatively small will unavoidably contain rendering and positioning issues.
11. A feature that's been missing (and sorely missed by TV animators) since Flash 8 is the ability to smoothly copy and paste from Flash to Illustrator. There's absolutely no reason this shouldn't be an easy task, and I'm still confused as to why it disappeared from MX 2004 to Flash 8. It's extremely useful for applying art brushes to paths or animating 3D door swings in Illustrator and then bringing the art back into Flash.
12. For that matter, what about art brushes in Flash? I realize they would be heavy in the SWF -- either in rendering time or in space used -- but you've already got stipled brushtrokes, and aren't those just as heavy? Art brushes would be INCREDIBLY useful to animators and designers.
14. Engage with the people who use Flash. Get some dialogue going on between users and developers. Most Flash users I meet (admittedly mostly character animators and character rig builders/designers) have very specific wishes for Flash, and for the most part they coincide very nicely. Yet release after release we don't see any of the changes, features, or bugfixes, that seem the most obvious.

Hi there,
I can assure you that the wishlist is monitored by our team. It does not go into a black hole or shredder - the messages are read by the Flash team, and forwarded as needed, and non-duplicate/legitimate bugs are filed.
Some of the things on your list are known. I'll go through the items, and encourage you to send some messages along these lines (I'd recommend one submission per item, but this is up to you).
* Stability and performance: This is definitely still being worked on. You'll see a lot of that work in the Flash 10.0.2 update, and I can assure you it's still a priority.
* Color management improvements: We do have bugs in this area filed, I believe very similar or the same as you have below, but please feel free to your ideas in this area if you'd like to ensure they're covered.
* Transforms for symbols (3D), and hardware acceleration: Should submit this to the Flash Player wishform (which is external, enabling votes) - if they support it, that support can be transferred to the authoring tool. http://bugs.adobe.com/flashplayer/
* Keyboard shortcuts and JSAPI: Please submit any specific requests (exact areas that are missing). For the keyboard shortcuts for UI where they cannot yet be assigned, this would be a separate request (I'm not sure about the feasibility of buttons as opposed to menu items).
* Cubic vs quadratic paths: This is known and is a difference between the authoring tools/UI and Flash Player, and it's the reason for "10" (more precision to the stage). It's not really about artifacts or precision, but about how Flash Player renders curves in general. If you draw in an AS2 document, you won't see the change from curves to flat edges. If you export that document to the Player in AS2, you'll see the "artifacts" you see on the stage in AS3 documents. This is a known issue of the authoring UI and drawing tools, and making this better is really really high priority in my books too.
* Bones: Many issues are known and presently being worked on.
* Fill style: Please feel free to file this enhancement request, I'm not sure if it has been requested.
* Cross-product copy/paste (Illustrator): This is known, but if you have some specific issues or workflows you've encountered and want to make sure its rectified, please send that along.
* Brushes: Definitely requested/known. I'd love to see that too, in particular.
* Engaging with users: Definitely covered too! That's why we have betas (which do include prominent animators), why I hang out here, and so on. We do have designers (I went to art school) and animators on the team too. I know how it feels though - many of the features I'd most like to see can't be added yet, as Flash covers such a broad user base from coders to animators (many releases have left the coders feeling the same way). All I can say is please submit your feedback to the wishlist, and continue to voice up about what you'd most like to see in Flash with the specifics.
Great feedback!
Thanks.

Help needed: Adding 2nd widget makes 1st widget stop working

Dear all,
I use 1 widget, jQuery Cycle, and it was working fine, until i added a 2nd one, FlexSlider.
How can i make both working on the same page?
My website is : VINDSTERS - Wij Vinden wat u zoekt! and please see my coding below.
Thanks a lot!
<!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">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src=
"main slide js/smoothscroll.js"></script>
</style>
<script type="text/xml">

</script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="main slide js/jquery-1.6.min.js" type="text/javascript"></script>
<script src="main slide js/jquery.cycle.all.js" type="text/javascript"></script>
<script src="gevonden door js/modernizr-2.5.2-respond-1.1.0.min.js" type="text/javascript"></script>
<script src="gevonden door js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="gevonden door js/jquery.flexslider-min.js" type="text/javascript"></script>
<script src="gevonden door js/jquery.mousewheel.js" type="text/javascript"></script>
<script src="gevonden door js/jquery.easing.1.3.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
    $("#cont2").hide();
$('#showMenu').click(function()
$("#cont2").slideToggle('slow');
$(document).ready(function() {
$('.closeMenu').click(function()
$("#cont2").slideUp('slow');
</script>
<style type="text/css">
/* BeginOAWidget_Instance_2559022: #slideshow_header */
#slideshow_header {
    padding: 0px;
margin:0;
#slideshow_header-caption{
padding:0;
margin:0;
#slideshow_header img, #slideshow_header div {
    padding: 0px;
    background-color: #ffffff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
    margin: 0;
/* EndOAWidget_Instance_2559022 */
</style>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/flexslider.css" rel="stylesheet" type="text/css" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<b><title>VINDSTERS - Wij Vinden wat u zoekt!</title></b>
<meta name="Description" content="Vindsters.nl Wij vinden wat u zoekt" />
<meta name="keywords" content="vindsters,vindsters.nl,tweedehands, zoeken, design, vintage, vinden, service, meubels, kleding, schoenen" />
<link href="icons/logo-vindsters-square.gif" rel="shortcut icon " />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="#"><h1><a href="#" id="showMenu">MENU
</a> </div>
<div id="cont2" class="hidden">
    <ul>
<li>s
    <h1><a href="#fadein" class="closeMenu">HOME</a></h1>
</li>
<li>
    <h1><a href="#info" class="closeMenu">HOE WERKT HET?</a></h1>
</li>
<li>
    <h1><a href="#mainbox2" class="closeMenu">PRIJZEN</a></h1>
</li>
<li>
    <h1><a href="#leftcollum2" class="closeMenu">GEVONDEN DOOR...</a></h1>
</li>
<li>
    <h1><a href="#mainbox" class="closeMenu">OVER VINDSTERS</a></h1>
</li>
<li>
    <h1><a href="#footer" class="closeMenu">CONTACT & VOORWAARDEN </a></h1>
</li>
</ul>
<p> </p>
</div>
<script type="text/javascript">
// BeginOAWidget_Instance_2559022: #slideshow_header
       slideshow_headerAddCaption=true;
$(document).ready(function() {
$('#slideshow_header').cycle({
after: slideshow_headerOnCycleAfter, //the function that is triggered after each transition
autostop: false,     // true to end slideshow after X transitions (where X == slide count)
fx: 'scrollLeft,',// name of transition effect
pause: true,     // true to enable pause on hover
randomizeEffects: true, // valid when multiple effects are used; true to make the effect sequence random
speed: 1000, // speed of the transition (any valid fx speed value)
sync: true,     // true if in/out transitions should occur simultaneously
timeout: 7000, // milliseconds between slide transitions (0 to disable auto advance)
fit: true,
height:   '570px',
width:         '100%'   // container width (if the 'fit' option is true, the slides will be set to this width as well)
function slideshow_headerOnCycleAfter() {
if (slideshow_headerAddCaption==true){
$('#slideshow_header-caption').html(this.title);
// EndOAWidget_Instance_2559022
</script>
<div id="slideshow_header">
   
<img src="images/front-1.jpg" width="100%" height="500" title="" /><img src="images/front2.jpg" width="100%" height="500" title="" /></div>

<div id="slideshow_header-caption"></div>
<div id="tab">
<h4><img src="icons/start2.png" width="310" height="128" alt="button" onclick="window.open('http://vindsters.nl/vindditnu%20php%20version.php','Websonic','width=960,height=600,scroll bars=no,toolbar=no,location=no'); return false" /></h4>
</div>
<div id="part2">
    <div id="fadein">
      <h4> Hallo! </h4>
<h4> Wij zijn VINDSTERS.NL    </h4>
      <h2>Vinden word vanaf nu heel eenvoudig!</h2>
      <h2>Ben je al tijden opzoek naar iets, maar heb je geen idee waar je het moet vinden? </h2>
      <h2>Geen zin of tijd om de duizende advertenties op makrtplaats/ebay of speurders af te gaan?</h2>
      <h2>Vindsters vind alle 2de hands spullen die jij zo graag wil hebben! </h2>
      <div id='button'>
        <p><img src="icons/start2.png" width="310" height="128" alt="button" onclick="window.open('http://vindsters.nl/vindditnu%20php%20version.php','Websonic','width=960,height=600,scroll bars=no,toolbar=no,location=no'); return false" /></p></div>
    </div>
    <div id="info">
      <h4>AANVRAGEN! </h4>
      <h2>Laat ons in je aanvraag met een korte omschrijving weten wat je zoekt. </h2>
      <h2>Naar aanleiding van je aanvraag stellen onze vindsters een korte vragenlijst samen die je per email ontvangt. </h2>
      <h2>Hierin kan je heel gemakkelijk je verdere wensen aangeven. </h2>
      <h2>Alles compleet? Stuur de <br />
        vragenlijst dan naar ons terug en betaal gemakkelijk via de IDeal link in de mail.    </h2>
    </div>
        <div id="info3">
          <p><img src="images/info2.gif" width="748" height="213" /></p>
    </div>
    <div id="tab2">
      <h1>v Lees meer v</h1>
    </div>
    <div id="info2">
      <p> </p>
      <h4> </h4>
      <h4>GEVONDEN! </h4>
<h2>Zodra je vragenlijst & betaling binnen is, gaan wij voor je aan de slag! </h2>
      <h2>Binnen het afgesproken
        termijn, ontvang je per mail 3 tot 5 passende
        advertenties. </h2>
      <h2>Deze prducten worden persoonlijk door ons geselecteerd, dus je ontvangt altijd een passend aanbod! </h2>
      <h2>& mochten we onverhoopt helemaal niks kunnen vinden, dan krijg je natuurlijk je geld terug. </h2>
      <h2>Alles compleet? Stuur de vragenlijst dan naar ons terug en betaal gemakkelijk via de IDeal link in de mail.</h2>
      <p> </p>
      <h1> </h1>
    </div>
    <div id="mainbox2">
      <div id="insideright2">
        <h4>PRIJZEN</h4>
<h2>Bij VINDSTERS.NL betaal je altijd maar €5.95 per zoekopracht!      </h2>
        <h2>En succes gegarandeerd, want kunnen wij onverhoopt niet vinden wat jij zoekt?</h2>
        <h2> Dan krijg je de betaalde kosten gewoon terug!</h2>
        <p></p>
      </div>
</div>
    <div id="gevondendoor">
<h1>GEVONDEN DOOR VINDSTERS.NL</h1>
<script type="text/javascript">
// BeginOAWidget_Instance_2827522: #OAWidget
$(window).load(function() {
      $('#slider').flexslider({
     namespace: "flex-",             //{NEW} String: Prefix string attached to the class of every element generated by the plugin
    selector: ".slides > li",       //{NEW} Selector: Must match a simple pattern. '{container} > {slide}' -- Ignore pattern at your own peril
      animation: "slide",
    easing: "swing",               //{NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
      direction: "horizontal",   //String: Select the sliding direction, 'horizontal' or 'vertical'
    reverse: false,                 //{NEW} Boolean: Reverse the animation direction
    animationLoop: false,             //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
    smoothHeight: true,            //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode
      slideshow: true,                //Boolean: Animate slider automatically
      slideshowSpeed: 5000,           //Integer: Set the speed of the slideshow cycling, in milliseconds
      animationSpeed: 600,         //Integer: Set the speed of animations, in milliseconds
      initDelay: 0,                   //{NEW} Integer: Set an initialization delay, in milliseconds
      randomize: false,               //Boolean: Randomize slide order
    useCSS: true,                   //{NEW} Boolean: Slider will use CSS3 transitions if available
      touch: true,                    //{NEW} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices
       video: false,                   //{NEW} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches
      directionNav: true,             //Boolean: Create navigation for previous/next navigation? (true/false)
      controlNav: true,               //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
      keyboard: true,              //Boolean: Allow slider navigating via keyboard left/right keys
      mousewheel: false,              //Boolean: Allow slider navigating via mousewheel
      prevText: "Previous",           //String: Set the text for the "previous" directionNav item
      nextText: "Next",               //String: Set the text for the "next" directionNav item
      pausePlay: false,               //Boolean: Create pause/play dynamic element
      pauseText: "Pause",             //String: Set the text for the "pause" pausePlay item
      playText: "Play",               //String: Set the text for the "play" pausePlay item
      startAt: 0,                //Integer: The slide that the slider should start on. Array notation (0 = first slide)
      pauseOnAction: true,            //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
      pauseOnHover: true,            //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
      start: function(){},            //Callback: function(slider) - Fires when the slider loads the first slide
   controlsContainer: "",          //Selector: Declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is                                        not found, the default action will be taken.
       manualControls: "",             //Selector: Declare custom control navigation. Example would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
       // Carousel Options
    itemWidth: 0,                   //{NEW} Integer: Box-model width of individual carousel items, including horizontal borders and padding.
    itemMargin: 10,                  //{NEW} Integer: Margin between carousel items.
    minItems: 0,                    //{NEW} Integer: Minimum number of carousel items that should be visible. Items will resize fluidly when below this.
    maxItems: 0,                    //{NEW} Integer: Maxmimum number of carousel items that should be visible. Items will resize fluidly when above this limit.
    move: 0,                        //{NEW} Integer: Number of carousel items that should move on animation. If 0, slider will move all visible items.
   before: function(){},           //Callback: function(slider) - Fires asynchronously with each slider animation
      after: function(){},            //Callback: function(slider) - Fires after each slider animation completes
      end: function(){}               //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
// EndOAWidget_Instance_2827522
</script>
<div id="main-container">
    <p><a href="http://www.woothemes.com/flexslider/">Flexslider Demo and Documentation</a></p>
    <div id="main" class="wrapper clearfix">
      
      <div id="container">
        <div id="slider" class="flexslider">
          <ul class="slides">
            <li> <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" /> </li>
            <li> <img src="images/kitchen_adventurer_lemon.jpg" /> </li>
            <li> <img src="images/kitchen_adventurer_donut.jpg" /> </li>
            <li> <img src="images/kitchen_adventurer_caramel.jpg" /> </li>
            <li> <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" /> </li>
            <li> <img src="images/kitchen_adventurer_lemon.jpg" /> </li>
            <li> <img src="images/kitchen_adventurer_donut.jpg" /> </li>
            <li> <img src="images/kitchen_adventurer_caramel.jpg" /> </li>
          </ul>
        </div>
        <div id="carousel" class="flexslider" style="display:none;">
          <ul class="slides">
            <li> <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" /> </li>
            <li> <img src="images/kitchen_adventurer_lemon.jpg" /> </li>
            <li> <img src="images/kitchen_adventurer_donut.jpg" /> </li>
            <li> <img src="images/kitchen_adventurer_caramel.jpg" /> </li>
            <li> <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" /> </li>
            <li> <img src="images/kitchen_adventurer_lemon.jpg" /> </li>
            <li> <img src="images/kitchen_adventurer_donut.jpg" /> </li>
            <li> <img src="images/kitchen_adventurer_caramel.jpg" /> </li>
          </ul>
        </div>
      </div>
    </div>
    
</div>

    </div>
    <div id="leftcollum2">
      <h1>VOORWAARDEN!</h1>
<h2>Wij houden het graag zo simpel mogelijk! </h2>
<h2><a href="voorwaarden.html">lees hier de voorwaarden</a></h2>
      <p> </p>
</div>
    <div id="rightcollum2">
      <h1>VRAAG & ANTWOORD</h1>
<h2>Heeft u vragen of suggesties. Laat het ons weten! </h2>
      <h2><a href="contact.html">Contact</a></h2>
      <h2> </h2>
    </div>
    <div id="mainbox">
      <div id="insideright">
        <h1>Over VINDSTERS.NL </h1>
        <h2>Vindsters.nl is opgericht door Anne & Lisa van Steenbergen. Twee zussen met een passie voor mooie spulletjes.</h2>
        <h2>Het speuren naar tweedehands zit ze in het bloed. Talloze meubels, vintage laarzen, oud speelgoed of designer item is in de loop der jaren aangeschaft.      En in begin 2014 werd het tijd dit deze goede neus voor het speuren te delen met andere. Het resultaat, Vindsters.nl </h2>
        <h2>Vindsters.nl is een service die het mogelijk maakt om alles te vinden wat je zoekt op het gebied van tweedehands artikelen. </h2>
        <h2>Van die ene favorite spijkerbroek die je terug wilt of die dure merkbank die je voor een prikje hoopt te scoren tot dat kastje van ikea die niet meer word gemaakt of de speelgoedbeer die je vroeger had, Vindsters.nl bied je de mogelijkheid dit eenvoudig te vinden. </h2>
        <h2>Vindsters.nl selecteerd voor jouw persoonlijk 3 tot 5 advertenties die je zoekt uit alle duizenden advertenties die er online zijn.    </h2>
      </div>
    </div>
    <div class="button2">
<img src="icons/start2.png" width="412" height="149" alt="button" onclick="window.open('http://vindsters.nl/vindditnu%20php%20version.php','Websonic','width=960,height=600,scroll bars=no,toolbar=no,location=no'); return false" /></div>
</div>
    <div id="footer">
      <h2> <a href="voorwaarden.html" target="_new" class="smoothScroll">VOORWAARDEN</a>   | <a href="contact.html" target="_new" >CONTACT</a>   | <a href="http://www.pinterest.com/vinddit/" target="_new"><img src="icons/pinterest.png" width="20" height="20" align="absbottom" /></a>    <a href="https://www.facebook.com/" target="_new"><img src="icons/fb_1.png" width="20" height="20" align="absbottom" /></a></h2>
      <p><img src="images/iDEAL_120x30_dubbel.jpg" alt="IDEAL" name="ideal" width="120" height="30" id="ideal" /></p>
    </div>
</body>
</html>

Adding to osgood's reply, you are calling four different jquery libraries as in
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src=
"main slide js/smoothscroll.js"></script>
</style>
<script type="text/xml">

</script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://vindsters.nl/main slide js/jquery-1.6.min.js" type="text/javascript"></script>
<script src="http://vindsters.nl/main slide js/jquery.cycle.all.js" type="text/javascript"></script>
<script src="http://vindsters.nl/gevonden door js/modernizr-2.5.2-respond-1.1.0.min.js" type="text/javascript"></script>
<script src="http://vindsters.nl/gevonden door js/jquery-1.7.2.min.js" type="text/javascript"></script>
This will confuse the browser no end!
My advice is to remove the last three highlighted lines to see what happens.

Animated menus in Swing?

Similar Messages

Maybe you are looking for