Add a link about vivus HOT 16 CLOSED

Hi there,
Yes, you just need to provide the attribute file with the file link as value. Be careful, there's some restrictions, the file must be on the same domain as the page and cannot be used on a local file (: protocol file:///). It's not my lazyness, it's due to security reasons from browsers.

Your HTML

<div id="my-container"></div>

Your script

new Vivus('my-container', {
  type: 'delayed',
  duration: 200,
  animTimingFunction: Vivus.EASE,
  file: '/link/to/my.svg'
});

from vivus.

Thank you for your help.
You didn't understand me correctly.
I use file: '/link/to/my.svg' to add an SVG image.

I wand to add URL link that people can click on SVG to open a page or a website.

is that possible?
thanks

from vivus.

Oh sorry, my bad.
It's possible but not from the constructor. You must use a listener for that.

var myAnimation = new Vivus('my-container', {
  type: 'delayed',
  duration: 200,
  animTimingFunction: Vivus.EASE,
  file: '/link/to/my.svg'
});

myAnimation.el.addEventListener('click', function () {
    document.location = '//github.com';
});

It's not really cool because we loose a bit of accessibility but it works.

Otherwise I would recommend you to wrap the SVG container into a <a> tag.

<a href="//github.com">
    <div id="my-container"></div>
</a>

from vivus.

I will try both options and get back. I tried the second option but it didn't work for me.
thanks

from vivus.

it's not working for me.
here is a video for option 1: http://quick.as/PkzBFBbkX
here is a video for option 2: http://quick.as/n8PdCVOR3

here is a live demo for option 2 http://020018.businesscatalyst.com/index.html

I hope you can help
thanks

from vivus.

You made a mistake on the option 1. You set the listener on myAnimation object instead of svg1 which is your Vivus instance.

from vivus.

Any luck?

from vivus.

Sorry, I was out of town.
I tried. no luck :(
here is a link http://020018.businesscatalyst.com/index.html

from vivus.

Oh.. I realised my mistake. You will need to do it when the SVG is loaded:

var svg1 = new Vivus('svg1', {
  type: 'delayed',
  delay: 100,
  duration: 200,
  start: 'inViewport',
  animTimingFunction: Vivus.LINEAR,
  file: '/assets/enter.svg',
  onReady: function (mySvg) {
    mySvg.el.addEventListener('click', function () {
      document.location = '//github.com';
    });
  }
});

from vivus.

it is not working any more :)
http://020018.businesscatalyst.com/index.html

from vivus.

It's a syntax error. You forgot a comma after the filename.
On 28 Aug 2015 3:11 am, "termoplus" [email protected] wrote:

it is not working any more :)
http://020018.businesscatalyst.com/index.html

—
Reply to this email directly or view it on GitHub
#63 (comment).

from vivus.

great!!!
is it possible to change cursor to hand if SVG has a link?

thanks

from vivus.

it this method not really cool because we loose a bit of accessibility but it works or that's why now?

from vivus.

In the onReady callback, just add this line:

mySvg.el.style.cursor = 'pointer';

then your code should look like this:

var svg1 = new Vivus('svg1', {
  type: 'delayed',
  delay: 100,
  duration: 200,
  start: 'inViewport',
  animTimingFunction: Vivus.LINEAR,
  file: '/assets/enter.svg',
  onReady: function (mySvg) {
    mySvg.el.style.cursor = 'pointer';
    mySvg.el.addEventListener('click', function () {
      document.location = '//github.com';
    });
  }
});

When I mention loosing accessibility, I'm talking about respecting HTML standards instead of mimic the natural behavior in JavaScript. For example, a user cannot make a right click on your SVG, then choose Open link in a new page. But you don't really have the choice. Don't worry about it.

from vivus.

Any updates?

from vivus.

Great!
I meant is it possible to be a hand cursor only if there is a link in the SVG.
Now it's all the time :(

Thank you for your help. I appreciate it.

from vivus.