Showing Posts From

Javascript

CREATE OWN CAPTCHA FOR YOUR WEBSITE

Hi Geeks, I am sharing you a program forcreating a captcha script using php and javascript. Following are the simple steps to create captcha in php Step 1: Create a php script named ‘captcha.php’ with following code that generate and return a captcha image.Step 2: Now create a captcha.js file and put following code in the file. function reload() { img = document.getElementById("capt"); img.src="captcha.php"; } $(document).ready(function(){ var htm='  '; $('#custom_captcha').html(htm);//set the captcha data in element having id > custom_captcha . you can change as your div/Element id }); Step 3: Now we need to create a Placeholder Element inside the form as following:Step 4: Now after submitting you from validate the captcha was right or not. So in your form submit action use following code.Note 1: In which page/form you are using the capcha , there should be session start in top of the file as following:and also include the js file in your php page head section. jquery should be available before the captcha.js inclusion as following:Note 2: PHP GD LIBRARY SHOULD BE INSTALLED ON YOUR SERVER.

Set frame height dynamically using javascript

Hi Geeks, As I faced the problem in so many times for Set Iframe height dynamically using javascript or setting the Iframe height as per its content, If we add the fix height to Iframe tag directly then it just show the scrollbar in that height but sometime we don’t want to show the scrollable area in that Iframe then there are so complex situation to set the Iframe height for dynamic content and the height may vary or Iframe on content coming from database or any other source. Now we don’t know that what exactly the height of iframe due to its dynamic content, I have tried So many solution for it and finally i left the issue and provide static height to Iframe, i tried all DOM related access manipulations and it just failed due to cross origin and CORS violation issues. But one day for my selfishness in one project i faced same requirement with an Iframe and if i use the Iframe then it was saving my lot of time So i researched for 4-5 hours and finally i got perfect solution for it. SOLUTION : We need to implement the channel communication between parent window and Iframe window by passing the messages . It will work for same or cross domain origins Note : we should have access for the Iframe source page. we’ll post a message from the Iframe source page having a height value to the client domain by using following script // all content including images has been loaded window.onload = function() { // post our message to the parent window.parent.postMessage( // get height of the content document.body.scrollHeight // set target domain ,"*" ) };Now where you are creating Iframe ,Go to that page Like your Iframe is having like thatwe have putted dummy url and set the style to overflow hidden and set frameborder as 0 . and passed width as 100% but didn’t passed the height so for getting calculated the height automatic please put the script as follow // browser compatibility: get method for event // addEventListener(FF, Webkit, Opera, IE9+) and attachEvent(IE5-8) var myEventMethod = window.addEventListener ? "addEventListener" : "attachEvent"; // create event listener var myEventListener = window[myEventMethod]; // browser compatibility: attach event uses onmessage var myEventMessage = myEventMethod == "attachEvent" ? "onmessage" : "message"; // register callback function on incoming message myEventListener(myEventMessage, function (e) { // we will get a string (better browser support) and validate // if it is an int - set the height of the iframe #my-iframe-id if (e.data === parseInt(e.data)) document.getElementById('MY_IFRAME_ID;).height = e.data + "px"; }, false);This script will recieve the message passed from Iframe source origin and add the height of iframe dynamically . Note : MY_IFRAME_ID is the id of Iframe we assumed , you can replace it with your Iframe id in Iframe and script both Please comment below if you have any query related to this post or feature