We Keep Coding

Make Auto and Manual ScrollTop() works without conflicts

I'm doing scrolltop when the document is ready, that's work, but I'm giving the same script to a div to make the scroll manual. The problem is, if I use the auto-scroll, the manual scroll doesn't work.
Manual scroll
$("#flecha-inscripciones").click(function() {
$('html, body').animate({
scrollTop: $("#formInscripciones").offset().top
}, 2000);
});
With:
<div id="flecha-inscripciones"><img src="https://residenciarucab.es/img/arrow-down.png" alt="Baja para ver" title="Baja para ver"></div>
Autoscroll:
$( document ).ready(function() {
$('html, body').delay(5000).animate({
scrollTop: $("#formInscripciones").offset().top
}, 1100);
});
You can see example here.
It only works the auto-scroll because the manual scroll has conflict.

Solved with queue: false; after the code.

Put below code at end of your, but before that include jquery.js file
$.noConflict();
jQuery(document).ready(function($){
$("#flecha-inscripciones").click(function() {
$('html, body').animate({
scrollTop: $("#formInscripciones").offset().top
}, 2000);
});
$('html, body').delay(5000).animate({
scrollTop: $("#formInscripciones").offset().top
}, 1100);
});

Bind function blocking click function from working?

I have a few click functions in my code that aren't working since I added the .bind() function. I don't know if that's actually the problem, but I can't think of anything else it would be.
The way the code is supposed to work is:
load data from xlsx file
load content from a different html file
runData()
proceed as normal (click functions as needed)
Here's the JS:
oReq.onload = function(e)
{
// doing something... //
$(document).trigger('complete');
}
jQuery(document).ready(function()
{
$('#videoButton').click(function()
{
$('html, body').animate(
{
scrollTop: $("#video").offset().top - 225
}, 1000);
});
// BACK TO TOP
$('#toTop').click(function()
{
$('html, body').animate(
{
scrollTop: $("#about").offset().top
}, 1000);
});
});
$(document).bind('complete', function()
{
console.log(jobs); //global variable
console.log(sponsors); //global variable
setTimeout(function()
{
runData(jobs);
}, 0);
});

The .bind() was not the issue, it was because the button was added dynamically. I was able to fix it by changing
$('#videoButton').click(function()
to:
$(document).on('click', '#videoButton', function()

changing window.load scrollTop animation speed based on page

I've setup my site to scroll past a mandatory header element by using a scrollTop to a certain div function. I specifically set it to scroll slow so that the user "knows the header is up there" but on subsequent pages, I'd rather it just start at that scrolled position.
I'm trying to use a simple if / else statement to grab the wordpress page (is_home) and set the animation to 1200, else set the animation to 0. I've even gone in and setup a custom field on the page of is_home and True. But it's still not working. Any ideas how to fix the if / else or suggestions for a better way to implement this?
if (is_home()) {
$(window).load(function () {
$('html, body').animate({
scrollTop: $("#grey").offset().top
}, 1200);
});
} else {
$(window).load(function () {
$('html, body').animate({
scrollTop: $("#grey").offset().top
}, 0);
})
}

Well, if(is_home()) is a php statement from the WordPress API, which isn't available in JS. You could include different script calls based on this, but it's rather bad practice in my opinion.
Make sure the below is executed after your plugin, and jquery obviously. Good place might be after wp_footer()
<?php
if (is_home()) { ?>
<script>
$(window).load(function () {
$('html, body').animate({
scrollTop: $("#grey").offset().top
}, 1200);
});
</script>
<?php } else { ?>
<script>
$(window).load(function () {
$('html, body').animate({
scrollTop: $("#grey").offset().top
}, 0);
});
</script>
<?php } ?>

You are combining php and JavaScript together. is_home() is a PHP statement
You need to rewrite your code as below:
<?php
if (is_home()) {
?>
<script type="text/javascript">
$(window).load(function () {
$('html, body').animate({
scrollTop: $("#grey").offset().top
}, 1200);
});
</script>
<?php
} else {
?>
<script type="text/javascript">
$(window).load(function () {
$('html, body').animate({
scrollTop: $("#grey").offset().top
}, 0);
});
</script>
<?php
}
?>
Also use jQuery instead of $ to avoid conflict any other JavaScript libraries

Using setTimeout to delay timing of jQuery actions

I am attempting to delay the swapping of text in a div. It should operate like a slider/carousel for text.
I must have the code wrong, as the final text replacement never happens.
Also, how would I animate introducing the replacement text (window blinds, for eg.)?
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script type="text/javascript">
$(document).ready(function() {
$("#showDiv").click(function() {
$('#theDiv').show(1000, function() {
setTimeout(function() {
$('#theDiv').html('Here is some replacement text', function() {
setTimeout(function() {
$('#theDiv').html('More replacement text goes here');
}, 2500);
});
}, 2500);
});
}); //click function ends
}); //END $(document).ready()
</script>
</head>
<body>
Below me is a DIV called "theDiv".<br><br>
<div id="theDiv" style="background-color:yellow;display:none;width:30%;margin:0 auto;">
This text is inside the Div called "theDiv".
</div><br>
<br>
<input type="button" id="showDiv" value="Show DIV">
</body>
</html>

.html() only takes a string OR a function as an argument, not both. Try this:
$("#showDiv").click(function () {
$('#theDiv').show(1000, function () {
setTimeout(function () {
$('#theDiv').html(function () {
setTimeout(function () {
$('#theDiv').html('Here is some replacement text');
}, 0);
setTimeout(function () {
$('#theDiv').html('More replacement text goes here');
}, 2500);
});
}, 2500);
});
}); //click function ends
jsFiddle example

Try this:
function explode(){
alert("Boom!");
}
setTimeout(explode, 2000);

You can also use jQuery's delay() method instead of setTimeout(). It'll give you much more readable code. Here's an example from the docs:
$( "#foo" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );
The only limitation (that I'm aware of) is that it doesn't give you a way to clear the timeout. If you need to do that then you're better off sticking with all the nested callbacks that setTimeout thrusts upon you.

This is how I solved the problem
The menu closes a few seconds after mouse out (that if hover didn't fire),
//Set timer switch
$setM_swith=0;
$(function(){
$(".navbar-nav li a").click(function(event) {
if (!$(this).parent().hasClass('dropdown'))
$(".navbar-collapse").collapse('hide');
});
$(".navbar-collapse").mouseleave(function(){
$setM_swith=1;
setTimeout(function(){
if($setM_swith==1) {
$(".navbar-collapse").collapse('hide');
$setM_swith=0;}
}, 3000);
});
$(".navbar-collapse").mouseover(function() {
$setM_swith=0;
});
});

How to add smooth scrolling (to page top) to this jquery script?

Can anyone show me how to add smooth scrolling (to page top) to this jquery script?
Many thanks.
<script type="text/javascript">
$(function () {
$('#rbSubmit').formValidator({
scope: '#form_register',
onError: function () {
if ($('#input_2 input').hasClass('error-input')) {
$('#r2 div, #r2 input').css('background-color', '#C1272D').css('color', '#FFF');
$("#error-div").show();
} else {
$('#r2 div').css('background-color', '#2F2F2F');
$("#error-div").hide();
}
}
});
});
</script>

Try:
$('html, body').animate({ scrollTop: 0 }, 'slow');

hi Erik why dont u try jquery easing
jquery easing examples