JavaScript - How To Set Multiple Calendars Which Pop Up When Editing

I'm almost positive this question will make you groan "neewwwbie!"....

I have a simple javascript that decides which 'div' to make visible, based on another element within the html.

What i want now is to create a page where someone can view all the possible divs in that javascript that might appear and edit them (including href's, ital, bold and image tags.) Much like a CMS system, but the information is within a javascript, not a database.

I would assume it's possible. What's a good way to approach this? It sounds like Javascript cannot edit .txt files. Is there a way to have the user access and edit an .xml file and just pull that into the div tag, instead of text?

I have a need to display, edit and save the contents of a text area to a text file or what ever is best suited, directly to the website root or folder within the root of the site. Is there anyway this can be done with out database software? As I dont have the option to install mysql or any other software to the webserver. Any help would be greatly appreciated. Thx


Just a little backround: The webserver is acually an open source linux firewall which i was able to edit the apache config file to host a second site. I just want the ability to store edit and display some network information within a very small site I made without the use of a database. Is this even possible?

Hello everyone.

First, if you do not understand something I have tried to explain, PLEASE ask, don't just skip the question! Thank you!

I will start by explaining what I am doing and why I am running into a problem. Perhaps one of you kind people can help me figure out how to fix it.

I have a grid set up for logic puzzle solving. The grid is made up of 3 rows of primary squares, each containing 16 sub-squares.

The top row has 3 primary squares.
the 2nd row has 2 primary squares.
the 3rd row has 1 primary square.
That gives a total of 96 sub-square, or grid coordinates.

Each sub square has an image in it that can be altered by clicking the square. The image begins as a blank gif. With the first click, it becomes an X, with a second click, it becomes an O, and the third click returns it to blank.

With me so far? Hope so!

Now for the tricky part. The grid is made up using a table, with each TD having it's own identifier, as in:
Code:

a1b1 a1b2 a1b3 a1b4 | a1c1 a1c2 a1c3 a1c4 | a1d1 a1d2 a1d3 a1d4
a2b1 a2b2 a2b3 a2b4 | a2c1 a2c2 a2c3 a2c4 | a2d1 a2d2 a2d3 a2d4
a3b1 a3b2 a3b3 a3b4 | a3c1 a3c2 a3c3 a3c4 | a3d1 a3d2 a3d3 a3d4
a4b1 a4b2 a4b3 a4b4 | a4c1 a4c2 a4c3 a4c4 | a4d1 a4d2 a4d3 a4d4
-----------------------------------------
d1b1 d1b2 d1b3 d1b4 | d1c1 d1c2 d1c3 d1c4				
d2b1 d2b2 d2b3 d2b4 | d2c1 d2c2 d2c3 d2c4				
d3b1 d3b2 d3b3 d3b4 | d3c1 d3c2 d3c3 d3c4				
d4b1 d4b2 d4b3 d4b4 | d4c1 d4c2 d4c3 d4c4				
-----------------------------------------
c1b1 c1b2 c1b3 c1b4								
c2b1 c2b2 c2b3 c2b4								
c3b1 c3b2 c3b3 c3b4								
c4b1 c4b2 c4b3 c4b4

Each sub-square also contains the image that is changed, and the image has it's own unique identifier, to go alone with the grid:

Code:

1-0-0 | 1-0-1 | 1-0-2 | 1-0-3 | 1-1-0 |1-1-1 | 1-1-2 | 1-1-3 | 1-2-0 | 1-2-1 | 1-2-2 | 1-2-3 |
----------------------------------------------------------------------------------------------
2-0-0 | 2-0-1 | 2-0-2 | 2-0-3 | 2-1-0 | 2-1-1 | 2-1-2 | 2-1-3 | 2-2-0 | 2-2-1 | 2-2-2 | 2-2-3 |
----------------------------------------------------------------------------------------------
3-0-0 | 3-0-1 | 3-0-2 | 3-0-3 | 3-1-0 | 3-1-1 | 3-1-2 | 3-1-3 | 3-2-0 | 3-2-1 | 3-2-2 | 3-2-3 |
----------------------------------------------------------------------------------------------
4-0-0 | 4-0-1 | 4-0-2 | 4-0-3 | 4-1-0 | 4-1-1 | 4-1-2 | 4-1-3 | 4-2-0 | 4-2-1 | 4-2-2 | 4-2-3 |
-------------------------------------------------------------
5-0-0 | 5-0-1 | 5-0-2 | 5-0-3 | 5-1-0 | 5-1-1 | 5-1-2 | 5-1-3 |
-------------------------------------------------------------
6-0-0 | 6-0-1 | 6-0-2 | 6-0-3 | 6-1-0 | 6-1-1 | 6-1-2 | 6-1-3 |
-------------------------------------------------------------		
7-0-0 | 7-0-1 | 7-0-2 | 7-0-3 | 7-1-0 | 7-1-1 | 7-1-2 | 7-1-3 |
-------------------------------------------------------------
8-0-0 | 8-0-1 | 8-0-2 | 8-0-3 | 8-1-0 | 8-1-1 | 8-1-2 | 8-1-3 |
------------------------------
9-0-0 | 9-0-1 | 9-0-2 | 9-0-3 |							
------------------------------
10-0-0 | 10-0-1 | 10-0-2 | 10-0-3 |							
----------------------------------
11-0-0 | 11-0-1 | 11-0-2 | 11-0-3 |							
----------------------------------
12-0-0 | 12-0-1 | 12-0-2 | 12-0-3 |

Here is a sample of a TD including the image and other ID's:

Code:

<TD style=" border-bottom: 3px solid black;" class="gridoff" onMouseOver="className='gridon';" onMouseOut="className='gridoff';" id="gridtdD4C2">

<DIV align="center">
<IMG src="/testproject/n.gif" height="20" width="20" id="8-1-1" name="D4C2" onClick="flipBox(this);" class="gridbox">
</DIV>

</TD>

As you can see, the image ID is 8-1-1, which if you compare the two tables, is equal to D4C2.

So far, everything is working perfect, as long as I have a grid that is 3x3x4, or, 3 squares across the top, 2 squares in the middles, and 1 square on the bottom, with 16 sub-squares in each.

Now, the problem is, I do not always need a 3x3x4, sometimes I will need a 3x3x5, or a 4x4x4, or a 4x4x5 grid. I have made all the grids, and given them all the right ID's for both the TD, the IMG, as well as the <input> tags.

When I test out a 3x3x5 grid, the first 4 columns in each square work fine, the 5th will only change to an X once, and cannot be changed again.
Similarly, the first 4 rows in each square work, but not the 5th, with the same problem. Again, I have made sure that each of my ID's are correct, so that isn't the issue. The only thing I can figure it would be is the javascript.

So, here it is, the script that does all the changes:

Code:

<SCRIPT LANGUAGE="JavaScript">
function checkDoubles(val) {
// A4C5 = check A4C1, A4C2, A4C3, A4C4, A1C5, A2C5, A3C5, A5C5
	var part1 = val.substr(0,1);
	var part2 = val.substr(1,1);
	var part3 = val.substr(2,1);
	var part4 = val.substr(3,1);
	var part12 = val.substr(0,2);
	var part34 = val.substr(2,2);
	var isdouble = "false";
	// check A4C*		
	for(i=1;i<5;i++) {
		var checkthisbox = part12 + part3 + i;
		if(checkthisbox!=val) {
			if(document.getElementById(checkthisbox).value==3) {
				alert("You can not set more than one box in any row to true at the same time!  If you wish to set this box to true you must first remove the other true statement in this row.");
				var isdouble = "true";
			}
		}
	}	
	// check A*C5		
	for(i=1;i<5;i++) {
		var checkthisbox = part1 + i + part34;
		if(checkthisbox!=val) {
			if(document.getElementById(checkthisbox).value==3) {
				alert("You can not set more than one box in any column to true at the same time!  If you wish to set this box to true you must first remove the other true statement in this column.");
				var isdouble = "true";
			}
		}
	}		
	return isdouble;
}

function flipBox(img) {
	var tmpname;
	if(img.src=="http://localhost/testproject/n.gif") {
		img.src = "http://localhost/testproject/x.gif";
		tmpname = img.name;
		document.mainform.elements[tmpname].value = 1;
		document.getElementById(img.name).value = 1;
	} else if(img.src=="http://localhost/testproject/x.gif") {
		var finaltest = checkDoubles(img.name);
		if(finaltest=="false") {
			img.src = "http://localhost/testproject/o.gif";
			tmpname = img.name;
			document.mainform.elements[tmpname].value = 3;
			document.getElementById(img.name).value = 3;		
		} else {
			img.src = "http://localhost/testproject/n.gif";
		}		
	} else if(img.src=="http://localhost/testproject/o.gif") {
		img.src = "http://localhost/testproject/n.gif";
		tmpname = img.name;
		document.mainform.elements[tmpname].value = 0;
		document.getElementById(img.name).value = 0;		
	}	
	showVals();
}
</SCRIPT>

I know nothing about javascript, so I have no idea why the grid is not working as it should. For some reason, 1-0-0 through 1-0-3 (A1B1 to A1B4) work, but 1-0-4 (A1B5) nor 5-0-4 (which would be A5B5 grid coord).

It makes no sense to me. If you could please look over the script and tell me if you can see why it's letting the original part of the grid to work, but not the additional parts I add?

Thank you!

Hi,

I'm looking to add the functionality of 'inline editing' with AJAX. I have found a good piece of code from a website (http://www.yvoschaap.com/weblog/ajax...pdate_text_20/) which does it well but I want to improve it slightly.

I have a span tag with text in it which turns into an input box when a user clicks on the text. The user edits the input box and then click away from the input box in order to save the change and the input box turns back into regular text. How do i make it so when the person clicks on the text the input box appears but also an 'Update' and 'Cancel' link appears to the side of it so that the user can only update or cancel that field by clicking on the links.

The code that does this is as follows:

HTML CODE:

Code:

<span id="userName" class="editText">John Doe</span>

JAVASCRIPT - controls when text is clicked for input to appear:
Code:

//edit field created
function editBox(actual) {
	//alert(actual.nodeName+' '+changing);
	if(!changing){
		width = widthEl(actual.id) + 20;
		height =heightEl(actual.id) + 2;

		if(height < 40){
			if(width < 100)	width = 150;
			actual.innerHTML = "<input id=\""+ actual.id +"_field\" style=\"width: "+width+"px; height: "+height+"px;\" maxlength=\"254\" type=\"text\" value=\"" + actual.innerHTML + "\" onkeypress=\"return fieldEnter(this,event,'" + actual.id + "')\" onfocus=\"highLight(this);\" onblur=\"noLight(this); return fieldBlur(this,'" + actual.id + "');\" />";
		}else{
			if(width < 70) width = 90;
			if(height < 50) height = 50;
			actual.innerHTML = "<textarea name=\"textarea\" id=\""+ actual.id +"_field\" style=\"width: "+width+"px; height: "+height+"px;\" onfocus=\"highLight(this);\" onblur=\"noLight(this); return fieldBlur(this,'" + actual.id + "');\">" + actual.innerHTML + "</textarea>";
		}
		changing = true;
	}

		actual.firstChild.focus();
}

JAVASCRIPT - Initiated the update of the field.

Code:

function fieldBlur(campo,idfld) {
	if (campo.value!="") {
		elem = document.getElementById( idfld );
		remotos = new datosServidor;
		nt = remotos.enviar(urlBase + "?fieldname=" +escape(elem.id)+ "&content="+escape(campo.value)+"&"+formVars,"");
		elem.innerHTML = nt;
		changing = false;
		return false;
	}
}

I tried playing around to do it myself by adding an <a> link with an onclick event handler in the editBox() function ie.

Code:

onlick="noLight(this); return fieldBlur(this,'" + actual.id + "');"

But i realise that the two values passed to the function need to be changed as i cannot use (this) if it's not within the input box?

If anyone could help me with this query it would be greatly appreciated. I hope Ive given enough info and have expressed my problem clearly. If you have any questions let me know and I'll answer them ASAP. If you would like to see the whole source please go to the original website where i got it from - http://www.yvoschaap.com/weblog/ajax...pdate_text_20/

Thanks in advance

right now I almost have this script working the way I want it to, here it is:

Code:

var hash = window.location.hash.substr(1);
	var href = $('.workimg a').each(function(){
		var href = $(this).attr('href');
		if(hash==href.substr(0,href.length-5)){
			var toLoad = hash+'.html #selected';
			$('#selected').load(toLoad)
		}											
	});

	$('.workimg a').click(function(){
								  
		var toLoad = $(this).attr('href')+' #selected';
		$('#selected').slideUp('slow',loadContent);
		$('#load').remove();
		$('#wrapper').append('<span id="load">LOADING...</span>');
		$('#load').fadeIn('normal');
		window.location.hash = $(this).attr('href');
		function loadContent() {
			$('#selected').load(toLoad,'',showNewContent)
		}
		function showNewContent() {
			$('#selected').slideDown('slow',hideLoader);
		}
		function hideLoader() {
			$('#load').slideUp('slow');
		}
		return false;
		
	});

How it works is an image is clicked, and it fills the #selected div with content. The problem I'm having is the #selected div is always visible so the questions I have are
1. How do I get this to snap to the #selected Div and add a 1 second delay before the slideDown effect?
2. How do I get add a fade in effect so it becomes Opacity=0 -> slideDown -> Opacity=1 when it appears and Opacity=1 slideUp -> Opacity=0 when it transitions to the next?

hi, I have some HTML to edit in my database, in my back end administration I have it in a textarea but when I go to edit it, it all messes up and lots of '/' area added, see below:

Code:

Site Design by: <a href=\\\\\\\"http://www.jbiddulph.com\\\\\\\" target=\\\\\\\"_blank\\\\\\\" title=\\\\\\\"John Biddulph - Web Development\\\\\\\">jbiddulph.com</a>

php code Code:

<p>
								<label>Site Design by</label>
								<textarea class="text-input small-input" name="SiteDesignby"><?php echo $row1['SiteDesignby'] ?></textarea>
								</p>

Can anyone help please?

I'm trying to setup a mail merge using a gmail docs script from http://www.labnol.org/software/mail-...h-gmail/13289/. So far, it works pretty well, but I want to edit it to include the following:

1) The script should start with "Dear Noah" as opposed to "Dear Noah_Kaplan"

