Need help on javascript programming for blogger

Gordonator

21 Apr 08, 09:36

hi,

i will like to seek expertise advice on some javascript programming for my blog.

i'm using blogger and sometimes i will post quite a lot of photos of my figures thus making the page very long.

blogger doesn't come with the option to jump to another page within the same post so i will like to learn how to hide the content instead.

for example,

paragraph 1

click here to continue reading

paragraph 2

paragraph 3

paragraph 4

click here to hide

so what i want is by default only paragraph 1 will show on the blog, when visitors click on "click here to continue reading" paragraph 2 to 4 will show up. at the bottome will be "click here to hide"

any advices for this is greatly appreciated.

GIB

21 Apr 08, 10:48

Use div or span to segregate the parts.

E.g.

paragraph one stuff

</div>

paragraph two stuff

</div>

paragraph three stuff

</div>

function doHide() {

var x=document.getElementsByTagName("div");

for (y = 0; y < x.length; y++) {

if (x[y].id.indexOf("para") == 0) {

x[y].style.display = "none";

}

function doShow(myid) {

if (document.getElementById("para" + myid)) {

document.getElementById("para" + myid).style.display = "";

}

</script>

Xcert

21 Apr 08, 11:42

since we are on the topic of javascript/java...anyone knows of any good free webhosting server that allows the use of *.java files?

Gordonator

21 Apr 08, 13:23

Originally posted by GIB:

Use div or span to segregate the parts.

E.g.

<div id="para1">

paragraph one stuff

<a href="javascript:doHide();doShow(2);">Next</a>

</div>

<div id="para2" style="display: none;">

paragraph two stuff

<a href="javascript:doHide();doShow(3);">Next</a>

</div>

<div id="para3" style="display: none;">

paragraph three stuff

</div>

<script language="Javascript">

function doHide() {

var x=document.getElementsByTagName("div");

for (y = 0; y < x.length; y++) {

if (x[y].id.indexOf("para") == 0) {

x[y].style.display = "none";

}

}

}

function doShow(myid) {

if (document.getElementById("para" + myid)) {

document.getElementById("para" + myid).style.display = "";

}

}

</script>

i tried it on a text file and converted it to a html it works. but when i tried on blogger it doesn't work. :-(
the hide function also doesn't work. :-(

below is my coding, please help to look through it and advice me on the coding for the show and hide.

----------------------------------------------------------------------------------------------------------

paragraph one stuff <- to be displayed always

<a href="javascript:doHide();doShow(2);">Click here to read more</a>

</div>

paragraph two stuff <- to hide until until users click to open

</div>

function doHide() {

var x=document.getElementsByTagName("div");

for (y = 0; y < x.length; y++) {

if (x[y].id.indexOf("para") == 0) {

x[y].style.display = "none";

}

function doShow(myid) {

if (document.getElementById("para" + myid)) {

document.getElementById("para" + myid).style.display = "";

}

</script>

where to put the "click here to hide"?

GIB

21 Apr 08, 14:36

<html>

<body>

<div>

paragraph one stuff <- to be displayed always

<a href="javascript:doShow(2);">Click here to read more</a>

</div>

paragraph two stuff <- to hide until until users click to open

paragraph three stuff <- to hide until until users click to open<br>

paragraph four stuff <- to hide until until users click to open<br>

<a href="javascript:doHide(2);">Click here to hide</a>

</div>

</body>

</html>

function doHide(myid) {

if (document.getElementById("para" + myid)) {

document.getElementById("para" + myid).style.display = "none";

}

function doShow(myid) {

if (document.getElementById("para" + myid)) {

document.getElementById("para" + myid).style.display = "";

}

</script>

Gordonator

21 Apr 08, 14:50

THANKS GIB! it works! ^_^

but only on notepad but not on blogger. any ideas how to slove it?

GIB

21 Apr 08, 14:54

I just saw some other blog and they mentioned something about Javascript on blogger.

If you have convert line breaks set to "YES" then you have to put in the javascript codes without carriage returns else you get br on all the new lines and that will break the code.

When publishing, u will get an error saying "tag is not allowed", check the box that says stop reporting errors for this post and publish again. It should work now.

Gordonator

21 Apr 08, 16:17

thanks GIB but i still can't get it to work. i have already taken out all the carriage returns.

<div>

paragraph one stuff <- to be displayed always

<a href="javascript:doShow(2);">Click here to read more</a>
</div>
<div id="para2" style="display: none;">

paragraph two stuff <- to hide until until users click to open

<a href="javascript:doHide(2);">Click here to hide</a>
</div>
<script language="Javascript">
function doHide(myid) {if (document.getElementById("para" + myid)) {document.getElementById("para" + myid).style.display = "none";}}
function doShow(myid) {if (document.getElementById("para" + myid)) {document.getElementById("para" + myid).style.display = "";}}
</script>

GIB

21 Apr 08, 17:45

I have just tested and mine worked. Just make sure <script> to </script> is in one line.

Gordonator

21 Apr 08, 23:20

GIB it works!!!! THANKS SO MUCH!!! already implemented it on my blog. the <script> to </script> must be in one line.

i must remember to treat u lunch next time we meet. ^^

anyway can i bother u for one last thing? when people click to read more then click hide, the page stays at the same place. is it possible to code it so that it go back to the top of paragraph one?

GIB

22 Apr 08, 09:29

Change this <a href="javascript:doHide(2);">Click here to hide</a> to

<a href="javascript:doHide(2);doScroll(1);">Click here to hide</a>

and the first div put id="para1".

Then inside the <script></script> add another function called doScroll.

function doScroll(myid) {
if (document.getElementById("para" + myid)) {
document.getElementById("para" + myid).scrollIntoView(true);
}
}

Gordonator

22 Apr 08, 12:51

Thanks again GIB! it works.

if u need anything from me just let me know. i owe u one.

purpledragon84

22 Apr 08, 13:47

aiseh man.. yuan lai GIB is java pro.. i thot he put up jokes nia.. hahaha..

Gordonator

22 Apr 08, 20:10

GIB, i have already credited $6969 into your account.