JavaScript - Variable File Path Based On Date Variables...

I have a drop down menu where people can select a month, day and year. Based on their selection, I want to show them an image.

If their selection is >= July 26, 2010 but <= July 25, 2011, show the red image;
If their selection is >= July 26, 2011 but <= July 25, 2012, show the white image;
If their selection is >= July 26, 2012 but <= July 25, 2013, show the blue image;
If their selection is >= July 26, 2013 but <= July 25, 2014, show the yellow image;

I don't know how to compare a selected date to a range of dates like this.

Hi all,

I have an .xsl file that reads an xml file and populates an html file and that is working well. I want to have many xml files (one per project) and one .xsl and html file. The goal would be to get the user to browse for the particular xml file they want to use and have the html file reference the path and file name.

There will be a main page where the user will browse for the xml file in question. When they hit submit, the information (document path) is passed to the html file and the html file opens with information from the xml page they selected .In my html file I have the following:

Code:

xml.load(''12345.xml'')

Basically I would like to somehow browse to the xml file in question and pass that variable (file path and name) to the html file and replace "1234.xml" with the path and name selected by the browse section.

Does this make sense?

Thanks.





Reply With Quote




01-22-2015, 11:04 PM #2
Old Pedant View Profile View Forum Posts

Supreme Master coder! Join Date Feb 2009 Posts 28,310 Thanks 82 Thanked 4,754 Times in 4,716 Posts

The easiest way to do this would be via server-side code.

For example, just have a PHP page the includes the desired ".xml" file into a page that is already setup with the XSLT.

I vaguely recall reading that there is a way to "apply" XSLT to a dynamic set of XML, but the function named apply() in XSLT doesn't do anything like this.

Still, the easiest way to control this would be via the server side code. Heck, that would even allow you to string together "pieces" of XML from various files to create the final document.

I'm working on a site built through Squarespace, and I've run into some limitations. They've told me it's possible to build a Javascript to pull specific images from one page's journal entries and place them (with links to the entry) on other pages.

Can somebody send me in the right direction on how I would do this? Basically I want to find a most recent posting tagged with a specific category, find the file file path of it's related image, and make that appear on the page that my javascript is on.

Hi, I have a large e-commerce site that runs on a database. There are many products on the site which have 'variables' attached to them, e.g. colour, width, height etc.
I have a script in place to sort the products depending on these variables.
Apologies for the length of the code.

Code:

(function(i) {var u =navigator.userAgent;var e=/*@cc_on!@*/false; var st =
setTimeout;if(/webkit/i.test(u)){st(function(){var dr=document.readyState;
if(dr=="loaded"||dr=="complete"){i()}else{st(arguments.callee,10);}},10);}
else if((/mozilla/i.test(u)&&!/(compati)/.test(u)) || (/opera/i.test(u))){
document.addEventListener("DOMContentLoaded",i,false); } else if(e){     (
function(){var t=document.createElement('doc:rdy');try{t.doScroll('left');
i();t=null;}catch(e){st(arguments.callee,0);}})();}})(sortinit);


var prodlines = new Array();		// for Products
var spanids = new Array();
var lastsorttype = 'default';
var bReadyToSort = false;

var searchlines = new Array();		// for Search Results
var searchspanids = new Array();
var searchlastsorttype = 'default';
var bSearchReadyToSort = false;

var sectlines = new Array();		// for Sections
var sectspanids = new Array();
var sectlastsorttype = 'default';
var bSectReadyToSort = false;

var bSortInitalised = false;

