www.webdeveloper.com
Results 1 to 11 of 11

Thread: ensuring rest of page is blank...kinda

  1. #1
    Join Date
    Feb 2010
    Location
    Grantham, UK
    Posts
    103

    ensuring rest of page is blank...kinda

    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.

  2. #2
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,143
    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.

  3. #3
    Join Date
    Feb 2010
    Location
    Grantham, UK
    Posts
    103
    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.

  4. #4
    Join Date
    Jan 2009
    Posts
    3,346
    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.

  5. #5
    Join Date
    Feb 2010
    Location
    Grantham, UK
    Posts
    103
    How does this rate with you?
    Code:
    <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&#37;; 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>
    any potential problems?

  6. #6
    Join Date
    Feb 2010
    Location
    Grantham, UK
    Posts
    103
    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..

  7. #7
    Join Date
    Feb 2010
    Location
    Grantham, UK
    Posts
    103
    hmm - doesnt work in firefox

  8. #8
    Join Date
    Feb 2010
    Location
    Grantham, UK
    Posts
    103
    ok...an almost working code:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    <html style="height: 100&#37;;">
    <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?

  9. #9
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,143
    This seems pretty odd!

    If you must go this route, couldn't it be as simple as:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    <html style="height: 100%;">
    <head>
    <style type="text/css">
    #chap1, #chap2 {margin-bottom: 9000px;}
    </style>
    </head>
    <body style="height: 100%; overflow:hidden">
    <div class="wrap">
    	<h1 id="chap1">Chapter 1 <a href="#chap2">Go to chap 2</a></h1>
    	<h1 id="chap2">Chapter 2 <a href="#chap1">Go to chap 1</a></h1>
    	&nbsp;
    </div>
    </body>
    </html>

  10. #10
    Join Date
    Feb 2010
    Location
    Grantham, UK
    Posts
    103
    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.

  11. #11
    Join Date
    Feb 2010
    Location
    Grantham, UK
    Posts
    103
    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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles