Develop Reference

Cannot read properties of undefined (reading 'scrollTo')

This below code giving me runtime error. I just want the browser to go to top while the page is routed from footer link. It just stick to the bottom and need to scroll.
document.getElementsByClassName('homemenu').scrollTo(0, 0);
header.component.html
<header class="top-head homemenu" *ngIf="showMenu == 'home'">
<div class="container-fluid">
<div class="row" [ngClass]="{'justify-content-center': onlyLogo}">
<div class="col-3 lm-logo"><img src="/assets/images/lm-logo.svg"></div>
<div class="col-9" *ngIf="!onlyLogo">
<div class="d-flex justify-content-end">
<ul class="menu_wrap d-flex">
<ng-container *ngIf="homemenu; else individual_page">
<li>Home</li>
<li>Individuals</li>
<li>Corporate</li>
<li>Hiring Managers</li>
<li class="dropdown_menu"><a class="dropdown-toggle nav-link" [routerLink]="['/partners']" routerLinkActive="active" aria-expanded="true" data-toggle="dropdown">Partners</a>
<div class="dropdown-menu">
<div class="menu_item">
<img class="img-fluid" src="{{bitBucketUrl}}library/images/corporate/home/p-ico5.png">
<a href="javascript:void(0)" [routerLink]="['/partners/content-owners']" routerLinkActive="active" >Content Owner</a>
</div>
<div class="menu_item">
<img class="img-fluid" src="{{bitBucketUrl}}library/images/corporate/home/p-ico3.png">
<a href="javascript:void(0)" [routerLink]="['/partners/influencers']" routerLinkActive="active" >Influencers</a>
</div>
<div class="menu_item">
<img class="img-fluid" src="{{bitBucketUrl}}library/images/corporate/home/p-ico2.png">
<a href="javascript:void(0)" [routerLink]="['/partners/localmasters-for-startup']" routerLinkActive="active" >Localmasters for Startup</a>
</div>
<div class="menu_item">
<img class="img-fluid" src="{{bitBucketUrl}}library/images/corporate/home/p-ico4.png">
<a href="javascript:void(0)" [routerLink]="['/partners/customer-training-solutions']" routerLinkActive="active" >Customer Training Solutions</a>
</div>
<div class="menu_item">
<img class="img-fluid" src="{{bitBucketUrl}}library/images/corporate/home/p-ico1.png">
<a href="javascript:void(0)" [routerLink]="['/partners/solution-partner-program']" routerLinkActive="active" >Solution Partner Program</a>
</div>
</div>
</li>
</ng-container>
<ng-template #individual_page>
<li>Home</li>
<li>How It Works</li>
<li>Be a Mentor</li>
</ng-template>
</ul>
<button class="btn top-btn" [routerLink]="['/login']" type="button">Sign In</button>
<!-- (click)="showSiteMap = !showSiteMap" -->
</div>
</div>
</div>
</div>
</header>
The above code works as expeceted but leave a error as shown in screenshot.

getElementsByClassName returns HTMLCollection.
You have to specify the exact item within the HTMLCollection, that you want to use scrollTo on. Ex.:
document.getElementsByClassName('homemenu')[0].scrollTo(0, 0);
Or use more modern function to query html, like querySelector. Ex.:
document.querySelector('.homemenu').scrollTo(0, 0);
To updated question
As I can see, you have that class assigned to element, that is rendered by angular. Make sure to call this function only when angular has rendered this tag.
Also, if code works as expected, then you can just check for null value the element, to get rid of the error:
document.querySelector('.homemenu')?.scrollTo(0, 0);

document.querySelector('.homemenu').scrollTo({top : 0});

