Set width of a div in respect to height - javascript

I have a div #slideshow with images of 2:1 aspect ratio. So, set height of image I am using jQuery:
Note: The Slideshow Div is 100% wide with respect to browser window. If user makes the browser window, smaller - it is going to be smaller.
slideWidth();
function slideWidth(){
var width = $("#slideshow").css("width");
var height = (parseInt(width.substr(0,width.length-2)) /3);
$("#slideshow").css("height",height+"px");
}
And, to make the width change dynamically, I use setTimeout:
setInterval(slideWidth,1000);
This is actually working as I want. But I think I am heavily giving high impact on the website by refreshing the function slidewidth every second.
Is this achievable through CSS3? Or with jQuery/JS with less Website Impact?
Thank you. Feel free to comment with new ways/ideas.

There's a css-only approach using pseudo elements and padding:
div {
width: 100%;
position: relative;
background: red;
}
div:before {
display: block;
content: "";
padding-top: 50%;
}
The combination of the pseudo padding-top can be used to vary between aspect ratios.
In this case, the 50% padding is equivalent to aspect ratio of 2:1
Working Fiddle Example

You should be using jquerys .resize(); This adds an event listener waiting for the container to resize.
Ej:
$(window).resize(function(){
//do your logic here
});
Jquery resize

Related

Image max-height

