zettersten / jquery.gracket.js Goto Github PK
View Code? Open in Web Editor NEWjquery.gracket.js - A jQuery and canvas approach to creating single elimination tournament brackets.
Home Page: https://zettersten.github.com/jquery.gracket.js/
jquery.gracket.js - A jQuery and canvas approach to creating single elimination tournament brackets.
Home Page: https://zettersten.github.com/jquery.gracket.js/
The canvas doesn't line up properly if the Player name is longer than ".g_gracket h3 { min-width ..}". I do believe I worked out a solution that fixes this issue. I can share the jquery.gracket.js file. Is there a way to upload files into the issue?
Is it possible to fill in results and than the next round brackets will be generated automatically?
Uncaught TypeError: Cannot read property 'msie' of undefined
I'm currently implementing this project in a gaming site where the brackets are going to be displayed DURING the tournament.
By passing an array that does not end with a single player winner, none of the lines draw, nor does any of the hover effects work.
Can someone point me in the direction of the correct way of doing this?
Hi Erik,
Not sure if you're still maintaining this, but I'm trying to use gracket for a yearly billiards tournament, and everything is OK in Firefox and IE, but not in Chrome and Safari on IOS.
The boxes with the names of the players are displayed correctly, but the lines between the boxes are not shown.
Any idea what can cause this, please ?
Regards,
Hans
If I take the Live Demo and attempt to run with jquery 1.8.2 I get this error:
Uncaught SyntaxError: Unexpected token o
Any plans to make it work with latest jquery?
The width is not set based on the data in in the Bracket.
http://erik5388.github.com/jquery.gracket.js/
Lowering the width of the browser beneath the required with does not add a scrollbar atm.
Maybe calculate and set the width of the bracket at the end of the init() function. The scrollbar can be done via the overflow: scroll; in the css
This plug-in would be perfect for an app I am working on - but I would need to show the score of a match on the right hand side of each bracket entry in addition to the seed on the left (also my app uses a division winner vs wildcard indicator). Any chance of adding that? Your work is much appreciated!
So - in short, change this:
{"name" : "Erik Zettersten", "id" : "erik-zettersten", "seed" : 1}
To this:
{"name" : "Erik Zettersten", "id" : "erik-zettersten", "seed" : 1, "displaySeed": "D1", "score": 47}
So it would show (for matches that are completed):
[D1] [Eric Zettersten] [47]
Recommend changing "text" in this line to "html" to accomodate markup in Round labels...
for (i = 0; i < len; i++) {
left = (i === 0 ? off.padding + widthPadding : off.padding + widthPadding + (off.right * i));
$("<h5 />", {
"text" : (off.labels.length ? off.labels[i] : "Round " + (i + 1)),
"class" : off["class"]
}).css({
"position" : "absolute",
"left" : left,
"width" : offset.width
}).prependTo(container);
widthPadding += max_round_width[i]
};
Hey there,
I'm currently trying to get this to work with JQuery 1.9.1. Though, I can't get it to work sadly :( Do you know whether it's supposed to work with 1.9.1 or not?
My error is:
$("[data-gracket]").gracket();
SyntaxError: Unexpected token omessage: "Unexpected token o
Byes option is absent in this functionality, otherwise it is a great work
Seems the code is hardcoded for only tournaments with 16 teams. Is that true?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.