I have a div with hidden visibility, and I'm putting text in to that div from database so don't know it's height.
What I would like to do is make an animation which would increase that div's size until all text is visible. What I have so far is this:
function display_form () {
$("#form_container").css("visibility", 'visible');
$("#form_container").animate({
height: $("#form_container").height(),
}, 1500);
}
<div id="container">
<div id="form_container"><?php echo $form; ?></div>
<div id="content">
some stuff here which should slide down as the form_container div gets bigger
</div>
</div>
So my problem is that my form_container is hidden, but its size remains, so I have huge empty space. If I set its size to 0px then I have no way of knowing its real size...
I don't think you need to mess with the visible CSS property.
Just do something like this in your CSS:
#form_container { display: none; }
Then your display_form function can just do this:
function display_form() {
$('#form_container').slideDown(1500);
}
Have a look at the jQuery's slideDown. Then you don't have to worry about the height on your own.
Not sure how you are getting text from the database but if you initial have the div hidden, then place the text in the div, then you can simple use the slideDown(1000) function on that div like so:
$('#mydiv').slideDown(1000);
The div will slide down until all the content is shown.
Related
Alright, so I'm a little puzzled about this: as you can see on the site for the Polymer Project, they have tabs that are horizontally scrollable if there are too many. I'd like to replicate this effect, but I can't figure out how to both prevent the <div> elements for tabs from wrapping as well as scrolling. Obviously, JS will need to be used here. Unless it's possible to get a custom scrollbar?
How can I do the above? A non-jQuery solution would be very much preferable.
Should be able to use plain JavaScript or jQuery to compare the calculated width of the inner div to the set width of the outer div. If #inner is wider than #outer, add a class to one of the divs to change how they're displayed. If not, remove the class.
The markup:
<div id="outer">
<div id="inner">
<div class="scroll-button"></div>
<!-- your tabs here -->
<div class="scroll-button"></div>
</div>
</div>
The styling:
#outer{
width:500px;
overflow-x:hidden;
}
#outer .scroll-buttons{
display:none;
}
#outer.has-scroll-buttons .scroll-button{
display:block;
}
Give the divs a fixed height and dynamic length. Where the length property of the div is made by counting the number of columns you want in a div.
Why the aversion to jquery?
I have a page content which have text in it.
underneath the content, there is a navigator bar, and I would like that whenever I Hover one of the element in the navigator, a div will open up just above the element I have just hovered on, and show some content.
I don't want the DIV that will pop-up to push any object on the page, I would like it to be, like up on all of the objects on the page.
some code since I have to insert code tags if I want to post fiddle
here's a fiddle to demonstrate:
Click here for fiddle
In the fiddle, I want that whenever I hover First, the first-feedback will be shown just above him.
This is pretty much my code, I have just used jQuery to calculate my desired width, but I just can't get the div to be above the div he should be above. I can't just calculate by my eye and say how many pixels because the website is pretty much dynamic, so I need a formula to calculate that for me every time.
If you have any code suggestion, such as relocating the feedback div, please feel free to edit the fiddle!
Thanks in advance!
Update: Okay, I did it the way you specified: http://jsfiddle.net/2U7jB/3/. There are other ways to do it - it depends on your HTML.
Original Response: This is close to what you want: http://jsfiddle.net/2U7jB/2/
.popup {
display: none;
height: 35px;
width: 100%;
background-color: blue;
}
<div id="first">
<div class="popup"></div>
</div>
<div id="second">
<div class="popup"></div>
</div>
<div id="third">
<div class="popup"></div>
</div>
$('#first, #second, #third').on('mouseover', function() {
$(this).children('.popup').show();
});
$('#first, #second, #third').on('mouseleave', function() {
$(this).children('.popup').hide();
});
To get what you want, just create two divs inside #first, #second, and #third - the first div for the hidden (popup) content, and the second div for the nav menu / background color.
i have a situation of:
<div class="hey1"><img class="img1"></img></div>
<div class="hey2"><img class="img2"></img></div>
<div class="hey3"><img class="img3"></img></div>
so .img imgaes are in position:absolute; binded to right top corner of related .hey div
when i fadeOut(); for example .hey1 div, the other .hey2,.hey3 divs scrolls more on top (right) but images binded remains on same absolute position, what i would like is to bind .img images also when fading out related div
any way to do that?
Make sure your container divs have position.
Example: http://jsfiddle.net/redler/D6Ucg/
In the example, click a yellow box to make it fade out. Then see what happens if you re-run the test after removing the div { position: relative; } style.
Instead of positioning img elements absolutely with in div elements, position them relatively. This way they will move along with the div when div is re-positioned through scroll or programmatically.
Here's an example: http://la.truxmap.com/truckpage?id=coolhaus
When I make the browser window narrower from the right hand side, the recent tweets div will go underneath the container div. i want to make it so that the recent tweets div can go no further left than the right hand border of the container div. Ive been trying to figure out if it can be done with css, but i cant seem to get it. is there a simple javascript solution that fits the bill?
Thanks!
You can either choose to work with a liquid layout or use the css property position.
Liquid layout:
You got 3 DIV's in your wrapper divand you want them to resize on a smaller browser window, you can do this with percentages that become variable widths :
css:
.wrapper {
width:100%
}
.divleft {
float:left;
width:20%
}
.divmiddle {
float:left;
width:60%
}
.divright {
float:left;
width:20%
}
html:
<div class="wrapper">
<div class="divleft">left</div>
<div class="divmiddle">middle</div>
<div class="divright">right</div>
</div>
As i said, the other possibility is the assigning the css property position to your different DIV's.
Try it yourself, its fairly easy:
http://www.w3schools.com/Css/pr_class_position.asp
You can also keep them from overlapping vertically:
.noOverlap{
float:left;
width:100%;
}
I would love to display the following list of text in sequential order, with fadein/out effect and eventually display the image and stops at there. I also would love to display all these texts in center.
<div>a<div>
<div>b</div>
<div>c</div>
<div>d</div>
<div><img src="mypict.jpg" alt="my pict" /></div>
This are all I have for the page, I want to make it as an intro page. I know jquery has fadein() and fadeout(), and I have tried the innerfade plugin. But it always place the text on the left and it loops infinitely.
Give the last div containing the image a class of "last":
<div class="last"><img src="mypict.jpg" alt="my pict" /></div>
$('div').each(function(){
$(this).fadeIn('slow');
if(!$(this).hasClass('last')){
$(this).fadeOut('slow');
}
});
You can also setTimeouts or callback functions within the fadeIn's and fadeOut's if you want something to happen afterward.
Pretty much copy-pasted from this page, at old.nabble.com
$(function() {
var $sequence = $('div').hide(), div = 0;
(function(){
$($sequence[div++]).fadeIn('slow', arguments.callee);
})();
});
Use CSS to position the divs in the center (horizontally):
div {margin: 0 auto; width: 50%; text-align: center; }
Width is defined since a block element -the div- would otherwise take the whole horizontal space. The text-align: center; is if you want the text to be centered within the divs.