I have got a tiny problem, im creating a website and i want to give an image a max-height. The image may only have the same height of another div.
You can check the layout here: http://bit.ly/1OAGsLR
Its about the 1920x1080 image, and i needs to be the same height as the div with class box left to it. If right the image should scale well.
But im trying all i know but i dont get it working, can someone get this working with CSS or do i need to use Javascript for this?
Thanks in advance!
Your image is looking the way you want when the screen width is at or above 1400px. You should consider using css media queries to move or adjust the image at different screen widths. Your layout could easily be handled using a css framework like foundation or bootstrap which would take care of css media query breakpoints for you.
If you are intentionally trying to not use a css framework, I'd check out this css media queries tutorial to get you started.
You need to make your container div wider.
Your container is 1200px wide, and your boxes are 560 + 40 padding wide each.
That means that the max width of you image is 560px.
Now to conserve it's aspect ratio of 16:9, the max height of the image is 560 / 16 * 9 = 315 pixels.
Okay, your main problem is that heights don't like to be defined this way. I have a solution for you that will 'solve' this issue, but its not very pretty and you might want to look into doing this with javascript anyhow. Below is a very rough example mockup.
body > div {
width: 100%;
max-width: 500px;
background: green;
padding: 10px;
position: relative;
}
body > div > div {
width: 50%;
padding: 20px;
}
body > div > img {
position: absolute;
right: 20px;
top: 20px;
max-width: 50%;
/* make sure to fall back to 80% so theres at least some gutter for older browsers */
max-height: 80%;
/* use calc to make the image the height of the relative parent minus padding */
max-height: calc(100% - 40px);
}
<div>
<div>Push<br />Push<br />Push<br />Push<br />Push<br /></div>
<img src="http://placehold.it/350x150" />
</div>
In short, this will place your image to the right of your box, give it a max-height (because positioning can do that) and a max-width (so smaller screen sizes don't freak out).
Now you could easily translate this a more general system where .box + .boxget a absolute position, or you could define a class for the box that has to push content and add that to the first box, making all other boxes absolute.
I fixed it by using JS, im using the following script:
<script type="text/javascript">
function changeheight(){
var Height = document.getElementById('box').clientHeight;
document.getElementById('imagebox').style.height = Height+'px';
}
</script>

How to apply a responsive CSS height to an element using min/max-height and height?

I'm trying to expand a Dygraph to the maximum available dimensions of it's parent container.
Technically the graph is resizeable, either by using a re-rendering method or by specifying an absolute container like in this example.
Problem is, the plugin expects hardcoded values, otherwise it will calculate something arbitrary - see this link for explanation, which says:
// For historical reasons, the 'width' and 'height' options trump all CSS
// rules _except_ for an explicit 'width' or 'height' on the div.
// As an added convenience, if the div has zero height (like <div></div> does
// without any styles), then we use a default height/width.
I have been playing around with the following setup:
<div class="graph_wrap">
<div class="graph_container">
<!-- graph will be here -->
</div>
</div>
I managed to stretch the graph WIDTH to 100% by setting this CSS:
html .ui-graph {
width: 100%;
min-width: 1px;
}
but without specifying a height, the plugin overrides my CSS and doing this:
html .ui-graph {
width: 100%;
min-width: 1px;
/* height... */
height: auto;
max-height: 100%;
min-height: 100%;
}
does not work. Only if I add something like height: 20em, the plugin does not overwrite my set CSS.
Question:
Is there any CSS way using min/max-height/height (or other) to force the browser to expand to maximum height? Can't think of anything else.
does
There is no way to force the browser to maximum height. You can write css like
.max_width{
width: 100%;
}
this will make the container 100%.
But the height will be determined by the height of the elements inside.
This can be solved using javascript though.
You can do it multiple ways:
The way It looks like you are doing is having the graph stretch with the browser window.
height: 10vw; /* viewport width */
or
height: 10vh; /* viewport height*/
these are different, so experiment what you want. This will definitely resize it.
In the resize-to-browser example you provided, the element is scaling to the parent container just as you wanted. You can then apply your sizing rules to the container (#div_g), not the graph itself.
In that example, adding this will make the graph scale with the browser height until it is 300px tall:
#div_g {
max-height: 300px;
}
All of the graph generated elements are calculated with JavaScript. That's why CSS doesn't work for them. So style the container, and let the graph itself resize it to fill that container.
You should be able to use position: relative; instead of absolute, if you want your graph to be positioned with other elements.
"Is there any CSS way using min/max-height/height (or other) to force the browser to expand to maximum height? Can't think of anything else. does"
Traditionally the height of the html document is the same height as what it contains, like any other block element. You can stretch this to fit the browser height using the following:
html, body {
height: 100%;
margin: 0;
}

Responsively position an image at specific target over background image

I have a responsive background image with a smaller image positioned over it. I am trying to keep the smaller image at a specific location when the window is resized.
Both images scale properly, and the left position works so far, but not the top position.
img {
max-width:100%;
}
#dot {
position: absolute;
top: 17%;
left: 66.5%;
width: 10%;
height: 0;
padding-bottom: 10%;
}
I have found some questions with answers that suggest:
Vertical Alignment or Positioning with Javascript
I've also looked into .position() and .offset(), not sure if either would work.
I think my best solution would be to calculate the Y offset using the current window height as a reference but I am not sure what my JS or Jquery code should look like.
Here is my jsfiddle:
http://jsfiddle.net/melissadpelletier/xBu79/21/
I'm not sure exactly what you're trying to do with your images, but you could create a new smaller image (green dot) with the same aspect ratio as your background image, and have the dot placed where it needs to be within that aspect ratio. Then stretch the width of that to be 100% and the two images are basically overlapping, but the top image (smaller image) has a transparent background. Not sure if that all makes sense, but I made a new image and did the fiddle thing, which I'm new to: http://jsfiddle.net/ydack/
img
{
width:100%;
}
#dot
{
width: 100%;
position: absolute;
top:0;
left:0;
}
#dotImg
{
top: 0;
left: 0;
width: 100%;
}
I mistakenly placed the green dot's position based on the black outline, not the full background image, so the dot is slightly up and right of where it needs to be. BUT, the position is maintained while re-sizing the window. Hacky, but it could work!
You are definitely gonna need some javascript for this. What you can do is calculate the height and width of the image whenever you resize your browser window. Then simply use some math to calculate the position of the dot relative to those dimensions.
var height = $('#image').height();
var width = $('#image').width();
/* change the fractions here according to your desired percentages */
$('#dot').css({left: width/2, top: height/2});
$(window).resize(function() {
height = $('#image').height();
width = $('#image').width();
/* change the fractions here according to your desired percentages */
$('#dot').css({left: width/2, top: height/2});
});
Try this code: http://jsfiddle.net/LimitedWard/FFQt2/3/
Note that you will need to also resize the dot according to the height/width of the image if you want it to always fit inside that box.
Edit: after further investigation, it is possible to do this in CSS; however, it's a lot sloppier because the dot doesn't follow the image if the window is too wide. This jQuery solves that problem by using pixel-based positioning.
http://jsfiddle.net/sajrashid/xBu79/24/
plenty of errors mainly not closing tags
<div id='background'>
<img src='http://i.imgur.com/57fZEOt.png'/>
<div id='dot'>
<img src='http://i.imgur.com/yhngPvm.png'/>
</div>
</div>

