I need help creating a pure JavaScript event listener that captures all clicks on a page, gets the link text/URL, find the logical parent DIV of that link and concatenate the values together. Take this example code:
<body>
<div class="heading grid-12">
<!-- Header and navigation links -->
Summer Promotion
</div>
<div class="responsiveGrid">
<!-- page body -->
<img alt="Navy Sweater" src="nsweater.jpg"/>
</div>
<div class="footer grid-12">
<!-- Footer and bottom nav links -->
About Us
</div>
</body>
In the above example, I want to capture where the link logically sits on the page, either header|body|footer based on whether the link is a child of these three top level DIVs. Next, I want to capture the link text from anchor/JavaScript links or the Alt Text from image links. Finally I want to get the path of the link – excluding the protocol, domain and query strings if an anchor link or converted to a static string “Overlay” if the href is ‘# ‘or ‘javascript:void(0);’. Using the code above, I’d want the final concatenated string sent to console.log when any link is clicked:
'header|Summer Promotion|index.html'
'body|Navy Sweater|/cart/sweaters/navy.html'
'footer|About Us|Overlay'
Thanks in advance for your assistance.
Related
I have an HTML page in which there are list of images around 4-5. The HTML code of individual image (item-detail.component.html) is shown below:
<span class="badge" id="heart-badge{{item.$id}}">
<div (click)="badgeHeartEmpty()" id="heartHide{{item.$id}}">
<img id="badge-item-heart-noborder-empty" src="/assets/images/Empty-Heart.png">
</div>
<div [style.display]= " 'none' " (click)="badgeHeartFull()" id="heartShow{{item.$id}}">
<img id="badge-item-heart-noborder-full" src="/assets/images/Full-Heart-Blue.png">
</div>
</span>
<!-- This is the code which shows item images and item details -->
<a href="/attendee-item/{{item.$id}}">
<img class="card-img-top" src="{{item.image_url}}" alt="Card image cap" id="card-img">
<div class="card-body">
<div class="auction-item-title">
<h1 id="auction-item-title">{{item.name}}</h1>
</div>
<div class="auction-item-bid-title">
<div class="auction-item-title-left">
<p id="auction-item-bid-title">Current Bid: ${{item.bid}}</p>
<p id="auction-item-bid-title">Value: ${{item.value}}</p>
</div>
<div class="auction-item-title-right">
<p id="auction-item-bid-title2">About this item</p>
</div>
</div>
</div>
</a>
<bid-button [item]="item"></bid-button>
Now if I click above item (as you can see there is a href tag on it) then it shows me detailed description of that image on a new page and that page also has a back button at the top. Below is the code for back button on that new page:
<div class="item-top-bar">
<div class="item-back-bar">
<!-- This is the back button and it takes me to home page but instead it should take me to section of image where I was there and clicked it -->
<p id="item-back-bar-link"><a id="item-back-bar-link" href="/attendee-home"><</a></p>
</div>
<div class="item-pagination-bar">
<a (click)="prevItem()"><p id="item-pagination-bar-text">LAST ITEM</p></a>
<a (click)="nextItem()"><p id="item-pagination-bar-text">NEXT ITEM</p></a>
</div>
</div>
Problem Statement:
Now if I click back button then it takes me to the home page but instead what I want is it should take me to the section of image where I was before.
Is this possible to do? I mean if I have may sections of images and if I click lets say 4th image then it will open detailed description of that fourth image page and now if I press back button then it should take me to fourth section of image where I was before.
If you want to go back, you should use the back() function in javascript
function goBack() {
window.history.back();
}
<button onclick="goBack()">Go Back</button>
Here is a small example of how to use it, now you can just adapt it to your page
You can do that by adding the id here
<p id="item-back-bar-link">
<a id="item-back-bar-link" href="/attendee-home/{{id}}">
// ....
</a>
</p>
Now there are multiple way to get the id. You can use the window.location properties or if in same component pass this id to a property binding
Here is how I would do it.
On a separate note, having the same ID across multiple levels may not be a good idea.
<div class="item-back-bar">
<!-- This is the back button and it takes me to home page but instead it should take me to section of image where I was there and clicked it -->
<p id="item-back-bar-link"><a id="back" href="#">Back</a></p>
</div>
<script>
window.document.getElementById('back').addEventListener('click', function(e){
window.history.back();
e.preventDefault();
});
</script>
Angular has Location which is a service that applications can use to interact with a browser's URL. It is what you need in order to solve your problem.
See implementation below.
<div class="item-back-bar">
<!-- This is the back button and it takes me to home page but instead it should take me to section of image where I was there and clicked it -->
<p id="item-back-bar-link"><a id="back" (click)="goBackClicked()">Back</a></p>
</div>
Your ts file should have these lines.
import {Component} from '#angular/core';
import {Location} from '#angular/common';
#Component({
// component's declarations here
})
class SomeComponent {
constructor(private _location: Location) {
}
goBackClicked() {
this._location.back();
}
}
y not just get the position of the image when it is clicked with .position() and when returned from the image to the page you can get back to the same position with $(window).scrollTop(value).
If your page is scrolled and you want to maintain your scroll position while coming back from the detailed description page, then you can store the current page's vertical scroll position in a service and while navigating back, you can set the scroll position back from service.
Link to ScrollTop in MDN. Also Check Window.To for scrolling.
Sample Angular project to show Element.ScrollTop: https://stackblitz.com/edit/angular-qdjmny.
Click page1, scroll the sample list to navigate, when u com back, the scoll will be maintained.
Also make sure, in your [routerLink] of your detailed description page you are linking to the item-detail.component.html component.
Really theses comments are right. If you want go back page you can use the command window.history.go(-1) or window.history.back()
You can use an anchor tag for this. You need to give the part of the page you go back to an "id", like "gobackto_id". Then you can use this in your "" element in the "href" like this:
<a href="http://www.mypage.be/home#gobackto_id".
I am trying to understand why my white-space disappears when switching my code to javascript.
This is with static html JSFiddle Basic
And here the "same" in javascript JSFiddle JavaScript
when I set font-size:0px; in css for the static html I get the same result as in javascript. I am just not sure why this is happening and would like to understand it. What is javascript doing differently to html/CSS?
Thanks in advance!
I would say it's because javascript appends each section just after the closing tag of a previous section, leaving no space between previous section closing tag and next section opening tag.
HTML version:
<section>
<!-- content -->
</section>
<section>
<!-- content -->
</section>
JS version:
<section><!-- content --></section><section><!-- content --></section>
This is because in the basic html you have new lines separating the section elements:
<section class="pic"></section>
<section class="pic"></section>
In the approach with JavaScript they are glued together on one line:
<section class="pic"></section><section class="pic">
You can read this to update your knowledge for how to avoid the spacing between the inline-blocks:
https://css-tricks.com/fighting-the-space-between-inline-block-elements/
Hello I have created a website for my school work and I am trying to implement a navigation bar for all the pages of the site. I got it working on all my other pages but there is one page in particular where it the entire navigation bar disappears when the page is loaded. The header section should display the navigation bar while the body loads the prime number table.The page should have a navbar like this.
However the prime number table page will not load the home and back icons.
I cant get the stackoverflow formatter to accept my html code so I have to put a link to it, sorry!.
This is the source code
Headers should not be in the <head> element; instead, they should be at the top of the <body> element. So move this code:
<div class="header">
<div class="container">
<div class="navbar">
<a class="logo" href="http://w3.cnm.edu/~tteichelmann"></a>
<a class="back" href="http://w3.cnm.edu/~tteichelmann/cis1210" onclick="history.back();" value="Back"></a>
</div>
</div>
</div>
Into the body. Also, HTML 5 introduced the <header> element (more here), which is a more syntactical way of defining a header... Consider that an alternative, not a requirement.
Move your div with the class of header outside of the head section of the document. It should be within the body tags.
I have a list of <li> items being generated from a CMS/DB. Each <li> has a <div> in it which contains a link to a lightbox (a hidden <div>). The link targets the id of the hidden <div> (#inline-content-print) so the javascript plugin triggers and pulls up the lightbox.
The problem I'm running into is that all of the <li>s on the page generate with the same hidden div id (I can change this to classes). So no matter which <li> href is clicked, it always pulls up the lightbox for the first <li> on the page (the first instance of the id). I need a way for the href to say "open #inline-content-print" from THIS div (the one the link being clicked lives in)".
<li>
<div class="store-buttons-bg hide-print-buttons-{tag_Hide-Print-Buttons}">
PRINT
<div style="display: none;" id="inline-content-print">
CONTENT OF LIGHTBOX
</div>
<!-- end inline-content-print -->
</div>
</li>
Any advice would be greatly appreciated.
What server side language are you using? Is it producing these list items in a loop? Is there an index on that loop? If so, this would work for you.
[Server language version of a for loop with an index variable named "i"]
<li>
<div class="store-buttons-bg hide-print-buttons-{tag_Hide-Print-Buttons}">
PRINT
<div style="display: none;" id="inline-content-print_[server language output of "i"]">
CONTENT OF LIGHTBOX
</div>
<!-- end inline-content-print -->
</div>
</li>
[server language version of an end to the for loop]
Assuming you want to do this with jQuery/Javascript, you could use something like this:
$(document).ready(function()
{
$('li a.store-button').click(function(e)
{
var lightboxElement = $(e.currentTarget).find('div');
lightboxElement.show(); // or whatever function you need to display
return false;
});
});
Which is a little script that:
Waits for the page to load.
Finds your list elements (by li object type and the class on the links)
Intercepts click events.
Finds the div element nested in the link that was clicked.
Displays (or runs another function) on the target lightbox element.
I'm looking for a jQuery solution for this. When I click, let's say on a artist name. Theirs another div beside that has the information showing up. (possibly in a animation/fading way)
Can anyone help?
Link and Info Within Physical Proximity
Use this method if your artist link and artist info is within physical proximity (i.e., sibling in the DOM). Let's say you have:
<a ... class="artistInfo">Artist name</a>
<div class="artistInfo"> .... shown on link click </div>
... repeat
Then use:
$('div.artistInfo').hide(); // Initially hide info
$('a.artistLink').click(function() { // Show on click
$(this).next('div.artistInfo').fadeIn();
});
next() is used to avoid wrapping each link-info set in "per-artist" container. Thus, you should be able to have multiple "sets" of link-plus-info in the same page.
Link and Info in Different Places
When there is no physical proximity between the link and tha info, you will need some sort of identifiers from the link to the info*. E.g.,
<a ... class="artistLink" id="artistLink-1">Artist name</a>
...
<div class="artistInfo" id="artistInfo-1"> .... shown on link click </div>
You can now:
$('div.artistInfo').hide(); // Initially hide all infos
$('a.artistLink').click(function() { // Show on click (by reference)
var n = $(this).attr('id').substring(11); // Remove "artistLink-"
$('#artistInfo' + n).fadeIn();
});
*) Note: You could use the DOM index if links and infos are ordered similarly. I.e., the nth <a> element corresponds to the n info element.
Use the .html method of jquery
If by 'beside' you mean it is the very next sibling, you can use next:
$(".artist").click(function() {
$(this).next("div").slideToggle("slow");
});
<span class="artist">Foo and the Jackals</span>
<div>some content</div>
<span class="artist">Jeff and the misshapen lunatics</span>
<div>some content</div>
...
slideToggle will "Display or hide the matched elements with a sliding motion.".
There can be a number of ways to do this. But then it actually depends on how exactly you want it. one possible way can be use of fadeIn method on a hidden DIV.
<div class='box' style="display:none;">
<p> Artist Description </p>
</div>
<p id='abcd'>Artist Name</p>
for example on this code use this jquery
jQuery('#abcd').click(function(){
jQuery('.box').fadeIn();
});