jQuery Code Explanation

1

I cannot understand this code while using bootstrap scrollspy. Can anyone help?

3

Can you post a sample of the code that’s confusing you?

4

For postin code: Paste your code and select it, then click </>.

5

Sorry. I had posted the code earlier, but I did not know that we need to use </> as well. In the “Build a Personal Portfolio” Project, I was trying to understand bootstrap smooth scrollspy. It would really solve my problem. codepen link:

The script is a little tricky to me as I am new to this:
(FYI, I googled, but it didn’t help much)

$(document).ready(function()
{
  $('body').scrollspy({target: ".navbar", offset: 50});

//I guess this will add scrollspy to the body. But why didn’t we use prop(). can we add properties in this manner as well?

  $("#myNavbar a").on('click', function(event) // This is if any anchor on navbar is clicked
   {
   
        if (this.hash !== "") **// Dont understand why is it compared to ""** 
       {
           event.preventDefault();//To prevent the default action taken by the anchor tag
           var hash = this.hash;**// Dont understand this why is hash being stored in a variable** 
           $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
  
        window.location.hash = hash;
      });**// How is the animate function working?** 
    }  
  });
});
6

For first snippet
u use prop to indicate flavour of element like selected, readonly etc…
but with function u create event handler for monitoring scroll behaivor
so u tell function that your scroll want to be indicated in .navbar by target,
and by offset,u tell to not indicate at beginning ( u can see there is no indicator in navbar at top of page *page not scrolled ), so u want to user first scroll for 50px… ( change this 50, to see reflection )

sec snippet
this.hash refer to href in a tag
<a href='#mySection'....
so u validate first hash with !== ""
then u store in variable because
when function from ( jQuery === $ ). animate is called, this keyword will not refer to scrope of where your this.hash was
( in function $('$myNavbar a').on —*---- this keyword refer to clicked element )

This can be solved also by saving this reference to variable lets call it self
and then in animate u can use it like

$('html, body').animate({
        scrollTop: $(self.hash).offset().top

and last question
function animate works like
have three paremeter
first what to change ( like margin or background etc… )
second how long will be duration of animation
and last is function that will be called at the end of animation

so u want to your top bar in browser where is your URL to indicate that u are at some element in your page other then default
like
/www.mywebsite.com/#mySection

7

Hello guys I have a really Problem with Jquery my functions only play on time and finished i put a “Whlile Loop” but dosent fixed anything plz help me with my code this is my code tnx

$(document).ready(function(){
$(’#goLeft’).on(‘click’, function(){
if($(".myWorks").css(“opacity”)== “0”)
{
$(’.wrap’).animate({
marginRight : ‘1045px’
},“slow”);
$(’.about_me’).toggleClass(“Visibility_to_visible”);
}
else{
$(’.myWorks’).toggleClass(“Visibility_to_Unvisible1”);
$(’.wrap’).animate({
marginRight : ‘1045px’
},“slow”);
$(’.about_me’).toggleClass(“Visibility_to_visible”);
}
});
////////////////////////////////////////////////////////////////////
$(’#goRight’).on(‘click’, function(){

if($(".about_me").css("opacity")== "0")
{
   $('.wrap').animate({
  marginRight : '20px'
},"slow");

$(’.myWorks’).toggleClass(“Visibility_to_visible1”);
}
else{
$(’.about_me’).toggleClass(“Visibility_to_Unvisible”);
$(’.wrap’).animate({
marginRight : ‘20px’
},“slow”);
$(’.myWorks’).toggleClass(“Visibility_to_visible1”);
}
});
});