Hello all
My website found
here has two buttons. Both return videos from a tumblr blog using the tumblr api. I display 4 videos at a time,If i click the 'Forward' button it will call the php function(blogFunction.php) which will return the next 4 videos. The 'back' button will go back to the previous 4 videos.
The problem lies in that when I press 'Forward' in chrome, the videos do not change. The back button works fine. This problem only persists in Chrome. Firefox and Internet Explorer work fine. I noticed if I click the 'Forward' button twice really fast, it will work as intended.
I have the latest versions of Chrome and Firefox and IE8.
I would be incredibly happy if someone can help me here. Really happy!
My code.
Index.php
<?php
session_start();
$_SESSION['views'] = 0;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> Retrovate </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<link rel="stylesheet" href="base.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
</head>
<body>
<div class = "face">
<div class="header">
<div class="content">
<h1 class="title">Under counstruction</h1>
<ul id="sdt_menu" class="sdt_menu">
<li>
<a href="#">
<img src="images/mac.jpg" alt="James McLaren"/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">About me</span>
<span class="sdt_descr">Who is this guy?</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="images/gamer.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Gamer</span>
<span class="sdt_descr">What I do in free time</span>
</span>
</a>
<div class="sdt_box">
<a href="#">Currently Playing</a>
<a href="#">Played</a>
</div>
</li>
<li>
<a href="#">
<img src="images/inspiration.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Inspiration</span>
<span class="sdt_descr">What this man has done for me</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="images/photo.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Photos</span>
<span class="sdt_descr">Photographer for 2 weeks of the year</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="images/blog.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Blog</span>
<span class="sdt_descr">Reposts from youtube and reddit</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="images/project.gif" alt="" />
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Projects</span>
<span class="sdt_descr">The stuff I have done</span>
</span>
</a>
<div class="sdt_box">
<a href="#">myBlood</a>
</div>
</li>
</ul>
</div>
</div>
<div class ="menu">
<ul class="nav">
</ul>
</div>
<div class="center">
<input type="submit" value="Forward" id="call_ajax1" />
<input type="submit" value="Back" id="call_ajax2" />
<div id = "blog">
</div>
</div>
<div class = "contact">
<div class ="scrollingDiv">
</div>
</div>
<div class="footer">
<a href ="http://www.youtube.com/user/TheRetroMac"><img src = "images/youtube2.png" alt = "Youtube Channel" /></a>
<a href ="http://retrovate.tumblr.com/"><img src = "images/tumblr.png" alt = "Tumblr" /> </a>
<a href ="http://www.facebook.com/Retrovate"><img src = "images/fb.png" alt = "Facebook Profile" /> </a>
<a href ="https://twitter.com/#!/Retrovate"><img src = "images/twitter2.png" alt = "Twitter Feed" /> </a>
<a href ="https://plus.google.com/u/0/113170773268202431297/posts"><img src = "images/googleplus.png" alt = "Google Plus Profile" /> </a>
<a href ="http://retrovate.deviantart.com/"><img src = "images/deviantart.png" alt = "Deviant Art" /> </a>
<br>
<div>
<a href="http://tympanus.net/codrops/2010/07/16/slide-down-box-menu/">Menu Thanks to tympanus</a>
</div>
</div>
</div>
<script type="text/javascript">
$('#call_ajax1').click(function () {
$.ajax({ url: 'blogFunction.php',
data: {action: 'test1'},
dataType: "html",
type: 'post',
success: function(output) {
$('#blog').html(output);
}
});
});
</script>
<script type="text/javascript">
$('#call_ajax2').click(function () {
$.ajax({ url: 'blogFunction.php',
data: {action: 'test2'},
dataType: "html",
type: 'post',
success: function(output) {
$('#blog').html(output);
}
});
});
</script>
<script type="text/javascript">
$(function() {
$('#sdt_menu > li').bind('mouseenter',function(){
var $elem = $(this);
$elem.find('img')
.stop(true)
.animate({
'width':'170px',
'height':'170px',
'left':'0px'
},400,'easeOutBack')
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'140px'},500,'easeOutBack')
.andSelf()
.find('.sdt_active')
.stop(true)
.animate({'height':'170px'},300,function(){
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length){
var left = '170px';
if($elem.parent().children().length == $elem.index()+1)
left = '-170px';
$sub_menu.show().animate({'left':left},200);
}
});
}).bind('mouseleave',function(){
var $elem = $(this);
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length)
$sub_menu.hide().css('left','0px');
$elem.find('.sdt_active')
.stop(true)
.animate({'height':'0px'},300)
.andSelf().find('img')
.stop(true)
.animate({
'width':'0px',
'height':'0px',
'left':'85px'},400)
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'25px'},500);
});
});
</script>
<script type="text/javascript">
$().ready(function() {
var $scrollingDiv = $("#scrollingDiv");
$(window).scroll(function(){
$scrollingDiv
.stop()
.animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "slow" );
});
});
</script>
</body>
</html>
my blogFunction.php file
<?php
session_start();
if(isset($_POST['action']) && !empty($_POST['action'])) {
$action = $_POST['action'];
switch($action) {
case 'test1' : blogforward();break;
case 'test2' : blogback();break;
}
}
function blogforward(){
$request_url = "http://retrovate.tumblr.com/api/read?type=posts";
$xml = simplexml_load_file($request_url);
$_SESSION['views'] = $_SESSION['views']+ 3;
$a = $_SESSION['views'];
$b = $a+3;
echo "A = ".$a;
echo "B = ".$b;
for ($i = $a; $i <= $b; $i++) {
echo '<h2>'.$xml->posts->post[$i]->{'regular-title'}.'</h2>';
echo '<br>';
echo $xml->posts->post[$i]->{'regular-body'};
echo '<br>';
echo '<br>';
}
}
function blogback(){
$request_url = "http://retrovate.tumblr.com/api/read?type=posts";
$xml = simplexml_load_file($request_url);
$_SESSION['views'] = $_SESSION['views']- 3;
$a = $_SESSION['views'];
$b = $a+3;
echo "A = ".$a;
echo "B = ".$b;
for ($i = $a; $i <= $b; $i++) {
echo '<h2>'.$xml->posts->post[$i]->{'regular-title'}.'</h2>';
echo '<br>';
echo $xml->posts->post[$i]->{'regular-body'};
echo '<br>';
echo '<br>';
}
}
?>
Submit an article or tip