2) I want to add my canned response to the script so that it always appears at the bottom of the e-mail.

3) Lastly, I want the outgoing mail to be saved as individual drafts in my drafts folder in gmail before it's sent out. That way, I can decide if I want to add a sentence or two to personalize each individual email draft.

Thanks in advance for your awesome help.

Best,
Noah

By the way, here's the script I want to edit:

function onOpen() {
var mySheet = SpreadsheetApp.getActiveSpreadsheet();
var menuEntries = [ {name: "Step 1: Import Gmail Contacts", functionName: "importContacts"},
{name: "Step 2: Start Mail Merge", functionName: "sendEmail"},
{name: "Help / About", functionName: "showHelp"}];
mySheet.addMenu("Mail Merge", menuEntries);
}

function importContacts() {
var groupName = Browser.inputBox("Enter the name of your Gmail Contacts group he ");
var mySheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
var myContacts = ContactsApp.findContactGroup(groupName).getContacts();
for (i=0; i < myContacts.length; i++) {
var myContact = [[myContacts[i].getFullName(), myContacts[i].getPrimaryEmail(), "Pending"]];
mySheet.getRange(i+2, 1,1,3).setValues(myContact);
}
Browser.msgBox("You have successfully imported " + myContacts.length + " contacts from Gmail. Please proceed to Step 3.");
}

