Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 230
  • Last Modified:

page doesn't work in chrome.

I have a page created where a CSS line goes around in a circle according to the time (which is shorted for this page). When it is finished, it should go to the next page through AJAX. However, it works in chrome sometimes but not other times. Usually when I clear the cache it doesn't work anymore. It works in ie and firefox.

It might be related to the fact that I don't have some of the code in a   $(document).ready(function(), however when I do that nothing works. Not sure if anybody can help me with this, I only half understand the code since I am very new at all of the programming and got some of it on-line.


http://squareonemeditation.com/webapp/meditatetest.php
meditatetest.php
0
designaire
Asked:
designaire
  • 22
  • 17
1 Solution
 
rgranlundCommented:
If you go here: http://validator.w3.org/  and place your URL in the validator.  You will see you have a few errors with your CSS.  I would start there and fix those errors.
0
 
RobOwner (Aidellio)Commented:
Look in the dev tools, network tab and you'll see that your php page has stalled.  I would debug your php code to see what's preventing the content from being delivered.

Also noticing that you're loading A LOT of sound files.  These two continuously fail for me:

http://squareonemeditation.com/webapp/Cosmic_Splash.m4a
http://squareonemeditation.com/webapp/guitar15.mp3
0
 
RobOwner (Aidellio)Commented:
Is there a need to load all those sound files?
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
designaireAuthor Commented:
All the sound files work by themselves for me. The sound files are  used when there are other setting. When I have more than 7 the last one doesn't work in chrome. I stripped out all the php and got rid of most of the html/css errors.  It still doesn't refer to the next page in chrome but works in ie and firefox.
0
 
designaireAuthor Commented:
Thanks for your suggestions however.
0
 
RobOwner (Aidellio)Commented:
I'm now getting a 404 "Not found" with http://squareonemeditation.com/webapp/Cosmic_Splash.mp3
0
 
RobOwner (Aidellio)Commented:
This could be related to your host, however i'll set up a test environment to confirm
0
 
designaireAuthor Commented:
Sorry, it's there now. I changed it to mp3.
0
 
designaireAuthor Commented:
Its the same on localhost
0
 
designaireAuthor Commented:
Even when I took the sound out the page didn't refer to the next page in chrome. It does eventually  but when you clean out the cache it get's hung up. I even fixed the page to get all the query in the load function. It didn't make a difference.
0
 
RobOwner (Aidellio)Commented:
Which is why I suspect it could be your hosting service but I'll test.
0
 
designaireAuthor Commented:
adding
clearInterval(percent);

after clearInterval(timer);
            
seems to work
0
 
designaireAuthor Commented:
no, doesn't work the first time still
0
 
designaireAuthor Commented:
I changed the question and resposted
0
 
designaireAuthor Commented:
I've requested that this question be closed as follows:

Accepted answer: 0 points for designaire's comment #a40478638

for the following reason:

I reposed the question after making some changes
0
 
designaireAuthor Commented:
Somebody answered on the other post. I added async:false, to ajax.



$.ajax({
						async:false,
						url: "postmeditate.php",
						type : "POST",
						data: { length: length, userid: userid},
					})
					.success(function (response){
						location.href = "tracking.php";    							
					})
					.error(function (e){
					});

Open in new window

0
 
RobOwner (Aidellio)Commented:
If you've reposted please just delete this question.
0
 
RobOwner (Aidellio)Commented:
However that isn't going to fix the issue with the audio files.  Your host doesn't like it.
0
 
RobOwner (Aidellio)Commented:
Scrap that... seems that chrome is just preloading part of the audio.  They'll play when initiated.
0
 
designaireAuthor Commented:
Yes, it does have a problem with audio. It will play all but the 8th audio. If I change the order it will still only play the first 7. It's the same on my hard drive. It's not my hosting company.
0
 
designaireAuthor Commented:
Any ideas. I might have to post another question for the audio.
0
 
RobOwner (Aidellio)Commented:
I'm aware of that now, sorry to confuse things.

I have cleaned up your code somewhat as there were a few errors:

