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});
Related
Currently i am building a storytelling website, where the client can iterate through several videos. However, there is also a page with chapters on the website. So when the client clicks on the next or previous button, the chapters should be lighten up on the chapter he currently is on.
At the moment i build a click counter, so the counter is counting up, when he clicked on next and counting down, when clicked on previous. I have 11 chapters, so 11 video's. I am checking the chapters by index. They are going from 0 to 11. When the client hits the next button, he's going to the next video and the click counter goes up with one.
At the moment i have trouble to connect this click counter to the current index of the chapter. So if the click counter goes to two for instance, the background of only chapter 2 (index 2) should be lighten up.
At the moment i have this:
<a href="#" class="vorige prev-rew button-sound">
<svg>icon</svg>
</a>
<a href="#" class="next prev-rew button-sound">
<svg> icon</svg>
</a>
<div class="marketing-chapter job-chapter">
<a href="#">
<div class="anchor-point chapter-1">
<p>1</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-2">
<p>2</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-3">
<p>3</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-4">
<p>4</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-5">
<p>5</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-6">
<p>6</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-7">
<p>7</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-8">
<p>8</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-9">
<p>9</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-10">
<p>10</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-11">
<p>11</p>
</div>
</a>
</div>
// Anchorpoint loop
var set = $(".anchor-point");
var length = set.length;
var ViewportCount = 1;
$('.prev-rew').on("click", function() {
if ($(this).hasClass('next')) {
console.log('klikkert next');
ViewportCount = ViewportCount + 1;
} else if ($(this).hasClass('vorige')) {
console.log('klikkert vorige');
ViewportCount = ViewportCount - 1;
}
set.each(function(index) {
index = ViewportCount;
console.log(index);
console.log(ViewportCount);
if(index == ViewportCount){
// Change the background-color of the number, connected to the index. So
current chapter will light up
}
});
});
To do what you require you can use the eq() method to directly select the element in the collection without a loop:
var set = $(".anchor-point");
var ViewportCount = 0;
$('.prev-rew').on("click", function() {
if ($(this).hasClass('next')) {
ViewportCount = ViewportCount + 1;
} else if ($(this).hasClass('vorige')) {
ViewportCount = ViewportCount - 1;
}
set.removeClass('active').eq(ViewportCount % set.length).addClass('active');
});
.active { background-color: #C00; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Previous
Next
<div class="marketing-chapter job-chapter">
<a href="#">
<div class="anchor-point chapter-1 active"><p>1</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-2"><p>2</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-3"><p>3</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-4"><p>4</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-5"><p>5</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-6"><p>6</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-7"><p>7</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-8"><p>8</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-9"><p>9</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-10"><p>10</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-11"><p>11</p></div>
</a>
</div>
However, you can avoid the need for the counter variable and instead move the active class based on its current position in the DOM. The <a> elements wrapping the div can also be removed as it's invalid HTML, it makes the JS more straightforward and it's also not necessary in this case
$('.prev-rew').on("click", function() {
let $current = $('.active');
let $target = $current[$(this).data('action')]();
if ($target.length) {
$current.removeClass('active');
$target.addClass('active');
}
});
.active {
background-color: #C00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Previous
Next
<div class="marketing-chapter job-chapter">
<div class="anchor-point chapter-1 active"><p>1</p></div>
<div class="anchor-point chapter-2"><p>2</p></div>
<div class="anchor-point chapter-3"><p>3</p></div>
<div class="anchor-point chapter-4"><p>4</p></div>
<div class="anchor-point chapter-5"><p>5</p></div>
<div class="anchor-point chapter-6"><p>6</p></div>
<div class="anchor-point chapter-7"><p>7</p></div>
<div class="anchor-point chapter-8"><p>8</p></div>
<div class="anchor-point chapter-9"><p>9</p></div>
<div class="anchor-point chapter-10"><p>10</p></div>
<div class="anchor-point chapter-11"><p>11</p></div>
</div>
I'm looking to add a button after a specific element on an existing page. This is the code I've tried so far.
$('.collection-nav').after('<span class="button">This is a button.</span>');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="index-navigation collection-nav" role="navigation">
<div class="collection-nav-item" data-url-id="process">
<a href="/process/" class="process">
<span class="collection-nav-item-span">Process</span>
</a>
</div>
<div class="collection-nav-item" data-url-id="our-breads">
<a href="/our-breads/" class="our-breads">
<span class="collection-nav-item-span">Bread</span>
</a>
</div>
<div class="collection-nav-item" data-url-id="ourculutre">
<a href="/ourculutre/" class="ourculutre">
<span class="collection-nav-item-span">Culture</span>
</a>
</div>
<div class="collection-nav-item" data-url-id="about">
<a href="/about/" class="about">
<span class="collection-nav-item-span">About</span>
</a>
</div>
</nav>
Anything I'm missing here?
as far as I can see, the code you wrote is correct, but it needs to be triggered to work.
you can add a button like this => <button id="btnAfter">After Element</button>
you can try again later your code:
$('#btnAfter').click(function(){
$('.collection-nav').after('<span class="button">This is a button.</span>');
})
I would like to change an image on my website into a link using Javascript so that when users click the image they are redirected to a website. My html code and Javascript code are as follows. I tried mimicking what was mentioned in this thread but was unsuccessful (how to add a link to an image using jquery?).
The image I am trying to create a link for is http://mywebsite.com/wp-content/uploads/job-manager-uploads/job_cover/2017/10/bbbb-1024x1024.jpg
Thank you for your help.
My Javascript code
jQuery('.profile-avatar.open-photo-swipe').wrap($('<a>',{
href: link2;
}));
My HTML code
<div class="profile-header">
<div class="container">
<div class="row">
<div class="col-md-12">
<div v-pre>
<a class="profile-avatar open-photo-swipe"
href="http://mywebsite.com/wp-content/uploads/job-manager-uploads/job_cover/2017/10/bbbb-1024x1024.jpg"
style="background-image: url('http://mywebsite.com/wp-content/uploads/job-manager-uploads/job_cover/2017/10/bbbb-300x300.jpg')"
data-width="1024"
data-height="576"
>
</a>
</div>
<div class="profile-name" v-pre>
<h1 class="case27-primary-text">Offer 2</h1>
<h2>blag</h2>
</div>
<div class="cover-details" v-pre>
<ul></ul>
</div>
<div class="profile-menu">
<ul role="tablist">
<li class="active">
<a href="#_tab_1" aria-controls="_tab_1" data-section-id="_tab_1"
role="tab" class="tab-reveal-switch toggle-tab-type-main">
Profile </a>
</li><li class="">
<a href="#_tab_2" aria-controls="_tab_2" data-section-id="_tab_2"
role="tab" class="tab-reveal-switch toggle-tab-type-comments">
Comments
<span class="items-counter">0</span>
</a>
</li> <div id="border-bottom"></div>
</ul>
</div>
</div>
</div>
</div>
</div>
jQuery('.profile-avatar.open-photo-swipe')
This element is a link, not image:
<a class="profile-avatar open-photo-swipe"
href="http://mywebsite.com/wp-content/uploads/job-manager-uploads/job_cover/2017/10/bbbb-1024x1024.jpg"
So use
jQuery('.profile-avatar.open-photo-swipe').prop('href', link2)
I have a blog style website that I've placed a dropdown button at top of for the purpose of filtering the content. Each blog post will reside in section tags.
When user clicks on menu item it will trigger click event. I'm trying to save the href which the code seems to do fine.
Then i was hoping to iterate each a tag with the class of "label".
With each one that is found it should check the text and compare to value from dropdown box. If it matches keep the content. If not detach it. I thought detach was the best method since I would need to put it back on refresh and/or if user clicks on another selection in the dropdown.
Here's what I tried:
<div class="container blog-content">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown">Sort By:
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="sortMenu">
<li role="presentation"><a role="sortmenuitem" id="Adventure">Adventure</a></li>
<li role="presentation"><a role="sortmenuitem" id="Food">Food</a></li>
<li role="presentation"><a role="sortmenuitem" id="Nature">Nature</a></li>
<li role="presentation"><a role="sortmenuitem" id="Sites">Sites</a></li>
</ul>
</div>
<div class="row">
<div class="col-sm-12 blog-main">
<div class="row">
<div class="col-sm-6">
<section class="blog-post">
<div class="panel panel-default">
<img src="myimage.jpg" class="img-responsive" />
<div class="panel-body">
<div class="blog-post-meta">
<span class="label label-light label-danger">Adventure</span>
<p class="blog-post-date pull-right">January 1, 2016</p>
</div>
<div class="blog-post-content">
<a href="post-image.html">
<h2 class="blog-post-title">Blog Title 1</h2>
</a>
<p>Lorem ipsum blah blah blah</p>
<a class="btn btn-info" href="post-image.html">Read more</a>
<a class="blog-post-share pull-right" href="#">
<i class="material-icons"></i>
</a>
</div>
</div>
</div>
</section>
<!-- /.blog-post -->
<section class="blog-post">
<div class="panel panel-default">
<div class="panel-body">
<div class="blog-post-meta">
<span class="label label-light label-info">Food</span>
<p class="blog-post-date pull-right">January 1, 2016</p>
</div>
<div class="blog-post-content">
<a href="post-image.html">
<h2 class="blog-post-title">Blog Title 2</h2>
</a>
<p>Lorem ipsum blah blah blah</p>
<a class="btn btn-info" href="post-image.html">Read more</a>
<a class="blog-post-share pull-right" href="#">
<i class="material-icons"></i>
</a>
</div>
</div>
</div>
</section>
<!-- /.blog-post -->
JQuery:
<script>
$("a[role='sortmenuitem']").bind("click", function() {
var value = $(this).attr( 'id' );
$("a.label").each(function() {
if (this.text('value')) {
this.replace();
}
else {
this.detach();
}
});
});
</script>
If there is a better approach all together, I am all ears.
I thought about giving each blog section a class matching its category, and then using CSS to hide the element. If I am in the right ballpark please let me know.
Furthermore, once we hide the section not matching the dropdown menu item that is selected I'd need to put it back if another element is selected.
I am new (obviously) to JQuery. Any "dumbed down" explanation would be greatly appreciated!
I assume you want to hide/show the blog-post according to the current dropdown selection.
For the first, you need to change this line:
$("a.label")
to:
$(".blog-post .label")
because the label is associated to the span element under the blog-post section.
In order to test a value against a text you need to change this line:
this.text('value')
with:
$(this).text()
In order to hide/show the section inside the each loop you have to search for the closest blog-post parent section.
I added e.preventDefault() inside the click to stop navigation.
Moreover, as reported in the comment (Khalid T), instead to use bind you have to use on because its usage is deprecated.
So the snippet is:
$("a[role='sortmenuitem']").on("click", function(e) {
e.preventDefault();
var value = $(this).attr( 'href' );
$(".blog-post .label").each(function() {
$(this).closest('.blog-post').toggle($(this).text() == value);
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container blog-content">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown">Sort By:
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="sortMenu">
<li role="presentation"><a role="sortmenuitem" href="Adventure">Adventure</a></li>
<li role="presentation"><a role="sortmenuitem" href="Food">Food</a></li>
<li role="presentation"><a role="sortmenuitem" href="Nature">Nature</a></li>
<li role="presentation"><a role="sortmenuitem" href="Sites">Sites</a></li>
</ul>
</div>
<div class="row">
<div class="col-sm-12 blog-main">
<div class="row">
<div class="col-sm-6">
<section class="blog-post">
<div class="panel panel-default">
<img src="myimage.jpg" class="img-responsive"/>
<div class="panel-body">
<div class="blog-post-meta">
<span class="label label-light label-danger">Adventure</span>
<p class="blog-post-date pull-right">January 1, 2016</p>
</div>
<div class="blog-post-content">
<a href="post-image.html">
<h2 class="blog-post-title">Blog Title 1</h2>
</a>
<p>Lorem ipsum blah blah blah</p>
<a class="btn btn-info" href="post-image.html">Read more</a>
<a class="blog-post-share pull-right" href="#">
<i class="material-icons"></i>
</a>
</div>
</div>
</div>
</section>
<!-- /.blog-post -->
<section class="blog-post">
<div class="panel panel-default">
<div class="panel-body">
<div class="blog-post-meta">
<span class="label label-light label-info">Food</span>
<p class="blog-post-date pull-right">January 1, 2016</p>
</div>
<div class="blog-post-content">
<a href="post-image.html">
<h2 class="blog-post-title">Blog Title 2</h2>
</a>
<p>Lorem ipsum blah blah blah</p>
<a class="btn btn-info" href="post-image.html">Read more</a>
<a class="blog-post-share pull-right" href="#">
<i class="material-icons"></i>
</a>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
I want to convert my div part of my angularjs application into image so that I can download it as per clients requirements.
<div class="wrap-dashboard">
<div class="dashboard">
<div gridster="vm.gridsterOptions">
<ul>
<li gridster-item="widget" ng-repeat="widget in vm.widgets">
<div class="box" >
<div class="box-header">
<h3>{{ widget.name }}</h3>
<div class="box-header-btns pull-right">
<a title="Download widget" ng-click="" id="download"><i class="glyphicon glyphicon-download"></i></a>
<a title="settings" ng-click="vm.openSettings(widget)"><i class="glyphicon glyphicon-cog"></i></a>
<a title="Remove widget" ng-click="vm.remove(widget)"><i class="glyphicon glyphicon-trash"></i></a>
</div>
</div>
<div class="box-content">
<nvd3 options="widget.options" data="widget.options.dataList" api="widget.options.api" config="vm.config" events="vm.events"></nvd3>
</div>
</div>
</li>
</ul>
</div>
</div>
The output of this code is a chart
Now I want to download this chart, but don't know how...
Any kind of help will be appreciated. Thanks in advance!!