I am having trouble using some javascript that I am trying to convert from inline to an external javascript document. This code, that I'm trying to place externally does not work.
// JavaScript Document
function homepage() {
$("#button").click(function(){
$("#main, #nav").slideToggle();
if($(this).html() == "-"){
$(this).html("+");
setTimeout(function() {
$('#wrapper').css('top', 'auto');
$('#wrapper').animate({ 'bottom': '0' }, 500);
}, 500);
} else {
$(this).html("-");
setTimeout(function() {
$('#wrapper').animate({ 'top': '0' }, 500);
$('#wrapper').css('bottom', 'auto');
}, 500);
}
});
}
Tries to lock up the script so:
$(document).ready(function(){
// JavaScript Document
function homepage() {
$("#button").click(function(){
$("#main, #nav").slideToggle();
if($(this).html() == "-"){
$(this).html("+");
setTimeout(function() {
$('#wrapper').css('top', 'auto');
$('#wrapper').animate({ 'bottom': '0' }, 500);
}, 500);
}
else{
$(this).html("-");
setTimeout(function() {
$('#wrapper').animate({ 'top': '0' }, 500);
$('#wrapper').css('bottom', 'auto');
}, 500);
}
});}
});
I assume that it "doesn't work" because your jQuery selectors are failing. Put your code inside as $(function () {...}) to insure it runs on DOM-ready.
Your code makes me assume that you are using jQuery. To move a JS file that uses a library like jQuery to an external file, you have to do the following steps:
If the code is inside jQuery and looks like this:
$(document).ready(function(){
// here is all your code
});
Then you have to move all of it, including the $(document).ready(); part into the external file and (best) load it at the bottom of your html page.
Related
I am trying to exceute a javascript function after another div that has been popupated by javascript has loaded. The div has been populated first with javascript is '#am-events-booking'. The function i am trying to use is:
$(window).load(function ()
{
var i = setInterval(function ()
{
if ($('#am-events-booking').length)
{
clearInterval(i);
}
}, 1000);
alert('Page is loaded');
});
I always use $(document).ready() to run code after the page has loaded. Not sure what the difference is, but at least then it works.
Furthermore you need to use .text() to get the text inside an element.
Working code snippet:
$(document).ready(function() {
var i = setInterval(function() {
if ($('#am-events-booking').text().length) {
clearInterval(i);
console.log('Text detected!');
} else {
console.log('Waiting...');
}
}, 1000);
console.log('Page is loaded');
});
setTimeout(loadText, 2200);
function loadText() {
$('#am-events-booking').html("<h2>Hello</h2>");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="am-events-booking"></div>
$(document).ready(findDiv);
function findDiv() {
if($('#am-events-booking').is(':visible')){ // if the div is visible
alert('Page is loaded');
} else {
console.log("loading...");
setTimeout(findDiv, 50); // wait 50ms,
}
}
$('body').html('<div id="am-events-booking"></div>');
<body></body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
you can use is :visible form JQuery to check if div is added or not
I'm building some toggle function written only with JS then I wanted to add some jQuery library inside the JS function. (For a slow and smooth scroll)
However I'm not quit sure what would be the best practise to do so.
function myFunction1() {
if (subContent1.style.display === "none") {
$(document).ready(function(){
$('#container1').animate({ scrollTop: 0 }, 'slow');
});
setTimeout(function(){
subContent1.style.display = "block";
}, 600);
} else {
setTimeout(function(){
subContent1.style.display = "none";
}, 600);
}
}
At the moment I've put
$(document).ready(function(){
$('#container1').animate({ scrollTop: 0 }, 'slow');
}
right after the if statement but it's not working.
Could anyone let me know what'll be the best way to add jQuery inside JS function?
Don't mix DOM and jQuery
Don't use $(document).ready(function(){ in a function. It is not what it is for
Assuming subContent1 is a class, you can do this - it would have been useful to know where you call myFunction1
function myFunction1() {
if ($(".subContent1").not(":visible")) {
$('#container1').animate({ scrollTop: 0 }, 'slow');
}
setTimeout(function() {
$(".subContent1").toggle(); // show if hidden, hide if visible
}, 600);
}
**$(document).ready(function(){}**
is not required in your case,
because this method is a way to run JavaScript code as soon as the page's
Document Object Model (DOM) reload & becomes safe to manipulate.
And jQuery is written is JavaScript only, in other words just a shorthand of JavaScript.
Other code is seems fine in your code.
function myFunction1() {
if (subContent1.style.display === "none") {
$('#container1').animate({ scrollTop: 0 }, 'slow');
setTimeout(function(){
subContent1.style.display = "block";
}, 600);
} else {
setTimeout(function(){
subContent1.style.display = "none";
}, 600);
}
}
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()
I tried to use this code to hide woocommerce-message but it doesn't work.
setTimeout(function() {
$('.woocommerce-message').fadeOut('fast');
}, 5000); // <-- time in mseconds
Do you any another solutions ? I tried to put this code into header.php and my template has space for Custom Header JavaScript Code but nothing works.
if the element pops up and is inserted into the dom randomly you can use an approach like this to remove it.
$(document).ready(function(){
$(document).on('DOMNodeInserted', function(e) {
if ($(e.target).is('.woocommerce-message')) {
setTimeout(function() {
$('.woocommerce-message').fadeOut('fast');
alert("node fading");
}, 5000);
}
});
//object inserted after 2 seconds
setTimeout(function(){
$('<div class="woocommerce-message">Test node inserted </div>').appendTo('body');
alert("node inserted");
},2000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
This worked for me.
setTimeout(function() {
$('.woocommerce-message').fadeOut('fast')
}, 5000);
If you're using wordpress, try
setTimeout(function() {
jQuery('.woocommerce-message').fadeOut('fast')
}, 5000);
This link may help you as well: jQuery | on click fade out and / or automatically fade out
It show the error when we use $(e.target).
so ignoring the I have add tweak.
jQuery(document).on('DOMNodeInserted', '.woocommerce-error,.woocommerce-message', function(e) {
setTimeout(function() {
jQuery('.woocommerce-error,.woocommerce-message').fadeOut('fast');
}, 6000);
});
Good luck.
What's wrong with this code? Probably a lot cus I'm new to jquery. I'm trying to fadeIn the page then fade the background to a different one the fade up and in the nav and set it up so the links will fade the page out and bring in the new page. The code I have now isn't quite working and I think some syntax and formatting is the problem.
$(document).ready(function() {
$('body').fadeIn(1500);
});
$('#background').addClass('background');
setTimeout(function() {
$('#background').addClass('background-blured');
}, 1500);
$("h1").delay(2000).animate({
top: -50,
opacity: 1,
}, 700, function() {
// Animation complete.
});
$('.link').click(function() {
event.preventDefault();
newLocation = this.href;
$('body').fadeOut(500, newpage);
});
function newpage() {
window.location = newLocation;
}
});
Thanks!
$(document).ready triggers as soon as the DOM is fully loaded. Any javascript outside of the $(document).ready block is run while the browser is still loading the page. so if your $('#background') element is not yet loaded to the DOM jQuery cannot add the 'background' class to it. And more than likely only some of your $('.link') elements will have the click event listener added since they weren't yet loaded when the javascript ran. That's why you should embed such things inside the $(document).ready function.
$(document).ready(function() {
$('body').fadeIn(1500);
$('#background').addClass('background');
setTimeout(function() {
$('#background').addClass('background-blured');
}, 1500);
$("h1").delay(2000).animate({
top: -50,
opacity: 1,
}, 700, function() {
// Animation complete.
});
$('.link').click(function() {
event.preventDefault();
newLocation = this.href;
$('body').fadeOut(500, newpage);
});
});
function newpage() {
window.location = newLocation;
}
Notice with proper indentation you can easily see what is inside the $(document).ready function. Also notice you don't put standard functions like your newpage() function inside the $(document).ready.