Multiple javascript on the same page? - javascript

First of all I'm using wordpress with elementor plugin and the accordion feature.
I've got a code of video player:
<div id="player_div"></div><script src="https://lnaff.pl//API_VIDEO/LOCKER/js.js"></script><script> var ustawienia = {element_id:"player_div",
wysokosc:"455",
szerokosc:"800",
skin:"1",
czas_blokady:"19",
dlugosc_filmu:"2589",
video_url:"http://androidapkmodpro.com/wp-content/uploads/2020/01/Intro.mp4",
video_img:"https://i.imgur.com/YvKvkYL.png",
stream:"0",
programy_url:["https://leadnet.pl/p_uri/q6pYwlgb27QyvVjdPke1/x1vo6wa/?parametr=",],
player_button:["https://i.imgur.com/ACzzOnz.png",],
}; LEADNETWORK_generuj_player(ustawienia);</script>
I need to put in on several places on the same page. When I tried just multiple copy->paste, only in one place is showing. Is it possible? Any advices?

Please take a look at first line:
<div id="player_div"></div><script src="https://lnaff.pl//API_VIDEO/LOCKER/js.js"></script><script> var ustawienia = {element_id:"player_div",
It says basically that the video is put into a div with id=player_div due to element_id:"player_div". If you change the first line to something like:
<div id="my_second_video_placeholder"></div><script src="https://lnaff.pl//API_VIDEO/LOCKER/js.js"></script><script> var ustawienia = {element_id:"my_second_video_placeholder",
it's highly probable that it would work.

If you copy and paste this code in multiple locations you will load the code and declare the same variables twice, which for Javascript won't work. The "ustawienia" variable is also pointing to the player_div, and with HTML id's this will only find the first one.
<script src="https://lnaff.pl//API_VIDEO/LOCKER/js.js"></script><!-- only include once -->
<div id="player_div1"></div> <!-- div for first video -->
<div id="player_div2"></div> <!-- div for second video -->
<script>
var video1 = {element_id:"player_div1",
wysokosc:"455",
szerokosc:"800",
skin:"1",
czas_blokady:"19",
dlugosc_filmu:"2589",
video_url:"http://androidapkmodpro.com/wp-content/uploads/2020/01/Intro.mp4",
video_img:"https://i.imgur.com/YvKvkYL.png",
stream:"0",
programy_url:["https://leadnet.pl/p_uri/q6pYwlgb27QyvVjdPke1/x1vo6wa/?parametr=",],
player_button:["https://i.imgur.com/ACzzOnz.png",],
};
var video2 = {element_id:"player_div2",
wysokosc:"455",
szerokosc:"800",
skin:"1",
czas_blokady:"19",
dlugosc_filmu:"2589",
video_url:"http://androidapkmodpro.com/wp-content/uploads/2020/01/Intro.mp4",
video_img:"https://i.imgur.com/YvKvkYL.png",
stream:"0",
programy_url:["https://leadnet.pl/p_uri/q6pYwlgb27QyvVjdPke1/x1vo6wa/?parametr=",],
player_button:["https://i.imgur.com/ACzzOnz.png",],
};
LEADNETWORK_generuj_player(video1);
LEADNETWORK_generuj_player(video2);
</script>
Now I've not used the lead network video player, but this should work without issue. For each new video, you would need to create a new target DIV tag and a new video variable in the script section.
Hope this helps.

Related

Convert a line of text generated in a javascript file into a clickable link in HTML

Sorry for the incredibly lame question, but as a brand new programmer all the answers I've found while searching all day are for other problems not specific to me so I decided I'd post about it.
I have taken it upon myself to convert a sample "Random Quote Generator" program I found into a small web based app that can produce random links at the touch of a button, but as I soon found out just replacing the example quotes with the links of my choice only produced normal un-clickable text.
I have tried many things relating to messing with the div's and the id tags but nothing works for me.
My code for the html is as follows:
<html>
<head>
<title>Simpsons Episode Generator</title>
</head>
<body>
<h1>Simpsons Episode Generator</h1><br>
<img src="https://vignette2.wikia.nocookie.net/simpsons/images/9/97/Mr_Burns_-_the_box.jpg/revision/latest?cb=20121215235014" alt="Mr Burns box">
<div id="linkDisplay">
<!-- Link will pop up here -->
</div>
<!-- Button to call the javascript and prduce a link -->
<button onclick="newLink()">New Episode</button>
<!-- javascript declared -->
<script src="javascript.js"></script>
</body>
</html>
So as you can see, it just calls the javascript to run the randomiser then prints the result.
The javascript is as follows:
//Links To Episodes
var links = [
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-1/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-2/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-3/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-4/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-5/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-6/'
];
//Select 1 Link at random and push it to the HTML
function newLink() {
var randomLink = Math.floor(Math.random() * (links.length));
document.getElementById('linkDisplay').innerHTML = links[randomLink];
}
All i want is to just make the click the HTML is receiving after the button is pressed to be clickable.
Thanks for reading and sorry for asking such a simple sounding question but i really have been looking all day how to do it by myself...
If you want to navigate to that URL, you don't need to "click the link", you can just change the location of the window:
window.location.href = links[randomLink];
If you want to make a link to that location, so people can click it, make that <div> an <a>
<a id="linkDisplay" href='#' />
(the # means it will just go to the top of the page) and then update the href as needed:
document.getElementById('linkDisplay').href = links[randomLink];
You need to inject an anchor tag into the HTML to allow users to be able to click on a random link
//Links To Episodes
var links = ['http://kisscartoon.so/episodes/the-simpsons-season-1-episode-1/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-2/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-3/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-4/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-5/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-6/',]
//Select 1 Link at random and push it to the HTML
function newLink() {
var randomLink = links[Math.floor(Math.random() * (links.length))];
document.getElementById('linkDisplay').innerHTML = ''+randomLink+'';
}
<div id="linkDisplay">
<!-- Link will pop up here -->
</div>
<!-- Button to call the javascript and prduce a link -->
<button onclick="newLink()">New Episode</button>

Making a Function Produce Different Values in HTML

I am doing a web development course, and I currently need to implement a script into my webpage using JavaScript. I found a script I would like to use here:
http://www.java-scripts.net/javascripts/Automatically-Changing-Slide-Show-Script.phtml
Basically, it changes the images automatically.
<head>
<script>
/*
JavaScript Image slideshow:
By Website Abstraction (www.wsabstract.com)
and Java-scripts.net (www.java-scripts.net)
*/
var slideimages=new Array()
var slidelinks=new Array()
function slideShowImages(){
for (i=0;i<slideShowImages.arguments.length;i++){
slideImages[i]=new Image();
slideImages[i].src=slideShowImages.arguments[i];
}
}
function goToShow(whichLink){
if (!window.winslide||winslide.closed){
winslide=window.open(slideLinks[whichLink])
}else{
winslide.location=slideLinks[whichLink]
winslide.focus()
}
}
</script>
</head>
<body>
<!-- For reference, my actual code is
<a href="stagingandevents.html"/>
<img src="pics/main/stagingandevents.jpg" alt="Staging and Events"
name = "slide" width="300px" height="312"/>
</a>
-->
<!-- Basically, I want two of the following image rotatations, but each
link with different images. -->
<a href="javascript:gotoshow()"><img src="img1.gif" name="slide">
</a>
<script>
//configure the paths of the images, plus corresponding target links
slideshowimages("img1.gif", "img2.gif", "img3.gif")
//configure the speed of the slideshow, in miliseconds
var slideshowspeed=2000
var whichlink=0
var whichimage=0
function slideIt(){
if (!document.images){
return
}
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichImage<slideImages.length-1) {
whichImage++;
} else {
whichImage=0;
} setTimeout("slideIt()",slideShowSpeed);
}
slideIt();
</script>
</body>
The code provided in the link is very old and deprecated, so I updated it a little. The slideShowImages() function is where the desired images are stored, but I don't know how to go about changing those values for each link!
I have tried several different things to get each link to have its own set of rotating images. As I am new to Javascript and HTML also, I really do not know how to go about this.
The code to change the images and links is here
slideshowimages("img1.gif", "img2.gif", "img3.gif")
slideshowlinks("http://wsabstract.com", "http://dynamicdrive.com", "http://java-scripts.net")
You just need to insert your own pictures and links for those pictures.
slideshowimages("images/myFirstImage.gif", "images/mySecondImage.gif", "images/myThirdImage.gif")
slideshowlinks("http://myfirstimagelink.com", "http://mysecondimagelink.com", "http://mythirdimagelink.net")

Dynamically generated script not working

I have a contenteditable div where you type javascript which gets outputted into an empty script tag.
<div contenteditable="true" id="script-generator"></div>
<div id="save-script">Save</div>
<script type="text/shorthand" id="script">
</script>
So you write your script in the div, click save and I have some JS which gets the html of the contenteditable div and adds it to an empty script tag.
$('#save-script').click(function() {
var script = $('#script-generator').html();
$('#script').html(script);
});
So far this works. But the generated script has no effect. The browser must not recognise the script because it wasn't there on page load? How do I make the script take effect without reloading the page?
Note: The type/shortand on the script is because I'm using a plugin which converts shortand words into actual Javascript. So the user would just need to write shorthand into the contenteditable div, and the plugin would convert that to JS. This might be adding to the problem?
I don't think it works to modify an existing <script> element. If you want the script to be executed you need to add a new element.
$('#save-script').click(function() {
var script = $('#script-generator').html();
$("#script").text(script);
ShortHand.parseScripts();
});
Correct - you need to create the script tag to have it execute after load.
$('head').append($('<script />', {html: script}));
...which means you can remove your empty script tag.
I have set up a test that's similar to what you have been looking for. Take a look and see if that helps.
Working Demo
Test code:
<div id="script" style="display:none">
alert(4+4);
</div>
<input id="sLoad" type="button" value="Load/Execute Script" />
$('#sLoad').click(function(){
//You may want to append to the head
$('<script/>').append( $('#script').html() ).appendTo('#script');
});

How to get element inside div, inside another html and inside another div?

In "first.html", I load a page inside div using Javascript.
<div id="content">
<div id="lot">Next</div>
</div>
<script>
function load_page()
{
document.getElementById("lot").innerHTML='<object type="text/html" data="next.html"></object>';
}
</script>
Both "first.html" and "next.html" have a div called "banner". I don't want to show "banner" in "next.html". So I add the following lines in "next.html".
<script>
document.getElementById('banner').style.display = "none";
</script>
The weird thing is the banner in "first.html" disappears but not the one in "next.html".
So one way I think to get away with it is if I could reference like this.
"first.html" --> "lot" --> "next.html" --> "banner"
Then try to make it disappear.
I also try this in "next.html", but not working.
<script>
document.getElementById('lot').getElementById('banner').style.display = "none";
</script>
Thanks for the hint.
Solution: When I use iframe, it seems to work. The banner in "next.html" is clearly recognized instead of mixing with the one in "first.html".
I think the simple solution is to use different ID's for the different banners. Something like
id="innerBanner" and id="outerBanner"
Iframe syntax:
<iframe src="URL" width="xxx" height="xxx"></iframe>
I think your problem comes from the folowing line :
document.getElementById("lot").innerHTML='<object type="text/html" data="next.html"> </object>'\
Mabye you can do the same thing with a simple hyperlink:
Next
Than there is no chance, after you write the style in next.html, that it will change something in the previous page's html

Jquery selector data retrival in variable, in another different page

How can we use Jquery to read certain page content in a variable on a different page? If for example we want to read div.tag1 from a page into another page but in a variable( ie i dont want to load it into the page but manipulate it so store it in variable)
Eg: file1.html have(say)
<div class="tag1"> Hello world </div>
<div class="tag2"> Hello Boys </div>
<div class="tag3"> Hello Girls </div>
Now I want page2 to have Jquery script that will store the content of div.tag1 in a variable.
This is what I need in file2.html :
// without loading it to any page ie without using load.
<script type="text/javascript">
var filename = "file1.html";
var myData = // Code to retrieve div.tag1 from file1.html( ie filename)
document.write(myData); // for the time being.. later it will go in Database.
Any help will be appreciated.
The simplest solution is to use load on a newly created element (a hidden element will also work):
var content = $("<div />").load("/page.html div.tag1",
function(){ // callback
alert(content.text());
});

Categories