I need value of div custom attribute in Jquery [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
Please check code below ,
<div class="cp_option_color">
<div id="cp-power-manual" class="configure-seats-section">
<!-- power or manual append -->
</div>
<div class="validation-message" style="display:none">Please Select Color</div>
<div class="cp-color-item-content" data-name="199538" style="display: none;">
<h2>Black</h2>
<ul>
<li data-li="Power Recline">
<div class="cp-recline" recline="power">
Power Recline:
<span class="">
<img src="checkmark.png" alt="">Ships in
<lable class="shipmentmsg">6 Days</lable>
</span>
</div>
</li>
</ul>
</div>
<div class="cp-color-item-content" data-name="199539" style="display: inline-block;">
<h2>Brown</h2>
<ul>
<li data-li="Power Recline">
<div class="cp-recline" recline="manual">
Power Recline:
<span class="">
<img src="checkmark.png" alt="">Ships in
<lable class="shipmentmsg">6 Days</lable>
</span>
</div>
</li>
</ul>
</div>
</div>
I need custom attribute value of 'recline' attribute. If you see, there are same class name of its parent div(cp-color-item-content). But one is display none and another is display block. So, i need custom attribute value of 'display:block' div (i need 'manual' value).
Your help would be appreciated.
Thanks

While you should be using data-recline="power" for custom attributes, you can use
.attr("recline")
the selector can include :visible to exclude the hidden one, giving:
$(".cp-recline:visible").attr("recline")
Updated snippet (no change to HTML)
console.log($(".cp-recline:visible").attr("recline"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cp-power-manual" class="configure-seats-section">
<!-- power or manual append -->
</div>
<div class="validation-message" style="display:none">Please Select Color</div>
<div class="cp-color-item-content" data-name="199538" style="display: none;">
<h2>Black</h2>
<ul>
<li data-li="Power Recline">
<div class="cp-recline" recline="power">
Power Recline:
<span class="">
<img src="checkmark.png" alt="">Ships in
<lable class="shipmentmsg">6 Days</lable>
</span>
</div>
</li>
</ul>
</div>
<div class="cp-color-item-content" data-name="199539" style="display: inline-block;">
<h2>Brown</h2>
<ul>
<li data-li="Power Recline">
<div class="cp-recline" recline="manual">
Power Recline:
<span class="">
<img src="checkmark.png" alt="">Ships in
<lable class="shipmentmsg">6 Days</lable>
</span>
</div>
</li>
</ul>
</div>
</div>

For defining your own custom attributes in HTML, you need to use the prefix as data-*
To get the value of that custom attributes you have defined in your HTML through jQuery, you can use the .data() method.
Check the below demo:
let customAttributeValue = $('#this-is-my-id').data('this-is-custom-id');
console.log(customAttributeValue)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="this-is-my-id" data-this-is-custom-id="manual"></div>
Now coming to your code, you can try this:
let reclineValue = $('.cp-recline:visible').data('recline');
console.log("reclineValue is: ", reclineValue)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cp_option_color">
<div id="cp-power-manual" class="configure-seats-section">
<!-- power or manual append -->
</div>
<div class="validation-message" style="display:none">Please Select Color</div>
<div class="cp-color-item-content" data-name="199538" style="display: none;">
<h2>Black</h2>
<ul>
<li data-li="Power Recline">
<div class="cp-recline" data-recline="power">
Power Recline:
<span class="">
<img src="checkmark.png" alt="">Ships in
<lable class="shipmentmsg">6 Days</lable>
</span>
</div>
</li>
</ul>
</div>
<div class="cp-color-item-content" data-name="199539" style="display: inline-block;">
<h2>Brown</h2>
<ul>
<li data-li="Power Recline">
<div class="cp-recline" data-recline="manual">
Power Recline:
<span class="">
<img src="checkmark.png" alt="">Ships in
<lable class="shipmentmsg">6 Days</lable>
</span>
</div>
</li>
</ul>
</div>
</div>

Using Javascript and JQuery to create a filter button

I'm trying to make my button functional on my website but for some reason it isn't working. I have been working on it endlessly and need some outside. If you could help with figuring out what I am doing wrong I would really appreciate it. I am still learning JavaScript and JQuery so all of this is new to me.
HTML Code:
<div id="portfolio">
<div class="container">
<div class="row">
<div class="heading">
<h2>PORTFOLIO</h2>
</div>
<div class="filter">
<ul id="filters">
<li><button class="btn active" data-filter="all">ALL</a></li>
</ul>
</div>
<div class="itemsContainer">
<ul class="items">
<li>
<div class="item" div class="column apps">
<img src="triviastartthumbnail.jpg">
<h4>Movie Trivia App</h4>
<p>This app was created to test users knowledge on how well they know their movies
and actors/actresses</p>
</div>
<ul class="img-list">
<span class="link">
<a href="https://vshorty2003.github.io/movietrivia/"><i class="fa fa-link">
</i></a></span>
<span class="search">
<a href="movietriviaappstart.JPG" figcaption="Movie Trivia App" /><i
class="fa fa-search"></i></a>
</span>
<li class="img-item">
<img class='item-img' src="html5-logo.png" alt="HTML icon" />
</li>
<li class="img-item">
<img class='item-img' src="css-3-logo.png" alt="CSS icon"/>
</li>
<li class="img-item">
<img class='item-img' src="js-icon-26.jpg" alt="JavaScript icon" />
</li>
<li class="img-item">
<img class='item-imgjq' src="jquery-icon-16-revised.png" alt="JQuery icon"/>
</li>
</li>
</ul>
CSS code:
/*for filtered buttons*/
li{
display: inline;
list-style: none;
}
JavaScript code:
$("button").click(function(){
$("button").removeClass("btn active");
$(this).addClass("btn active");
var dataFilter = $(this).data('filter');
if(dataFilter == "all") {
$(".filter ul").show();
}
else
{
$(".filter ul").hide();
$("." + dataFilter).show();
}
});

Add a class in an anchor tag within a div with jquery

does anyone know how Can I add a class in the A tag:
Subscribe
Here is my html:
<div class="module" id="prod-subscription">
<div class="entity entity-bean bean-ap-bl-instruct contextual-links-region block container">
<div class="contextual-links-wrapper contextual-links-processed">
<a class="contextual-links-trigger" href="#">Configure</a>
<ul class="contextual-links">
<li class="bean- first last">
bloc
</li>
</ul>
</div>
<div class="row">
<div class="col-md-3">
<h2>simple<span>in 3 </span></h2>
</div>
<div class="col-md-6">
<ol>
<li>
<span>1</span><p>text</p>
</li>
<li>
<span>2</span><p>texte testx</p>
</li>
<li>
<span>3</span><p>and text</p>
</li>
</ol>
</div>
<div class="col-md-3">
Subscribe
</div>
</div>
</div>
</div>

you can use
$('a[href="/souscription/digital-vie"]').addClass('classHere');
or
$('div#prod-subscription a[href="/souscription/digital-vie"]').addClass('classHere');
or
$('a[href="/souscription/digital-vie"]:contains("Subscribe")').addClass('classHere');
$('a[href="/souscription/digital-vie"]:contains("Subscribe")').addClass('classHere');
.classHere{
background : red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="module" id="prod-subscription">
<div class="entity entity-bean bean-ap-bl-instruct contextual-links-region block container">
<div class="contextual-links-wrapper contextual-links-processed">
<a class="contextual-links-trigger" href="#">Configure</a>
<ul class="contextual-links">
<li class="bean- first last">
bloc
</li>
</ul>
</div>
<div class="row">
<div class="col-md-3">
<h2>simple<span>in 3 </span></h2>
</div>
<div class="col-md-6">
<ol>
<li>
<span>1</span><p>text</p>
</li>
<li>
<span>2</span><p>texte testx</p>
</li>
<li>
<span>3</span><p>and text</p>
</li>
</ol>
</div>
<div class="col-md-3">
Subscribe
</div>
</div>
</div>
</div>

You could use jQuery's filter function and filter the link where the exact text is 'Subscribe' (this may cause problems if you have multiple links with that exact text)
$('a').filter(function() {
return $(this).text() === 'Subscribe';
}).addClass('new-class');
.new-class {color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Subscribe

Not sure I fully understand the question. Do you just want to give the anchor tag a class? That can be done as simply as <a class="your_class" href="your_link">Subscribe</a>

How to set up multiple tabs navs in Bootstrap

I am trying to implement a list of data where each of the items, have a tab (pills actually) menu.
The problem is that when I do this, they are interfeering with each other, making it only possible to have 1 active tab at a time, even though they have different id's.
Here is how i am doing it:
First I have one of the menus of tabs/pills for one of the items in the list:
<div class='col-md-12'>
<div class='row'>
<div class='col-md-12' style='margin-top: -50px;'>
<ul class='nav nav-pills'>
<li class='active'><a data-toggle='tab' href='#vis_opgave1'>Vis opgave</a></li>
<li><a data-toggle='tab' href='#rediger_opgave1'>Rediger Tekst</a></li>
<li><a data-toggle='tab' href='#admin_opgave_billeder1'>Administrer billeder</a></li>
</ul>
</div>
</div>
</div>
And here is the content divs for holding the associated datas:
<div id='vis_opgave1' class='tab-pane fade in active'>
<div class='row'>
aaaaaaaa11111111111
</div>
</div>
<div id='rediger_opgave1' class='tab-pane fade'>
<div class='row'>
bbbbbbb11111111
</div>
</div>
<div id='admin_opgave_billeder1' class='tab-pane fade'>
<div class='row'>
cccccccccc1111111
</div>
</div>
I have created a jsfiddle to show you the problem: http://jsfiddle.net/kx96pndg/
When one of the tabs is selected, you can see that the active content of the other nav menu dissapears.
I really hope someone can help me out here. Any help will be greatly appreciated.

You're missing <div class="tab-content"></div> around the tab-panes. See example.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<p> </p>
<p> </p>
<div class='col-md-12'>
<div class='row'>
<div class='col-md-12' style='margin-top: -50px;'>
<ul class='nav nav-pills'>
<li class='active'><a data-toggle='tab' href='#vis_opgave1'>Vis opgave</a>
</li>
<li><a data-toggle='tab' href='#rediger_opgave1'>Rediger Tekst</a>
</li>
<li><a data-toggle='tab' href='#admin_opgave_billeder1'>Administrer billeder</a>
</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div id='vis_opgave1' class='tab-pane fade in active'>
<div class='row'>aaaaaaaa11111111111</div>
</div>
<div id='rediger_opgave1' class='tab-pane fade'>
<div class='row'>bbbbbbb11111111</div>
</div>
<div id='admin_opgave_billeder1' class='tab-pane fade'>
<div class='row'>cccccccccc1111111</div>
</div>
</div>
<p> </p>
<p> </p>
<div class='col-md-12'>
<div class='row'>
<div class='col-md-12' style='margin-top: -50px;'>
<ul class='nav nav-pills'>
<li class='active'><a data-toggle='tab' href='#vis_opgave2'>Vis opgave</a>
</li>
<li><a data-toggle='tab' href='#rediger_opgave2'>Rediger Tekst</a>
</li>
<li><a data-toggle='tab' href='#admin_opgave_billeder2'>Administrer billeder</a>
</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div id='vis_opgave2' class='tab-pane fade in active'>
<div class='row'>aaaaaaaa22222222</div>
</div>
<div id='rediger_opgave2' class='tab-pane fade'>
<div class='row'>bbbbbbb222222222</div>
</div>
<div id='admin_opgave_billeder2' class='tab-pane fade'>
<div class='row'>cccccccccc2222222</div>
</div>
</div>
</div>

I think you can use this plugin. bootstrap-multitabs