Percentages in clip-path about clip-path-polygon HOT 8 CLOSED

Hey, I'll take a look at that (possibly this week, maybe today?). Thanks!

EDIT:
Hey, I've quickly added the functionality, you can test it using this file:
https://github.com/andrusieczko/clip-path-polygon/blob/2-percentage-in-clippath/build/clip-path-polygon.min.js

It's on 2-percentage-in-clippath branch.

I'll add the tests and update the documentation later, then merge to master and bump the version . Until then, the minified file should work fine.

You can see the usage here:
https://github.com/andrusieczko/clip-path-polygon/blob/2-percentage-in-clippath/example.html

Numbers have to be between 0 and 100, the option is called isPercentage.

Thanks!

from clip-path-polygon.

Oh, yes!
IT works, good job.

I saved your script to my ftp.
I use it with https://github.com/srobbin/jquery-backstretch - no conflict and very good combination!

Edit:
How to define two polygon, please?
I need 2 types .Arrow for head, and double arrow for portfolio and foot.

$(function() {
var points = [[50, 0], [100, 0], [100, 85], [50, 99], [0, 86],[0, 0]];
$('#head').clipPath(points, {isPercentage: true});
});
$(function() {
var body = [[50, 7], [100, 0], [100, 93], [50, 100], [0, 93],[0, 0]];
$('#portfolio').clipPath(body, {isPercentage: true});
});
$(function() {
var body2= [[50, 7], [100, 0], [100, 93], [50, 100], [0, 93],[0, 0]];
$('#foot').clipPath(body2, {isPercentage: true});
});

Nice day!
Martina

from clip-path-polygon.

Hey, I'm glad it worked.

Unfortunately, I think I didn't fully understand your question though...

Don't you want to have it like that?

$(function() {
  var points = [[50, 0], [100, 0], [100, 85], [50, 99], [0, 86],[0, 0]];
  var body = [[50, 7], [100, 0], [100, 93], [50, 100], [0, 93],[0, 0]];
  var options = {isPercentage: true};
  $('#head').clipPath(points, options);
  $('#portfolio').clipPath(body, options);
  $('#foot').clipPath(body, options);
});

from clip-path-polygon.

Yes, something like this, but first #head may be some other polygon than
portfolio and foot.

Please have a look on this:

My error screenshot: http://snag.gy/5VHVV.jpg

I code this .psd:
http://gdj.gdj.netdna-cdn.com/wp-content/uploads/2014/04/arrow_psd_templates.jpg

Understand you, what I want?
Thanks for reply! :-)

2015-04-01 15:11 GMT+02:00 Karol Andrusieczko [email protected]:

Hey, I'm glad it worked.

Unfortunately, I think I didn't fully understand your question though...

Don't you want to have it like that?

$(function() {
var points = [[50, 0], [100, 0], [100, 85], [50, 99], [0, 86],[0, 0]];
var body = [[50, 7], [100, 0], [100, 93], [50, 100], [0, 93],[0, 0]];
var options = {isPercentage: true};
$('#head').clipPath(points, options);
$('#portfolio').clipPath(body, options);
$('#foot').clipPath(body, options);
});

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

from clip-path-polygon.

I think you might want to use the option svgDefId to have different definitions of clippath. Is that what you're looking for?

$head.clipPath({svgDefId: 'headClippathDef'});
$foot.clipPath({svgDefId: 'footClippathDev'});

from clip-path-polygon.

Yes, I think, that is!
But - how, please? :-(

2015-04-01 17:31 GMT+02:00 Karol Andrusieczko [email protected]:

I think you might want to use the option svgDefId to have different
definitions of clippath. Is that what you're looking for?

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

from clip-path-polygon.

Hey, please find the documentation updated here:
https://github.com/andrusieczko/clip-path-polygon

and the example:
https://raw.githubusercontent.com/andrusieczko/clip-path-polygon/master/resources/example.html

(just download the file and open in the browser).

I hope it'll help!

from clip-path-polygon.

Yes, It´s perfect for me :).
Looking like a psd template :).

Thanks for all, and good luck.

M.

from clip-path-polygon.