JSON content - click to show another symbol on the stage

Hi,
Thanks to Zaxist I have a working code like the one below:
$.getJSON("content.json",
          function(data){
                    for(var i=0; i<data.length; i++){
                    var s = sym.createChildSymbol("template","content");
                    s.$("title").html(data[i].title);
                    s.$("description").html(data[i].description);
                    s.$("seira").html(data[i].seira);
                    s.$("imageholder").css({"background-image":"url('"+data[i]. image+"')"});
                    s.$("imageholder").data('Large', data[i].largeimage);
                    s.$("imageholder").click("click", function(e){
                                                            sym.getComposition().getStage().$("finte").css({"background-image":"url("+$(this).data('L arge')+")"});
Now, I am trying on the click function to show specific symbol on the stage, for example when click on the first item the symbol red will appear, if cliked the second item the (previous symbols that was appeared will be hided) and the new symbol blue will appear. An so on with all the other ellements that JSON files has.
I tried this on the code, but nothing:
$.getJSON("content.json",
          function(data){
                    for(var i=0; i<data.length; i++){
                    var s = sym.createChildSymbol("template","content");
                    s.$("title").html(data[i].title);
                    s.$("description").html(data[i].description);
                    s.$("seira").html(data[i].seira);
                    s.$("imageholder").css({"background-image":"url('"+data[i]. image+"')"});
                    s.$("imageholder").data('Large', data[i].largeimage);
                    s.$("imageholder").click("click", function(e){
                                                            sym.getComposition().getStage().$("finte").css({"background-image":"url("+$(this).data('L arge')+")"});
                                                            if (data[i]=3) {
                                                                                                                                                                                                                                                            sym.getComposition().getStage().$("red").show();
                                                            else {
                                                            sym.getComposition().getStage().$("red").hide();
                                                            if (data[i]=5) {
                                                                                                                                                                                                                                                                                                                         sym.getComposition().getStage().$("blue").show();
                                                            else {
                                                            sym.getComposition().getStage().$("blue").hide();
Could you help me?
Thanks in advanced!

Zaxist please I need your help again.
I have this:
$.getJSON("images1.json",
          function(data){
                    for(var i=0; i<data.length; i++){
                    var s = sym.getSymbol("base").createChildSymbol("template", "content");
                    s.element.attr('id', 'basara'+i)
                                        s.getSymbolElement().css({"background-size":"contain",
                                           "float": "left",
"margin": "100 125px 125px 100",
"clearboth":"{ clear: both; }"
                    s.$("description").html(data[i].description);
                    s.$("code").html(data[i].code);
                    s.$("imageholder").css({"background-image":"url('"+data[i]. image+"')",
                                                                                                                                                                 "background-size":"cover"
                    s.$("imageholder").data('myIndex', i);
                                                                      s.$("imageholder").data('Large', data[i].image);
                     s.$("imageholder").click("click", function(e){
                                                                 if ($(this).data("myIndex") == 0){
sym.getComposition().getStage().getSymbol('holders').$("holder1").css({"background-image": "url("+$(this).data('Large')+")"});
                        else if ($(this).data("myIndex") == 1) {
sym.getComposition().getStage().getSymbol('holders').$("holder1").css({"background-image": "url("+$(this).data('Large')+")"});
                        else if ($(this).data("myIndex") == 2) {
sym.getComposition().getStage().getSymbol('holders').$("holder1").css({"background-image": "url("+$(this).data('Large')+")"});
$.getJSON("images2.json",
          function(data){
                    for(var i=0; i<data.length; i++){
                   var s = sym.getSymbol("podia").createChildSymbol("template", "contentpodia");
                                       s.getSymbolElement().css({"background-size":"contain",
                                           "float": "left"});
                    s.$("description").html(data[i].description);
                    s.$("code").html(data[i].code);
                    s.$("imageholder").css({"background-image":"url('"+data[i]. image+"')",
                                                                                                                                                                 "background-size":"cover"
                    s.$("imageholder").data('myIndex', i);
                                                                      s.$("imageholder").data('Large', data[i].image);
                     s.$("imageholder").click("click", function(e){
                                                                 if ($(this).data("myIndex") == 0){
sym.getComposition().getStage().getSymbol('holders').$("holder2").css({"background-image": "url("+$(this).data('Large')+")"});
                        else if ($(this).data("myIndex") == 1) {
sym.getComposition().getStage().getSymbol('holders').$("holder2").css({"background-image": "url("+$(this).data('Large')+")"});
                        else if ($(this).data("myIndex") == 2) {
sym.getComposition().getStage().getSymbol('holders').$("holder2").css({"background-image": "url("+$(this).data('Large')+")"});
I want to import symbol podia inside to base to handle it by content2.
I am writing this:
var basewithpodia = sym.getSymbol("base").createChildSymbol("podia", "content2");
it places the symbol inside, without the data of the JSON file.
How can I make it to work?

Similar Messages

I have an iPod touch 4th gen that is in iOS 6.1 it's showing another update in the settings for iOS 6.1.6 but even if I wait for more than 30mins it won't show. Can anyone help me. Thank you and Godbless

I have an iPod touch 4th gen that is in iOS 6.1 it's showing another update in the settings for iOS 6.1.6 but even if I wait for more than 30mins it won't show. Can anyone help me. Thank you and Godbless

- Reset the iOS device. Nothing will be lost
Reset iOS device: Hold down the On/Off button and the Home button at the same time for at
least ten seconds, until the Apple logo appears.
- Power off and then back on your router
.- Reset network settings: Settings>General>Reset>Reset Network Settings
- Try when connected to another network
- Update via iTunes on a computer.

How do you remove a symbol from the stage in Edge animate?

Hello-
I'm wondering how to remove a symbol from the stage in Edge Animate so you can jump to another place in the timeline. In Flash, the symbol was only on the stage for the amount of frames you indicated. Not sure how it works here.
For example, I have 2 buttons on my first screen with some text that animates in. I want the button click to take the user to another section in the timeline or (basically another scene, like in Flash) that contains different content. If I change the visibility the buttons are still there and will ( I assume) create problems when other elements are placed on top.
Or is the only way with code. If that is the case what would that code be?
I would appreciate any help.
Thank you!

What I usually do, is, once you have everything set up in the scene you are done with. highlight it all
right click
group elements in DIV
Now all those items act as 1 group and then you give it a properties name, much like a symbol.
THEN you can refer to that scene name and move it anywhere or hide it and slide in another scene that has the content for that next scene.
basically you take all the elements that make up 1 scene, gruop it up, name it, and then in the code for the button say something like:
on click:
scenename.play(framenumber);
that will then animate that scene according to any animation you gave it, such as moving to the left, off stage. while moving scene 2 that you create into the stage.
or just have something like this hide it
sym.$("scenename").hide();
sym.$("scene2name").show();
but if you do that, make sure in your CompositionReady code you hide all scenes EXCEPT the 1st one, so the user doesnt see them all instanatly anyway.

How to remove a dynamic symbol from the stage?

I'm loading dynamically copies of a Library symbol with a button click. Question is, when I move around in the timeline, I don't want to see the symbols at certain points. Can I loop through the json file and remove each symbol from the stage? Or is there a better way of accomplishing this?
Being new to Edge Animate, I'm also unsure as to the names of the symbols as they are placed on the stage. If I use the browser's developer tools, I can see that the divs are named Stage_90, Stage_91, Stage_92 etc. However doing something like the following does not seem to work:
sym.$("Stage_90").hide();
I appreciate the help. Thanks again.

I got it. It should be:
$("#region1").remove();
// # was missing.
I actually added that to time 0 on the main timeline so when I got back there it removes the image.
It's not working from the symbol yet but I guess I should eventually get it working from there instead.
Thanks for your time.

How to add a symbol to the stage with a unique click function

I created a symbol in the Library and am loading multiples of it based on json data. However, I want to give each one a unique click function based on the json data. For example if you are the 4th symbol, you should change the color of another symbol when clicked. However, if the 5th symbol is clicked, it should be a different color. And so on.

What I would do:
add a class name for each symbol in your json file or on symbol creation.
Then use each class name and assign it a click event.
to assign a unique id or class to symbol you create use:
for (var i=0;i<data.length;i++){
var el = sym.createChildSymbol("pEl", container);
el.element.attr("id","newEl"+i);
// or for a class use el.element.addclass('className'+i);
Note when using the new id make sure you add # in name
example
sym.$('#pEl'+i).......
and a dot for the class name
sym.$('.className'+i) ..............

How do I "show" a symbol in the symbols panel, then "hide" it again?

So. I feel like this must be easier than I'm making it but I can't seem to get it right, any help would be greatly appreciated.
I need to create a bunch of robust symbols and import each of them, but I'd like to leave them all inside the symbols panel if possible (for simplicity on the main timeline and because there will be many, many of them with a ton of interactivity in each).
When I'm on the main timeline, (which is basically just a slideshow of static .png files) I'd like to have a click event "open" a symbol called from the symbols panel and then be able to "hide" it again by clicking a close button within that symbol.
Is this possible? I'm sure it is, but sym.$("symbol").show(); and sym.$("symbol").hide(); aren't working for me–unless I'm placing them on the wrong elements. Neither is .toggle();
So basically the scenario is: I'm on a particular "slide"(png) on the stage, I click it, a symbol opens up, I click around and play animations etc., close it with a close button and keep on going with the slideshow where I was before I opened the overlaid symbol.
Again, any help would be greatly appreciated.
Cheers.

Hello,
Here is a case:
var mySymbol = sym.createChildSymbol("details", "Stage");
mySymbol.getSymbolElement().css({"left": "20px", "top": "20px"});
x ==> left
y ==> top

Can I use single words in a paragraph to show other elements on the stage?

I want to put a paragraph on the stage. The paragraph would look like this:
" Yada yada yada... so either click here to read Note1, or click here to read Note2. "
As you might guess, I want the user to be able to click the underlined words in the paragraph - and have the appropriate notes appear.
Is it possible to do this kind of thing in Edge Animate?
TIA,
Jeff

Hi Jeff,
The way I would do that is by showing and hiding elements. You would create "Note1" on the stage of your current project. If "Note1" is an animation then you will convert it to a symbol called "Note1" or leave it as an element called "Note1" if it's static. Somewhere in your "Note1" you might want to include an "X" or "close" to hide the note when it's not needed. In the actions for the "X" or "close" you would choose "click" then hide element or type in "sym.$("Note1").hide();"
Leave it set as "always on" to create and position it, then set it to "off". Then in your sentence "Yada yada yada... so either click here to read Note1, or click here to read Note2." You would type in the text "here" seperately than the rest of the sentence anywhere you want a note to pop up. You can then choose the actions of your first "here" (lets call it "here1") In the actions choose "click", then show element or type in "sym.$("Note1").show();" Note1 can then be hidden by clicking on the "X" or "close" that's a part of "Note1"
This will work same for any "Notes" you'd like to do.
You can also do this with mouseover and mouseout by using the same show and hide commands for those actions. Then "note1" will only show when mouse is over "here1"
Hope that helps,
Brian

Make subtle adjustments to simlar symbols on the stage

Let's say I create a symbol of a stick figure holding a shield.
Symbol 1: The Stick man
Symbol 2: The Shield
Symbol 3: the Stick man holding the shield.
Now, how would it be possible to place several copies of Symbol 3 on the stage while making subtle adjustments to EACH symbol 3 on the stage.
Is this possible?
Let's say I want to make each stickman slightly a different color without every single stickman taking on the same color.
Then I may want symbol 2 (the shield) to be a slightly different color in each of the stickman.
How could I go about making this subtle of an adjustment without effecting every instance of symbol 1 and 2 on the stage. Is this possible in flash??? It seems that flash has so much power, but I have yet to figure out how to use it all, and I sure hope something like this is possible.
If I need to explain what I mean, I sure will take the time to do this, but if someone could help me out here, that would be hugely appreciated.

If you give each symbol instance an instance name, then you can operate on any of the properties of each of those symbols. So, for instance, if you have one instance of symbol 3 on the stage, select it and, in the Properties window, give it an instance name of "figure1". If you then double click on this instance, you can open it in to edit its content. This symbol will contain two symbols. Select each one separately and name each, say "man" and "shield".
Now, every time you bring a copy of the figure from the Library to the stage, it will contain two named symbol instances. If you select this new instance on the stage and name it, you can then address the symbols inside separately from the symbols inside "figure1".
The options for changing the color of any given symbol are limited. One way to go about this is to edit the shield symbol, add a layer, and then add a new symbol that you can use for the color change.

Adding a Preloader to a Symbol, not the Stage. How?

I have a local video (not one hosted on YouTube/Vimeo) as part of a Symbol. Since it's a local video and may take a while to load once the button to load it is clicked, I'd like to add a Preloader to either the video itself, or to the Symbol. It's easy enough to do this to the entire Stage, but I just want the Preloader to appear when the Symbol it's in is loaded onto the Stage. How do I do this?
Thanks

Hi,
You can do it using the "poster" attribute: HTML video poster Attribute
I assumed that you have one and only one video and you have a preloader within the images folder, so:
sym.$("video").attr("poster", "images/myPreloader.gif");

Aligning images/symbols on the stage...

I am assembling a morphing photo display of several photos
which I convert to symbols and vectors giving the illusion of a
water color painting morphing into a crisp image/photo. As I do
this with more images I can see issues where my images are not
centered with the previous one and "hop" to one side or the other.
Is there a grid tool that I can place onto the stage to assist with
this or some other method that I may use to keep things as I see
them in my "vision"?
Thanks in advance for any suggestions.

Ok, my bad.... After completein one task I decide to revisit
the drop downs and low and behold there it was... View>Grid...
Guess I need to get some sleep...
Good night all.

Resizing JFrame on button click to show an image on the JFrame

Dear All,
I have a JFrame which has an empty label. On button click I want to set an icon for the label and want the JFrame to be resized to show that icon. I am using frame.pack() and I am not using any other sizing function. The code that I have right now, prints the image on the panel, but does not resize the frame to show the image. Pleae could someone help.package gui;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Font;
import java.awt.Toolkit;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.ItemEvent;
import java.awt.event.ItemListener;
import java.awt.event.KeyEvent;
import java.awt.event.KeyListener;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JScrollPane;
import javax.swing.JTextArea;
public class ComponentDemo extends JPanel implements ActionListener,
ItemListener, MouseListener, KeyListener {
     private JTextArea textarea;
     private JButton button;
     private final static String newline = "\n";
     private JLabel imageIcon;
     public ComponentDemo() {
          button = new JButton("JButton welcomes you to CO2001");
          button.addActionListener(this);
          add(button);
          textarea = new JTextArea(10, 50);
          textarea.setEditable(false);
          addMouseListener(this);
          textarea.addKeyListener(this);
          JScrollPane scrollPane = new JScrollPane(textarea);
          add(scrollPane);
          imageIcon = new JLabel();
          add(imageIcon);
          setBackground(Color.pink);
          new JScrollPane(this);
      * Create the GUI and show it. For thread safety, this method should be
      * invoked from the event-dispatching thread.
     private static void createAndShowGUI() {
          // Create and set up the window.
          JFrame frame = new JFrame("Simple FrameDemo");
          frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
          Dimension screenSize = Toolkit.getDefaultToolkit().getScreenSize();
          frame.setLocation(700, 200);
          // get the content pane and set the background colour;
          frame.add(new ComponentDemo());
     //     frame.setSize(screenSize);
          // frame.getContentPane().setBackground(Color.cyan);
          // Display the window.
          frame.pack();
          frame.setVisible(true);
          frame.setResizable(true);
     public static void main(String[] args) {
          // Schedule a job for the event-dispatching thread:
          // creating and showing this application's GUI.
          javax.swing.SwingUtilities.invokeLater(new Runnable() {
               public void run() {
                    createAndShowGUI();
     @Override
     public void actionPerformed(ActionEvent e) {
          // TODO Auto-generated method stub
          if (e.getSource() instanceof JButton) {
               // System.out.println(e.getSource());
               String text = ((JButton) e.getSource()).getText();
               textarea.append(text + newline);
               textarea.setBackground(Color.cyan);
               textarea.setForeground(Color.BLUE);
               textarea.setCaretPosition(textarea.getDocument().getLength());
               imageIcon.setIcon(createImageIcon("SwingingDuke.png",
               "Image to be displayed"));
     @Override
     public void itemStateChanged(ItemEvent arg0) {
          // TODO Auto-generated method stub
     @Override
     public void mouseClicked(MouseEvent arg0) {
          textarea.append("A Mouse click welcomes you to CO2001" + newline);
          textarea.setBackground(Color.green);
          textarea.setCaretPosition(textarea.getDocument().getLength());
     @Override
     public void mouseEntered(MouseEvent arg0) {
          // TODO Auto-generated method stub
     @Override
     public void mouseExited(MouseEvent arg0) {
          // TODO Auto-generated method stub
     @Override
     public void mousePressed(MouseEvent arg0) {
          // TODO Auto-generated method stub
     @Override
     public void mouseReleased(MouseEvent arg0) {
          // TODO Auto-generated method stub
     @Override
     public void keyPressed(KeyEvent e) {
          System.out.println(e.getKeyChar());
          textarea.append("The key " + e.getKeyChar()
                    + " click welcomes you to CO2001" + newline);
          textarea.setBackground(Color.YELLOW);
          textarea.setFont(new Font("Arial", Font.ITALIC, 16));
          textarea.setCaretPosition(textarea.getDocument().getLength());
     @Override
     public void keyReleased(KeyEvent e) {
          System.out.println(e.getKeyChar());
          // textarea.append("The key "+
          // e.getKeyChar()+" click welcomes you to CO2001" + newline);
          // textarea.setBackground(Color.green);
          // textarea.setCaretPosition(textarea.getDocument().getLength());
     @Override
     public void keyTyped(KeyEvent e) {
          // TODO Auto-generated method stub
          System.out.println(e.getKeyChar());
          // textarea.append("The key "+
          // e.getKeyChar()+" click welcomes you to CO2001" + newline);
          // textarea.setBackground(Color.blue);
          // textarea.setCaretPosition(textarea.getDocument().getLength());
     /** Returns an ImageIcon, or null if the path was invalid. */
     protected ImageIcon createImageIcon(String path, String description) {
          java.net.URL imgURL = getClass().getResource(path);
          if (imgURL != null) {
               System.out.println("found");
               return new ImageIcon(imgURL, description);
          } else {
               System.err.println("Couldn't find file: " + path);
               return null;
}

myJPanel.setPerferredSize(new Dimension(new_width, new_hight));
myJFrame.pack();

Show another page in the same page

Hello
I have the following case :
Trinidad Page it includes A trinidad table of urls and in the same page i have an iframe .when the user select a row from the table :
- the screen is submitted and display the selected URL in the iframe.
What is the best way to do that.
Regards

Hi, The following assumes that you are using 'single' as the selection strategy for the table.
try the following:
1. declare a global variable iframeSource with getter and setter methods.
2. set the autoSubmit property of the table to true
3. add a selectionListener method to the table; and in that write the following code
RowKeySet keys = table.getSelectedRowKeys();
Iterator iterator = keys.iterator();
while(iterator.hasNext()){
Your-RowObject-Containing-URL urlobject =(Your-RowObject-Containing-URL) iterator.next(); // may be the object is simple string in your case.
iframeSource=urlobject.getURL();
4. wrap your iframe in a trinidad's panelGroupLayout or any other container component to make use of PPR :
<tr:panelGroupLayout partialTriggers="table-id" >
<iframe src="#{your-backing-bean.iframeSource}" .... .... .... />
</tr:panelGroupLayout>
With that, when ever a row is clicked in the table the content of the iframe gets updated with the content from the selected url.
Edited by: saasira on Feb 19, 2009 5:25 AM

How to show Hand Symbol when the cursor move to particular field.?

Hi all,
in alv report ,i have to give first column as link to action,and whenever mouse came to that column a hand symbol ie,hot spot has to be appear .
How can i do for that?
Regards,
ravi

Hi
When you make the Column as LinkToAction, then Hot Spot appears automatically
Code to Make
LinkToAction Column in ALV.
DATA: lr_alv_usage       TYPE REF TO   if_wd_component_usage,
        lr_config          TYPE REF TO   cl_salv_wd_config_table,
        lr_col_header      TYPE REF TO   cl_salv_wd_column_header,
        lr_function_wd     TYPE REF TO   cl_salv_wd_function,
        lr_uie_link        TYPE REF TO   cl_salv_wd_uie_link_to_action,
        lr_if_controller   TYPE REF TO   iwci_salv_wd_table,
        lr_function_set    TYPE REF TO   if_salv_wd_function_settings,
        lr_table_settings TYPE REF TO   if_salv_wd_table_settings,
        lr_column_settings TYPE REF TO   if_salv_wd_column_settings.
Instantiate ALV Component
lr_alv_usage = wd_this->wd_cpuse_all_alv( ).
IF lr_alv_usage->has_active_component( ) IS INITIAL.
    lr_alv_usage->create_component( ).
ENDIF.
get reference to model
lr_if_controller = wd_this->wd_cpifc_all_alv( ).
lr_config        = lr_if_controller->get_model( ).
lr_column_settings ?= lr_config.
lr_column = lr_column_settings->get_column( '<Column Name>' ).
        CREATE OBJECT lr_uie_link.
        lr_uie_link->set_text_fieldname( '<COlumn Name>' ).
        ls_column-r_column->set_cell_editor( lr_uie_link ).
Abhi
Edited by: Abhimanyu Lagishetti on Jun 13, 2008 10:12 AM
Edited by: Abhimanyu Lagishetti on Jun 13, 2008 10:13 AM
Edited by: Abhimanyu Lagishetti on Jun 13, 2008 10:13 AM
Edited by: Abhimanyu Lagishetti on Jun 13, 2008 10:14 AM

Applet loading problem, it shows another message before the right message.

Hi Friends,
I have tried to make an applet which is showing the messages related to a user if the messages are present for any user.If the messages are not present for a user then the applet shows that " You Have no unreviewed messages." But due to some reason the applet is displaying the no message text before displaying the intended messages. Please help me out with this code.

Could you post your code?

Iphone screen shows itune symbol without the disc even after restore

ive restored my ihone and it keeps going back to a itunes sign without the disc. ive tried holding slee/hold so many times and nothing is working.. any other ideas?

So you have tried connecting it in recovery mode and restoring it via iTunes? See this article for more details.
http://support.apple.com/kb/ht1808
B-rock

JSON content - click to show another symbol on the stage

Similar Messages

Maybe you are looking for