How to add a link to an interactive svg using edge commons library

Hi,
I've been playing around with this wonderful Edge Commons interactive SVG tutorial
My question is : How to add an external link "url" to an interactive svg using edge commons library ?
Edge commons example file :
http://edgedocks.com/market/interactive-svg-example-project-edge-commons
Edge commons video tutorial :
http://www.youtube.com/watch?v=4UEB6gaLKuw
I have adapted this tutorial to an interactive map, http://madudesign.com/works/france/ every thing is going fine until I couldn't figure out to link a particular url on each part of the region of the map.
I managed to figure out how to change colors on the different parts of the map on mouse over and mouse out but I'm not quite comfortable with JavaScript since I don't use it every day...
I have tryed to link to an url by passing it on the illustrator layer and via the onclick event (event.target.id) to a simple url
http://redpen.io/6svh5u
then working in Edge and publishing on the browser the link returns me a weird url line by replacing the original url slashes "//" by "_x2F_" and I must have misunderstood the proper JavaScript line to open that link from there...
for example on my actual exemple "http://madudesign.com/works/france/"
the first top region of France is normally a link to "http://www.google.com" and it returns "http:_x2F__x2F_www.google.com" plus the complete path to the file too...
I don't know how to get around this trick and have back for each region a particular clean link from the event target id of the svg...
thank-you for any help
matt
link to my edge animate file if needed :
http://madudesign.com/works/france/carte_de_france.zip

I got an answer from the Edge Commons dream team and I am very grateful to them :
"The problem that you bumped into was that you hadn't included a valid URL so far. We weren't sure if you wanted to include them within the SVG file or if you wanted to implement the functionality within Edge Animate. We came up with a solution for the latter one, with a simple switch in the js code:
You have to type in the appropriate URL of course for all the cases."
I have to share the final result:
http://www.madudesign.com/works/france/france_map/
And the zipped project file:
http://www.madudesign.com/works/france/france_map.zip
Thanks to Daniel & Simon
Matt

Similar Messages

Note on interactive SVG and Edge Commons

I encountered something I want to mention so people do not pull their hair trying to find out which things are not working.
1- issue publishing
If you add a js folder for your js files, Animate v2 will not import it in your web folder - So add it after you have published
2- SVG layer names
If you use uppercase for your layer names, you may have problem using it for adding images for example. This is especially true if your server is Unix because it is case sensitive. It is better to not use uppercase in names.
I used the layer names to add images and of course the server could not read the uppercase. The code was right but the reading was wrong and the images did not load.
Note: in the code below I added 3 lines to take off numbers created when more than one layer had the same name and also took off space when I had more than one word in the name. Not pretty but it works.
var newText = (event.target.id).split("_").join(" ");
var newText2 = (newText).split("1").join("");
var newText3 = (newText2).split(" ").join("");
sym.$('image').attr('src', 'images/'+ newText3 + '.jpg'); // if the layer name is uppercase then the image is not loaded.

Thanks Gil
I guess being case sensitive can make things tricky!
To clarify, you have to keep track of what is what like for javascript. If your files are lowercase then your call needs to be lowercase too. This is exactly what happened. I suppose if my file names had been uppercase then it would have worked but I did not test it.

How to add a link to your message

Does anyone know how to add a link to a message?

laptopman,
As Klaus1 posted, you can also use the Character Palette.
In the Palette, select View : Glyph > Glyph Catalog. You will find the , among others, there.
You can copy & paste, or position the cursor where you want the glyph in a document, highlight the glyph, and click on Insert with Font.
If the Character Palette is not in your Menubar, open System Preferences > International > Input Menu: Checkmark Show input menu in menubar.
To open the Palette, click on the Flag icon in the Menubar, and select Show Character Palette.
ali b

How to add a link button in system form?

how to add a link button in system form in the edit text?

HI
see the following code
This creates an item "55" caption, and exittext ("550") and creates linked button "51" linked to "550"
        oItem = otmpform.Items.Add("55", SAPbouiCOM.BoFormItemTypes.it_STATIC)
        With oItem
            .Top = 315 + 30 + 15
            .Left = 12
            .Width = 100
            .Specific.Caption = "Többlet"
        End With
        otmpform.DataSources.UserDataSources.Add("550", SAPbouiCOM.BoDataType.dt_SHORT_TEXT)
        oItem = otmpform.Items.Add("550", SAPbouiCOM.BoFormItemTypes.it_EDIT)
        With oItem
            .Top = 315 + 30 + 15
            .Left = 120
            .Width = 100
            .Specific.DataBind.SetBound(True, "", "550")
            .AffectsFormMode = True
            .Description = otmpform.Items.Item("55").Specific.Caption
            .DisplayDesc = True
        End With
        oItem = otmpform.Items.Add("551", SAPbouiCOM.BoFormItemTypes.it_LINKED_BUTTON)
        With oItem
            .Top = 316 + 30 + 15
            .Left = 120 - 14
            .Width = 13
            .LinkTo = "550"
            .Specific.LinkedObject = SAPbouiCOM.BoLinkedObject.lf_GLAccounts
        End With
