Click here to Skip to main content
12,955,959 members (72,472 online)
Rate this:
 
Please Sign up or sign in to vote.
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>';
		}	
	
	}
?>
Posted 22-Jan-12 16:10pm
Mactm309

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

    Print Answers RSS
Top Experts
Last 24hrsThis month
OriginalGriff 6,849
CHill60 3,550
Maciej Los 3,223
ppolymorphe 2,060
Jochen Arndt 1,975


Advertise | Privacy | Mobile
Web01 | 2.8.170525.1 | Last Updated 22 Jan 2012
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100