HTML and JQuery slide up correct placement

JavaScript
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

3 Likes
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;
 }
2 Likes
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

2 Likes
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

3 Likes
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

1 Like
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

1 Like
33

Hi there @coothead sir,

I will do that and update you. Thanks!

34

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