//  Search Results Related
function searchreseq(seqtype){			// resequence search results
	if ( ! (bSearchReadyToSort || bPageIsLoaded) )
		{
		alert('Please wait until the page has fully loaded. (SRC)');
		return false;
		}
	searchlines.length = 0;
	searchspanids.length = 0;
	var spans = document.getElementsByTagName('span');
	for ( var i=0; i<spans.length; i++ )
		{
		if ( spans[i].id.indexOf('searchsortline_') == 0 )
			{
			searchspanids.push(spans[i]);
			searchlines.push({
				id: spans[i].id, 
				price: spans[i].getAttribute('price').replace(/[^\d\.]/g,''), 
				seq: spans[i].getAttribute('seq'), 
				pname: spans[i].getAttribute('pname'),
				phtml: spans[i].innerHTML
				});
			}
		}
	
		
	if ( seqtype == 'lowhigh' ) searchlines.sort(function(a,b){return a.price - b.price});
	if ( seqtype == 'highlow' ) searchlines.sort(function(a,b){return b.price - a.price});
	if ( seqtype == 'default' ) searchlines.sort(function(a,b){return a.seq - b.seq});
	if ( seqtype == 'alpha' )   searchlines.sort(function(a,b){return (a.pname <= b.pname) ? -1 : 1;});
	if ( seqtype == 'reverse' ) searchlines.sort(function(a,b){return (b.pname <= a.pname) ? -1 : 1;});
	searchlastsorttype = seqtype;
	setCookie('SEARCHSORTTYPE', searchlastsorttype);
	searchshowsorttype();
	for ( var i=0; i<searchlines.length; i++ )
		{
		searchspanids[i].innerHTML = searchlines[i].phtml;
		searchspanids[i].id = searchlines[i].id; 
		searchspanids[i].setAttribute('price', searchlines[i].price); 
		searchspanids[i].setAttribute('seq', searchlines[i].seq); 
		searchspanids[i].setAttribute('pname', searchlines[i].pname); 
		}
	return false;
}

function searchshowsorttype(){		// highlight the type of sort that's currently in use
	if ( document.getElementById('searchsortdropdown') )	// see if we're using drop-downs
		{
		var dropdowns = document.getElementsByTagName('select');	// all drop-downs		
		for ( var i=0; i<dropdowns.length; i++ )
			{
			if ( dropdowns[i].name == 'searchsortdropdown' )		// relevant one
				{
				var sdd = dropdowns[i];
				for ( var j=0; j<sdd.options.length; j++ )
					{
					if ( sdd.options[j].value == searchlastsorttype ) sdd.selectedIndex = j;
					}
				}
			}	
		}	
	else								
		{
		var buttonlinks = document.getElementsByTagName('input');	// looking for buttons
		for ( var i=0; i<buttonlinks.length; i++ )
			{
			if ( buttonlinks[i].name == 'searchsortlink' )
				{
				buttonlinks[i].className = ( buttonlinks[i].id == searchlastsorttype ) ? 'searchsortactive' : 'searchsortinactive';
				}	
			}
		var buttonlinks = document.getElementsByTagName('a');		// looking for A tags
		for ( var i=0; i<buttonlinks.length; i++ )
			{
			if ( buttonlinks[i].name == 'searchsortlink' )
				{
				buttonlinks[i].className = ( buttonlinks[i].id == searchlastsorttype ) ? 'searchsortactive' : 'searchsortinactive';
				}	
			}
		}
}


// Section Related
function sectionseq(seqtype){			// resequence Sections
	if ( ! (bSectReadyToSort || bPageIsLoaded) )
		{
		alert('Please wait until the page has fully loaded. (SECT)');
		return false;
		}
	sectlines.length = 0; 
	sectspanids.length = 0;					
	var spans = document.getElementsByTagName('span');
	for ( var i=0; i<spans.length; i++ )
		{
		if ( spans[i].id.indexOf('sectionline_') == 0 )
			{
			sectspanids.push(spans[i]);
			sectlines.push({	
				id: spans[i].id, 
				price: spans[i].getAttribute('price'), 
				seq: spans[i].getAttribute('seq'), 
				pname: spans[i].getAttribute('pname'),
				phtml: spans[i].innerHTML
				});
			}
		}
	
	if ( seqtype == 'lowhigh' ) sectlines.sort(function(a,b){return a.price - b.price});
	if ( seqtype == 'highlow' ) sectlines.sort(function(a,b){return b.price - a.price});
	if ( seqtype == 'default' ) sectlines.sort(function(a,b){return a.seq - b.seq});
	if ( seqtype == 'alpha' )   sectlines.sort(function(a,b){return (a.pname <= b.pname) ? -1 : 1;});
	if ( seqtype == 'reverse' ) sectlines.sort(function(a,b){return (b.pname <= a.pname) ? -1 : 1;});
	sectlastsorttype = seqtype;
	setCookie('SECTSORTTYPE', sectlastsorttype);
	sectshowsorttype();
	for ( var i=0; i<sectlines.length; i++ )
		{
		sectspanids[i].innerHTML = sectlines[i].phtml;
		sectspanids[i].id = sectlines[i].id; 
		sectspanids[i].setAttribute('price', sectlines[i].price); 
		sectspanids[i].setAttribute('seq', sectlines[i].seq); 
		sectspanids[i].setAttribute('pname', sectlines[i].pname); 
		}
	return false;
}

