I am using this PHP Database Ajax code by W3Schools.com
This is my code, inside the PHP File (as shown in w3schools). It is working in this snippet. Also working, when i use this in the HTML file (as shown in w3schools).
But when, i use this code in the PHP File, it is not working. What could possibly go wrong?
.playtrailer {
background-color:#f2f2f2;
color:red;
font-weight:600;
border:none;
padding:10px 12px;
}
.playtrailer:hover {
cursor:pointer;
background-color:#e2e2e2;
}
#trailerdivbox {
display:none;
width:100%;
height:100%;
position:fixed;
top:0%;overflow:auto;
background-color:rgb(0, 0, 0);
background-color:rgba(0, 0, 0, 0.4);
}
.videoWrapper {
position:relative;
padding-bottom:56.25%;
padding-top:25px;
margin:auto;
height:0;top:100px;
}
.videoWrapper iframe {
position:absolute;
max-width:560px;
max-height:315px;
width:95%;
height:95%;
left:0;
right:0;
margin:auto;
}
<button id="playtrailer" class="playtrailer" data-src="naQr0uTrH_s"> Play Trailer ► </button>
<button id="playtrailer" class="playtrailer" data-src="naaQr0uTrH_s"> Play Trailer ► </button>
<!-- Watch Video Pop-up box -->
<div id='close'>
<div id='trailerdivbox'>
<div class='videoWrapper'>
<iframe id='video' class='trailervideo' width='560' height='315' data-src='https://www.youtube.com/embed/' src='about:blank' frameborder='0' allowfullscreen></iframe>
</div>
</div>
</div>
<!-- Script to open Pop-up box when someone click on watch video button -->
<script>
// Get the modal
var modal = document.getElementById('trailerdivbox');
// Get the button that opens the modal
var btn = document.querySelectorAll('.playtrailer')
function playVideo(src) {
var video = document.getElementById('video');
video.src = 'https://www.youtube.com/embed/'+src + '?autoplay=1'; //add with iframe
}
function resetVideo() {
var video = document.getElementById('video');
var src = video.src.replace('?autoplay=1', '');
video.src = '';
video.src = src;
}
// When the user clicks the button, open the modal
btn.forEach(function(a){
a.onclick = function() {
modal.style.display = "block";
playVideo(this.dataset.src); // pass the src
}
})
var trailerbox = document.getElementById("close");
trailerbox.onclick = function() {
modal.style.display = "none";
resetVideo();
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
resetVideo();
}
}
</script>
Edit: This is my HTML file (Copy/pasted from w3schools)
<html>
<head>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Joseph Swanson</option>
<option value="4">Glenn Quagmire</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here...</b></div>
</body>
</html>
This is my PHP file (getuser.php)
<!DOCTYPE html>
<html>
<head>
<style>
.playtrailer {
background-color:#f2f2f2;
color:red;
font-weight:600;
border:none;
padding:10px 12px;
}
.playtrailer:hover {
cursor:pointer;
background-color:#e2e2e2;
}
#trailerdivbox {
display:none;
width:100%;
height:100%;
position:fixed;
top:0%;overflow:auto;
background-color:rgb(0, 0, 0);
background-color:rgba(0, 0, 0, 0.4);
}
.videoWrapper {
position:relative;
padding-bottom:56.25%;
padding-top:25px;
margin:auto;
height:0;top:100px;
}
.videoWrapper iframe {
position:absolute;
max-width:560px;
max-height:315px;
width:95%;
height:95%;
left:0;
right:0;
margin:auto;
}
</style>
</head>
<body>
<button id="playtrailer" class="playtrailer" data-src="naQr0uTrH_s"> Play Trailer ► </button>
<button id="playtrailer" class="playtrailer" data-src="naaQr0uTrH_s"> Play Trailer ► </button>
<!-- Watch Video Pop-up box -->
<div id='close'>
<div id='trailerdivbox'>
<div class='videoWrapper'>
<iframe id='video' class='trailervideo' width='560' height='315' data-src='https://www.youtube.com/embed/' src='about:blank' frameborder='0' allowfullscreen></iframe>
</div>
</div>
</div>
<!-- Script to open Pop-up box when someone click on watch video button -->
<script>
// Get the modal
var modal = document.getElementById('trailerdivbox');
// Get the button that opens the modal
var btn = document.querySelectorAll('.playtrailer')
function playVideo(src) {
var video = document.getElementById('video');
video.src = 'https://www.youtube.com/embed/'+src + '?autoplay=1'; //add with iframe
}
function resetVideo() {
var video = document.getElementById('video');
var src = video.src.replace('?autoplay=1', '');
video.src = '';
video.src = src;
}
// When the user clicks the button, open the modal
btn.forEach(function(a){
a.onclick = function() {
modal.style.display = "block";
playVideo(this.dataset.src); // pass the src
}
})
var trailerbox = document.getElementById("close");
trailerbox.onclick = function() {
modal.style.display = "none";
resetVideo();
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
resetVideo();
}
}
</script>
</body>
</html>
Related
In the below snippet, when "Make a fullscreen" button is pressed, the iFrame enters fullscreen mode. I'm looking for a solution to exit fullscreen mode on pressing "ESC" or by pressing "Make fullscreen button" again.
<button onclick="makeFullscreen('game');">[Make a fullscreen]</button>
function makeFullscreen(id){
var el = document.getElementById(id);
el.style = "position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;"
}
Fully working
const fullscreenStyle = "position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:99999;"
const normalStyle = "width:1000px;height:700px;border:0;"
function enterFullScreen(el) {
el.style = fullscreenStyle;
document.querySelector('.button1').style = 'position:absolute;top:0;right:0;z-index:999999;';
}
function exitFullScreen(el) {
el.style = normalStyle;
document.querySelector('.button1').style = 'position:absolute;top:auto;right:auto;';
}
function toggleFullScreen() {
var el = document.getElementById("game");
if (el.style.position === "fixed") {
exitFullScreen(el);
} else {
enterFullScreen(el);
}
}
document.addEventListener("keydown", function(e) {
if (e.key === "Escape") {
var el = document.getElementById("game");
exitFullScreen(el);
}
}, false);
Since Fullscreen API is out, another solution can be that instead of binding Make a Fullscreen logic to the button, bind the logic for toggling full screen. For that :
Store fullscreen and normal mode CSS in 2 separate variables
Create 2 functions, enterFullscreen and exitFullScreen
Create a 3rd function toggleFullScreen that checks the mode and does the following :
If fullscreen mode is ON, call exitFullscreen
Else call enterFullScreen
To implement exit on pressing ESC
Add an event listener for keydown events
When the event is triggered, check the key in the event.
If the key matches Escape, call exitFullScreen
The following solution does the same.
<!DOCTYPE html>
<html lang="en">
<body>
<iframe id="game" style="width:1000px;height:700px;border:0;" allowfullscreen="true" msallowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" sandbox="allow-same-origin allow-popups allow-scripts allow-pointer-lock allow-orientation-lock allow-popups" src="https://randomurl.com/">
</iframe>
<button onclick="toggleFullScreen('game');">
[Toggle fullscreen]
</button>
</body>
<script type="text/javascript">
const fullscreenStyle = "position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;"
const normalStyle = "width:1000px;height:700px;border:0;"
function enterFullScreen(el) {
el.style = fullscreenStyle;
}
function exitFullScreen(el) {
el.style = normalStyle;
}
function toggleFullScreen() {
var el = document.getElementById("game");
if (el.style.position === "fixed") {
exitFullScreen(el);
} else {
enterFullScreen(el);
}
}
document.addEventListener("keydown", function(e) {
if (e.key === "Escape") {
var el = document.getElementById("game");
exitFullScreen(el);
}
}, false);
</script>
</html>
I have two divs, one is hidden and the other one is visible. I'm using css display:none; to hide first and using style.display="block";
when I refresh the page it gives same div name in the address bar but the div is hidden.
I just want the div to stay block after refreshing or submitting the form inside the div
<html>
<head>
<meta charset="utf-8">
<title>Sample</title>
<style>
#content {
flex:8;
display:flex;
flex-direction:row;
justify-content:space-between;
flex-basis:100%;
padding:0 10px 0x 10px;
text-align:center;
}
#leftnav {
flex:1;
padding-top:20px;
}
#midcontent {
flex:9;
text-align:center;
padding-top:20px;
display:block;
}
#leftnav ul {
display: block;
margin: 0px;
padding: 0px;
list-style-type: none;
}
#m1,#m2,#m3 {
flex:9;
text-align:center;
padding-top:20px;
display:none;
}
</style>
</head>
<body>
<div id="content">
<div id="leftnav" align="center">
<ul>
<li>Page m1</li>
<li>Page m2</li>
<li>Page m3</li>
</ul>
</div>
<div id="midcontent" align="center">
<p>Home Page</p>
</div>
<div id="m1" align="center">
<p>Div m1</p>
</div>
<div id="m2" align="center">
<p>Div m2</p>
</div>
<div id="m3" align="center">
<p>Div m3</p>
</div>
</div>
<script type="text/javascript">
var d=document.getElementById('midcontent');
var d1=document.getElementById('m1');
var d2=document.getElementById('m2');
var d3=document.getElementById('m3');
function div1() {
if(d.style.display === "block") {
d.style.display = "none";
d1.style.display = "block";
} else {
d.style.display = "none";
d1.style.display = "block";
d2.style.display = "none";
d3.style.display = "none";
}
}
function div2() {
if(d.style.display === "block") {
d.style.display = "none";
d2.style.display = "block";
} else {
d.style.display = "none";
d1.style.display = "none";
d2.style.display = "block";
d3.style.display = "none";
}
}
function div3() {
if(d.style.display === "block") {
d.style.display = "none";
d3.style.display = "block";
} else {
d.style.display = "none";
d1.style.display = "none";
d2.style.display = "none";
d3.style.display = "block";
}
}
</script>
</body>
</html>
change:
function div1() {
var d=document.getElementById('midcontent');
var d1=document.getElementById('m1');
if(d.style.display === "block") {
d.style.display = "none";
d1.style.display = "block";
} else {
d.style.display = "none";
d1.style.display = "block";
}
}
to:
function toggleDiv() {
document.getElementById('midcontent').style.display = "none";
document.getElementById('m1').style.display = "block";
}
"i just want the div to stay block after refreshing" call the function on page load in html to make it execute after refresh of page:
<body onLoad="toggleDiv()">
<!-- Your html content -->
</body>
alternatively you can also do it in js:
document.addEventListener("DOMContentLoaded", function(event) {
// Your code to run since DOM is loaded and ready
toggleDiv()
});
If you want more in depth persistance and/or variable changes please provide additional information on how and why you want to do this exactly! Hope it helps! :)
I have a ajax query which keeps reloading a div of the page in every 6 seconds.There is a action button in that reloading div which opens a modal.The problem is whenever page reloads the modal also refreshes. And i have to send some information through that modal but i am not able to fill up the modal as the page keeps refreshing every 6 secondsI couldn't find a solution for that. The files are as shown below. file1.php calls file2.php which has a table with dynamic values(i have made them static just for SO.)P.S.: I am also looking to implement a notification system but can't figure out a way to do that. If anyone could help.EDITI want the div to reload every 6 seconds but not the modal
file1.php
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>AJAX Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="reloader.js"></script>
</head>
<body onload="reloadData()">
<p> HELLO There!</p>
<div id="currentData" align="center">
<p>Loading Data...</p>
</div>
</body>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
var req;
function reloadData()
{
var now = new Date();
url = 'SO.php?' + now.getTime();
try {
req = new XMLHttpRequest();
} catch (e) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch (oc) {
alert("No AJAX Support");
return;
}
}
}
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send(null);
}
function processReqChange()
{
// If req shows "complete"
if (req.readyState == 4)
{
dataDiv = document.getElementById('currentData');
// If "OK"
if (req.status == 200)
{
// Set current data text
dataDiv.innerHTML = req.responseText;
// Start new timer (1 min)
timeoutID = setTimeout('reloadData()', 6000);
}
else
{
// Flag error
dataDiv.innerHTML = '<p>There was a problem retrieving data: ' + req.statusText + '</p>';
}
}
}
</script>
</html>
SO.php
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
padding: 5px;
}
th {text-align: left;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Mobile</th>
<th>Email</th>
<th>Hometown</th>
<th>Action</th>
</tr>
<tr>
<td>Irshad</td>
<td>9876543210</td>
<td>abc#example.com</td>
<td>Earth</td>
<td><button id="myBtn" data-toggle="modal" data-target=".modal">Action</button></td>
</tr>
</table>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
Okay, here is your problem:
var modal = document.getElementById('myModal');
Now modal refers to your element.
However, once the ajax request fetches new data, this element gets deleted and replaced by a new element with the same ID.
What you could do is structure the data outputted from SO.php as a JSON-object, and replace only the contents of each HTML-element.
JSON-objects generally look like this:
["This is some text!", "Even more text!"]
If we let text.php return this data,
As a simple example, you could request text.php through AJAX:
function reloadData()
{
url = 'text.php?' + Date.now();
try {
req = new XMLHttpRequest();
} catch (e) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch (oc) {
alert("No AJAX Support");
return;
}
}
}
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send(null);
}
function processReqChange()
{
if (req.readyState == 4)
{
dataDiv = document.getElementById('currentData');
if (req.status == 200)
{
obj = JSON.parse(req.responseText); // This now represents the JSON object.
for(var i = 0; i < obj.length; i++){
dataDiv.getElementsByTagName('p')[i] = obj[i];
}
timeoutID = setTimeout('reloadData()', 6000);
}
else
{
dataDiv.innerHTML = '<p>There was a problem retrieving data: ' + req.statusText + '</p>';
}
}
}
And you do <div id="currentData"><p></p><p></p></div>
The two paragraphs will be filled with the text of whatever text.php returns.
You can also find plenty of tutorials with a simple google search :)
I am trying to call an email sign up form when the video ends. My problem I don't know how to call the form inside the javascript, so far what I have achieved is to call an alert when the video ends.
Can someone please help me with this?
<video id="myVideo" controls="controls" width="300" height="150">
<source src="http://movie.webm" type="video/webm" />
<source src="your_video_file.ogg" type="video/ogg" />
Your browser does not support HTML5 video.
</video>
<script type="text/javascript">
document.getElementById('myVideo').addEventListener('ended', myHandler, false);
function myHandler(e) {
if (!e) { e = window.event; }
alert("Video Finished");
}
</script>
/*** UPDATE - FOR SOMEONE WHO ARE LOOKING FOR THE SAME HERE IS THE CODE ********/
<!DOCTYPE html>
<html>
<head>
<style>
#overlayContactForm {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
text-align:center;
z-index: 1000;
}
#overlayContactForm div {
width: 428px;
margin: 65px;
background-color: #fff;
border: 1px solid #000;
padding: 15px;
text-align: center;
height: 200px;
}
</style>
</head>
<body>
<div id="player"></div>
<script src="http://www.youtube.com/player_api"></script>
<div align="center">
<script>
// create youtube player
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'VhvUEhxL1DQ',
playerVars: {rel: 0},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// autoplay video
function onPlayerReady(event) {
event.target.playVideo();
}
// when video ends
function onPlayerStateChange(event) {
if(event.data === 0) {
el = document.getElementById("overlayContactForm");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" :
"visible";
}
}
</script>
</div>
<div id="overlayContactForm">
<div>
<h1> Text Header Info </h1>
<form class="form-inline">
<input type="email" class="form-control" id="exampleInputEmail3"
placeholder="Email Address">
<button type="submit" class="btn btn-default">Sign in</button>
</form>
<p> Testing email opt-in - Video/Form </p>
</div>
</div>
</body>
</html>
Handle the javascript video end event as:
var signupForm; // reference to the sign-up form
signupForm.style.display = ''; // form initially hidden
// on video end
document.getElementById('myVideo').onended = function(e) {
signupForm.style.display = 'block';
};
EDIT:
Assuming that signupForm is a modal dialog, you can change the even handlers like this
var button; // reference to the button
document.getElementById('myVideo').onended = function(e) {
button.click();
};
button.onclick = function(e) {
signupForm.style.display = 'block';
}
So the modal will now show up both when button is clicked or the video has ended.
I'm trying to get a javascript popup on my webpage and it's not working. I've written it all out in jsfiddle - http://jsfiddle.net/68vGZ/
and the code is here:
HTML
<div id="header-links">
<button id="aboutinfo">About</button>
<div id="overlay"></div>
<div id="popup">
<p>About Info Here</p>
<button id="closeaboutinfo">Close</button>
</div>
<button id="contactinfo">Contact</button>
<div id="overlay"></div>
<div id="popup">
<p>Contact with this email address</p>
<button id="closecontactinfo">Close</button>
</div>
</div>
CSS
#overlay {
display:none;
position:fixed;
left:0px;
top:0px;
width:100%;
height:100%;
background:#000;
opacity:0.5;
z-index:99999;
}
#popup {
display:none;
position:fixed;
left:50%;
top:50%;
width:300px;
height:150px;
margin-top:-75px;
margin-left:-150px;
background:#FFFFFF;
border:2px solid #000;
z-index:100000;
}
JavaScript
window.onload - function () {
document.getElementById("aboutinfo").onclick = function () {
var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
overlay.style.display = "block";
popup.style.display = "block";
};
document.getElementById("closeaboutinfo").onclick = function () {
var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
overlay.style.display = "none";
popup.style.display = "none";
};
document.getElementById("contactinfo").onclick = function () {
var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
overlay.style.display = "block";
popup.style.display = "block";
};
document.getElementById("closecontactinfo").onclick = function () {
var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
overlay.style.display = "none";
popup.style.display = "none";
};
}
The buttons show and the text is hidden, but i just can't work out why they won't trigger... Thanks for your help!
Three problems:
Firstly, this isn't valid:
window.onload - function () {
^
Your - symbol needs to be changed to a =:
window.onload = function () {
Secondly you have multiple elements with the same id attribute - this is invalid HTML and your JavaScript will only detect the first matched element. You should change these to class attributes and use getElementsByClassName instead of getElementById.
Thirdly, you need to tell JSFiddle to place your JavaScript in the document body.
Fixed JSFiddle demo.
I would look into using Bootstrap. They make it easy for you to create nice looking popups with rich functionality right out of the box. Here is a link where you can get bootstrap http://getbootstrap.com
They have much more to offer besides nice popups (modals). Definitely worth checking out even if this answer doesn't help you out.