How to make videos on Youtube not cover a lightbox? - javascript

Edit: I thought I solved it but I didn't.
I have javascript that gathers elements on a webpage and puts them in a lightbox on top of the page. It works fine for your every day page but on Youtube the videos show through. I looked and found out about wmode = "transparent". So what I have tried is...
var youtubevideo = document.getElementsByTagName('link');
var len = youtubevideo.length;
for(var i=0;i<len;i++){
//youtubevideo[i].setAttribute('wmode', "transparent");
youtubevideo[i].href += "?wmode=transparent";
alert(youtubevideo[i].href);
}
The alert verifies I am doing nothing wrong as far as doing what I intend to do. You can also see where I have commented out the other way I tried it. Is there a way I didn't find to accomplish this?

I found out you need to make the video reload. You can do this by copying the src to another variable then change the src to "" and then change the src again to the variable you saved the original src in.

Related

How to add another image modal (W3S-code)?

I found this code in W3S:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal_img
I can't figure out how to add another image modal next to the existing image.
And I bet this is easy for people who understand javascript, unfortunately I don't and would be so happy if someone explained.
Thanks!
The problem with the code they supplied is that the JavaScript relies on an image ID, which you can only have one of in the entire document.
By mainly swapping out the;
var img = document.getElementById('myImg');
with;
var imageList = document.querySelectorAll('img');
and looping on the results you will be able to add multiple images.
I updated the code as an example with two images on JSFiddle hopefully you will find that useful.

Dynamically change videojs captions with addTextTrack()

I'm trying to build some thing like a video gallery which you can select a video to show up by clicking on its thumbnail. Now I'm at phase of loading appropriate subtitles for the chosen video. Thanks to google I understand that videojs has a method to help me called addTextTrack() but unfortunately there is not a good sample or documentation for it. After all I tried to find its parameters and behavior via reading the video.dev.js codes. but as I understand this method has just three params (kind, label, language) and the thing that I didn't understand is that: How can I set the src to load the subtitle file. I think its a bug and it doesn't work properly and I want to report it if you're agree with me.
The following code adds cc icon to the player but it doesn't show the subtitle (How can it be shown when I didn't tell him the URL to load)
var myPlayer = videojs('video-id');
myPlayer.addTextTrack('captions', 'En', 'English');
I checked videojs 5.0.0 addTextTrack method and there wasn't any significant changes.
After about a month without any answer to my question, I don't know yet why addTextTrack() doesn't work properly. But thanks God, I found a way to achieve my goal:
To dynamically changing all text tracks
var oldTracks = player.remoteTextTracks();
var i = oldTracks.length;
while (i--) {
player.removeRemoteTextTrack(oldTracks[i]);
}
myNewTracks.forEach(function(track) {
player.addRemoteTextTrack(track);
});
The text track did never get updated dynamically and after a long search, I had found a solution for my problem. When I change the video source I replace the text track and set it on mode="showing":
let player = videojs('first-player');
player.addRemoteTextTrack({
kind: 'captions',
src: 'my-track-path.vtt',
mode: 'showing'
}, false);

IE is not showing updated IMG SRC change done in Javascript

