How can I animate multiple div width using animate, when a div has already a width defined in the css of html.
For example. If I have style="width:30%;" in the html, and I want to animate that div from 0 to 30% how can I do it? And do that in multiple divs with the same class?
To animate a div that has no width defined, to a certain value, I know I can do it like this $('div').animate({ width: 'value' }, milisecs); but I don't want to set the width value on the JS and repeating this line multiple times.
I created this Fiddle that may help better understanding.
Thank you in advance.
Try to use data() like,
HTML
<p>Single</p>
<div class="container">
<div class="fill" data-width="80%">
<span><b>Bar One</b></span>
</div>
</div>
<hr>
<p>Multiple</p>
<div class="container">
<div class="fillmult" data-width="90%">
<span><b>Bar 1</b></span>
</div>
</div>
<div class="container">
<div class="fillmult" data-width="50%">
<span><b>Bar 2</b></span>
</div>
</div>
<div class="container">
<div class="fillmult" data-width="70%">
<span><b>Bar 3</b></span>
</div>
</div>
<div class="container">
<div class="fillmult" data-width="20%">
<span><b>Bar 4</b></span>
</div>
</div>
SCRIPT
$('.container > div').each(function(){ // you can use $('.fill, .fillmult').each
var width=$(this).data('width');
$(this).animate({ width: width }, 1500);
});
Live Demo
Related
In my project, I use easyui-layout.
Sometimes, I should load other content from other page with ajax. And these new content will be laied in center region of cenDiv.
The ajax code is:
$.ajax({
.....
success:function(data)
{
$("#cenDiv").html(data);
.......
}
});
Now, I encounter a problem. When the content is too much which overflow cenDiv, there is no scroll. So only part of content display in cenDiv.
Here is my html code:
<body style="height:100%" class="easyui-layout" fit="true">
<div id="firDiv" class="easyui-layout" style="width:100%;height:88%;position:absolute;top:95px">
<div style="background:lightgrey;width:10%;height:100%;padding:10px" data-options="region:'west',split:true,title='Function'"></div>
<div id="cenDiv" class="easyui-layout" style="position:static;height:100%;width:100%" data-options="region:'center',title:''">
<div class="easyui-layout" style="position:static;height:3000px" data-options="region:'north',title:'',split:true">
north-John-Stack
</div>
<div class="easyui-layout" style="position:static;height:100px" data-options="region:'south',title:''">
south-Tyrion-Lanniste
</div>
</div>
</div>
</body>
I have set fit="true" in body, firDiv and cenDiv, but it works fail. Because the height of body, firDiv and cenDiv are changed.
And I tried overflow:auto, but it works fail again.
Just only cenDiv display scroll when content data is too much, while the others div postion is not changed.
Who can help me?
You need to use both max-height and overflow-y on cenDiv:
max-height: 100px;
overflow-y: auto;
Without the max-height, the scroll won't appear.
Anyway, you used too much height:100%, both the div inside "firDiv" have it.
You could change them in such way:
<body class="easyui-layout" fit="true">
<div id="firDiv" class="easyui-layout" style="width:100%;position:absolute;top:95px">
<div style="background:lightgrey;width:10%;height:calc(100vh - 293px);padding:10px" data-options="region:'west',split:true,title='Function'"></div>
<div id="cenDiv" class="easyui-layout" style="position:static;width:100%;height:150px;max-height:150px;overflow:auto;" data-options="region:'center',title:''">
<div class="easyui-layout" style="position:static;height:3000px" data-options="region:'north',title:'',split:true">
north-John-Stack
</div>
<div class="easyui-layout" style="position:static;height:100px" data-options="region:'south',title:''">
south-Tyrion-Lanniste
</div>
</div>
</div>
</body>
Delete position:static, and added
overflow-y:auto
works OK, like:
<div id="cenDiv" class="easyui-layout" style="height:100%;width:100%;overflow-y:auto" data-options="region:'center',title:''">
I currently have x repeative setup of the same class:
<div class="span3">..content1</div>
<div class="span3">..content2</div>
<div class="span3">..content3</div>
How do I target each .span3 class individually without adding some unique id for each of them? Is that even possible?
What I want to do is apply some animation on each .span3 at a time with a little delay inbetween each - like fading one .span3 class up at a time or do some other animation like scale from 0 to 1.
Was trying to figure out if I could somehow add them to an array? And from there on id be able to iterate through the array doing whatever i wanted.
The .span class in more HTML context:
<div class="row-fluid">
<div class="span3">
<span>Headline</span>
<img src="images/thumb_1.gif" class="img-polaroid">
</div>
<div class="span3 frameColor_yellow">
<span>Headline</span>
<img src="images/thumb_2.gif" class="img-polaroid">
</div>
</div>
<div class="row-fluid">
<div class="span3">
<span>Headline</span>
<img src="images/thumb_3.gif" class="img-polaroid">
</div>
<div class="span3 frameColor_yellow">
<span>Headline</span>
<img src="images/thumb_4.gif" class="img-polaroid">
</div>
</div>
//etc...
Any suggestions?
Like this -
$('.span3').each(function(index,element){
var sp = $(this);
// do your stuff with this span
});
Try this:
$(".row-fluid > .span3").each(function (index) {
$(this).delay(index * 500).animate({
opacity: 0
}, 500);
});
FIDDLE
Updated the answer based on #Rodrigo suggestion!
Proberbly you would like to wrap all your span3s inside a container, lets say
<div class="my-loop-divs">
<div class="span3"></div>
<div class="span3"></div>
</div>
I assume that you are using zepto or jQuery
$(document).ready(function () {
$('.my-loop-divs .span3').each(function (index, element) {
// do the animation on $(this)
});
});
I want to create a simple slider like the one I ve shown in the pic.. I have two divs wrapper 1 and wrapper2 separated by a margin of 20px,
I have a button in wrapper 1 clicking on which a new div should come down sliding which should come in front of wrapper 1 and 2,
The code that Ive used is
<div id="wrapper1" style="width:960px; height:200px;z-index:100;">
<a href="#" class="clickMe">
<div id="tab1">
</div>
</a>
<div id="slider" style="width:400px; height:100px; z-index:999;">
</div>
</div>
<div id="wrapper2" style="width:960px; height:200px; z-index:100;">
</div>
and the script looks like
$(document).ready(function()
{
$("#slider").css({"display":"none"});
$(".clickMe").click(function()
{
$("#slider").slideDown("slow");
}
);
});
With this code, what I get is the slider window comes sliding down by pushing wrapper2 downwards instead of coming in front.what could be the issue?
I've put a fiddle together.
Here is the relevant code:
HTML
<div id="wrapper1">
<div class="clickMeWrapper">
<a class="clickMe" id="tab1" href="#">Click Me!</a>
<div class="slider">
</div>
</div>
<div class="clickMeWrapper">
<a class="clickMe" id="tab1" href="#">Click Me!
</a>
<div class="slider">
</div>
</div>
</div>
<div id="wrapper2">
</div>
jQuery
$(document).ready(function() {
$(".slider").hide();
$(".clickMeWrapper").click(function(e) {
e.preventDefault();
e.stopImmediatePropagation();
$(this).children(".slider").slideToggle("slow");
});
});
If something's not clear, please let me know.
I think you should add position:absolute; to "slider", and set its position.
You have to put your slider outside the wrapper elements otherwise the parent child relationship overrides some formatting rules like z-index. position:absolute and other css attributes should be set by jQuery automatically.
You need an absolute position for z-index to work.
I have a layout, which basically contains a
<div class="line" id="#">
<div class="summary">
Some Text
</div>
<div class="summary">
Some
</div>
<div class="summary">
Some long text
</div>
</div>
I want, using jQuery, to expand the height of the <div class="line"> according to the highest child element, I tried fiddling with:
$(".line").attr("id", function()
while ($(this).next().length > 0)
{
ac = $(this).children(".summary").outerHeight();
a = $(this).children(".summary").next().outerHeight();
if (a > ac)
{
a = ac;
}
}
$(this).css("height", a + "px");
});
and no success, what selectors I need to use, and how would I go about achieving this?
if indeed the summary divs are columns in a 3 column layout by applying a float:left on them, you could wrap the container nicely around all three by just adding an extra div and style it with clear:both
So your html would look like this:
<div class="line" id="#">
<div class="summary">
Some Text
</div>
<div class="summary">
Some
</div>
<div class="summary">
Some long text
</div>
<div style="clear:both"></div>
</div>
I have a div with several nested divs. All the child div's are float:left so they are all on the same line. The parent div "newDistractor" has a width of 100% so as it's parent grows it does as well. All of the child nodes have fixed widths of 20px. I want the div "distractorText" to grow at the same rate as it's parent so it occupies all empty space. Any ideas how to do it.
<div class="newDistractor">
<div style="width:20px"> </div>
<div style="width:20px"> </div>
<div class="distractorText">Enter text to add option.</div>
<div style="width:20px"> </div>
<div style="width:20px"> </div>
<div style="clear:left;margin-bottom:-43px;"> </div>
</div>
This could work. It doesn't actually resize the distractorText div, but it might be what you need:
<div class="newDistractor">
<div class="left"> </div>
<div class="left"> </div>
<div class="right"> </div>
<div class="right"> </div>
<div class="distractorText">Enter text to add option.</div>
<div style="clear:left;margin-bottom:-43px;"> </div>
</div>
The CSS for it is basically:
.left { float: left; }
.right { float: right; }
Look at it in action here
edit I cleaned the jsfiddle a little: look now
You could use jQuery's .resize() and then each time count the number of children <div>s, divide it into the current width, and set accordingly.
For this example specifically, you could use margins instead of floating div elements.
<div class="newDistractor">
<div class="distractorText" style="margin:0px 40px;">Enter text to add option.</div>
<div style="clear:left;margin-bottom:-43px;"> </div>
</div>
I haven't tried this right-off, but if you set the width of class "distractorText" to 100%, it should take care of the issue... or to some other "acceptable" percentage (maybe 50).
All religious crusades put aside, the following HTML will do what you need ^L^ :
<table class="newDistractor" style="width:100%">
<td style="width:20px">a</td>
<td style="width:20px">b</td>
<td class="distractorText" style="width:100%">Enter text to add option.</td>
<td style="width:20px">c</td>
<td style="width:20px">d</td>
<td style="clear:left;margin-bottom:-43px;">e</td>
</table>