How can I use my Html/CSS Navigation bar to control an Edge Stage?

I have an HTML/CSS navigation bar set up in my EDGE created page. The Navbar is not created in edge. I would like to use these buttons to control the stage.
Inside the stage the main timeline has labels and stop actions every 1.5 secs to create a horizontally sliding site.
The labels are as follows: home, work, blog, profile, and contact. I can easily use a symbol created inside edge for example:
sym.play("home");
and animate a 6000px width symbol across my 1000px stage in 1000px increments.
I do not want to use a symbol inside of edge to do this because I cannot create the effect that the html/css navbar has on mouseover inside of edge.
So I am interested in knowing if I can use this bar to control my main timeline so I don't have to sacrifice design for functionality.
currently the link list is setup with the standard hyperlink. What code would I use to play the stage on click of the html navbar?
Many thanks to anyone who can help with this!
Here is the code for the navbar:
<div id="menu"><ul class="block-menu">
 <li><a href="/home" class="three-d">
 Dynamic
 DynamicArtisans
 </a></li>
 <li><a href="/demos" class="three-d">
 Work
 WorkWork
 </a></li>
 <li><a href="/deals" class="three-d">
 Blog
 BlogBlog
 </a></li>
 <li><a href="/about" class="three-d">
 Profile
 ProfileProfile
 </a></li>
 <li><a href="/about" class="three-d">
 Contact
 ContactContact
 </a></li>
 </ul>