$(function() {	
	var userid=3;
	var type=2;
	var length=20;
	var timer=0;
	var timerSeconds =8.75,
		minutes=10*timer,
		/*var minutes=100*timer works with correct length*/
		percent=0;
	var guide5 = $('#guide5'),guide10 = $('#guide10');
	guide5.load();
	guide10.load();
	var audio;

	function drawTimer(percent){

		$('div.timer').html('<div id="slice"'+(percent > 50?' class="gt50"':'')+'><div class="pie"></div>'+(percent > 50?'<div class="pie fill"></div>':'')+'</div>');
		var deg = 360/100*percent;
		$('#slice .pie').css({
			'-moz-transform':'rotate('+deg+'deg)',
			'-webkit-transform':'rotate('+deg+'deg)',
			'-o-transform':'rotate('+deg+'deg)',
			'transform':'rotate('+deg+'deg)'
		});
		$('.percent').html(Math.round(percent)+'%');
	}

	$(stopWatch = function() { 


		if(percent >= 100){
			drawTimer(100);
			clearInterval(timer);



		}else{
			percent += (timerSeconds/minutes);
			drawTimer(percent);
		}
	});



	$('input').val('stop');

	$('#play').click(function(e){
		e.preventDefault();
		clearInterval(timer);
		if($('#play')){
			/*$('input[type=button]#watch').val('Pause');*/
			timer = setInterval(function() {stopWatch();},50);

			if (type==1){
				if (length==5)
				{document.getElementById('guide5').play();	
				}
				else if (length==10)
				{
					document.getElementById('guide10').play();	
				}
				else if (length==15)
				{
					document.getElementById('guide15').play();	
				}
				else if (length==20)
				{
					document.getElementById('guide20').play();	
				}
			}
			else if(type==2){
				if (length==5)
				{document.getElementById('music5').play();
				}
				else if (length==10)
				{
					document.getElementById('music10').play();	
				}
				else if (length==15)
				{
					document.getElementById('music15').play();	
				}
				else if (length==20)
				{
					document.getElementById('music20').play();	
				}		
			}

		}
	});





	$('#pause').click(function(e){
		e.preventDefault();
		clearInterval(timer);
		if($('#pause')){
			/*$('input[type=button]#watch').val('Pause');*/

			if (type==1){
				if (length==5)
				{document.getElementById('guide5').pause();

				}
				else if (length==10)
				{
					document.getElementById('guide10').pause();

				}
				else if (length==15)
				{
					document.getElementById('guide15').pause();

				}
				else if (length==20)
				{
					document.getElementById('guide20').pause();

				}
			}
			else if(type==2){
				if (length==5)
				{
					document.getElementById('music5').pause();

				}
				else if (length==10)
				{
					document.getElementById('music10').pause();

				}
				else if (length==15)
				{
					document.getElementById('music15').pause();

				}
				else if (length==20)
				{
					document.getElementById('music20').pause();

				}		
			}

		}
	});


	$('#rewind').click(function(e){
		e.preventDefault();
		clearInterval(timer);
		if($('#rewind')){
			/*$('input[type=button]#watch').val('Pause');*/
			percent=0;
			drawTimer(0.25);	

			var audio;

			if (type==1){
				if (length==5)
				{
					audio = document.getElementById("guide5");
					audio.pause(); 
					audio.currentTime = 0;
				}
				else if (length==10)
				{
					audio = document.getElementById("guide10");
					audio.pause(); 
					audio.currentTime = 0;	
				}
				else if (length==15)
				{
					audio = document.getElementById("guide15");
					audio.pause(); 
					audio.currentTime = 0;
				}
				else if (length==20)
				{
					audio = document.getElementById("guide20");
					audio.pause(); 
					audio.currentTime = 0;
				}
			}
			else if(type==2){
				if (length==5)
				{
					audio = document.getElementById("music5");
					audio.pause(); 
					audio.currentTime = 0;
				}
				else if (length==10)
				{
					audio = document.getElementById("music10");
					audio.pause(); 
					audio.currentTime = 0;
				}
				else if (length==15)
				{
					audio = document.getElementById("music15");
					audio.pause(); 
					audio.currentTime = 0;	
				}
				else if (length==20)
				{
					audio = document.getElementById("music20");
					audio.pause(); 
					audio.currentTime = 0;	
				}		
			}

		}
	});

	$('#play').click();
	$('#pause').click();
	$('#rewind').click();

});

Open in new window

