Make book pages using clickable divs

**gits** · Jan 26 '08, 04:03 PM

hi ...

have a look at the following simple example, that switches to the next div when clicking the currently showed one :) may that helps with you problem or at least gives you an idea:

[HTML]<html>
<head>
<script type="text/javascript">
function init_page(page_ id) {
var divs = document.getEle mentsByTagName( 'div');

for (var i = 0, page; page = divs[i]; i++) {
page.onclick = next_page;
page.style.disp lay = page.id == 'page_' + page_id ?
'block' : 'none';
}
}

function next_page(e) {
if (typeof e == 'undefined') {
e = window.event;
}

var tgt = typeof window.event == 'undefined' ?
e.target : e.srcElement;

var idx = parseInt(tgt.id .match(/[^_]$/), 10) + 1;

var next_page = document.getEle mentById('page_ ' + idx);

tgt.style.displ ay = 'none';
next_page.style .display = 'block';
}
</script>
<style type="text/css">
div {
border: 1px solid black;
}
</style>
</head>
<body onload="init_pa ge(0);">
<div id="page_0">
content 1
</div>
<div id="page_1">
content 2
</div>
<div id="page_2">
content 3
</div>
<div id="page_3">
content 3
</div>
</body>
</html>
[/HTML]
kind regards

**ekokaos** · Feb 10 '08, 07:43 AM

Thank you, that sounds like exactly what Ive been looking for.
I'm a bit stuck tho, could you explain it to me?
I tried adding an image to each div to test whether it changed with each click but when I clicked on the first one the screen just goes blank?
Sorry, Im probably doing something increadibly stupid but Im a beginner and learning as I go.
Thanks

ekokaos

Originally posted by gits

hi ...

have a look at the following simple example, that switches to the next div when clicking the currently showed one :) may that helps with you problem or at least gives you an idea:

[HTML]<html>
<head>
<script type="text/javascript">
function init_page(page_ id) {
var divs = document.getEle mentsByTagName( 'div');

for (var i = 0, page; page = divs[i]; i++) {
page.onclick = next_page;
page.style.disp lay = page.id == 'page_' + page_id ?
'block' : 'none';
}
}

function next_page(e) {
if (typeof e == 'undefined') {
e = window.event;
}

var tgt = typeof window.event == 'undefined' ?
e.target : e.srcElement;

var idx = parseInt(tgt.id .match(/[^_]$/), 10) + 1;

var next_page = document.getEle mentById('page_ ' + idx);

tgt.style.displ ay = 'none';
next_page.style .display = 'block';
}
</script>
<style type="text/css">
div {
border: 1px solid black;
}
</style>
</head>
<body onload="init_pa ge(0);">
<div id="page_0">
content 1
</div>
<div id="page_1">
content 2
</div>
<div id="page_2">
content 3
</div>
<div id="page_3">
content 3
</div>
</body>
</html>
[/HTML]
kind regards

**ekokaos** · Feb 10 '08, 09:33 AM

dont worry...I realise what Ive done wrong.
It's all working now =) thank you so much

Kind regards
ekokaos

**gits** · Feb 10 '08, 10:51 AM

no problem, glad to hear you got it working :)

kind regards

**ekokaos** · Feb 10 '08, 03:11 PM

I currently use a div overlay model (with 2 divs) so that I dont have the constrictions of the default format that is provided.
Is there any way that I can intergrate this into it? By replacing one of the divs in my model with this code or puting it into an exisitng div?
Or could I turn this div into an overlay one?

Let me know if you need to see my existing code.

Thank you
and apologies for the continuous questions

**gits** · Feb 10 '08, 07:21 PM

hi ...

yes ... please post the code you actually use and explain a bit in more detail what you want to achieve ...

kind regards

**ekokaos** · Feb 11 '08, 07:04 PM

In the first section:

</td></tr></table></td></tr></table></td></tr></table></div>
<style type="text/css">
body {background-color:FFFFFF; background-image:none;}
td, .text, div, input {color:CC00BB !important;}
a {color:CC00BB !important;} img {border:0px;}
table, tr, td {background:tra nsparent; border:0px;}
img, .contactTable { display:none; }
.bbzContainer img, .comt img { display:inline; }
table div, td td td, table div div { visibility:hidd en; }
font, a, .bbzsc a { visibility:hidd en; }
marquee, a.navbar { visibility:visi ble !important; }

.div1 {
background-color:FFFFFF; color:CC00BB;
border:0px solid; border-color:silver;
width:250px; height:1200px; overflow:none;
position:absolu te; z-index:2; left:50%; top:0%;
margin-left:-450px; margin-top:200px; text-align:center;
visibility:visi ble;}

.div2 {
background-color:FFFFFF; color:CC00BB;
border:0px solid; border-color:silver;
width:500px; height:1200px; overflow:none;
position:absolu te; z-index:2; left:50%; top:0%;
margin-left:-150px; margin-top:200px; text-align:center;
visibility:visi ble;}
marquee { z-index:8; }
table div, span, td td td, table div div { visibility:hidd en !important; }
.bbzContainer div, .bbzContainer div font, .bbzContainer div a, .bbzContainer div div, .bbzContainer font a, .bbzContainer span, .bbzContainer div table a, .bbzContainer div table img, .bbzContainer div table font, .bbzContainer div table, .bbzContainer div table td, .comt, .comt td, .comt span, .comt a, .comt div {visibility:vis ible !important;}

