See following code
<div id="news-ticker">
<marquee id="news-marquee" scrollamount="3" onmouseover="stop()" onmouseout="start()" style="padding-top:2px; padding-bottom:2px;">
Latest News
</marquee>
</div>
<script type="text/javascript">
var currenturl = document.URL;
if ((currenturl.indexOf("&lang=nl") != -1) || (currenturl.indexOf(";lang=nl") != -1) || (currenturl.indexOf("&lang=nl#content") != -1)) {
document.getElementById("news-marquee").innerHTML = '<?php require_once("news_nl.php"); ?>';
}
else if ((currenturl.indexOf("&lang=en") != -1) || (currenturl.indexOf(";lang=en") != -1) || (currenturl.indexOf("&lang=en#content") != -1)) {
document.getElementById("news-marquee").innerHTML = '<?php require_once("news_en.php"); ?>';
}
else if ((currenturl.indexOf("&lang=fr") != -1) || (currenturl.indexOf(";lang=fr") != -1) || (currenturl.indexOf("&lang=fr#content") != -1)) {
document.getElementById("news-marquee").innerHTML = '<?php require_once("news_fr.php"); ?>';
}
else {
document.getElementById("news-marquee").innerHTML = '<?php require_once("news_nl.php"); ?>';
}
</script>
On a HTML page, I have a div that contains a marquee to display the latest news on the webpage. The contents that need to be displayed in the marquee are taken from a php file. Here's what's happening:
When the page loads, I first see "Latest News" appearing in the marquee. That is to say: It displays shortly before the javascript gets executed.
After that, the news-marquee shows the correct content: If I'm on the Dutch (&lang=nl) part of the website, the Dutch news items are shown, the French items are shown on the French site etc. So that works.
But some pages don't have the "&lang=xx" trail on the URL, so in those cases I have the else condition which displays the Dutch news items by default. This however, does not get executed. The news-marquee stays blank. Not even "Latest News" is shown anymore.
Firebug doesn't throw any errors at me, so I have no idea what could be going on here.
Your issue is your use of require_once instead of include. require_once only allows the file to be included once.
I would recommend doing the check in PHP and only giving the client one of the files to reduce bandwidth usage too.
Don't use innerHTML period. It's a proprietary Microsoft JScript method that does not correctly parse code it inserts in to the DOM. In translation when you try to interact with code you have "inserted" via innerHTML it may or may not be visible to the browser.
Stick to W3C standard methods such as appendChild, importNode, insertBefore and replaceChild.
If you need to convert between text and code use new DOMParser() to parse text-to-code and new XMLSerializer() to parse code-to-text.
Also you should stick to using single quotes in PHP as double quotes are used to interpret variables as text which requires more resources. I am presuming that the includes are being executed on the server and that you're not actually expecting those to be executed at the client.
Related
I have created a php page to display a image from a set of five images. The image is displayed based on the data read from a text file.Another application is continuously updating data in that text file.So my php page need to read data from that file whenever the file is updated and display image based on that data. I created a infinite loop to read data. But when i tried to access the php page from a browser , it is not loading because of the infinite loop.
$myfile1 = fopen("readfile.txt", "r") or die("Unable to open file!");
$readJsonData = fread($myfile1,filesize("readfile.txt"));
fclose($myfile1);
$obj = json_decode($readJsonData);
$urllogo = 'tatalogo.png';
if(($obj->{"FrontLeft"}) == "TRUE")
{
$url = 'images/FrontLeft.png';
}
else if(($obj->{"FrontRight"}) == "TRUE")
{
$url = 'images/FrontRight.png';
}
else if(($obj->{"RearLeft"}) == "TRUE")
{
$url = 'images/RearLeft.png';
}
else if(($obj->{"RearRight"}) == "TRUE")
{
$url = 'images/RearRight.png';
}
else
{
$url = 'images/Normal.png';
}
// infinite loop
while(1)
{
//reading from the file and refreshing the page.
}
In PHP Set header like this to refresh the php page
header("Refresh: 5;url='pagename.php'");
In HTML Head tag
<html>
<head>
<meta http-equiv="refresh" content="5;URL='pagename.php'">
</head>
</html>
<?php
Your php script here..
?>
Using Javascript
<script type="text/javascript>
window.setInterval(function(){
reload_page();
}, 5000);
//Here 5000 in miliseconds so for 5 seconds use 5000
function reload_page()
{
window.location = 'pagename.php';
}
The most reasonable way to do it would be to use the client side to refresh the page.
Get rid of all that infinite loop stuff on the PHP side. PHP will only output the image as it stands at the moment it was generated.
On the client side you could do something as simple as:
<META http-equiv="refresh" content="5;"> to force a refresh every 5 seconds.
If you only want to update when the file is updated you have to get more advanced. You could do an ajax call that checks if the file has changed and if so it refreshes. Websockets would be another option.
You could possibly do some nasty hack on the PHP side to make it work using ob_flush and sleep and header within a loop that checks to see if the file has changed but this will cause you to lose sleep once you realize what you've done. As pointed out below, this would never work.
I have a li and inside that i have a div class="reload" that have some content that should be reloaded for every 10 sec.
<li class="b1">
<div class="reload">
</div>
</li><!--col-->
So therefore i have got a script that does just that.
<script type="text/javascript">
$('.b1').children('.reload').load('php/reload/reload.php'); // load the content at start
window.setInterval(function(e) {
$('.b1').children('.reload').load('php/reload/reload.php'); // reload the content every 10 sec
}, 10000);
In the reload.php i get some content from a database. It looks like this, sort of..
<?php
// login info
require("../../connection_to_database_login.php");
// My query
$result = mysqli_query($l,'SELECT * FROM abcd WHERE efg=1 LIMIT 1');
// include some stuff
$r = mysqli_fetch_row($result);for ($p = 0; $p < $r[4]; ++$p){include("../some/stuff_$p.php");};
// include a random picture script or just load a picture
if ($r[4] == 0){include ('getRandPic.php');}
else {echo ('<img src="images/picture.png" />');}
?>
So far so good.. everything works.
The getRandPic.php file.. select one random picture from a folder
<?php
$img_dir = "images/images";
$images = scandir($img_dir);
$html = array();
foreach($images as $img) {
if($img === '.' || $img === '..') {continue;}
if ( (preg_match('/.jpg/',$img)) || (preg_match('/.gif/',$img)) || (preg_match('/.tiff/',$img)) || (preg_match('/.png/',$img)) ) {
$html[] .= '<img class="img-responsive" src="'.$img_dir.$img.'" />';
}
else { continue; }
};
echo $html[rand(0,6)];
?>
So this works ok.
But the thing is, i want to check if it shall "include a random picture script or just load a picture" every 5sec.
Therefore i need to check "if ($r[4] == 0)" every 5 sec.
So my question is: Is there any other way to do that?
As you asked in the comment... This is a rough guide only. You will have to develop and write your own code based on this guide.
Step 1a: optional
Make an ajax call from your webpage to the server. to get image file names.
Step 1b:
On server side in php file perform DB operation.
Let assume you have a table imageTable and column name images so you would read from DB using query SELECT images FROM imageTable
You will have to change the query, add condition (e.g. all images with animal and cute tags) to it and if you want limit the number of files that you want to randomize then you will have to add that as well.
Step 2:
Once you read from DB, as you are already doing, read all image names and put it in json format (json_encode). I personally prefer json. If you prefer, you can also return all names in simple string where names are separated by comma.
Step 3:
Store your response in JS.
var imagesArray = new Array();
$.ajax({
type: 'post',
url: pathtophpfile,
success: function(htmll) {
// get object with all data
imagesArray= JSON.parse(htmll);
},
});
Step 4:
Once you have it in your js object named imagesArray, use setInetval to perform task every 5 seconds.
Read a random value from 0 to imagesArrays length, and change the source of your image tag, <img class="img-responsive" src="+ randomimage +" />
Periodic updater will do your task.
Use ajax framework, it will reduce your db connection burden at the server side.
Have a look at it. It is a simple and nice way to achieve your task.
http://prototypejs.org/doc/latest/ajax/Ajax/PeriodicalUpdater/
I have a website(www.website.com) and a mobile site (m.website.com) and I'm trying to allow users to "View Full Site" if they want from mobile. Currently I am using some Javascript to check screen width on full site then redirecting to mobile.
if (screen.width <= 699) {
document.location = "http://m.website.com";
}
This works fine. On the mobile site there is a "View Full Site" button. When you click this it redirects you to my script "force_desktop.php" which sets a cookie and then sends you to the main site.
<?php
setcookie("force_desktop", "1");
header("Location: http://www.mywebsite.com");
?>
Now that we set a cookie and redirected to the main website we need to check for the cookie instead of just checking for the screen width.
Logic
If Cookie force_desktop is found
Then exit
Else
run screen size test
Here is the code I attempted to use but doesn't work. This code is placed in my head.php file which will be run on every page and is placed between the script opening and closing tags.
Attempt 1
if($_COOKIE['force_desktop'] == '1' {
exit;
} else if($_COOKIE['force_desktop'] != '1' {
if (screen.width <= 699) {
document.location = "http://m.website.com";
}
};
Attempt 2
if(isset ($_COOKIE["force_desktop"])){
exit;
else
if (screen.width <= 699) {
document.location = "http://m.mywebsite.com";
};
Alternative logic that could work
IF Cookie force_desktop is not found AND screen.width <= 699
Then redirect to m.myseite.com
Else
Exit
Note
I have run the following script to make sure a cookie is being placed, and it is.
<?php
print_r($_COOKIE);
?>
I've run out of ideas and know my coding isn't correct, especially the If/Else statement within the If/Else statement. I also am not sure if it is better to use the "isset" to see if the cookie is being used or ($_COOKIES['variable'] == "#"). I'd really appreciate some good feedback on this one.
Thanks in advance for your help and suggestions,
Matt
You're mixing JavaScript and PHP. You're trying to use screen.width in your PHP script, which doesn't make sense. You need to use an echo statement to output the JavaScript into the page. It'll then check the user's screen resolution and do the redirect.
Try this:
if(isset ($_COOKIE["force_desktop"])){
exit;
}
else
{
echo '<script>
if (screen.width <= 699) {
document.location = "http://m.mywebsite.com";}
</script>';
};
you should do this test at the top of the php page, and for sure you cannot mix php and java script like this
u can alter this code like
<?php
$flag = 0;
if(isset($_COOKIE['force_desktop']))$flag++;
?>
later in the page use the code as soon as <head> tag starts
..
..
<head>
<?php
if(!$flag){
echo '<script>
if (screen.width <= 699) {
document.location = "http://m.mywebsite.com";
</script>';
}
?>
You cannot mix javascript and PHP, javascript is front end and PHP is back end. Try something like this:
if( $something ){
Header("Location: somewhere.php");
}
In all major browsers, except Internet Explorer, the following script returns the page to its previous vertical position on reload:
<?php $y = $_COOKIE["y"]; ?> //in head tag before any output
and
<?php
print "<body onScroll=\"document.cookie='y=' + window.pageYOffset\" onLoad='window.scrollTo(0,$y)'>";
Can someone please tell me how I would modify this code to remember the page's vertical position in IE? Thanks.
From w3Schools :
IE 8 and earlier does not support this property, but may use "document.body.scrollLeft" and "document.body.scrollTop" instead.
I use the following code to do basic IE/not-IE browser detection:
if(document.all) { //if IE
//code
} else { //if not IE
//code
}
You should be able to combine this with AlecTMH's document.body.scrollLeft and document.body.scrollTop suggestion to get where you're going. But you're likely going to have to write a function for it and then call that in onScroll().
I'm not exactly a JavaScript wiz, but...
function blah() {
if(document.all) { //if IE
document.cookie='y=' + document.body.scrollTop
} else { //if not IE
document.cookie='y=' + window.pageYOffset
}
}
...might almost be functional code.
NOTE: This is a long question. I've explained all the 'basics' at the top and then there's some further (optional) information for if you need it.
Hi folks
Basically last night this started happening at about 9PM whilst I was trying to restructure my code to make it a bit nicer for the designer to add a few bits to. I tried to fix it until 2AM at which point I gave up. Came back to it this morning, still baffled.
I'll be honest with you, I'm a pretty bad Javascript developer. Since starting this project Javascript has been completely new to me and I've just learn as I went along. So please forgive me if my code structure is really bad (perhaps give a couple of pointers on how to improve it?).
So, to the problem: to reproduce it, visit http://furnace.howcode.com (it's far from complete). This problem is a little confusing but I'd really appreciate the help.
So in the second column you'll see three tabs
The 'Newest' tab is selected by default. Scroll to the bottom, and 3 further results should be dynamically fetched via Ajax.
Now click on the 'Top Rated' tab. You'll see all the results, but ordered by rating
Scroll to the bottom of 'Top Rated'. You'll see SIX results returned.
This is where it goes wrong. Only a further three should be returned (there are 18 entries in total). If you're observant you'll notice two 'blocks' of 3 returned.
The first 'block' is the second page of results from the 'Newest' tab. The second block is what I just want returned.
Did that make any sense? Never mind!
So basically I checked this out in Firebug. What happens is, from a 'Clean' page (first load, nothing done) it calls ONE POST request to http://furnace.howcode.com/code/loadmore .
But every time you load a new one of the tabs, it makes an ADDITIONAL POST request each time where there should normally only be ONE.
So, can you help me? I'd really appreciate it! At this point you could start independent investigation or read on for a little further (optional) information.
Thanks!
Jack
Further Info (may be irrelevant but here for reference):
It's almost like there's some Javascript code or something being left behind that duplicates it each time. I thought it might be this code that I use to detect when the browser is scrolled to the bottom:
var col = $('#col2');
col.scroll(function(){
if (col.outerHeight() == (col.get(0).scrollHeight - col.scrollTop()))
loadMore(1);
});
So what I thought was that code was left behind, and so every time you scroll #col2 (which contains different data for each tab) it detected that and added it for #newest as well. So, I made each tab click give #col2 a dynamic class - either .newestcol, .featuredcol, or .topratedcol. And then I changed the var col=$('.newestcol');dynamically so it would only detect it individually for each tab (makin' any sense?!). But hey, that didn't do anything.
Another useful tidbit: here's the PHP for http://furnace.howcode.com/code/loadmore:
$kind = $this->input->post('kind');
if ($kind == 1){ // kind is 1 - newest
$start = $this->input->post('currentpage');
$data['query'] = "SELECT code.id AS codeid, code.title AS codetitle, code.summary AS codesummary, code.author AS codeauthor, code.rating AS rating, code.date,
code_tags.*,
tags.*,
users.firstname AS authorname,
users.id AS authorid,
GROUP_CONCAT(tags.tag SEPARATOR ', ') AS taggroup
FROM code, code_tags, tags, users
WHERE users.id = code.author AND code_tags.code_id = code.id AND tags.id = code_tags.tag_id
GROUP BY code_id
ORDER BY date DESC
LIMIT $start, 15 ";
$this->load->view('code/ajaxlist',$data);
} elseif ($kind == 2) { // kind is 2 - featured
So my jQuery code sends a variable 'kind'. If it's 1, it runs the query for Newest, etc. etc.
The PHP code for furnace.howcode.com/code/ajaxlist is:
<?php // Our query base
// SELECT * FROM code ORDER BY date DESC
$query = $this->db->query($query);
foreach($query->result() as $row) {
?>
<script type="text/javascript">
$('#title-<?php echo $row->codeid;?>').click(function() {
var form_data = {
id: <?php echo $row->codeid; ?>
};
$('#col3').fadeOut('slow', function() {
$.ajax({
url: "<?php echo site_url('code/viewajax');?>",
type: 'POST',
data: form_data,
success: function(msg) {
$('#col3').html(msg);
$('#col3').fadeIn('fast');
}
});
});
});
</script>
<div class="result">
<div class="resulttext">
<div id="title-<?php echo $row->codeid; ?>" class="title">
<?php echo anchor('#',$row->codetitle); ?>
</div>
<div class="summary">
<?php echo $row->codesummary; ?>
</div>
<!-- Now insert the 5-star rating system -->
<?php include($_SERVER['DOCUMENT_ROOT']."/fivestars/5star.php");?>
<div class="bottom">
<div class="author">
Submitted by <?php echo anchor('auth/profile/'.$row->authorid,''.$row->authorname);?>
</div>
<?php
// Now we need to take the GROUP_CONCATted tags and split them using the magic of PHP into seperate tags
$tagarray = explode(", ", $row->taggroup);
foreach ($tagarray as $tag) {
?>
<div class="tagbutton" href="#">
<span><?php echo $tag; ?></span>
</div>
<?php } ?>
</div>
</div>
</div>
<?php }
echo " ";?>
<script type="text/javascript">
var newpage = <?php echo $this->input->post('currentpage') + 15;?>;
</script>
So that's everything in PHP. The rest you should be able to view with Firebug or by viewing the Source code. I've put all the Tab/clicking/Ajaxloading bits in the tags at the very bottom. There's a comment before it all kicks off.
Thanks so much for your help!
I think you're right to suspect this code block:
var col = $('#col2');
col.scroll(function(){
if (col.outerHeight() == (col.get(0).scrollHeight - col.scrollTop()))
loadMore(1);
});
My take on this is that you keep adding additional event handlers (duplicates, essentially) each time you run this code. You need to remove (unbind) the existing event handlers with every tab click so that you can be sure that it's only firing once:
$('#col2').unbind();
var col = $('#col2');
col.scroll(function(){
if (col.outerHeight() == (col.get(0).scrollHeight - col.scrollTop()))
loadMore(1);
});
Or some such thing. See http://api.jquery.com/unbind/
$('.featurecol'); , $('.topratedcol'); and $('.newestcol'); all refer to the same column and division (<div>). As such, whenever you switch pages, you need to unbind the old scroll before rebinding the new scroll handler. (Or else you'll be appending another scroll handler and getting multiple requests sent, like now)
You can do this by adding an unbind as follows:
var col = $('.newestcol');
col.unbind('scroll');
col.scroll(function(){
if (col.outerHeight() == (col.get(0).scrollHeight - col.scrollTop()))
loadMore(1);
});
You need to do this for all of the columns as they load (code/newest, code/toprated and code/featured).
It could also be
$('#col3').fadeOut('slow', function() {
as the ajax loads there... n number of times as it fades out it calls another ajax request.
not saying its the defenet answer but something looking into...