Solved

page doesn't work in chrome.

Posted on 2014-12-02
40
194 Views
Last Modified: 2014-12-03
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
Comment
Question by:designaire
  • 22
  • 17
40 Comments
 
LVL 7

Expert Comment

by:rgranlund
ID: 40477060
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
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40477121
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
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40477127
Is there a need to load all those sound files?
0
 

Author Comment

by:designaire
ID: 40477417
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
 

Author Comment

by:designaire
ID: 40477418
Thanks for your suggestions however.
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40477454
I'm now getting a 404 "Not found" with http://squareonemeditation.com/webapp/Cosmic_Splash.mp3
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40477501
This could be related to your host, however i'll set up a test environment to confirm
0
 

Author Comment

by:designaire
ID: 40477519
Sorry, it's there now. I changed it to mp3.
0
 

Author Comment

by:designaire
ID: 40477521
Its the same on localhost
0
 

Author Comment

by:designaire
ID: 40477523
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
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40477533
Which is why I suspect it could be your hosting service but I'll test.
0
 

Author Comment

by:designaire
ID: 40477698
adding
clearInterval(percent);

after clearInterval(timer);
            
seems to work
0
 

Author Comment

by:designaire
ID: 40477750
no, doesn't work the first time still
0
 

Author Comment

by:designaire
ID: 40478638
I changed the question and resposted
0
 

Author Comment

by:designaire
ID: 40479369
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
 

Author Comment

by:designaire
ID: 40478809
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
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40479370
If you've reposted please just delete this question.
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40479417
However that isn't going to fix the issue with the audio files.  Your host doesn't like it.
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40479427
Scrap that... seems that chrome is just preloading part of the audio.  They'll play when initiated.
0
 

Author Comment

by:designaire
ID: 40479438
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
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 

Author Comment

by:designaire
ID: 40479442
Any ideas. I might have to post another question for the audio.
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40479467
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
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40479494
Is this how you want the animation to work? http://jsbin.com/welevi/1/edit?js,output
0
 

Author Comment

by:designaire
ID: 40479509
Yes, what did you do?
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40479574
Ok, I debugged your stopWatch function and found that your timer variable was 0. Setting it to 1 allowed the animation to work.
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40479599
take a look at the javascript in the left panel: http://jsbin.com/welevi/1/edit?js,output
0
 

Author Comment

by:designaire
ID: 40479601
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
 

Author Comment

by:designaire
ID: 40479602
The 8th audio still doesn't work.
0
 

Author Comment

by:designaire
ID: 40479623
http://squareonemeditation.com/webapp/audiotest.php

now 20 is not playing, if you change that to 15, 10 or 5 it should work
0
 

Author Comment

by:designaire
ID: 40479625
It works in ie and firefox however.
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40479634
"counter is not defined".  open up the debug tools in chrome (ctrl+shift+i)
0
 

Author Comment

by:designaire
ID: 40479654
sorry forgot to take that out. I don't need it, I was just trying something.
0
 

Author Comment

by:designaire
ID: 40479660
It's out now. Still doesn't play.
0
 
LVL 42

Accepted Solution

by:
Rob Jurd, EE MVE earned 500 total points
ID: 40479890
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
 

Author Comment

by:designaire
ID: 40480018
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
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40480024
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
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40480059
Please see your demo here: http://jsbin.com/welevi/3/edit?html,js,output

Plays all the different sounds.
0
 

Author Comment

by:designaire
ID: 40480071
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
 

Author Closing Comment

by:designaire
ID: 40480077
Thank You! Thank You! Thank You!
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40480103
Not a problem, it was my pleasure.  You deserve credit too for being so patient! so THANK YOU too :)
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
jquery, dropdown 4 38
Re-imbursement Claim System 3 25
Web Reply Form - PHP with Upload 4 21
inserting while loop results 2 7
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now