#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2001
    Posts
    39
    Rep Power
    13

    Altering Text Content in NS Browsers w/ Javascript


    I have a script that is supposed to add/subtract prices for a small car builder system. There are packages and options that can be selected and the Base Price and Total Price text need to be altered accordingly. Here's the javascript I have to do this right now:

    Code:
    <script language="javascript">
    <!--
    //////////////////////
    //
    // setup evo builder
    //
    /////////////////////
    
    // global vars
    var evoBuilderPath = 'http://www.evolutionm.net/build/';
    var isIE = (document.all) ? true : false;
    var currentTotal = 0.0;
    var currentMSRP = 0.0;
    
    // preload color images
    color7 = new Image(); color7.src = 'images/colors/588049946651915b99c69245a3d8e28eblack.jpg';
    color5 = new Image(); color5.src = 'images/colors/6af39d22d4a875b7b1e61447547e4174yellow.jpg';
    color2 = new Image(); color2.src = 'images/colors/f54b4d0cf71c5b53f06bf2cad2565423blue.jpg';
    color4 = new Image(); color4.src = 'images/colors/c7534b313192cf4c927953ad6143e681red.jpg';
    color6 = new Image(); color6.src = 'images/colors/e60358beaf24405009501b0a9796b564silver.jpg';
    color3 = new Image(); color3.src = 'images/colors/e82d753395c6ee2f2c7ac404b3924d5awhite.jpg';
    
    // setup arrays
    
    // Color Price Array
    var colorprices = new Array();
    colorprices[7] = '36500.00';
    colorprices[5] = '39500.00';
    colorprices[2] = '36500.00';
    colorprices[4] = '39500.00';
    colorprices[6] = '36500.00';
    colorprices[3] = '36500.00';
    
    
    // Package Option List Array
    var packageoptlist = new Array();
    packageoptlist[1] = '6,7,5';
    
    // Package Price Array
    var packageprices = new Array();
    packageprices[1] = '2500.00';
    
    var optionprices = new Array();
    // Option Prices Array
    optionprices[9] = '2500.00';
    optionprices[5] = '600.00';
    optionprices[7] = '50.00';
    optionprices[8] = '1000.00';
    optionprices[6] = '100.00';
    
    //////////////////////////
    //
    //  Evo Builder Functions
    //
    //////////////////////////
    
    function swapColor(newid) {
      document['colorprev'].src = eval('color' + newid + '.src');
      changeMSRP(colorprices[newid]);
    }
    
    function openPackage(packageID) {
    	var featureWin = window.open('packages.php?id='+packageID,'features','WIDTH=500,HEIGHT=350,left=10,top=10,screenX=10,screenY=10,resizable=yes,scrollbars=yes');
    	featureWin.focus();
    }
    
    function openOption(optionID) {
    	var featureWin = window.open('options.php?id='+optionID,'features','WIDTH=600,HEIGHT=450,left=10,top=10,screenX=10,screenY=10,resizable=yes,scrollbars=yes');
    	featureWin.focus();
    }
    
    function popWin(url) {
    	var featureWin = window.open('http://www.evolutionimports.net/'+url,'features','WIDTH=600,HEIGHT=450,left=10,top=10,screenX=10,screenY=10,resizable=yes,scrollbars=yes');
    	featureWin.focus();
    }
    
    function to_money(_f) {
      var _v=parseInt(parseFloat(_f)*100);
      var _dollars=parseInt(_v/100);
      var _cents=_v-(_dollars*100);
      while(_cents.toString().length<2)_cents="0"+_cents;
      var _dA=_dollars.toString().split("");
      var _d="";
      for(var i=_dA.length-1;i>=0;i--)
      {
        var _comma="";
    	if((_dA.length-i)%3==0 && i!=0)_comma=",";
        _d=_comma+_dA[i]+_d;
      }
      var _result="$"+_d;
      _result+="."+_cents;
      return _result;
    }
    
    function addPrice(price) {
    	// calculate new total
    	currentTotal += parseFloat(price);
    	
    	if(isIE) { 
    		total.innerHTML = to_money(currentTotal); 
    	} else {
    		document.layers['layerTotal'].document.open();
    		document.layers['layerTotal'].document.write(to_money(currentTotal));
    		document.layers['layerTotal'].document.close(); 
    	}
    }
    
    function subtractPrice(price) {
    	// calculate new total
    	currentTotal -= parseFloat(price);
    	
    	if(isIE) { 
    		total.innerHTML = to_money(currentTotal); 
    	} else {
    		document.layers['layerTotal'].document.open();
    		document.layers['layerTotal'].document.write(to_money(currentTotal));
    		document.layers['layerTotal'].document.close(); 
    	}
    }
    
    function changeMSRP(newMSRP) {
    	// reformat currentTotal based on new MSRP
    	currentTotal -= currentMSRP;
    	currentTotal += parseFloat(newMSRP);
    	if(isIE) { 
    		msrp.innerHTML = 'Base Price: ' + to_money(parseFloat(newMSRP));
    		total.innerHTML = to_money(currentTotal);
    	} else {
    		document.layers['layerMsrp'].document.open();
    		document.layers['layerMsrp'].document.write('Base Price: ' + to_money(parseFloat(newMSRP)));
    		document.layers['layerMsrp'].document.close(); 
    		
    		document.layers['layerTotal'].document.open();
    		document.layers['layerTotal'].document.write('Base Price: ' + to_money(currentTotal));
    		document.layers['layerTotal'].document.close(); 
    	}
    	currentMSRP = newMSRP;
    }
    
    function msrpSelected() {
     if(!currentMSRP) {
     	alert('You must first select a vehicle color before adding any packages or options.');
    	return false;
     } else {
     	return true;
     }
    }
    
    function selectPackage(packageID) {
    	if(msrpSelected()) {
    	
    	var packageImage = document['package_' + packageID];
    	
    	var unchecked = evoBuilderPath + 'images/config_square.gif';
    	var checked = evoBuilderPath + 'images/config_square_check.gif';
    	var included = evoBuilderPath + 'images/included.gif';
    	
    	if(packageImage.src == unchecked) {
    
    		// if options have already been check remove them from the cost
    		var optionList = packageoptlist[packageID].split(',');
    		for(i = 0; i < optionList.length; i++) {
    			if(document['option_' + optionList[i]].src == checked) { currentTotal -= optionprices[optionList[i]]; }
    		}	
    
    		// check all related options
    		var optionList = packageoptlist[packageID].split(',');
    		for(i = 0; i < optionList.length; i++) {
    			document['option_' + optionList[i]].src = included;
    		}	
    		packageImage.src = checked;
    		addPrice(packageprices[packageID]);
    	} else if(packageImage.src == checked) {
    
    		// uncheck all related options
    		var optionList = packageoptlist[packageID].split(',');
    		for(i = 0; i < optionList.length; i++) {
    			document['option_' + optionList[i]].src = unchecked;
    		}	
    		packageImage.src = unchecked;
    		subtractPrice(packageprices[packageID]);
    	} else {
    		alert(packageImage);
    	}
    	
    	}
    }
    
    function selectOption(optionID) {
    	if(msrpSelected()) {
    	
    	var optionImage = document['option_' + optionID];
    	
    	var unchecked = evoBuilderPath + 'images/config_square.gif';
    	var checked = evoBuilderPath + 'images/config_square_check.gif';
    	var included = evoBuilderPath + 'images/included.gif';
    	
    	if(optionImage.src == unchecked) {
    		optionImage.src = checked;
    		addPrice(optionprices[optionID]);
    	} else if(optionImage.src == checked) {
    		optionImage.src = unchecked;
    		subtractPrice(optionprices[optionID]);
    	} else if(optionImage.src == included) {
    		alert('This item is included in a package and cannot be removed.');
    	} else {
    		alert(optionImage);
    	}
    	
    	}
    }
    //-->
    </script>
    The problem with this is that it will not work for NS6 as is. I read a tutorial that said I could use layers to change text as I have coded, but when I run it the text does not change. Also, it appears that the global var of currentMSRP does not maintain it's value when a function alters it.

    Here's the two lines that need to dynamically change:

    Base Price:
    Code:
    <div id="msrp"><layer id="layerMsrp">Base Price: </layer></div>
    Total Price:
    Code:
    <div id="total"><layer id="layerTotal"></layer></div>
    Thanks for any input,

    Mark
  2. #2
  3. No Profile Picture
    Just Diggity
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2001
    Location
    Sherman Oaks, CA
    Posts
    126
    Rep Power
    13
    The code you are using only detects IE and then performs functions in one way for IE and then for all other browsers another way. This is very problematic, as most browsers that are not IE do not use NS4s (the DOM the 'other' functions are using) DOM.

    It is simple to 'write' text to a layer in IE, NS4 and NS(Gecko) using innerHTML and layer.write()

    But I suggest you use an API that is flexable enough to perform all your functions for the browsers you want and fail gracefully for the unsupported browsers.
    Dave Pedowitz
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2001
    Posts
    39
    Rep Power
    13
    What would be an API that would work better? Right now, the layer.write does not work in NS6 when I try it. Do you see anything that could be wrong with my current script.

    I know this current setup is a little poor, but I'm most concerned with IE and NS right now.

    Mark
  6. #4
  7. No Profile Picture
    Just Diggity
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2001
    Location
    Sherman Oaks, CA
    Posts
    126
    Rep Power
    13
    innerHTML works on NS(Gecko) Browsers, but you will also need to identify your objects for the IE Dom, NS4 DOM and W3C dom for it to work properly
    Dave Pedowitz
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2001
    Posts
    39
    Rep Power
    13
    Thanks,

    This now works for IE and NS6 and I think NS4 (don't have it to test right now):

    This is my simple browser check:
    Code:
    if(document.layers) {	// NS4
      isNS4 = true;
    } else if(document.getElementById) {	// IE or NS6
      isIE = true;
      isNS6 = true;
    }
    then my functions have a fail like this:
    Code:
    function subtractPrice(price) {
    	// calculate new total
    	currentTotal -= parseFloat(price);
    	
    	if(isIE || isNS6) { 
    		document.getElementById('total').innerHTML = to_money(currentTotal);
    		//total.innerHTML = to_money(currentTotal); 
    	} else if(isNS4) {
    		document.layers['layerTotal'].document.open();
    		document.layers['layerTotal'].document.write(to_money(currentTotal));
    		document.layers['layerTotal'].document.close(); 
    	} else {
    		alert('We\'re sorry, our script does not work on properly on your browser.  Please try Internet Explorer or Netscape.');
    		return;
    	}
    }
    So if the browser isn't supported it should just let the user know no matter what he clicks.

    Mark
  10. #6
  11. No Profile Picture
    Just Diggity
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2001
    Location
    Sherman Oaks, CA
    Posts
    126
    Rep Power
    13
    Very nice!!!

    This is the only change I would make:

    Code:
    var d = document;
    
    if (d.getElementById) { //IE5+ NS6+
         isDom = true;
    } else if (d.all) { //IE4
         isIE4 = true;
    } else if (d.layers) { //NS4
         isNS4 = true;
    }
    document.getElementById truly isn't IE nor NS6+, it's the W3c DOM Recomendation, while document.all and document.layers are proprietary DOM for the specific browsers. Also, since the W3c DOM is supported by IE5+ and NS6+ and theres more people (generally) using those browers, by detecting them first you save just a bit in performance....



    if(document.layers) { // NS4
    isNS4 = true;
    } else if(document.getElementById) { // IE or NS6
    isIE = true;
    isNS6 = true;
    }
    Dave Pedowitz

IMN logo majestic logo threadwatch logo seochat tools logo