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);
}
}
Related
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 created a panel (div) that slides in and out of my nav bar. Right now, it'll open and close once just fine but then it won't respond to clicks anymore.
$('.work-link').mouseover(function(){
if($('.work-link').css('left') === '0px')
{
$('.work-link').off('click');
}
else if($('.work-link').css('left') === '-750px')
{
$('.work-link').on('click');
};
});
$('.work-link').on('click', function(){
$('.work-link').animate({left: '0px'}, 600);
$('.work-link').css('cursor', 'default');
$('.sort-container').animate({marginLeft: '0px'}, 800);
$('.exit-sort').fadeIn(600);
$('.port-type').animate({marginRight: '140px'}, 600);
$('.port-type').text("CLICK THE X TO CLOSE").fadeIn();
});
$('.exit-sort').on('click',function(){
$('.work-link').animate({left: '-750px'}, 600);
$('.work-link').css('cursor', 'pointer');
$('.sort-container').animate({marginLeft: '-750px'}, 700);
$('.exit-sort').fadeOut(600);
$('.port-type').animate({marginRight: '70px'}, 600);
$('.port-type').text("SORT THIS PORTFOLIO BY TYPE").fadeIn();
});
I figured the problem has to do with how I used the .on() and .off() events but I don't know how else to approach it. What am I doing wrong?
The click eventhandler is discarded when you call .off(). To turn it back on, you have to call the .on() function again with the event callback (as if you are calling for the first time).
That is, your .mouseover() call needs to be changed like this:
$('.work-link').mouseover(function(){
if($('.work-link').css('left') === '0px')
{
$('.work-link').off('click');
}
else if($('.work-link').css('left') === '-750px')
{
$('.work-link').on('click', function(){
$('.work-link').animate({left: '-750px'}, 600);
$('.work-link').css('cursor', 'pointer');
$('.sort-container').animate({marginLeft: '-750px'}, 700);
$('.exit-sort').fadeOut(600);
$('.port-type').animate({marginRight: '70px'}, 600);
$('.port-type').text("SORT THIS PORTFOLIO BY TYPE").fadeIn();
});
};
});
PS: Validate syntax/typos as I couldn't test your code.
You can try this : instead of having mouseover handler just use if conditions in click handler as shown below so that you don't have to on / off click handlers again and again.
NOTE:- You should use $(this) instead of $('.work-link') which will be extra load on script. $(this) is the object of clicked element.
$('.work-link').on('click', function(){
if($(this).css('left') === '0px')
{
return true;
}
else if($(this).css('left') === '-750px')
{
$('.work-link').animate({left: '0px'}, 600);
$('.work-link').css('cursor', 'default');
$('.sort-container').animate({marginLeft: '0px'}, 800);
$('.exit-sort').fadeIn(600);
$('.port-type').animate({marginRight: '140px'}, 600);
$('.port-type').text("CLICK THE X TO CLOSE").fadeIn();
}
});
I'm having a bit of a problem with Javascript. I have a list of article titles which, when you click a title, the corresponding article appears on the right hand side (fixed at the top of the page). I have got these articles to fade in/out using Javascript. I also have a function which, when you are scrolled down and click on an article title, scrolls the page slowly back up to the top.
The problem I have is that when the page scrolls up and the article changes at the same time, the animations on both become quite choppy, especially in Safari. Is there any way to make the page scroll to the top first, then make the article change?
I'm basically asking if there is away to make my Javascript functions happen one after the other, rather than at the same time?
Heres my Javascript:
$(document).ready(function () {
$('.scrollup').click(function () {
$("body").animate({
scrollTop: 0
}, 'slow');
return false;
});
$('.articlelist ul li').click(function() {
var i = $(this).index();
$('.fullarticle').fadeTo(500,0);
$('#article' + (i+1)).fadeTo(500,1);
});
});
Any help would be hugely appreciated!
Thank you
I'm guessing you want to keep the click functionality on your article list and only the elements with class scrollup have 2 animations.
$(document).ready(function () {
$('.articlelist ul li').click(function () {
var i = $(this).index();
if ($(this).is(".scrollup")) {
$("body").animate({
scrollTop: 0
}, 'slow', function () {//when animation completes
fadeArticle(i);
});
} else {
fadeArticle(i);
}
});
function fadeArticle(i) {
$('.fullarticle').fadeTo(500, 0);
$('#article' + (i + 1)).fadeTo(500, 1);
}
});
In your call to animate() you'd want to add a function to be called upon completion. The animate function provided by JQuery takes a function as an optional parameter. When the animation completes that function is called.
You could use something like this:
$('.scrollup').click(function () {
$("body").animate({
scrollTop: 0
}, 'slow', showArticle);
return false;
});
showArticle would be a call to a function that fades the article in like the anonymous one in your click listener. You would probably need some way to pass an argument about which article should be shown.
I'm relatively new to this, but I think this may work. What I'm trying to do is enclose each of these as a callable function and then pass one function as the callback to the other.
$(document).ready(function () {
scrollTop(showArticle());
});
function scrollTop(callback) {
$('.scrollup').click(function () {
$("body").animate({
scrollTop: 0
}, 'slow');
callback;
});
}
function showArticle() {
$('.articlelist ul li').click(function () {
var i = $(this).index();
$('.fullarticle').fadeTo(500, 0);
$('#article' + (i + 1)).fadeTo(500, 1);
});
}
I have the below piece of code that moves a onto the screen when ?added is in the URL which works great. I now need to add a piece of code to it that then moves the back over after 5 seconds. I have noticed there's a delay function but I'm not sure how to add it into the code. Can anyone help? Many thanks!
$(document).ready(
function () {
if (document.URL.indexOf("?added") >= 0) {
$('#popout-left-menu-container')
.animate({
'right': '2px'
}, 300);
};
});
You can use the setTimeout function to delay something in javascript. Maybe like this:
$('#popout-left-menu-container').animate({'right':'2px'},300);
setTimeout(function(){
//This is animation that runs after 5 seconds. You can use it to move the block back.
//You have to set your parameters yourself here
$('#popout-left-menu-container').animate({'right':'0px'},300);
}, 5000);
$(document).ready(
function () {
if (document.URL.indexOf("?added") >= 0) {
setTimeout(function(){
$('#popout-left-menu-container')
.animate({
right:'2px'
},300);
},5000);
};
});
You should do it with .delay().
$("query").animate(firstAnimation, firstDuration).delay(milliseconds).animate(secondAnimation, secondDuration);
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.