Regards,
J.

How to add custom link to shopping cart

hello,
can anyone tell me how to add a link to the shopping cart page (rather than using the View cart link on the module_shoppingcartsummary)?
also, is it possible to customise the module?
instead of:
2 item(s), Total: £0.00 View Cart
i'd like to display:
<cart image> My Cart 2 item(s)
thanks and regards,
Frank

I am getting pretty frustrated with all the broken links in here. Why can't you guys forward these deprecated links?
If the only results in my searches for help end in broken links to a decrepit website, then you erode any hint of professionalism here.
These links are only a few months old and yet youve shut them down without even a thought of who've you have left hanging.
We pay for this abuse?
Argh!

How to add .js link in custom list form through sharepoint designer 2013

hi friends
so far i was adding jquery code to script editor webpart in custom list form.
but i need to know how to add .js link in custom list form through sharepoint designer 2013
please help me.

Hi,
We can add the "JS Link Property" in the “WebPart” node in the custom list form page through SharePoint designer 2013.
Here is an example for your reference:
<JSLink xmlns="http://schemas.microsoft.com/WebPart/v2/ListForm">~site/Style Library/js/custom.js</JSLink>
Noticed that, we should not lose the 'xmlns="http://schemas.microsoft.com/WebPart/v2/ListForm' attribute.
Best Regards
Dennis Guo
TechNet Community Support

How to add mail link in muse

how to add mail link in muse?

Just type the e-mail address in the Hyperlink control in the Control Strip.

How to add interface to customlize MXML Component when use Flex Builder 3?

How to add interface to customlize MXML Component when use
Flex Builder 3?

David,
I don't believe you can add the interface via the creation
dialog in FlexBuilder 3. You can always manually add the
"implements" property to your MXML Component root tag. Something
like this: <mx:VBox implements="com.mycorp.IMyInterface">
If you want autogeneration of the interface, then create an
ActionScript class with that interface and then copy the generated
functions and setter/getters into the script block of your MXML
component.

How to add additional disks on vmware OEL4 and use it for Oracle 10gR2?

I created a virtual machine on vmware workstation 6 and installed OEL4.
during first install I created 20 GB disk but now I want to add more disks.
from vmware documentation I tried to add more 8 gb disk to the virtual host.
under devices I see two lines;
Hard Disk (SCSI 0:0) 20.0 GB
Hard Disk (SCSI 0:2) 8.0 GB
but I must be missing some step since I can not see 20 + 8 gb at df;
[root@antuhost ~]# df -h
Filesystem            Size Used Avail Use% Mounted on
/dev/sda1              13G 9.7G 2.3G 82% /
none                  506M     0 506M   0% /dev/shm
/dev/sda2             4.9G 851M 3.8G 19% /homeThank you.

Oh the check the answer from Re: How to add additional disks on vmware OEL4 and use it for Oracle 10gR2?

How to add pdfs n movies from my PC without creating ne library

How to add pdfs n movies from my PC without creating ne library... Does iTune has ne converter tht can convert movie into format that iphone can play..

