Angular without jquery

Question

I have the following code that is using JQuery i would like to use only Angular. And i don't know how i can do it. Thanks

var startProduct = $("#product-overview").position().top - 60;
            var endProduct = $("#global-features").position().top + 150;

            $(document).scroll(function () {

                var y = $(this).scrollTop();

                if ($routeParams.section) {
                    $("#product-submenu").show();
                } else if (y > startProduct) {
                    $("#product-submenu").fadeIn();
                } else {
                    $("#product-submenu").hide();
                }

                if (y > endProduct) {
                    $("#product-submenu").css("opacity", "0");
                } else {
                    $("#product-submenu").css("opacity", "1");
                }

            });

do refer this jQLite api, that will help you.

Pankaj Parkar
– Pankaj Parkar

2016-04-27 15:55:09 +00:00
Commented Apr 27, 2016 at 15:55 — Pankaj Parkar
– Pankaj Parkar, Commented Apr 27, 2016 at 15:55

Anna · Accepted Answer · 2016-04-27 16:03:30Z

2

The $ is just a shortcut for a lot of things; for instance $("#product-submenu") is the short form of document.getElementById("product-submenu").

You will also, in the case of the .css functions, need to use document.getElementById("product-submenu").style.opacity = "1" to update CSS rather than the accessor functions jQuery provides.

For .show() and .hide() you can use document.getElementById("product-submenu") followed by .style.display="block" and .style.display="none" respectively.

As for .fadeIn() this would require a bit more work, and might depend on your application how you want to implement it. If you would like fancy effects like fadeIn you might just want to include jQuery in the first place, but if this is the only one you need you can write a javascript function to change the opacity of the element. If the fadein effect isn't necessary, you can use display="block" as above and while it will not fade, it will show the element.

answered Apr 27, 2016 at 16:03

Anna

3491 silver badge17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ste2425 Over a year ago

It could be argued $ is a closer shortcut to document.querySelectorAll as they both search based on CSS selectors.

Anna Over a year ago

ah! in the dark days before jQuery I never used that one much, and did everything by getElementById, but that makes sense and I am now wiser for it, thank you :)

Collectives™ on Stack Overflow

Angular without jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related