i got a page on a site and there are several videos within blocs. When i play one video and then hit the close button or click on another box to open it, it works all just fine. But the problem comes when i add extra html markup around the videos, it breaks the close button behavior.
Here's the markup of a box (i've got multiples in my page):
<div class="box" data-size="660,605">
<div class="cunload2">
<div class="expandable">
<span class="simple">
<a class="cunload" href="javascript:;"></a>
</span>
<div class="exandable-vids-container">
<iframe ... ></iframe>
</div>
</div>
</div>
</div>
The cunload button is the one closing the box and unloading the video.
Here's the javascript (as seing at the vimeo api's page):
(function(){
var vimeoPlayers = document.querySelectorAll('iframe'), player;
for (var i = 0, length = vimeoPlayers.length; i < length; i++) {
player = vimeoPlayers[i];
$f(player).addEvent('ready', ready);
}
function addEvent(element, eventName, callback) {
if (element.addEventListener) { element.addEventListener(eventName, callback, false); }
else { element.attachEvent(eventName, callback, false); }
}
function ready(player_id) {
var container = document.getElementById(player_id).parentNode.parentNode,
froogaloop = $f(player_id),
apiConsole = container.querySelector('.console .output');
function setupSimpleButtons() {
var unloadBtn = container.querySelector('.simple').querySelector('.cunload');
addEvent(unloadBtn, 'click', function() { froogaloop.api('unload'); }, false);
}
setupSimpleButtons();
$(".cunload, .box:not(.expanded)").click(function(){
//if (!$(this).is('expanded')) {
froogaloop.api('unload');
//}
});
}
})();
This works just fine, but when i add an extra <div> around the iframe (and i really need to) it doesnt work anymore.
Any clue?
EDIT: problem is more complicated, i added an <ul> and <li> tags around the iframes as such:
<div class="box" data-size="660,605">
<div class="cunload2">
<div class="expandable">
<span class="simple">
<a class="cunload" href="javascript:;"></a>
</span>
<div class="exandable-vids-container">
<ul>
<li><iframe ... ></iframe></li>
<li><iframe ... ></iframe></li>
</ul>
</div>
</div>
</div>
</div>
and modified the js line :
var container = document.getElementById(player_id).parentNode.parentNode
to:
var container = document.getElementById(player_id).parentNode.parentNode.parentNode.parentNode
and i got it working.
The problem is that i use the <ul> and <li> tags to call jcarousel and that it adds an extra 3 divs between my .exandable-vids-container and the <ul>. Moreover, sometimes i'll call this carousel and sometimes not, so i really can't go with adding extras .parentNode in the js. This would have to be dynamic and i think the solution has to be in that direction.
Related
I have links embedded inside .media-body .media-heading in the HTML example. I'm wanting to write JS to remove any link where the text does not start with the value attribute in the input element, in this case "A"
I've done a manual version below that checks the first A tag and manually removes the other A tag on the click of a button if the text doesn't start with "A". I need this to somehow loop through and do this automatically on page load but not sure how I do that. Any help is appreciated.
<!DOCTYPE html>
<html>
<body>
<input type="text" name="search" value="A" class="searchbox">
<div class="media-body">
<div class="media-heading">
A doc beginning with A
</div>
</div>
<div class="media-body">
<div class="media-heading">
Doc beginning with D
</div>
</div>
<button onclick="startFunction()">Remove wrong doc</button>
<script>
function startFunction() {
var az = document.getElementsByTagName("input")[0].getAttribute("value");
var getstart = document.getElementsByTagName("a")[0].innerHTML;
var searchletter = getstart.startsWith(az);
var myobj = document.getElementsByTagName("a")[1];
if(searchletter = az)
{
myobj.remove();
}
}
</script>
</body>
</html>
The second part of your question as how to do this automatically on page load is answered rather quickly. Conveniently you already wrapped the functionality inside it's own function - startFunction(). So all you have to do is execute that function after the <body> definition of your html code.
The first part isn't much more difficult as you also almost have anything you need set up yet. The only thing that's missing is looping over the HTMLCollection - more or less an array - retrieved by executing document.getElementsByTagName("a") using a simple for-loop.
There's a catch though: as you loop over the HTMLCollection and eventually remove an object from the DOM using .remove() you're ultimately changing the collection too. In other words, if you remove an object, the list shrinks by one element. To compensate your loop needs to start with the initial number of elements and decrement by one.
Here's an example:
function startFunction() {
let az = document.getElementsByTagName("input")[0].getAttribute("value");
let elements = document.getElementsByTagName("a");
let element;
for (let a = elements.length - 1; a >= 0; a--) {
element = elements[a];
if (!element.innerHTML.startsWith(az)) {
element.remove();
}
}
}
startFunction();
<input type="text" name="search" value="A" class="searchbox">
<div class="media-body">
<div class="media-heading">
A doc beginning with A
</div>
</div>
<div class="media-body">
<div class="media-heading">
Doc beginning with D
</div>
<div class="media-body">
<div class="media-heading">
Something completely different
</div>
</div>
tl;dr: Here is a recording of my problem where I set a breakpoint, reload the page and step through the code: http://recordit.co/uNtqr31G0e
I created this code a few weeks ago and it's been working perfectly, but after checking the website today (and messing with some unrelated owl-carousel JavaScript) any elements on our product page moved with insertAfter or prependTo are showing twice in the new location once the JavaScript executes. This was working perfectly yesterday though.
Embedded is the stripped down version of the code from the product page that I'm modifying, but the code works fine using StackOverflows code editor & Codepen.io
$(document).ready(function() {
var shoppingCartIcon = $('.describe-list-icon .fa-shopping-cart');
var pricingDescribeList = shoppingCartIcon.closest('.describe-list');
pricingDescribeList.addClass('pricing');
pricingDescribeList.prependTo('.content');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
</div>
<div class="describe-list">
<div class="describe-list-icon text-center">
<i class="fa fa-shopping-cart"></i>
</div>
<div class="describe-list-content">
<p>$229.99</p>
<p></p><div id="book_button_partyz_id_73847" class="button_book" style="cursor:pointer; display:inline-block" onclick="if(navigator.cookieEnabled){if(typeof last_item_container_id != "undefined") { document.getElementById("container_" + last_item_container_id).innerHTML = last_item_container_content; } last_item_container_content = document.getElementById("container_partyz_id_73847").innerHTML; last_item_container_id = "partyz_id_73847"; document.getElementById("container_partyz_id_73847").innerHTML = "<div id=\"item_container\"> </div>"; ajax_link("item_container","store.item.calendar?root_path=&responsive=1&show_instructions=1&show_start_form=1&itemid=partyz_id_73847","post_info=1"); this.style.display = "none";}else{alert("Cookies are not enabled. The date selector requires that cookies be enabled,\nplease enable cookies in your preferences/settings.");}"><nobr>Add to Cart</nobr></div><br><p></p>
</div>
</div>
Codepen Link: https://codepen.io/CodeBradley/pen/oMYzoB
The product page I'm referring to: https://partyz.ourers.com/items/dunk_tank/
The actual JavaScript:
https://files.sysers.com/cp/upload/partyz/editor/full/main.js
Sound Track List Image URL:
https://www.dropbox.com/s/2gtd4hrhfhxl4sm/song2.png?dl=0
I have list of sound track. If i click on the first song Play button will appear as well as click second one the play button should be moved to second song and first should be as usual. But output is not an expected result. Can anyone please guide me.??
My script is here
function loadSong(song_url, play_img, sequence_id){
var x = document.createElement("IMG");
x.setAttribute("src", "images/play.jpg");
document.getElementById(sequence_id).appendChild(x);
}
Since you didn't post the HTML structure, I'll assume it's something like:
<div id="container">
<div class="song">
<div class="songImgDiv"></div>
<div class="songTitle">Song 1</div>
</div>
<!-- other songs -->
</div>
And the img has class .activePlay.
$('.song').on('click', function () {
var imgSrc = "images/play.jpg";
$('.song img.activePlay').remove();
var img = $('<img/>').prop('src', imgSrc).addClass('activePlay');
$(this).find('.songImgDiv').append(img);
});
jsfiddle DEMO
I have a piece of my JQMobi code here. Problem is that it doesn't switch pages dynamically:
<div title='Whatever' id="main" class="panel" selected="true" data-tab="navbar_home" data-footer="none">
<div class="swipe_area">
<!-- nothing here, just for swiping to not disturb other elements -->
<- Swipe me ->
</div>
<script>
var init_swipe = function () {
$(".swipe_area").swipeListener({
vthreshold: 30,
hthreshold: 80,
callBack: function (dir) {
if(dir.left) {
window.location.href = "#menulink3";
alert("go to menulink3");
}
else if(dir.right) {
window.location.href = "#menulink2";
alert("go to menulink2");
}
}
});
};
window.addEventListener("load", init_swipe, false);
</script>
</div>
<div title='Whatever' id="menulink2" class="panel" selected="true" data-tab="navbar_home" data-footer="none">
content of menulink2
</div>
<div title='Whatever' id="menulink3" class="panel" selected="true" data-tab="navbar_home" data-footer="none">
content of menulink3
</div>
The url does change in browser and it gives an alert (just to be sure), but there is no switch in pages. Also, normal a href links work just fine. Is there a jqmobi function I have to call to make it refresh or something?
Thanks in advance
You don't change the window.location to navigate. Look at $.ui.loadContentDiv to do it programatically.
I have created an HTML file which uses java script to display images randomly displayed in 3 div tags. On click the images move left or right. It works fine until I use single slideshow in the page, but creates problem when I try multiple slideshows on the same page.
Here is the code for one slide show :
**<script>
currentIndx = 2;
MyImages=new Array();
MyImages[0]='1images2.jpeg';
MyImages[1]='1images3.jpeg';
MyImages[2]='1images4.jpeg';
MyImages[3]='artwork.jpg';
MyImages[4]='1images5.jpeg';
imagesPreloaded = new Array(4)
for (var i = 0; i < MyImages.length ; i++)
{
imagesPreloaded[i] = new Image(120,120)
imagesPreloaded[i].src=MyImages[i]
}
/* we create the functions to go forward and go back */
function Nexter()
{
if (currentIndx<MyImages.length-1){
alert(currentIndx);
document.leftimg.src=document.middleimg.src
document.middleimg.src=document.rightimg.src
document.rightimg.src=imagesPreloaded[++currentIndx].src
}
else {
alert("In nexter else")
currentIndx=0
document.leftimg.src = document.middleimg.src
document.middleimg.src = document.rightimg.src
document.rightimg.src = imagesPreloaded[currentIndx].src
}
writeImageNumber();
}
function Backer()
{
if (currentIndx>0)
{
--currentIndx;
alert("In Backer If");
document.rightimg.src=document.middleimg.src
document.middleimg.src=document.leftimg.src
document.leftimg.src=imagesPreloaded[currentIndx].src
}
else
{
currentIndx = MyImages.length-1
alert(MyImages.length +"else");
document.rightimg.src = document.middleimg.src
document.middleimg.src = document.leftimg.src
document.leftimg.src = imagesPreloaded[currentIndx].src
}
writeImageNumber();
}
/*###### function to reload the images and text when refresh is pressed ##### */
function setCurrentIndex()
{
currentIndx=0;
document.theImage.src=MyImages[0];
document.form1.text1.value=Messages[0];
writeImageNumber();
}
</script>
<body onload="setCurrentIndex();automaticly()">
<!-- start of form for image slide show ####################### -->
<div id ="left" style="float:left">
<a href="#" onclick="Backer()" ><img src="1images2.jpeg" width="265" height="262"
border="0" name="leftimg"></a>
</div>
<div id ="middle" style="float:left">
<a href="#" onclick=""><img src="1images3.jpeg" width="265" height="262"
border="0" name="middleimg"></a>
</div>
<div id ="right" class="compimg" style="float:left">
<a href="#" onclick="Nexter()" ><img src="1images4.jpeg"
width="265" height="262" alt="" border="0"name="rightimg"></a>
</div>
<!-- end of form for image slide show ####################### -->**
Any suggestions...
You haven't wrapped your script in any javascript class(object) so all variables you are using have global scope(page level). I guess your variables are over written if you try to use it multiple time.
You can get better answer if you post HTML markup of how you are trying to create multiple slideshow in single page...