I use the Vanilla JS Component at https://github.com/guitarbeerchocolate/vanilla-js-component, and you have LAMP server on my box. However, when I want to call PHP scripts which are on the LAMP server such as, in a POST request using fetch or XHR within JavaScript I get the following errors in my browser:
Access to XMLHttpRequest at 'http://localhost/test/vanilla-js-POST-JSON/login.php' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
postjson_xhr.js:19 Cross-Origin Read Blocking (CORB) blocked cross-origin response http://localhost/test/vanilla-js-POST-JSON/login.php with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.
Obviously, it's treating the LAMP server like another domain.
The way to fix this is to put a line at the top of your PHP script thus:
header('Access-Control-Allow-Origin: *');
Happy coding.
Showing posts with label browser. Show all posts
Showing posts with label browser. Show all posts
Thursday, 7 March 2019
Wednesday, 22 April 2015
Display PHP code in the browser
There are 2 ways to do this I've recently discovered:
First, use the highlight_file command thus,
highlight_file('hello.php');
Second, allow .phps files. To do this (I'm using an Ubuntu Apache on local host here), go to the file /etc/apache2/mods-available/php5.conf
Change the line highlighted in red to the one highlighted in blue
<FilesMatch ".+\.phps$">
SetHandler application/x-httpd-php-source
# Deny access to raw php sources by default
# To re-enable it's recommended to enable access to the files
# only in specific virtual host or directory
Order Deny,Allow
Deny from all
Allow from all
</FilesMatch>
Now, if you rename hello.php to hello.phps and display it in your browser, it will show as PHP code.
Hope this helps.
First, use the highlight_file command thus,
highlight_file('hello.php');
Second, allow .phps files. To do this (I'm using an Ubuntu Apache on local host here), go to the file /etc/apache2/mods-available/php5.conf
Change the line highlighted in red to the one highlighted in blue
<FilesMatch ".+\.phps$">
SetHandler application/x-httpd-php-source
# Deny access to raw php sources by default
# To re-enable it's recommended to enable access to the files
# only in specific virtual host or directory
Order Deny,Allow
Deny from all
Allow from all
</FilesMatch>
Now, if you rename hello.php to hello.phps and display it in your browser, it will show as PHP code.
Hope this helps.
Monday, 10 November 2014
Extend your footer to the browser window using jQuery
Some pages only have a small amount of content and aesthetic reasons you'l like your page footer to extend all the way to the edge of the browser window. There are ways to do this using CSS, but this method also requires to to code your pages differently too. I like to keep the code of my pages straight forward. HTML should not be altered for styling purposes.
So I wrote a jQuery plugin to do this. See below.
(function($)
{
$.fn.extend(
{
footersizeset: function(options)
{
var defaults =
{
footertag:'footer',
ofh:100
};
options = $.extend(defaults, options);
var windowheight = $(this).height();
var footer = $(options.footertag);
var footerposition = footer.position();
var footerheight = options.ofh;
var footerbottom = footerheight + footerposition.top;
if(windowheight > footerbottom)
{
difference = windowheight - footerbottom;
footer.height(footerheight + difference);
}
}
});
})(jQuery);
Here's how to call the plugin. First you find what the height of the footer would be before the footer is reset. This is done outside all other jQuery calls so that this value doesn't keep getting reset as the browser window size changes.
Then, I make 2 calls to the plugin, once for the page load and subsequently for browser window changes.
var originalfooterheight = $('footer').height();
(function()
{
$(window).footersizeset(
{
footertag:'footer',
ofh:originalfooterheight
});
$(window).resize(function()
{
$(this).footersizeset(
{
footertag:'footer',
ofh:originalfooterheight
});
});
})();
Hope that makes sense.
So I wrote a jQuery plugin to do this. See below.
(function($)
{
$.fn.extend(
{
footersizeset: function(options)
{
var defaults =
{
footertag:'footer',
ofh:100
};
options = $.extend(defaults, options);
var windowheight = $(this).height();
var footer = $(options.footertag);
var footerposition = footer.position();
var footerheight = options.ofh;
var footerbottom = footerheight + footerposition.top;
if(windowheight > footerbottom)
{
difference = windowheight - footerbottom;
footer.height(footerheight + difference);
}
}
});
})(jQuery);
Here's how to call the plugin. First you find what the height of the footer would be before the footer is reset. This is done outside all other jQuery calls so that this value doesn't keep getting reset as the browser window size changes.
Then, I make 2 calls to the plugin, once for the page load and subsequently for browser window changes.
var originalfooterheight = $('footer').height();
(function()
{
$(window).footersizeset(
{
footertag:'footer',
ofh:originalfooterheight
});
$(window).resize(function()
{
$(this).footersizeset(
{
footertag:'footer',
ofh:originalfooterheight
});
});
})();
Hope that makes sense.
Monday, 17 June 2013
Catching browser buttons
I was recently putting together an application. My test user did something I wasn't expecting. Rather than using the buttons within the application, he went for the browser buttons. It prompted me to provide a warning for the user that the application wouldn't work so well if he did this. See code below:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test page</title>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
</head>
<body>
<a href="index2.php">Go to page 2</a>
<script>
(function()
{
catchBrowser = true;
$('a').click(function()
{
catchBrowser = false;
});
$(window).bind('beforeunload', function()
{
if(catchBrowser == true)
{
return 'Please use only the buttons within the application pages.';
}
else
{
return;
}
});
})();
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test page</title>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
</head>
<body>
<a href="index2.php">Go to page 2</a>
<script>
(function()
{
catchBrowser = true;
$('a').click(function()
{
catchBrowser = false;
});
$(window).bind('beforeunload', function()
{
if(catchBrowser == true)
{
return 'Please use only the buttons within the application pages.';
}
else
{
return;
}
});
})();
</script>
</body>
</html>
Wednesday, 19 October 2011
I was forced to find an IE Tester
First post in a long time. I've been very busy.
Normally, by keeping to W3C standards, I can develop a site and then do some tweaks for IE at the end. Recently developed an application in which I tested for IE along the way. Or so I thought. I was in fact, testing in IE8. Not good enough. The application came out a total mess in IE7. This was one particular customers IT Department browser of choice. This seems like a ramble but I'm getting to the point.
I then discovered IE Tester at http://www.my-debugbar.com/wiki/IETester/HomePage. This is an excellent tool if you need to view your work in various versions of IE without messing up your existing install. It works stand-alone and also happily access pages delivered by your localhost.
Well done DebugBar!
Normally, by keeping to W3C standards, I can develop a site and then do some tweaks for IE at the end. Recently developed an application in which I tested for IE along the way. Or so I thought. I was in fact, testing in IE8. Not good enough. The application came out a total mess in IE7. This was one particular customers IT Department browser of choice. This seems like a ramble but I'm getting to the point.
I then discovered IE Tester at http://www.my-debugbar.com/wiki/IETester/HomePage. This is an excellent tool if you need to view your work in various versions of IE without messing up your existing install. It works stand-alone and also happily access pages delivered by your localhost.
Well done DebugBar!
Tuesday, 2 November 2010
Cross-browser minimum-height
Of course, so many things require hacks to work on all browsers. It's been the way of the web world for years. Actually since the emergence of IE. The example also points to a new trend in my designs to use em for sizing things other than just fonts.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cross-browser minimum-height</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
section
{
margin:0 auto;
width:50em;
background:#FF0000;
color:#FFFFFF;
/* The minimum height stuff */
min-height:10em;
height:auto !important;
height:10em;
}
</style>
</head>
<body>
<section>
<h1>Hello World!</h1>
</section>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cross-browser minimum-height</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
section
{
margin:0 auto;
width:50em;
background:#FF0000;
color:#FFFFFF;
/* The minimum height stuff */
min-height:10em;
height:auto !important;
height:10em;
}
</style>
</head>
<body>
<section>
<h1>Hello World!</h1>
</section>
</body>
</html>
Subscribe to:
Posts (Atom)