I had posted a similar question previously, when I was looking for help in doing the javascript portion.
I now have figured out how to get the javascript working to reproduce this affect in the images below, I need help getting my "MIDDLE" clickable div into place though.... scroll down to see the question portion
Ok here is a page with the code I have this far on jsfiddle.
Mu updated attempt, got it mostly working but it seems kind of hacky the way I had to do it
http://jsfiddle.net/jasondavis/HRq6G/5/embedded/result/
I have a container div with header, content, sidebar, footer areas. Right now when you click on the header div it will toggle the sidebar and content areas.
I would really like to figure out how I can get a middle DIV in between the article content and the sidebar, I will then make that div be the trigger to toggle it all.
In the image you can see that the new center div should always stay attached to the right side of the article div
If you are good with this kind of stuff I would greatly appreciate any help I can get with it, I have spent hours trying to get a div to position like I am describing with no luck. The div should also be the height of the article div
-----UPDATE-----
http://jsfiddle.net/jasondavis/HRq6G/6/embedded/result/
I have it working now. It can most likely be improved, I had to do some hacks like setting some negative margins, I would imagine someone with better knowledge could do it without that
Your explanation was a little hard to understand, but I think this is what you want. Basically there is a thin div between the sidebar and the main content area. Clicking on it causes the sidebar to relocate. Clicking it again restores the sidebar.
http://jsfiddle.net/HRq6G/4/
To accomplish this I chose to absolutely position the middle div along the right edge of the article div. I called the middle div 'trigger.'
Related
I have been looking for tutorials on this for a while now and am coming across a problem. I have a layout with a fixed header at 100px in height and a fixed footer at 50px in height. In my content, I have a menu on the left at 200px wide and content on the right that fills the rest of the screen. My header, footer and menu all have styles applied for background colours and borders.
What I want is for my footer to remain at the bottom of the window, or at the bottom of my content, if the content is longer. I want for the menu to be the same height as the content, so that the styles I have applied will remain intact. What I get is either the footer sticks to the bottom of the content because the content is shorter than the menu, or there is a gap between the bottom of the menu and the top of the footer.
Every tutorial I have found fixes this, but requires the menu to have no background (it takes the background styles from the <body> tag. As I said, the styles I have applied are attached to the menu. Is there a way to fix this?
UPDATE: My source can be found at http://jsfiddle.net/53SZd/3/. That is what I have now (apologies if the floats cause all manner of headaches), but if there are ways to have it looking how I want, I am very open to suggestions.
UPDATE 2: I think my way of explaining this is wrong. I have uploaded some images of what I want to my Google Drive that should explain what I want.
Whilst I do sincerely appreciate the help that I am getting here, there is always one caveat that appears. Many thanks to Waz for his help, I do really appreciate it, but I am coming across one issue or another with each answer. I never realised that getting the effect I want could be so hard -_-"
seems that u might be using float property on the menu, if that is the case you would have to clear float with the footer or a div, but seeing the codes would be great help for your answer
one way to do it is to put a margin-left on your content of 220px (200 for the menu +20 for it not to be just aside the menu)
had the same problem, this solved it.
for the footer, the solution of james is the best ( put clear : both on your footer)
here is how it works : http://jsfiddle.net/53SZd/19/
EDIT : I understood the prolem was for the content.
give your menu top= 111px(100 size of header, 11 for padding) and bottom=51px (50 height footer,1 border) and your footer bottom=0px;
Honestly, before this problem I kinda thought that I actually knew something about css positioning, but it looks that I do not.
Here is what I have, I need to position the social buttons div on the left of the container and make it fixed so it does not move, but only until the bottom of that div is lined up with the bottom of the container in which it was positioned then it will need to scroll further. I do not know if I am explaining my self so that everyone can understand what I mean here so please take a look at the following example
The div with all facebook, twitter, G+ and print buttons is scrollable until it is aprox. 10px below the top of the browser, then it stops and continues to scroll only after the bottom of it is lined up with the container that it is placed in to.
Please help, I am kinda stack with it
This isn't a CSS question unless you're willing to make-do with position: sticky, which probably isn't what you're looking for. (Reading about it here)
If you're looking for a jQuery solution, then you could use ScrollFollow, where you can specify a container parent for the fixed-scrolling item.
Can't for the life of my figure this one out...
Does anyone have any idea why the large red div at the bottom of this page is not flowing below the DIV above it, (but the red div is "appearing" behind it, and getting partially covered)?
I had the same problem with the ABOUT div at the top of the page flowing behind the div above it. The only way I could find to resolve it was to position:relative, and set the top to 45px. Same fix works here, but I would rather figure out why it is not flowing below the content above it than hack it. The Div above it has clearfix applied, and the issue doesn't seem to have anything to do with floats...other than that I am all out of ideas, and still fairly new to CSS...
http://firewalkcreative.com/2012/2012.html
The section (id="work") immediately above it has the styling 'position:relative;top:45px'. This moved it down 45px from where it would otherwise be, covering the top of the following section.
I need a div placed at the top and center of the page to appear over top of the scrolling content below it, and stay in place at the user scrolls.
However, due to freakishly annoying bug I can not reproduce in jsFiddle (or I'd ask for help with that instead) I can't use position:fixed and I need it to work without JavaScript.
How else can I do it?
I think I understand what you mean and I've made a little example, it's pretty self explanatory but just say if you don't understand anything, sure you will.
And if I've misunderstood, I apologise... jsFiddle 1
EDIT With Real Fix
Since I read the question wrong and a fixed position couldn't be used, I have now altered the code slightly to the following jsFiddle 2
Basically you're placing a transparent fixed div to fill the entire width of the page, and then placing your absolute position div inside that, creating the same effect but hopefully getting round the bug you've come across.
the layout of my html page has a fixed div on top of the page. the content div then has a margin-top to compensate for the fixed div.
However, when the content gets scrolled down, if I do a search on page, the browser would sometimes show matches that would be underneath the fixed div, i.e. invisible.
For example, go to http://mincovlaw.com/services/worldwide_enforcement_checkup, scroll down a little bit, and do several searches for "know". You will see that the one closer to the top of the page will be found but will be hidden underneath the fixed div.
Is there a better way to achieve the same looks, while retaining the functionality of a search that does not get hidden?
Simple answer: no, because that's exactly what you're doing: hiding content. Think of it as if content ceased to exist, that's exactly what you're doing and what you're looking for. Anyway, I doubt many people will search in the page, it's not THAT common