That's easy, while connecting the iPod to the computer on Windows with iTunes 7.3 installed hold down the Shift + Ctrl keys. This will stop the iPod from auto-syncing with iTunes and the iPod will appear in the source list. Wait until you are sure the iPod has mounted, and that it will not auto sync and then you can let the keys go. This may take between 20 to 30 seconds depending on your computer. If your iPod shows up ok in iTunes you can change it to manual from there.
http://docs.info.apple.com/article.html?path=iTunesWin/7.3/en/keycuts.html
(it's also in iTunes > Help if you forget)
Message was edited by: Katrina S.

How can I get a sound to play more than once using edge commons?

Hi, I'm very new to all this; so apols if asking dumb stuff...
I've successfully used Edge Commons to get an audio effect to play in a timeline but it will only play once. Does anyone know how I can get it to play again at various trigger points?
The code I'm using in creationComplete is:
yepnope({
          load: "http://simonwidjaja.github.com/EdgeCommons/live/EdgeCommons-0.7.1.js",
          callback: function() {
                    // Load sound manifest (e.g. in creationComplete)
                    var assetsPath = "media/";
                    EC.Sound.setup(
                              {src: assetsPath + "bubbles.mp3|" + assetsPath + "bubbles.ogg", id: "bubbles"},
                        function(){ EC.info("Sound setup finished", "DEMO"); }
Then in a trigger on the timeline I have:
EC.Sound.play("bubbles");
As said, the above plays fine, one time... but if I place another, 'EC.Sound.play("bubbles");' trigger further along on the timeline nothing happens. Similarly, if the audio has played already and the timeline loops, the audio won't play a second time. I'm thinking I need to write in some sort of 'unload' type of thing so it knows to play again when it hits the new trigger? Or I might just be talking cobblers? Who knows? I certainly don't which is why I so desperately need help... please x

That's brilliant, Resdesign, and works perfectly in endlessly adapatable ways! Huge thanks! Great demo/sample file, by the way!
Also I 'accidentally' discovered (which may be of some help to anyone else who's new to all this) that the code which I'd used (see first post, above) ony runs the audio once when in preview mode. However, when the Edge Animate file is published the code works pefectly and when the second trigger is reached the audio plays a second time.
I'm guessing that when the 'publish' facility is utilsed the code is properly compiled (or something like that???) which is why it runs okay.
Anyway, whatever... the problem's solved! Hurrah! (Thanks Resdesign!) x x

How to get the Bookmarks in pdf file by using pdf.js library

In my application i am using PDF.js library to view the pdf files. Now i want to fetch the bookmark details which was already set in the pdf page. How could i get the those bookmark details by using pdf.js library. is there any specific methods available in pdf.js library to get that?

Hi ShantamReddy,
I asked #pdfjs and we would need you to clarify what you mean by "bookmark"
This is where the bookmarks in a pdf are populated [https://github.com/mozilla/pdf.js/blob/master/web/viewer.js#L1032] however you will have to customize what to do with them.
I hope this sheds some light on what you are trying to do.

Interactive Reports - how to add a link to a document?

Hi there,
I have an interactive report that displays a list of items, I would like to add a column which displays a link for each item in the report, the link should display the Word/Excel document which is located somewhere on our network. The path to the document is stored in the table along with the items. Does anybody know how I can do this?
Thanks...

I got an answer from the Edge Commons dream team and I am very grateful to them :
"The problem that you bumped into was that you hadn't included a valid URL so far. We weren't sure if you wanted to include them within the SVG file or if you wanted to implement the functionality within Edge Animate. We came up with a solution for the latter one, with a simple switch in the js code:
You have to type in the appropriate URL of course for all the cases."
I have to share the final result:
http://www.madudesign.com/works/france/france_map/
And the zipped project file:
http://www.madudesign.com/works/france/france_map.zip
Thanks to Daniel & Simon
Matt

How to add table in SAP Non interactive forms in webdynpro java

Hi Experts,
I have a requirement in webdynpro java.I have a print button.On clicking print button a pdf will be opened.
This pdf will have data from the webdynpro view.I want to know how to add table in the adobe pdf.The webdynpro view will have many rows of table(rows will keep changing as per the size of the data output).How to send this data to adobe.How do we bind the node to the table in the adobe.How to automatically
Please suggest.
Thanks,
Rajani
Edited by: Rajani Nandagiri on Dec 26, 2008 8:58 AM

Rajani,
Take a look at below links, it will help you.
[Handling Dynamic Length Tables in Adobe Forms|https://www.sdn.sap.com/irj/sdn/go/portal/prtroot/docs/library/uuid/e0859ad1-53aa-2a10-78ae-99e41c407669]
[Integrate tables & Images in Adobe Web Dynpro|https://www.sdn.sap.com/irj/servlet/prt/portal/prtroot/com.sap.km.cm.docs/library/user-interface-technology/wd%20java/wdjava%20archive/dynamic%20non-interactive%20pdf%20form.pdf]
[How to Handle Table Input and Output|https://www.sdn.sap.com/irj/servlet/prt/portal/prtroot/com.sap.km.cm.docs/library/user-interface-technology/wd%20java/7.0/adobe/how%20to%20handle%20table%20input%20and%20output.pdf]
[How Tou2026deal with Table input and display in Interactive Forms|https://www.sdn.sap.com/irj/sdn/go/portal/prtroot/docs/library/uuid/00c4041d-188d-2910-6ea2-b4d5155f56e0]
Chintan

How to add a link in the masthead in the portal

Hi,
Actuallly i want to add a new link for ex-help link or user info etc..in the masthead in theportal,can any one please suggest me how to go about it as iam completely new to E.P and have not done any development ,till now have been dealing with support issues ,so your help will be greatly appreciated.
Regards
Pooja

Hi,
Follow this link,
https://www.sdn.sap.com/irj/sdn/go/portal/prtroot/docs/library/uuid/d07bf112-1705-2a10-1a9f-d0a705e550fa
This article will clearly explain how to add a new link in masthead.
I hope this is helpful for you. You have any doubt regards this ask me, i will help you.
Regards
Prakash T

How to add a link to an interactive svg using edge commons library

Similar Messages

Maybe you are looking for