I have the following code to insert a flowplayer with playlist via javascript on my page. Now I need the player to start at video[playing], this means at a predefined position in the playlist. The console tells me that the object (v.flowplayer) has no method play... what am I doing wrong?
Thanks to the source of the video element, the player starts at the right video, but using the .prev() and .next() functions, messes up the playlist order by playing the second video after using .next(), even if the initial video was the 5th video in the playlist.
var v = videos.eq(2);
var p = $('<div class="fp-playlist"></div>');
var vt = $('<video>');
var s = $("<source>");
var a;
vt.attr({poster: playlist[playing].poster});
s.attr({src: playlist[playing].url, type: "video/" + playlist[playing].videotype});
v.append(vt.append(s));
for(var i = 0; i < playlist.length; i++){
a = $(''.compose(playlist[i].url));
p.append(a);
}
v.append(p);
v.flowplayer().play(playing);
The HTML looks like this, after the javascript has run:
<div class="video flowplayer no-volume fixed-controls no-toggle no-time is-mouseover video0 is-muted is-ready is-paused is-poster" data-embed="false" data-keyboard="false" data-fullscreen="false" style="background-image: url(somepic.jpg);">
<video poster="poster.jpg" class="fp-engine" src="somevid.webm"></video>
<div class="fp-playlist">
</div>
<div class="fp-ratio" style="padding-top: 56.25%;"></div>
<div class="fp-ui">
<div class="fp-waiting">
<em></em>
<em></em>
<em></em>
</div>
<a class="fp-unload"></a>
<p class="fp-speed"></p>
<div class="fp-controls">
<a class="fp-play"></a>
<div class="fp-timeline">
<div class="fp-buffer" style="width: 100%;"></div>
<div class="fp-progress"></div>
</div>
<div class="fp-volume">
<a class="fp-mute"></a>
<div class="fp-volumeslider" style="">
<div class="fp-volumelevel" style="width: 0%;"></div>
</div>
</div>
</div>
<div class="fp-time">
<em class="fp-elapsed">00:00</em>
<em class="fp-remaining">00:12</em>
<em class="fp-duration">00:12</em>
</div>
<div class="fp-message">
<h2></h2>
<p></p>
</div>
</div>
<div class="fp-context-menu" style="left: 489.21875px; top: 179px; display: block;">
<ul>
<li class="copyright">© 2013</li>
<li>About Flowplayer
</li>
<li>GPL based license
</li>
</ul>
</div>
The last javascript line with v.flowplayer().play(playing) should be like:
v.data('flowplayer').play(playing);
Related
Hey all I am having the worst time trying to figure out why my XPath code below is not able to find the Image tag and the HREF link that goes with it within my document.
The XPath (full) looks like this:
//html/body/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/a/div/svg/g/descendant::image[starts-with(#href,'https://')]
The javascript code I am using is:
function checking(Path) {
const nodes = document.evaluate(Path, document, null, XPathResult.ANY_TYPE, null);
const result = {
Data: []
};
let attr = nodes.iterateNext();
result.Data.push({ href: attr});
return JSON.stringify(result);
}
console.log(checking("//html/body/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/a/div/svg/g/descendant::image[starts-with(#href,'https://')]"));
And the HTML that I am looking through to get said image Xlink:HREF:
<body class="">
<div id="" style="">
<div>
<div class="">
<div class="">
<div class="">
<div class="">
<div class="">
<div class="">
<div class="">
<div class="">
<div class="" role="5ma">
<div class="">
<div class="">
<div class="">
<div>
<div class="">
<div class="">
<div class="">
<a aria-label="" class="" href="https://www.this.com/link/is/not/needed" tabindex="0">
<div class="">
<svg aria-label="" class="" data-visualcompletion="ignore-dynamic" role="img" style="height: 168px; width: 168px;">
<g mask="url(#)">
<image x="0" y="0" height="100%" width="100%" xlink:href="https://www.google.com/logos/doodles/2021/seasonal-holidays-2021-6753651837109324-6752733080595603-cst.gif" style="height: 168px; width: 168px;"></image>
<circle class="" cx="8" cy="4" r="4"></circle>
</g>
</svg>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
I keep getting NULL for the output for some reason? And here is a jsfiddle to visually test it.
{
"Data": [
{
"href": null
}
]
}
Anyone have a clue as to why I am?
UPDATE 1
Checking the "offical" xPath to my project comes out to be this:
// html/body/div1/div/div1/div/div3/div/div/div1/div1/div/div/div1/div2/div/div/div/div1/div/div/svg/g/image
Which I change the latest fiddle to reflect what #bigless suggested in his fiddle but still get null.
Newest fiddle
Alternative to #Jack Fleeting answer (skipping all those divs just for example) with xlink:href selector:
string(//*[name() = 'svg']/*[name()='g']//*[name()='image' and starts-with(#*[name()='xlink:href'],'https://')]/#*[name()='xlink:href'])
This will extract just attribute value as a string (first occurence)
A few things:
First, you have a problem with namespaces and Deprecated XLink URL reference attributes.
Second, in
result.Data.push({
href: attr
});
you should push the node value of the attribute:
result.Data.push({
href: attr.nodeValue
});
Finally, because of the namespace issue, and to simplify the xpath expression, change your comeback to
var comeback = checking("//*[local-name()='image'][starts-with(./#href,'https://')]/#href");
And it should work as in this fiddle.
I've been reading several questions that appear to be similar but didn't find one that resolve my issue or that the suggested solution solved my problem
I have the following html:
<div id="template">
<div class="section1" id="sec1">
<div class="content">
<img id="sec1-is" *ngIf="!tstEnded" src="assets/images/r1.png" srcset="assets/images/r1#2x.png 2x,assets/images/r1#3x.png 3x" >
<img id="sec1-if" *ngIf="tstEnded" src="assets/images/r2.png" srcset="assets/images/r2#2x.png 2x,assets/images/r2#3x.png 3x" />
<div class="audio-controls">
<button *ngIf="do1()" (click)="act1()" class="control-btn r1-btn" [ngClass]="{'disabled':!r1Enabled()}"></button>
<button *ngIf="do2()" (click)="act2()" class="control-btn r2-btn" [ngClass]="{'disabled':!r2Enabled()}"></button>
</div>
<div class="test-wrapper">
<span class="test-line">
{{eta}}
</span>
</div>
<div class="test-wrapper">
<div class="test" tst testType="R" (tstGo)="go($event)"></div>
</div>
</div>
</div>
<div class="section2" id="sec2" style="background-image: linear-gradient(to top, #d0f6f6, rgba(255, 255, 255, 0));">
<div class="content">
<div *ngIf="ended">
<img *ngIf="!open" class="case1" (click)="case1()" src="assets/images/case1c.svg" />
<img *ngIf="open" class="case1" src="assets/images/case1.svg" />
</div>
</div>
</div>
</div>
After cloning the template I wish to change the id attribute of section 1 and 2 as well as the src and srcset of section1 images sec1-is & sec1-if
and change the
let itm = document.getElementById("template");
let cln = itm.cloneNode(true);
How can I get a specific "nested" element without iterating over all the children and grandchildren of template, searching for the correct tag?
Hope this help:
var origin, clone, item;
origin = document.getElementById("template");
clone = origin.cloneNode(true);
item = clone.querySelector("#sec1");
item.setAttribute("id", "sec2");
Overall:
Use querySelector on your clone then setAttribute to update.
Since your img already has id so you can query directly with #sec1-is.
But in general, with querySelector you can have the query string like #sec1 img. Similar to css selector
You can learn more here: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
You can try getting the specific using querySelector() and querySelectorAll() from the cloned element.
Demo:
let itm = document.getElementById("template");
let cln = itm.cloneNode(true);
//get element with .section1
let section1 = cln.querySelector('.section1');
//set id
section1.id = 'sec123'
console.log(section1);
//get element with img in .section1
let img = section1.querySelectorAll('.content img');
//set src of first image
img[0].src = '../test';
//set srcset of first image
img[0].srcset = '../test/test';
console.log(img[0]);
//set src of second image
img[1].src = '../test2';
//set srcset of second image
img[1].srcset = '../test2/test';
console.log(img[1]);
<div id="template">
<div class="section1" id="sec1">
<div class="content">
<img id="sec1-is" *ngIf="!tstEnded" src="assets/images/r1.png" srcset="assets/images/r1#2x.png 2x,assets/images/r1#3x.png 3x" >
<img id="sec1-if" *ngIf="tstEnded" src="assets/images/r2.png" srcset="assets/images/r2#2x.png 2x,assets/images/r2#3x.png 3x" />
<div class="audio-controls">
<button *ngIf="do1()" (click)="act1()" class="control-btn r1-btn" [ngClass]="{'disabled':!r1Enabled()}"></button>
<button *ngIf="do2()" (click)="act2()" class="control-btn r2-btn" [ngClass]="{'disabled':!r2Enabled()}"></button>
</div>
<div class="test-wrapper">
<span class="test-line">
{{eta}}
</span>
</div>
<div class="test-wrapper">
<div class="test" tst testType="R" (tstGo)="go($event)"></div>
</div>
</div>
</div>
<div class="section2" id="sec2" style="background-image: linear-gradient(to top, #d0f6f6, rgba(255, 255, 255, 0));">
<div class="content">
<div *ngIf="ended">
<img *ngIf="!open" class="case1" (click)="case1()" src="assets/images/case1c.svg" />
<img *ngIf="open" class="case1" src="assets/images/case1.svg" />
</div>
</div>
</div>
</div>
I'm trying to swap out the title attribute on all images on the page that contain the string slide in the class name. The image class names vary and are followed by a unique numeric string (ex: slide-1234, slider-4321) so it's important it just contains the string slide. I want to replace it with the WordPress post title. Here is my code so far (doesn't work)
<script>
var title = '{{get_the_title()}}';
$('img[class*=slide]').attr('title', title);
</script>
Very simple, but unfortunately doesn't work. I used alert to debug and was able to print the title, but the selector is the issue.
Here's the HTML
<h6 class="text-primary mb-5 mt-5">Session Photos</h6>
<div id="metaslider-id-1572" style="width: 100%;" class="ml-slider-3-15-3 metaslider metaslider-flex metaslider-1572 ml-slider">
<div id="metaslider_container_1572">
<div id="metaslider_1572">
<ul aria-live="polite" class="slides">
<li style="display: block; width: 100%;" class="slide-1573 ms-image"><img src="https://knowledge.page.org/wp-content/uploads/2019/07/DSC04292-850x500.jpg" height="500" width="850" alt="" class="slider-1572 slide-1573" title="DSC04292" /></li>
</ul>
</div>
</div>
</div>
I believe your script is running before the DOM is fully loaded. You can either place the script code at the bottom of the body tag OR try wrapping your code with $(document).ready(function(){...}).
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var title = 'someTitle';
$('img[class*=slide-]').attr('title', title);
});
</script>
<h6 class="text-primary mb-5 mt-5">Session Photos</h6>
<div id="metaslider-id-1572" style="width: 100%;" class="ml-slider-3-15-3 metaslider metaslider-flex metaslider-1572 ml-slider">
<div id="metaslider_container_1572">
<div id="metaslider_1572">
<ul aria-live="polite" class="slides">
<li style="display: block; width: 100%;" class="slide-1573 ms-image"><img src="https://knowledge.page.org/wp-content/uploads/2019/07/DSC04292-850x500.jpg" height="500" width="850" alt="" class="slider-1572 slide-1573" title="DSC04292" /></li>
</ul>
</div>
</div>
</div>
I want to get the text on click with a certain class but nothing works. I have a div with 2 p tags and I want to get both separate. Also, I want to append them. .append() appends but just keeps adding all targeted events. empty().append() gives me random results (on first click it works, on second I get half of the text etc). Ive tried most of what I could find on stack overflow but nothing helped. Any help would be great!
Ive tried:
$(event.target).text(); //that gives me the text, but not both p elements separate
$(this).hasClass('.video-title'); //only returns to me true/false
var title= document.getElementsByClassName("video-title")[0].innerHTML; //doesn't give me the current element.
$('p.video-title').innerHTML; //doesnt help either
HTML
<div class="video-container">
<iframe id="vid_frame" src="https://www.youtube.com/embed/xxx?rel=0&showinfo=0&autohide=1" width="900" height="450"></iframe>
<div id="video-info"></div>
</div>
<div class="col-sm-4 video-col">
<div class="video-wrapper" onClick="attachSrc('yyy', event)">
<img src="assets/images/thumbnail/yourHeart_official.jpg" width="260" height="160">
<div class="overlay">
<p class="video-title">title 1</p>
<p class="video-author">author 1</p>
</div>
</div>
</div>
<div class="col-sm-4 video-col">
<div class="video-wrapper" onClick="attachSrc('xxx', event)">
<img src="assets/images/thumbnail/yourHeart_karaoke.jpg" width="260" height="160">
<div class="overlay">
<p class="video-title">title 2</p>
<p class="video-author">author 2</p>
</div>
</div>
</div>
<script>
function attachSrc(id, event) {
var text = $(event.target).text();
$('#video-info').append(text);
}
</script>
As you are using jQuery, I would recommend you to use unobtrusive event handler and use .on() to attach event handlers.
Here in example I have attached event with wrapper element and DOM traversal method to traverse and target desired element.
And to persists arbitrary data use data-* prefixed custom attribute which can be fetched using .data(key)
<div class="video-wrapper" data-id="yyy">
Script
$('.video-col').on('click', '.video-wrapper', function() {
var elem = $('#video-info').empty();
var title = $(this).find('.video-title').text();
elem.append(title);
console.log(title);
var author= $(this).find('.video-author').text();
elem.append(author);
console.log(author);
console.log($(this).data('id'));// To fetch custom data associated with element
});
$(function() {
$('.video-col').on('click', '.video-wrapper', function() {
console.clear();
var elem = $('#video-info').empty();
var title = $(this).find('.video-title').text();
elem.append(title);
console.log(title);
var author = $(this).find('.video-author').text();
elem.append(author);
console.log(author);
console.log($(this).data('id')); // To fetch custom data associated with element
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="video-container">
<div id="video-info"></div>
</div>
<div class="col-sm-4 video-col">
<div class="video-wrapper" data-id="yyy">
<img src="assets/images/thumbnail/yourHeart_official.jpg" width="260" height="160">
<div class="overlay">
<p class="video-title">title 1</p>
<p class="video-author">author 1</p>
</div>
</div>
</div>
<div class="col-sm-4 video-col">
<div class="video-wrapper" data-id="xxx">
<img src="assets/images/thumbnail/yourHeart_karaoke.jpg" width="260" height="160">
<div class="overlay">
<p class="video-title">title 2</p>
<p class="video-author">author 2</p>
</div>
</div>
</div>
I am trying to create a comparison overlay that shows items selected by users when they 'add to compare' link.(like one in flipkart that appears on top when you hit add to compare). Here is my code:
<div class="college-list-container">
<div class = "individual-college-container" id="text1">
<div class="image-header"><h3>text1</h3>
</div>
<div class="dark-overlay">
<div class="overlay-links" style=" float:left;"> <div class="absolute-center ">Details</div></div>
<a href=""> <div class="overlay-links" style=" float:right; border-right:none;"> <div class="absolute-center comparison" id="comparison">Add to compare</div>
</div></a>
</div>
</div>
<div class = "individual-college-container">
<div class="image-header"><h3>text2</h3>
</div>
<div class="dark-overlay">
<div class="overlay-links" style=" float:left;"> <div class="absolute-center ">Details</div></div>
<a href=""> <div class="overlay-links" style=" float:right; border-right:none;"> <div class="absolute-center comparison">Add to compare</div>
</div></a>
</div>
</div>
<div class = "individual-college-container" id="itm">
<div class="image-header" ><h3>text3</h3>
</div>
<div class="dark-overlay">
<div class="overlay-links" style=" float:left;"> <div class="absolute-center ">Details</div></div>
<a href=""> <div class="overlay-links" style=" float:right; border-right:none;"> <div class="absolute-center comparison">Add to compare</div>
</div></a>
</div>
Javascript
/show overlay when one checkbox is checked and add its name/image to the empty space
$('.comparison').click(function(e){
var clgId = $(this).parentsUntil('.individual-clg-container').find('.image-header').text();
e.preventDefault();
var clg = $("<li></li>")
clg.text(clgId);
var removeLink = $("<a href=''>(Remove)</a>");
clg.append(removeLink)
$('.comparison-colleges').append(clg);
$('.add-to-compare-overlay').show("slide", { direction: "up" }, 300);
});
I want the text in the div containing class 'image-header' to be assigned to the variable clgId. The problem that i am facing with my code is that it is adding the text of all the divs containing class 'image-header'. Ex i want the value text1 to be assigned on clicking add to compare of the div with id text1. However it assigns 'text1 text2 text3' to clgId.
Please help
I've created a JSFiddle with what I think is your desired functionality (I included a console log output in the script of the clgId variable):
http://jsfiddle.net/py38kuvv/
I replaced the parentsUntil function with the closest function (and replaced the individual-clg-container class selector):
var clgId = $(e.target).closest('.individual-college-container').find('.image-header').text();
and also updated your click handler:
$('.comparison').on( "click", function(e) {
In order to get a quicker response in future, posting a JSFiddle of what you have so far makes it easier for others to help :)
It is adding all of them because
var clgId = $(this).parentsUntil('.individual-clg-container').find('.image-header').text();
should be
var clgId = $(this).parentsUntil('.individual-college-container').find('.image-header').text();