Jump to content

Jquery progress bar, chrome ok, mozilla x2 width


Lastbreath

Recommended Posts

Hi, i created website in wich i have a quiz of 5 questions with next button and a progress bar, now im at the media queries part, and have a wierd issue, the issue is with the filling of the progress bar, in chrome is ok in both sizes work well, but in mozilla for some reason it calculates x2 ? anyone to explain why and maybe sugges fix, im googling for 2h cant find anything. Tnx

 

the code:

<script type="text/javascript">
$(window).resize(function(){		   
	   var wi = $(window).width();	
	   if(wi >= 1025){
		   $(function(){
		        $('.btnNext, .btnShowResult').click(function(){
		            if ($('input[type=radio]:checked:visible').length == 0) {
		                        
		                return false;
		            }
		            $(this).parents('.questionContainer').fadeOut(500, function(){
		                $(this).next().fadeIn(500);
		            });
		            var el = $('#progress');
		            el.width(el.width() + 84 + 'px');
		        });        
		              
		        $('.btnShowResult').click(function(){
		            $('#progress').width(420);           
		            $('#progressKeeper').fadeOut(500);
		            $('.txtStatusBar').fadeOut(500);
		            $('.circletimer').fadeOut(500);
		        });    
		});
	   } else {  	  	   	   	             
	   if(wi >= 768 && wi <= 1024){
			$(function(){
			        $('.btnNext, .btnShowResult').click(function(){
			            if ($('input[type=radio]:checked:visible').length == 0) {
			                        
			                return false;
			            }
			            $(this).parents('.questionContainer').fadeOut(500, function(){
			                $(this).next().fadeIn(500);
			            });
			            var el = $('#progress');
			            el.width(el.width() + 60 + 'px');
			        });        
			              
			        $('.btnShowResult').click(function(){
			            $('#progress').width(300);           
			            $('#progressKeeper').fadeOut(500);
			            $('.txtStatusBar').fadeOut(500);
			            $('.circletimer').fadeOut(500);
			        });    
			});
	   }
	   }		   
}).resize();

</script> 

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.