I have this Javscript fade effect when opening the page, for example admin.php.
<body>
<script>
document.body.className = 'fade';
</script>
...html code...
<script>
document.addEventListener("DOMContentLoaded", function(e) {
document.body.className = '';
});
</script>
</body>
The problem is I can't figure it out how to run this script only when comming from login.php page.
For clarification, it's an effect when opening page it's white and then in about 1sec the page becomes visible, creating fade effect.
Pass along a variable in the query string. For example, link to it with admin.php?coming_from_login=1.
Then in your PHP file:
<?php if (isset($_GET['coming_from_login']) && $_GET['coming_from_login'] == '1'): ?>
<script>
document.addEventListener("DOMContentLoaded", function(e) {
document.body.className = '';
});
</script>
<?php endif; ?>
You can make use of document.referrer:
<body>
<script>
const referrerPage = document.referrer.replace(location.origin, ""); // Remove the origin to leave just the page
if (referrerPage === "/login.php") {
document.body.className = 'fade';
document.addEventListener("DOMContentLoaded", function (e) {
document.body.className = '';
});
}
</script>
...html code...
</body>
Related
I have created a chrome extension which send a form to GTmetrix.
This is the html code:
<html>
<head>
<title>GTmetrix Analyzer</title>
<script src="popup.js"></script>
</head>
<body>
<h1>GTmetrix Analyzer</h1>
<button id="checkPage">Check this page now!</button>
</body>
</html>
This is the JS file:
document.addEventListener('DOMContentLoaded', function() {
console.log("f")
var checkPageButton = document.getElementById('checkPage');
checkPageButton.addEventListener('click', function() {
console.log("f")
chrome.tabs.getSelected(null, function(tab) {
d = document;
var f = d.createElement('form');
f.action = 'http://gtmetrix.com/analyze.html?bm';
f.method = 'post';
var i = d.createElement('input');
i.type = '';
i.name = 'url';
i.value = tab.url;
f.appendChild(i);
d.body.appendChild(f);
f.submit();
console.log("a")
console.log(f)
});
}, false);
}, false);
I added the console.log events in order make sure that the code is executed, however, I expect the html to present the submitted form, including the response. The issue is that I only get the tab url added to the html when I click on the button due to(d.body.appendChild(f);) so I am not sure why I can't see it.
You can try this another approach of d.body.appendchild(f):
document.getElementsByTagName('body')[0].appendChild(f);
or have a null checker like this:
if ( document.body != null )
{
document.body.appendChild(element);
}
I have a button on my PHP page, currently I'm using this javascript code to open the app store and play store, but this code will directly open the play store and app store page and not on the button click, I want it to open after the user click on the button and it will open based on the browser agent. Can anyone help me?
<script> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$(document).ready(function (){
if(navigator.userAgent.toLowerCase().indexOf("iphone") > -1){
window.location.href = 'https://itunes.apple.com/my/app/flipbizz/idexampleapp';
}
});
</script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$(document).ready(function (){
if(navigator.userAgent.toLowerCase().indexOf("android") > -1){
window.location.href = 'https://play.google.com/store/apps/details?id=com.exampleapp';
}
});
</script>
<p><button> JOIN ME NOW</button></p>
</div>
</div>
Try this
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
if(navigator.userAgent.toLowerCase().indexOf("iphone") > -1){ window.location.href = 'https://itunes.apple.com/my/app/flipbizz/idexampleapp'; }
if(navigator.userAgent.toLowerCase().indexOf("android") > -1){ window.location.href = 'https://play.google.com/store/apps/details?id=com.exampleapp'; }
//Update #2
if (!navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|IEMobile)/)) {
window.location.href = 'https://www.google.com'; //Desktop Browser
}
}
</script>
I currently call a Perl script from my website like this to produce a Captcha image like this:
<script language="JavaScript1.2" type="text/javascript" src="http://www.MyUrl/cgi-bin/Captcha-Image.pl"></script>
And I return Captcha Image to the web page like this:
<script language="JavaScript" type="text/javascript">
<!--
document.write (CAPTCHA);
//-->
</script>
This works fine but the issue I'm having is if the user clicks back the Captcha image does not refresh and needs to do so, as after it is submitted it is no longer valid.
So I'm trying to use this:
<input type="hidden" id="refreshed" value="no"/>
<script type="text/javascript">
onload = function () {
var e = document.getElementById("refreshed");
if (e.value == "no") e.value = "yes";
else { e.value = "no"; location.reload(); }
}
</script>
But instead of refreshing the page I would like to just recall the Perl script Im already using the "Cache-Control: no-cache tag" "http://www.MyUrl/cgi-bin/Captcha-Image.pl" to print a new image I tried this with no luck:
onload = function () {
var e = document.getElementById("refreshed");
if (e.value == "no") e.value = "yes";
else { e.value = "no"; location.reload('http://www.MyUrl/cgi-bin/Captcha-Image.pl'); }
}
I am using a PHP Simple HTML DOM Parser to save a website as a htm file. I then use jQuery to extract a div from the file and put it into a div. I want to create a
Previous and Next button but the problem I have is that to do this I have to change the URL so the parser can get the page. I would really appreciate if you can help. Below is the code I am using.
<?php
include( 'site/simple_html_dom.php');
$html=file_get_html( 'http://roosterteeth.com/home.php?page=1');
$html->save('site/rtnews.htm')
?>
<script type="text/javascript" src="site/jquery.js"></script>
<script type="text/javascript">
$('document').ready(function() {
$('#wrap').click(function (event){
event.preventDefault();
});
$("#wrap").load('site/rtnews.htm #postsArea');
});
</script>
</head>
<body>
<div id="wrap">
</div>
</body>
You will have to create a new php file for this and make an AJAX request to that file. I assume you have already realised that you cannot make a cross-domain request due to CORS.
Here is your new php file, let's call it proxy.php. It will proxy the request, responding with the page that is passed to it via GET :
<?php
include( 'site/simple_html_dom.php');
$html=file_get_html( 'http://roosterteeth.com/home.php?page=' . $_GET["page"]);
echo $html;
?>
Your new JavaScript;
$('document').ready(function() {
var $wrap = $('#wrap'),
page = 1;
$('#next').on('click', function () {
getPage(++page);
});
$('#prev').on('click', function () {
getPage(--page);
});
var getPage = function (page) {
$wrap.load('proxy.php?page=' + page + ' #postsArea');
};
getPage(page);
});
$messages = $db->query("SELECT * FROM chatmessages ORDER BY datetime DESC, displayorderid DESC LIMIT 0,10");
while($message = $db->fetch_array($messages)) {
$oldmessages[] = $message['message'];
}
$oldmessages = array_reverse($oldmessages);
?>
<div id="chat">
<?php
for ($count = 0; $count < 9; $count++) {
echo $oldmessages[$count];
}
?>
<script language="javascript" type="text/javascript">
<!--
setInterval( "document.getElementById('chat').innerHTML='<NEW CONTENT OF #CHAT>'", 1000 );
-->
</script>
</div>
I'm trying to create a PHP chatroom script but I'm having a lot of trouble getting it to AutoRefresh
The content should automatically update to , how do you make it do that? I've been searching for almost an hour
I would take that PHP functionality you have and putting it in a sperate page that returns JSON. From there you can call that method using jQuery and the AJAX tools built in. Really simple. Start here for jQuery: http://api.jquery.com/category/ajax/
you'll need to set up a server side script that renders only the contents of the chat div and use ajax to grab that. it can be done with jquery quite easily:
In your html document:
<head>
...
<script src="/path/to/jquery.js" type="text/javascript"></script>
<script>
var chatUpdateInterval = null;
function initChat() {
chatUpdateInterval = window.setInterval(updateChat, 5000); /* every 5 seconds */
}
function updateChat() {
$.ajax({
url: '/url/path/to/your/script.php'
,dataType: 'HTML'
,success: function(data, status, xhr){
$('#chat').append($(data).html());
}
});
}
$(document).ready(function(){
initChat();
});
</script>
...
</head>
<body>
<div id="chat">
please stand by while we're firing up the coal!
</div>
</body>
Note that this won't be really good, it's just a sample to get you started. you should look into jquery's $.ajax