Infinite scroll isn't working - javascript

I Have been going through a tutorial on infinite scrolling and have everything exactly the same except my alert is not being triggered and I cannot work out why. Any possible variations of obtaining the scroll positioning in the IF statement would also be helpful.
<?php
require_once("connect.php");
$results = $connect->query("SELECT * FROM images ORDER BY image_name DESC LIMIT 0,2");
$count = $connect->query("SELECT * FROM images");
$nbr = $count->rowCount();
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class='images'>
<?php
while($row = $results->fetch())
{
?>
<p><img src="images/<?php echo $row['image_name'];?>" height="500" width="500"></p>
<?php
}
?>
</div>
<script src='js/jquery.js'></script>
<script>
$(document).ready(function(){
var load = 0;
$(window).scroll(function(){
if($(window).scrollTop() == $(document).height() - $(window).height())
{
alert("test");
}
});
});
</script>
</body>
</html>

Found the solution. The correct library needs to be called which many sites do not stipulate. Here is the code that needs to be posted just before the scroll script.
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Related

How do online advertisers load their ads through <script>, javascript and PHP?

Okay so I have googled a lot and have not found how they do it.
Examples 1:
Here is a sample Code of PropellerAdsMedia:
<script type="text/javascript" src="//go.oclaserver.com/apu.php?zoneid='0000'"></script>
Example 2:
Yllix Ad Code:
<script type="text/javascript" src="http://ylx-4.com/layer.php?section=General&pub='00000'&ga=g&fp"></script>
I want to do something similar but what i want to do is use javascript to load
these ad codes.
I have multiple website and also have multiple Advertisers. I want to echo random ad code on my website.
AM I DOING SOMETHING WRONG?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ad Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript" src="http://example.com/ad.php?id=yllix"></script>
<script type="text/javascript" src="http://example.com/ad.php?id=googleads"></script>
<script type="text/javascript" src="http://example.com/ad.php?id=clicksor"></script>
</body>
</html>
And MY PHP As per the first answer:
<?php
$id = $_GET['id'];
switch ($id) {
case "yllix":
echo 'document.write(\'<script type="text/javascript" src="http://ylx-1.com/bnr.php?section=General&pub=686929&format=300x250&ga=g"></script>
<noscript>
<img src="https://yllix.com/banners/aff/pub/300x250.jpg" border="0" /></noscript>
<script type="text/javascript" src="http://ylx-4.com/layer.php?section=General&pub=686929&ga=g&show=1&fp"></script>\');';
break;
case "googleads":
//google Ad Code Echo
echo 'document.write(\'<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-3293789816750173"
data-ad-slot="6844557963"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>\');';
break;
case "clicksor":
//Clicksor Code Echo
echo "document.write(\"<script type='text/javascript'>
clicksor_adhere_opt='left';
clicksor_default_url = '';
clicksor_banner_border = '#99CC33';
clicksor_banner_ad_bg = '#FFFFFF';
clicksor_banner_link_color = '#000000';
clicksor_banner_text_color = '#666666';
clicksor_layer_border_color = '';
clicksor_layer_ad_bg = '';
clicksor_layer_ad_link_color = '';
clicksor_layer_ad_text_color = '';
clicksor_text_link_bg = '';
clicksor_text_link_color = '';
clicksor_enable_text_link = false;
clicksor_banner_text_banner = true;
clicksor_banner_image_banner = true;
clicksor_enable_layer_pop = false;
clicksor_enable_pop = true;
</script>
<script type='text/javascript' src='http://b.clicksor.net/show.php?nid=1&pid=380499&adtype=1&sid=638894'></script>\");";
break;
default:
echo "document.write('Sorry')";
break;
}
?>
Nothing is loaded from the script tags from the page.
The page loaded with a <script> tag must be a plain Javascript script, not HTML. So you can't just echo a <script> tag, you have to echo a Javascript script that ads the script to the page. It can do this using document.write() (this is one of the few places where this function is still useful).
<?php
$id = $_GET['id'];
switch ($id) {
case "yllix":
//What to write here so that My <script> tag could load this echo by replacing itself like most ad code does?
echo 'document.write(\'<script type="text/javascript" src="http://ylx-4.com/layer.php?section=General&pub=&apos;000&apos;&ga=g&fp"></script>\');';
break;
case "googleads":
//google Ad Code Echo
break;
case "PropellerAdsMedia":
//PropellerAdsMedia Code Echo
break;
}
?>

repeatedly poll database for pages, then output pages in sequence with slide effect