function sendEmail() {

var mySheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
var newLine = "<br><br>";

var emailSubject = mySheet.getRange("F2").getValue();
var emailSalutation = mySheet.getRange("F3").getValue();

var emailLine1 = mySheet.getRange("F4").getValue() + newLine;
var emailLine2 = mySheet.getRange("F5").getValue()?
mySheet.getRange("F5").getValue() + newLine : "";
var emailLine3 = mySheet.getRange("F6").getValue()?
mySheet.getRange("F6").getValue() + newLine : "";
var emailLine4 = mySheet.getRange("F7").getValue()?
mySheet.getRange("F7").getValue() + newLine : "";
var emailLine5 = mySheet.getRange("F8").getValue()?
mySheet.getRange("F8").getValue() + newLine : "";

var emailBody = emailLine1 + emailLine2 + emailLine3 + emailLine4 + emailLine5;

var emailSignature = mySheet.getRange("F9").getValue() + newLine;
var emailYourName = mySheet.getRange("F10").getValue();
emailBody = emailBody + emailSignature + emailYourName + "<br>";

var emailReplyTo = mySheet.getRange("F11").getValue();

var myContacts = mySheet.getDataRange();
var myContact = myContacts.getValues();
for (i=1; i < myContact.length; i++) {
var person = myContact[i];
if (person[1] != "" && person[2] != "OK") {
var emailMsg = emailSalutation + " " + person[0] + "," + newLine + emailBody;
var advancedArgs = {htmlBody:emailMsg, name:emailYourName, replyTo:emailReplyTo};
MailApp.sendEmail(person[1], emailSubject, emailMsg , advancedArgs);
mySheet.getRange(i+1,3).setValue("OK");
}
}
SpreadsheetApp.flush();
}

