This is Interesting: Free Magazines for Graphics designers and webmasters
Home > Archive > Webmaster forum > October 2005 > Re: non-standard tags in strict
You are viewing an archived Text-only version of the thread.
To view this thread in it's original format and/or if you want to reply to
this thread please [click here]
| Author |
Re: non-standard tags in strict
|
|
|
| "William Tasso" <SpamBlocked@tbdata.com> wrote in message
news:op.szbemvdjm9g4qz-wnt@tbdata.com...
> Writing in news:alt.www.webmaster
> From the safety of the http://groups.google.com cafeteria
> Tony <tony23@dslextreme.com> said:
>
>
> wear gloves and use your left hand
But I'm already doing that!
>
> define two classes in your css
>
> html: <div id="theDiv" class="class1"
>
> my javascript is lousy, so in pseudocode ...
>
> on [event]
>
> if element.class = class1
> element.class = class2
> else
> element.class = class1
Except that I have to handle more class transformations than that. The class
changes based on mouseover, mouseout, and click events, as well as with the
status of check boxes within the element. Plus, this exact same thing has to
be done with at least two different base starting classes.
It's more like:
on [mouseover]
element.class = class1
on [mouseout]
if checkboxed.checked
element class = class2
else
element class = original_class
.... the trick is in remembering what that original_class is
| |
|
| "Norman L. DeForest" <af380@chebucto.ns.ca> wrote in message
news:Pine.GSO.3.95.iB1.0.1051027175105.17868B-100000@halifax.chebucto.ns.ca...
>
> OK, I'm still trying to learn JavaScript and DHTML but...
>
> Perhaps you could initialise a two-dimensional array with one
> "row" for each Id ([0] to [n-1]) and three elements per row
> ('*' indicates any index from 0 to n-1):
> IdList[*][0] set to an Id
> IdList[*][1] set to base class for that Id
> IdList[*][2] set to current class for that Id
> and use that to keep track of settings.
>
> For one example, to set everything to the default settings you
> might be able to use something like this (where NumberOfIds is a
> previously-defined constant):
>
> for (i = 0; i < NumberOfIds; i++) {
> document.getElementById(IdList[i][0]).className = IdList[i][1];
> IdList[i][2] = IdList[i][1];
> };
Hmm -
The ID's are generated by the back-end .NET coding here, and are related to
the database items each element represents. No possibility of simple ID
coding (as you suggest below).
Not knowing what the ID's are, nor what pattern they might follow, I would
have to load the ID's into the array during onload. About the only way I
could accomplish that would be to use getElementByTagName() on the container
that all the elements are displayed in. There's already a lot of heavy
javascript happening on the load event - I'd hate to have to add that much
more.
> If you use Ids with a numeric component, theDiv00, theDiv01, theDiv02
> and so on you may be able to use string manipulation to get the
> appropriate array index from the ID so you don't have to search the
> IdList[n][0] to find a particular ID (and you may be able to eliminate
> the first of the three elements of each row).
>
> By doing it all in JavaScript, you avoid the need for special non-standard
> attributes.
It's a thought, at least - maybe it will suggest somethng else.
| |
| Chaddy2222 2005-10-28, 3:22 am |
|
Tony wrote:
> I'm wondering if there may be a better way to handle something.
>
> Basically, I have some elements that I manipulate the display of in
> Javascript, by changing the element's class. In order to revert
> everything to the original class when desired, I also define a
> "baseClass" that matches the element's original class. Like this:
>
> <div id="theDiv" class="theDivClass" baseClass="theDivClass">
>
> Later on, the javascript may change that div's class:
>
> document.getElementById('theDiv').className = "theOtherClass";
>
> (this may happen many times)
>
> And when I want to revert to the original:
>
> document.getElementById('theDiv').className =
> document.getElementById('theDiv').baseClass;
>
> Now, this works just fine on the javascript end. But the inclusion of
> the baseClass attribute in the tag is rejected by the validator. For
> obvious reasons: it isn't a standard attribute defined in the
> specification.
>
> One possibility that occurs to me is to set the baseClass attribute
> when the element is first changed. That's probably the easiest, but I
> was wondering if you guys had any other thoughts.
Hmm. I'm not sure. Does the Validator suggest using CSS by any chance.
I would think that is what would be the prefered way of doing things,
but it is not always possable as I think you have already staited.
I don't think the validator likes JavaScript much at all, especially
when you use thing such as Class. It's considerd better to use CSS for
such things.
I have a site @ http://freewebdesign.atspace.org where I used a Java
and CSS combo to create that re-direct page to re-direct visitors from
my old site to the new one. That script does not validate eather. It's
not perfect but it does what I wanted it to do.
>
> Thanks
That's ok.
---
Regards Chad. http://freewebdesign.cjb.cc
| |
| Toby Inkster 2005-10-28, 3:22 am |
| Tony wrote:
> the trick is in remembering what that original_class is
Try the following functions. You'd better like them: they took almost half
an hour! They basically implement a class history as a stack.
setClass(id, c)
Sets a new class "c" and pushes the old class to the top
of the stack.
restoreClass(id)
Rolls back the class history by one. Return value is the
discarded class, though you're unlikely to need it.
restoreClassAll(id)
Rolls back the class history to the beginning.
Example:
document.getElementById('x').className = "albert";
// class is 'albert'
setClass(x, "betty");
// class is 'betty'
setClass(x, "cuthbert");
// class is 'cuthbert'
setClass(x, "debbie");
// class is 'debbie'
restoreClass(x);
// class is 'cuthbert'
setClass(x, "edgar");
// class is 'edgar'
restoreClass(x);
// class is 'cuthbert'
restoreClassAll(x);
// class is 'albert'
Functions are below...
<script type="text/Javascript">
function setClass (id, c)
{
var ele = document.getElementById(id);
var class = ele.className.split(" ");
var newC = "";
for(var i=0; class[i]; i++)
{
newC = newC + "orig::" + class[i] + " ";
}
newC = newC + c;
ele.className = newC;
}
function restoreClass (id)
{
var ele = document.getElementById(id);
var class = ele.className.split(" ");
var newC = "";
var retval = "";
for(var i=0; class[i]; i++)
{
if (class[i].indexOf("orig::")==0)
{
var c = class[i].substring(6);
newC = newC + c + " ";
}
else
{
retval = class[i];
}
}
if (newC.charAt(newC.length-1)==" ")
{
newC = newC.substring(0, newC.length-1);
}
ele.className = newC;
return retval;
}
function restoreClassAll (id)
{
var ele = document.getElementById(id);
while (ele.className.indexOf("orig::")!=-1)
{
restoreClass(id);
}
}
</script>
--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact
|
|
|
| | Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |
|