</div>
Full HTML:
<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
 <title>Untitled</title>

 <script type="text/javascript" charset="utf-8" src="workapp_edgePreload.js"></script>
 <style>
 .edgeLoad-EDGE-57204389 { visibility:hidden; }
 .block-menu {
 display: block;
 background: #000;
 .block-menu li {
 display: inline-block;
 .block-menu li a {
 color: #fff;
 display: block;
 text-decoration: none;
 font-family: 'Passion One',Arial,sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-font-smoothing: antialiased;
 font-smoothing: antialiased;
 text-transform: uppercase;
 overflow: visible;
 line-height: 20px;
 font-size: 24px;
 padding: 15px 10px;
 /* animation domination */
 .three-d {
 -webkit-perspective: 200px;
 -moz-perspective: 200px;
 perspective: 200px;
 -webkit-transition: all .07s linear;
 -moz-transition: all .07s linear;
 transition: all .07s linear;
 position: relative;
 .three-d:not(.active):hover {
 cursor: pointer;
 .three-d:not(.active):hover .three-d-box,
 .three-d:not(.active):focus .three-d-box {
 -moz-transform: translateZ(-25px) rotateX(90deg);
 -webkit-transform: translateZ(-25px) rotateX(90deg);
 -o-transform: translateZ(-25px) rotateX(90deg);
 transform: translateZ(-25px) rotateX(90deg);
 .three-d-box {
 -webkit-transition: all .3s ease-out;
 -moz-transition: all .3s ease-out;
 -ms-transition: all .3s ease-out;
 -o-transition: all .3s ease-out;
 transition: all .3s ease-out;
 -webkit-transform: translatez(-25px);
 -moz-transform: translatez(-25px);
 -o-transform: translatez(-25px);
 transform: translatez(-25px);
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 -ms-transform-style: preserve-3d;
 -o-transform-style: preserve-3d;
 transform-style: preserve-3d;
 pointer-events: none;
 position: absolute;
 top: 0;
 left: 0;
 display: block;
 width: 100%;
 height: 100%;
 .front {
 -webkit-transform: rotatex(0deg) translatez(25px);
 -moz-transform: rotatex(0deg) translatez(25px);
 -o-transform: rotatex(0deg) translatez(25px);
 transform: rotatex(0deg) translatez(25px);
 .back {
 -webkit-transform: rotatex(-90deg) translatez(25px);
 -moz-transform: rotatex(-90deg) translatez(25px);
 -o-transform: rotatex(-90deg) translatez(25px);
 transform: rotatex(-90deg) translatez(25px);
 color: #FFE7C4;
 .front, .back {
 display: block;
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 background: black;
 padding: 15px 10px;
 color: white;
 pointer-events: none;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 </style>

</head>
<body>
<div id="menu"><ul class="block-menu">
 <li><a href="/home" class="three-d">
 Dynamic
 DynamicArtisans
 </a></li>
 <li><a href="/demos" class="three-d">
 Work
 WorkWork
 </a></li>
 <li><a href="/deals" class="three-d">
 Blog
 BlogBlog
 </a></li>
 <li><a href="/about" class="three-d">
 Profile
 ProfileProfile
 </a></li>
 <li><a href="/about" class="three-d">
 Contact
 ContactContact
 </a></li>
 </ul>
</div>
<div id="Stage" class="EDGE-57204389">
</div>
</body>
</html>

I've come across this from the Edge API:
Edge.getComposition(compId)
Anyone having trouble with this same issue should try this:
var targetComp = AdobeEdge.getComposition('TARGETCOMPID');
 targetComp.getStage().play();
in their trigger or event handler.
How I got it to work:
<li><a href="javascript:var targetComp = AdobeEdge.getComposition('EDGE-57204389');
 targetComp.getStage().play();" class="three-d">
 Dynamic
 DynamicArtisans
 </a></li>

Similar Messages

How can I use the button in one panel to control the other panel's appearing and disappearing?

How can I use the button in one panel to control the other panel's
appearing and disappearing? What I want is when I push the button on
one button . another panel appears to display something and when I
push it again, that the second panel disappears.

> How can I use the button in one panel to control the other panel's
> appearing and disappearing? What I want is when I push the button on
> one button . another panel appears to display something and when I
> push it again, that the second panel disappears.
>
You want to use a combination of three features, a button on the panel,
code to notice value changes using either polling in a state machine of
some sort or an event structure, and a VI Server property node to set
the Visible property of the VI being opened and closed.
The button exists on the controlling panel. The code to notice value
changes is probably on the controlling panel's diagram, and this diagram
sets the Visible property node of a VI class property node to FALSE or
TRUE to show or
hide the panel. To get the VI reference to wire to the
property node, you probably want to use the Open VI Reference node with
the VI name.
Greg McKaskle

How can i use NI's VXI-1394 controller to control the CONDOR's VXI-1553B module?

Now I want to use the NI's VXI-1394 to control a CONDOR's VXI-1553B module.But I did a test and found that the NI's VXI-1394 can not control that module.The VXI-PCI8015 can control the VXI-1553B module.
But I have a VXI-1394 module and I want to use that to control the CONDOR's VXI-1553B module.How can I do that?Give me a hand,please.

Hello Lincoln,
Judging by the fact that you mention the VXIpc-8015, I am deducing that you are using the VXI-MXI-2 card under Windows NT. Is that correct?
Under Windows NT, the VXI-MXI-2 board and the VXI-1394 need to use different versions of the NI-VXI driver.
The VXI-PC-8015 (MXI-2) should be using NI-VXI v3.2, while the VXI-1394 needs to use a special version of the driver (v2.1.1) because Windows NT does not natively support the IEEE 1394 protocol.
The issue may simply be the wrong driver, but if it is not, we will need to know more information about your system.
1a. What version of NI-VXI are you using with the VXI-1394
1b. What version of NI-VXI are you using with the VXI-MXI-2)
2. What OS are you running?
3. How are you attempting to communi
cate with the CONDOR device?
4a. What configuration utility are you attempting to use with the VXI-1394
4b. What configuration utility are you attempting to use with the VXI-MXI-2
5. Is the CONDOR device register based or message based VXI device?
6. Have you used NI-Spy? If so, can you generate NI-Spy logs that might help debug this issue? There is a quick tutorial on NI-Spy here.
Start with these steps, and let us know how it goes. Thank you!
Regards,
Josh Hernstrom
Applications Engineer
National Instruments

How can I use the same event case for different controls dynamically

OS: Linux 2.6.24-1-686 #1 SMP Sat Apr 19 00:37:55 UTC 2008 i686 GNU/Linux
LabVIEW: Version 8.2
I have a lot of (about 50) controls (numeric, boolean) on my front panel. If a "Value Change" event will be fired by any of them the same event case shall be executed. As I do not want to add all 50 controls to the same event case manually I am looking for a way to do it at run time. Additionally the VI is still under contruction, i.e. controls will be added and removed.
Thanks for any help here.
Regards,
Johannes
Solved!
Go to Solution.

Hi Johannes,
collect all your control references (you can use the FP property for it) and create a user event. Connect this user event to your event structure. Now you have one event case for all your controls. See the attached picture.
Mike
Attachments:
Unbenannt1.PNG ‏11 KB

How can I use my Iphone as a remote control?

How can I use my Iphone 6 as a remote control?

If you are referring to an Apple TV or iTunes remote control then download the "Remote" app from the app store.
If you are referring to a remote control for your TV, Cable box, DVD Player etc then you cannot use your iPhone as a remote for these things unless they are wifi connected and have a remote control app on the app store.

How can I use javascript in a Text Area with HTML editor??

My question is... how can I use javascript in Text Area with HTML editor??
I can use javascript functions that change the content of Text Areas but i can´t if i try in text area with html editor....
I need to limit number of characters in a text area with html editor and i can´t.
could anybody help me please?

I have been experiencing similar problems with the HTML Editor and have managed to find an answer that should start to answer some of my questions. The Apex HTML Editor Standard is actually an HTML editor called FCKeditor. The FCKeditor has a Javascript API that can be found at http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/JavaScript_API. Unfortuately this doesn't seem to give the whole answer and I found more at http://www.houseoffusion.com/groups/cf-talk/thread.cfm/threadid:49607.
I needed to get the text entered within my html editor standard (e.g. P1_MYTEXT) and use it within my javascript function. I did this by using the following script
<script language="JavaScript" type="text/javascript">
function showtext(){
var oEditor = FCKeditorAPI.GetInstance('P1_MYTEXT');
var editortext = escape(oEditor.GetXHTML(oEditor.FormatOutput));
alert(editortext);
</script>
Hope this helps.
Matthew

How Can i use Html frames with simple JSP???

How Can i use Html frames with simple JSP???
Actually i am creating an application in which i have used Index.html as frame.
Noew i am trying that if i click on a link of one frame(say menu frame) the \result shoul come to some other frame(say frame named mainwindow).
Hoe can i do like this???
Anand Pritam

Well i am using..
< Base target="mainwindow">
But it is no working is there some other way??

How can i use my ipad3 as a complite navigation system(greek lang) without need wifi or 4g engaged?

How can i use my ipad3 as a complite navigation system(greek lang) without need wifi or 4g engaged?

With the wifi-only model, yes you will need an external GPS with it. A few have been mentioned on here in the past but I can't remember the names of them - you could try either searching here for them, or just do a search on the internet for iPad compatible GPS devices (I'm not sure how many work with it).

How can I use more lines to show a field of a row in a report?

How can I use more lines to show a field of a row in a report? Table A have two columns: (c1 number(5),c2 varchar2(1000)).When I show the table on a report,the column c2 show itself in one row.So the width of html page is very wide.How can I split the field c2 to many lines?
Thanks for any help.

I was wondering if an answer was found for this one.
I have the same problem using the default "Look 4" template for the region. I have found in the CSS file where it is defined and it specifies "nowrap" in the style, which is why the long value is not being split over multiple lines.
So, my question is, without modifying or creating templates, is there a way to override the "nowrap" attribute from within the item definition? e.g. in the Column Attributes.Column Formatting.CSS Style field. I had some success changing the display properties, such as background colour and font size but I can't seen to override the nowrap attribute!

How can i use Button in BEx 7.0

Dear Folks,
Could you help me please ..
In BI 7.0, for BEx analyzer i see we can use button, combo box, analysis grid.
If i have a requirement like this:
1. I have sales report, where it has information about sales person.
2. And i want to filter that report with the sales person that i choose from combo box.
For that requirement, i tried to :
1. I Create a query to Sales info-provider for displaying sales.
2. I Create a query to either to MD Sales person / Sales info-provider in order to get Sales persons data.
3. I assign point no 1 to Analysis Grid.
4. I assign point no 2 to Combo box.
My questions are:
a. Is my techniques correct ??
b. How can i use button to execute filter into the corresponding report ???
c. Is there any tutorial regarding this ?? Could you share it to me please ..
Really need your guidances..
regards,
Niel..

Hi Niel,
You can use the method you specified.
In Bex Analyzer you have design mode where you can have the following items Button, Analysis Grid and Combo box.
To work with the button you need to use the Command Wizard which consists of pre-defined functions, out of those select the one which suits your requirement and supply the parameters. As it is done thorugh a Wizard it would be easy to do.
Also,
The Button Name displays the name of the button, which is generated automatically and is unique. This name is used on the BEx Analyzer Design Toolbar menu to refer to a particular instance of the button.
· Range u2013 Manipulate coordinates for a cell or cells in this field to move or resize the button.
· Button Text - The text (caption) you want to display on the button. You can use this to describe the command the button executes.
· Command Range (optional) - Specify a three-column range of cells in the worksheet that contains command parameters. In these cells, you provide the same parameters (Name, Index, and Value) as in the Static Parameters, but in the worksheet these can be variable, changing during
navigation based on query results or on a value you manually specify.
Button in Bex analyzer
Regards,
Neelesh Jain.

How can I use XMLBeans in a Web Services client?

How can I use XMLBeans in a standalone Java client with a Web Service?
I posted the message below earlier in the year, but have not yet been successful
in my
attempts.
regards
Eddie
Hi,
I'm trying to using XMLBeans to send a document to a web service from a standalone
Java client. I'm using the PurchaseOrder (easypo) example document, and the service
expects a parameter of type PurchaseOrderDocument. The client proxy class generated
by WebLogic Workshop, however, expects to send a parameter of type PurchaseOrder.
In the client, I can instantiate a PurchaseOrderDocument, and then obtain a PurchaseOrder
(e.g. pod.getPurchaseOrder() ), but the returned class is not compatible with
the PurchaseOrder type that the client proxy expects.
In a previous attempt (not using Workshop), the client would not compile because
it expected to send a non-abstract class with a public default constructor (presumably
a JAX-RPC requirement), and XMLBeans had generated an interface.
Any help would be greatly appreciated!
thanks & regards
Eddie

I have been experiencing similar problems with the HTML Editor and have managed to find an answer that should start to answer some of my questions. The Apex HTML Editor Standard is actually an HTML editor called FCKeditor. The FCKeditor has a Javascript API that can be found at http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/JavaScript_API. Unfortuately this doesn't seem to give the whole answer and I found more at http://www.houseoffusion.com/groups/cf-talk/thread.cfm/threadid:49607.
I needed to get the text entered within my html editor standard (e.g. P1_MYTEXT) and use it within my javascript function. I did this by using the following script
<script language="JavaScript" type="text/javascript">
function showtext(){
var oEditor = FCKeditorAPI.GetInstance('P1_MYTEXT');
var editortext = escape(oEditor.GetXHTML(oEditor.FormatOutput));
alert(editortext);
</script>
Hope this helps.
Matthew

How can I display the HTML page from servlet which is called by an applet

How can I display the HTML page from servlet which is called by an
applet using the doPost method. If I print the response i can able to see the html document. How I can display it in the browser.
I am calling my struts action class from the applet. I want to show the response in the same browser.
Code samples will be appreciated.

hi
I got one way for this .
call a javascript in showDocument() to submit the form

How can I use the built-in Isight camera with an external camera (usb/firewire) at the same time?

How can I use the built-in Isight camera and an external video camera at the same time?
I'm wanting to stream over Oovoo/Skype/etc. using 2 cameras.
Thanks

Simple question with a not so simple answer.
(a) If you mean that you want to run multiple apps simultaneously using a different camera with each app, you may encounter computing power limitations. Digital video is processor intensive. The only way to know if your Mac can do this it to try it. If the video does not work together but each app works when it it the only app running, you are likely overloading your Mac's ability to process and/or move all the required data in your data bus. You can get a better indication of whether this is the case by watching your Activity Monitor utility while running the apps you want to use.
(b) If you mean that you want to have more than one compatible camera connected to your Mac simultaneously for ease of changing between video sources, some, but not necessarily all, apps you are using to operate your camera(s) allow you to select between your cameras.
How you select among connected cameras depends on which application you are using. Here is how camera selection works in a few examples:
(1) For iChat, you can choose which iSight you use in the "Camera:" choices bar in iChat > Preferences... > Audio/Video that appears when more than one compatible camera is connected. Although your camera choices will be different, the choices bar will look something similar to the Preferences settings shown here:
If you cannot see the "Camera" choices bar, your Mac is recognizing only one (or none) of your cameras. In that case, consider the suggestions fromhttp://support.apple.com/kb/HT2090 for iSight problems or refer to your other camera's documentation for help.
This particular choices bar solution applies ONLY to iChat. Most other applications also have settings that allow you to choose which camera to use. However, they do not all work the same way.
(2) For instance, iMovie HD's camera choice is NOT set via Preferences. When you have more than one compatible camera connected, iMovie6 HD uses a drop-down menu choice something like this (depending on which version of iMovie you use):
Note: Because I had no built-in iSight connected when I made this example, and because my external iSight was not connected, the drop-down menu showed only "Time Lapse." Because your Mac has a built-in iSight, your built-in iSight would show in the drop-down menu even when no other camera is connected. Connecting an additional Mac compatible webcam should allow you to choose either camera.
Other iMovie versions work slightly differently.
iMovie 9 (from iLife '11) uses a different camera choice button shown in this article:
http://docs.info.apple.com/article.html?path=iMovie/9.0/en/mov39f84285.html
iMovie 8 (from iLife '09) is slightly different as explained in this article:
http://docs.info.apple.com/article.html?path=iMovie/8.0/en/10172.html
In general, you can use your Mac's help for the application in use to find out how to select among more than one connected camera.
(3) Photo Booth in Snow Leopard 10.6.x and later uses the Photo Booth > Camera menu command to select which camera to use.
Note for readers with older Mac OS X: The previous version of Photo Booth that came with Tiger (10.4.x) is such a simple, basic app that it offers no menu selectable choice. Unless your built-in iSight is already occupied as the camera being used by some open application before you launch Photo Booth, Photo Booth will use ONLY your built-in iSight.
However, you can use the trick from ¶ 4 of http://docs.info.apple.com/article.html?artnum=302781 to let Photo Booth use an external camera.
(If you have an external Firewire camera connected, it may be used in preference to any USB webcam. If that is a problem for you, merely disconnect the problem Firewire device.)
(4) For FaceTime, launch the app and click the Video menu item.
If your Mac recognizes more than one connected compatible camera, a "Camera" section listing the cameras from which you can choose will appear there. Clicking on the desired camera name will let you select the one you want as shown in this image from my Mac Pro and LED Cinema Display:
If your Mac recognizes only one compatible camera, the "Camera" section will not appear in the Video menu, but FaceTime will automatically use the connected camera that is recognized by OS X.
(5) I do not use Skype oir Oovoo. For those or other apps, see Help for each app for info on how to select your desired camera.
Message was edited by: EZ Jim

How can I use my ipod to a new computer..

How can I use my ipod to work on a new computer? I am using windows xp. I am having problem with my old computer with my itunes in it and I want to transfer everything on my new computer.
Thanks

How to use your iPod to move your music to a new computer using iTunes7
http://docs.info.apple.com/article.html?artnum=300173
How to use your iPod to move your music to a new computer using iTunes6
http://docs.info.apple.com/article.html?artnum=304304
Copying from iPod to Computer threads...
http://discussions.apple.com/thread.jspa?messageID=5044027&#5044027
http://discussions.apple.com/thread.jspa?threadID=893334&tstart=0
http://discussions.apple.com/thread.jspa?messageID=797432&#797432
Also these useful internet articles...
http://www.engadget.com/2004/11/02/how-to-get-music-off-your-ipod/
http://playlistmag.com/secrets/2006/12/twowaystreet20/index.php
http://playlistmag.com/help/2005/01/2waystreet/
Patrick
p.s. iPod: Frequently Asked Questions
http://docs.info.apple.com/article.html?artnum=60920

How can I use Elements as Edit in using a Lightroom?

How can I use Elements as Edit in in Lightroom using a Lightroom picture. I followed instructions: Photo/Add in/ and received in Elements a blanco screen instead of the picture selected in Lightroom. Please further instructions before ordering Elements 11.

Dear Andaleeb,
I have followed instructions as follows: In Lightroom I have installed Elements under extra plug inns. (on top of the screen reference is made to Photoshop and not Photoshop 11). Under photo, cmd-e does not work since Photoshop is colored gray. As I have Elements installed under extra plug-inns this is highlighted. BUT………..Clicking that, the picture selected does NOT appear in Elements. The screen remains being empty! How can I solve this?
Mr. F.K.A. de Haan
Op 4 mrt. 2013, om 14:50 heeft andaleebfatima1 <[email protected]> het volgende geschreven:
Re: How do I use Elements as a plug in for Lightroom? After plugging no picture appears in Elements!
created by andaleebfatima1 in Photoshop Elements - View the full discussion
Please ensure that you have added PSE Editor as external editor for Lightroom. See : http://www.photoshopelementsuser.com/html/integrate-lightroom-with-ele ments/
Thanks
Andaleeb
Please note that the Adobe Forums do not accept email attachments. If you want to embed a screen image in your message please visit the thread in the forum to embed the image at http://forums.adobe.com/message/5119785#5119785
Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page: http://forums.adobe.com/message/5119785#5119785
To unsubscribe from this thread, please visit the message page at http://forums.adobe.com/message/5119785#5119785. In the Actions box on the right, click the Stop Email Notifications link.
Start a new discussion in Photoshop Elements by email or at Adobe Community
For more information about maintaining your forum email notifications please go to http://forums.adobe.com/message/2936746#2936746.

How can I use my Html/CSS Navigation bar to control an Edge Stage?

Similar Messages

Maybe you are looking for