I have a client who needs to output pages that are referenced by ID in a database. The pages must be output one after another (like a slide show), and there must be a slider transition effect. To make it "fun", the database will be changing as new pages are added, so a portion of the script to do all this must be run repeatedly to check the database.
I've got the pages to load, and I've got the transition working. The problem is, I can't get the polling to work because there's such a mess. That is, if I add a new page, I must manually reload the script - I need the script to detect new pages added to the database. I know that all I really need to do is just re-run the database query to generate the array, but with all the other stuff going on, I'm lost. I've tried setInterval() and even a while loop to no avail. At this point I'm sure I'm just missing something (hopefully) trivial, so I humbly ask for help. My code is VERY sloppy as I test, but here it is:
<?php
$community_id = 89;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
<?php
$con=mysqli_connect("localhost","username","password","db_name");
// Check connection
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
// get all the pages that pertain to the community
$uid_query = "SELECT uid FROM pages WHERE pid=" . $community_id;
// build the javascript array by grabbing all results from above query
$result = mysqli_query($con,$uid_query);
$counter = 0;
$baseURL = "http://www.website.com/index.php?id=";
echo "var frames = new Array;";
while($row = mysqli_fetch_array($result)) {
echo "frames[" . $counter . "]='" . $baseURL . $row['uid'] . "';";
$counter++;
echo "frames[" . $counter . "] = 5;";
$counter++;
}
mysqli_close($con);
?>
var i = 0, len = frames.length;
function ChangeSrc()
{
if (i >= len) { i = 0; } // start over
document.getElementById('frame').src = frames[i++];
setTimeout('ChangeSrc()', (frames[i++]*1000));
}
window.onload = ChangeSrc;
</script>
<style type="text/css">
body, html
{
margin: 0; padding: 0; height: 100%; overflow: hidden;
}
#iframe_container
{
position:absolute; left: 0; right: 0; bottom: 0; top: 0px;
}
</style>
</head>
<body>
<div id="iframe_container">
<iframe src="" name="frame" id="frame" width="100%" height="100%" frameborder="0"></iframe>
</div>
</body>
</html>
... and then any given page looks like this:
javascript:
$(document).ready(function(){
$('.hidden').slideDown(1000);
});
css:
.hidden{
display:none;
}
html:
<div class="hidden">
CONTENT GOES HERE
</div>

facebook share producing white / blank page with php and javascript

