Recent Topics

1 May 14, 2007 14:04    

I hope someone knows how to do this.

I am creating an FAQ with a show-hide javascript function on a per-question basis. It's working fine now.

I have, toggleAllOff(); and toggleAllOn();

Now I want to have a single link for both On and Off..
so, I have now functions to change the text from one message to another:

Show All answers <--> Hide All answers.

The problem now is, I can't figure out how to pass or change the current toggleAllOff() function to become toggleAllOn(). I created other functions for this swapping but it won't work either.

Here's the code:


<script>
//---------------------- code for swap text
function swapText(p_element, p_text)
{
  if (p_element.altText)
  {  // *** If the element has already has its text swapped ***
     var altText = p_element.altText; // *** Get the alternate text ***
     p_element.altText = p_element.innerHTML; // *** Save the current text ***
     p_element.innerHTML = altText; // *** Display the alternate text ***
  }
  else
  { // *** The element has not yet had its text swapped ***
    p_element.altText = p_element.innerHTML; // *** Save the current text ***
    p_element.innerHTML = p_text; // *** display the text passed into this function ***
  }
}
</script>

<script language="JavaScript">
function makeText(txt)
{
	s0="<span>"+txt+"</span>";
	return s0;
}
</script>

The HTML part:


								<span onclick="toggleAllOff(),swapText(this,makeText('Hide All answers'))">
									<script>
										toggleAllOn();
										document.write(makeText('Show All answers'));
									</script>
								</span>

The codes above (the swapping code) wasn't made by me, and the author don't know how to do it either (we have a similar objective). My toggleAllOn/toggleAllOff is different from his, and so far, my method is one-step closer to the actual target result. Coz the first toggleAll which is toggleAllOff() (as shown above) works, it's the toggleAllOn() that will not work, regardless of what method or style I try (example, creating a new function).

Dunno what else to do :p or where or what I'm doing wrong. The code I posted above is where I start, or the basic 'working' code (except toggleAllOn() of course).

Thanks and hope to hear from someone about this.

Regards,
JCuneta.

PS
I don't mind doing it PHP way if you have a different approach :p this is not really related to b2e, but can be used for it.

2 May 14, 2007 14:30

<span onclick="toggle();">Toggle answers</span>
.....
<p class="toggle">this is an answer</p>
<p class="toggle">this is an answer</p>
<p class="toggle">this is an answer</p>
<p class="toggle">this is an answer</p>
<p class="toggle">this is an answer</p>
<p class="toggle">this is an answer</p>
<p>This isn't an answer</p>
<script type="text/javascript">
function toggle()
{
	var allP = document.getElementsByTagName( 'p' );
	for( i = 0; i < allP.length; i++ )
	{
		if( allP[i].className == "toggle" )
		{
			allP[i].style.display = ( allP[i].style.display == "none" ? "block" : "none" );
		}
	}
}
toggle();
</script>

¥

3 May 14, 2007 14:47

Thanks.

But I'm looking for the Show/Hide All "single text" for the users who prefer everything opened or closed at once/one click.

I have:
Q:
A:

Q:
A:

.
.
.

The hiding of Q on click is all-set, as well as the parent category of the questions is set as well.

I can achieve Show All and Hide All fine if they are "two" separate links, as "Show All" and "Hide All". But if I merge them, I'm stuck with just being able to use one toggle function, so its either Show All only, or Hide All only.

I'm using DL, DT, DD btw, using getElementsByTagName as well.

...

I may have misunderstood your reply though...

(lol.. I'll take a sleep first... mind stopped... )

4 May 14, 2007 14:49

you just need to change this line to the correct tag name ( assume it's <dd> )
var allP = document.getElementsByTagName( 'p' );
to
var allP = document.getElementsByTagName( 'dd' );

to alternate the text in the span isn't very much more work

¥

6 May 14, 2007 18:08

personman wrote:

[url=http://www.jquery.com]jQuery[/url] can make this easier.

The overbloated library wrote:

Download jQuery (uncompressed) 55kb Great for testing, learning and development

The slightly slimer library that's still huge wrote:

Download jQuery (compressed) 19kb Great for production use

the testfile including html wrote:

650 bytes (650 bytes)

;)

¥

7 May 14, 2007 18:19

Yep, those 18.5 extra kb may well cause the page to take 0.0001 second longer to load. But it will only be the first time, because it will be cached. For b2evolution it won't even be an issue, because it will probably already be loaded (once it's included in the install and called by other plugins). Meanwhile, you've spent time writing functions that jQuery already has (and the jq version has already been tested with all the browsers) and now you may be adding your code on top of jQuery. Not to mention the fact that you've now cluttered up your page with onclicks when jquery could have done that all without touching anything in the body tag.

Laibcoms, I highly recommend that you check it out. There are some tutorials that give you a feel for what's possible. If you hadn't heard, jQuery is going to be included with b2evolution starting in the next version. YaBBa's just being stubborn. ;)

8 May 15, 2007 00:48

cool... thanks!!

will look at YaBBa's and jQuery.

Now I wonder where in b2e jQuery will be used... I hope Categories :p it gets too long hehehe :p

10 May 15, 2007 10:06

personman wrote:

YaBBa's just being stubborn. ;)

lol :p.

My main problem with using jquery, apart from the fact that you need to relearn a language just to be able to use the language, is that you become reliant on it for every bit of coding that you do and most of the time you really wouldn't want 99% of it's functionality.

This means that you inccur a huge bandwidth overhead for no gain, and on heavy hitter sites that can be enough to kill your server ;)

