[Javascript] Maintaining state

Troy III Ajnej trojani2000 at hotmail.com
Wed Oct 31 21:57:38 CDT 2007


I had a similar problem with some expand-colapse objects that would 
hide the previously shown title content while expanding the content 
of currently clicked title, etc.
 
Lots of ideas came through my mind; like using numbered ids, or loop the 
collection to reset all before expanding the clicked title, etc, but I droped
them all before my last decision.
I had some real headache with it, eventhough the idea was simple, it 
required a hell of testing and rewritting both html, css, even script statements
mostly because of nested elements.etc
 
The idea was to use a 'global var' as a "short term memory" cell for keeping track
of the last expanded element until new title is clicked. Yet at the end I was forced
to rewrite it all to make this aproach work on different browsers.
So, what I will bring you here, is a very simple and modified script of the same 
aproach that should solve your problem. I'm using classes here to shorten your 
script and possibly make it easier to read.
The Script:
 
var current='';
 
function persist(actual) {       if (actual.target) 
               actual=actual.target       else 
               actual=actual.srcElement
       if (actual.className=="borderOff")               current.className="borderOff"               actual.className="borderOn"               current=actual        }
 
The HTML code:
 
 <img src='...' class='borderOff' onMouseOver="persist(event)"> <img src='...' class='borderOff' onMouseOver="persist(event)"> <img src='...
 
The CSS:
 
.borderOn{ border: solid 2px red;
}
.borderOff{ border:none;
}
 
This way you can chose what image gets the behaviour so that other ordinary 
images remain excluded in a 'clean' way.
 
ps.:
Reading earlier questions I find that you are using different bored colors!
In casse it's important, I propose you do the following:
 
Youll have to first add Id's to the images so the border-color is specified
through "Id" selector in css.
 
Asuming image Id's are given as follows: border1,..2,..3, etc, all you have to do is, 
-add these extra css lines: 
 
#border1{ border-color:red;
}#border2{ border-color:green;
}#border3{ border-color:blue;
}
...
 
While off course, your image tags will become:
 <img src='...'  id='border1' class='borderOff' onMouseOver="persist(event)"> a.s.o.
 
That's all!
If you decide use it, I would be glad if you add my signiture to it,
dont thank me. :)
 
Regards,
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~                                        Troy III                            progressive art enterprise~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~



> Date: Sat, 6 Oct 2007 11:14:24 -0400> To: javascript at lists.evolt.org> From: tedd at sperling.com> Subject: [Javascript] Maintaining state> > Hi gang (again):> > I hope that my flurry of recent questions is not abusing your > kindness. If so, please tell me.> > Here's the situation.> > Let's say there are three images on a web page such that when the > user moves his/her cursor over one image, a border appears. No > problem, I can do that with css.> > However, I would like the border to remain (i.e., maintain state) > after the user has moved the cursor off the image and stay that way > until another image is subject to a rollover -- and then, that image > would maintain state. Only one image maintains state.> > I know this is counter to the way css does things, but it's not so > much in application HIG (human interface guidelines), where > maintaining state is common.> > I am sure that I could stumble around and come up with something, but > I would think this would be more of a staple function/method commonly > used by javascript experts (how's that for kissing up?).> > In any event, if any of you have encountered this before, I would > appreciate guidance.> > Thanks,> > tedd> > -- > -------> http://sperling.com http://ancientstones.com http://earthstones.com> _______________________________________________> Javascript mailing list> Javascript at lists.evolt.org> http://lists.evolt.org/mailman/listinfo/javascript
_________________________________________________________________
Windows Live Hotmail and Microsoft Office Outlook – together at last.  Get it now.
http://office.microsoft.com/en-us/outlook/HA102225181033.aspx?pid=CL100626971033
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.evolt.org/pipermail/javascript/attachments/20071101/8cf1931b/attachment.htm>


More information about the Javascript mailing list