Javascript help

[cesy]

I am trying to implement a solution to Bug 581, and I need to do some Javascript that will make a hidden section appear when clicked on. So far I have this:

$out .= "Click here to see all your tags";
$out .= "";

(and then the actual content in the span). What should my ShowTags() function actually do in order to change the style to display:inline? I found one example on the web, but it used fancy browser-sniffing, and it appears we have our own browser-sniffing module and I don't know how to adapt it for that.

Comments

[mark]

If that page used jQuery, it'd be simple!

$('#divid').toggle();

But since it doesn't, I'm not sure what the best way to do it is...

[cesy]

Are we wanting to convert everything to jQuery eventually? Should we just do that for this page first?

[wyntarvox]

What about:

document.getElementById('divid').style.display = 'inline';

I'm pretty certain this is supported by all of the major current browsers (going back a number of versions, even).

Having said that, like Cesy suggested in her reply, we could just include jQuery on this page, unless there's a reason it isn't currently?

[pauamma]

See the Javascript function showAnswer in htdocs/support/faqbrowse.bml, which uses that method.

[cesy]

I had a bit of a look at it, but it's still beyond me - I tried to adapt it to the class names I had, but it broke. The one there appears to hide or show both the summary and the "more" section, so it's more complex than I need.

[janinedog]

Yup, and actually if using LJ's JS, you can use $('divid') instead of document.getElementById('divid').

But the general idea is to have the div have a display: hidden; property, and have the onclick handler for the div do $('divid').style.display = 'block'; (or 'inline', depending on how you want it to look). If you want it to be able to toggle off again, just have your JS check to see if the div is hidden or shown first (by looking at the $('divid').style.display property), and then do the opposite.

[cesy]

Can you spell it out for me in beginner terms a bit more, please? I guessed
<a class="tagslink" onclick=ShowTags();>Click here to see tags</a><span class="tagslist" style=display:none;>[Actual tags]</span>
or code to that effect in the doc, and then in the header,
<script type=text/javascript>document.getElementById('tagslist').style.display = 'inline';</script>
but that didn't seem to do the trick, and I know I should be putting the details of the function in there and so on. I really don't know very much javascript at all.

[wyntarvox]

getElementById() uses the id attribute, not the class attribute, so your span should look something like:

<span class="tagslist" id="tagslistid" style=display:none;>[Actual tags]</span>

And you would then use:

<script type=text/javascript>document.getElementById('tagslistid').style.display = 'inline';</script>

[cesy]

Thank you! That works now.

[mark]

jQuery conflicts with the default 6A/LJ JS that we use, so on any page that has existing JS (which the update page has a ton of), we have to port that to use the jQuery calls.

It's probably not a HUGE task, but it hasn't been done yet. I imagine that the FCKEditor is compatible with jQuery, and that's the bulk of it.

[wyntarvox]

I haven't looked in to exactly how they conflict, so I might be completely off-base, but to avoid the conflict could we use:

var $jQ = jQuery.noConflict();

For anyone following along, this remaps the default jQuery $ to $jQ (and releases the $ back to whatever other library wants it), so $(document) becomes $jQ(document).

[mark]

I don't believe that works since the 6A/LJ JS code does a lot of messing with class prototypes. So, if jQuery is expecting a class to act a certain way, it likely won't work.

You can try it though! I dismissed it pretty easily, but admit I haven't done any thorough testing.