I would like to make a site where a popup appears once in 24h for every unique user. For this I use bPopup and cookies. I have tried lot of things and for now I am kind of "lost" in the code. Could you help me to make it work how it is supposed to be?
The code:
<?php
if (!isset($_COOKIE["Seen"])){
if ($_COOKIE['Seen'] != 'true') {
setcookie('Seen', 'false');
}
}
?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"> </script>
<script type="text/javascript" src="js/popup.js"> </script>
<LINK REL=StyleSheet HREF="style/style.css" TYPE="text/css" MEDIA=screen>
<html>
<head> </head>
<body>
<!-- Element to pop up -->
<div <?php if(isset($_COOKIE["Seen"])) {
if ($_COOKIE['Seen'] == 'true') {echo 'style="all:none; visibility:hidden; display:none">';}
else {
echo ' id="element_to_pop_up">';
$value = 'true';
$expire = time()+60*60*24;
setcookie('Seen', $value, $expire);
}
}
?>
<a href="#"class="b-close" style="position:absolute; margin-top:5px; margin-left:550px;"><img src="./image/close.png"><a/>
<iframe frameBorder="0" name="iFrame" width="600" height="500" src="welcome.php" scrolling="no"></iframe>
</div>
</body>
</html>
What about something like:
if(!isset($_COOKIE['popup']))
{
setcookie('popup', time());
echo '<script>alert(\'Here is your daily cookie :)\');</script>';
}
else
{
if((time() - $_COOKIE['popup']) > (60*60*24))
{
setcookie('popup', time());
echo '<script>alert(\'I see you enjoy our cookies, thanks for returning :)\');</script>';
}
}
Try this code. You don't need to check twice if the cookie is set since you're accounting for this at the top and setting to false. This code will set it to false if it is not set OR if (for some reason) it is not 'true'. Then, half way down, it will only need to check if it is true or not.
It's also best to just have a separate opening div open for each conditional, otherwise it can get very confusing and sloppy real fast.
<?php
if (!isset($_COOKIE['Seen']) || $_COOKIE['Seen'] != 'true') {
setcookie('Seen', 'false');
}
?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"> </script>
<script type="text/javascript" src="js/popup.js"> </script>
<LINK REL=StyleSheet HREF="style/style.css" TYPE="text/css" MEDIA=screen>
<html>
<head> </head>
<body>
<!-- Element to pop up -->
<?php
if ($_COOKIE['Seen'] == 'true') {echo '<div style="all:none; visibility:hidden; display:none">';}
else {
echo '<div id="element_to_pop_up">';
$value = 'true';
$expire = time()+60*60*24;
setcookie('Seen', $value, $expire);
}
?>
<a href="#"class="b-close" style="position:absolute; margin-top:5px; margin-left:550px;"><img src="./image/close.png"><a/>
<iframe frameBorder="0" name="iFrame" width="600" height="500" src="welcome.php" scrolling="no"></iframe>
</div>
</body>
</html>
Related
I am working on building a site, but right now it has several images that I don't have actual images for yet. As this site has thousands of images or places where images should be, I don't want to have to manually change each of them and then change them again when I find the correct image. Is there a way to create a function that will look for the missing images and replace them with a specified image until the correct image is found?
Update: Since I am still a bit confused as to where to even place this function, I am going to add the code for one of the pages that I need this for then maybe someone can help me figure out how to place it.
Here is the code for one of the pages:
<?php
require_once('dbconnection.php');
mysqli_select_db($conn, $dbname);
$query_master = "SELECT DISTINCT * FROM `master_list` INNER JOIN types_join ON master_list.join_id=types_join.join_id WHERE `type_id` = 171 ORDER BY `item_id`";
$master = mysqli_query($conn, $query_master) or die(mysqli_error());
$row_master = mysqli_fetch_assoc($master);
$totalrows_master = mysqli_num_rows($master);
?>
<!doctype html>
<html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flower Trees</title>
<link href="/css/styles.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" type="image/png" href="img/favicon.png">
</head>
<body>
<div class="wrapper">
<a id="top"></a>
<?php require_once('header.php'); ?>
<?php require_once('nav.php'); ?>
<div class="category"><h2>Flower Trees</h2></div>
<div class="display">
<?php do { ?>
<ul>
<li><a href="details.php?recordID=<?php echo $row_master['master_id']; ?>"><img class="thumb" src="img/<?php echo $row_master['img']; ?>"/>
<br />
<span class="name"><?php echo $row_master['name']; ?></span></a></li>
</ul>
<?php } while ($row_master = mysqli_fetch_assoc($master)); ?>
<!-- end .display --></div>
<?php
mysqli_free_result($master);
?>
<?php require_once('footer.php'); ?>
<!-- end .wrapper --></div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
Since this is as simple as a foreach loop, and not tons of images scattered across your webpage, you can use something like:
$image = file_exists('img/' . $row_master['img']) ? 'img/' . $row_master['img'] : 'placeholder.png';
Full code:
<?php
require_once('dbconnection.php');
mysqli_select_db($conn, $dbname);
$query_master = "SELECT DISTINCT * FROM `master_list` INNER JOIN types_join ON master_list.join_id=types_join.join_id WHERE `type_id` = 171 ORDER BY `item_id`";
$master = mysqli_query($conn, $query_master) or die(mysqli_error());
$row_master = mysqli_fetch_assoc($master);
$totalrows_master = mysqli_num_rows($master);
?>
<!doctype html>
<html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flower Trees</title>
<link href="/css/styles.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" type="image/png" href="img/favicon.png">
</head>
<body>
<div class="wrapper">
<a id="top"></a>
<?php require_once('header.php'); ?>
<?php require_once('nav.php'); ?>
<div class="category"><h2>Flower Trees</h2></div>
<div class="display">
<?php do {
$image = file_exists('img/' . $row_master['img']) ? 'img/' . $row_master['img'] : 'placeholder.png';
?>
<ul>
<li><a href="details.php?recordID=<?php echo $row_master['master_id']; ?>"><img class="thumb" src="<?php echo $image; ?>"/>
<br />
<span class="name"><?php echo $row_master['name']; ?></span></a></li>
</ul>
<?php } while ($row_master = mysqli_fetch_assoc($master)); ?>
<!-- end .display --></div>
<?php
mysqli_free_result($master);
?>
<?php require_once('footer.php'); ?>
<!-- end .wrapper --></div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
I don't want to have to manually change each of them and then change them again when I find the correct image. Is there a way to create a function that will look for the missing images and replace them with a specified image until the correct image is found?
Such a function might be written as:
function im($imgName) {
$pathToImgs = "images/";
if (file_exists( $pathToImgs . $imgName )) {
echo $pathToImgs . $imgName;
}
else {
echo $pathToImgs . "placeholder.jpg";
}
}
Then in your html:
<img src="<?php im("product1.jpg"); ?>">
<img src="<?php im("product2.jpg"); ?>">
<img src="<?php im("product3.jpg"); ?>">
As a start.
***Edit 1:
Given your code where it says:
<img class="thumb" src="img/<?php echo $row_master['img']; ?>"/>
You might modify it with a conditional that inserts the placeholder image in the event that the target image simply doesn't exist, yet.
<img class="thumb" src="<?php
if (file_exists("img/" . $row_master['img'])) {
echo "img/" . $row_master['img'];
}
else {
echo 'img/placeholder.jpg';
}
?>">
You could reuse this functionality by turning the conditional into a php function, so described as a starter above.
Using jQuery, you can accomplish something easy enough using a global $('img') handler when errors occur. Simply swap them out with your placeholder image afterwards.
$('img').on('error', function() {
const oldSrc = encodeURIComponent($(this).attr('src'));
$(this).attr('src', `https://via.placeholder.com/300/000000/FFFFFF/?text=${oldSrc}`);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="imagethatdoesntexist.jpg"><br />
<img src="anotherimage.jpg">
Here I use placeholder.com (A convenient site for placeholder images such as this), and inject the old image source into the query string, which the site will render in the image itself.
I'm trying to build a website for school project. I want the schoolResponse() function to happen after clicking the Submit button. If I remove the jQuery function it works but then it shows a default value when I load the page.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<title>NHG</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link type="text/css" rel="stylesheet" href="css/normalize.css"/>
<link type="text/css" rel="stylesheet" href="css/style.css"/>
<link type="text/css" rel="stylesheet" href="css/resposive.css"/>
</head>
<body>
<header>
<div id="main-head">
<h2 id="main-heading">sKoolBook</h2>
</div>
</header>
<section>
<div id="container">
<div id="wrapper">
<form method="POST">
<select name="school">
<option value="none" name="none">Please Select a School...</option>
<option value="NHG">New Horizon Gurukul</option>
</select>
<input type="submit" class="button"/>
<?php
error_reporting(0);
$school = $_POST['school'];
function schoolResponse() {
if ($_POST['school'] == 'none'){
echo 'nothing';
} else {
echo 'something';
}
}
?>
<script>
$('.button').click(
function(
<?php schoolResponse(); ?>
);
);
</script>
</form>
</div>
</div>
</section>
<footer>
</footer>
</body>
</html>
You should use jQuery/AJAX to do this.
<script>
$('.button').click(
$.ajax({
url: 'yoururl.php',
data: $("form").serialize(), //Better to put an ID to the form or something
success: function(data){
//DO something with your data
}
})
);
</script>
There are other functions you should check to properly use ajax requests.
In yoururl.php you should do something like
$school = $_POST['school'];
function schoolResponse() {
if ($_POST['school'] == 'none'){
echo 'nothing';
} else {
echo 'something';
}
}
You can't achieve it like this. Here is one solution:
<?php
error_reporting(0);
$school = $_POST['school'];
function schoolResponse() {
if ($_POST['school'] == 'none'){
echo 'nothing';
} else {
echo 'something';
}
}
if($_POST['school']) schoolResponse();
?>
It would be better if you replace error_reporting(0); with error_reporting(E_ALL); for example, because otherwise php errors will be disabled.
And remove this part:
<script>
$('.button').click(
function(
<?php schoolResponse(); ?>
);
);
</script>
But it is very very basic example.
I tried putting some php in the body tag to change the background color of the page based on what value was passed from the first page but it's not working.
Can I do this? (Add php code inside body tag)
If not, what would be the easiest way to change the background color of the page based on the value passed from the first page
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<meta charset=utf-8>
<title></title>
</head>
<body <?php
$teamvar = $_POST['team_id'];
if($teamvar == 1){
$teamvar = "Celtics";
echo "style='background-color: green;'>"
} else {
echo "style='background-color: yellow;'>"; }
?>
<div id=content>
<p>
Test
</p>
</div>
</body>
</html>
You missed a semi-colon ; at the end of echo "style='background-color: green;'>"
Change it to:
echo "style='background-color: green;'>";
and it will work.
You should also put quotes for <div id=content>
<div id="content">
which is just good form.
This code looks like it should work to me. Are you sure you're posting the correct value? Try printing out the posted value on the page to see. Or just var_dump($_POST);.
However as it is your code isn't very readable. It's best not to intermingle HTML and logic. I'd do something like this:
<?php
$teamid = $_POST["team_id"];
if ($teamid == "1"){
$color = "green";
} else {
$color = "yellow";
}
?>
...
<body style="background-color: <?= $color %>;">
Try following code
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<meta charset=utf-8>
<title></title>
</head>
<?php
$body_style = "";
$teamvar = $_POST['team_id'];
if($teamvar == 1){
$teamvar = "Celtics";
$body_style ="style='background-color: green;'>";
} else {
$body_style = "style='background-color: yellow;'>";
}
?>
<body <?php echo $body_style; ?> >
<div id="content">
<p>
Test
</p>
</div>
</body>
</html>
Your code isn't wrong, but you can use it in a better way, for example.
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<meta charset=utf-8>
<title></title>
</head>
<?php
if (isset($_POST['team_id']) {
if($_POST['team_id'] == 1)
$variable = "style='background-color: green;'>";
else
$variable = "style='background-color: yellow;'>";
} else
$variable = "style='background-color: yellow;'>";
?>
<body <?php echo $variable;?>>
<div id=content>
<p>
Test
</p>
</div>
</body>
</html>
As you can see, this code is more aesthetic than yours.
Here is you working code
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<meta charset=utf-8>
<title></title>
</head>
<body <?php
$teamvar = $_POST['team_id'];
if($teamvar == 1){{
$teamvar = "Celtics";
echo "style='background-color: green;'>";
} else {
echo "style='background-color: yellow;'>"; }
?>
<div id=content>
<p>
Test
</p>
</div>
</body>
</html>
you can test it :)
Your code looks bad! But this should work:
(BTW: You forgot a ; in your code)
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<meta charset="utf-8">
<title>Test</title>
</head>
<?php
//Test
$_POST['team_id'] = 1;
$teamvar = $_POST['team_id'];
if($teamvar == 1) {
$teamvar = "Celtics";
echo "<body style='background-color: green;'>";
} else {
echo "<body style='background-color: yellow;'>";
}
?>
<div id="content">
<p>Test</p>
</div>
</body>
</html>
Also i would recommend you to turn on error reporting with this:
<?php
error_reporting(E_ALL);
ini_set("display_errors", 1);
?>
I want to set the url of an iframe using PHP, my url is in that format : http://mysite.com/s/ where = numbers, I want to make a button that increase the number in the url of 1 and reload the iframe.
<html>
<head>
<meta charset="utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form class="topBorder">
<p>
<?php
$site = 6394100;
function NextSite($sites)
{
$sites += 1;
return 'http://mywebsite.com/s/' . $sites . '/';
}
?>
Next
</p>
<iframe name="frame" id="frame" src="http://mywebsite.com/s/" class="gagFrame"></iframe>
</form>
</body>
</html>
Well you can take help of a simple JS function for this. See the modified code below. I have not tested it but you should get the idea of doing it.
EDIT:
You need to get it done the ajax way. Put your php function in a file say loadurl.php:
<?php
$site = 6394100;
$sites += 1;
echo 'http://mywebsite.com/s/' . $sites . '/';
?>
Now in your html code do as follows:
<html>
<head>
<meta charset="utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form class="topBorder">
<script type="text/javascript">
function loadURL()
{
$.get('pathToloadurl.php',success(data)
{
window.frames[siteFrame].location =data;
});
}
</script>
<button type="button" onClick="loadURL()">Next</button>
<iframe name="siteFrame" id="frame" src="http://mywebsite.com/s/" class="gagFrame"></iframe>
</form>
I don't know if this is correct - I just followed the example on the jeditable website, but I can't seem to be able to get this simple code working. I just want to save the data into the database and still show the changes on the page.
Below is my code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" debug="true">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Jeditable WYSIWYG Custom Input Demo</title>
<meta name="generator" content="Mephisto" />
<link href="http://www.appelsiini.net/stylesheets/main2.css" rel="stylesheet" type="text/css" />
<link rel="alternate" type="application/atom+xml" href="http://feeds.feedburner.com/tuupola" title="Atom feed" />
<script src="/mint/?js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js""
type="text/javascript" charset="utf-8"></script>
<script src="http://www.appelsiini.net/projects/jeditable/wysiwyg/wysiwyg/jquery.wysiwyg.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://www.appelsiini.net/projects/jeditable/wysiwyg/wysiwyg/jquery.wysiwyg.css" type="text/css" media="screen" charset="utf-8">
<script src="http://www.appelsiini.net/projects/jeditable/jquery.jeditable.js" type="text/javascript" charset="utf-8"></script>
<script src="http://www.appelsiini.net/projects/jeditable/wysiwyg/jquery.jeditable.wysiwyg.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
/* Fix FireBug */
/*
if ($.browser.mozilla) {
window.loadFirebugConsole();
};
*/
/* Handle links inside editable area. */
$('.editable > a').bind('click', function() {
$(this).parent().trigger('click');
return false;
});
$('#wysiwyg_2').editable('test-jedit.php',
{
id : 1,
content : 'wysiwyg_2',
indicator : '<img src="../img/indicator.gif">',
type : 'POST',
type : 'wysiwyg',
width : 640,
height : 'auto',
onblur : 'ignore',
submit : 'OK',
cancel : 'Cancel',
wysiwyg : { controls : { separator04 : { visible : true },
insertOrderedList : { visible : true },
insertUnorderedList : { visible : true }
}
}
});
});
</script>
<style type="text/css">
#sidebar {
width: 0px;
}
#content {
width: 770px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<p>
<h1>Jeditable</h1><br />
<small>Edit in place plugin for jQuery.</small>
<ul id="nav">
<li id="first">weblog</li>
<li>projects</li>
</ul>
</p>
</div>
<div id="content">
<div class="entry">
<p>You might also want to check other custom inputs demo.
<h2>Extra settings</h2>
<div style="width: 640px" class="editable" id="wysiwyg_2"><img
src="%5C%22http://%5C%22"><span style="\"font-weight:" bold;\"="">gdgfd<span style="font-style: italic;">
gfd</span><big><br>sdfsdf<br>sdfsdf<br><br></big></span></div>
</div>
<div id="sidebar">
</div>
<div id="footer">
</div>
</body>
</html>
Here's the PHP code:
<?php
$con = mysql_connect("localhost","username","password");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("my_db", $con);
$id = $_POST['id'];
$content = $_POST['content'];
mysql_query("INSERT INTO editable (id, content)
VALUES ('$id', '$content')");
echo $content;
mysql_close($con);
?>
The first thing to say is please read the php.net page about SQL Injection
To your problem ...
I think I might have spotted a problem ... your JavaScript is being executed before the DOM is ready ... enclose your javascript code (all of it) within the following block :
$(document).ready(function() {
// your code here
});
This means that the code within the function will only be executed once the whole page has been loaded ... calling functions on DOM elements that are not loaded will cause you issues ... further reading on ready() ...
Looking at the code I can see no obvious issue - however there are few basic things you can do to debug this issue ... first off check (using something like firebug) that the AJAX request is actually being sent ...
Secondly you can check the the PHP MySQL code is working correctly ...
$result = mysql_query($query); // execute your query
// Check result
// This shows the actual query sent to MySQL, and the error. Useful for debugging.
if (!$result) {
$message = 'Invalid query: ' . mysql_error() . "\n";
$message .= 'Whole query: ' . $query;
die($message);
}
// if you get to here the query worked fine ...
Update
I took your code and created a jsfiddle
There are a few minor changes needed to get it working :
<div style="width: 640px" class="editable" id="wysiwyg_2">
<img src="%5C%22http://%5C%22"><span style="\"font-weight:" bold;\"="">gdgfd
<span style="font-style: italic;"> gfd</span>
<big><br>sdfsdf<br>sdfsdf<br><br></big></span></div>
should be :
<div style="width: 640px" class="editable" id="wysiwyg_2"><span style="font-weight: bold;">gdgfd<span style="font-style: italic;">
gfd</span><br>sdfsdf<br>sdfsdf<br><br></span></div>
I have removed the strange characters !
Update 2
When the OK button is pressed the PHP is called - it POSTs the following data :
1:wysiwyg_2
value:<span style="font-weight: bold;">gdgfd<span style="font-style: italic;">
gfd</span><big><br>sdfsdf<br>sdfsdf<br><br></big></span>
So in your PHP you need to change $_POST['content'] to $_POST['value']