function showHelp() {
Browser.msgBox("With Mail Merge, you can send personalized email messages to your Gmail contacts in two easy steps. For help, visit http://labnol.org/?p=13289 or send me a tweet @labnol.");
}​

Hi there,

we have quite a big and successful project going on. We're a bunch of hardcore hockey gaming people and we're editing a game that has its entire interface written in Javascript. The whole game has been completely rebuilt... graphics, sounds, etc. Also all menus have been changed and reconstructed and we have managed to add some really unique features (previously unseen in sports games). I have some really wild ideas for the interface but we're at a dead end because we don't really have anyone who has advanced JS skills.

See our project here. You can see the completely rebuilt menu features in the thumbnails.

If this forum has someone who's interested in hockey simulator & gaming and has JS skills and would like to develop this brilliant game with us, I would like to get in touch with him. I can send him the full (unmodified base game) any time. The modifications have to be installed from the thread I linked.

Thanks in advance.

Best regards
Trent

I'm using some free javascript for my website and I'm trying to edit it slightly to behave the way I want on my site. Right now it works fine apart from one thing... It remembers the last active div that was open... then when you visit the site again or refresh the page... that div stays open and doesn't close when toggling the other animated divs like it is supposed to.

How would I remove the last active div function or get it to close again when toggling other animated divs..

