or: http://mootools.net/shell/kss2C/3/
The UL is unnecessary, but the idea is to just look at the next
element. No need to do any fancy calculations or mess with
attributes. ;)
I was trying to do a css solution (where the question is just a parent
container. Think: <li class="question"><p>Question?</p><p
class="answer">Answer.</p></li>):
#faq .question .answer { display: none }
#faq .question:focus .answer { display: block }
but :focus is only for keyboard accessible elements (lame) (although
you could setup an anchor for the question, but the selector becomes
complicated).
:active does work, however; but it's only if you want them to click
and read 'cus when they let go of the mouse it'll go back to display
none.
On Feb 11, 3:28 pm, Rolf -nl <[email protected]> wrote:
> Well, if you're doing a Q/A thing than I think a DL list with DT = Q
> and DD = A is even more semantic, better looking, whatever..
> But then, if you read the specs, a DD shouldn't contain much else than
> text, but that's mainly the case with Q/A's anyway.
>
> I've done things both ways, but most of the time doing all this in JS
> (storing it in an array or whatever) is too much. But it all depends
> on the project; how large is the site, how many people are working on
> it, what are the inhouse standards you are following, etc. etc. There
> are always 10 ways of doing things in this web stuff, that's why we
> always have dilemma's about "how would others do this".. at least, I
> have those :)
>
> On Feb 11, 3:36 pm, Roman Land <[email protected]> wrote:
>
>
>
> > Its possibly more useful when the developing team is a one man show, but you
> > still leave your HTML to be edited by other members of the team.
>
> > Also, I like being dependent on as few entities as possible, so when you
> > want to change something its a breeze.
>
> > IMO, in this case HTML provides the unsorted list facility
> > <UL><LI></LI></UL> so these questions + answers can be grouped in one LI,
> > this not only looks better (readable) in HTML and follows a more standard
> > way about handling lists of items.
>
> > Never the less, one of the big strengths and weakness with web development
> > is the number of options and openness for creativity, I am suggesting some
> > more options..
>
> > On Thu, Feb 11, 2010 at 4:09 PM, אריה גלזר <[email protected]> wrote:
> > > i disagree with your assumption that the use of the id attribute is an
> > > html->js markup. It is good for semantic purposes. it is also important
> > > for
> > > accessibility.
> > > this specific use case for example, is not about html->js markup. giving
> > > questions and answers unique ids that correlate with each other is both
> > > good
> > > semantics and good for usability (eg allowing anchoring).
>
> > > -----------
> > > אריה גלזר
> > > 052-5348-561
> > > 5561
>
> > > On Thu, Feb 11, 2010 at 15:50, Roman Land <[email protected]> wrote:
>
> > >> As mentioned by other member of this group, utilizing the elements (id
> > >> class etc.. ) attributes can and will cause issues when other developers
> > >> (and especially designers) are also working with the same code.
>
> > >> It is also my personal preference to minimize HTML -> JS markup, html &
> > >> JS
> > >> code stays cleaner and you end up with more editable coherent code both
> > >> in
> > >> JS and in HTML.
>
> > >> IMHO.
>
> > >> On Thu, Feb 11, 2010 at 11:18 AM, אריה גלזר
> > >> <[email protected]>wrote:
>
> > >>> i can't see the problem.
> > >>> Assigning IDs isn't inefficient. We use classes for elements that don't
> > >>> specifically require a unique identity, or elements that might have
> > >>> multiple
> > >>> appearances with the same behavior. Another use case is when we want to
> > >>> generalize a behavior to a wide variety of html structures (for eg when
> > >>> we
> > >>> write plugins).
> > >>> In your case, each question-answer is unique, and has an identity on
> > >>> it's
> > >>> own. Thus, assigning them IDs is the better, and faster solution (using
> > >>> id
> > >>> selectors is always much faster than using class selectors,
> > >>> *because*they are unique). When you can safely use IDs, you should.
> > >>> Also, the IDs allow you to add semantic value to your structure. the
> > >>> best
> > >>> way to mark the connection between an answer and a question is a DL, but
> > >>> if your structure won't let you couple them in that fashion (if the
> > >>> lists
> > >>> must be apart), using coupled IDs is a next best solution.
>
> > >>> all of this is at least the way i see things.
> > >>> -----------
> > >>> אריה גלזר
> > >>> 052-5348-561
> > >>> 5561
>
> > >>> On Thu, Feb 11, 2010 at 11:03, cbolson <[email protected]> wrote:
>
> > >>>> > actually, i think the most efficient way to do this is to mark the
> > >>>> questions
> > >>>> > and answers with grouped id's:
> > >>>> > <div id='q14' class = 'question'></div>
>
> > >>>> > <div id='a14' class = 'answer'></div>
>
> > >>>> > and then you could do:
>
> > >>>> > a_id = 'a'+this.get('id').substr(1);
>
> > >>>> Funnily enough that is the way I "used" to do it - ie assigning
> > >>>> unique id's to all the questions and answerd (eg) until I got my head
> > >>>> round arrays and indexes (in Mootools).
> > >>>> As I understand it this would make for simpler code and less html
> > >>>> markup (ie no "ids" on all the elements).
> > >>>> However, you say that using arrays is less efficent in this case so
> > >>>> now I am not so sure.... time to do a couple of tests...
>
> > >>>> Chris
>
> > >>>> On 11 feb, 09:43, אריה גלזר <[email protected]> wrote:
> > >>>> > actually, i think the most efficient way to do this is to mark the
> > >>>> questions
> > >>>> > and answers with grouped id's:
> > >>>> > <div id='q14' class = 'question'></div>
>
> > >>>> > <div id='a14' class = 'answer'></div>
>
> > >>>> > and then you could do:
>
> > >>>> > a_id = 'a'+this.get('id').substr(1);
>
> > >>>> > this is much simpler and more efficient than creating an array of all
> > >>>> > answers and question, and IMO more semantic as well.
> > >>>> > if you anticipate a question will be clicked multiple times than
> > >>>> element
> > >>>> > storage can be a good solution, but in a q-a scenario i think most
> > >>>> times
> > >>>> > element storage is an overkill.
> > >>>> > -----------
> > >>>> > אריה גלזר
> > >>>> > 052-5348-561
> > >>>> > 5561
>
> > >>>> > On Wed, Feb 10, 2010 at 23:48, cbolson <[email protected]> wrote:
> > >>>> > > Thanks all for your help :)
> > >>>> > > I think that it was the indexOf that I was missing in all my
> > >>>> various
> > >>>> > > attempts.
>
> > >>>> > > Using getNext(), whilst it works in my example in mooshell, won't
> > >>>> > > actually work in my actual code as the elements aren't "together".
>
> > >>>> > > Cheers,
> > >>>> > > Chris
>
> > >>>> > > On 10 feb, 22:30, Ryan Florence <[email protected]> wrote:
> > >>>> > > > I'd personally create the arrays and do the indexOf in this
> > >>>> scenario.
>
> > >>>> > > > But there's a chance the actual use case could call for storing
> > >>>> the
> > >>>> > > > answers with the questions then simply retrieving the element
> > >>>> using
> > >>>> > > > el.store and el.retrieve.
>
> > >>>> > > > On Feb 10, 2010, at 2:04 PM, אריה גלזר wrote:
>
> > >>>> > > > >http://mootools.net/shell/K55zK/3/
> > >>>> > > > > this in an event always points to the element.
> > >>>> > > > > knowing that, here are 2 solutions for this that i can think
> > >>>> > > > > of:
> > >>>> > > > > 1. creating a questions array and using indexOf
> > >>>> > > > > 2. using getNext() to fetch the nearest answer
>
> > >>>> > > > > both are shown in the example above.
> > >>>> > > > > -----------
> > >>>> > > > > אריה גלזר
> > >>>> > > > > 052-5348-561
> > >>>> > > > > 5561
>
> > >>>> > > > > On Wed, Feb 10, 2010 at 22:41, cbolson <[email protected]>
> > >>>> wrote:
> > >>>> > > > > Is it possible to get the index of the element (eg) clicked
> > >>>> > > > > when
> > >>>> using
> > >>>> > > > > event delegation?
>
> > >>>> > > > > Here is my example code:
>
> > >>>> > > > > var comments=$$('.answer').hide();
>
> > >>>> > > > > document.id('faq').addEvent('click:relay(.question)',
> > >>>> function(){
> > >>>> > > > > // how to get the "index" of the item clicked so that
> > >>>> this
> > >>>> > > > > next line will work?
> > >>>> > > > > comments[index].show();
> > >>>> > > > > });
>
> > >>>> > > > > Code in mooshell:
> > >>>> > > > >http://mootools.net/shell/kss2C/
>
> > >>>> > > > > Thanks in advance for any suggestions, I am probably missing
> > >>>> something
> > >>>> > > > > obvious :(
>
> > >>>> > > > > Chris
>
> > >> --
> > >> ---
> > >> "Make everything as simple as possible, but not simpler."
>
> > >> - Albert Einstein
>
> > --
> > ---
> > "Make everything as simple as possible, but not simpler."
>
> > - Albert Einstein
