Animate height change on Bootstrap 3 Carousel - javascript

On researching the question "How to animate height change on Bootstrap 3 Carousel" I found this answer, however it doesn't have any effects on my bootstrap carousel. I can't comment yet and ask for clarification there, therefore a new Question.
The solution suggested there is
function bsCarouselAnimHeight()
{
$('.carousel').carousel({
interval: 5000
}).on('slide.bs.carousel', function (e)
{
var nextH = $(e.relatedTarget).height();
$(this).find('.active.item').parent().animate({ height: nextH }, 500);
});
}
But as I said, without any effect. Maybe I should modify any selectors in the Javascript in my case?
Update:
I updated the fiddle so it's actually showing the problem.
All ideas are appreciated! Thanks.

Your code is fine. You're just not calling function bsCarouselAnimHeight() anywhere so none of it is firing.
You can either take it out of the function declaration
http://jsfiddle.net/4HDBe/3/
or call the function at some point.
http://jsfiddle.net/4HDBe/4/

Related

How to FORCE a resize event that will run all resize functions

I am using Masonry.js to create a masonry style blog. The problem with this is, when I click 'Article' for example, my JS makes everything but an article disappear. Instead of all the articles filling in the gaps that were previously filled with other post types, they just stay in the same position.
Once I resize the window Masonry.js does its thing and every gap becomes filled with the articles. My question is how to FORCE this to happen without having to resize the window manually?
Note:
I have tried this link
Forcing windows resize to fire
This will not work.
$(window).resize(function(){
$('span').text('event fired!');
});
$('button').click(function(){
window.dispatchEvent(new Event('resize'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Fire event</button>
<span></span>
This must work (I'm using it right now)
$(window).trigger('resize');
Hope this helps.
EDIT
Note that's jQuery syntax.
EDIT 2
i make a research of masonry.js (I don't meet it before this post), and I think that you can solve this problem like this:
$(window).on('resize', function () {
$('#element').masonry('reloadItems');
});
$(window).trigger("resize");
Good luck
I managed to fix this.
$('#article-options li').on('click', function() {
setTimeout(function() {
var $grid = $('#blog-container').masonry({
columnWidth: 80
});
// change size of item by toggling gigante class
$(this).toggleClass('gigante');
// trigger layout after item size changes
$grid.masonry('layout');
}, 200);
});
Each 'section' of the blog of mine is in a ul called article options so when an option is clicked (therefore changed) it will run this function.
I have set a timeout as JS was running a bit behind and making me click twice for the code to run.
I defined a new masonry grid, I defined this as the overall blog container which holds all posts. I then had code in place which recognised the click function on a section and toggled a class which pops everything back into their correct positioning.
As for details, i'm not too sure as this is not my module. If anyone has any valuable information that might help others, comment and I will update my answer. Thanks everyone.

Jquery dynamic image creation and animate

I'm a bit confused. I've reviewed the jquery information on w3schools, but couldn't find anything about how to create/insert images using jquery. I've viewed several threads on here that seem to pertain to inserting an image dynamically but I can't even get the script to execute just the alert at the top, which makes me think that I've misdone the trigger somehow. If anyone could give me a bit of advice on how to fix what I've done, I'd appreciate it.
<script>
alert("Start");
$(document).ready(function(){
$("#krikri").hover(createGoat(){
$("#krikri").append('<img src="images/goat.png" alt="animated goat" />');;
alert("End function 1");
},trotting(){
$("#krikri").animate({left:'250px'});
});}
You're not calling your functions correctly. The syntax is wrong here.
alert("Start");
$(document).ready(function(){
$("#krikri").hover(function() {
$("#krikri").append('<img src="images/goat.png" alt="animated goat" />');;
alert("End function 1");
}, function(){
$("#krikri").animate({left:'250px'});
});
}

Collapsing menu content

I have a ul menu that collapses, but the content inside each menu li is going a little funny when it's width is toggled.
i tried .slideToggle but couldn't get it to operate to slide into the right button div.
It works well it is just a little clunky. I'm assuming there is a css rule that could fix my issue but I'm a little stuck
JSFIDDLE
this is the rule i am using which you can see in the jsfiddle.
$(document).ready(function() {
$('#menu-active').click(function() {
$('#menu').animate({width: 'toggle'})
});
});
i'm new to javascript so I'm sure there is a better method that I'm unaware of.
Thanks.
I've made modifications on your codes. There are redundant $(document).ready(); and others. I've also modified your css code.
I just created an "illusion" in the modifications I've made and I hope this is what you're looking for.
Here's the updated jsfiddle.
Ok. Earlier i misunderstood your question. Here is the Updated answer with slide effect. But the thing is you need to use jquery ui also. check it out my fiddle.
$(document).ready(function() {
$('#menu-active').click(function() {
$('#menu').toggle('slide', {direction: 'right'}, 1000);
});
$('#close').click(function() {
$('#menu').toggle('slide', {direction: 'right'}, 1000);
});
});
Working JSFIDDLE DEMO

one function not running with jQuery infinite carousel build

so i have tried making myself an infinite carousel using html, css & jQuery and everything is working apart from the back button will not loop, i've spent quite a while doing this now and i'm wondering if anyone has any insight? http://jsfiddle.net/e2SKk/ is where you can see the code! i'm only really doing this because i thought it would give me a chance to learn a lot more, but any criticisms of code layout or technique would be helpful!
specifically its this code thats seems not to work
else if(loopPrev==true){
sliderActive=true
$('.item-holder').css({
'left':clonePos
});
$('.item-holder').animate({
'left':holderPos+$('.slider').width()+'px'
},function(){
sliderActive=false;
});
};
that is only a snippet btw and won't make much sense without the rest!
jQuery is cool to write short scripts.
Your slider code in short:
var width = $('.slider').width();
$('.item').css({width:width});
var $holder = $('.item-holder').css({left:-width}).prepend($('.item:last'));
$('.prev').click(function(){
$holder.not(':animated').css({left:-2*width}).prepend($('.item:last')).animate({left:-width});
});
$('.next').click(function(){
$holder.not(':animated').css({left:0}).append($('.item:first')).animate({left:-width});
});
​
That's the complete code.
See this in action on http://jsfiddle.net/creativecouple/YPU2d/
Pretty cool little slider you have going here! You say you are a beginner? I'd say you've picked up on jQuery quite well! Also before I forget, addressing your comment: if you post something on stackoverflow...it WILL be viewed, likely by many people :). It's rare to come here and receive no help (albeit you may not always get an answer).
Fortunately for you, I've found your problem! It's right here:
else if(loopPrev==true){
sliderActive=true
$('.item-holder').css({
'left':clonePos
});
$('.item-holder').animate({
'left':holderPos+$('.slider').width()+'px'
},function(){
sliderActive=false;
});
};
You are checking whether or not to loop, setting the slider to active, setting the next slide to the last slide in the index (and subsequently pushing it to that at the same time), then you animate as you normally would. This results in two movements: first to the back of the index, then to the value of holderPos+$('.slider').width()+'px'...hence your strange behaviour. This should help:
else if(loopPrev==true){
sliderActive=true;
$('.item-holder').animate({
'left':"-1800px"
}, function(){
sliderActive=false;
})
};
The value "-1800px" is just the last slide in your buffer that I precalculated...you should be able to replace it with your clonePos variable without trouble.
*EDIT: You should also change your variable clonePos to look like this:
var clonePos = '-'+($('.item').index()-1)*($('.slider').width());
It will eliminate a bug when you swap between the last slide in the index and the first slide (a "smooth transition" if you will).
**
Part II
**
In order to achieve the illusion of infinite scrollability you will need to embed a callback "push back" function inside the "left pressed" animation call. It's late here so I haven't tested the code I am about to write but I'm fairly confident it will work for you.
else if(loopPrev==true){
sliderActive=true;
$('.item-holder').animate({
'left':clonePos
}, function(){
$(this).css('left':holderPos+$('.slider').width()+'px');
sliderActive=false;
})
};
If you take a look this isn't much different from the original answer I offered. All we have done is take the callback function for animate, and added a call to slip the position to the original index position. Again, untested, but the idea is that .animate() will slide to the clone, once that is done your callback will swap the clone with the original, and then deactivate the slider.
You weren't very far off! Here's a semantic rule of the animate function (to attempt to help your understanding of the way a callback works):
animate( params, [duration], [easing], [callback] )
params is our left call (to the cloned slide in this case)
duration is ignored here
easing is ignored here
callback is our function() call that does our little david copperfield swap
Hope this helps!

Drop down menu disappearing before I can get to the links

How can I possibly delay the disappearance of the menu by some miliseconds/seconds?
going ahead and editing this fadesettings: {overduration: 350, outduration: 2000}in the js only changes the animation speed. But THAT IS NOT what I want =).
Please check this JSFiddle to see the JS, CSS, and HTML.
Thanks for the help guys
P.S:- about the top:80px gap that you see, I intentionally put it there cuz that's the way I'm styling my site so I want the gap there.
You can user the setTimeout function to add a delay before you call a function.
In your case, if you want to delay the fadeout of the menu, instead of just doing :
$this.children("ul:eq(0)").fadeOut(jquerycssmenu.fadesettings.outduration);
You could do
setTimeout(function() { $this.children("ul:eq(0)").fadeOut(jquerycssmenu.fadesettings.outduration)
}, 2000);
to delay the call by 2 seconds.
Note that I cached the $(this) selector in your fiddle to still be able to access the variable.
http://jsfiddle.net/KB5Ve/
EDIT :
Added comments on the fiddle : http://jsfiddle.net/DBvq7/

Categories