Some tips about using your own CSS Style Sheets in Blogger

So I have been trying to fix the Pie Chart Generator, I had a problem in displaying the CSS results.

HOW it WAS

The old generator was working this way:


  • Fetching Colors and Percentages then place them in arrays.
  • Inserting CSS rules directly inside a style sheet:
document.styleSheets[6].insertRule("#pieSlice12{}",2);
  • Editing these CSS rules using:
               document.styleSheets[6].cssRules[(parseInt(document.styleSheets[6].cssRules.length)-1)].style.transform="rotate(180deg)";
  • Then I display all these rules by going through a loop.
PROBLEM

The problem I faced is that Blogger uses a different number of style sheets in each browser, and working this way, I was mixing my own CSS styles with Blogger's own CSS styles, so it was difficult to know the position of my generated rules.

FIX

The best workaround I found was to create my own style sheet.

<style id="mySheet">
</style>

Then I could manipulate CSS styles using:

document.getElementById("mySheet").sheet.cssRules[1]; 

I no longer need to know the index of the style sheet, I can call it directly using the ID, and I just had to add the sheet property.

Pie Chart Javascript Library

The JS Library is now on GitHub! Download it, Fork it, Add some spices to make it more delicious!

I noticed that the Pie Chart Generator is being used a lot, so I decided to improve the way we can create this pie, using the generator you can only create static pies, but what if we need to create a pie based on numbers from a database?


How to create Pure CSS3 Preloaders










Pure CSS3 Pie Chart Generator

The Pie Chart Generator will create your desired Pie in a very easy to use interface, no additional codes are required, no Javascript, just set the colors of those slices and their percentage.

CSS Triangle Generator



The Triangle Generator is a tool which helps you create HTML triangles. Go to Triangle Generator

CSS Border Radius Generator



The Border Radius Generator is a tool which helps you create HTML elements with rounded corners. Go to Border Radius Generator