Place div on top of specific part of image - javascript

I was wondering, is it possible to place a div on top of a specific part of an image without the div moving when the window size changes?
Example: Placing an image inside of the "PLACE IMAGE HERE", and the image should stay inside of that area when resizing the screen:
I tried to use position: absolute but obviously that doesn't work when the window size changes.

You need to define both width and height for both image - the outer one and the screen one. Or you can give relative width and height in %, vh, vw or some other relative values in css. But again, it will crop the image in some device, you need to be careful while giving proper sizes using media queries also.

Related

Tying text-box to responsive canvas with image

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

Stretch container height depending on background size

I know there were similar questions, but this is slightly different. Just read description)
I have a main container (red) that is stretching depending on screen size. Inside of it there is second container (blue) that has div with fixed height at the top and background picture.
At first I tried using background: cover for picture in the background. But at some sizes different parts of background cannot be seen and that's a no no.
So what I'm trying to achieve is for svg background to stretch depending on blue container's width and remain it's ratio. Also, I want second container to change height depending on it's background, so whole svg picture will be always visible.
Is it possible to achieve with only css? If not, then how can I make it using js? I cannot make changes to existing html.
You can set a minimum width to SVG background to make sure it doesn't become so small that the picture is cut off. As far as the boxes maintaining their ratios you can use percentages for both the width and the height and set them to whatever you want, for example, the width of container2 is 70% of the width of container, and SVG background is 90% of the width of container2.

How to create a tile photo gallery with random sizes for the images?

I have seen some jQuery scripts that you can create photo gallery in a mosaic way. Like this one http://www.themepunch.com/codecanyon/megafolio/megafolio_dark.html or this http://www.themepunch.com/codecanyon/megafolio/megafolio_light.html
My photos have different sizes but most of them are bigger in width than height.
My goal is to automatically and randomly set the dimensions of a container for the image (and load the original image) instead of cropping them manually and set them as a thumbnail in different sizes.
For example, in first entrance img1.jpg it will be shown as 100x50 but upon refresh, the same image it may be shown as 50x100.
My question is how can I create this effect with CSS and javascript ?
Based on the links in your question, I see three types of images: vertical, horizontal and square images. Thus, not randomly sized.
Also, it appears to be nicely laid out in a grid layout. The width of the vertical images is half the width of a horizontal image, the height of a vertical image is twice the height of a horizontal images (so basically it's just flipped) and the square images are equal to the width of either the horizontal or vertical images.
By establishing a grid and column size, you can dynamically position containers containing the images and assigning them a shape, for a lack of a better term, and an orientation. With some jQuery you can then easily position them using the .css function, relative to the other containers.
Note: The thumbnails used in your example, are equal to the size of their container. This is also a good idea for you, seeing as how it will make sure you get the desired effect.

Why can't I figure out the width of elements with automatic widths?

I am trying to create a sideways slideshow of images. The panel that will contain the slideshow is exactly 1200px wide. At page load, PHP loads images inside this panel. The number of images is not always the same, and I don't want the slideshow to start unless the collective width of the loaded images exceeds the width of the 1200px container.
The problem is, all the images are of various sizes, everything from 150x100 to 1980x1200. The images are fit into the bar by setting their height to 50 and letting their width rescale automatically.
Now, creating this slideshow panel in any other programming language would be easy. I'm suffering here in javascript though, because I simply can't find ANY WAY of getting the new width of the images. They all read width: 0px using jQuery outerWidth()
I have even tried putting a div wrapper inside the 1200px panel, outside the images, hoping that div would automatically scale around the width of the images and give me their collective width, but instead it reads 1200px (jQuery outerWidth())
Is there any way of measuring their width?
Is there an easier way of doing this?
Any help appreciated
I'm guessing you're trying to get the widths when the document is ready, instead of after the images have loaded.
Try placing the code that gets the outerWidth() in $(window).load().
$(window).load(function() {
//get the image widths
});

Stack a div under an absolutely positioned image that changes in scale

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.

Categories

Resources