?
Solved

page doesn't work in chrome.

Posted on 2014-12-02
40
Medium Priority
?
213 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 43

Expert Comment

by:Rob
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 43

Expert Comment

by:Rob
ID: 40477127
Is there a need to load all those sound files?
0
WordPress Tutorial 3: Plugins, Themes, and Widgets

The three most common changes you will make to your website involve the look (themes), the functionality (plugins), and modular elements (widgets).

In this article we will briefly define each again, and give you directions on how to install them.

 

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 43

Expert Comment

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

Expert Comment

by:Rob
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 43

Expert Comment

by:Rob
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 43

Expert Comment

by:Rob
ID: 40479370
If you've reposted please just delete this question.
0
 
LVL 43

Expert Comment

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

Expert Comment

by:Rob
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
 

Author Comment

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

Expert Comment

by:Rob
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 43

Expert Comment

by:Rob
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 43

Expert Comment

by:Rob
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 43

Expert Comment

by:Rob
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 43

Expert Comment

by:Rob
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 43

Accepted Solution

by:
Rob earned 2000 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 43

Expert Comment

by:Rob
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 43

Expert Comment

by:Rob
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 43

Expert Comment

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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

770 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