0
 
RobOwner (Aidellio)Commented:
Is this how you want the animation to work? http://jsbin.com/welevi/1/edit?js,output
0
 
designaireAuthor Commented:
Yes, what did you do?
0
 
RobOwner (Aidellio)Commented:
Ok, I debugged your stopWatch function and found that your timer variable was 0. Setting it to 1 allowed the animation to work.
0
 
RobOwner (Aidellio)Commented:
take a look at the javascript in the left panel: http://jsbin.com/welevi/1/edit?js,output
0
 
designaireAuthor Commented:
Actually the timer and length and are added together with the PHP then set to timer, in the real page. It is never 0. I just set it to 0 for the test page because I don't have any data. I would have to post the page.
0
 
designaireAuthor Commented:
The 8th audio still doesn't work.
0
 
designaireAuthor Commented:
http://squareonemeditation.com/webapp/audiotest.php

now 20 is not playing, if you change that to 15, 10 or 5 it should work
0
 
designaireAuthor Commented:
It works in ie and firefox however.
0
 
RobOwner (Aidellio)Commented:
"counter is not defined".  open up the debug tools in chrome (ctrl+shift+i)
0
 
designaireAuthor Commented:
sorry forgot to take that out. I don't need it, I was just trying something.
0
 
designaireAuthor Commented:
It's out now. Still doesn't play.
0
 
RobOwner (Aidellio)Commented:
ok firstly set the audio to not preload anything:
<audio preload="none" id="guide5" src="http://squareonemeditation.com/webapp/med5.mp3"></audio>
<audio preload="none" id="guide10" src="http://squareonemeditation.com/webapp/med10.mp3"></audio>
<audio preload="none" id="guide15" src="http://squareonemeditation.com/webapp/med15.mp3"></audio>
<audio preload="none" id="guide20" src="http://squareonemeditation.com/webapp/med20.mp3"></audio>
<audio preload="none" id="music5" src="http://squareonemeditation.com/webapp/piano5.mp3"></audio>
<audio preload="none" id="music10" src="http://squareonemeditation.com/webapp/harp10.mp3"></audio>
<audio preload="none" id="music15" src="http://squareonemeditation.com/webapp/guitar15.mp3"></audio>
<audio preload="none" id="music20" src="http://squareonemeditation.com/webapp/Cosmic_Splash.mp3"></audio>

Open in new window


Then in your js, remove the 2 load commands:
guide5.load();
guide10.load();


Now, nothing is loaded when you load the page.

Below is your modified js.  The changes:
1) I've moved all the functions outside of jQuery's init function as they shouldn't be in there.
2) dynamically load the audio when you click play:
                        else if (length==20)
                        {
                              document.getElementById('music20').load();
                              document.getElementById('music20').play();
                        }

full JS:
var userid=3;
var type=2;
var length=20;
var timer=1;
var timerSeconds =8.75;
var minutes=100*timer;
/*var minutes=100*timer works with correct length*/
var percent=0;
var audio;

function drawTimer(percent){

	$('div.timer').html('<div id="slice"'+(percent > 50?' class="gt50"':'')+'><div class="pie"></div>'+(percent > 50?'<div class="pie fill"></div>':'')+'</div>');
	var deg = 360/100*percent;
	$('#slice .pie').css({
		'-moz-transform':'rotate('+deg+'deg)',
		'-webkit-transform':'rotate('+deg+'deg)',
		'-o-transform':'rotate('+deg+'deg)',
		'transform':'rotate('+deg+'deg)'
	});
	$('.percent').html(Math.round(percent)+'%');
}

function stopWatch() {
	if (percent >= 100) {
		drawTimer(100);
		clearInterval(timer);
	} else {
		percent += (timerSeconds/minutes);
		drawTimer(percent);
	}
};

