Is it possible to open div smoothly to full size of its content? If:
content of the div - text of any size
div initially displays some of the text ({overflow:hidden; height: 100px;})
It should be crossbrowser solution, appearance of scrollbar is unacceptable.
Thanks.
Here is the solution thanks to #Tryster.
you can do it with jquery
$("#your_div_name").show('slow');
or
$("your_div_name").slideDown('slow');
I seem to remember the scrollHeight property of an element should return the length of the content. You could then use this to call jQuery.animate on the height.
http://jsfiddle.net/efortis/vxS6y/
$('.smooth').slideUp(350).delay(800).fadeIn(400);
Related
I have a problem getting the width of a div's content (of the content, not the div itself).
The usual approach would be Javascript's scrollWidth property, I think.
The problem: within this div, another div is positioned absolute and has a negative right value (-350px). I can't change this (it's a menu, sliding in when you click a button, overlapping other elements. It needs to be positioned like that).
The scrollWidth returns the width of the outer div's content PLUS the negative right-value (in Chrome, didn't test other browsers).
Here's a short example:
/* ... */
http://jsfiddle.net/R4Cs5/12/
But I need the content's width that is accessible by scrollbars.
Any ideas?
Please use Jquery, no plain Javascript.
Thanks in advance.
I see that your jsfiddle doesn't import any jQuery library, while you wanted to use it. Anyway, with jQuery you can use .width to get an element's width see here: jsfiddle.
I have a div of fixed dimensions into which some JavaScript functions will be placing text over time. When the amount of text exceeds the height of the box, a scrollbar appears thanks to overflow:scroll.
The new problem is that the view into the div stays at the same place as more content appears. What I mean to say is that it stays scrolled wherever it is as more content appears beneath, hidden unless you manually scroll down. I want to make it automatically scroll to the bottom as new content appears so that the user naturally sees what appeared most recently instead of what's oldest.
Ideas?
You can use scrollTop method after each text addition:
$("div").scrollTop($("div").children().height());
Use inner block to get the true height.
DEMO: http://jsfiddle.net/eyY5k/1/
I found this approach to work for my needs:
var realHeight = $("#history")[0].scrollHeight;
$("#history").scrollTop(realHeight);
Do note this uses jquery.
I wanna order div like in the image below any one can help?
All div has specific width but they don't have Height restrict. There can be 4 div each column and next div (5th div) goes bottom of 1st div but space of top and bottom div must be same(margin:5px)
Thanks.
Nathan's suggestion is a good one - there is also Masonry, which relies on jQuery as well.
You can't do this in pure CSS, as it goes horizontal, as you progbably know. For a jQuery solution, check out a plugin like the Columnizer jQuery Plugin.
Check out https://stackexchange.com/sites it uses Isotope!
I am a beginner to the UI ,so I need a sample code.
Check out:
changing an elements css position after scrolling down the page
Replace the ul stuff with whatever your div's name is and the fixed stuff with whatever your classes name is for the div when it's scrolled (and supposed to be fixed).
Hope this helps.
you can do this by css also...use position:absolute
I have a page with many divs and style, with my div buried somewhere inside.
I am trying to have a button that automatically makes my div, that includes a video player, resize and capture the whole browser.
In order to do that I am trying to get the current position of the div and then position it relatively so that it'll get to the top-left corner so I could then use document.body.clientHeight/clientWidth.
Can't get this to work.
I tried the approach of moving my div to the first div and then resizing however this messes up the flash player.
Any ideas? any different approaches?
Thanks,
Guy
Use one of the lightbox clones that can handle DIVs. They usually copy the DIV in question into their own view DIV, which helps with positioning issues and you don't have to do anything to the buried div.
I find Multi-Faceted lightbox to be very easy for customizations:
http://www.gregphoto.net/lightbox/
but there are lots of others around as well.
Why relative?
You should rather use fixed instead of relative. Then set positon to 0,0 and width and height to 100%.
Simple js can do this.
On click, just set the div's style to 'fixed', and position 0,0. Like:
var theDiv = document.getElementById('yourDivsId');
theDiv.style.position = 'fixed';
theDiv.style.top = 0;
theDiv.style.left = 0;
This should do the trick:
<div style="position:absolute;top:0;left:0;width:100%;height:100%">
some content here
</div>