April 11, 201412 yr Hi all, when you go to this webpage: http://www.doncartel.nl/wk2010/index.php?location=stats you see a sort off "poll results".. Can anyone tell me how I get something like this? So I mean the graphic bar with the procents... When I use firebug, I see it's all done with css classes and stuff... but I don't know how to start with it. Thank you for your help!
April 12, 201412 yr That is not 'done with css', the css is used for the styling and to label each bar with an id and/or class. Scripting is used to target each label applied by the css to inject the current information for that individual element. To create a basic version of this with just one bar start with an svg image and targeting the elements within the images XML. This is a far more basic way to tackle what has been done on the site you quoted, but will get you started on the principles. You will need to use PHP5, JavaScript, HTML5, XML/XHTML, and CSS3 to do this.
April 12, 201412 yr Author I know how to make a svg picture, but I've never worked with it. Can you give me an example for the php code?
April 12, 201412 yr That is not 'done with css', the css is used for the styling and to label each bar with an id and/or class. Scripting is used to target each label applied by the css to inject the current information for that individual element. To create a basic version of this with just one bar start with an svg image and targeting the elements within the images XML. This is a far more basic way to tackle what has been done on the site you quoted, but will get you started on the principles. You will need to use PHP5, JavaScript, HTML5, XML/XHTML, and CSS3 to do this. what? To create those bars you need nothing more than basic html/css. How you get the information is another matter. To start with: http://css-tricks.com/css3-progress-bars/
April 13, 201412 yr what? To create those bars you need nothing more than basic html/css. How you get the information is another matter. To start with: http://css-tricks.com/css3-progress-bars/ To make 2 or 3 static progress bars, yes that is easy, but the example site had dozens of progress bars. Each one would need updating constantly and thus static would be useless. So then it is time to go dynamic, the output in an element inspector (part of your browser) will still look static, but nobody has sat there for 3 or 4 hours a day updating the individual bars. This is done by 'injecting' the data into the elements which is easiest done in xml format which can be passed directly to an svg image. The svg image will then load the 'gradient.png' as many times as it needs to in order to fill the entire path. With a simple loop and a couple of arrays all of these progress bars can be automatically updated. I know how to make a svg picture, but I've never worked with it. Can you give me an example for the php code? Unfortunately I know/understand how this is done but have never done it myself and thus cannot give you an example of the code. I do however know that within the manuals for 'Inkscape' the basics of how to address the components of an svg in this manner through it's xml file are covered. the process should be the same for all svg files.
April 13, 201412 yr While you could probably do it that way, evu is correct in that the bars are just a div containing another div that is x% width of its container.The data would probably be retrieved as JSON, used to style the div and then appended to the page.Here's a very basic example. http://jsfiddle.net/DDMdN/
April 14, 201412 yr Hi all, when you go to this webpage: http://www.doncartel.nl/wk2010/index.php?location=stats you see a sort off "poll results".. Can anyone tell me how I get something like this? So I mean the graphic bar with the procents... When I use firebug, I see it's all done with css classes and stuff... but I don't know how to start with it. Thank you for your help! The jquery ui progressbar is what you, have a look, let me know if you have any queries https://jqueryui.com/progressbar/#indeterminate
Create an account or sign in to comment