HTML and JQuery slide up correct placement


#22

Hi there codeispoetry,

I should point out that I have never had a career as a web developer. :unhappy:
My last thirty years of employment, before retirement, were spent as
a simple milkman and then a simple postman. :biggrin:

I started coding when I was given a p.c. about 18 years ago and
accidentally found, a little while later, the "View Source" button. :winky:

Intrigued, I joined many of the coding forums that were prolific back then.

Problem solving in those forums was my preferred method, and my main
reason, for learning how to code, as I firmly believed that it would help
stave off the onset of senile dementia. :shifty:

I have never been comfortable with "javaScript". :eyebrows:

The little that I know, used to be referred to as DHTML.

Not really, as I have no interest in any problem which involves
working with frameworks. :wonky:

I suppose you could say that I do not believe their code is poetry. :unhappy:

coothead


#23

Nice!


#24

Hi there @coothead, what portion of the code is causing it to appear from right to left when it first appear or left to right when it disappears?


#25

The displayout class is toggled and the css handles the transition.

if (  w.pageYOffset >= 50 ){
           el.remove( 'displayout');
        }
     else {
           el.add( 'displayout');
        }

The default is right:1.25em but when the class .displayout is added to .classscrolltop it moves off screen to the right (right:-3.25em) and consquently when the class is removed it goes back to right:1.25em.

Relevant css:

.classscrolltop {
    right: 1.25em;
 }

.displayout {
    right: -3.25em;
 }

#26

Hi there codeispoetry,

Edit:

it appears that @PaulOB has typed a little quicker than me. :wonky:

In the CSS...

.classscrolltop {
    position: fixed;
    bottom: 1.25em;
    right: 1.25em;
    width: 3.125em;
    height: 3.125em;
    text-decoration: none;
    transition: 1s ease-in-out;
 }

...sets the arrow to be displayed to the right

As the javascript loads, this...

   var obj = d.getElementsByClassName( 'classscrolltop' )[0];
   var el = obj.classList;
       el.add( 'displayout');

...adds the CSS class "displayout" to this element...

 <a href="#top" class="classscrolltop nojs">

The CSS ".displayout" ...

.displayout {
    right: -3.25em;
    opacity: 0;
 }

...moves the arrow outside the window to the right and changes it's opacity.

This javascript...

   w.onscroll = function(){
           el.remove( 'nojs');
      if (  w.pageYOffset >= 50 ){
           el.remove( 'displayout');
        }
     else {
          el.add( 'displayout');
        }
     }

...then removes or adds the "displayout" class according to the scrollbar's position.

Finally this CSS...

    transition: 1s ease-in-out;

..adds a little smooooooothness to the effect. :biggrin:

coothead


#27

I know JQuery is not that great, but one should learn the core Javascript from the first principle, but I was just wondering how can we give the same effect through JQuery that @coothead sir has given through Vanilla JS.

I think the secret lies here →

if ($(this).scrollTop() >= 50) {        // If page is scrolled more than 50px
        $('#scrolltop').fadeIn(200);    // Fade in the arrow
    } else {
        $('#scrolltop').fadeOut(200);   // Else fade out the arrow
    }

I tried some animation property variations like this →

if ($(this).scrollTop() >= 50) {        // If page is scrolled more than 50px
        $('#scrolltop').animate({"left":"0px", "slow");   // Fade in the arrow
    } else {
        $('#scrolltop').animate({"right":"0px", "slow");;   // Else fade out the arrow
    }

But I could not make it work(arrow coming appear from the right and vice versa).


#28

Hi there codeispoetry,

wherever possible, CSS should always be kept out of the javascript.

Assuming that you were using the HTML and CSS from post #5, then this...

<script>
(function( w, d ) {
   'use strict';

   $('.classscrolltop' ).addClass('displayout');

$( w ).scroll(function() {
   $('.classscrolltop' ).removeClass( 'nojs' );
      if ( $( this ).scrollTop() >= 50 ) {        // If page is scrolled more than 50px
           $( '.classscrolltop' ).removeClass( 'displayout' );  // Fade in the arrow
         } 
      else {
           $( '.classscrolltop' ).addClass( 'displayout' );  // Else fade out the arrow
         }
 });
}(window, document));
</script>

...would, I presume, be the jQuery method.

coothead


#29

In the above the (function( w, d )

w and d are arguments or variables?

Generally, we use $(JQuery) or $(Window). What does $(w) signify?


#30

Hi there codeispoetry,

the w and d are arguments that represent window and document.

This is my script template...

<script>
(function( w, d ) {
   'use strict';

}(window, document));
</script>

It signifies $(Window).

Also d may then be used instead of document in the code.

coothead


#31

Hi there @coothead,

Why didnt you write w and d here:

<script>
(function( w, d ) {
'use strict';

}(w, d));
</script>

#32

I would suggest that you test it for yourself, first with this...

<script>
(function( w, d ) {
   'use strict';
    console.log( arguments );
}( window,  document ));
</script>

...and then with this...

<script>
(function( w, d ) {
   'use strict';
    console.log( arguments );
}( w,  d ));
</script>

...and finally with this...

<script>
(function( w, d ) {
   'use strict';
    console.log( arguments );
}( 'w', 'd' ));
</script>

coothead


#33

Hi there @coothead sir,

I will do that and update you. Thanks!


closed #34

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.