I want to make a button that will have href that is same as another button.
I have one button on my website that not all users see but its almost hidden and hard to reach. This button has specific UR for every user and contains his ID. On another page I want to create a button that will copy the same href from the other button:
Here is an example:
<div class="row exsisting-button button-hard-to-reach">
See my offers
</div>
<div class="row new-button">
Here are you offers
</div>
You can use querySelector to find element and getAttribute getAttribute to set get href
document.querySelector('.btn-href').setAttribute('href',
document.querySelector('.your-offers').getAttribute('href')
);
<div class="row exsisting-button button-hard-to-reach">
See my offers
</div>
<div class="row new-button">
Here are you offers
</div>
Related
I am using Tag manager and Anayltics 360.
My code as follows,
<div rel="ABC_Links" class="ak_widget" >
<!-- BEGIN: Widget - Links -->
<section class="mfb-30">
<div class="widget_links">
<div class="widget_container">
<div class="widget_content">
<button type="button" class="buttonShadow" onclick="window.open('https://somepagelink.aspx); return false;">
<div class="widget_item">
<div class="widget_icon">
<svg>123</svg>
</div>
<div class="widget_text"><span style="overflow-wrap: normal;">ABCD TEXT</span></div>
</div>
</button>
<button type="button" class="buttonShadow" onclick="window.open('https://somepagelink.aspx); return false;">
<div class="widget_item">
<div class="widget_icon">
<svg> 12345</svg>
</div>
<div class="widget_text"><span style="overflow-wrap: normal;">XYZ TEXT</span></div>
</div>
</button>
</div>
</div>
</div>
</section>
<!-- END: Widget Links --></div>
I have 12 buttons in this same format. Here i have given an example of two buttons.
Button name i can change later so i can not take it as hard coded for "Click Text" in tag manager.
I can use only rel= "ABC_Links" as unique identifier. I can not use any of below class as they are not unique.
I have used Custome javascript to get parent child relationship but didn't work.
I have used DOM element variable but it did not work.
Now Question is, Is there any way to trigger event in tag manager when i click on any of the button below and get the info in real time event in Anayltics 360 ???
One way to achieve this would be to create a User-Defined Custom JavaScript variable in GTM to set isABCLink=true on button click.
On the Variables screen under Built-In Variables make sure you have "Click Element" ticked.
Create a User-Defined Variable
Name: isABCLink
Type: Custom JavaScript
Code:
function() {
return {{Click Element}}.matches("div[rel=ABC_Links] button, div[rel=ABC_Links] button *");
}
Create a Trigger
Trigger Type: Click - All Elements
This trigger fires on: Some Clicks
Conditions: isABCLink equals true
Set up your tag firing on above trigger
Once caveat to point out is that the exact element clicked on could be the button or one of the child elements of the button such as the <svg> which might make it hard to set up your tag depending on what exactly you need.
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'm trying to capture the value of the product description when an image link is clicked. Then use that product description in a Google Tag Manager variable. Here's a sample of the relevant page source:
<div class="item2">
<div class="list-image">
<a href="https://example.com/product1">
<img alt="" src="https://example.com/product-thumbnail.jpg"></a>
</div>
<div class="list-desc">
<h3>
PRODUCT DESCRIPTION
</h3>
</div>
</div>
The user can click either the div class=item2 or div class=list image to trigger the link click.
I'm thinking the answer will involve using .closest() and/or a combination of parentElement, nextElementSibling but I cannot get it to work in Google Tag Manager.
I've tried various combinations using the GTM Datalayer-type Variable and the Custom Javascript-type variable without success.
I have various read more buttons under each staff details in my about.html which will direct to their particular sections in another page. i have about.html where i have displayed the staff images, excerpt description and a read more button. Full description of each staff can be red from the bio.html where i have entered the complete description.
When read more button of say id #bio1 is clicked it will be linked to http://www.mysite/bio.html#bio2 . i want all the other ids to be hide in this case(#bio2, #bio2, #bio3 and so on)
HTML CODE
<li>
<div class="item">
<div class="img_block wrapped_img">
<img src="img/pictures/team1.jpg" alt="Tom" />
</div>
<div class="carousel_title">
<h6>Dave</h6>
<div class="op">Chair Person</div>
</div>
<div class="carousel_desc">
<div class="exc">Saul Yarmak has the distinguished honor or repeating his role as Chairman of BXI.</div>
<div class="read_more">
Read More
</div>
</div>
</li>
When you click on #bio1 hide all elements with particular class and show only #bio1:
<span id='bio1' class='a'></span>
...
<span id='bio8798' class='a'></span>
$(document).on('click', '.a', function(){
$('.a').hide();
$(this).show();
})
Add a class to the links and use jquery not() as shown here: jsfiddle
$('.myLink').click( function() {
$('.myLink').not(this).css('visibility','hidden');
});
This will make all elements of class myLink invisible - except the one that has been clicked (this) . If you want to remove from the layout then you would use hide() rather than css('visibility','hidden')
give you bio elements a class name "bio". then do the following to hide them all:
$(".bio").hide();
after that show your selected bio:
$("#bio6").show();
see http://api.jquery.com/hide/ and http://api.jquery.com/show/
If on click of button (#bio1), redirects to another page then I don't think there is a use for hiding other buttons.
Since page is already redirected to another page/section.
Update:
Now you can do this using Attribute Starts With Selector,
var bioVar = $("div[id^='bio']");
bioVar.on("click", function() {
bioVar.not(this).css("display", "none");
});
I'm trying to write a test for a mobile webapp with cucumber+watir-webdriver, but one particular link on a splash message is giving me trouble.
The link I want to select is <a class="btn" href="#">Close button</a>, which is created on the page by javascript.
I tried these selectors:
browser.link :text => 'Close button'
browser.link(:class,"btn")
browser.div(:id,"vf_dialog_desc").link(:class,"btn") # with encompassing div
browser.div(:xpath,"//div[#id='vf_dialog_desc']/descendant::a[text()='Close button']")
However, all of them fail with a variant of the error:
Error: {"message":"Unable to locate an element with the xpath expression (...snip xpath expression...) because of the following error:\nTypeError: Object #<an HTMLDocument> has no method 'evaluate'"}
Strangely enough, browser.html.include? 'Close button' is evaluating to true, so watir can access the element.
Note that, unlike other similar questions, this page is not in a frame.
The page structure is:
<html>
<head>...</head>
<body>
<div id="home">
<div id="vf_dialog_holder" class=" show">
(...)
<div id="vf_dialog_wrap">
<h4 id="vf_dialog_head" style="display: block;" class=" vf_dialog_info_icon">Welcome to xpto</h4>
<div id="vf_dialog_desc">
<img src="884857.jpg">
<p>Blurb.</p>
<a class="btn" href="#">Close button</a>
</div>
<div class="clr">
</div>
</div>
I am running watir-webdriver (0.6.4) on ruby-2.0.0-p247.
Since the button is created via javascript, I am guessing that watir is trying to interact with the button before it becomes visible. Try explicitly waiting for the element.
If you just want to wait for the link to be present:
browser.link(:class => "btn").wait_until_present
If you want to do something with it (eg click it) once the link appears:
browser.link(:class => "btn").when_present.click