To add panchangam on your web site/mobile application/mobile website. This will display based on your location. The location is obtained from your browser. for aaccuracy please use WIFI. Please use following code.
STEP #1. paste one of the iframe code into your HTML page.
<iframe name="newpanchang"
id="iframe1" src="https://www.mypanchang.com/newsite/compactfeed.php?pt=12pt"
scrolling="no"
frameBorder="1"
style="border-width:1px;border-style:solid;border-color:#452603;"
allowtransparency="true"></iframe>
if you want to increase font you can add ?pt attribute to the uri.
for example... following code sets size to 10pt.
<iframe name="newpanchang"
id="iframe1" src="https://www.mypanchang.com/newsite/compactfeed.php?pt=10pt"
scrolling="no"
frameBorder="1"
style="border-width:1px;border-style:solid;border-color:#452603;"
allowtransparency="true"/></iframe>
following code increases font to 12pt.
<iframe name="newpanchang"
id="iframe1" src="https://www.mypanchang.com/newsite/compactfeed.php?pt=10pt"
scrolling="no"
frameBorder="1"
style="border-width:1px;border-style:solid;border-color:#452603;"
allowtransparency="true"/></iframe>
whenever you make any changes press <CTRL><F5> to test. If you want to remove border then put frameBorder=0 and change style="border:0". You may experiment with other iframe flags. for eaample: Following will set font to 12 pt and border to 0.
<iframe name="newpanchang"
id="iframe1" src="https://www.mypanchang.com/newsite/compactfeed.php?pt=12pt"
scrolling="no"
frameBorder="0"
style="border:0;"
allowtransparency="true"/></iframe>
If you want to see full panchang and font is 12, the following code will help
<iframe name="newpanchang"
id="iframe1" src="https://www.mypanchang.com/newsite/compactfeed.php?pt=12pt&mode=FULL"
scrolling="no"
frameBorder="0"
style="border:0;"
allowtransparency="true"/></iframe>
STEP-2: Then add following Javascript in your page (IMPORTANT STEP)
<script>
let iframe = document.querySelector("#newpanchang");
window.addEventListener('message', function(e) {
var the_height = document.getElementById('newpanchang')
.contentWindow.document.body.scrollHeight;
var the_width= document.getElementById('newpanchang')
.contentWindow.document.body.scrollWidth;
document.getElementById('newpanchang').height=the_height;
document.getElementById('newpanchang').width=the_width;
} , false);
</script>
IMPORTANT make sure the iframe id here is "newpanchang", if you decide to change it to anything make sure to change newpanchang in the script also, here you can look for document.querySelector function, and the parameter here is the iframe id, make sure to put the new id after the # sign.
No comments:
Post a Comment