Hi. More of a hypothetical question as there are many ways around what I am trying to do.
I am trying to amalgamate 2 web pages into one. Easiest example is: 2 paragraphs need to be shown, but I only want to show one at a time. The user clicks on a link for part 2, and the page jumps to an anchor and displays the new info.
In other words - a scrolling page which is scrolled using anchors rather than the scroll bar (which I want to disable).
In itself, I know this is possible, but my question is if there is a way of guaranteeing that the user cannot see what is coming up, irrelevent of their screen resolution (bar putting hundreds of <p> statements between).
I know its an odd thing to want to do, Its more of a "can it be done?" question.
I'd recommend setting up a simple jQuery script like so:
Code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Title</title>
<meta name="language" content="en" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css">
/* Insert styles here */
#second {display: none;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('#first').click(function(){
$(this).hide();
$('#second').fadeIn('slow');
});
});
//]]>
</script>
</head>
<body>
<p id="first">This is the first paragraph. This is the first paragraph. This is the first paragraph. This is the first paragraph. This is the first paragraph. This is the first paragraph. This is the first paragraph. This is the first paragraph. This is the first paragraph. <a href="#">Continue</a></p>
<p id="second">This is the second paragraph, shown when you press continue. This is the second paragraph, shown when you press continue. This is the second paragraph, shown when you press continue. This is the second paragraph, shown when you press continue. This is the second paragraph, shown when you press continue. This is the second paragraph, shown when you press continue. This is the second paragraph, shown when you press continue. This is the second paragraph, shown when you press continue. This is the second paragraph, shown when you press continue. This is the second paragraph, shown when you press continue. This is the second paragraph, shown when you press continue. This is the second paragraph, shown when you press continue. This is the second paragraph, shown when you press continue. This is the second paragraph, shown when you press continue. This is the second paragraph, shown when you press continue. This is the second paragraph, shown when you press continue. This is the second paragraph, shown when you press continue. This is the second paragraph, shown when you press continue. This is the second paragraph, shown when you press continue. This is the second paragraph, shown when you press continue. This is the second paragraph, shown when you press continue. This is the second paragraph, shown when you press continue. This is the second paragraph, shown when you press continue. This is the second paragraph, shown when you press continue. </p>
</body>
</html>
It's basically saying, when you click the link in the first paragraph, you're going to hide it and display the second.
this works a treat....thank-you. Do you know if its possible to do something similar with pure html? I am thinking along the lines of displaying an empty div between paragraphs.
I suppose you could use a huge top/bottom margin in the css for those divs effectively pushing the content further down. Though a javascript solution is probably most user friendly for this case. Another thing to consider, why would you want the content not to be visible until the user clicked? If the business reason is sound perhaps an AJAX/server-side solution would be the "best" final solution.
<html>
<body>
<p><a name="c1" href="#c4">See also Chapter 4.</a></p>
<p><h2>Chapter 1</h2><p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>wanting an empty space here</p>
<div style="position:relative; height=125%; width=125%"></div>
<a name="c4"><h2>Chapter 4</h2></a>
<p>This chapter explains ba bla bla</p>
<p>
<a href="#c1">Go back to top.</a></p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>
ok, the above seems to work ok, but removing the scrollbars seems to be a bad idea, just in case the window is too small to display all the info. Am gonna try putting the "chapters" into separate divs to stop people scrolling to next section, but need to work out a way of not calling to javascript etc..
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html style="height: 100%;">
<head></head>
<body style="height: 100%; overflow:hidden">
<div style="position:relative; top:0%; height: 50%; overflow:auto"><p><a name="c1" href="#c2">See also Chapter 2.</a></p>
<p><h2>Chapter 1</h2></p>
<p>This chapter explains ba bla bla</p>
<p>wanting an empty space below here wanting an empty space below here</p>
</div>
<div style="right:0%; height:125%; width:70%; text-align: right">
<p>contents of empty div1</p>
</div>
<div style="position:relative; top:0%; height: 50%; overflow:auto">
<p><a name="c2"><h2>Chapter 2</h2></a></p>
<p>This chapter explains ba bla bla</p>
<p></p>
<p><a href="#c1">back to Chapter 1.</a></p>
</div>
<div style="right:0%; height:125%; width:70%; text-align: right">
<p>contents of 2nd empty div</p>
</div>
</body>
</html>
This almost does exactly what I want. The div can be scrolled, but the page cant be.
An oddity though - when viewing "chapter 2" and the window is resized, all kinda goes a bit pear shaped - content moves and can also vanish. If it isnt resized, it works great.....which is obviously not good enough.
Pretty sure its got something to do with the div positioning, but cant work out a solution..Is there any way around this?
I will have a play with this tomorrow, but doesnt seem to quite do what I want.
I guess an overall objective would be, instead of having lots of different html docs to load, to see if they could all be put on a single page. Once this single page has loaded, there would potentially be a huge speed boost over having lots of smaller pages.
gotta get going as is 4:15am, but will see tomorrow. thanks for assistance so far.
Ok...going to go the jquery route - thanks cbVision. Couldnt get other idea to work. Have added to the code as follows :
Code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Title</title>
<meta name="language" content="en" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css">
/* Insert styles here */
#second {display: none;}
#third {display: none;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('#first').click(function(){
$(this).hide();
$('#second').fadeIn('slow');
});
$('#second').click(function(){
$(this).hide();
$('#third').fadeIn('slow');
});
$('#third').click(function(){
$(this).hide();
$('#first').fadeIn('slow');
});
});
//]]>
</script>
</head>
<body>
<p id="first">This is the first paragraph. This is the first paragraph. This is the first paragraph. This is the first
paragraph. This is the first paragraph. <a href="#">goto 2</a> <a href="#">goto 3</a></p>
<p id="second">This is the second paragraph, shown when you press continue. This is the second paragraph, shown
when you press continue. This is the second paragraph, shown when you press continue.. <a href="#">goto 3</a></p>
<p id="third">This is the third paragraph, shown when you press continue. This is the third paragraph, shown
when you press continue. This is the third paragraph, shown when you press continue.. <a href="#">back to one</a></p>
</body>
</html>
Having never used jquery - my question now is, is it possible to add to the code to get both links on paragraph1 to work? - more than one choice of what is shown next?
Thanks very much so far. I know there does not seem to be much logic to this
Reply With Quote
Bookmarks