How to create a multi page in single page

Question

1.00/5 (1 vote)

See more:

Hello,
I want to create a multi page in a single webpage.
For example
html 1:

html 1:
<html>
<head></head>
<body>
<div id='content1'>
content 1

</div>
</body>
</html>
html 2:
<html>
<head></head>
<body>
<div id='content2'>
content 2
</div>
</body>
</html>

but now i need these two in one html page

HTML

<html>
<body>
<div id='content1'>
content 1
click here for content 2
</div>
<div id='content2'>
content 2
click here for content 1
</div>
</body>
</html>

Now page load i want to show content1 as a page and if i click on click here for content 2, content 1 animation with left and same time content 2 will also makes slide effect. so content 1 hides and content 2 visible.
To get view
http://labs.rampinteractive.co.uk/touchSwipe/demos/Image_gallery_example.html[^]
example as image gallery (image = div content1)

Posted 28-Jun-15 7:31am

Ambati Dilip

Add a Solution

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Answer 1 · 2015-06-28T07:51:00

There are two self-contradicting points in this question. First of all, what you want to achieve is not "multi-page". The "page" is some HTTP content rendering in a browser window, and this is only one page, by definition. You just suggest that the visible content is changing, but this is simply one page. Second point is this: the page sample you reference has nothing to do with the simple functionality you described, it's more complicated functionality. So what to answer to? :-)

Let me start with "changing content" div elements. You can use JavaScript. You can simply have all of them in your HTML document, but hide all but one. In response to a click event, you hide current element and show some other one.

This is how you change visibility: http://www.w3schools.com/jsref/prop_style_visibility.asp[^].

For default visibility (visible), you can simply assign visibility to null, but "visible" will also work.

The simplest way to set a click event handler could be this:

JavaScript

myElement.onclick = function(eventObject) {
   // do something on click
}

To do something more complication, something like shown in the example you referenced, you can first learn different examples of code implementing "image gallery": http://bfy.tw/Yki[^].

I bet you will find a lot of interesting examples which can help you to decide what you really want to implement.

—SA

praveenlob7 · Answer 2 · 2015-06-28T08:25:00

Solution 2

Have a look at the below URL. See if you can follow that?
http://alvarotrigo.com/fullPage/[^]

Posted 28-Jun-15 8:25am

praveenlob7

Comments

Ambati Dilip 29-Jun-15 2:18am

Thank u this is what i am looking for thank u so much.

Ambati Dilip 29-Jun-15 2:53am

But i want scrolling. i will add data to slides so y-axis increase what to do i am not getting scrolling

praveenlob7 · Answer 3 · 2015-06-28T22:49:00

Solution 3

Try using the below CSS code

CSS

overflow: scroll;

You can try Overflow-x or overflow-y

Posted 28-Jun-15 22:49pm

praveenlob7

Comments

Ambati Dilip 29-Jun-15 8:38am

its not working

praveenlob7 30-Jun-15 3:14am

Didi u try this?

body
{
overflow-y:scroll !important;
}

Ambati Dilip 30-Jun-15 4:29am

i kept that its not working
bcoz full slide automatically stopping height width as screen resolution.

praveenlob7 30-Jun-15 8:05am

Send me your code.

Ambati Dilip 1-Jul-15 1:58am

i got the solution using Jquery mobile custom css only page functionalities. Thank u