function sectshowsorttype(){		// highlight the type of sort that's currently in use
	if ( document.getElementById('sectionsortdropdown') )	// see if we're using drop-downs
		{
		var dropdowns = document.getElementsByTagName('select');	// all drop-downs		
		for ( var i=0; i<dropdowns.length; i++ )
			{
			if ( dropdowns[i].name == 'sectionsortdropdown' )		// relevant one
				{
				var sdd = dropdowns[i];
				for ( var j=0; j<sdd.options.length; j++ )
					{
					if ( sdd.options[j].value == sectlastsorttype ) sdd.selectedIndex = j;
					}
				}
			}	
		}	
	else								
		{
		var buttonlinks = document.getElementsByTagName('input');	// looking for buttons
		for ( var i=0; i<buttonlinks.length; i++ )
			{
			if ( buttonlinks[i].name == 'sectsortlink' )
				{
				buttonlinks[i].className = ( buttonlinks[i].id == sectlastsorttype ) ? 'sectsortactive' : 'sectsortinactive';
				}	
			}
		var buttonlinks = document.getElementsByTagName('a');		// looking for A tags
		for ( var i=0; i<buttonlinks.length; i++ )
			{
			if ( buttonlinks[i].name == 'sectsortlink' )
				{
				buttonlinks[i].className = ( buttonlinks[i].id == sectlastsorttype ) ? 'sectsortactive' : 'sectsortinactive';
				}	
			}
		}
}

// Product Related
function reseq(seqtype, gotoanchor){			// resequence products
	if ( ! (bReadyToSort || bPageIsLoaded) )
		{
		alert('Please wait until the page has fully loaded. (PROD)');
		return false;
		}
	prodlines.length = 0;
	spanids.length = 0;
	var spans = document.getElementsByTagName('span');
	for ( var i=0; i<spans.length; i++ )
		{
		if ( spans[i].id.indexOf('sortline_') == 0 )
			{
			spanids.push(spans[i]);
			prodlines.push({
				id: spans[i].id, 
				price: spans[i].getAttribute('price'), 
				seq: spans[i].getAttribute('seq'), 
				pname: spans[i].getAttribute('pname'),
				brand: spans[i].getAttribute('brand'),
				capacity: spans[i].getAttribute('capacity'),
				height: spans[i].getAttribute('height'),
				width: spans[i].getAttribute('width'),
				depth: spans[i].getAttribute('depth'),
				colour: spans[i].getAttribute('colour'),
				energyrating: spans[i].getAttribute('energyrating'),
				spinspeed: spans[i].getAttribute('spinspeed'),
				phtml: spans[i].innerHTML
				});
			}
		}
		
	if ( seqtype == 'lowhigh' ) prodlines.sort(function(a,b){return a.price - b.price});
	if ( seqtype == 'highlow' ) prodlines.sort(function(a,b){return b.price - a.price});
	if ( seqtype == 'default' ) prodlines.sort(function(a,b){return a.seq - b.seq});
	if ( seqtype == 'alpha' )   prodlines.sort(function(a,b){return (a.pname <= b.pname) ? -1 : 1;});
	if ( seqtype == 'reverse' ) prodlines.sort(function(a,b){return (b.pname <= a.pname) ? -1 : 1;});
	if ( seqtype == 'brand' )  prodlines.sort(function(a,b){return (a.brand <= b.brand) ? -1 : 1;});
	if ( seqtype == 'capacity' )  prodlines.sort(function(a,b){return (b.capacity <= a.capacity) ? -1 : 1;});
	if ( seqtype == 'height' )  prodlines.sort(function(a,b){return (a.height <= b.height) ? -1 : 1;});
	if ( seqtype == 'width' )  prodlines.sort(function(a,b){return (a.width <= b.width) ? -1 : 1;});
	if ( seqtype == 'depth' )  prodlines.sort(function(a,b){return (a.depth <= b.depth) ? -1 : 1;});
	if ( seqtype == 'colour' )  prodlines.sort(function(a,b){return (a.colour <= b.colour) ? -1 : 1;});
	if ( seqtype == 'energyrating' )  prodlines.sort(function(a,b){return (a.energyrating <= b.energyrating) ? -1 : 1;});
	if ( seqtype == 'spinspeed' )  prodlines.sort(function(a,b){return (b.spinspeed <= a.spinspeed) ? -1 : 1;});
	lastsorttype = seqtype;
	setCookie('SORTTYPE', lastsorttype);
	showsorttype();
	for ( var i=0; i<prodlines.length; i++ )
		{
		spanids[i].innerHTML = prodlines[i].phtml;
		spanids[i].id = prodlines[i].id; 
		spanids[i].setAttribute('price', prodlines[i].price); 
		spanids[i].setAttribute('seq', prodlines[i].seq); 
		spanids[i].setAttribute('pname', prodlines[i].pname);
		spanids[i].setAttribute('brand', prodlines[i].brand);
		spanids[i].setAttribute('capacity', prodlines[i].capacity);
		spanids[i].setAttribute('height', prodlines[i].height);
		spanids[i].setAttribute('width', prodlines[i].width);
		spanids[i].setAttribute('depth', prodlines[i].depth);
		spanids[i].setAttribute('colour', prodlines[i].colour);
		spanids[i].setAttribute('energyrating', prodlines[i].energyrating);
		spanids[i].setAttribute('spinspeed', prodlines[i].spinspeed); 
		}
	if ( gotoanchor && location.hash ) scrolltoanchor(location.hash);	// Product Page just loaded and Anchor so we need to reposition

	//
	//  Some Drillpine add-ons need reactivated after the DOM has been fiddled with
	//
	
	// Tabber (needs V210 onwards) - reset Tabber
	if ( window.resetallpanes ) resetallpanes();
	
	// Tabber V3
	if ( window.jqinittabber ) jqinittabber();
	

	// Lightbox / Slimbox
	if ( window.Slimbox && window.Slimbox.scanPage ) Slimbox.scanPage();
	
	// Lightbox / Slimbox2
	if ( (typeof(jQuery) == 'function') && (typeof(jQuery.slimbox) == 'function') )
		{
		$("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
		return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
		});
		}
		
	return false;
}
	
