Web-programming related

by **TDO** » Mon Sep 13, 2004 9:55 am

I wanted to do something but I have no idea how to do it or where to begin search the information I need.

Example :

Title1

text
text
text

Title2

text
text
text

Basically what I want is to have

Title1
Title2

and the "text" to be "opened up" only when the title is clicked .. so if a person clicks on title1 it will be :

Title1

text
text
text

Title2

Any suggestions ? I do not dig web programming so I don't even know if it's possible to do in html alone or is there gonna be a need in some wild java skills, any input, or maybe suggestions for similiar function would be appritiated.

by **dinosaur1972** » Mon Sep 13, 2004 10:14 am

You'll want to use dynamic HTML to accomplish this. Basically a couple of javascript functions that do the displaying and hiding, and then add these to the onclick events of your headings.

Here's a terrific reference. Check it out and view the source code for it.
http://www.jsr.communitech.net/expheaders.htm

by **TDO** » Mon Sep 13, 2004 10:28 am

Thanks a lot, I'm pretty much clueless when it comes to webdesign .. and I refuse to use programs to do it .. well, besides NotePad

.

Thanks for the help, I'll post how it went once I implement it.

by **Artie** » Mon Sep 13, 2004 10:45 am

Hi, I had a little free time on my hands, so I decided to rig up a quick JS program.

*****************************
<html>
<body>

<div onclick="Title1.innerHTML='text<br>text<br>text'" style="cursor:hand">Title1</div>

<table>
<td id="Title1">

</td>
</table>

<br>

<div onclick="Title2.innerHTML='text<br>text<br>text'" style="cursor:hand">Title2</div>

<table>
<td id="Title2">

</td>
</table>

<br>

<div onclick="Title3.innerHTML='text<br>text<br>text'" style="cursor:hand">Title3</div>

<table>
<td id="Title3">

</td>
</table>

</body>
</html>
*****************************

Lemme know if you want some changes to it.

by **TDO** » Mon Sep 13, 2004 11:01 am

You are too kind

.

One change please (I feel bad asking) it does everything I wanted, however, I forgot to mention that I also wanted the text to "return" if the title is clicked another time ... ya know ?

Lol, thanks a lot, both of you

.

by **Artie** » Mon Sep 13, 2004 11:32 am

<html>

<body>

<div onclick="if (Title1.innerHTML==''){Title1.innerHTML='text<br>text<br>text'}else{Title1.innerHTML=''}" style="cursor:hand">Title1</div>

<table>
<td id="Title1">

</td>
</table>

<br>

<div onclick="if (Title2.innerHTML==''){Title2.innerHTML='text<br>text<br>text'}else{Title2.innerHTML=''}" style="cursor:hand">Title2</div>

<table>
<td id="Title2">

</td>
</table>

<br>

<div onclick="if (Title3.innerHTML==''){Title3.innerHTML='text<br>text<br>text'}else{Title3.innerHTML=''}" style="cursor:hand">Title3</div>

<table>
<td id="Title3">

</td>
</table>

</body>

<script language="javascript">

Title1.innerHTML="";
Title2.innerHTML="";
Title3.innerHTML="";

</script>

</html>

by **TDO** » Mon Sep 13, 2004 11:34 am

Elite.

Tell me - how much time did it take you to make it ? is it hard or is it just newb sort of thing ?

Thanks a lot, that will do really well on my site .. I have an anime page with reviews for like 60k

, it takes tons of space on the screen and the loading of the whole page is really slow .. though I dunno if it will make the loading faster ..

Thanks.

by **Artie** » Mon Sep 13, 2004 11:39 am

<humble>

Oh, hehe, it was nothing really.. just took a couple minutes to think about how to do it and a couple more minutes to put in practice.

</humble>

But the above code might not work with any other browser except for IE. I haven't tried it with any other browser... However, modern browsers such as Mozilla and Opera process webpages pretty closely to IE nowadays.

by **Ooble** » Thu Sep 16, 2004 6:08 pm

If you want fully-supported code, use the "display" style attribute. Simply put, change the attribute to "none" when you want to hide it, and "" when you want to show it. This should do it:

Code: Select all: function toggleTable (tbl) { var table = document.getElementById(tbl); if (table.style.display == "none") { table.style.display = ""; } else { table.style.display = "none"; } return true; }

Post back on how you go. And see if you can understand it before you use it.

by **TDO** » Thu Sep 16, 2004 6:25 pm

Kek, 10x ooble, but that won't work for me

- besides, I have already done what I wanted

- you can check the results in :

http://d4rk0ne.netfirms.com/anime.html

But it only works in Internet Explorer I belive .. (which is ok I guess..).

by **iNaNimAtE** » Thu Sep 16, 2004 8:02 pm

http://javascriptkit.com

You can get 2 scripts of there.

by **TDO** » Thu Sep 16, 2004 8:12 pm

There are tons of scripts there .. and since I don't understand much in all of that I'd like to use my "can you give 2 direct links please ?" card.

.

Thanks in ADVANCE,

TDO

.

by **iNaNimAtE** » Thu Sep 16, 2004 8:27 pm

Hehe...

http://javascriptkit.com/script/script2 ... ndex.shtml
And there's one more that I can't find. If you want it, I'll search for it.

by **TDO** » Thu Sep 16, 2004 8:42 pm

