Reversing an animation?
Hi all,
This should be a fairly simple answer, but I just haven't been able to get it solved.
I have an object animating along a path. It animates from the first point to the last point as it should.
My question is: Without redrawing the path in reverse, how can I make that object follow along the path from the last point to the first point instead?
Here is my situation: I have a camera animating along the path and there are meant to be incoming objects animating along the same path. Although whenever I Auto Orient these objects, they will travel along that path in the same direction as the camera. I need them coming towards the camera instead.
Thanks.
Control-Click on the layer in your comp and choose Time > Time Reverse Layer.
You can also Pre-Comp that Comp and do the same thing. Control-Click on the Pre-Comp layer and choose Time > Time Reverse Layer.
Similar Messages
-
How to Play animation on Mouseover and Reverse on Mouseout?
0down votefavorite
I am trying to create a simple animated navigation bar. I want to mouseover an image and have an animation play, then when you mouseout the animation will play in reverse.
I can get the animation to play on mouseover, but as soon as I put in the mouseout code it doesn't work. I'm completely new to Edge, so if someone can give me a simple explanation on how to play/reverse an animation on mouseover/out, I would really appreciate it.
Right now I have an image, converted to a symbol, with another image (nav_on_1) nested inside. The image nested inside is animated with the label "nav_on_1_play".
My code for mouseover is below:
sym.$("nav_on_1").show();
sym.play("nav_on_1_play");first I recommend that you use mouseenter and mouseleave instead.
second: if you have a symbol that has let's say one animation you can do
on mouse enter
sym.getSymbol('symbolname').play();
on mouseleave:
sym.getSymbol('symbolname').playReverse();
you may have to add
sym.getComposition().getStage().getSymbol('symbolname').play();
sym.getComposition().getStage().getSymbol('symbolname').playReverse();
or you can put the event in stage/compositionreday
sym.getSymbol('symbolname').mouseenter(function(){
sym.getSymbol('symbolname').play();
sym.getSymbol('symbolname').mouseleave(function(){
sym.getSymbol('symbolname').play(); -
How to reverse direction of title animation
Friends,
I just downloaded motion 5 to use with FCPX titles. is it possible to use motion 5 to reverse the direction of a title animation? For example, FCPX has a certain title is shown entering from the left. I'd like it to enter from the right. Can I make the switch?
Thanks!
SteveIt looks like that one is animated by keyframes. In this case you could make the animation go right to left by reversing the keyframe order and then adjusting as needed. You will need to do this with the Emitter and the Rectangle Mask.
For the Mask:
-Change the Mask Blend Mode to Subtract.
-In the Inspector, go to the X Position and to the right of the keyframe indicator, click the downward facing arrow and select Show in keyframe editor from the contextual menu.
-In the Keyframe editor, option click the checkbox next to the Transform.Position.X channel. this will hide the other keyframes.
-Select both the keyframes for the X channel. While they are both selected right click on top of one of the keyframes and select Reverse Keyframes from the contextual menu. This will reverse the animation direction for the Mask on the text.
For the Emitter:
Basicly, do the same thing as with the Mask. Go to the keyframes for the X postion and reverse them. In this case you will need to adjust the start and end postions. The first keyframe will need to be near the right side of the canvas, and the second keyframe will need to be further away. Once you are close you can adjust the second keyframe to match the mask that wipes the text -
Hi,
I would really appreciate if you could help me because I need it to complete my Capstone Project!!
I want to accomplish the following: when you click a rectangle images come to the screen with animation and when animation stops the images stay there. Now when you click another rectangle the images that were load before are animating reverse so they go out of the screen and new images comes in.
In a sense I am not sure how to make the following: when a rectangle is pressed it plays reverse the animation of the one that was loaded, and after that it plays his animation.
I created 6 symbols that have their own animation but I am not sure what to do next.
An example: http://www.youtube.com/watch?v=tTWD9olzYKw#t=2360
Thank you in advance,
FrankCan someone modify this code so that whatever button you play, then it works. Now for example if you press button 2 it plays animation 2, but if you press button 4 it reverses the animation of 3 and not of 2 which was previously played. The button that you click should play the animation of the previously played...
sym.setVariable("current", 1);
sym.$('btn1').click(function(){
current = sym.getVariable("current");
if (current==1){
sym.getSymbol('Symbol_1').play();
sym.setVariable("current", 2);
if (current==2){
sym.getSymbol('Symbol_1').play();
sym.setVariable("current", 3);
if (current==3){
sym.getSymbol('Symbol_1').play();
sym.setVariable("current", 4);
if (current==4){
sym.getSymbol('Symbol_1').play();
sym.setVariable("current", 1);
sym.$('btn2').click(function(){
var current = sym.getVariable("current");
if (current==2){
sym.getSymbol('Symbol_1').playReverse();
sym.getSymbol('Symbol_2').play();
sym.setVariable("current", 3);
if (current==1){
sym.getSymbol('Symbol_1').playReverse();
sym.getSymbol('Symbol_2').play();
sym.setVariable("current", 2);
if (current==3){
sym.getSymbol('Symbol_1').playReverse();
sym.getSymbol('Symbol_2').play();
sym.setVariable("current", 4);
if (current==4){
sym.getSymbol('Symbol_1').playReverse();
sym.getSymbol('Symbol_2').play();
sym.setVariable("current", 1);
sym.$('btn3').click(function(){
var current = sym.getVariable("current");
if (current==3){
sym.getSymbol('Symbol_2').playReverse();
sym.getSymbol('Symbol_3').play();
sym.setVariable("current", 4);
if (current==2){
sym.getSymbol('Symbol_2').playReverse();
sym.getSymbol('Symbol_3').play();
sym.setVariable("current", 3);
if (current==4){
sym.getSymbol('Symbol_2').playReverse();
sym.getSymbol('Symbol_3').play();
sym.setVariable("current", 1);
if (current==1){
sym.getSymbol('Symbol_2').playReverse();
sym.getSymbol('Symbol_3').play();
sym.setVariable("current", 2);
sym.$('btn4').click(function(){
var current = sym.getVariable("current");
if (current==4){
sym.getSymbol('Symbol_3').playReverse();
sym.getSymbol('Symbol_4').play();
sym.setVariable("current", 1);
if (current==3){
sym.getSymbol('Symbol_3').playReverse();
sym.getSymbol('Symbol_4').play();
sym.setVariable("current", 4);
if (current==2){
sym.getSymbol('Symbol_3').playReverse();
sym.getSymbol('Symbol_4').play();
sym.setVariable("current", 3);
if (current==1){
sym.getSymbol('Symbol_3').playReverse();
sym.getSymbol('Symbol_4').play();
sym.setVariable("current", 2);
I apprecieate your time,
Frank -
Is there an animation reversal?
Simply...
If you created a intricate animation sequence going from one state from another is there a way of reversing the animation to go the other way without having to recreate it manually?
If there isn't there should be in a future beta because at the moment I'm flicking from one state transition to another to see what I did and then implement it in reverse.Paul, no matter what browser I use Safari, Fireworks or Omni I'm getting a Redirecting... white screen after logging in. I'm on a Mac but I had a quick look in Vista on Parallels and it does the same in IE, although it does do to 'The website cannot display the page'.
The redirect page address it's stuck on is http://ideas.adobe.com/ct/ADOBE/adobe_id.bix?c=DA4859AD-8934-4F93-983A-4219E2DD9275
This is obviously why I can't post anything.
Hope this helps explain. -
Synchronise symbol animation using Edge Commons
Hi All,
I've been trying to animate a PNG sequence that I created with After Effects and Fireworks using the Edge Commons parallax snippet. I'm also trying to make this responsive. I have a vague understanding of the code used so I put together a few other bits and pieces of code I found on these forums.
The effect I'd like to obtain is to scroll down and synch the animation of the symbols with the scrollbar. Ideally I'd also like to reverse the animation when scrolling down and pull in other symbols but I'm not even sure that this can be done using inline code or actually creating the reversed animation within the symbol.
I've been trying hard in the past few days but this is where I got so far ;(
https://www.dropbox.com/s/fr6ygqs16jq11fu/wedding_invite.zip
Sorry the file is pretty heavy but the png sequences aren't optimised yet.
ThanksHi Eric ,
There might be many ways to do the play and play reverse using click operation as described by you but this is what I think could be done .
We can set a variable in our compositionReady function sym.setVariable("count", 0);
Then in the click handler of the symbol we can write the following code
var x = sym.getVariable("count");
var mySymbolObject = sym.getSymbol("Symbol_1");
//Now check if you have clicked once then play otherwise play reverse .
if(x%2 == 0)
mySymbolObject.play();
else
mySymbolObject.playReverse();
x++;
// Set the value of a Symbol variable
sym.setVariable("count",x);
Please refer the attached composition . Hope it helps
Thanks
Saurav -
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">
<!--
<oa:widgets>
<oa:widget wid="2827522" binding="#OAWidget" />
</oa:widgets>
-->
</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" />
<!-- Phone -->
<link href="iphone.css" rel="stylesheet" type="text/css" media="only screen and (max-width:320px)" />
<!-- Tablet -->
<link href="ipad.css" rel="stylesheet" type="text/css" media="only screen and (min-width:321px) and (max-width:768px)" />
<!-- Desktop -->
<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><!-- #main-container -->
<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">
<!-- FlexSlider -->
<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>
<!-- #main -->
</div>
<!-- #main-container -->
</div>
<!-- #main-container -->
<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. -
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">
<!--
<oa:widgets>
<oa:widget wid="2559022" binding="#slideshow_header" />
<oa:widget wid="2559022" binding="#slideshow_1" />
<oa:widget wid="2827522" binding="#OAWidget" />
</oa:widgets>
-->
</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">
<!--All elements inside this will become slides-->
<img src="images/front-1.jpg" width="100%" height="500" title="" /><img src="images/front2.jpg" width="100%" height="500" title="" /></div>
<!--It is safe to delete this if captions are disabled-->
<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">
<!-- FlexSlider -->
<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>
<!-- #main -->
</div>
<!-- #main-container -->
</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">
<!--
<oa:widgets>
<oa:widget wid="2559022" binding="#slideshow_header" />
<oa:widget wid="2559022" binding="#slideshow_1" />
<oa:widget wid="2827522" binding="#OAWidget" />
</oa:widgets>
-->
</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. -
Is it possible to have a motion path for ribbon drawn in 3D.
http://videohive.net/item/the-three-stripes/91238
I've tried to replicate this but I have trouble in the 90 degree bends. For example I can draw a ribbon and bend it on the X,Y axis but when I want to go along the Z axis it won't let me. When I go to move path whilst looking from the Top view the draw icon is crossed out. How can I achieve a this?Shapes can only be drawn in 2D, but they can be manipulated in 3D. Here's what I'd do to create those lines.
Draw one line straight across. Adjust the width to taste. Make sure that the Start and End Caps are set to NONE. Go to the Geometry tab and view your control points. In the Properties tab, adjust your anchor point's X position by the exact number of the X position of one of your control points. To make this easier, I usually adjust the line to a near whole number.
When you've adjusted your anchor, duplicate the line. Go to the properties tab of the duplicate and adjust it's Y rotation to 90 degrees. Because the anchor is at the end of the line, the duplicate will rotate from that point making the 2 lines appear to be one bending line in 3D.
From there, just apply a write on behavior to each line where one behavior ends just as the next begins. You'll have to reverse the animation on one of the lines so that it continues to draw where the other leaves off. Then group those two lines, and dupe the group a couple of times placing them in a different position, and moving their start points a little further down the line to stagger the animation.
Andy -
Business Catalyst Architecture Template Homepage Hero Slider
I am trying to get the homepage hero slider to fade instead of the default which is a slide transition. I am using a free template offered by Business Catalyst called Architecture, and have not changed or added anything to the script. Here is the url for the template Home Page
//FlexSlider: Default Settings
$.flexslider.defaults = {
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: "fade", //String: Select your animation type, "fade" or "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: true, //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
smoothHeight: false, //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode
startAt: 0, //Integer: The slide that the slider should start on. Array notation (0 = first slide)
slideshow: true, //Boolean: Animate slider automatically
slideshowSpeed: 7000, //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,
Thanks
ChrisOkay, i figured out what it is. Might be a bug, not sure. If i create a template using dreamweaver and create editable areas, the only true editable area is the {page_content}. What's buggy is that when i download a page based on a template (page.html) through dreamweaver, it will download the page and in the code view it will show you the dreamweaver template and the editable areas you set. These cannot be changed. When you download page.html using a different FTP program, you will actually get the true contents of the page. So for example, if i enter
<p>The</p>
using BC adding a page and select a template, when downloaded through a different FTP client, the page will look like this:
<p>The</p>
When downloading through DW the page will look like the template:
<html>
<body>
<!--TemplateEdit--><!--TemplateEnd-->
more code
<p>The</p>
more template code
<!--TemplateEdit--><!--TemplateEnd-->
</body>
</html>
In the second example, you can't actually add anything in the editableAreas. Don't know why DW does that. Any ideas? -
ANN: Horizontal Scroller Magic Released
[A commercial Dreamweaver Extension]
http://www.projectseven.com/products/tools/hscroller/index.htm
Horizontal Scroller Magic enables you to instantly create
Horizontal
scrolling boxes that visually complement your page design.
They look cool,
behave like a finely tuned machine and solve some usability
and
accessibility flaws found in many DHTML or Ajax scrollers.
Automated Insertion anywhere on your page
Multiple scrollers per page
Supports flexible widths
Choose from several style themes and control configurations -
including
graphical icons or pure text
Scrolling type options include normal, looping, auto-reverse,
and animated
carousel
Edit styles using Dreamweaver's built-in CSS editing tools
Standards-conformant markup
All content accessible and visible when JavaScript is
disabled
Keyboard-enabled scrolling
Toggle feature to hide scroller controls and show all content
Mouse wheel support in modern browsers
Meets major Accessibility checkpoints
Search engine-friendly
Free Technical Support
User Guide
The PVII Team
http://www.projectseven.com
Extending Dreamweaver - Nav Systems | Galleries | Widgets
Authors: "42nd Street: Mastering the Art of CSS Design"Hi Kim,
It could be any number of things. Text contrast or frame
rate, for example.
Those are configurable so that people can set things up
optimized for their
best or worst case browser scenarios.
Al Sparber - PVII
http://www.projectseven.com
Extending Dreamweaver - Nav Systems | Galleries | Widgets
Authors: "42nd Street: Mastering the Art of CSS Design"
"kim" <[email protected]> wrote in message
news:fk64k2$3ss$[email protected]..
> Simple style flickers for me in FF2/XP
>
> PVII skrev:
>> [A commercial Dreamweaver Extension]
>>
>>
http://www.projectseven.com/products/tools/hscroller/index.htm
>>
>> Horizontal Scroller Magic enables you to instantly
create Horizontal
>> scrolling boxes that visually complement your page
design. They look
>> cool, behave like a finely tuned machine and solve
some usability and
>> accessibility flaws found in many DHTML or Ajax
scrollers.
>>
>> Automated Insertion anywhere on your page
>>
>> Multiple scrollers per page
>>
>> Supports flexible widths
>>
>> Choose from several style themes and control
configurations - including
>> graphical icons or pure text
>>
>> Scrolling type options include normal, looping,
auto-reverse, and
>> animated carousel
>>
>> Edit styles using Dreamweaver's built-in CSS editing
tools
>>
>> Standards-conformant markup
>>
>> All content accessible and visible when JavaScript
is disabled
>>
>> Keyboard-enabled scrolling
>>
>> Toggle feature to hide scroller controls and show
all content
>>
>> Mouse wheel support in modern browsers
>>
>> Meets major Accessibility checkpoints
>>
>> Search engine-friendly
>>
>> Free Technical Support
>>
>> User Guide
>>
>
> --
> Kim
> ---------------------------
>
http://www.geekministry.com
> -
ANNC: Vertical Scroller Magic Released
PVII Vertical Scroller Magic enables you to instantly create
vertical
scrolling boxes that visually complement your page design.
They look cool,
behave cool, and eliminate some major usability and
accessibility issues
inherent in many DHTML or Ajax scrollers.
Features:
-Automated Insertion anywhere on your page
-Multiple scrollers per page
-Choose from several style themes and control
configurations-including graphical icons
or pure text
-Scrolling type options include normal, looping,
auto-reverse, and animated carousel
-Edit styles using Dreamweaver's built-in
CSS editing tools
-Standards-conformant markup
-All content accessible and visible when
JavaScript is disabled
-Keyboard enabled scrolling
-Toggle feature to hide scroller controls and
show all content
-Mousewheel support in modern browsers
-Passes automated Section 508 Accessibility check
-Passes WAI Accessibility checks (Priority 3)
-Search engine-friendly
-Free Technical Support
-User Guide
{$60}
Information:
http://www.projectseven.com/products/tools/vscroller
Examples:
http://www.projectseven.com/products/tools/vscroller/vs1.htm
Demo Movie:
http://www.projectseven.com/products/tools/vscroller/media
PVII
http://www.projectseven.com
Extending Dreamweaver - Nav Systems | Galleries | Widgets
Authors: "42nd Street: Mastering the Art of CSS Design"Looks very smooth
B
www.visit-the-coqui.com/
If you are thinking of a vacation to Puerto Rico
http://gadgetgrapevine.blogspot.com
Latest gadget and other news here
"Al Sparber- PVII" <[email protected]> wrote in
message
news:fbjhhg$62e$[email protected]..
> PVII Vertical Scroller Magic enables you to instantly
create vertical
> scrolling boxes that visually complement your page
design. They look cool,
> behave cool, and eliminate some major usability and
accessibility issues
> inherent in many DHTML or Ajax scrollers.
>
> Features:
> -Automated Insertion anywhere on your page
> -Multiple scrollers per page
> -Choose from several style themes and control
> configurations-including graphical icons
> or pure text
> -Scrolling type options include normal, looping,
> auto-reverse, and animated carousel
> -Edit styles using Dreamweaver's built-in
> CSS editing tools
> -Standards-conformant markup
> -All content accessible and visible when
> JavaScript is disabled
> -Keyboard enabled scrolling
> -Toggle feature to hide scroller controls and
> show all content
> -Mousewheel support in modern browsers
> -Passes automated Section 508 Accessibility check
> -Passes WAI Accessibility checks (Priority 3)
> -Search engine-friendly
> -Free Technical Support
> -User Guide
>
> {$60}
>
> Information:
>
http://www.projectseven.com/products/tools/vscroller
>
> Examples:
>
http://www.projectseven.com/products/tools/vscroller/vs1.htm
>
> Demo Movie:
>
http://www.projectseven.com/products/tools/vscroller/media
>
> --
> PVII
>
http://www.projectseven.com
> Extending Dreamweaver - Nav Systems | Galleries |
Widgets
> Authors: "42nd Street: Mastering the Art of CSS Design"
>
> -
I'm a bit new to the whole rollover menu concept but I think
I'm getting the hang of it. Now, on a website I'm designing for my
own personal use, i have the main menu system in one movie clip. In
that movie clip there are four other movie clips which contain the
animation and scripting for the rollover parts. The rollover part
works fine, when i roll my mouse over the movie clips they play an
animation, and when i roll off they reverse the animation, but I'm
having some difficulty linking the rollover buttons to play a
certain frame in the timeline. for the first button that happened
to be the "contact us" button, i used
on(release){
_root.play();
I used "_root." because when i just put "play()" it would
just play the interior timeline (i couldn't think of anything else
to call it) of the movie clip. **Remember that i'm adding
actionscript to movieclips inside one big movie clip**. And
"_root.play()" worked fine. It played the set of "contact us"
frames and i added another script to the end frame so it would
redirect me back to the main menu. the second rollover movieclip
("games") however, is giving me much more trouble. i added the
actionscript
on(release){
_root.gotoAndPlay(284);
because theoretically, if the first one worked this one
should work too. Except this is were it begins to get
perplexing...whenever i publish or preview the movie to test the
buttons, the first "contact us" button works fine, but when i get
to the "games" button, instead of directing me to the 284th frame,
it directed me to the 284th frame of a completely different scene.
the scene where the intro to my site plays.
So forgive me for the long message but help would be much
appreciated. I've been working with flash in my spare time for a
little under a year now I can't help to shake the feeling that the
problem is something obvious.If you mean rollover rollvers (via layered menus) it could be the player itself, they are not supported acrosss all players.
Layer menus are here Layered Menus
Did you assign navigation to the buttons (or are yyou only going back and foorth between two buttons?) -
Text Turns Invisible - Transparent Alpha Visible
Hey everyone,
I'm trying to bake some text so that I can import
it into my project and reverse its animation.
I've exported the text with a black transparent
background. The text itself is a dark grey and has
an Orbit Around behavior applied and keyframed.
When I import the movie into my project, the black
transparent background becomes visible, and my
dark grey text is taking on the role of the alpha
channel. I can see through the text, but that is about it.
The movie either does this or it doesn't show up at all.
What am I doing or not doing? Has anyone noticed this before?
What can I do to fix the problem?
I have exported it several times with different bg colors, and
blending modes is not the issue.
Thank you for any help you can provide.
-quiet_dimeFigured it out (I think).
Previously, my text project was an 8-bit depth project.
When I exported it as 32-bit (float) depth the movie seemed to import just fine into my main project.
What I don't get is that my main project is only has 8-bit depth.
Make sense to anyone? -
Hi
I have a button the does two functions at the same time. it plays a symbol's animation in reverse (in order to hide it) and it slides an element. the symbols animation is triggered by another button (which is not relevant) . So my problem is that if the animation has been triggered first than when the button is pushed the animation plays in reverse, the symbol hides and everything is fine, but if a push the button before that the animation will flash in reverse. SO how can I tell it to only play in reverse when the symbol's animation has run. I know it's an if / else statement but i have no idea how to do it.
thxHere is a case close to your issue:
if ( sym.getSymbol("Symbol1").$("Text").is(":visible") ) { sym.getSymbol("Symbol1").playReverse(); }
else { sym.getSymbol("Symbol1").play(); }
Demo files ==> isVisible.zip - Box
Maybe you are looking for
-
24 pin DVI-D to Mini VGA adapter for external monitor
So I am about to buy a 20" Dell lcd monitor and I found out I need an adapter to the ibooks mini DVI port, can anyone direct me towards a 24 pin DVI-D to mini VGA so I can connect this monitor to my 12" ibook? Thank You Jeff
-
Airport Express problems the ongoing saga....and why I wouldn't buy a MAC
Hi to all, I bought two AEX(n) boxes in Feb 2009. Out of the box, both of them dropped out music from iTunes. Over the past year this is what I have done to try and coax the AEX to work. - Initial OS Windows XP Feb 2009 itunes 7 & 8. Asus W2J noteboo
-
Use of software on more than one computer
Hi, all I would like to find out is if I can use my monthly subscription to Photoshop on more than one machine at home and whether there are discounts on subscribing to a second product when the first has been set up already?
-
No FM payment update (VT57) for clearing documents
Hello all, I have payment updat online active, and I'm trying to post a payment after a FI clearing, but the system is not able to find the invoice posted in FM and create value type 57. Basically, I'm posting an account payable but still don't know
-
Making a Quiz in Flash. Need help with input time
Hi Flash Community, I'm making currently a quiz using Flash Pro CS5. What I want to implent is a time bar which will load once the bar is loaded it will go to the next frame. So what I need is first a timer which will start immediately when the user