ok basically i am getting a white page when i try to use the facebook share buttons, both the new and the sharer.php version
i am trying to share a url like the following:
https://www.facebook.com/sharer/sharer.php?u=https://**.com/3e68ec7f58134f66d09a1c05c2783385/index.html
now the page loads fine if i paste in a new browser window, or even when i refresh the white / black page
here is my code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
overflow:hidden;
}
</style>
<link rel="stylesheet" href="onlinedojo/css/layout.css" type="text/css" media="screen" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="onlinedojo/js/hideshow.js" type="text/javascript"></script>
<script src="onlinedojo/js/jquery.tablesorter.min.js" type="text/javascript"> </script>
<script type="text/javascript" src="onlinedojo/js/jquery.equalHeight.js"></script>
<title>post</title>
</head>
<body>
<div id="fb-root"></div>
<script>
function postToFb(){
window.open('<?php echo $fburl ?>','1317220786706','width=400,height=400,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');
window.close();
return false;
}
</script>
<form class="submit_link" style="float:right">
<input type="submit" class="alt_btn" value="Share on Facebook" onclick="postToFb();" />
</form>
</body>
</html>
any help would be appreciated - this is driving me crazy!
You don't need a form or submit button here. so just remove form and button and put simple share link and try this
HTML:
<a href="javascript: void(0)" onClick="fbpopup('<?php echo urlencode($fburl); ?>')">
Share on Facebook
</a>
Javascript
<script>
function fbpopup(popwhat) {
window.open( popwhat, "fbshare", "height=380,width=660,resizable=0,toolbar=0,menubar=0,status=0,location=0,scrollbars=0" )
}
</script>
Well, yo try this
<script>
function postToFb(url) {
window.open(url, '_blank', 'width=530,height=460,left=' + (screen.availWidth / 2 - 250) + ',top=' + (screen.availHeight / 2 - 250) + '');
return false;
}
<?php
$title = urlencode('your title');
$summary = urlencode('your sumary');
$url_base = urlencode('url to share');
$url_image = urlencode('thumbnail url');
$url_to_share = "http://www.facebook.com/sharer/sharer.php?s=100&p[title]=$title&p[summary]=$summary&p[url]=$url_base&p[images][0]=$url_image";
?>
postToFb('<?php echo urlencode($url_to_share) ?>') {
</script>
I hope this help you.

refreshing a <div> with ajax but passing along a counter variable

I have two .php files. The first one ajax_testing.php looks like this:
<!DOCTYPE html>
<html>
<?php
$index_local=1;
$_SESSION['global_index'] = $index_local;
?>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<div id="main">Who is batman? click count=<?echo $_SESSION['global_index'] ?>
<button id="detailed">LINK</button>
</div>
</body>
<script type="text/javascript" language="javascript">
$(document).ready(function() { /// Wait till page is loaded
$("button").click(function(){
<?php
$_SESSION['global_index']+=1;
?>
$('#main').load('property-detailed.php?global_index='
+ <?php echo $_SESSION['global_index']; ?>
+ ' #main', function() {});
});
}); //// End of Wait till page is loaded
</script>
</html>
Document number two is called property-detailed.php and looks like this:
<!DOCTYPE html>
<html>
<?php
$_SESSION['global_index'] = $_GET['global_index'];
?>
<head>
<script></script>
</head>
<body>
<div id="main">Who is batman? click count=<?php echo $_SESSION['global_index']; ?>
<button id="detailed">LINK</button>
</div>
</body>
<script type="text/javascript" language="javascript">
$(document).ready(function() { /// Wait til page is loaded
$("button").click(function(){
<?php
$_SESSION['global_index']+=1;
?>
$('#main').load('property-detailed.php?global_index='
+ <?echo $_SESSION['global_index'] ?>
+ ' #main', function() {});
});
}); //// End of Wait till page is loaded
</script>
</html>
I load the first page, and it has a variable, $global_index, that is set to 1 and a button with an ajax command to reload the div with the new information found on the second page.
My goal is to have the variable $global_index carry over and increment each time I press the button. Is this possible with only ajax being implemented? If so, is there a way to make it happen with only the first page? Otherwise would it just be easier to have my database keep track of this number and increment that?
In your ajax_testing.php:
<?php session_start(); ?>
<script type="text/javascript" src="jquery.js"></script>
<?php
$_SESSION['counter'] = 1;
$count = $_SESSION['counter'];
?>
<div id="main">Batman<?php echo $count; ?></div>
<button id="detailed">Link</button>
<script type="text/javascript">
$(document).ready(function(){
$(document).on('click','#detailed',function(){
var count = "<?php echo $count; ?>",
dataString = "counter=" + count;
$.ajax({
type: "POST",
url: "property-detaild.php",
data:dataString,
success:function(data){
$('#main').html(data);
console.log(data);
}
});
})
});
</script>
And in your property-detailed.php:
<?php
session_start();
$_SESSION['counter'] = $_SESSION['counter']+1;
echo $_SESSION['counter'];
?>

How to display in a jquery script in a main page slider?

Lately I try to make a script which grab news from my facebook wall and post on my website.
With some research and some edit resulted this: example
Now, I want to put this script in the middle slider of this page
Connections are all right (js/css/script), but doesn't appear.
This is the sequence of slider part: (In slider are displayed also news manually introduced in database.)
<div id="middle_article">
<div class="jcarousel-prev-vertical" style="left:63px;"></div>
<div class="jcarousel-next-vertical" style="left:63px;"></div>
<ul id="stiri" class="jcarousel jcarousel-skin-tango">
<?php
$result_other_news = mysql_query("SELECT * FROM `stiri` WHERE `status` = '1' AND `lang` = 'ro' ORDER BY `data` DESC LIMIT 1,10");
while($row_other_news = mysql_fetch_array($result_other_news)){
$link_stire = 'http://www.aepado.ro/stiri/'.friendly_url($row_other_news['titlu']).'-'.$row_other_news['id'].'.html';
?>
<li>
<?php echo substr($row_other_news['titlu'], 0, 75); ?>
</li>
<?php } ?>
</ul>
</div>
Head part of my index page (correspondence with my problem):
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="http://aepado.ro/css/jquery.neosmart.fb.wall.css" rel="stylesheet" type="text/css"/>
<script src="http://aepado.ro/js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="http://aepado.ro/js/jquery.neosmart.fb.wall.js" type="text/javascript"> </script>
<script type="text/javascript">
function(){
$('#example1').fbWall({ id:'***',accessToken:'***'});
});
</script>
And, this is sequence to display script:
<div id="example1"></div>
Finally, i will thank you in advance, and if you need some more information i will gave you with pleasure.
Best regards,
Cosmin
did you initialize jcarousel?
$(function(){
('#mycarousel').jcarousel();
});

Categories