ISSUE: IE version 7 and 8 is not showing updated IMG SRC change done in JavaScript
You can see what I mean if you go to the URL below, and on the left under (3) I want a different liner, you choose one of the swatches; lets say you choose "Asahi Chartreuse". Notice nothing happens to the preview on the left. BUT then if you go ahead and choose another swatch, you will see the preview on the left shift to show Asahi Chartreuse. So it is one behind. This is why I believe it is a "refresh" issue. It works in Chrome just fine.
In IE: Notice if you click on some other control, the refresh happens.
You can see the code here: https://www.casemodo.com/test.asp
WHAT I'VE TRIED SO FAR:
I've tried adding headers to say "no-cache".
I've tried adding "?" and random number after the png file name.
I've tried setting focus() to the image after changing the src.
I've tried, after changing src, telling the style.display to be hidden and then visible.
I've tried creating a hidden (and not hidden) text input box on the page and then setting focus() to it after changing img src.
I've tried setting window.focus().
I've tried (as you see now) setting an alert after changing the src.
GUESS: What it looks like now is the JavaScript engine just pauses after I set that src UNTIL you manually click (focus) somewhere else on the screen. So it never even gets to all of those scripts I've tried above.
Set the src attribute to null, then set it to your new url:
in jquery:
var myImg = $('#myImg');
myImg.attr('src', null);
myImg.attr('src', newUrl);
in straight js:
var myImg = document.getElementById('myImg');
myImg.src = null;
myImg.src = newUrl
This worked for me - it was driving me mad!
Try to use onclick instead of onchange. The latter doesnt work well with some form elements in some browsers.
I've seen similar IE issues solved with a seemingly bizarre reassignment of innerHTML. Suppose "container" is a variable referencing the parentNode of the img. Try "container.innerHTML = container.innerHTML". This triggers a re-rendering and may bring the errant img to life.
Comments on the question:
Please include a code snippet in the question.
Was the javascript in an onchange event, or where?
If the client browser is Google Chrome, does it work?
(Sounds like yet-another-IE-image-src-bug.)
The demonstration page you linked to has been changed since this question was posted;
as I write this, clicking on a swatch causes submit which causes load of a different page.
A suggestion:
Use setTimeout, so that the actual change occurs when the timeout event fires, instead of in the original GUI event thread.
For example, if the original javascript was
SomeFunction();
change this to
setTimeout(SomeFunction, 10);
(where image.src = newURL; is done inside SomeFunction)
This question is probably no longer relevant but we ran into the same issue today when we checked backward compatibility for one of our libraries.
The only thing that worked for us was to replace the image element by itself before changing the value for the src attribute:
var myImg = document.getElementById('myImg');
myImg.parentNode.replaceChild(myImg, myImg);
myImg.src = newUrl;
I was working with a Lazy Loading implementation, and got to a similar problem. For some reason, after changing the data-srcset attributes to srcset in code, even with the other approaches described on this page, the elements still didn't seem to get the new attributes values. After some research, I got to this page on github, about a bug fix on a lazy loading plugin. It gave me the idea to, instead of using the replace option described here, or the your_element.src=null approach, to use something like this:
your_element.setAttribute("src", your_element.getAttribute("data-srcset"));
And it ended up working for me.

How to pull images from the DOM in javascript?

If you have looked at Pinterest you will know they have a bookmarklet that the user can press and it loads up more javascript which gathers certain images from the DOM and lets them pin them at the site. I found the gathering images interesting and would like to be able to do that. Where would I be able to look to learn how to gather images from the DOM so that I could let the user do stuff with them? I have done google searches but most are about scraping with php and that doesn't really work if the user is on a page that requires login, for instance.
Am not very sure what you are asking but here is how you get an image using javascript:
var images = document.getElementsByTagName("img");
This will return a nodeList which you can loop through to work on a single image at a time
for (var i=0,l=images.length;i<l;i++){
// your code here
console.log(images[i].src);
}
it is actually quite simple using jquery http://jquery.com/
you can do a simple selector like $('img') .. which will give you a collection of all the images on a page ... from that you can get the source of any of them using $('img').first().attr('src') <=== this will return the source of the first image on the page
hope this helps
Create a bookmarklet. To get all the images on the page do something like this:
var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
var imageSrc = images[i].src;
// Do something with the image
// ie, add it to the DOM and let them select one.
// It also might be worth looking at the offsetWidth property to only grab larger images
}
Here's the source to the Pinterest bookmarklet for reference

how to get variable's value from URL and pass to all the links on the whole site?

I am trying to get a variable from a URL,
for example if the users can link to this page: www.example.com?var1=blabla&var2=blabla
and there are many links on this site www.example.com.
What I want is no matter where my users click, they will always see the link appended with 2 variables they got from this link www.example.com?var1=blabla&var2=blabla
for example: if there is another link
<a href="www.example.com/page1.php"/>Go to page1</a>
on www.example.com?var1=blabla&var2=blabla, they will go to page www.example.com/page1.php?var1=blabla&var2=blabla.
This is my code:
<script type="text/javascript">
$(document).ready(function() {
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1);
var links = $('a');
links.each(function(){
var curLink=$(this);
var href = curLink.attr('href');
var newhref = href +'?'+ hashes;
curLink.attr('href',newhref);
});
});
</script>
My question is: I can only make all the links on the same page append those 2 variable. If the users go to another page, it won't do the same thing, because there is no script on it... but I can't add same script on every pages...
And another question, I want to clear the things after question mark and append the new ones.. is that possible to do that?
Thanks!
Your code looks good to me. And from your question it appears that your problems lie outside this.
My question is: I can only make all the links on the same page append
those 2 variable. If the users go to another page, it won't do the
same thing, because there is no script on it... but I can't add same
script on every pages...
If you can't run your script on every page then you can't modify the url's. You will need to do it server side. If you can't do it server side then you are out of luck.
And another question, I want to clear the things after question mark
and append the new ones.. is that possible to do that?
Yes, that is certainly possible. To strip the querystring use the following code.
var strippedHREF = window.location.href.substring(0, window.location.href.indexOf('?'));

Categories

Resources