dw_dev_training: Javascript help

Cesy (

cesy) wrote in

dw_dev_training,
@ 2009-09-21 08:05 am UTC

Entry tags:

javascript, question

Javascript help

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.

(15 comments) - (Post a new comment)
(Flat) (Top-level comments only)

	no subject mark 2009-09-21 07:39 am UTC (link)
	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... (Reply to this) (Thread) (Hide 11 comments) (Show 11 comments)

	no subject cesy 2009-09-21 07:40 am UTC (link)
	Are we wanting to convert everything to jQuery eventually? Should we just do that for this page first? (Reply to this) (Thread from start) (Parent)

no subject

wyntarvox
2009-09-21 09:22 am UTC (link)

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?

(Reply to this) (Thread from start) (Parent) (Thread) (Hide 9 comments) (Show 9 comments)

	no subject pauamma 2009-09-21 12:50 pm UTC (link)
	See the Javascript function showAnswer in htdocs/support/faqbrowse.bml, which uses that method. (Reply to this) (Thread from start) (Parent) (Thread) (Hide 1 comment) (Show 1 comment)

	no subject cesy 2009-09-22 11:46 am UTC (link)
	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. (Reply to this) (Thread from start) (Parent)

no subject

janinedog
2009-09-21 03:06 pm UTC (link)

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.

(Reply to this) (Thread from start) (Parent)

no subject

cesy
2009-09-22 11:45 am UTC (link)

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.

(Reply to this) (Thread from start) (Parent) (Thread) (Hide 2 comments) (Show 2 comments)

no subject

wyntarvox
2009-09-22 10:23 pm UTC (link)

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>

Last edited 2009-09-22 10:25 pm UTC

(Reply to this) (Thread from start) (Parent) (Thread) (Hide 1 comment) (Show 1 comment)

	no subject cesy 2009-09-26 12:52 pm UTC (link)
	Thank you! That works now. (Reply to this) (Thread from start) (Parent)

no subject

mark
2009-09-28 05:41 pm UTC (link)

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.

(Reply to this) (Thread from start) (Parent) (Thread) (Hide 2 comments) (Show 2 comments)

no subject

wyntarvox
2009-09-28 09:04 pm UTC (link)

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).

(Reply to this) (Thread from start) (Parent) (Thread) (Hide 1 comment) (Show 1 comment)

	no subject mark 2009-09-28 09:07 pm UTC (link)
	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. (Reply to this) (Thread from start) (Parent)

	no subject vlion 2009-09-21 01:37 pm UTC (link)
	Out of curiosity, why are you implementing a bug? Shouldn't you be fixing it? ;) (Reply to this) (Thread) (Hide 2 comments) (Show 2 comments)

	no subject cesy 2009-09-21 01:40 pm UTC (link)
	I am implementing a solution to the bug. You didn't see anything else ;) (Actually, I think it's because it's actually a new feature rather than a bug, so I was thinking of implementing the feature, but all new features get put in Bugzilla and treated just like bugs from then on.) (Reply to this) (Thread from start) (Parent)

	no subject pauamma 2009-09-23 01:22 pm UTC (link)
	Out of curiosity, where do you think bugs come from? A stork? :-) (Reply to this) (Thread from start) (Parent)

(15 comments) - (Post a new comment)
(Flat) (Top-level comments only)