function showsorttype(){		// highlight the type of sort that's currently in use
	if ( document.getElementById('sortdropdown') )	// see if we're using drop-downs
		{
		var dropdowns = document.getElementsByTagName('select');	// all drop-downs		
		for ( var i=0; i<dropdowns.length; i++ )
			{
			if ( dropdowns[i].name == 'sortdropdown' )		// relevant one
				{
				var sdd = dropdowns[i];
				for ( var j=0; j<sdd.options.length; j++ )
					{
					if ( sdd.options[j].value == lastsorttype ) sdd.selectedIndex = j;
					}
				}
			}	
		}	
	else								
		{
		var buttonlinks = document.getElementsByTagName('input');	// looking for buttons
		for ( var i=0; i<buttonlinks.length; i++ )
			{
			if ( buttonlinks[i].name == 'sortlink' )
				{
				buttonlinks[i].className = ( buttonlinks[i].id == lastsorttype ) ? 'sortactive' : 'sortinactive';
				}	
			}
		var buttonlinks = document.getElementsByTagName('a');		// looking for A tags
		for ( var i=0; i<buttonlinks.length; i++ )
			{
			if ( buttonlinks[i].name == 'sortlink' )
				{
				buttonlinks[i].className = ( buttonlinks[i].id == lastsorttype ) ? 'sortactive' : 'sortinactive';
				}	
			}
		}
}

// General code

function hidetagswithid(tag, id){	// hide all tags with ID
	var alltags = document.getElementsByTagName(tag);  		// all such tags
	for ( var i=0; i<alltags.length; i++ )
		{
		if ( alltags[i].id == id )				// with ID
			{
			alltags[i].style.display = 'none'; 			// hide entire control
			alltags[i].style.visibility = 'hidden';			// hide entire control
			}
		}
}

