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 Border Radius Generator



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