Javascript slider werkt alleen (volledig) in Chrome

Status
Niet open voor verdere reacties.

perryL

Gebruiker
Lid geworden
23 okt 2007
Berichten
109
Beste helpmij-ers,

Ik heb een nieuwe site ontwikkeld voor een onderdeel van ons bedrijf.
Ik had nog ergens een component liggen voor het indelen van recepten. Nu zit er in dat component de mogelijkheid om ingrediënten toe te voegen en er vervolgens een kostencalculatie aan te hangen.
Dit heb ik inmiddels gedaan.... alleen toont de slider (voor het aantal personen) alleen in Chrome meteen het juiste totaalbedrag.

Mogelijk werkt de website alleen nog via mobiel vanwege de prelive omgeving waar een IP filter aanhangt: KLIK

In Firefox en IE werkt de slider ook wel.. alleen staat er standaard Totaalbedrag €0. Als men vervolgens de slider gebruikt dan komen de bedragen er netjes te staan.

Ik hoop dat iemand me op weg kan helpen.

Ik ben er inmiddels achter dat het hier ergens moet zitten:

PHP:
	<?php
	echo JText::_('COM_YOORECIPE_FOR'),' ','<span id="spanNbPersons"';
	if ($use_google_recipe) {
		echo ' class="servingsize"';
	}
	echo '>',$recipe->nb_
	s,'</span>';
	
	$imgIcon;
	if ($recipe->servings_type == 'P') {
		echo ' ',JText::_('COM_YOORECIPE_PERSONS');
		$imgIcon = 'person-icon.png';
	}
	else if ($recipe->servings_type == 'B') {
		echo ' ',JText::_('COM_YOORECIPE_YOORECIPE_BATCHES_LABEL');
		$imgIcon = 'batch-icon.png';
	}
	else if ($recipe->servings_type == 'S') {
		echo ' ',JText::_('COM_YOORECIPE_YOORECIPE_SERVINGS_LABEL');
		$imgIcon = 'batch-icon.png';
	}
	else if ($recipe->servings_type == 'D') {
		echo ' ',JText::_('COM_YOORECIPE_YOORECIPE_DOZENS_LABEL');
		$imgIcon = 'batch-icon.png';
	}
	
	if ($show_people_icons) {
		echo ' (<span id="spanShowPersons">';
		for ($j = 1 ; $j <= $recipe->nb_persons; $j++) {
			echo '<img src="',JUri::root(),'media/com_yoorecipe/images/',$imgIcon,'" alt=""/>';
		}
		echo '</span>)';
	}
?>
</p>

<?php	
	if ($use_prices) {
	
		$totalAmount = 0;
		foreach ($recipe->ingredients as $ingredient) {
			$totalAmount += $ingredient->price;
		}
?>
		<div><?php echo JText::_('COM_YOORECIPE_TOTAL_AMOUNT'); ?>  <?php echo $currency; ?> <span id="totalPrice"><?php echo $totalAmount; ?></span> </div>
<?php
	}
?>

