Here is my html work. http://jsfiddle.net/awaises/remqf/4/
I want to push the fixed div box to bottom of the screen. But it is overlapping on the left navigation and last items of the navigation getting hide behind the green box. Can we fix the green box as per following design? But we have to make sure that green box must be at the bottom of the screen even window’s resolution is small or large.
Design layout URL
http://www.thewebmakerz.com/screen.jpg
Does this .left-col{ height:500px;} fix your problem?
See this fiddle.
Three key tips:
Put "left-footer" in a different parent then your menu content (called "left-col-top").
"left-col-top" should be transparent, "position:fixed", with "z-index:1" and a min-height that is taller than your menu.
"left-footer" should be "position:absolute."
Looking at screen 1.1, if there is 11th list in yellow box, it will definitely go behind green box. (Also consider toolbars / menu bars in browsers). You may have to use something like "More Links >" in case height of screen is less.
Screen 1.2 and onwards:
If jQuery is an option, you can use scrollTop function.
Initially, let the green-box be fixed with position:fixed and some margin negative from bottom.
Then, when user scrolls to a particular amount (as seen in screen 1.2) try following jQuery code:
var yellowBoxHeight = $("div.yellow-box").height();
$document.scroll(function() {
if ($document.scrollTop() >= yellowBoxHeight - 100) {
// If user has scrolled some amount, eg. 100 pixels of yellow box is still visible
// make the green box animate & let it come upwards
} else {
// put the green-box back with some negative margin into the bottom
}
});
Related
I'm looking at a 'drag and drop' script which works for my needs, but I have a couple of problems with the DIV positioning and getting a DIV to be fixed but allow to expand it's parent.
I've created a CodePen example.
Basically I have a list on the left of the page which may grow or shrink. That div expands and contracts correctly.
One the right of the page I have a dropzone the users can drag from the list and fill up the drop zone.
If the list is longer than the page, when the user scrolls down I wan to have the right pane (outlined in YELLOW) to scroll down the page with it. When the user scrolls up I want the YELLOW pane to scroll back up and eventually arrive back at it's original location.
As items are dragged from the left to the right the YELLOW pane expands. But it expands over the DRAG DIV, it should make the drag div expand so the YELLOW pane stays with in it.
Please some one advise how I get this to work.
Thanks :)
add padding to this
#right_container {
padding: 20px;
}
delete position
#right {
position :absolute;
}
what am I misinterpreting this..
I am trying to keep my top-bar navigation from going behind my logo image on the header of my page. See below an example of the page when it is maximized in my screen:
Maximized View
Here is what it looks like when the browser window is made smaller:
Smalller Screen Example
I am trying to fix this page so that the top nav-bar that currently runs behind the image when the window is made smaller, will instead move and extend to the right.
Any ideas? The site is Inhishands.com
Thanks!
Your problem is that the menu (<ul id="display">) has the CSS property float:right, so it will always be positioned relative to the right side of the screen. When the screen is made smaller, the right side moves closer to the left, so the menu moves leftwards too (and overlaps the logo).
If what you want is for the menu to always start from the right side of the logo (and not to overlap it), then you could give it the property float:left and add a margin to its left side (like margin-left:370px). There are other ways of positioning it (like using absolute positioning) but this will get the job done.
Use Z-index on the navigation. In the CSS, set the z-index of the hands image lower than that of your navigation and you will see the navigation on top instead of behind.
Here's some information on Z-Index in case you need it: http://www.w3schools.com/cssref/pr_pos_z-index.asp
Nice design.
First of all you need to fix the minimum width of the top menu HEADER in your CSS.
Fix the header min-width according to the resolution you need:
#Header{
min-width: 1237px;
}
or directly into the HTML
<div id="Header" style="min-width: 1237px">
I have a validation control elements in ASP.NET which they needs to be inside form tag in order to work, that's why I'm doing silly things with positioning div which includes validation controls but I can't get it to work. Please check my two images:
Here is my current layout. Gray div is actually div whre validation controls are. Because as you see this site has plenty of space so I want to position gray div on the left side, just like you will see in second image.
I've already positioned like shows upper image (with properties: top, left, position absolute), but if I resize browser window, gray div will overlay centered div ( will stay on the same spot ). Check following image to see what I mean:
This is a very easy answer! Give your body a min-width.
body {
min-width: 1000px;
}
You will have to find out what the brown div and gray div equal plus a little room to give space between them.
If you want it to happen only on a certain page then use this java script if statement.
if(document.location.href === 'pageURL.com') {
$('body').css('min-width', '1500px');
}
to find page URL go into a web console and type in document.location.href and it will give you the exact url.
This will sound very "noob", but I'm new to HTML/javascript/php, and so far I've been having a blast discovering new stuff. Right now though, I'm having a minor problem.
I'm trying to make a UI with lots of buttons (it's a matrix of buttons, 5x24). When the browser is maximized, it's all good, the buttons are where they're supposed to be. But when the browser is adjusted so that it becomes narrower (width becomes smaller), the buttons try to remain visible by moving on top of each other.
I want to know how to make it so that a horizontal scroll bar automatically appears.
I've tried putting everything in a <body> tag and putting style="width:100%;overflow:scroll;" but the buttons still do what they do, and that is, ending up on top of each other when they're supposed to be side by side...
Thank you very much!!!
The problem is, width: 100% means the full width of the parent element. Give your container the necessary width (in px, not %) to accomodate all your buttons. Than put that in a div with overflow: auto, and it should work.
When using name="object" and then having the page scroll to that object using a href="#object" id it possible to adjust where the page lands. Rather than the top of the window, a few pixels down. I have a fixed navigation bar that when scrolling, the content goes behind so the nav bar is always visible. So when I use a href="#object" part of it is cut off because it is behind the nav bar.
Any fixes? Thank you.
Change the top padding and margin styling on the element with the named anchor. For example, if your header is 100 pixels tall, give your named anchor a margin-top of -100px and a padding-top of 100px.
See this jsFiddle example.
In this example, the link will bring the bolded text ('Vestibulum ante ipsum') 100px from the top of the page.
And if you want to set these properties (like mentioned from j08691) via a css selector, put this JS into your html, then you're able to give every anchor a class for it, if attribute-selectors don't work (older browsers):
function findAnchors(){
anker = document.anchors;
for(i=0; i<anker.length; i++ ){
anker[i].className = "anchor";
}
}
window.onload = findAnchors();
You can do this with jQuery.localScroll by setting an offset in the plugin configuration.
Here, have a fiddle.