Develop Reference

How to use Javascript in Angular 4

Hi Have a Bootstrap navbar component with javascript like :
https://bootsnipp.com/snippets/a35lo
In above example, It has HTML, CSS, and JS, If I want to use above in Angular 4, How can I use above JS directly instead of converting it into typescript.

First you need to load js file using scriptLoaderService in your component.
then you can use any JQuery or third-party library code in your ts file.
(<any>$('body')).scrollspy({
target: '#navbar-collapsible',
offset: 50
});
/* smooth scrolling sections */
(<any>$('a[href*=#]:not([href=#])')).click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - 50
}, 1000);
return false;
}
}
});

Smooth Scrolling not working correctly

I've been bashing my head against the wall trying plenty of smooth scrolling plugins to work why the signup button won't smooth scroll down to the #target section properly.
Please help hive mind, I am using CSS tricks code.
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
|| location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
You can see the pen with all the html css and other js at
https://codepen.io/samducker/pen/RVoORy

Cancel your code and try out this one (It's maybe a bit fast change it maybe to 500), it might be a bit laggy if you have so much content between your button and the anchor:
/*Scroll Down Button*/
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});

Your jQuery selector seems to be incorrect. Therefor the click function will not fire when you click on the button and will fallback to it's default anchor behavior. I forked your codepen and changed the jQuery selector to a see: https://codepen.io/anon/pen/VbmNXd
Try to change the jQuery selector to what works for your application.

smooth scroll and accordion conflict bootstrap

although this has been asked a few times I haven't found something which will fix my problem.
This is my code for the smooth scroll:
$(function() {
$('a[href*=#]:not([href=#]),a[href*=#]:not(a[data-toggle])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
it's css-tricks code with a bit of editing.
This is the site: http://redrocketwebsitedesign.co.uk/test/my3DtwinAlpha/about/#arrow6
So the accordion is still being selected for the scrolling, and it's not running the accordion js.
I think there's a problem with my javascript not selector code :
a[href*=#]:not(a[data-toggle])
Any help appreciated :-]

This is what you are really looking for :
$('a[href*="#"]:not([href="#"]):not([data-toggle])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
:not([data-toggle])
is to avoid smooth scroll with bootstrap tab, carousel etc...

The page you provided has a mistake in code:
$('a[href*=#]:not([href=#]),'a[href^="#"]:not([data-toggle])').click(function() {
^^^ - extra and unnecessary character
So your handler is not set.

You can also consider specifying the class of the element(s) that should trigger a smooth scroll animation (thus excluding others, such as the accordion tabs), like this:
$('a[href*=#][class*="smooth"]:not([href=#])').click(function()
Or vice versa, specify the class of the element(s) that shouldn't trigger the script (in this case we exclude the class of the links that trigger the accordion effect):
jQuery('a[href*=#]:not([href*=#][class*="accordion-toggle"])').click(function()

var headp = $(".pixxett-header").innerHeight();
var stick = $(".pixxett-header.sticky").innerHeight();
$(document).on('click', 'a[href^="#"]:not([href="#"]):not([data-toggle])', function (event) {
event.preventDefault();
if (scroll == 0){
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top - stick}, 500);
}else{
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top - headp}, 500);
}
});

external links to id anchor not working - using jquery waypoints

I am having an issue having an external page link to an id anchor on my index page. Every time I try to link to an anchor it just goes to the top of the page. It almost looks like it shows the page at the anchor for a split second but then just the top of the page.
You can take a look here .. http://jointmedias.com/clients/misfit/site/
All of the anchors work on the page but again can not link to a specific anchor from an external page. This should work http://jointmedias.com/clients/misfit/site/#p3 but it dosent.
I am using this js script for the smooth scrolling (again it works perfect on the page itself)
$(document).ready(function(){
$(window).scroll(function(){
var scrollTop = $("#topsec").height();
if($(window).scrollTop() >= scrollTop){
$('#nav').css({
position : 'fixed',
top : '0'
});
}
if($(window).scrollTop() < scrollTop){
$('#nav').removeAttr('style');
}
})
})
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
|| location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 2000,'easeInOutCubic');
return false;
}
}
});
I am too new to JS to know if this has something to do with it or not.. any help would be much appreciated. Thanks for taking a look.
Brian

animated anchor scrolling method for iOS with iScroll.js

Im using iScoll.js to help with scrolling animations on iOS. Basically it uses hardware accelerated CSS properties to move the content, not traditional scrolling.
iScoll is working well but I'm also trying to implement a smooth scrolling anchor solution.
It works fine on desktop but the problem is that I can't workout how to retrieve the correct offset value to pass to the iScoll Instance. I feel like im super close to a solution:
var ua = navigator.userAgent,
isMobileWebkit = /WebKit/.test(ua) && /Mobile/.test(ua);
if (isMobileWebkit) {
iScrollInstance = new iScroll('wrapper');
}
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
|| location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
if (isMobileWebkit) {
iScrollInstance.refresh();
/* issue here with "target.position.top" = "undefined" */
iScrollInstance.scrollTo(0, target.position.top, 1000);
}else{
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
}
return false;
}
}
});
full demo here http://jsfiddle.net/Wccev/3/

Not sure why but it seems iScroll.js didn't like jQuery in the scrollTo function. So setting the variable ahead of time seemed to help. I also had to work out the correct offset because of the way iScroll moves a div not the screen.
If anyone needs it, this jQuery should help with smooth scrolling anchors on IOs devices provided you setup iScroll correctly:
var ua = navigator.userAgent,
isMobileWebkit = /WebKit/.test(ua) && /Mobile/.test(ua);
if (isMobileWebkit) {
$('html').addClass('mobile');
}
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
|| location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
if (isMobileWebkit) {
scrollOffset = $('#scroller').position().top;
targetOffset = target.offset().top;
iScrollInstance.refresh();
iScrollInstance.scrollTo(0, -(targetOffset-scrollOffset), 1000);
}else{
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
}
return false;
}
}
});