473,804 Members | 3,424 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Make book pages using clickable divs

8 New Member
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
16 1971
ekokaos
8 New Member
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 Recognized Expert Moderator Expert
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
ekokaos
8 New Member
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
Feb 26 '08 #13
acoder
16,027 Recognized Expert Moderator MVP
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
ekokaos
8 New Member
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 Recognized Expert Moderator Expert
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 Recognized Expert Moderator MVP
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
2987
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 information about this. Mads
82
10727
by: Peter Diedrich | last post by:
The site design is pretty simple: ============================================ | Head | ============================================ | | | | | | | | | left | center | right | | | | | | | | |
9
13042
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 button be a part of the anchor. That is, I would like to click on /any/ place on the td/button surface and take the link. As it is now, the only clickable area is in the text itself.
3
3687
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 and some text. The blocks must be of fixed, equal size. (Obviously, I'll have to limit the amount of text to fit this size.) The text must be positioned below the image. Within the central area, I want these blocks to flow like text; ie, for...
9
2721
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 color to indicate to the user which cells are clickable). (I think I could achieve this by adding an image (with attached hyperlink) to each clickable cell but since this is a large table (7 x 30) I think this might be a slow solution). ...
17
3166
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 pages? Kinda sorta a critical point no? Am I missing something? Rob. P.S. the day I find a book that actually is useful rather than just a
3
8729
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 did it with a table. I then tried <a href="..."><table ...>...</table></a and it worked in Firefox but not in IE. I then found out that <tableshouldn't go inside <a>. So I put the <a href="..."inside every <tdin the table, but it doesn't cover...
4
1481
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 banner part being the top level master page and the left content be nested master page named subMaster.master. In this I have 3 div's that I've named
2
1350
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"> onclick="document.location.href="about:config" </script> </html>
0
9710
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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
10593
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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10340
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
9163
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7626
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5527
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
4304
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
3830
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3000
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.