CSS/Javascript toggle height with animation? - javascript

I need to toggle full height to defined height, this is my current code:
<div style="height: 20px; overflow: hidden; display: block;" onclick="if (this.style.height == '20px') { $(this).animate({height:'auto'} } else { $(this).animate({height:'20px'}); }">
The problem is that:
$(this).animate({height:'auto'} - Animating to 'auto' height, doesn't work
Using plain JS this.style.height = 'auto' does work:
How can I either animate it with jQuery or add an animation to the javascript? (either on JS or with CSS) I understand the problem lies in animating to a unknown height, is there a way to get the full height somehow? or idk, how can this be solved?

Here's an animateAuto plugin that addresses this limitation of the .animate() API:
http://css-tricks.com/snippets/jquery/animate-heightwidth-to-auto/

Related

Variation of image in JS [duplicate]

This question already has an answer here:
Change image width by screen size
(1 answer)
Closed 2 years ago.
I tried to solve the problem by myself, but I don't know.
When the width of the screen decreases or expands,
how can I reduce or increase the width of the image in JS?
I had an image in a table and in order to have it adapt to the table I used this class in my css :
.img-fluid {
max-width: 100%;
height: auto;
}
It would be much easier to make the image resize with the window in css rather than js.
If your image looks something like this:
<div class="Somediv">
<img src="somesource" class="Someimage"></img>
</div>
Your css can look like this:
.Somediv {
width: 50%; //the div will take up 50% of the parent element. You can use 50vw to scale by the width of the window
}
.Someimg {
display: block;
width: 100%;
}
If you really want to do it through JS here is the official documentation on element.classList which will help you do what your trying to do.
You don't need Javascript to do this. This can be done through CSS only, You need to set image width to 100% to make it responsive on browser window resize. when you resize your browser window it will automatically takes height according to image width in same aspect ratio.
you need to write a css code like this:
img.img-responsive {
width: 100%;
}

jQuery to rezise background-image

I'm starting with javascript and CSS now, and I'm stuck in a test project.
What I did down bellow I did based on searchs from other sources, so I don't know if anything is exactly on the right spot, probably not.
So, i'm tryng to resize an image according to the window size.
I did it with the header, but can't make it work for my navbar background.
CSS:
.menutop {
background: url('Images/topo1.png') no-repeat top center;
height: 50px;
font-family: 'StreamArtsFont';
text-align: center;
-webkit-animation: changeColor 30s infinite;
}
Script:
jQuery(document).ready(function($){
function fullscreen(){
//Header size change
jQuery('#header').css({
width: jQuery(window).width(),
height: jQuery(window).height()
});
//Navbar size change
jQuery(".menutop").css("background-size", 'auto '+jQuery(window).height()+" cover");
}
Basicaly, what I need to do is to change the height value in the background-size element, with the value provided by "jQuery(window).height()", just like I did with the header.
I'm imaging it's something wrong with the "auto" and the jQuery(window).height(), cause when I use only "cover" it works.
Thank you!
background-size only takes 2 values, not 3. And $(window).height() will return an integer. You need to append px to that string so that it knows what kind of unit you're trying to use.
I'm assuming you want to do this instead.
jQuery(".menutop").css('background-size', 'auto '+jQuery(window).height() + 'px');

How can I allow resizable() to increase size beyond initial size?

Is there a way to decouple css's max-height and max-width from the limits used by JQuery-UI's resizable()?
I have a div that, when initially created, should be limited in size:
.my-div {
max-width: 40em;
max-height: 50%;
}
I want it to be resizable beyond its initial size, but unfortunately resizable() seems to use these attributes to also determine the maximum size for resizing. Trying to override that by passing maxHeight and maxWidth options doesn't work. Is there a way to solve this, or some other-work around that will allow me to limit the initial size of the div and later on allow it to increase via resizable()?
I've found an identical question on jquery.com, but it's unanswered there.
A small reproducing jsfiddle - how can I allow resizing the div to see the ".com" suffix, while keeping only the "stackoverflow" word visible at first?
Did you try resetting CSS values via jQuery (not tested) ?
$(".my-div").css({
"max-width": "60em",
"max-height": "75%"
});
Update :
From you fiddle, I tried this :
.my-div {
width: 90px;
max-width: 130px;
overflow: hidden;
background-color: yellow;
}
Could it solve your problem ?
I ended up just implementing the "maximum" logic on the div manually to limit its size, instead of relying on max-width:
if ($div.width() > limit) $div.css('width', limit);
http://jsfiddle.net/yzn5pnhn/2/

Remaking fixed grid to a responsive grid

I have implemented this fixed grid: http://jsfiddle.net/challenger/UxzCa/1. There are two requirements:
images should fit into a square card div (width/height can be different);
card dimensions shouldn't be fixed.
As for dimensions it is possible to implement using jquery and recalculate widths/heights on window.resize event. Are there alternative ways?
I have a partial solution that takes care of the image aspect-ratio issue and the fixed-width issue.
For the fixed-width of the grid, set the width: auto and this will allow the floats
to wrap to as many lines as required:
.grid-row {
width: auto;
margin: 0 auto;
}
The images need to scale with height if they are portrait (height/width > 1) or width if they are landscape (height/width < 1).
Define the following classes:
.table-cell img.portrait {
height: 100%;
}
.table-cell img.landscape {
width: 100%;
}
and then use the following jQuery method to set the correct class based on the aspect ration of each image:
$('.table-cell').each(function(){
var image = $(this).find('img');
aspectRatio = image.height()/image.width();
if (aspectRatio > 1)
{
image.addClass('portrait');
}
else
{
image.addClass('landscape');
}
});
See Demo Fiddle
Footnote
It may be possible to make the .card elements responsive and maintain their aspect ratio using some CSS techniques similar to the ones presented in the following question:
How do you vertically center absolute positioned text w/o declaring container size and w/o JS?

How to set div height to 100% of user's monitor resolution?

height: 100% in CSS obviously doesn't work. So is there any other CSS or JavaScript/jQuery solutions to this problem? Please advise.
'Let's say your problem element is a <div>. If you make sure your <div>s height has something to reference to, almost all your problems will disappear:
#my_div
{
height: 100%; /* Won't work. What is 100% of an unknown/unset value? */
}
Make sure the <div>'s parents have a set height too. I usually do this (well, not exactly, but you get the idea):
#my_div, #parent_of_the_div, body, html
{
height: 100%; /* This works, but it will show scrollbars if the body
or html elements have padding or margins. */
}
So you want a div to be the height of the screen? It's kind of non-obvious, but css height is the correct approach. The trick is you need to have the html and body elements also take up the full height of the page, otherwise the div is taking up 100% of nothing. The best way I've found to do this is:
html {
height: 100%;
}
body {
height: 100%;
}
#contentDiv {
min-height: 100%;
}
No Javascript required,becouse CSS3 has some new values for sizing things relative to the current viewport size: vw, vh, and vmin
1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger
so you can write it on your style :
#contentDiv {
height: 100vh;
}
With jQuery, you could use:
$('div.class').css('height', $(window).height()+'px');
Pure css
#container {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}
Good Luck
Or javacript Jquery:
Ready (not innerHeight in ie8):
$(document).ready( function(){
var heightwindow = $(document).height();
$('#container').css('height', heightwindow+'px');
});
resize window :
$(window).resize(function() {
var heightwindow = $(document).height();
$('#container').css('height', heightwindow+'px');
});
There are a few options you may find useful:
vh (viewport height)
vw (viewport width)
vmin (viewport minimum length)
vmax (viewport maximum length)
#container{
height: 100vh;
background: black;
}
My answer builds on jonwayne's because there wasn't much explanation.
You cannot use css to get the value of a users monitor, but you can do it via javascript. So the trick is to add javascript to the page load event which will set the height based on the browser window height. Using jQuery, you can do this with the following snippet
// jquery shorthand for onLoad event
$(function() {
// Set the css height property of #div_to_resize to the css
// height property of the browser window
$('#div_to_resize').css('height',$(window).css('height'));
}
You can also optionally attach to the resize event of the browser to reset the height if the window is resized. Combined with the previous snippet it would be
// We extracted this to a function since we reference it more then once
function matchHeight() {
$('#div_to_resize').css('height',$(window).height);
}
// jQuery shorthand for document.onload
$(function() {
matchHeight();
//On the resize event, call matchHeight()
$(window).resize(matchHeight);
});
I don't think you can get the monitor's resolution with any web technology. What you an do is use Javascript to get the browser's height and set the height property of div in the css. This post might help for getting the height.

Categories

Resources