[ng-bootstrap] in case of multiple ngbNav on same page, contents of second and below navs are never displayed with ngbNavOutlet directives, but the first only (looks like it can recall ng-template of first ngbNav only).
thx for your help.
I see there is the same id used for the first and the second nav panels. Just make it unique and both nav panel will work well.
Use the attribute from the API domId
[domId]="unique-id-here"
https://ng-bootstrap.github.io/#/components/nav/api
Related
I'm wanting to create a variable to grab the username from a landing page (assuming it's possible). In my attached examples, I'd like to grab the text "Landing_page_test".
I'm just learning CSS so I'm not able to single out just that text.
Any thoughts/suggestions would be much appreciated! enter image description here
Console
Elements Pane of Landing Page
document.querySelector returns an element, not the text. Add .innerText
Try it out on this page: document.querySelector("a.question-hyperlink").innerText to get the name of the question.
But you probably don't want to do it as custom html tag. You probably want to do it on click. in that case, you have {{Clicked Element}} variable in GTM, of which you can also get .innerText, or get its .parentElement and further navigate DOM from the clicked element as you wish and get whatever you need.
Here's the html of the Location & Date/Time text blocks
Text Block
I want to be able to know exactly which element from a class has been clicked. I enabled the text option in Tag Manager:
But it's still not visible in the click object. But it wouldn't pick it up, since the tag containing the text is nested in the clickable element. Can I add a custom HTML attribute to be able to identify which element has been clicked?
<div class="card-content"> //<---- clickable element
<i aria-hidden="true" class="card-icon material-icons">business</i>
<h3 class="card-title">Company details</h3> //<--- clicked text
</div>
The best way to figure it out is to use the "Preview & Debug":
Activate it
Go to the page where you want to test (you should see now a new box at the bottom)
Click on the element
Check the variables in the debug box. Especially check the click.element data.
My guess is that since there is no "real" text in the div box, just children tags, no text can be discovered.
There are different options to solve it:
add the text as data-attribute to the div and use the click.element data
use a data-layer push event
if you know JS you can use the click.element data in a JS variable and traverse down to the h3
If you are going to keep your code as it is, you could create a custom variable, using Custom JavaScript.
In order to do so you need to first create the custom variable, choosing the Custom JavaScript type:
This code should do the job (I tested id)
function() {
return {{Click Element}}.closest('.card-content').getElementsByClassName('card-title')[0].innerText;
}
The custom variable will return the text inside .card-title.
To test the custom variable, you may create a dumb HTML tag with a console.log script, replacing Inside TXT with the name you gave to your custom variable:
<script>console.log( {{Inside TXT}} )</script>
The trigger should be a Click All Elements.
When previewing this tag, the captured text should appear in your console, as well as in the debugger panel.
Reading again your question, I wonder if you are going to have several .card-title items inside the .card-content. In that case, this custom variable will not work. Let me know what is the case.
Also, the code could be simpler, but I am not really sure on how is it really going to work in your site, so this one seems more reliable, since it works clicking anywhere in the element.
EDIT:
In order to test it, after you click an element, a new "Click" will appear in the left pane (Summary). There, in the Variables tab, you will see the variables captured by the click. The data will be stored under the variable name you gave to the variable.
I try to use Click Element id=elementid in Robotframework.I have Selenium2 Library.I have a Menu collapsible.See little arrow on Entity 1 on first print screen.I try to identify the element id.I cannot see element id when I inspect this.I see only jotid that I do not think is the same.So, I am not able to use click element in order to expand my menu.I appreciate anyone's help as I am still learner.Please see also the images of a) Code, Menu, Inspected Element
You can also find it using xpath, so:
Click Element | //li[#wuid="gx:309..."]
jotid is not id, so you cannot locate it by id.
You could try keyword:
Click Link ENTITY 1 -Introduction
or find it by css:
Click element css=a[jotid='wuid:gx:4286...<the rest of it>']
I'm working on an ASP.NET web app in VS2010,C#, I want to make something like this page:
http://www.just-eat.co.uk/restaurants-simplyscrumptious/menu
when you click on food categories on left, page jumps to that category without any postback, how can I achieve it?
How to move with out post back
You use the anchor # at the end of the same page url following with the name that you with to move.
Then inside the page you place an anhro with the name that you wish to jump like
<a name="MovePosition"></a>
So if you make a link like http://www.site.com/catalog.aspx#MovePosition the browser will brink the line with the <a name="MovePosition"></a> on top.
reference: http://www.w3.org/MarkUp/1995-archive/Elements/A.html
categories menu always on the same point
If you also notice the categories on the left are stay on the same position. This can be done by many ways. In this specific page is use a script to change his location. How ever the better is to place the categories inside a div and give on this div this extra style position:fixed;bottom:0px; and will stick on the position that you have place it relative to his parent div.
There are many ways to keep the category menu stay on the same point. One other can be found here : http://www.dynamicdrive.com/dynamicindex1/staticmenu.htm even so is old code.
Just addition to the previous answer #Aristos
If on the same page, just do
Go to section 1
If on another page then do
Go to section 1 on another page
Then define the sections with <a name="#sectionName"></a>
<a name="section1"></a>
Thi section 1
content for section 1 follows
<a name="section2"></a>
This section 2
content for section 2 follows
On the "services" and "company" pages I have a right sidebar list. This is being included with PHP. So far I have a CSS class for normal and a CSS class for when you hover each item in the list. I want to have a new class for when each list item is selected. So for example in services, the user clicks on "family planning" and when they get to the family planning page....the family planning list item has a grey background. Is this possible?
http://beulahprint.ie/index.php
Cheers,
Colm
Nothing in CSS will let you match an element based on it's href attribute resolving to the current URL.
Add a class to the menu item (or the body element) server side based on the page, then use a write a selector to match that.
There are a few ways to accomplish this but you'll need a little bit of code. It works like follows:
On your page you should somehow declare which page it is (by using a querystring or session)
Then you should parse this value and write out the class name of the menu dynamiclly.
Yes it is possible, when rendering the sidebar/menu, check if they are in a specific page/namespace and add a class to it which has grey background.
The general design people use for such scenarios is to place all items related to one menu item in one namespace.
like all admin items will be under */admin/*, so that when rendering the menu, they will check the url and add the class to it.