$(function() {
	$('input').val('stop');

	$('#play').click(function(e){
		e.preventDefault();
		clearInterval(timer);
		if($('#play')){
			/*$('input[type=button]#watch').val('Pause');*/
			timer = setInterval(function() {stopWatch();},50);
			var audio;
			if (type==1) {
				if (length==5)
				{
					document.getElementById('guide5').play();
				}
				else if (length==10)
				{
					document.getElementById('guide10').play();
				}
				else if (length==15)
				{
					document.getElementById('guide15').play();
				}
				else if (length==20)
				{
					document.getElementById('guide20').play();
				}
			}
			else if(type==2){
				if (length==5)
				{
					document.getElementById('music5').play();
				}
				else if (length==10)
				{
					document.getElementById('music10').play();
				}
				else if (length==15)
				{
					document.getElementById('music15').play();
				}
				else if (length==20)
				{
					document.getElementById('music20').load();
					document.getElementById('music20').play();
				}
			}

		}
	});





	$('#pause').click(function(e){
		e.preventDefault();
		clearInterval(timer);
		if($('#pause')){
			/*$('input[type=button]#watch').val('Pause');*/

			if (type==1){
				if (length==5)
				{document.getElementById('guide5').pause();

				}
				else if (length==10)
				{
					document.getElementById('guide10').pause();

				}
				else if (length==15)
				{
					document.getElementById('guide15').pause();

				}
				else if (length==20)
				{
					document.getElementById('guide20').pause();

				}
			}
			else if(type==2){
				if (length==5)
				{
					document.getElementById('music5').pause();

				}
				else if (length==10)
				{
					document.getElementById('music10').pause();

				}
				else if (length==15)
				{
					document.getElementById('music15').pause();

				}
				else if (length==20)
				{
					document.getElementById('music20').pause();

				}
			}

		}
	});


	$('#rewind').click(function(e){
		e.preventDefault();
		clearInterval(timer);
		if($('#rewind')){
			/*$('input[type=button]#watch').val('Pause');*/
			percent=0;
			drawTimer(0.25);

			var audio;

			if (type==1){
				if (length==5)
				{
					audio = document.getElementById("guide5");
					audio.pause();
					audio.currentTime = 0;
				}
				else if (length==10)
				{
					audio = document.getElementById("guide10");
					audio.pause();
					audio.currentTime = 0;
				}
				else if (length==15)
				{
					audio = document.getElementById("guide15");
					audio.pause();
					audio.currentTime = 0;
				}
				else if (length==20)
				{
					audio = document.getElementById("guide20");
					audio.pause();
					audio.currentTime = 0;
				}
			}
			else if(type==2){
				if (length==5)
				{
					audio = document.getElementById("music5");
					audio.pause();
					audio.currentTime = 0;
				}
				else if (length==10)
				{
					audio = document.getElementById("music10");
					audio.pause();
					audio.currentTime = 0;
				}
				else if (length==15)
				{
					audio = document.getElementById("music15");
					audio.pause();
					audio.currentTime = 0;
				}
				else if (length==20)
				{
					audio = document.getElementById("music20");
					audio.pause();
					audio.currentTime = 0;
				}
			}

		}
	});

// THESE LINES HAVE BEEN COMMENTED OUT - NO NEED TO HAVE THEM
	//$('#play').click();
	//$('#pause').click();
	//$('#rewind').click();

});

Open in new window

0
 
designaireAuthor Commented:
Sorry, still doesn't work. You can't have 2 ID's that are the same on the one page. Not that that's why it doesn't work. Doesn't work without the preload none. It's only the 20 minutes that doesn't work in chrome.
0
 
RobOwner (Aidellio)Commented:
Works for me ...

I'm confused with your "You can't have 2 ID's that are the same on the one page".  Where are there two elements with the same ID?
0
 
RobOwner (Aidellio)Commented:
Please see your demo here: http://jsbin.com/welevi/3/edit?html,js,output

Plays all the different sounds.
0
 
designaireAuthor Commented:
Yes, I didn't replace the          <audio id="music5" src="piano5.mp3"></audio> I put it in twice. It does work! Thank you! Thank you! Thank You!  another thing that helped a lot is replacing the JQuery <script type="text/javascript" src="js/jquery-1.7.1.js"></script> with a local. The other link gave me an error message, something having to do with the pause.

You really earned your points, thanks for hanging in there.
0
 
designaireAuthor Commented:
Thank You! Thank You! Thank You!
0
 
RobOwner (Aidellio)Commented:
Not a problem, it was my pleasure.  You deserve credit too for being so patient! so THANK YOU too :)
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 22
  • 17
Tackle projects and never again get stuck behind a technical roadblock.
Join Now