I am using mootools 1.2 in a simple page. There's a div that displays a form (call it formdiv) that gets submitted via JS/ajax. The ajax request returns some data "confirmation message".
However, the formdiv div starts out maybe 500px high to accomodate the form elements. When the ajax request returns a variable-length return data ("confirmed for submission!") the div stays 500px high, leaving a lot of extra space.
My question is, is there a way to snap the div back to fit the new content after updating the content using innerHTML?
Thanks
EDITED: to add that the data returned by the Ajax call could be variable length-- so I can't assume it'll be a certain height and then reset the div to that height.
If your div starts off with predefined height using CSS then all you should do is set its height to auto or clearing styles altogether when they were set inline.
Check this JSFiddle (it works with jQuery here, but that doesn't matter when it comes to browser rendering div in question)
Okay I realize that this is like a year late but I came across this question while attempting to find a script to do just this. This was a great starting point but I felt like I should share the method I choose to use:
Get the current actual height of $('element').
h.before = $('element').getSize().y;
Fx.Morph can't handle setting the height to 'auto' so first you must set height: 'auto' on $('element') (in case it hasn't been already) and then set the html to the new content. This will allow you to get the new content's height.
$('element').setStyle('height', 'auto');
$('element').set('html', "Some other content.<br/>Very short.");
h.after = $('element').getSize().y;
Reset the height and then start the Fx.Morph with h.after.
$('element').setStyle('height', h.before);
var myEffect = new Fx.Morph('element', {
onComplete: function() {
$('test').setStyle('height', 'auto');
}
});
myEffect.start({'height': h.after});
You can check out the full code here: http://jsfiddle.net/cd4R9/
Please understand this is method is very basic and a lot would have to be done to make this site-ready. For example if your $('element') has padding, you will have to account for it or use the CSS property box-sizing: border-box;. Hope this helps.
Related
I'm having a problem which at first I thought it was the general configuration of my app and the height I was giving to my page wrapping classes. But I made a simple out of the box material ui tab example and it seems this is natural to material ui Tabs Component.
Material UI tabs component gives their tab container the same height, being that height the largest of all its containers. So if you have one tab content with lots of content in it, it makes the other tab contents just as large, even though they may only have one text field and a button in them.
How can I make it that the height of the container adjusts to the content of its own tab?
Here is a visual
Here is why TAB ONE is so large, TAB TWO is setting the height
Here is a webpackBin for you to see the code working and mess with it.
One hack I've done so far is setting a definite height and overflow, but I don't want to do that because it creates a double scroll bar (one in the tab container, one in the body) besides, it's buggy looking.
I would like it if the tab container (the one with the green border) adjusts to the content as it does in TAB TWO, BUT individually.
Thanks in advance!
If you set the height based on the given element's current visibility you will be able to resolve this issue.
Example
.react-swipeable-view-container > div[aria-hidden="false"] {
height: 100%;
}
.react-swipeable-view-container > div[aria-hidden="true"] {
height: 0;
}
Note: this solution could be improved by using a better selector, something more descriptive like a class name. I suppose it's subjective though, using an attribute selector is not technically wrong and actually more specific than just a class.
Demonstration: https://www.webpackbin.com/bins/-Ky0z8h7PsdTYOddK3LG
animateHeight will animate height on tab change. if all tabs have different height it will show height accordingly.
Example:
<SwipeableViews
animateHeight // it will animate height on tab change
>
<div>{'slide 1'}</div>
<div>{'slide 2'}</div>
<div>{'slide 3'}</div>
</SwipeableViews>
Happy Coding ...!
There's a merge request that have been accepted here on the lib that could be interesting with a new method called updateHeight https://github.com/oliviertassinari/react-swipeable-views/pull/359
<SwipeableViews
action={actions => {
this.swipeableActions = actions;
}}
animateHeight
>
<div>{'slide n°1'}</div>
<div>{'slide n°2'}</div>
<div>{'slide n°3'}</div>
</SwipeableViews>
Then:
componentDidUpdate() {
this.swipeableActions.updateHeight();
}
Is it possible to set a horizontal scrolling feature so that it scrolls to (overflow, I'm assuming, unless there is another way) the left as well as the right. Sort of like this picture:
a horizontal scrolling feature
... except I want to load the object just like it is in that photo but have other objects (images rather than the divs pictured) back behind to the left of that first object), so you can scroll to unseen things in both directions.
EDIT: in response to some of the people offering to help here (thanks), I have composed a fiddle (in the comments below). The hope is that I could load this horizontal feature with the blue-border box at far left (on initial load) and people could scroll back or forth). I'd prefer (but I'll take either one) it to be marked to load on that box rather than css it so it would load after a certain width or something like that, because I want to it to function this way universally (regardless of how many objects are hidden to the left) but, again, I'll take either solution, because I can probably make it work with either.
Here is a quick mockup of something like that. It can be extended to use scroll events. Used jquery but it can be done in pure js too. Just made the body hide the overflow like this
body {
overflow: hidden;
}
I have buttons to move it around but as I said you can do it with scroll events too.
function left () {
var div = document.getElementById('scrollContainer');
$(div).animate({ "right": "+=100px" }, 500);
}
function right () {
var div = document.getElementById('scrollContainer');
$(div).animate({ "right": "-=100px" }, 500);
}
Fiddle: http://jsfiddle.net/hna6jkzk/
And obviously the divs can be images too.
A fiddle with no JS and visible scrollbar: http://jsfiddle.net/hna6jkzk/1/
A fiddle with no JS and hidden scrollbar: http://jsfiddle.net/hna6jkzk/2/
I have a table with clickable rows using this js:
jQuery(document).ready(function ($) {
$(".clickableRow").click(function () {
window.document.location = $(this).attr("href");
});
but, I have ajax search for data in table and when is table displayed by ajax, js doesn't work any more. So I wrap every content of every with in that ajax table. So it is looks like: http://jsfiddle.net/fo1tvdyf/4/
Width works fine, but height isn't 100% :( Any one have some idea? Sorry for my english.
You need to give your a display:inline-block so it can correctly assume any given dimensions
Assuming your a has the class clickableRow:
.clickableRow{
display:inline-block;
}
Though note that percentage values are calculated relative to the parent container- as such, you may also need to give the encapsulating element a height value.
Is there a way to move down by some pixel a div with a text inside? (Maybe using jQuery or w/e)
The effect I would get is like when stackoverflow shows at top the yellow message (for a badge) But I need it inside a page, without moving down all the rest of the page
EXAMPLE:
http://img690.imageshack.us/img690/7324/senzatitolo2mb.jpg
(I would add a fade effect too while the message is moving down)
Ps. Please consider the message can be more than 1 (just like stackoverflow at top)
with jQuery this would be done like:
<div id="message">Some message</div>
$("#message").slideDown(500); //where 500 is the time effect in miliseconds..
Online demo: http://jsfiddle.net/NzPfM/
Se more about jQuery effects here: http://api.jquery.com/category/effects/
If you want to slide it down and fade it in at the same time, then you should use .animate() instead, something like:
$("#message").animate({height:"30px", opacity:1 },500);
Online demo: http://jsfiddle.net/NzPfM/1/
UPDATE: If you want to avoid moving other content while animating you can use position:absolute in css see demo below:
Demo avoiding push down: http://jsfiddle.net/NzPfM/2/
You can set the div to position:absolute and then animate it down using jQuery.animate to change the top style.
read about jQuery.animate here: http://api.jquery.com/animate/
You can see a simple example here: http://jsfiddle.net/NsxTa/
Note: This method as opposed to using the slideDown will actually slide the entire div down from it's hiding place, where as slideDown will just reveal statically positioned content, which imo looks really awefull
Assuming that your page is not laying inside some container with position-absolute,
adding a container element as fist child of the body will push down render all the rest of the page.
(container - any HTML tag that contains HTML. usually DIV).
This is an example using pure javascript:
http://jsfiddle.net/osher/ByngB/
connect the "add" to your messaging event, or render the on the server
connect the "remove" to the close button of the message bar
and that will be all :)
function $e(s){ return document.getElementById(s) }
function add(){
var d = document.createElement("div");
d.innerHTML = "your message: " + $e("txt").value;
document.body.insertBefore(d, document.body.firstChild);
}
function remove(){
// assuming that your page content is wrapped in a div with ID="content"
if (document.body.firstChild.id == "content") return;
document.body.removeChild( document.body.firstChild);
}
The coding is done using VS2008
There are two divs in my page namely "dvLeftContent" and "dvRightContent".
I cannot statically set the height of the pages since "dvRightContent" have variable heights on various pages (Master Pages are used here)
Is there a client side function(javascript or jquery) that takes the height of the right div and assigns it to left div?
Using jQuery:
$("#dvRightContent").bind("resize", function(){
$("#dvLeftContent").css('height', $("#dvRightContent").css('height'));
});
There is also a jQuery plugin which does the job for you: Equalize
It handles both the scenario where rightcol is larger then leftcol or where leftcol is larger than rightcol. It also allows you to specify which element inside either leftcol or rightcol should get the space added.
Thanks micahwittman. Some minor changes
$("#dvRightContent").resize(function(){
$("#dvLeftContent").css("height", ($("#dvRightContent").attr("offsetHeight") - 250 ) +"px");
});
Its because height will give only "auto" in this case as its set like that