I just created a cookie consent banner for the website to accept cookies.
Below is my complete code.
<?php
if (isset($_GET['accept-cookies'])) {
setcookie('accept-cookies', 'true', time() + 31556925);
header('Location: unit.php');
}
?>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
body {
margin: 0;
}
.cookie-banner {
display: flex;
align-items: center;
justify-content: center;
background-color: #D4CFD3;
width: 100%;
position: fixed;
bottom: 2px;
left: 0;
font-size: 12px;
}
button {
background-color: #AEA9AD;
border: none;
color: #fff;
padding: 5px;
font-size: 12px;
border-radius: 5px;
}
button:hover {
cursor: pointer;
}
</style>
</head>
<body>
<?php
if (!isset($_COOKIE['accept-cookies'])) {
?>
<div class="cookie-banner">
<div class="container">
<p>This website uses cookies. By using this website you consent to our use of these cookies. For more information visit our <span><a href="#" >Privacy Policy</a>.</span> </p>
</div>
<div>
<button>Accept!</button>
</div>
</div>
<?php
}
?>
<p>This is a website</p>
</body>
</html>
It's working fine, but the page is getting refresh it's because of PHP header redirect used
header('Location: unit.php');
How can I prevent pages refreshing after clicking on the Accept button of the cookie consent banner? I want just the cookie banner to be invisible.
Please help how can I do this.
Thank you.
If you want to keep everything in one page you could update the php-block like so:
<?php
if (isset($_GET['accept-cookies'])) {
setcookie('accept-cookies', 'true', time() + 31556925);
exit;
}
?>
This will prevent the rest of the page from rendering (which is not needed if you don't want a page refresh)
After that change the link to something like this:
<button id="accept-cookies" class="button">Accept!</button>
Then you should use Javascript (example is jQuery) to create an Ajax call to accept the cookies and remove the cookie banner
$('#accept-cookies').on('click', function(e) {
$.ajax({
type: 'GET',
url: '?accept-cookies',
}).done(function() {
$('.cookie-banner').remove();
});
});
Related
How would I be able to load all my login/profile.php files into one specific div without affecting or reloading the rest of my website? I have thought of using $_GET variables to keep the parent url the same and I have used this same tactic for my navigation menu where all my pages load in my #back_drop div.
Below I put together a very basic version of what my site looks like and as you can see the #side_panel is where I would like all my login/profile files to load into while the nav, content, and footer is unaffected by what the #side_panel does. I want to be able to login, logout, get errors, reset password, etc inside this div without it reloading the main portion of my site.
I have an index.php file which is my main index with includes for my header, aside, content, and footer and then I have an entire folder for my php files relating to my login form and other files that will load into my main content page. I didn't want to separate each include so I have them below with comments before each include noting that they are separate so you can see what I am working with.
I am currently loading my login files using an iframe because it is the simplest way to get what I am looking for but have found it very irritating at times especially when I logout and pages requiring to be logged in are still present unless the page is refreshed which seems to be a major security issue.
I have tried to use an include function into my #side_panel but if I attempt to login in, it either won't connect or will end up logging in through the parent url depending on how I edit my login.php file. I am thinking of using $_GET variables but am not sure if that would be a security issue if the variables are in the url but cannot think of any other way
index.php <-- My main index page
<?php
$page = $_GET['page'];
if (!$page) {
$page = 'Home';
}
include('includes/header.php');
echo "<div id='back_drop'><div id='content'>";
include('php/'.strtolower($page).'.php');
echo "</div></div>";
include('includes/footer.php');
?>
aside.php <-- where my login/profile files are included from
<iframe src="php/index.php" height="500px" width="100%" style="position: relative; border:none;"></iframe>
$(document).ready(function(){
$("#show_login").click(function(){
$("#side_panel").toggle("slide");
$("#side_panel").toggleClass("slide");
$(this).find('img').toggle();
if ($("#side_panel").hasClass("slide")) {
$("#back_drop").animate({'padding-left': '0'}, 300);
} else {
$("#back_drop").animate({'padding-left': '230px'}, 300);
}
});
});
* {
margin: 0;
padding: 0;
}
a {
outline: 0;
}
body {
width: 100%;
-webkit-box-pack: center;
background-color: #CCC;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
header, nav, section, aside, footer, article {
display: block;
}
#big_wrapper {
text-align: left;
width: 100%;
display: -webkit-box;
display: -moz-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
}
#top_header {
position: fixed;
width: 100%;
text-align: left;
padding-top: 4px;
padding-bottom: 2px;
padding-left: 4px;
border-bottom: 2px solid #262626;
border-radius: 3px 3px 0 0;
background-color: #404040;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2), 2px 0 2px 2px rgba(0, 0, 0, 0.19);
z-index: 9999;
}
#back_drop {
background-color: #CCC;
padding-top: 10px;
padding-left: 230px;
max-width: 100%;
}
#content {
border: 5px solid red;
height: 500px;
}
#show_login {
float: left;
width: 24px;
padding-top: 12px;
padding-left: 5px;
height: auto;
cursor: pointer;
-webkit-user-drag: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
}
#show_login:active {
width: 23px;
padding-top: 13px;
padding-right: 1px;
}
#side_panel {
position: fixed;
background-color: #a19b9b;
color: #000;
margin-top: 54.491px;
width: 230px;
height: 100%;
word-wrap: break-word;
z-index: 9999;
transform: translateX(0);
}
.slide {
transform: translateX(0);
}
#main_section {
clear: right;
text-align: center;
margin-right: auto;
}
#bottom_footer {
clear: both;
text-align: center;
padding: 20px;
background-color: #404040;
}
<!-- header.php -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id='big_wrapper'>
<header id='top_header'>
<nav id="navigation">
<div id="show_login">
<button>Show</button>
</div>
<div id="main_menu">
<!--Navigation header menu
<?php
$sections = array('Home','nav1','nav2','nav3','nav4','nav5');
foreach($sections as $row) {
echo "<li id='menu_list'><a href='index.php?page=$row'&login='$login'";
if ($row==$page) {
echo "class='active'";
}
echo ">$row</a>";
}
?>-->
</div>
</nav>
</header>
</div>
<div id='side_panel'>
<div id='login_contain'>
<!-- aside.php -->
#side_panel<br>
Where my login/profile pages load in
</div>
</div
<!-- This is what is actually in my code. Commented to show in snippet
<?php
echo "<div id='side_panel'><div id='login_contain'>";
include('includes/aside.php');
echo "</div></div>";
?>
-->
<div id='back_drop'>
<div id='content'>
#back_drop<br>
All my navigation links load only in this div by using href='index.php?page=(($_GET['page']))' and if I could do the same thing maybe for my #side_panel to include all my login/profile pages
</div>
</div>
<!--footer.php -->
<div class="footer_nav">
<!--Navigation footer menu
<?php
$sections = array('Home','nav1','nav2','nav3','nav4','nav5');
foreach($sections as $row) {
echo "<li><a href='index.php?page=$row'>$row</a></li>\n";
}
?>
-->
</div>
<footer id='bottom_footer'>
</footer>
</body>
</html>
Couple things here:
You will want to use AJAX for this, an iFrame is not suitable for your needs
Not sure how much of your dynamic page system is represented in your sample script but you should check on your page call on the $_GET, that method can be dangerous if someone tests your $_GET and includes a page that shouldn't.
/index.php
<?php
# Create an allow array (or have these in a database)
$public = array(
'home',
'about'
'contact'
);
# Check that it's not empty. If not empty, make sure it's allowed. Use home as default
$page = (!empty($_GET['page']) && in_array(strtolower($_GET['page']), $public))? $_GET['page'] : 'home';
# Include normally
include('includes/header.php') ?>
<div id='back_drop'>
<ul>
<li>Home</li>
<li>Contact</li>
<li>About</li>
</ul>
<div id='content'>
<?php include('php/'.$page.'.php') ?>
</div>
</div>
<!-- add jquery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
// On clicking the menu link
$('li > a').on('click',function(e){
// Stop the link from reloading page
e.preventDefault();
// Create ajax
$.ajax({
// Send request as GET
'type': 'get',
// Send to the index page
'url': '/index.php',
// equivalent of ?page={pagename}
'data': {
'page': $(this).attr('href')
},
// When request comes back, find the content and place just the content
// into this page's content
success: function(response) {
// "response" is what is coming back from the ajax all
// Find the content from the returned html
var getContent = $(response).find('#content').html();
// Place it into this page's content id
$('#content').html(getContent);
}
});
});
});
</script>
<?php include('includes/footer.php') ?>
This works good with out a loop but with a loop the first one works but the second one can't set a PHP session value like the first one so how can I get the loop copy to work like the first one meaning being able to set a PHP session value.
*NOTE: THIS IS NOT A HTML FORM THIS IS COSTUME CODE THAT me and my friend MADE FROM a tutorial THAT ACTS LIKE A FORM TO SET A SESSION VALUE.*
tutorial source: https://www.formget.com/submit-form-using-ajax-php-and-jquery/#
I don't want to use a form don't ask me why it's personal so how can I fix this where the loop copy can also set a session value of a session variable i'm saying this because only the first one is able to do that and the second one can't set a session value like the first one.
.gif Screenshot
code
submit_session.php
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>Simulated Form</title>
<meta name="viewport" content="width=device-width">
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
//This section converts the HTML id's in the form div into form values
$(document).ready(function(){
$("#execute").click(function(){
var execute= $("#execute").val();
var name= $("#name").val();
var age= $("#age").val();
var dataString = 'execute='+ execute + '&name='+ name + '&age='+ age;
//AJAX code to submit the simulated form.
$.ajax({
type: "POST",
url: "submit_session.php",
data: dataString
});
});
});
</script>
<style>
.form {
background-color: gold;
width: 200px;
margin: auto;
border-radius: 5px;
padding-top: 5px;
}
.set-value{
background: blue;
padding: 1px 4px;
text-decoration: none;
border: 1px solid gray;
color: white;
margin: auto;
display: block;
width: 100px;
text-align: center;
border-radius: 5px;
}
.name-input {
margin: auto;
display: block;
}
.age-input {
margin: auto;
display: block;
}
</style>
</head>
<body>
<?php
//Generate more than one copy of the simulated form
for ($loop = 0; $loop <= 1; $loop++) {
?>
<br>
<!--The simulated form-->
<div class="form">
<p style='text-align: center;'>Simulated form</p>
<input type="text" id="name" class='name-input' required="required" placeholder='Name' autocomplete="off">
<br>
<input type="text" id="age" class='age-input' required="required" placeholder='Age' autocomplete="off">
<br>
<!-- Simulated form submit button -->
<a class="set-value" id="execute" href="view-session-values.php">Set value</a>
<br>
</div>
<?php
echo $loop;
}
//Set session values from a simulated form
if(isset($_POST['execute'])){
$name = $_POST['name'];
$age = $_POST['age'];
if($check=1){
$_SESSION['name']=$name;
$_SESSION['age']=$age;
echo "<script>window.open('_self')</script>";
}
}
?>
</body>
</html>
view-session-values.php
<?php
session_start();
$name = $_SESSION['name'];
$age = $_SESSION['age'];
?>
<!DOCTYPE html>
<html>
<head>
<style>
#set-new-session-value {
background-color: black;
color: white;
padding: 5px 5px;
text-decoration: none;
border-radius: 5px;
}
#destroy-session-value{
background-color: black;
color: white;
padding: 5px 5px;
text-decoration: none;
border-radius: 5px;
}
</style>
</head>
<body>
<!--This section is based on choosing session options -->
<br>
<a id='set-new-session-value' href="submit_session">Set new session value</a>
<a id='destroy-session-value' href="destroy_session.php">Destroy session value</a>
<br>
<!--This section is where the set session values are shown-->
<p><?php echo $name; ?></p
<p><?php echo $age; ?></p>
</body>
</html>
I am trying to figure out how to display an image while PHP runs and disappears after.
I grabbed this code from a site, but the image only shows very briefly at the very end of the PHP loading. It doesn't show when the page initially opens and it only seems to run once.
I have read many and many of websites and threads on here, but I can't figure out what is missing in this simple example. Is there a better way to do this? Or is this it and I just need to fix it?
THANK YOU in advance!
<html>
<head>
<title>Home</title>
<style>
/* This only works with JavaScript,
if it's not present, don't show loader */
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(http://smallenvelop.com/wp-content/uploads/2014/08/Preloader_51.gif) center no-repeat #fff;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
<script>
// Wait for window load
$(window).load(function() {
// Animate loader off screen
$(".se-pre-con").fadeOut("slow");;
});
</script>
</head>
<body>
<div id="loader" class="se-pre-con"></div>
<?php
include 'content/screen.php';
?>
</body>
</html>
SOLVED! I found and modified this AJAX code that worked for exactly what I was looking for (same page load with multiple options on what to load (by links). Thanks for all of the helpful messages directing me on the right path! This community is awesome!
<head>
<title>Demo</title>
<style>
#fade {
display: none;
position:absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #ababab;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .70;
filter: alpha(opacity=80);
}
#modal {
display: none;
position: absolute;
top: 45%;
left: 45%;
width: 64px;
height: 64px;
padding:30px 15px 0px;
border: 3px solid #ababab;
box-shadow:1px 1px 10px #ababab;
border-radius:20px;
background-color: white;
z-index: 1002;
text-align:center;
overflow: auto;
}
</style>
<script>
function openModal() {
document.getElementById('modal').style.display = 'block';
document.getElementById('fade').style.display = 'block';
}
function closeModal() {
document.getElementById('modal').style.display = 'none';
document.getElementById('fade').style.display = 'none';
}
function loadAjax(page) {
document.getElementById('results').innerHTML = '';
openModal();
var xhr = false;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
if (xhr) {
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
closeModal();
document.getElementById("results").innerHTML = xhr.responseText;
}
}
xhr.open("GET", "content/"+page+".php", true);
xhr.send(null);
}
}
</script>
</head>
<body>
<div id="content">
Click to load page 1<br/><br/>
Click to load page 2<br/><br/>
<div id="results"><!-- Results are displayed here --></div>
<div id="fade"></div>
<div id="modal">
<img id="loader" src="loading.gif" />
</div>
</div>
</body>
</html>
It has all to do with the output buffering PHP applies.
This Stack Overflow link explains why it doesn't work as expected, a possible way to make it work and why you shouldn't make it work that way.
PHP always (unless specifically told not to) buffers the output before printing it. That means that when you actually print, PHP just stores the output text in the memory. After everything is printed, the contents stored in the memory gets printed and the memory gets flushed. It is not only PHP that does that. Almost all the I/O libraries across many languages and platforms has this feature, which is generally enabled by default.
Here is a relevant link that shows all the possible options to bypass or disable this feature. I personally think that you shouldn't disable it because the image will still need to be loaded and you won't be able to control the latency between PHP loading and image loading. I think in this situation maybe a solution that involved Ajax is more suitable for your needs.
Are you trying to show a loading animation/image for the PHP operation? If yes, then you should definitely do it with Ajax on a separate action.
Edit: sorry about not pasting the link: How to disable output buffering in PHP
Here's how to apply Show image while page is loading to your situation.
Replace your php tag with a div like this:
<div id="main"></div>
Then change your fadeout script like this:
<script>
$(document).ready(function() {
$("#main").load("content/screen.php", function () {
// Animate loader off screen
$(".se-pre-con").fadeOut("slow");
});
});
</script>
I was following this tutorial to learn about the include and include_once functions in PHP.
The following files work just fine:
index.php:-
<?php
include_once 'header.php';
echo 'variable';
header.php:-
<h1>My Page's Header</h1>
But when I try to include the following .php file into my index.php, it does not produce the desired result. The header rather overlaps and thus completely hides the 'variable'
What I want is that after I include the header from an external file, My page should start underneath the header. The header included from external file should not be considered included in my page, so none of the elements are overlapped or such. How can I achieve that?
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.top-bar {
position: fixed;
width: 100%;
top: 0px;
left: 0px;
background: #000029;
padding: 5px;
}
.logo {
display: inline-block;
vertical-align: top;
color: white;
}
</style>
</head>
<body>
<div class="top-bar">
<img src="https://www.google.com.pk/images/srpr/logo11w.png" alt="Logo" class="logo" >
</div>
</body>
</html>
<?php
include_once 'header.php';
?>
<div id="parent_div" >
<script>
function getHeaderHeight() {
return document.getElementById("top-bar").height(); //top-bar is in header.php
}
document.getElementById("parent_div").style.padding-top="getHeaderHeight()";
</script>
<h1>Heading</h1>
</div>
That's because your header is set to position: fixed;. It is taken out of the document flow and will follow you as you scroll arround.
When you want it to not stick to the client top, change your css to this:
.top-bar {
position: relative;
background: #000029;
padding: 5px;
}
If you like your header to be fixed, you may also set a padding to the body of the document, that equals the height of your header.
Here you see your current problem: http://jsfiddle.net/Lc3W8/
Solution 1: http://jsfiddle.net/Lc3W8/1/
body
{
margin:0;
padding:0;
height: 3000px;
/*new:*/
padding-top: 30px;
}
.top-bar
{
position: fixed;
left:0;
right:0;
top:0;
height: 30px;
background-color: blue;
}
Solution two: http://jsfiddle.net/Lc3W8/2/
body
{
margin:0;
padding:0;
height: 3000px;
}
.top-bar
{
height: 30px;
background-color: blue;
}
I'm currently working on a wordpress site and i'm using the same page-templates on two pages. The page-template file is single.php . Now i've got a history back button that needs to be on one of the pages and not on both. Also i'm using the permalinks. Well since i'm not that good at php i'm going to ask you to help me out. I've already found the following code on the internet but i can't get it to work:
The php:
<?php
if (strpos($_SERVER["REQUEST_URI"], "localhost:8888/sunbook/reader-comments/") >= 0) {
$historyback_class = "showme";
}
else {
$historyback_class = "hideme";
}
?>
The html:
<div id="historyback" class='<?php echo $historyback_class; ?>'>
<script>
function goBack()
{
window.history.back()
}
</script>
<input type="button" value="Back" onclick="goBack()">
</div>
The css:
#historyback { margin-left: auto; margin-right: auto; width: 95%; max-width: 920px; color: #bfbfbf; font-size: 23px; font-family: 'RobotoLight', Arial, sans-serif; line-height: 28px; margin-bottom: 0px; }
.hideme { display: none; }
.showme { display: block; }
I think the problem is in the requested uri because everywhere I see they are calling a php file. Which in my case seems impossible because the templates are the same so that itsn't going to work.