<ul id="audio-player-playlist">
<li class="playlist_item" data-song_title="title" data-song_artwork="" data-song_file="http://example.com/mysong.mp3" data-song_artist="Artist"></li>
<li class="playlist_item" data-song_title="title" data-song_artwork="" data-song_file="http://example.com/mysong.mp3" data-song_artist="Artist"></li>
<li class="playlist_item current" data-song_title="title" data-song_artwork="" data-song_file="http://example.com/mysong.mp3" data-song_artist="Artist"></li>
</ul>
This is the list generated by my audio player. When I click play, the playlist_item_current class is added to the song that's playing.
The thing is I want the users the be able to share the song playing. How can I get the current song's data and put it in my share button?
I suspect that the music player you are using is created in javascript & you probably are already using jQuery as well so in that case:
in jQuery you can easily do the following to retreive the songname from the currently playing song:
$('.playlist_item.current').data('song_title');
For the artist:
$('.playlist_item.current').data('song_artist');
These functions would return the necessary data.
Related
I am implementing Google One Tap in my website, however I am unable to prevent the popup from spawning immediately after the logout. I know I could manually set a cookie for that, however the official documentation suggests to add the class g_id_signout to any link or button used for the logout. In my menu I have this entry:
<li>
<a id="public-logout" class="g_id_signout" href="#logout"> <wk:text
name="public_area.logout"/></a>
</li>
but the popup still shows immediately after the logout. For reference, the "X" button on the One Tap popup triggers the cooldown regularly. Any idea?
Is the link dynamically created after Google One Tap library loaded?
If that's the case, the library cannot add correct event handler to this link.
You can try to add the click event handler by yourself with the example code below:
<li>
<a id="public-logout" onclick="google.accounts.id.disableAutoSelect(); return true;" href="#logout"> <wk:text
name="public_area.logout"/></a>
</li>
Or, you can bind the click event hander by JavaScript code.
More details at: https://developers.google.com/identity/one-tap/web/reference/js-reference#google.accounts.id.disableAutoSelect
I am writing a selenium script that automates a web-page. I need to click on a button which is defined within a list.
This is the image of my web UI - New Account is the button I am referring to
This is my XML code :
<div id="00B4E000000LQ2C_topNav" class="topNav primaryPalette">
<div id="00B4E000000LQ2C_subNav" class="subNav">
<div class="linkBar brandSecondaryBrd">
<div id="00B4E000000LQ2C_listButtons" class="listButtons">
<ul class="piped">
<li>
<input class="btn" type="button" title="New Account" onclick="navigateToUrl('/setup/ui/recordtypeselect.jsp?ent=Account&ekp=001&retURL=%2F001%3Ffcf%3D00B4E000000LQ2C%26isdtp%3Dnv%26nonce%3Df8007ad94993912b7ff4149193a6096ccfed4ebb1454e0b9b310ad14b61de71d%26sfdcIFrameOrigin%3Dhttps%253A%252F%252Fcs83.salesforce.com&save_new_url=%2F001%2Fe%3FretURL%3D%252F001%253Ffcf%253D00B4E000000LQ2C%2526isdtp%253Dnv%2526nonce%253Df8007ad94993912b7ff4149193a6096ccfed4ebb1454e0b9b310ad14b61de71d%2526sfdcIFrameOrigin%253Dhttps%25253A%25252F%25252Fcs83.salesforce.com&isdtp=vw','LIST_VIEW','new');" name="new" value="New Account"/>
</li>
<li class="lastItem">
</ul>
I used:
driver.findElement(By.xpath(".//*[#id='00B4E000000LQ2C_listButtons']/ul/li[1]/input")).click();
(Xpath was given by the firebug) but it gives me an error stating
unable to locate elements
Please help me script / locate this button.
You don't have to use XPaths generated by the Firebug and check the element's parents along the way. We can do better, you can write a more reliable and a simpler way to locate the element:
driver.findElement(By.name("new"));
or:
driver.findElement(By.cssSelector("input[name=new]"));
or:
driver.findElement(By.cssSelector("input[value='New Account']"));
Note that the XPath expression you have looks valid. You may be experiencing a timing issue and would need to wait for the element presence, visibility or clickability, see: How to wait until an element is present in Selenium?.
And, if the button is inside the iframe, you need to switch to its context and only then search the button:
driver.switchTo().frame("ext-comp-1005");
Hi please try like below
// first way
driver.findElement(By.xpath("//*[#name='new']")).click();
// second way
driver.findElement(By.xpath("//*[#class='btn']")).click();
// basically you can use various attributes of input tag with button inside the xpath to click
Update working with i frame
// A short way to identify how many iframe's are present on a web page
List<WebElement> numberOfFrames= driver.findElements(By.tagName("iframe"));
System.out.println("Total Number of iframes present are : " +numberOfFrames.size());
for(int i=0;i<numberOfFrames.size();i++){
// here u can identify iframes with any of its attribute vale say name,title or which is most suitable.
System.out.println("Name of the i-frames : " + numberOfFrames.get(i).getAttribute("name"));
}
// Back to your question - button lies inside iframe hence
// key here is before clicking you have to switch to the frame first
driver.switchTo().frame(driver.findElement(By.name("frame name")));
hope this helps you
An app I'm building shows email accounts in a sidenav as a dropdown (or accordion) as described here.
The dropdown works fine when the data exist on load time, thanks to the UIkit observer.
The code looks something like this (simlified):
<div id="app_wrapper" data-uk-observe>
<ul class="uk-nav uk-nav-side uk-nav-parent-icon" data-uk-nav data-uk-observe>
{{#each mailAccounts}}
<li class="uk-parent ct-mail-account-side-nav-entry">
user#domain.tld
<ul class="uk-nav-sub">
<li><i class="uk-icon-inbox"></i> Inbox</li>
<li><i class="uk-icon-folder"></i> Sent</li>
<li><i class="uk-icon-folder"></i> Trash</li>
<li><i class="uk-icon-folder"></i> Spam</li>
</ul>
</li>
<li class="uk-nav-divider"></li>
{{/each}}
</ul>
</div>
When adding new accounts through a meteor method, the entry appears yet the dropdown is stone dead. Only if the template is completely rerendered it comes to life. That usually requires a little detour to some other page where the menu doesn't exist.
How can I make the observer aware of the change?
Why doesn't the observer notice the change and apply it's magic to the newly created entry?
Is there a way to manually assign the JavaScript dropdown magic to the newly created element?
UIkit Version: 2.19.0
Meteor uses ractive variables to modify DOM at runtime. What this means is that your mailAccounts need to be a ractive variable. There are two cheap (in terms of effort) methods to achieve this
Define mailAccounts as a session variable
Have mailAccounts be part of a collection
There is a third way as well, if you don't mind writing some more code. Use ractiveVar package and define mailAccounts as a reactiveVar.
with Google Tag Manager Auto-Event Tracking (dataLayer.push), I want to track this information:
the name of the links clicked in my menu, for example:
<ul class="my-nav">
<li>
Anoter site
</li>
</ul>
so: 'Another site'
I want to push the name of the parent link name of the clicked link with this structure:
<li>Linkname
<ul>
<li>
Website name
<li>
<ul>
<li>
So there: I want 'Linkname'
the 'status' of a toggle link - whether the element has a class 'open' or not
<a class="content-toggler open" href="#">Hide all the content</a>
I have read through many tutorials and walkthroughs, but most talk about tracking links that go to external sites in general, or submit events and so on.
Here I want to track the name of a link in a certain dom tree.
And I want to track the element 'status' with a certain class.
Please explain how this can be achieved, or refer me to articles that have an example to
this kind of events, not only to general walkthroughs.
Many many thanks!
Let's start with the last one.
1) What you have to do it to create a link click listener (new tag-->tag type-->Link click listener) and run it on all the pages (or only the pages where it is relevant). This will generate an event for GoogleTagManager that you an use in a rule.
2) Create a rule like the following. This will trigger an event that we will do in the next stage
3) Set an event like the following. Note that I added an element id. If you have more than one toggle open link, you need to find a way how to distinguish between them on google analytics. ID could help you. Also note that using gtm you can only use the classes, not one specific class. (as far as I know)
Now let's go back to the first one. You can use the same method used here above, but instead of putting the {{element classes} as the value of the event, you can create a new macro that will employ the inner text of that link (gtm.element.innertext). On how to do it, read here: http://www.swellpath.com/2013/10/google-tag-manager-inspecting-andconfiguring-auto-event-tracking/
For the second one, you need the innertext of a third level parent. I'm not sure how to implement it other than using javascript that will call an event through the data layer.
So I would suggest a solution like the following:
Create an event on GTM that listens to events that are pushed via the data layer.
On how to do this, go to this post: http://moz.com/ugc/tracking-google-analytics-events-with-google-tag-manager
Start with "Tracking Google Analytics Events with GTM: The Second Way" and do steps: 1,2 and 3.
Create javascript code that is executed when the link is clicked. This JS will take the text of that 3rd parent element whenever that link is clicked. Again, I suggest to provide IDs so the task will be easier.
Then, the same JS code should then run this code
dataLayer.push({ 'event':'GAevent', 'eventCategory':'Navigation Clicks', 'eventAction':'Menu Item Click', 'eventLabel':'Outbound Click', 'eventValue:***YOUR 3RD LEVEL PARENT TEXT HERE***});
Then the event with the value is registered via google analytics.
Note that all the names I gave for the event values in my reply are based on my understanding of your needs. You will need to adjust them to what you want to achieve with this event tracking.
I have am using JQuery Mobile in asp.net web form and on button click I want to load the list. In code behind I am getting the list is this way
List<Reportee> associates = new List<Reportee>();
associates = DALLayer.GetReporteeForEmployee(EmployeeId);
Here, associate is a class which has two property [reporteeName and reporteeId].
How can I show all the reportee Name in the list?
print a <ul> tag
for each associate:
print <li>
print the text you want
print </li>
when foreach ends print </ul>
I have no idea why you asked...
What does it have to do with jquery mobile? O, I know! Instead of <ul> print <ul data-role="listview">