Thanks so much if you can help

Here is the site: www.gjoob.terryarchonship.com

here is where the last active div java is

Code:

showhide:function(divid, action){
	var $divref=this.divholders[divid].$divref //reference collapsible DIV
	if (this.divholders[divid] && $divref.length==1){ //if DIV exists
		var targetgroup=this.divgroups[$divref.attr('groupname')] //find out which group DIV belongs to (if any)
		if ($divref.attr('groupname') && targetgroup.count>1 && (action=="show" || action=="toggle" && $divref.css('display')=='none')){ //If current DIV belongs to a group
			if (targetgroup.lastactivedivid && targetgroup.lastactivedivid!=divid) //if last active DIV is set
				this.slideengine(targetgroup.lastactivedivid, 'hide') //hide last active DIV within group first
				this.slideengine(divid, 'show')
			targetgroup.lastactivedivid=divid //remember last active DIV
				
		}
		else{
			this.slideengine(divid, action)
		}
	}
}

here is the entire javascript:

Code:

var animatedcollapse={
divholders: {}, //structu  {div.id, div.attrs, div.$divref, div.$togglerimage}
divgroups: {}, //structu  {groupname.count, groupname.lastactivedivid}
lastactiveingroup: {}, //structu  {lastactivediv.id}
preloadimages: [],

show:function(divids){ //public method
	if (typeof divids=="object"){
		for (var i=0; i<divids.length; i++)
			this.showhide(divids[i], "show")
	}
	else
		this.showhide(divids, "show")
},

hide:function(divids){ //public method
	if (typeof divids=="object"){
		for (var i=0; i<divids.length; i++)
			this.showhide(divids[i], "hide")
	}
	else
		this.showhide(divids, "hide")
},

toggle:function(divid){ //public method
	if (typeof divid=="object")
		divid=divid[0]
	this.showhide(divid, "toggle")
},

addDiv:function(divid, attrstring){ //public function
	this.divholders[divid]=({id: divid, $divref: null, attrs: attrstring})
	this.divholders[divid].getAttr=function(name){ //assign getAttr() function to each divholder object
		var attr=new RegExp(name+"=([^,]+)", "i") //get name/value config pair (ie: width=400px,)
		return (attr.test(this.attrs) && parseInt(RegExp.$1)!=0)? RegExp.$1 : null //return value portion (string), or 0 (false) if none found
	}
	this.currentid=divid //keep track of current div object being manipulated (in the event of chaining)
	return this
},

showhide:function(divid, action){
	var $divref=this.divholders[divid].$divref //reference collapsible DIV
	if (this.divholders[divid] && $divref.length==1){ //if DIV exists
		var targetgroup=this.divgroups[$divref.attr('groupname')] //find out which group DIV belongs to (if any)
		if ($divref.attr('groupname') && targetgroup.count>1 && (action=="show" || action=="toggle" && $divref.css('display')=='none')){ //If current DIV belongs to a group
			if (targetgroup.lastactivedivid && targetgroup.lastactivedivid!=divid) //if last active DIV is set
				this.slideengine(targetgroup.lastactivedivid, 'hide') //hide last active DIV within group first
				this.slideengine(divid, 'show')
			targetgroup.lastactivedivid=divid //remember last active DIV
				
		}
		else{
			this.slideengine(divid, action)
		}
	}
},

slideengine:function(divid, action){
	var $divref=this.divholders[divid].$divref
	var $togglerimage=this.divholders[divid].$togglerimage
	if (this.divholders[divid] && $divref.length==1){ //if this DIV exists
		var animateSetting={height: action}
		if ($divref.attr('fade'))
			animateSetting.opacity=action
		$divref.animate(animateSetting, $divref.attr('speed')? parseInt($divref.attr('speed')) : 500, function(){
			if ($togglerimage){
				$togglerimage.attr('src', ($divref.css('display')=="none")? $togglerimage.data('srcs').closed : $togglerimage.data('srcs').open)
			}
			if (animatedcollapse.ontoggle){
				try{
					animatedcollapse.ontoggle(jQuery, $divref.get(0), $divref.css('display'))
				}
				catch(e){
					alert("An error exists inside your \"ontoggle\" function:\n\n"+e+"\n\nAborting execution of function.")
				}
			}
		})
		return false
	}
},

generatemap:function(){
	var map={}
	for (var i=0; i<arguments.length; i++){
		if (arguments[i][1]!=null){ //do not generate name/value pair if value is null
			map[arguments[i][0]]=arguments[i][1]
		}
	}
	return map
},

init:function(){
	var ac=this
	jQuery(document).ready(function($){
		animatedcollapse.ontoggle=animatedcollapse.ontoggle || null
		var urlparamopenids=animatedcollapse.urlparamselect() //Get div ids that should be expanded based on the url (['div1','div2',etc])
		var persistopenids=ac.getCookie('acopendivids') //Get list of div ids that should be expanded due to persistence ('div1,div2,etc')
		var groupswithpersist=ac.getCookie('acgroupswithpersist') //Get list of group names that have 1 or more divs with "persist" attribute defined
		if (persistopenids!=null) //if cookie isn't null (is null if first time page loads, and cookie hasnt been set yet)
			persistopenids=(persistopenids=='nada')? [] : persistopenids.split(',') //if no divs are persisted, set to empty array, else, array of div ids
		groupswithpersist=(groupswithpersist==null || groupswithpersist=='nada')? [] : groupswithpersist.split(',') //Get list of groups with divs that are persisted
		jQuery.each(ac.divholders, function(){ //loop through each collapsible DIV object
			this.$divref=$('#'+this.id)
			if ((this.getAttr('persist') || jQuery.inArray(this.getAttr('group'), groupswithpersist)!=-1) && persistopenids!=null){ //if this div carries a user "persist" setting, or belong to a group with at least one div that does
				var cssdisplay=(jQuery.inArray(this.id, persistopenids)!=-1)? 'block' : 'none'
			}
			else{
				var cssdisplay=this.getAttr('hide')? 'none' : null
			}
			if (urlparamopenids[0]=="all" || jQuery.inArray(this.id, urlparamopenids)!=-1){ //if url parameter string contains the single array element "all", or this div's ID
				cssdisplay='block' //set div to "block", overriding any other setting
			}
			else if (urlparamopenids[0]=="none"){
				cssdisplay='none' //set div to "none", overriding any other setting
			}
			this.$divref.css(ac.generatemap(['height', this.getAttr('height')], ['display', cssdisplay]))
			this.$divref.attr(ac.generatemap(['groupname', this.getAttr('group')], ['fade', this.getAttr('fade')], ['speed', this.getAttr('speed')]))
			if (this.getAttr('group')){ //if this DIV has the "group" attr defined
				var targetgroup=ac.divgroups[this.getAttr('group')] || (ac.divgroups[this.getAttr('group')]={}) //Get settings for this group, or if it no settings exist yet, create blank object to store them in
				targetgroup.count=(targetgroup.count||0)+1 //count # of DIVs within this group
				if (jQuery.inArray(this.id, urlparamopenids)!=-1){ //if url parameter string contains this div's ID
					targetgroup.lastactivedivid=this.id //remember this DIV as the last "active" DIV (this DIV will be expanded). Overrides other settings
					targetgroup.overridepersist=1 //Indicate to override persisted div that would have been expanded
				}
		
			}
		}) //end divholders.each
		jQuery.each(ac.divgroups, function(){ //loop through each group
			if (this.lastactivedivid && urlparamopenids[0]!="none") //show last "active" DIV within each group (one that should be expanded), unless url param="none"
				ac.divholders[this.lastactivedivid].$divref.show()
		})
		if (animatedcollapse.ontoggle){
			jQuery.each(ac.divholders, function(){ //loop through each collapsible DIV object and fire ontoggle event
				animatedcollapse.ontoggle(jQuery, this.$divref.get(0), this.$divref.css('display'))
			})
		}
 		//Parse page for links containing rel attribute
		var $allcontrols=$('a[rel]').filter('[rel^="collapse["], [rel^="expand["], [rel^="toggle["]') //get all elements on page with rel="collapse[]", "expand[]" and "toggle[]"
		$allcontrols.each(function(){ //loop though each control link
			this._divids=this.getAttribute('rel').replace(/(^\w+)|(\s+)/g, "").replace(/[\[\]']/g, "") //cache value 'div1,div2,etc' within identifier[div1,div2,etc]
			if (this.getElementsByTagName('img').length==1 && ac.divholders[this._divids]){ //if control is an image link that toggles a single DIV (must be one to one to update status image)
				animatedcollapse.preloadimage(this.getAttribute('data-openimage'), this.getAttribute('data-closedimage')) //preload control images (if defined)
				$togglerimage=$(this).find('img').eq(0).data('srcs', {open:this.getAttribute('data-openimage'), closed:this.getAttribute('data-closedimage')}) //remember open and closed images' paths
				ac.divholders[this._divids].$togglerimage=$(this).find('img').eq(0) //save reference to toggler image (to be updated inside slideengine()
				ac.divholders[this._divids].$togglerimage.attr('src', (ac.divholders[this._divids].$divref.css('display')=="none")? $togglerimage.data('srcs').closed : $togglerimage.data('srcs').open)
			}
			$(this).click(function(){ //assign click behavior to each control link
				var relattr=this.getAttribute('rel')
				var divids=(this._divids=="")? [] : this._divids.split(',') //convert 'div1,div2,etc' to array 
				if (divids.length>0){
					animatedcollapse[/expand/i.test(relattr)? 'show' : /collapse/i.test(relattr)? 'hide' : 'toggle'](divids) //call corresponding public function
					return false
				}
					
			}) //end control.click
		})// end control.each

		$(window).bind('unload', function(){
			ac.uninit()
		})
	}) //end doc.ready()
},

uninit:function(){
	var opendivids='', groupswithpersist=''
	jQuery.each(this.divholders, function(){
		if (this.$divref.css('display')!='none'){
			opendivids+=this.id+',' //store ids of DIVs that are expanded when page unloads: 'div1,div2,etc'
		}
		if (this.getAttr('group') && this.getAttr('persist'))
			groupswithpersist+=this.getAttr('group')+',' //store groups with which at least one DIV has persistance enabled: 'group1,group2,etc'
	})
	opendivids=(opendivids=='')? 'nada' : opendivids.replace(/,$/, '')
	groupswithpersist=(groupswithpersist=='')? 'nada' : groupswithpersist.replace(/,$/, '')
	this.setCookie('acopendivids', opendivids)
	this.setCookie('acgroupswithpersist', groupswithpersist)
},

getCookie:function(Name){ 
	var re=new RegExp(Name+"=[^;]*", "i"); //construct RE to search for target name/value pair
	if (document.cookie.match(re)) //if cookie found
		return document.cookie.match(re)[0].split("=")[1] //return its value
	return null
},

setCookie:function(name, value, days){
	if (typeof days!="undefined"){ //if set persistent cookie
		var expireDate = new Date()
		expireDate.setDate(expireDate.getDate()+days)
		document.cookie = name+"="+value+"; path=/; expires="+expireDate.toGMTString()
	}
	else //else if this is a session only cookie
		document.cookie = name+"="+value+"; path=/"
},

urlparamselect:function(){
	window.location.search.match(/expanddiv=([\w\-_,]+)/i) //search for expanddiv=divid or divid1,divid2,etc
	return (RegExp.$1!="")? RegExp.$1.split(",") : []
},

preloadimage:function(){
	var preloadimages=this.preloadimages
	for (var i=0; i<arguments.length; i++){
		if (arguments[i] && arguments[i].length>0){
			preloadimages[preloadimages.length]=new Image()
			preloadimages[preloadimages.length-1].src=arguments[i]
		}
	}
}

}

Hello

I would like some help. The ebay editor kit produces code that is in javascript format. Is it possible to edit that javascript so it is IP geo targeted. Meaning that the javascript will show ads from the ebay site of the visitors country?

I was reading the Ebay Partners Network blog and it stated it can be done using third party scripts and geoip database.

If this can be done by php then any advice would be very greatfull.

Thanks all in advance.

Hi there,

This forum was linked off of http://www.javascriptkit.com so I was hoping someone could lend me a hand.

I like the image rotator script at http://www.javascriptkit.com/script/...tionshow.shtml as it is very easy to use. It currently pauses the image rotation on mouseover, but I would like to enable it to also pause onFocus and onBlur.

My initial thoughts were to add a small "pause" form button under the image description that people could tab to with the keyboard, and perhaps capture the onBlur or onFocus event to initiate the pause. But the code is difficult to wrap my mind around. Any thoughts?

Link to .js code: http://www.javascriptkit.com/script/...nsitionshow.js

I am having problem with editing string on mouse click.

I have a string of text like this:
Code:

id1=&id2=&id3=&id4=&amp

And now I need to show/hide part of string by clicking on a links. I would like to hide/show each id's (i.e. id1=&amp


It is simple to hide whole text but how about part of it ?

Let me start of by saying that I'm a designer, not a programmer so I'll apologize in advance for having very little knowledge of javascript.

I found a free script for a auto-advancing slideshow that allows you to give each image in the slideshow a unique link. My problem is that when you click on one of the pictures the link opens in a new window instead of loading in the default browser window. I have tried to search google for an answer but my lack of javascript knowledge has left me scratching my chin.

Here's the code in the head of my page:

Code:

<script language="JavaScript1.1">
<!--
/*
JavaScript Image slideshow
*/

var slideimages=new Array()
var slidelinks=new Array()

function slideshowimages(){
  for (i=0;i<slideshowimages.arguments.length;i++){
  slideimages[i]=new Image()
  slideimages[i].src=slideshowimages.arguments[i]
  }
}

function slideshowlinks(){
  for (i=0;i<slideshowlinks.arguments.length;i++)
  slidelinks[i]=slideshowlinks.arguments[i]
}

function gotoshow(){
  if (!window.winslide||winslide.closed)
    winslide=window.open(slidelinks[whichlink])
  else
    winslide.location=slidelinks[whichlink]
    winslide.focus()
}
//-->
</script>

and here's the Body code:

Code:

<script>
		<!--
		//configure the paths of the images, plus corresponding target links
		slideshowimages("images/services/3d_meter.jpg", "images/services/3d_prototype.jpg", "images/services/3d_stage_renderings.jpg", "images/services/atsite.jpg", "images/services/netstar.jpg", "images/services/photo_manipulation.jpg", "images/services/powerpoint.jpg")
		slideshowlinks("/", "/", "/", "/", "/", "/", "/")

		//configure the speed of the slideshow, in miliseconds
		var slideshowspeed=8000
		var whichlink=0
		var whichimage=0

		function slideit(){
  		if (!document.images)
    		return
    		document.images.slide.src=slideimages[whichimage].src
    		whichlink=whichimage

  		if (whichimage<slideimages.length-1)
    		whichimage++
  		else
    		whichimage=0
    		setTimeout("slideit()",slideshowspeed)
		}
		slideit()
		//-->
		</script>

fooling around with it, I think I have determined that my problem is the window.open in the function gotoshow, but again, I'm a designer who has little knowledge of how this actually works.

If it helps, here is a link to my site where I have the slideshow, http://gravescreativedesign.com/services.html All of the images link to the index page for my site at the moment for testing purposes, but these images will eventually link to different urls within my portfolio section of my website.