jQuery Variables, Functions, and Conditional Logic Tutorial
ฝัง
- เผยแพร่เมื่อ 27 ธ.ค. 2024
- Join my 2024 Bootcamp course experience learnwebcode.t...
Learn how to use variables, conditional logic and functions to write flexible JavaScript.
Have you put together a neat page infused with JavaScript awesomeness and want to move it from your computer to online so the world can see your JS chops? I’ve partnered with A Small Orange and can now offer my students 20% savings on any hosting plan. Hint: the shared “Small” plan is one of the best bangs for your buck around! p.asmallorange....
Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at learnwebcode.com/
Follow LearnWebCode on Twitter for resources and updates:
/ learnwebcode
Link to the example files shown in the video:
learnwebcode.co...
Link to the first JavaScript with jQuery lesson:
• JavaScript and jQuery ...
Note: The reveal effect shown in this lesson is not terribly useful in real world applications. Most tablets and smartphones cannot run code during the middle of a swipe scroll event so the effect will only run seamlessly on traditional computers / laptops. In short, I wouldn't necessarily use this effect on a production website, but it is a good playground for the sake of learning more about JavaScript variables, functions, and conditional logic.
Also, I recommend not using jQuery's "animate" method whenever possible. Instead, you can simply use jQuery to add/remove a class at the desired moments, and instead use CSS transitions or animations. We'll cover this strategy in future lessons. The jQuery animate method is more dependable in older browsers and devices, but the CSS method provides smoother performance.
Finally, we created the "on scroll reveal" functionality in this lesson from scratch as a learning exercise. If, however you're interested in a more robust and pre-built solution, be sure to search for the existing jQuery plugin named "jQuery WayPoints."
At 24:00 you need to include the css property 'position': relative to make it work:
$(this).css( {
"opacity": 0,
'right':'700px',
'position': 'relative'
});
well done!!
You made my day bro! Thanks!
I don't compliment very often, but you have a natural talent for teaching. Thank you so much, amazing.
one of the best code teachers I've ever witnessed! congratulations, man! thanks so so much!!!
I've watched this video tutorial many times to perfectly understand and pick up your strategies. You are a great teacher. Keep it up!
The way you Teach and organize your content really makes sense and increases the understanding. Thank you for the good work.👍👍👍
This has been one for the best tutorials I have seen.. you are a AWESOME teacher... keep up the good work...
Just a heads up, this kind of caught me out there for a second. If you are having trouble with your direction parameter not functioning, remember that any html element that you apply the revealOnScroll function to must have a position: relative; in order to have the position animated. You can add it directly to your script like so...
if(direction === "right") {
$(this).css({
"opacity" : 0,
"position" : "relative",
"right" : "700px"
});
} else {
$(this).css({
"opacity" : 0,
"position" : "relative",
"right" : "-700px"
});
}
thanks so much bro
Perfect video To transition from my previous c++/c# knowledge into JavaScript and jQuery, thank you! Seems like Everytime I go to learn a new topic you have a video on it 😂
Just a heads up, this kind of caught me out there for a second. If you are having trouble with your direction parameter not functioning, remember that any html element that you apply the revealOnScroll function to must have a position: relative; in order to have the position animated. You can add it directly to your script like so...
if(direction === "right") {
$(this).css({
"opacity" : 0,
"position" : "relative",
"right" : "700px"
});
} else {
$(this).css({
"opacity" : 0,
"position" : "relative",
"right" : "-700px"
});
}
15:37 - 19:55 -
jQuery.fn.revealOnScroll = function(){
return this.each(function(){
})
}
I really do like your videos, this is the fourth time I watched this particular one, your way of teaching is really unique, Thank you so much for putting those videos out.
This was like old but gold, 2020 random video checking really helpful til today :)
You are the BOSS ! I decided to download your every tutorials.....
This is just wonderful, plain sweet wonderful
Thanks a million for just great tutorial, I watch it all online instead of download it
so to appreciate the good hard work and skill you put in these series.
Thanks again, God bless.
First off, great tutorial(s), they are very well done. Second, regarding this specific one... why do you use the
return this.each(function (){
};
inside the revealOnScroll function? I find everything works fine without it. So what's its use? Thanks for the videos!
Great Tutorial. Thank you so much LearnWebCode. My lot of question solved in a single tutorial.
You are a good teacher. I just might learn jquery after all! lol - It has been frustrating in the past not knowing how to implement certain things on my sites that I see other nice sites have. Soon, I will. You have good logic in your teaching.
I don't know why you don't have more subscribers!!
Great tutorial.
Thank you so much for your unique way of explaining, I can not believe that I did not find you sooner, Thanks a million.
Thank you so much for this training. I have just completes your "Web Design for Beginners: Real World Coding in HTML & CSS" course on Udemy and I feel great about it. Also the beginner version of jQuery tutorial which was EXACTLY what I was looking for. You have ex extremely clear way of teaching. :)
I'm confused about the jQuery(".example-photo").revealOnScroll("left"); at 22.08, when the if/else code entered at 23.58 refers to "right'":700px and "right":-700px. In other words, when does "left" come into things? I spotted the two "rights" in the if/else when it was being entered and expected the code not to work, yet it did.
Awesome! I was hoping you would do some javascript tutorials!
You're the best, man!
Amazing, absolutely love it! Thank you very much, this tutorial solved so much problems on my current project. Keep up the good work.
Incredibly useful as usual. Thank you so much for your continued efforts and time. I like that you even took the time to explain, in the comments, why some of the things you showed us are less desirable in the 'real world', even if they make great teaching tools.
A-MAZE-ING tutorial! So much value here alone! Thanks
Again.. Amazing !! just great! :-)
and another question,,
what would you do to avoid passing strings? say you were typing mistakenly "letf"' then it won't pass the if=="left" statement and your code will do something you don't want.. ideas?
Hello, Brad, I discovered you as my favorite and one of the top teachers in the web who knows how to teach. But I have a very important question after watching this tutorial. Why you went so far in jQuery without teaching JavaScript language itself? I can imagine how it would be great to watch your JavaScript 101 or fundamentals to gain the power of programming in JavaScript.
TOM WON : I’ve been very upset and even the other vids with names like “love
frequency “, “release serotonin/dopamine” or whatever sounds nice were
actually not calming me. This particular sound has calmed my suicidal
heart and actually made me feel lighter. KNOWLEDGE AND PLAY OF 20 FOR SHA . THE SUPER THING YOU NEVER SEEN BEFORE . KIDS GONE !
mind blowing training speed and content. .. I am your fan !!!!
Great video but I'm interested to know what type of HTML editor are you using?
Thanks! The name of the text editor I use is TextMate.
This tutorial is killing it !!!
Hi there. Thank you for the tutorial. I am stuck at the bit near the end where you introduce the fading in from the left and right. I have looked over the code visible in the video many times and still cannot get the left and right fade-in to work.
I know that you posted this four years ago but is there any chance you would post a direct link to the script.js file? So stuck people like me can compare direct to the source code to see what's missing?
Found it! learnwebcode.com/tutorial-files/jquery-variables-functions/js/script.js
Wow the source file is significantly different from that covered in the video!
i see you used jQUERY(document) all of the other stuff I've seen jsut use the $(document) are they the same thing?
josh jenkins Yup.
A very clear introduction. Thanks!
Are you planning on doing a Angular 4 tutorial?
I can't thank you enough for all this knowledge! Just awesome!!
Great tutorial man, so would you please reveal the css behind addClasses like animation-complete and hidden, on both if, anyone please
Hi. FYI, the script file isn't on the webpage.
This was very helpful for me, thank you!
Happy new year 2023 ..Great tutorial I ever seen after long time.. today is 2023.01.01..thanks..
thanks man! really useful, but some questions here:
why windowscrollpobottom = windowheight + windowscrollpostop ?
and what exactly windowscrollposbottom > objestoffsettop ?
i know this is simple question, but still got a little confused
Got trouble in my "$.fn.revealOnScroll = function ()".
var objectOffset = $(this).offset();
var objectOffsetTop = objectOffset.top;
When calling "$(".sidebar").revealOnScroll();" the objectOffset.top returns incorrect value- I get the scrollTop value of the window which shouldn't be!
Again when I scroll the page somewhere in the middle and refresh- then for that moment I get the actual "objectOffset.top" value of ".sidebar", but again when start scrolling- that value becomes scrollTop value. I am using "$(".status").html(windowScrollPosBottom + " / " + objectOffsetTop);" for debuggin!
Hi, sorry I have problem with this line: if(!jQuery(".example-photo").hasClass("hidden")){ ,
what is hidden in this line, is it a css class? we should write it ourself, How ? would any body answer my question?
No, you don't have to write yourself any CSS class named "hidden" in your stylesheet, because this "hidden" css class added by our JavaScript function is totally empty and doesn't do anything, except telling the revealOnScroll() function to not hide this html element more than once, since this function is fired every time the user scrolls the page, otherwise the browser would crash by calling the same function again and again.
Look at the source code of the script at:
learnwebcode.com/tutorial-files/jquery-variables-functions/js/script.js
We INITIALLY hide each element to which this function is applied thanks to the following part of the code:
jQuery(this).css({
"opacity" : 0,
"right" : "700px",
"position" : "relative"
});
And just after this code runs a first time, the "hidden" class is added one time:
jQuery(this).addClass("hidden");
But this code will never run a second time for the same html element, because it is wraped within the following conditional statement:
if (!jQuery(this).hasClass("hidden")) { }
(Don't forget that the exclamation point in front of jQuery means 'NOT'.
In other words, ONLY IF the html element has NOT the class "hidden" already been added to it, run the code inside of me. Get it ?
No need to write it, the code takes care of the css....
"hidden" doesn't work if you are using Bootstrap, just replace word hidden from anything you like e.g "close" in the code and it will work fine.
As always great tutorial 😍😍
Very useful Love it.
Thanks.
i Like the simplicity with which you explain in youtube. Could you plz
do a video on Python from basic to professional. (may be python and mysql in developing app like comment/opinion analysis Or any app) It would b very useful for my thesis work. thnx waiting...
hi ..
where can i found the files of this lesson ?
thanks a lot
Udemy
Hi for the love of me I can't seem to apply this to the classes in my HTML I don't know why. I managed to do everything up until we got the offset part, things got hopeless from there on. I don't know why I cant successfully call div id's or classes for the code to work on them, I have followed every code and also tried to just take the final js file and simply call the elements from my HTML but to no avail, please help :-(
You're a really good teacher
getting exciting. Thanks Number Tow
please tell me where's the link for source code ?
great, its not working with me from the first scroll function *im sure of copying every letter u wrote*
Instead of image , I am trying to animate with a paragraph in a fiddle.
Why its not showing animation happening?
It is working fine for me, I did try it with p, div etc.... make sure u r selected the tag correctly specially if they are nested into divs, "hidden" doesn't work if you are using Bootstrap, just replace word hidden from anything you like e.g "close" in the code and it will work fine... hopefully this will works.
Please is the "JQuery.fn" at the start an obligation?
Do I have access to this code?
very good tutorial, well explained 'DO's and 'DON'T's. would be a shame not to press Subscribe button :D. looking forward on buying your course on Uemy. Good work, keep up!
Your teaching awesome, give the html file for learning also
Just saying, loved watching your tutorials. It has definitely enlightened my knowledge around web design and development for sure. Considered my signed up to your Udemy git course now!! ^_^
thank you for this great lesson! !! I am looking for something like this
2022 - Amazing tutorial
Great and super easy to understand! Thanks....
Awesome, well done buddy.
more videos plz,you are great,thanks!
Thanks heaps! Well explained with good examples. Cheers!
Well explained with the nice examples really useful, Thanks man.
$("p").text("this is such a great lecture, please don't stop adding videos like these. wishing you a very good success for the future");
.
Epic work m8, you have epic gr8 videos, can you make more gr8 Today In examples in Jquery/JavaScript?
Note: If you are using Bootstrap don't use class hidden because it will still be display:none even with opacity: 1
good catch Filip, had now clue as i am using Bootstrap lol, Thank alot.
please make the video of jquery like this i have some list >>
1. I want to need a bar when we scroll page the bar automatic increase width that tells how much page is left >>>
2. I want sidebar when we scroll it sticky when reach top and remove sticky when footer close to sidebar this is i really want to please create video like that logical kind of (sidebar like udemy)
Very well explained, Thank you very much
thanks you very much for your video, i learn many things from video! :))))
Just Amazing bro
very good and logical!!
Thank you, that was well done.
.load method is depreciated and thus beginning should now be
"jQuery(window).on("load", function()"
to work with 3.x versions of jQuery
You mean .load to replace .scroll? It doesnt work for me...
Thanks for the review. I haven't used jquery in over 5 years and can't remember anything.
Note to self: watch 1:00-6:00
Variable windowHeight should be declared before, like below .. else it will take the whole document height
var windowHeight = $(window).height();
$(document).ready(function()
Thanks, you are great!
console.log("Thank you!");
well done!
this is how I say genius
You DO know by now, I assume, thatr ins tead of writing "jQuery" you can just type the "$" sign? You did this video back in 2014 and it's now 2017. You can just write "$(function( ) {" to start off a Jquery file.
Yep, you can use "$" and "jQuery" interchangeably. Back when I made this video I was using a CMS that included its own scripts and there was a conflict / battle for the "$" name so I was in the habit of playing it safe and using that instead of "$". Also nowadays, instead of using jQuery's document ready method it's simpler to just include your JS right before the closing "body" tag and just begin your JS file with whatever you need to do.
+LearnWebCode but when you add a js-file and you use jQuery in it the browser will know that it has to load the jQuery scripts on its own or do I need to do something to tell it to?
No yiou just have to make sure that you have the line "" right under the line pointing to the JQuery CDN file and also the 2 files must be in the same folder.
Ok thanks!
Diud I actually help you w. your problem?
'jQuery(window).load' has been depreciated since jquery 1.8
This 'jQuery(window).on('load', function()' is the recommended update from here stackoverflow.com/questions/38650315/why-window-load-is-not-working-in-jquery
it so cool
Great
excuse me, man, but its so fuckin difficult (((