You are here: Home » Tutorials » Tips-Tricks » No Scroll to the Left Container

Say "No Scroll" to the Left Container

Posted by Stan Bogdanov on 11 January 2008 - 01:04

Introduction

Very often we have a short reading text and many questions. For example, in a JQuiz generated exercise, when you click the "Show all questions" button, you have to scroll up and down to read the text, then scroll down to the question you are answering. It is even more so when you are watching a video. We can fix the position of the left container to not scroll along with the page.

See a demo (click "Show all questions" and scroll up and down to see what happens).
Here's a small trick how to achieve this in two easy steps.

Step 1

Create your exercise as usual and open the .htm file in a Text or HTML Editor. Find this code (yours may not look exactly the same) 
div.LeftContainer{ font-family: Verdana,Geneva,Arial,sans-serif;
	font-size: 10pt;
	border-style: none;
	padding: 2px 0px 2px 0px;
	float: left;
	width: 49.8% 
	margin-bottom: 0px;
 }

Step 2

Add this line after (below) the margin declaration. 
position:fixed; /* This fixes the left container to not scroll*/

That's it. Save the file and view the result. The left container should stay fixed when you scroll up and down.



Rate this:

  • Currently2.84729064039/5 Stars
  • 1
  • 2
  • 3
  • 4
  • 5
Votes: 812

Share it:

Windows Live

Write a comment

  • Required fields are marked with *.

If you have trouble reading the code, click on the code itself to generate a new random code.
Security Code:
 
admin
Posts: 1
Comment
re: link wrong
Reply #2 on : Wed February 10, 2010, 14:06:25
Thanks Annelies,
The brokenn link is now fixed and points to the correct sample exercise.
Cheers
annelies Braams
Posts: 1
Comment
link wrong
Reply #1 on : Sat February 06, 2010, 23:42:33
Hi, the lik to 'demo' on this page, about the fixed left box when scrolling, leads to a different page then it should be, I thing.

Regards, Annelies Braams

Feedback Form
Feedback Analytics