Slyck.com
 
Slyck Chatbox - And More

Web-programming related

A place for developers and programmers of file-sharing software to discuss issues.
Forum rules
PLEASE READ BEFORE POSTING: Slyck Forum Rules

Web-programming related

Postby 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.
TDO
 
Posts: 1715
Joined: Mon Jul 26, 2004 4:03 am

use DHTML

Postby 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
A common mistake that people make when trying to design something
completely foolproof is to underestimate the ingenuity of complete fools. - Douglas Adams
dinosaur1972
 
Posts: 13
Joined: Mon Sep 13, 2004 10:08 am

Postby 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.
TDO
 
Posts: 1715
Joined: Mon Jul 26, 2004 4:03 am

Postby 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.
Artie
 
Posts: 987
Joined: Tue Mar 23, 2004 9:50 pm

Postby 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 :).
TDO
 
Posts: 1715
Joined: Mon Jul 26, 2004 4:03 am

Postby 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>
Artie
 
Posts: 987
Joined: Tue Mar 23, 2004 9:50 pm

Postby 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.
TDO
 
Posts: 1715
Joined: Mon Jul 26, 2004 4:03 am

Postby 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.
Artie
 
Posts: 987
Joined: Tue Mar 23, 2004 9:50 pm

Postby 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.
[code:1]char str[20];
scanf("%19s", &str);
if (!strcmpi(str, "Hello, world!"))
printf("Hello, programmer.\n");[/code:1]
User avatar
Ooble
 
Posts: 2372
Joined: Sat Dec 06, 2003 9:33 am
Location: Wouldn't you like to know, SlyckTom? Just so you can sell my address to the RIAA? No chance.

Postby 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..).
TDO
 
Posts: 1715
Joined: Mon Jul 26, 2004 4:03 am

Postby iNaNimAtE » Thu Sep 16, 2004 8:02 pm

http://javascriptkit.com

You can get 2 scripts of there.
Attention P2P goers! Learn how to tag your media!
User avatar
iNaNimAtE
 
Posts: 5108
Joined: Mon Jul 12, 2004 2:41 pm
Location: Olà.

Postby 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 :).
TDO
 
Posts: 1715
Joined: Mon Jul 26, 2004 4:03 am

Postby 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.
Attention P2P goers! Learn how to tag your media!
User avatar
iNaNimAtE
 
Posts: 5108
Joined: Mon Jul 12, 2004 2:41 pm
Location: Olà.

Postby 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 ...
TDO
 
Posts: 1715
Joined: Mon Jul 26, 2004 4:03 am

Postby 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.
Attention P2P goers! Learn how to tag your media!
User avatar
iNaNimAtE
 
Posts: 5108
Joined: Mon Jul 12, 2004 2:41 pm
Location: Olà.

Postby 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">&nbsp;</td>
<td align="left" valign="middle" width="475" style="border-top: 1 solid #C0C0C0">

<p><b><font face="Verdana" size="2">&nbsp;&nbsp; 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">&nbsp;</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">&nbsp;</td>
</tr>
</table>

<p>&nbsp;</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 :).
TDO
 
Posts: 1715
Joined: Mon Jul 26, 2004 4:03 am

Postby 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.
Attention P2P goers! Learn how to tag your media!
User avatar
iNaNimAtE
 
Posts: 5108
Joined: Mon Jul 12, 2004 2:41 pm
Location: Olà.

Postby 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 !.
TDO
 
Posts: 1715
Joined: Mon Jul 26, 2004 4:03 am

Postby 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.
User avatar
DepecheNode
 
Posts: 1497
Joined: Tue Jul 22, 2003 5:38 am
Location: On Your Ignore List

Postby 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.
TDO
 
Posts: 1715
Joined: Mon Jul 26, 2004 4:03 am

Postby 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.
[code:1]char str[20];
scanf("%19s", &str);
if (!strcmpi(str, "Hello, world!"))
printf("Hello, programmer.\n");[/code:1]
User avatar
Ooble
 
Posts: 2372
Joined: Sat Dec 06, 2003 9:33 am
Location: Wouldn't you like to know, SlyckTom? Just so you can sell my address to the RIAA? No chance.

Postby 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.
TDO
 
Posts: 1715
Joined: Mon Jul 26, 2004 4:03 am

Postby Ooble » Fri Sep 17, 2004 6:41 pm

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

And I also suggest you run your site through the W3C Markup Validator.
[code:1]char str[20];
scanf("%19s", &str);
if (!strcmpi(str, "Hello, world!"))
printf("Hello, programmer.\n");[/code:1]
User avatar
Ooble
 
Posts: 2372
Joined: Sat Dec 06, 2003 9:33 am
Location: Wouldn't you like to know, SlyckTom? Just so you can sell my address to the RIAA? No chance.


Return to Developers Forum

Who is online

Users browsing this forum: No registered users and 0 guests

© 2001-2008 Slyck.com