How to display a diagonal background image that is not a pattern

I'm having a hard time with a diagonal background image. This is not a "pattern", but a full image used in two types of layouts. (Image: http://i.imgur.com/mcWseu1.jpg)
On one template, the image should remain fixed on the page at 100%
height, positioned to the top right and scrolls with the page.
On the second template, the image should maintain the same aspect
ratio as it would in template one, but it should not be fixed.
Instead, it should scroll up with the rest of the page.
I've been able to achieve the desired result for template one, but I'm having a hard time with template two.
Is Javascript the only solution here? If so, any recommendations? Again, the challenges I can't fix:
Get the image to maintain the same aspect ratio as it would in template one (if it's 100% height to fit the window in template one, then it should size at 100% height in template two with the exception of being fixed) This is to maintain consistency between pages using separate templates.
Thanks for the help.
Edit: I have no code to reference for the actual challenge I'm facing. But here is the solution I've found for the first template:
CSS (applied to an img element):
.abovefold {
width: auto;
height: 100%;
position: fixed;
top: 0;
z-index: -1;
}
I believe you're looking for the CSS background-attachment attribute. To fix a background, simply set it as such:
.example {
background-image: url('http://i.imgur.com/mcWseu1.jpg');
background-attachment: fixed;
}
http://www.w3.org/community/webed/wiki/CSS_shorthand_reference#Background
I've demonstrated this in a fidde: http://jsfiddle.net/GHDbM/
When it comes to dimensioning the background, you'll want to set the background-size attribute:
.example {
background-size: auto 100%; /* Adjust to element height */
}
The auto in the above example is for width and the 100% is for height.
http://www.w3.org/TR/css3-background/#the-background-size
Another fiddle for this: http://jsfiddle.net/sk2RY/

Dynamically set <div> height & margins based on the same <div> width

I am creating a responsive site and I want to adjust a height based on it's width. This is going to be a parallax & responsive site. For the site's responsiveness, I decided to have a container element be adaptive and adjust size based on media queries. Then, this child will have a width of 90% or so.
I wanted to write either JS or with the help of JQuery to set the height & margins of this based on the new width at each break point. I think this would be easier then trying to set a new "px" height for each of these break points. And since I want to have some parallax effects, I need to set the s margins as % instead of pixels to get the same effect on multiple devices.
Please let me know if any of this doesn't make sense.
Thank you very much.
If you want the width and height to be the same, you could use:
width: 100vw;height: 100vw;
Here is another solution, for a resizable div that maintains a 16x9 aspect ratio. 9/16*100=56.25%
http://jsfiddle.net/ks2jH/512/
CSS:
.aspectwrapper {
display: block;
width: 90%; /* whatever width you like */
background-image: url('http://placehold.it/160x90');
background-size: cover;
background-repeat: no-repeat;
}
.aspectwrapper::after {
padding-top: 56.25%; /* percentage of containing block _width_ */
display: block;
content: '';
}
HTML:
<div class="aspectwrapper">
</div>

Categories

Resources