Develop Reference

How would I make my Bootstrap navbar "collapse"?

I am trying to replicate the scrolling effect from here: http://www.altisliferpg.com/
I have a feeling that they are using a heavily modified version of Bootstrap Navbar, which I have taken from here: http://www.enjin.com/forums/page/1/m/10826/viewthread/8514993-boot-strap-30-navbar-full-module and have changed it to fit into my specific case.
How would I make it so when you scroll down the page, the bar on the top gets "smaller" and scrolls along with the page as you scroll? Thanks

You can use css transitions for the height, font size and whatever else you want changed. Then simply set a scroll listener, which adds a class to the header so the size changes. Quick (and very ugly) example. jsFiddle
$(window).scroll(function () {
if ($(this).scrollTop()) {
$('#header').addClass('small');
}
else {
$('#header').removeClass('small');
}
});

Maybe you should detect the scroll event of the window, after that, set the position of the navbar to fixed and then, perform the animation. Here's an example of the javascript part and a link see it in action:
$(function(){
var performingDownAnimation = false,
performingUpAnimation = false;
var performScroll = function(){
if($("body").scrollTop() > 0) {
if(performingUpAnimation) {
$('#logo').stop();
performingUpAnimation = false;
}
if(!performingDownAnimation){
$('#navbar').addClass('navbar-fixed');
$('#logo').animate({ 'font-size': "12px" }, 1000, function(){
performingDownAnimation = false;
});
performingDownAnimation = true;
}
}else if($("body").scrollTop() == 0){
if(performingDownAnimation) {
$('#logo').stop();
performingDownAnimation = false;
}
if(!performingUpAnimation){
$('#navbar').removeClass('navbar-fixed');
$('#logo').animate({ 'font-size': "48px" }, 1000, function(){
performingUpAnimation = false;
});
performingUpAnimation = true;
}
}
}
$(document).on('scroll', performScroll);
});
On scroll event and position fixed
I edited my response for adding support for the "up" direction too. About using bootstrap for the animation, I have no idea how to do it, and I think it can't be done, because bootstrap is based mainly on applying CSS classes to different elements. CSS classes are discrete, but you are asking for animating something numerical, as the font-size property is. As much, you could create an animation that looks "staggered".

Wow.js repeat animation every time you scroll up or down