<?php
	if ($use_quantity_converter) {

		if ($use_html5_range_input) {
			
			$script = array();
			$script[] = "window.addEvent('domready', function () {";
			$script[] = "updateQuantities = function() {";
			$script[] = "nb_servings = $('slider').value;";
			$script[] = "var quantities = ".json_encode($this->recipe->quantities).";";
			$script[] = "$('spanNbPersons').set('html',nb_servings);";
	
			if ($show_people_icons) {
	
				$script[] = "$('spanShowPersons').set('html','');";
				$script[] = "for (i = 0 ; i < nb_servings; i++) {";
				$script[] = "var img = new Element('img', {'src': '".Juri::root()."media/com_yoorecipe/images/".$imgIcon."', 'alt':''});";
				$script[] = "img.inject($('spanShowPersons'));";
				$script[] = "}";
			}
	
			$script[] = "var inputs = document.getElementsByTagName('input');";
			$script[] = "var totalPrice = 0;";
			$script[] = "for (i = 0 ; i < inputs.length ; i++) {";
			$script[] = "if (inputs[i].name == 'ingredientId') {";
			
			$script[] = "var newQty = quantities[inputs[i].value][nb_servings];";
			$script[] = "if (newQty != 0) {";
			$script[] = "$('spanQuantity_' + inputs[i].value).set('html',newQty);";
			$script[] = "} else {";
			$script[] = "$('spanQuantity_' + inputs[i].value).set('html','');";
			$script[] = "}";
				
			if ($use_prices) {
				$script[] = "var newPrice = $('initialPrice_' + inputs[i].value).value * nb_servings / ".$recipe->nb_persons.";";
				$script[] = "$('spanPrice_' + inputs[i].value).set('html', Math.round(newPrice*100)/100);";
				$script[] = "totalPrice += newPrice;";
			}
	
			$script[] = "}";
			$script[] = "}";
				
			if ($use_prices) {
				$script[] = "$('totalPrice').set('html',Math.round(totalPrice*100)/100);";
			}
	
			$script[] = "}});";
	
			$document->addScriptDeclaration(implode("\n", $script));
?>


PHP:
	<input type="range" id="slider" name="slider" min="1" max="<?php echo $max_servings; ?>" step="1" value="<?php echo $recipe->nb_persons; ?>" onchange="updateQuantities();"/>

<?php 	}
		
		else {
		
		if ($show_slider_tooltip) {
?>
	<div tabindex="1" id="slider-1" class="horizontal dynamic-slider-control slider hasTip" title="<?php echo JText::_('COM_YOORECIPE_SLIDER') . '::' . JText::_('COM_YOORECIPE_SLIDER_TOOLTIP') ?>">
	<?php } else { ?>
	<div tabindex="1" id="slider-1" class="horizontal dynamic-slider-control slider">
	<?php }?>
	
		<input id="slider-input-1" class="slider-input"/>
		<div class="line" style="top: 11px; left: 15.5px; width: 150px;">
			<div style="width: 150px;"></div>
		</div>
PHP:
		<script type="text/javascript">
//<![CDATA[
	var s = new YooSlider($("slider-1"), $("slider-input-1"));
	var quantities = <?php echo json_encode($this->recipe->quantities); ?>;
	s.onchange = function () {
	
		$('spanNbPersons').set('html',s.getValue());
		
	<?php if ($show_people_icons) : ?>
		$('spanShowPersons').set('html','');
		
		for (i = 0 ; i < s.getValue(); i++) {
			var img = new Element('img', {'src': '<?php echo Juri::root(); ?>media/com_yoorecipe/images/<?php echo $imgIcon; ?>', 'alt':''});
			img.inject($('spanShowPersons'));
		}
	<?php endif; ?>
	
		var inputs = document.getElementsByTagName('input');
		var totalPrice = 0; 
				
				
				
		for (i = 0 ; i < inputs.length ; i++) {
			if (inputs[i].name == 'ingredientId') {
				
				var newQty = quantities[inputs[i].value][s.getValue()];
				if (newQty != 0) {
					$('spanQuantity_' + inputs[i].value).set('html',newQty);
				} else {
					$('spanQuantity_' + inputs[i].value).set('html','');
				}
				
				<?php if ($use_prices) { ?>
				var newPrice = $('initialPrice_' + inputs[i].value).value * s.getValue() / <?php echo $recipe->nb_persons; ?>;
				$('spanPrice_' + inputs[i].value).set('html', Math.round(newPrice*100)/100);
				totalPrice += newPrice; 
				<?php } ?>
			}
		}
		
		
		<?php if ($use_prices) { ?>
		$('totalPrice').set('html',Math.round(totalPrice*100)/100);
		<?php } ?>
	};
	s.setValue(<?php echo $recipe->nb_persons; ?>);
	s.setMinimum(1);
	s.setMaximum(<?php echo $max_servings; ?>);
/* ]]> */
		</script>

mvg,
perry
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan