A top dropdown menu next to the logo pushes the main webpage downwards when clicked. How is it possible to just overlay the content instead? Thanks in advance.
Make your dropdown position: absolute. Then it won't take up any layout space.
You need to make it position:absolute, like skyuzo says.
Then you need to manually position it where it needs to be. Get the position of the element you want to dropdown from (use offsetLeft, and offsetTop), then set the top and left style properties of your dropdown.
Use a JS toolkit to make life easier :)
Absolute positioning takes the element out of the layout, but that means you can't rely on the element being positioned where it normally is.
Related
Hi I'm working on 'page' style transitions between elements on a page. My approach is pretty much this which works fine but when I put something with position 'fixed' inside one of the 'pages' the functionality just isn't happening - its working more like absolute positioning. The code is basically..
<nav id="navigation-bar">
<!-- Content Goes Here --->
</nav>
#navigation-bar {
position: fixed;
top: 0;
width: 100%;
}
Does anyone know if theres a solution to this? Or if not a possible alternative? If you position the navigation bar outside of the 'page' it works but I'm not sure how to link the #navigation-bar to 'transition' at the same time/style as the slide I also think this makes things more complicated - there is also an element on the mobile view that needs to be in the page to work that is also position fixed and I need an approach that essentially works with positioning the html inside the panel/page but can be positioned fixed and works.
That's the way position:fixed works extract the element of all the DOM.
An element with position:fixed is fixed with respect to the viewport. It stays where it is, even if the document is scrolled.
On other side position:absolute is able to extract the element but position it relative to another containing block.
Whereas the position and dimensions of an element with position:absolute are relative to its containing block, the position and dimensions of an element with position:fixed are always relative to the initial containing block. This is normally the viewport: the browser window or the paper’s page box. To demonstrate this, in the example below you will make one of your elements fixed. You will make the other one very tall in order to cause a scrollbar, to make it easier to see the effect it has.
So if you have one element with fixed position inside each div it doesn't matter because is extracted and positioned in relation to the primary container. Then the best you can do is work with position:absolute.
I need your help, i want to create a dynamic fixed DIV
That means it a fixed div but it cant override header (or other div's above it) and footer (or other div's below it). Example when scroll on top it below other div but when scroll down enough it will be in top, and when scroll to bottom of pages it stand above other div. I don't know the key for this div is, so i call it "dynamic fixed div".
An example here: http://www.1stwebdesigner.com/wp-content/uploads/2010/07/index.html. I want to create a div like as "Select category" div.
Thanks!
You can use the css property "position: fixed;" to do it, and with Jquery you can do some effects interesting.
So, look this tutorial, I believe it'll help you.
http://www.sutanaryan.com/jquery/how-to-create-fixed-menu-when-scrolling-page-with-css-and-jquery/
I'm wondering how I could expand a 'div' without affecting the layout of the other elements in the page. Specifically, I'd like to achieve an effect similar to this - http://www.ikea.com/us/en/catalog/categories/departments/kitchen/kitchen_int_lighting/. If you hover your mouse over any product, you'll see that the box expands showing more information; however, other elements such as the product image below is not affected by the expansion.
use absolute position.
rather you can also achive the same effect by writing onhover event on the div with adding an additional div at that position with higher z-index.
use absolute positioning, and then you can grow/shrink the div and it won't effect any other elements around it.
Add position:absolute; to style of your div. This way it won't interfere with other elements but still overlap them, and you can specify any width and height to them.
Absolutely position your div and make sure the z-index is at the top level. It CAN be done using just CSS, but it'll probably be easier with js as well.
I used a jquery image scaling plugin for a large image on this page I am building: http://seans.ws/sandbox/test/thrive/
I am trying to put a navigation div below the image, but I cannot do so because the image is absolutely positioned, and the scale of the image changes, so I cannot just specify a padding-top value for the navigation to get it to show up under the photo.
Any help would be greatly appreciated.
I would put both image and navigation div in one container and specify absolute position on it (instead of image). It seems to be simplest and most straightforward solution.
First, does the image have to be absolutely positioned? Generally if you want the image to be placed relative to other elements on the page or you want other elements on the page to be placed relative to the image they are placed relative, sometimes within an absolutely positioned <div>
If you explain why the image has to be absolutely positioned there may be an easier solution.
Assuming that absolute positioning of the image is required, the only possibility I can imagine is either modifying the jQuery plugin or making a second javascript to edit the padding-top as the image is resized.
If you need the image absolutely positioned on the page but relatively positioned to all other elements, I suggest putting the image and the content (which you want to appear underneath it) inside of an absolutely positioned <div> element, but leaving them each relatively positioned.
You could get the height value, and then work out how much padding you need.
var myheight = $('.maxAtOrigImageSize').height();
$('.nav').css('paddingTop', myheight+'px');
However, you would need to add an event for when the window changes size, so that if the user adjusts the window size, you can update the padding of the nav.
I'm answering your question, but I feel there is a cleaner solution. I would create a containing DIV for the resized image to sit in, and follow that with a nav DIV. The nav would always naturally be in the right place when resized, at the bottom of the image. You may want to consider changing the way you implement this.
I have a scrolling pane div with overflow:hidden. Please check it here. There are products as images with captions shown in the scrolling pane. When I move mouse cursor over a product div, it gets light-yellow background and changes its height - I just add a class to the div using jQuery and it works fine. The problem I need to solve some way is to show the expanded div for the active product as a separate div that appears above the scrolling pane, though now it appears inside that pane and extends it in its height. I want to make it look in similar way to this one. Here you move mouse cursor over the product and get an extended div showing you details. Surely, my task is a little harder because of that scrolling pane.
Shouldn't be too difficult if you use the .offset() method on hover of a .product. What you can do is the following:
In your .product hover event handler, get the offset of the product. This will give you the position of your product in relation to the document.
Next create your overlay product information div and append it directly to the <body>.
Set the overlay div to position: absolute and use the values returned from the offset call to position it.
Lastly make sure your overlay has a higher z-index than the scrolling pane and you should be in business.