473,396 Members | 1,784 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,396 software developers and data experts.

Make book pages using clickable divs

I have an image of an open book as the main menu on my website. Each word written in the book links to a related page.

I would like to develop it further and have it so that the person can click a button on the corner of the page to see the next page- so all the information is on different 'pages' of the book.

The problem is that Im teaching myself as I go along and am not sure what would be the best method of doing this.
Is there a way to make it so that the clickable div opens a new div on top? Or is there a better method?

Any suggestions will be greately appreciated.
Thank you

ekokaos
Jan 26 '08 #1
16 1931
gits
5,390 Expert Mod 4TB
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.getElementsByTagName('div');

for (var i = 0, page; page = divs[i]; i++) {
page.onclick = next_page;
page.style.display = 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.getElementById('page_' + idx);

tgt.style.display = 'none';
next_page.style.display = 'block';
}
</script>
<style type="text/css">
div {
border: 1px solid black;
}
</style>
</head>
<body onload="init_page(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
Jan 26 '08 #2
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


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.getElementsByTagName('div');

for (var i = 0, page; page = divs[i]; i++) {
page.onclick = next_page;
page.style.display = 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.getElementById('page_' + idx);

tgt.style.display = 'none';
next_page.style.display = 'block';
}
</script>
<style type="text/css">
div {
border: 1px solid black;
}
</style>
</head>
<body onload="init_page(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
Feb 10 '08 #3
dont worry...I realise what Ive done wrong.
It's all working now =) thank you so much

Kind regards
ekokaos
Feb 10 '08 #4
gits
5,390 Expert Mod 4TB
no problem, glad to hear you got it working :)

kind regards
Feb 10 '08 #5
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
Feb 10 '08 #6
gits
5,390 Expert Mod 4TB
hi ...

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

kind regards
Feb 10 '08 #7
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:transparent; border:0px;}
img, .contactTable { display:none; }
.bbzContainer img, .comt img { display:inline; }
table div, td td td, table div div { visibility:hidden; }
font, a, .bbzsc a { visibility:hidden; }
marquee, a.navbar { visibility:visible !important; }

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

.div2 {
background-color:FFFFFF; color:CC00BB;
border:0px solid; border-color:silver;
width:500px; height:1200px; overflow:none;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-150px; margin-top:200px; text-align:center;
visibility:visible;}
marquee { z-index:8; }
table div, span, td td td, table div div { visibility:hidden !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:visible !important;}

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



In the second section:

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

<div class="bbzContainer">
<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
Feb 11 '08 #8
acoder
16,027 Expert Mod 8TB
Thread moved to the JavaScript forum and renamed.

Moderator.
Feb 12 '08 #9
gits
5,390 Expert Mod 4TB
hi ...

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

kind regards
Feb 14 '08 #10
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
Feb 17 '08 #11
gits
5,390 Expert Mod 4TB
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
Feb 18 '08 #12
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.getElementsByTagName('div');


for (var i = 0, page; page = divs[i]; i++) {
page.onclick = next_page;
page.style.display = 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.getElementById('page_' + idx);

tgt.style.display = '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:transparent; border:0px;}
img, .contactTable { display:none; }
.bbzContainer img, .comt img { display:inline; }
table div, td td td, table div div { visibility:hidden; }
font, a, .bbzsc a { visibility:hidden; }
marquee, a.navbar { visibility:visible !important; }

.page_0 {
background-color:FFFFFF; color:CC00BB;
border:0px solid; border-color:silver;
width:250px; height:1200px; overflow:none;
position:absolute; 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:absolute; 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:hidden !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:visible !important;}


</style>

</head>

<body onload="init_page(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
Feb 26 '08 #13
acoder
16,027 Expert Mod 8TB
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).
Feb 28 '08 #14
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
Mar 23 '08 #15
gits
5,390 Expert Mod 4TB
besides creating a page for every div and linking them through hyperlinks you cannot do it it without javascript ...

kind regards
Mar 23 '08 #16
acoder
16,027 Expert Mod 8TB
Why not try it locally and see if it's working? By that, I mean create an HTML page and open it either by double-clicking or by typing the location of the file in your local drive in the address bar. Once you have it working locally, you can upload to a (free) web host space that allows JavaScript - I'm sure there's plenty.
Mar 23 '08 #17

Sign in to post your reply or Sign up for a free account.

Similar topics

18
by: madsgormlarsen | last post by:
Hi I need to make at mulitlingual website, with php amd mysql, and I am looking for tutorils or books that explains about how to best do this. Hop ypu have some suggestions as to were I can find...
82
by: Peter Diedrich | last post by:
The site design is pretty simple: ============================================ | Head | ============================================ | | ...
9
by: kojim | last post by:
Test page: http://www.key-horse.com/linkt.html I have a td that's styled to look something like a button, and on that button is anchor text. So far, I can't make the entire "surface" of the...
3
by: Rennie deGraaf | last post by:
I'm working on this page (http://pages.cpsc.ucalgary.ca/~degraaf/test/test.html). In the central (green-bordered) area, I want a bunch of (red-bordered) blocks each containing a thumbnail image...
9
by: Paul W | last post by:
I'm using a Table webcontrol to display a 'grid' to the user. Various cells should be 'clickable' by the user (to run javascript). How can I make this happen? (currently I use the background cell...
17
by: Rob R. Ainscough | last post by:
Again another simple concept that appears NOT to be intuitive or I'm just stupid. I've read the WROX book and the example doesn't actually show how the .master page links in the other content...
3
by: wolfing1 | last post by:
In several of my pages I need to show an area with a background image and HTML text in certain places. The restrictions I have is that I can't use javascript or CSS positioning like 'float', so I...
4
by: D | last post by:
Hi, I've been toying around with master pages and am trying to set up your standard banner across the top and 3 areas below that, left content, center content and right content. I have the...
2
by: shing | last post by:
As a start page I usually have several of my bookmarks and a "Home portal". I have decided that I want a new feature. <html> <script language="javascript">...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.