¥

11 May 15, 2007 16:16

Laibcoms,
I emailed you another stylesheet switcher tutorial before I saw this post. Yes, there are other libs. Prototype and MooTools are two other well-regarded ones. jQuery takes a different approach in a couple of ways. It's easier to use (a subjective judgment, granted) and it is lighter. YaBBa makes a good point about bandwidth, but jQuery tries to use as little as possible and deliver as much functionality as possible at the same time. I think it strikes a good balance. And there are loads of plugins for jquery that let you do even more.

If you're already a js expert like YaBBa, then maybe there's no reason to learn JQ. I was a js noob, so there wasn't much RElearning for me.

And I will say it again: When you have an external script like jQuery with your pages, it's going to be cached most of the time, greatly reducing the bandwidth usage. I'm not lucky enough to be involved with a site that gets that many hits, so I've not dealt with the issue yet.

I hope to rewrite several of my plugins (youtube, democracy poll, star rating) to use JQ once it's in core. So, for anyone using those plugins, JQ will already be served with the page. If we all use the same lib then things will work better.

/me climbs down from soapbox.

12 May 15, 2007 16:54

Say there friend: if yer not gonna use that soap box wouldja mind if I did?

As long as it's not needed to deliver content to the visitor I'm cool with whatever works. IF b2evolution, or the youtube plugin, ever reaches a point where the visitor must trust javascript from my domain then I'll stop upgrading. Javascript, though a powerful client-side scripting language, can NOT be something a web depends on because people should NOT be expected to automagically trust everyone one and their webmaster to write nice javascripts.

I LIKE javascript. The single most popular page of all time in my web is a javascript page. It's FUN, but since it can be used maliciously smart browsers let people disable it. When it's disabled how does your web look and work? That's my issue with needing it on the front end: it won't work if javascript is disabled. Not that I'm saying b2evo or the youtube plugin are not trustable!!! But who will know when they visit my site that they should trust me because I use trustworthy drivers for my pages?

Wow that was fun. I sure do appreciate getting to use your mighty fancy soap box, but it's time for me to be movin' on.

13 May 15, 2007 17:02

I agree with you for the most part. The starrating plugin works without javascript, as does Democracy. My youtube toolbar doesn't, but the renderer does, so people can still post a video, they just have to paste the id into a [youtube][/youtube] tag.

Sorry to keep beating the jQuery drum, but it makes it easier to write gracefully degrading code, imo. And it keeps most of the script up in the head or in external files, so your page isn't littered with onclicks and the like.

As a general rule, it's best to make a page work correctly without JS, then use JS to make it flashier, easier to use, or whatever.

14 May 15, 2007 17:32

Yep, thanks all.
I tested various setup (finally got it working with different setup), and I also experimented with jQuery. I noticed that it doesn't really change the source code itself even on the end-user, which is interesting.

I guess, it is W3C's DOM?

Im just amazed how far other areas of WebDev has gone, and I'm really left far behind.... my last update to the standards (except XHTML and CSS that is) was 2000.

Before that, no one ever thought of the possibility of today's coding and scripting... Im just simply amazed, have a lot of catching-up to do.

With everything moving so fast, I guess its hard to say one has mastered something... was enjoying JS 10 years ago, but today's JS is too far already :p

Separation of this and that... O_O things are getting neater and neater.

Now my boss should treat me for a food lolz, for giving him what he wants (its not even in my job description to develop sites for our company...)

I can finally take some sleep... and work on the skins again :p and the stylesheet switcher hehe..

thanks all.

yep, I agree with Yabba, I don't know how it was done, but the result was achieved by jQ. Though the other worked fine, I'll still with jQ for now to make things easier hehe... while I'm catching up...

15 May 15, 2007 20:16

Now that the [url=http://wonderwinds.com/linkblog.php/2007/05/10/09_f9_11_02_9d_74_e3_5b_d8_41_56_c5_63]lemming[/url]'s relinquished the soapbox I think I'll have a play ;)

[soapbox]personman wrote:

I'm not lucky enough to be involved with a site that gets that many hits, so I've not dealt with the issue yet.

Sheesh, stop [url=http://www.askoxford.com/concise_oed/whinge]whinging[/url] bitch, yer blog gets far more hits than mine ..... mind you, from looking at your [url=http://brendoman.com/dbc#search_cloud]searchcloud[/url] ( which doesn't rely on js like a certain [url=http://randsco.com/]unamed yank[/url]'s does .... not even jquery :D ) you really need to stop posting about heartbreak songs and cheer up :D

Having to learn jquery just to be able to code in js isn't what gets up my nose the most, hell, it's not even the bandwidth, or even the fact that it encourages lazy coders to not learn the underlying language that they're using ......

My problem with jquery, et al, is it's missuse. Apart from the obvious lack of degradation that things like that encourage, it's a bit like websites that require I use flash just so I can see a rollover effect that could be replicated with css and a simple image.

Or shopping carts that *tilt* because I told them where to shove their :cookie:

Now, I just know yer gonna be thinking "but it does degrade, it only adds things to the DOM after the page is rendered" ..... etc, but it's not what jquery is built to do, it's what the *cough*[url=http://www.innervisions.org.uk/babbles/2006/05/27/so_you_think_you_re_a_webmaster]webmasters[/url]*cough* do with it, and most of them wouldn't know degradtion if it hit them in the face with a wet kipper ... mind you, their websites don't tend to render in FF anyway, so not great loss I supose ;)

Anyway, I think this soapbox should have far more peoples shoeprints on it than just ours. So I'll just dust it off and let the next person stand up ;)
[/soapbox]

.... btw
touche wrote:

dan_acc: IIS user?

I'm glad I called you a bitch now huh? ;)

¥

16 May 15, 2007 20:28

I've learned plenty of js. jq helps toward that; it doesn't hinder. It did ease me in and let me start doing very cool things right off the bat. Decide for yourself which is better:

Plain ole javascript:


var el = document.getElementById('someid');
el.innerHtml = 'Some new text';
el.style.display = 'block';

jQuery:


$('#someid').html('Some new text').show();

If you like the first way better, then go for it. I find the second way easier to remember, quicker to code and easier to maintain and expand. But YaBBa's doesn't know because he's never even tried jQuery.

[url=http://jquery.com/blog/2006/08/20/why-jquerys-philosophy-is-better/]More about jQuery's philosophy[/url]

17 May 15, 2007 20:46

Urm, let me think .... "19k of js to do a simple text replacement or ....?" bugger, is bytes less than kilobytes, I can never remember :roll:

Hell, I'm blonde I'll vote for jquery :|

¥

18 May 15, 2007 20:53

Yes, you make a brilliant point. If that was the only time you used it on the page, then you've wasted some bandwidth. I'm sorry. /me deletes jquery from b2evolution cvs.

Or, maybe I was just giving a simple example. Multiply that code and time savings over 100 lines of complicated js code and it's much more significant. I even picked an example that makes normal js look good. What if we wanted to select all elements of a certain class rather than of an id? Here's the jquery code to select them all and then hide them:

$('.someclass').hide();

How would you do it?

19 May 15, 2007 21:00

Remind me to post my classname js, pretty sure it'd be possible within a forum posts character limits. I guess you'd have to attach jquery as a file to show it's source though huh? :roll:

¥

20 May 15, 2007 21:06

ok, so the truth comes out. You've got a bag of homegrown functions to help you do tasks like this one. When you run up against a task you have to write the function, if you haven't before, then include it in the document. You'll get up to 19k pretty quick that way and you'll waste hundreds our hours trying to keep track of it all. Someone has already written one library that replaces most or all of your functions, and they've tested it in all the browsers.

You should really be writing web pages in machine code, a web server and interpreted language like php are too much overhead, aren't they?

21 May 16, 2007 10:13

personman wrote:

ok, so the truth comes out. You've got a bag of homegrown functions to help you do tasks like this one. When you run up against a task you have to write the function, if you haven't before, then include it in the document. You'll get up to 19k pretty quick that way and you'll waste hundreds our hours trying to keep track of it all. Someone has already written one library that replaces most or all of your functions, and they've tested it in all the browsers.

Lol, I'm not that organised :P

Whilst the various bits and pieces of js I use on sites might total more than 19k I don't think I have a single site that uses anywhere remotely close to that much js. They each just have the js they require to function without all the extraneous code. ;)

personman wrote:

You should really be writing web pages in machine code, a web server and interpreted language like php are too much overhead, aren't they?

Lol ahh the good old days. Machine code rules ;)

¥

22 Feb 25, 2008 18:33

Maybe this is a bit of a holy war. But I still maintain that you're wrong. If I'm making a bunch of plugins for b2evolution, the ability for all of them to share one js library is a big help.

23 Feb 25, 2008 18:38

Historical convictions :

Ronald Regan will make a great president
George Bush will make a great president

at least they shared the same office :|

¥


Form is loading...