That script was pretty interesting - sure, if you can - when you can please do

.

Next thing that I will be begging for in slyck is going to be a way to automate updates

, hell, I've manually added like 200kb of text in the past 2 days, it ain't much fun ...

by **iNaNimAtE** » Thu Sep 16, 2004 9:01 pm

I can write a PHP script for you that will do it, but how do you want to do it? It can't type it out for you, you're still going to have to do it.

by **TDO** » Thu Sep 16, 2004 9:09 pm

Lol - here's a normal data entry into my site's news section - consider that there have been around 200k of data added, which took me around like 10 hours :

<table border="0" width="86%" cellspacing="0" cellpadding="0" background="bar01.jpg" height="21">

<td align="left" valign="middle" width="18" background="bar01.jpg" style="border-left: 1 solid #C0C0C0; border-top: 1 solid #C0C0C0"> </td>
<td align="left" valign="middle" width="475" style="border-top: 1 solid #C0C0C0">

<p><b><font face="Verdana" size="2">   News 15-09-2004</font></b></p>

<td align="left" valign="middle" width="43" background="" style="border-right: 1 solid #C0C0C0; border-top: 1 solid #C0C0C0"> </td></tr>

<td valign="top" colspan="3" bgcolor="#666666" style="border-left: 1 solid #C0C0C0; border-right: 1 solid #C0C0C0; border-bottom: 1 solid #C0C0C0">
<p style="margin-left: 6; margin-right: 6; margin-top: 6"><font face="Verdana" size="2">

<b><a HREF="http://www.msnbc.msn.com/id/5989661/">Private space planeâ€™s engine souped up</a></b>
<p></p>

"When SpaceShipOne screams skyward this month on a mission to win an international human
spaceflight competition, its rocket motor will be more powerful than ever, according to the
engine's builders."

<P></p>
</table>

<table border="0" cellspacing="0" cellpadding="0" width="86%">
<tr>
<td width="100%" background="cloudsbkgrd.gif" height="13" style="border: 1 solid #C0C0C0"> </td>
</tr>
</table>

<p> </p>

Above is a complete news update, the next update I do I copy paste the above, and then I change the date, change the name, change the links - and change the data ... it's excruciating - though my fingers are now doing ctrl +x, ctrl +c, ctrl +v VERY fast

.

To make onew such news post I need like 1-3 minutes, since I keep my source code tidy, I use backspace ~20-40 times per news update .. I think you get the idea ...

To check my news section :

http://d4rk0ne.netfirms.com/news/current%20news.html

Naturally, all my news come from rss feeds .. I choose those which I want to preserve for later review/ simply because they were good and then begin the copy/paste

.

by **iNaNimAtE** » Thu Sep 16, 2004 9:20 pm

Oh, I see. Yes, that's easy to do. When I get some time, I'll make you a script.

by **TDO** » Thu Sep 16, 2004 9:23 pm

You know, that makes me feel like a moron - the least you could do is say "well, gee, this is really tough - i'll see what I can do"

. hehe

Thanks A LOT !, really, those updates are making me nuts !.

by **DepecheNode** » Thu Sep 16, 2004 9:27 pm

TDO ---

See HERE... This guy has cool dynamic scripts, plus has wizards that write the script for you.

by **TDO** » Thu Sep 16, 2004 9:31 pm

Thanks as well DN

- it's 3:18 here .. I'm almost asleep, I'll check the site tommorow .. right now . must .. keep watching .. I, robot.

by **Ooble** » Fri Sep 17, 2004 12:13 pm

With that code I posted earlier, all you have to do is add it in the <head> in <script> tags. When you have your table:

Code: Select all: <table> <tr><td>Title 1</td></tr> <tr><td>Content</td></tr> <tr><td>Title 2</td></tr> <tr><td>Content</td></tr> <tr><td>Title 3</td></tr> <tr><td>Content</td></tr> </table>

You simply add onMouseUp="toggleTable('table#')" to the <td> tags of your headers, and id="table#" to the <tr> tags of your content. Like so:

Code: Select all: <table> <tr><td onMouseUp="toggleTable('table1')">Title 1</td></tr> <tr id="table1"><td>Content</td></tr> <tr><td onMouseUp="toggleTable('table2')">Title 2</td></tr> <tr id="table2"><td>Content</td></tr> <tr><td onMouseUp="toggleTable('table3')">Title 3</td></tr> <tr id="table3"><td>Content</td></tr> </table>

IF you want, I'll even explain how it works.

by **TDO** » Fri Sep 17, 2004 6:40 pm

Anyway - I checked all those automated news submitters .. nah, guys - most require php and sql and others just php ... and honestly ? it's too much for me to digest at the moment .. so thanks .. but I guess for now atleast I'll do it by hands ..

Thanks ooble for teh source code .. I MIGHT use it ... dunno .. thing is I already made the thing I wanted ... sure, it doesn't work for firefox .. but .. firefox currently is perhapes what ? 1% ? ok ok .. maybe 3%

.

Anyway, thank you all for the help .. right now I need time to go over all the resorces I have acquired thanks to you all and digest it.

by **Ooble** » Fri Sep 17, 2004 6:41 pm

I suggest you use it - it'll set a good example to the kiddies

And I also suggest you run your site through the W3C Markup Validator.

Web-programming related

Web-programming related

use DHTML

Who is online