Complete Quran Site Code developed with GlobalQuran api in javascript. you can use it anywhere, on desktop or just upload on any site with your own layouts.
Pull request Compare This branch is 56 commits behind GlobalQuran:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


بسم الله الرحمن الرحيم - In the name of Allah, Most Gracious, Most Merciful

This Repository have all the scripts to get you started for your Quran Project for your website or for any device that uses html/javascript structure.

we will be adding more scripts to help you build your own Quran project.


complete list of features.

Getting Started

  • Online Demo - Live Online Demo

  • Blog - Get to know what's new coming or has been came.

  • About us - About the project and people who are behind it.

  • Documentation & Tutorials (writing documentation - coming soon) - Learn about code and also use our Quran data through REST API.

Little about repository folders structure

  • auto-html [Recommanded] - This will pull html/javascript/css and push directly from your site to users. if any updates took place on the code, you will always be up to date.

  • dynamic-html [Live (we use this)] - you can modify complete layout through html/css/javascript. full control for any kind of developers.

  • static-html [Testing] - if you plan to change css only, then you can use this for testing only. complete javascript code is not included in this.

  • PSD-html [Designer] - if you are designer and want to change/create site/icons.

  • plugins - Helps you extend the features of your site. developers are welcome to add there own plugins here.



if you are installing this in wordpress, then try our easy to add wordpress plugin.

auto-html - if you choose to use this.

1. edit index.php and change following settings:

* $api_url = ''; -- pointing to main site. 
* $api_key = ''; -- put your api key from .... (coming soon) - for now ignore this and keep checking for updates or

subscribe on facebook-twitter for updates

2. save the file. 
3. upload directly where you want to host it (ex: www). you can even change the file name from index.php to any name
(ex: quran.php).

[Tip] if you want to change css for this dynamically fetching html, then you have to edit index.php, once it gets 
the html from site, then just find global.css and replace it with your own.

dynamic-html - if you choose to use this.

1. edit index.html (optional)    
2. save the file. 
3. upload the dynamic-html directory to any directory you wish to use it at (ex: www or www/quran)

[Note] you can edit any file in it and check it with online preview. - you can test it on local-server as well.

static-html - use this for css testing only. for creating new css or modifying old one.

[Note] once you download this folder, you can test it without even putting on server.

 if you are creating new css layout called 'fancyDesign', then create new sub-folder at images/themes/fancyDesign and put
 all your css files and images in this folder, following is recommended settings for this folder.

 * fancyDesign/ - images/css files and folders here.
 * fancyDesign/css - all the css files here
 * fancyDesign/css/global.css - complete css
 * fancyDesign/css/print.css - printing version


Plugins are great way to extend the site features. we welcome all the developers to add there own plugins here and so people can use it for there sites/applications. if you know any muslim developer, then feel free to share this area with them, so they can add there own plugins here.


Help Forum - Search forum for Q&A or just Ask one.

FeedBack and Bug reports

If you use this library and find yourself missing any functionality I have missed, please let me know.

Bug reports and Feature suggestions are welcomed.



Basit <>

Thanks to

Everyone in this list.


See the CHANGELOG.rdoc file for details.


Copyright © 2006-2011 is free software released under the Simple Public License (Simple-2.0).