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.
Related
My goal is to create an absolutely positioned div as the background of the website and the parent of the ScrollMagic scene. By doing this, the title and other content can appear above the scrolling/animated background. However, I found that when using ScrollMagic on a div with absolute positioning, the scroll behavior only works when indicators are added using the addIndicators plugin.
Here is an example:
https://codesandbox.io/s/elegant-sound-x3gop?file=/index.html (without indicators, no scrolling)
https://codesandbox.io/s/ancient-https-iop96?file=/index.html (indicators added, has scrolling)
Is there any way to fix this problem and use the absolutely positioned div as the background without having to add indicators? Or if this is not possible, is there any other way to achieve the same effect where the title appears above the scrolling/animated background? I previously tried making the title absolutely positioned instead, but this did not work because I also wanted to have more content further down the page that would also appear above the background, but it was hard to format with absolute positioning on the content instead of the background.
I'm creating a quote-generator page which is also responsive. Here's the link to quote-generator. That's a canvas that dynamically resizes as the page gets smaller or bigger while keeping the image ratio fixed.
What I'd like to do is for the text to follow the image in staying in the center. I'm not trying to get a piece of code that does it, but even if you have the logic behind it, then I can figure how to do it, because at the moment I'm really not sure where to start from.
Thank you.
In this case, put both of that <canvas> and the <div> preceding it into one higher<div> and then you just have to set the relative width and height of the highest div to percentages. Something like this:
<div id="higherDiv" style="width: 80%, height: 80%">
<canvas>...</canvas>
<div>...</div>
</div>
In this way you get a scalable top container relative to user's screen dimensions. If the percentages don't work, you can try this new relative dimensions introduced in >HTML5, here: https://snook.ca/archives/html_and_css/vm-vh-units
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'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.
Sorry for the title, it's a hard issue to summarise. At the moment, I have a website which looks like this:
(as you can tell, it is inspired by Metro). I have uploaded it to jsfiddle here: http://jsfiddle.net/r46bY/4/embedded/result/
The div surrounding everything (represented by a dotted border) resizes to fit the user's browser window and I want the buttons (which are simply coloured divs) to do the same but can't figure out how. At the moment, they're in place using absolute positioning and based on a particular screen size. I would like them to keep the same layout but resize along with the container div.
I've experimented with liquid values in CSS, but I can't get the positioning right.
Please help.
Use only percentages instead of pixels for your dimensions (including margins). At resize you only have to resize the surrounding div, and the content should take the right dimensions.