function scrolltoanchor(anc){	// reposition to display anchor
	var ancs = document.getElementsByTagName('a');
	anc = anc.replace(/.*\#/,'');		// Search highlight passes duplicate anchors - lose one
	if ( ancs[anc] ) ancs[anc].scrollIntoView(true);
}

function sortinit(){				// called when DOM is loaded
	if (arguments.callee.done) return;
	arguments.callee.done = true;
	bSortInitialised = true;
	// Products
	if ( document.getElementById('sortwidget') ) 
		{
		bReadyToSort = true;
		lastsorttype = getCookie('SORTTYPE');
		if ( lastsorttype == null ) lastsorttype = 'default';
		setCookie('SORTTYPE', lastsorttype);
		showsorttype();		
		if ( lastsorttype != 'default' ) 
			{
			reseq(lastsorttype, true);
			}
		}	

	// Search Results
	if ( document.getElementById('searchsortwidget') ) 
		{
		bSearchReadyToSort = true;
		searchlastsorttype = getCookie('SEARCHSORTTYPE');
		if ( searchlastsorttype == null ) searchlastsorttype = 'default';
		setCookie('SEARCHSORTTYPE', searchlastsorttype);
		searchshowsorttype();		
		if ( searchlastsorttype != 'default' ) 
			{
			searchreseq(searchlastsorttype);
			}
		}	
		
	// Sections
	if ( document.getElementById('sectsortwidget') ) 
		{
		// check for no prices available and hide buttons if so	
		var spans = document.getElementsByTagName('span');
		var rtot = 0;	
		for ( var i=0; i<spans.length; i++ )
			{
			if ( spans[i].id.indexOf('sectionline_') == 0 )
				{
				var price = spans[i].getAttribute('price');
				rtot += (price != null) ? price - 0 : 0;
				}
			}
		if ( rtot == 0 )
			{
			if ( SectionSortLinksFinalOnly )					// do we only show links on final Sections
				{
				hidetagswithid('span', 'sectsortwidget');			// hide all sort widgets
				}
			else
				{	
				if ( document.getElementById('sectpricelinks') )		// button or text links
					{
					hidetagswithid('span', 'sectpricelinks');
					}
				if ( document.getElementById('sectionsortdropdown') )		// drop-down list
					{
					var dropdowns = document.getElementsByTagName('select');	// all drop-downs		
					for ( var i=0; i<dropdowns.length; i++ )
						{
						if ( dropdowns[i].id == 'sectionsortdropdown' )		// relevant one
							{
							var opts = dropdowns[i].options;
							for ( var j=opts.length; j>0; j-- )		// scan backwards as we're deleting items
								{
								if ( (opts[j - 1].value == "lowhigh") || (opts[j - 1].value == "highlow") )
									{
									opts[j - 1] = null;
									}
								}
							}
						}			
					}
				}	
			}			

		bSectReadyToSort = true;
		sectlastsorttype = getCookie('SECTSORTTYPE');
		if ( sectlastsorttype == null ) sectlastsorttype = 'default';
		setCookie('SECTSORTTYPE', sectlastsorttype);
		sectshowsorttype();
		// only resequence if button showing and we've a non default sequence		
		if ( (document.getElementById('sectsortwidget').style.display != 'none') && (sectlastsorttype != 'default') ) 
			{
			sectionseq(sectlastsorttype);
			}
			
		}
}

function onloadsortinit(){			// optionally called on onload
	if ( ! bSortInitalised ) sortinit();				// only init if it's not already run
}

// in case we cannot activate on DOM loaded
if (window.attachEvent) 						// IE 
	{ 
	window.attachEvent("onload", onloadsortinit); 
	} 
else 									// DOM
	{  
	window.addEventListener("load", onloadsortinit, false); 
	}

I didn't write this script and I'm not a JavaScript expert, so i don't know how to edit it properly. I want to change it's function from sorting to filtering, i.e. something along the lines of a slice function. Any advice would be much appreciated.

Javascript novice here looking to create a dynamic dropdown based on date.
It's a list of preset prices that will change each month to reflect a pro-rated system. Any thoughts/examples on how I would go about setting this up using javascript would be much appreciated.
Thanks.

Here's what I need:

In September, the dropdown will display these prices
Code:

<option value="100">Product 1</option>
<option value="150">Product 2</option>
<option value="200">Product 3</option>

In October, the dropdown will display these prices
<option value="50">Product 1</option>
<option value="100">Product 2</option>
<option value="150">Product 3</option>