I'm pretty new with Jquery. I would like that my animations with Wow.js could run more than once time. For instance: i scroll to the bottom of my page and see all the animations, and if i scroll back to the top i see again the animations like when you scroll down. I hope that I explained myself. I have already seen many websites that repeats the animations on theirs pages but unfortunately I don't remember them and I can't provide a link.
I have already tried this:
$(window).scroll(function(){
new WOW().init();
}
But it repeat the animations also if you scroll a little and it's pretty ugly to see. I try to explain me better: I have a with my animation and if it is focused the animation is triggered, then i scroll down to another div and the previous div is no more visible(not in the window viewport), then again i scroll back to my div with animation and the animation is triggered again.
I'm sorry for this messy question but I really don't know how to explain it.
Thanks in advance!

This example by Benoît Boucart shows how the animation can be "reset" when the user scrolls out of view and back in. The key here is the second function that removes the animation css class when the element scrolls out of view. I wish WOW.js would implement this, but they've indicated that they don't plan to.
http://codepen.io/benske/pen/yJoqz
Snippet:
// Showed...
$(".revealOnScroll:not(.animated)").each(function () {
var $this = $(this),
offsetTop = $this.offset().top;
if (scrolled + win_height_padded > offsetTop) {
if ($this.data('timeout')) {
window.setTimeout(function(){
$this.addClass('animated ' + $this.data('animation'));
}, parseInt($this.data('timeout'),10));
} else {
$this.addClass('animated ' + $this.data('animation'));
}
}
});
// Hidden...
$(".revealOnScroll.animated").each(function (index) {
var $this = $(this),
offsetTop = $this.offset().top;
if (scrolled + win_height_padded < offsetTop) {
$(this).removeClass('animated fadeInUp flipInX lightSpeedIn')
}
});

If a user wants to repeat the animation on both the events i.e.
onScrollUp
onScrollDown
then this will be a good solution for it:
First create an addBox function, it will help to push new elements into the WOW boxes array.
WOW.prototype.addBox = function(element){
this.boxes.push(element);
};
Then use jQuery and scrollspy plugin that helps to detect which element is out of the view and then push WOW as:
$('.wow').on('scrollSpy:exit',function(){
var element = $(this);
element.css({
'visibility' : 'hidden',
'animation-name' : 'none'
}).removeClass('animated');
wow.addBox(this);
});
Solution Courtesy: ugurerkan

Answer by #vivekk is correct I m just adding a working example so that people can easily get this
see the Demo fiddle
<script>
// Repeat demo content
var $body = $('body');
var $box = $('.box');
for (var i = 0; i < 20; i++) {
$box.clone().appendTo($body);
}
// Helper function for add element box list in WOW
WOW.prototype.addBox = function(element) {
this.boxes.push(element);
};
// Init WOW.js and get instance
var wow = new WOW();
wow.init();
// Attach scrollSpy to .wow elements for detect view exit events,
// then reset elements and add again for animation
$('.wow').on('scrollSpy:exit', function() {
$(this).css({
'visibility': 'hidden',
'animation-name': 'none'
}).removeClass('animated');
wow.addBox(this);
}).scrollSpy();
</script>

Continuously scroll an element to bottom and back to top of a parent element

I am trying to automatically .animate the .scrollTop of a <div> contained within another <div>. I have done this so I could hide the scroll-bar thus only display the text. Therefore, I know how to scroll that particular <div> with JQuery as such:
$("#div").animate({ scrollTop: "+=5" }, 200);
But what I am trying to do is to continuously .animate the content until it reaches the bottom of that particular <div> and then animates back to the top of the <div> ( .scrollTop: '0px'). THere is where I am struggling with.
I am currently pulling content into a <div> which the result of a
query. Therefore, I do not know the full length of the content that
will be placed of that <div>.
The <div> that contains the content is within another <div> and I don't think the method to detect the bottom of the <div> works correctly (or perhaps I am doing something wrong).
var div = $(this);
if (div[0].scrollHeight - div.scrollTop() == div.height())
I was wondering if someone can give me a hand with this. Since I have not seen a particular approach like this in this forum or by Googleing for it.
So pretty much what I have is this:
if ($('#resultProviders').scrollTop() >= $('#resultProviders').innerHeight()) {
$('#resultProviders').animate({ scrollTop: "0px" }, 800);
} else {
$('#resultProviders').animate({scrollTop: '+=30px'}, 500);
};
I have also provided a Fiddle for this.
https://jsfiddle.net/trinkermedia/ebhydbp3/5/
Many thanks.

I'd use a scroll function with a parameter, like shown in this fiddle.
function _scroll(goDown) {
goDown = goDown == undefined ? true: goDown;
var frame = $('#resultProviders'),
content = $('#resultProviders ul'),
scrollTo;
if (goDown) {
scrollTo = content.outerHeight() - frame.outerHeight();
} else {
scrollTo = 0
}
frame.animate({
scrollTop: scrollTo
}, {
duration: 2000,
complete: function() {_scroll(!goDown)}
});
}

Things are so simple with GSAP, here is your fiddle: jsFiddle.
JavaScript:
TweenMax.to('#resultProviders', 2, { scrollTo: { y: 'max' }, repeat: -1, yoyo: true, ease: Power2.easeInOut });
Apologies if this wasn't you were looking for or if you were not interested in solutions utilising anything else other than jQuery.

How to flash a tag in HTML indefinitely using Jquery

In a web page I'm writing a user plays a game, once they win, text is supposed to flash. Once the user hits restart the text flashes. I would like to know how I can use Jquery(I have to use jquery as a requirement) to do this?
Thank you for your help!

Below is a snippet that I believe exhibits the requirements you're looking for.
This depends on setInterval and clearInterval to handle a a repeating callback that toggles a CSS class. You can use further css animations / transitions to spruce up the effect more.
(function() {
var flasherInterval = 0,
$flasher = $('#flasher');
$('#win').on('click', function() {
if (!flasherInterval) {
flasherInterval = setInterval(function() {
$flasher.toggleClass('hidden');
}, 250);
}
});
$('#restart').on('click', function() {
console.log(flasherInterval);
clearInterval(flasherInterval);
if (!$flasher.hasClass('hidden')) {
$flasher.toggleClass('hidden');
}
flasherInterval = 0;
});
}());
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="win">Win</button>
<button id="restart">Restart</button>
<p id="flasher" class="hidden">Flashing text!</p>

$(function(){
// loop showing and hiding for 1.5 seconds
while(blink){
setTimeout(function(){ $('#myDiv').hide() , 1500);
setTimeout(function(){ $('#myDiv').show() , 1500);
}
});
don't actually use this code - it's pretty bad , and meant to get you started ... just an idea - this shows for to set a delay , how to show and hide

You could also use the blink plugin. http://antiyes.com/2009/08/24/jquery-blink-plugin/

Having issue with jquery animation effects

Live Example Here
Press any of buttons. Can you see shaky slideDown effect? In fact it must be smooth and slow slide down.
If you've pressed for 1 time any of buttons try to press another one. The show and hide animation of forms is awful.
During anim.
After anim.
How to fix this problems?

The shakiness seems to be happening when each of the elements in the tab is hidden or displayed.
Get the height of each of your tabs and implement your resizing animation to those heights rather than individually animating after each element is hidden or displayed.

Try to play with .animate() and .fadeIn() .fadeOut() .fadeTo(time,opacity) instead of just .show() or .hide()

It's loading quite well for me. However it did take a long time for it to load in the first place. If you go to: http://gtmetrix.com/reports/tural.no-ip.org/ANBNA45n You'll see that your page is loading quite slowly and the stuttering effect you are seeing is probably coming from your computer having issues with the amount of information coming in.

You can try and speed things up a bit by making less $(selector) calls.. cache some of your jQuery objects when you are using them multiple times... also remember you can chain functions on jQuery objects.. jQO.addClass("foo").removeClass("bar"); is the same as jQO.addClass("foo"); jQO.removeClass("bar");
like so...
(function(){
var signin = $("#signin"), signup = $("#signup"), signin_f = $("#signin_form"), holder = $("#holder"), signup_f = $("#signup_form"), f_container = $("#form_container");
$(".button").click(function () {
if (counter === 0) {
signin.removeClass('default_radius').addClass('right_radius');
signup.removeClass('default_radius').addClass('left_radius');
$("#first").animate({
marginTop: "-=150px",
}, 500);
}
});
signup.click(function () {
if (counter === 0) {
holder.addClass('red_border').slideDown("slow");
f_container.show();
signup_f.show(0);
} else {
signin_f.hide(0);
holder.switchClass( "green_border", "red_border", 1000 );
f_container.animate({height:"260px"},1000);
signup_f.show(0);
}
counter++;
});
signin.click(function () {
if (counter === 0) {
holder.addClass('green_border').slideDown("slow");
f_container.show();
signin_f.show(1000);
} else {
signup_f.hide(0);
holder.switchClass( "red_border", "green_border", 1000 );
f_container.animate({height:"110px"},1000);
signin_f.show(0);
}
counter++;
});
})();