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
16 1964 gits 5,390
Recognized Expert Moderator Expert
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
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.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
dont worry...I realise what Ive done wrong.
It's all working now =) thank you so much
Kind regards
ekokaos
gits 5,390
Recognized Expert Moderator Expert
no problem, glad to hear you got it working :)
kind regards
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 5,390
Recognized Expert Moderator Expert
hi ...
yes ... please post the code you actually use and explain a bit in more detail what you want to achieve ...
kind regards
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 16,027
Recognized Expert Moderator MVP
Thread moved to the JavaScript forum and renamed.
Moderator.
gits 5,390
Recognized Expert Moderator Expert
hi ...
just give your divs the corresponding ids 'page_1' ... 'page_n' ...
kind regards
Sign in to post your reply or Sign up for a free account.
Similar topics |
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
|
by: Peter Diedrich |
last post by:
The site design is pretty simple:
============================================
| Head |
============================================
| | | |
| | | |
| left | center | right |
| | | |
| | | |
|
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.
|
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...
|
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).
...
| |
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
|
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...
|
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
|
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>
|
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...
|
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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
| |
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...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
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...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
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
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| |
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...
| |