</style>
<div style="display: none;"><table>< tr><td><table>< tr><td><table>< tr><td>

In the second section:

</td></tr></table></td></tr></table></td></tr></table></div>

<div class="bbzConta iner">
<div class="div1">
Content 1
</div>

<div class="div2">
Content 2
</div>
</div>

<div class="bbzsc">< table><tr><td>< table><tr><td>< table><tr><td>

I would like the second div to change when clicked so that it will switch between several divs (like the code you gave me) but need to keep it as an overlay model above the existing default format.
I just dont know how to combine them.
Any ideas?

Thank you

**acoder** · Feb 12 '08, 01:21 PM

Thread moved to the JavaScript forum and renamed.

Moderator.

**gits** · Feb 14 '08, 12:52 PM

hi ...

just give your divs the corresponding ids 'page_1' ... 'page_n' ...

kind regards

**ekokaos** · Feb 17 '08, 07:10 PM

So where do I put the new code part tho?
It still wont work togther, I know Im probably making some stupid mistake but I can't work out what =( so frustrating.
Any chance you could put the my existing code and your new one together for me?
Il understand if its too much work.

Thank you for all your help
eko

**gits** · Feb 18 '08, 01:01 PM

hi ...

as you can see the javascript code is placed between script-tags in the head of the page. now you just need to change the id's of the divs you want to play with and remove the visibility css then, since the script takes care of it through the init you have to call in the body onload ...

please post a page where you have tried that? actually it has to be ONE page to let it work as it is ...

kind regards

**ekokaos** · Feb 26 '08, 06:00 PM

Im sorry, I really dont understand. Im still new at this.
This is what it is atm...

[HTML] <html>

<head>

<script type="text/javascript">
function init_page(page_ id) {
var divs = document.getEle mentsByTagName( 'div');

for (var i = 0, page; page = divs[i]; i++) {
page.onclick = next_page;
page.style.disp lay = page.id == 'page_' + page_id ?
'block' : 'none';}}

function next_page(e) {
if (typeof e == 'undefined') {

e = window.event; }

var tgt = typeof window.event == 'undefined' ?

e.target : e.srcElement;

var idx = parseInt(tgt.id .match(/[^_]$/), 10) + 1;

var next_page = document.getEle mentById('page_ ' + idx);

tgt.style.displ ay = 'none';

next_page.style .display = 'block';}

</script>

<style type="text/css">

body {background-color:FFFFFF; background-image:none;}
td, .text, div, input {color:CC00BB !important;}
a {color:CC00BB !important;} img {border:0px;}
table, tr, td {background:tra nsparent; border:0px;}
img, .contactTable { display:none; }
.bbzContainer img, .comt img { display:inline; }
table div, td td td, table div div { visibility:hidd en; }
font, a, .bbzsc a { visibility:hidd en; }
marquee, a.navbar { visibility:visi ble !important; }

.page_0 {
background-color:FFFFFF; color:CC00BB;
border:0px solid; border-color:silver;
width:250px; height:1200px; overflow:none;
position:absolu te; z-index:2; left:50%; top:0%;
margin-left:-450px; margin-top:200px; text-align:center;
}

.page_1 {
background-color:FFFFFF; color:CC00BB;
border:0px solid; border-color:silver;
width:500px; height:1200px; overflow:none;
position:absolu te; z-index:2; left:50%; top:0%;
margin-left:-150px; margin-top:200px; text-align:center;
}

marquee { z-index:8; }
table div, span, td td td, table div div { visibility:hidd en !important; }
.bbzContainer div, .bbzContainer div font, .bbzContainer div a, .bbzContainer div div, .bbzContainer font a, .bbzContainer span, .bbzContainer div table a, .bbzContainer div table img, .bbzContainer div table font, .bbzContainer div table, .bbzContainer div table td, .comt, .comt td, .comt span, .comt a, .comt div {visibility:vis ible !important;}

</style>

</head>

<body onload="init_pa ge(0);">

<div id="page_0">

content 1

</div>

<div id="page_1">

content 2

</div>

<div id="page_2">

content 3

</div>

<div id="page_3">

content 3

</div></div>

</body>

</html>
[/HTML]

Im guessing thats completely wrong?
sorry again and thank you for persisting with my stupidity,

eko

**acoder** · Feb 28 '08, 07:27 AM

So what's not working? Note that you have an extra closing div tag on line 97. Also "content 3" appears (I know it's a test, but it could be confusing).

**ekokaos** · Mar 23 '08, 08:11 AM

sorry for late reply, have been away.

I tried it on myspace and they are blocking javascript =/ is there any other way to do it?

Also tried freewebs and it worked in the sense that it showed the different content when you clicked but wasnt in any format. They weren't in divs on the page they were just shown in the top left hand corner of the page.

Is there anyway to do it without javascript?
Thanks and sorry again.

eko

Make book pages using clickable divs

Make book pages using clickable divs

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment