Solved

DIV needs to scroll

Posted on 2014-03-22
11
276 Views
Last Modified: 2014-03-25
Hello,

I have a page which has a column to the left, which needs to stay there but scroll up and down so the descriptions in the panel move up and down with the lines. The properties to the right need to be able to be scrolled left to right.  The sideways scrolling works in Firefox and Chrome, but not in IE, however I still need the panel on the left to move up and down when the page is vertically scrolled...

Here is the page: link to page

Help appreciated - thanks in advance!
0
Comment
Question by:Nico2011
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 2
  • +2
11 Comments
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 100 total points
ID: 39947503
IE is probably getting screwed up by some of the 69 validation errors:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.villasdirect.com%2Ftest.asp%3Ftest%3D1&charset=%28detect+automatically%29&doctype=Inline&group=0

IE has always had some issues with scrolled elements and you basically have some many errors that it looks like it just gave up trying to resolve which scroll property to use because of the -ms-x-scroll getting overridden by the scroll that follows it.

But that is just speculation.  There is no point in trying to get the rendering correct until the errors are eliminated.

Cd&
0
 

Author Comment

by:Nico2011
ID: 39947769
I have cleaned up the code - there are two errors left which I am trying to find, however do you think that it is ok to try to get the div working now please?

I have removed the ms-x-scroll too, however it still doesn't want to play ball...

Thanks again for your help!
0
 
LVL 7

Assisted Solution

by:rgranlund
rgranlund earned 100 total points
ID: 39947881
Add the following to your CSS:

#properties {
overflow:scroll;
}

That should do it, if not, let me know.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 58

Assisted Solution

by:Gary
Gary earned 100 total points
ID: 39948171
I would be inclined to use jQuery and fixed table headers/columns - at least this way you will not have to worry about cross browser issues like you currently have.
https://plugins.jquery.com/fixedTblHdrLftCol/

I know you currently don't use jQuery but for the sake of an extra 30kb...
0
 
LVL 14

Expert Comment

by:Pierre Cornelius
ID: 39949718
From what I see, it seems you need the following:

change position property of element 'sidepanel2' to absolute
add overflow: auto and width: 800px (or whatever width you want) to element 'properties'

This would give you a sidepanel that scrolls up and down with the properties yet, properties can scroll horizontally independantly.

I would rather put the styles in css as opposed to inline to keep in line with the concept of keeping structure and style separate.
0
 

Author Comment

by:Nico2011
ID: 39950482
Hi Pierre,

Thanks for your help - it still won't scroll in IE and in other browsers, I have lost the static side bar - it scrolls left and right too, so goes off of the screen...

Any more suggestions?

Otherwise, I will follow Gary's suggestion and convert to JQuery - it just means starting from scratch which is a bit annoying!

Best wishes/Nico
0
 
LVL 58

Expert Comment

by:Gary
ID: 39950539
starting from scratch
Not really - add the jQuery/plugin, make your sidebar part of the table and tell the plugin the ID of your table.
Shouldn't take more than 10/15 mins.
0
 
LVL 14

Expert Comment

by:Pierre Cornelius
ID: 39952519
Hi Nico. That is strange. I just tested now in IE and it works. I used IE 10. It also works fine in Firefox 27. Which versions are you using?

Did you add my suggested rules correctly? Try putting this rule in your css (and remove the inline styling in your html ).
#properties {
    left: 156px;
    overflow: auto;
    position: relative;
    width: 600px;
}

Open in new window

0
 
LVL 14

Accepted Solution

by:
Pierre Cornelius earned 200 total points
ID: 39952531
ok, I see now you did put the rule but you declare the css rule as a class instead of by id

i.e. in sidebar.css you are declaring as ".properties" instead of "#properties"

change the period tohash and it should work.
0
 

Author Closing Comment

by:Nico2011
ID: 39952611
thank you all for your help - everyone had a valid point and gave good advice - it was difficult to split up the points - I really appreciate the help - it works now :-)
0
 
LVL 14

Expert Comment

by:Pierre Cornelius
ID: 39952637
Glad to help. Good luck. Though I feel rgranlund and Gary should not have been given points, but this is your perogative.
0

Featured Post

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Keyup listener getting fired on initial page load 1 53
Add Rows on a Table 8 52
Conformation code 4 35
Natural height and jquery 6 40
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question