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
designaireAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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.
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
RobOwner (Aidellio)Commented:
Is there a need to load all those sound files?
Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

Learn More!
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.
designaireAuthor Commented:
Thanks for your suggestions however.
RobOwner (Aidellio)Commented:
I'm now getting a 404 "Not found" with http://squareonemeditation.com/webapp/Cosmic_Splash.mp3
RobOwner (Aidellio)Commented:
This could be related to your host, however i'll set up a test environment to confirm
designaireAuthor Commented:
Sorry, it's there now. I changed it to mp3.
designaireAuthor Commented:
Its the same on localhost
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.
RobOwner (Aidellio)Commented:
Which is why I suspect it could be your hosting service but I'll test.
designaireAuthor Commented:
adding
clearInterval(percent);

after clearInterval(timer);
            
seems to work
designaireAuthor Commented:
no, doesn't work the first time still
designaireAuthor Commented:
I changed the question and resposted
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
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

RobOwner (Aidellio)Commented:
If you've reposted please just delete this question.
RobOwner (Aidellio)Commented:
However that isn't going to fix the issue with the audio files.  Your host doesn't like it.
RobOwner (Aidellio)Commented:
Scrap that... seems that chrome is just preloading part of the audio.  They'll play when initiated.
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.
designaireAuthor Commented:
Any ideas. I might have to post another question for the audio.
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

RobOwner (Aidellio)Commented:
Is this how you want the animation to work? http://jsbin.com/welevi/1/edit?js,output
designaireAuthor Commented:
Yes, what did you do?
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.
RobOwner (Aidellio)Commented:
take a look at the javascript in the left panel: http://jsbin.com/welevi/1/edit?js,output
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.
designaireAuthor Commented:
The 8th audio still doesn't work.
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
designaireAuthor Commented:
It works in ie and firefox however.
RobOwner (Aidellio)Commented:
"counter is not defined".  open up the debug tools in chrome (ctrl+shift+i)
designaireAuthor Commented:
sorry forgot to take that out. I don't need it, I was just trying something.
designaireAuthor Commented:
It's out now. Still doesn't play.
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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.
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?
RobOwner (Aidellio)Commented:
Please see your demo here: http://jsbin.com/welevi/3/edit?html,js,output

Plays all the different sounds.
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.
designaireAuthor Commented:
Thank You! Thank You! Thank You!
RobOwner (Aidellio)Commented:
Not a problem, it was my pleasure.  You deserve credit too for being so patient! so THANK YOU too :)
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.