Hey Guys,
Ok this is really annoying me. I have provided a link, which shows the problem i have ran into.
Basically when you mouse click the "DROPDOWN" div, another div drops down. This part works fine. The issue that i have is when you scroll down this div goes with the middle content.
What i want is the middle section (place holder text) to scroll as normal, with the 'DROPDWON' div fixed so that it doesnt move. This would allow the placeholder text to scroll behind it.
http://jsfiddle.net/tebrown/fwgPJ/4/
Cheers
CSS Problem (jsFiddle Provided)
Moderators: egami, macek, gesf
2 different things you need to do.
1. Your side divs (Injury Report, Mangement Options, Add Player) need to not be fixed. They should be floating divs or part of a table to maintain the layout you are looking for.
2. Your middle section with the placeholder section should have a fixed height and use the overflow:scroll in it's CSS
http://www.w3schools.com/cssref/pr_pos_overflow.asp
1. Your side divs (Injury Report, Mangement Options, Add Player) need to not be fixed. They should be floating divs or part of a table to maintain the layout you are looking for.
2. Your middle section with the placeholder section should have a fixed height and use the overflow:scroll in it's CSS
http://www.w3schools.com/cssref/pr_pos_overflow.asp
The purpose of this layout is to be able to scroll the middle section with the 2 side divs staying where they are so a user can just quickly do things. Given this, the 2 sidebars have to stay fixed. Is there any other way around it? - If i change the class (.hidden1) to fixed, then it doesnt push the content down when i press 'DROPDOWN' div.
Thanks for the reply.
I see what you mean, i think im going to get really confused doing this. Would your option take long to fix from the jsFiddle that was provided. This reason being is because this feature has been the hardest part and this is all i need done before i can move on and start my php.
Cheers!
I see what you mean, i think im going to get really confused doing this. Would your option take long to fix from the jsFiddle that was provided. This reason being is because this feature has been the hardest part and this is all i need done before i can move on and start my php.
Cheers!
Because of the amount of restructuring it takes and the clunky interface of JS fiddle, yes it would take a lot of time.
Here is the pseudo-coded skeleton
The inline style can go to a CSS page once you get it working.
Here is the pseudo-coded skeleton
Code: Select all
<div id='wrapper' style='width:1024px'>
<div id='navigation' style='width:100%'>
</div>
<div id='lowersection'>
<div id='leftsidebar' style='float:left;width:20%;height:500px;'>
</div>
<div id='content' style='float:left;width:58%;overflow:scroll;height:500px;'>
</div>
<div id='leftsidebar' style='float:left;width:20%;height:500px;'>
</div>
</div>
</div>
Ok i have made a couple of changes.
http://jsfiddle.net/tebrown/87g2X/3/
Try open the result as far as you can, in my browser (localhost) it does center now, although i cant seem to scroll now with the placeholder text?
http://jsfiddle.net/tebrown/87g2X/3/
Try open the result as far as you can, in my browser (localhost) it does center now, although i cant seem to scroll now with the placeholder text?
Thanks for your reply,
Is there anyway I could hide the scrollbar of the content but still do the same effect of actually scrolling? - Ideally the user would just use his middle mouse scroller to scroll the content, if you know what i mean?
CHeers
Is there anyway I could hide the scrollbar of the content but still do the same effect of actually scrolling? - Ideally the user would just use his middle mouse scroller to scroll the content, if you know what i mean?
CHeers
There is probably a way to do it, but it is nothing I have ever encountered.
In general you want scrolling content to look like scrolling content. Otherwise the user will be confused.
I would look into JQuery packages that can accomplish this if you are absolutely committed to it.
In general you want scrolling content to look like scrolling content. Otherwise the user will be confused.
I would look into JQuery packages that can accomplish this if you are absolutely committed to it.