JS Fiddle of what's happening
https://jsfiddle.net/n1tvx49x/1/
I don't have id attribute. Will it work without that. With id its working fine.
Here is my following HTML. It consists of outter figure tag and inside that there is div tag and inside that have another div tag with class="jw-player".
I can't change my HTML
<figure data-embed-type="jwplayer" data-embed-url="video-url1" data-embed-loaded="false">
<div itemscope="" itemtype="http://schema.org/VideoObject">
<div data-embed-url="video-url1" class="jw-player"></div>
</div>
</figure>
<figure data-embed-type="jwplayer" data-embed-url="video-url2" data-embed-loaded="true">
<div itemscope="" itemtype="http://schema.org/VideoObject">
<div data-embed-url="video-url2" class="jw-player"></div>
</div>
</figure>
I want to embed JWPlayer videos inside both of these divs. $node has the figure element whole.
var videoObject = $node.querySelector('.jw-player');
var playerInstance = window.jwplayer(videoObject);
window.player1 = playerInstance;
playerInstance.setup({
file: 'video-url1',
mediaid: 'asd34',
image: 'jpg-url1'
});
and another
var videoObject = $node.querySelector('.jw-player');
var newplayerInstance = window.jwplayer(videoObject);
window.player2 = newplayerInstance;
newplayerInstance.setup({
file: 'video-url2',
mediaid: 'asder3',
image: 'jpg-url2'
});
I am getting only one JW Player on my screen. Because the second one is also replacing the first div only. And 2nd div is not getting changed. And when I am comparing the two instances on console, I am getting result as equal.
player1 === player2
true
You could add an ID using JavaScript before creating the player.
var videoObject = document.querySelector("div[data-embed-url='video-url1']");
videoObject.id = "player-1";
var newplayerInstance = window.jwplayer(videoObject);
window.player2 = newplayerInstance;
newplayerInstance.setup({
file: 'video-url2',
mediaid: 'asder3',
image: 'jpg-url2'
});
var videoObject = document.querySelector("div[data-embed-url='video-url2']");
videoObject.id = "player-2";
var newplayerInstance = window.jwplayer(videoObject);
window.player2 = newplayerInstance;
newplayerInstance.setup({
file: 'video-url2',
mediaid: 'asder3',
image: 'jpg-url2'
});
Related
I am trying to make a PHP page that embeds a JavaScript into the page that makes some YouTube videos on the page and so on, that works fine, but I have another script on the page that should sort these YouTube videos based on the amount of views they have. That normally works, but since I started working on PHP for the page so I don't have to hardcode everything, it doesn't work.
Code:
<script src="jquery-3.2.1.min.js"></script>
<html>
<body>
<?php
$youtubeID = array("KxEhALUc_xo", "HHuOu8L5f58", "DANypN7iXsI");
$len = count($youtubeID);
for ($i = 0; $i < $len; $i++) {
$embedCode = "<script>
var id = ('" . $youtubeID[$i] . "')
$.getJSON('https://www.googleapis.com/youtube/v3/videos?part=statistics&id=" . $youtubeID[$i] . "&key=', function(data) {
$.getJSON('https://www.googleapis.com/youtube/v3/videos?part=snippet&id=" . $youtubeID[$i] . "&key=', function(data2) {
var tags = data2.items[0].snippet.tags;
var likes = data.items[0].statistics.likeCount;
var viewcount = data.items[0].statistics.viewCount;
var title = data2.items[0].snippet.title;
var channel = data2.items[0].snippet.channelTitle;
$('div#videocontainer').append('<div class = videoframe><iframe src = \"https:\\\\\\\\www.youtube.com\\\\embed\\\\" . $youtubeID[$i] . "\" width = 854 height = 510 frameborder= 0 allowfullscreen></iframe><div class = countercontainer><div class = counter>View count:'+viewcount+'</div></div><div class = titlecontainer><div class = title>'+title+'</div></div><div class = likescontainer><div class = likes>'+likes+'</div></div></div>');
});
});
</script>
";
echo $embedCode;
}
?>
<script>
$('button#viewsasc').click(function() {
var videos = $('div.videoframe').get();
videos.sort(function(a,b) {
return parseInt($(a).find('div.counter').text()) - parseInt($(b).find('div.counter').text());
});
$('div#sortedcontainer').html($(videos));
});
$('button#viewsdesc').click(function() {
var videos = $('div.videoframe').get();
videos.sort(function(a,b) {
return parseInt($(b).find('div.counter').text()) - parseInt($(a).find('div.counter').text());
});
$('div#sortedcontainer').html($(videos));
});
</script>
<button id = 'viewsasc'>desc</button>
<button id = 'viewsdesc'>asc</button>
<div id = 'videocontainer'></div>
<div id = 'sortedcontainer'></div>
</body>
</html>
I know it all looks like a mess, but its just a prototype ;).
So as you can see, I have a little array with 3 YouTube video IDs, I then try to embed a JavaScript code that will get som JSON data, make some divs, and show the video with youtubes "iframe".
That all works good, I have 3 YouTube videos showing on my page, and I have the external text with all the views, title, and likes showned.
WHAT's not working is this part:
<script>
$('button#viewsasc').click(function() {
var videos = $('div.videoframe').get();
videos.sort(function(a,b) {
return parseInt($(a).find('div.counter').text()) - parseInt($(b).find('div.counter').text());
});
$('div#sortedcontainer').html($(videos));
});
$('button#viewsdesc').click(function() {
var videos = $('div.videoframe').get();
videos.sort(function(a,b) {
return parseInt($(b).find('div.counter').text()) - parseInt($(a).find('div.counter').text());
});
$('div#sortedcontainer').html($(videos));
});
</script>
<button id = 'viewsasc'>desc</button>
<button id = 'viewsdesc'>asc</button>
<div id = 'videocontainer'></div>
<div id = 'sortedcontainer'></div>
So when i press these buttons:
<button id = 'viewsasc'>desc</button>
<button id = 'viewsdesc'>asc</button>
it will indeed move the "videoframe" div into the "sortedcontainer" div, but it is not sorted, it's just moved to another div, so that's pretty useless. Here is gyazo so you can see what i mean: https://gyazo.com/dc9baa1f1342ffc08c66b2db41d3a4d0
I am very confused by PHP and not very good at it as you can guess, there is probably some obvious rule I didn't know about, I only just started to study PHP.
I have two HTML pages and one JS file, which does the logic for both of them. When I try to change an image dynamically in one of my HTML files using var mainImage = document.getElementById("lastImageID"); this works, but when I try to do the same thing for the other HTML file, it doesn't (I receive null as a result).
I have "included" <script type="text/javascript" src="controller.js"></script> the JS file in both HTML files.I also tried to find information here, in Stack Overflow, how to access an element in an HTML file other than using the document notation, but seems this is the only right way.
I also checked and there are no identical IDs in both files.
First HTML file (relevant code):
<div class="thumbnail">
<img id="mainImageId" src="img/decision.jpg"
alt="Decision">
</div>
<div class="textMessage">
<div id="messageToUserID" class="infoText">
<h5>some text</h5>
</div>
</div>
Second HTML file (relevant code):
<div class="thumbnail">
<img id="lastImageID"
src="img/congratulations.jpg"
alt="Decision">
</div>
<div class="textMessage">
<div id="lastMessageToUserID" class="infoText">
<h5>some text</h5>
</div>
JavaScript Code:
// A function, which receives an new image, and updates the main image of the simulation by it.
function updateImageInLastScreen(newImage){
var mainImage = document.getElementById("mainImageId");
mainImage.src = newImage;
var lastImage = document.getElementById("lastImageID");
lastImage.src = newImage;
}
// A function, which receives an new message, and updates the main message of the simulation by it.
function updateMessageInLastScreen(newMessageToUser){
var mainMessageToUser = document.getElementById("messageToUserID");
messageToUserID.innerHTML = newMessageToUser;
var lastMessageToUser = document.getElementById("lastMessageToUserID");
lastMessageToUser.innerHTML = newMessageToUser;
}
The access to the elements in the first file work, but to those in the second one do not...
Here are 4 small files I am working with
Try adding if checks before manipulating the content:
// A function, which receives an new image, and updates the main image of the simulation by it.
function updateImageInLastScreen(newImage){
var mainImage = document.getElementById("mainImageId");
if (mainImage) {
mainImage.src = newImage;
}
var lastImage = document.getElementById("lastImageID");
if (lastImage) {
lastImage.src = newImage;
}
}
// A function, which receives an new message, and updates the main message of the simulation by it.
function updateMessageInLastScreen(newMessageToUser){
var mainMessageToUser = document.getElementById("messageToUserID");
if (mainMessageToUser) {
messageToUserID.innerHTML = newMessageToUser;
}
var lastMessageToUser = document.getElementById("lastMessageToUserID");
if (lastMessageToUser) {
lastMessageToUser.innerHTML = newMessageToUser;
}
}
So...I dont understand very well. Tell me if my explanation is equal your problem.
I have created page1.html
<h1>Image 1</h1>
<img src="" alt="image one" style="width:304px;height:228px;" id="image1">
<script src="myfile.js" type="text/javascript"></script>
Then, I have created page2.html
<h1>Image 2</h1>
<img src="" alt="image two" style="width:304px;height:228px;" id="image2">
<script src="myfile.js" type="text/javascript"></script>
In myfile.js I put the one piece image
var image1 = document.getElementById('image1');
var image2 = document.getElementById('image2');
if( image1) image1.src = 'image.jpg';
if( image2 ) image2.src = 'image.jpg';
This way is your problem ? Here, this way works both images.
when you call the same function updateImageInLastScreen() for the second html this line var mainImage = document.getElementById("mainImageId"); gets the value as null (since 'mainImageId' is not there in second html) and the second statement after it mainImage.src = newImage; throws an exception saying
TypeError: Cannot set property 'src' of null
at updateImageInLastScreen
and stops the further execution. You can verify the same in F12 console.
But when you call it from the first html then also it throws an exception for lastImage.src = newImage; but since it comes after the mainImage it's getting updated.
As per your code it's obvious that either of the element will be null since it's being called from a single html file. And you are blindly looking for the availability of the second element.
You can overcome this by putting your code inside a try..catch block as
function updateImageInLastScreen(newImage){
try{
var mainImage = document.getElementById("mainImageId");
mainImage.src = newImage;
}
catch(e){
console.log(e);
}
try{
var lastImage = document.getElementById("lastImageID");
lastImage.src = newImage;
}
catch(e){
console.log(e);
}
}
you can find it working here https://jsfiddle.net/hk30k20t/1/
I'm trying to learn HTML and Javascript/jQuery. If I have a container which holds a title, an image, a description and a number, then I want to create a new container with the exact same format (except the values will be different), how is this commonly done?
This is an example of the format I'm looking for in each item.
<li>
<div>
<div>
Image Name
</div>
<div>
<a href=URL>
<img src='image_url'>
</a>
</div>
<div>
Description
</div>
<div>
num_comment Comments
</div>
</div>
</li>
Do I just create a string and concatenate with the actual values for the image, then add that string to some variable I've saved called html_content, and then set the html value to html_content? Is that the common way of doing this or is there a better way?
EDIT
To give a better idea of what I'm currently doing, here's the javascript:
var html1 = '<li><div><div>';
var html2 = '</div><div><a href="';
var html3 = '"><img src="';
var html4 = '"></a></div><div>';
var html5 = '</div><div>';
var html6 = '</div></div></li>';
function render(pics){
for (var i in pics){
html = html + html1 + pics[i].name + html2 + pics[i].image_url + html3 + ...
};
$('pics').html(html);
}
In jQuery you just have to use the append() function to add on to something.
You could do something like...
$('select element').append('<li><div>....etc.');
and where you want a different value you can use a variable.
You can use .clone() and create a copy of this, then iterate through the cloned object and change what you need:
var $objClone = $("li").clone(true);
$objClone.find("*").each(function() {
//iterates over every element. customize this to find elements you need.
});
To change the image source you can do:
$objClone.find("img").attr("src", "new/img/here.jpg");
Fiddle demoing the concept: http://jsfiddle.net/H9DnA/1/
You may find it useful to explore some of the JavaScript templating libraries. The essential idea is that you create a template of your markup:
<li>
<div>
<div>
{{name}}
</div>
<div>
<a href="{{url}}">
<img src="{{imageUrl}}">
</a>
</div>
<div>
{{description}}
</div>
<div>
{{comments}}
</div>
</div>
</li>
Then you merge it against some associated matching object and insert it into your document:
{ name: 'Image Name',
url: 'http://example.com',
imageUrl: 'http://example.com/image.jpg',
description: 'Description',
comments [ { text: 'Comment' } ]
}
function render(pics)
{
var theList = document.getElementByid("LIST ID");
for (var i in pics){
var listItem = document.createElement('li'); // Create new list item
var nameDiv = document.createElement('div'); // Create name DIV element
nameDiv.innerHTML = pics[i].name; // Insert the name in the div
var img = document.createElement('img'); // Create Img element
img.setAttribute('src',pics[i].src); // Assign the src attribute of your img
var imgDiv = document.createElement('div'); // Create Img Div that contains your img
imgDiv.appendChild(img); // Puts img inside the img DIV container
var descDiv = document.createElement('div'); // Create Description DIV
descDiv.innerHTML = pics[i].description; // Insert your description
listItem.appendChild(nameDiv); // Insert all of you DIVs
listItem.appendChild(imgDiv); // inside your list item
listItem.appendChild(descDiv); // with appropriate order.
theList.appendChild(listItem); // Insert the list item inside your list.
}
}
I think this will work just fine:
$('#button').click(function () {
var html1 = '<li><div><div>';
var html2 = '</div><div><a href="';
var html3 = '"><img src="';
var html4 = '"></a></div><div>';
var html5 = '</div><div>';
var html6 = '</div></div></li>';
function render(pics){
for (var i in pics){
html = html + html1 + pics[i].name + html2 + pics[i].image_url + html3 + ...
$("ul").append(html);
}
}
// call render
});
I didn't do a test run on your code so there might be an error somewhere. My tweak adds this line $("ul").append(html); inside your loop
I'm trying to create a simple javascript game for college and am having trouble getting what i want to display on screen.
my script is as follows:
var qArray = new Array();
qArray[0] = {image:"Images/q1.png"};
qArray[1] = {image:"Images/q2.png"};
qArray[2] = {image:"Images/q3.png"};
qArray[3] = {image:"Images/q4.png"};
qArray[4] = {image:"Images/q5.png"};
var count = 0;
var question = qArray.splice(count,1);
when i use this i get "undefined":
document.getElementById("question").innerHTML = question.image;
and when i use this i get nothing:
document.getElementById("question").src = question.image;
my html is just a simple div like so:
<div id = "question" align = "center">
</div>
i need to have the "count" variable because it increments to show the next image for the next question
if anyone could help that would be great
Here is a working Fiddle. qArray.splice() doesn't work because it actually removes that element from the array and returns a new array while you were just looking for a specific index in the array (not to mention you just deleted the element you were looking for)
This works. I used a random imgur image to show that it does indeed load.
<html><head></head><body>
<img src="" id="question"></img>
<script type="text/javascript">
var qArray = new Array();
qArray[0] = {image:"http://i.imgur.com/pGpmq.jpg"};
qArray[1] = {image:"Images/q2.png"};
qArray[2] = {image:"Images/q3.png"};
qArray[3] = {image:"Images/q4.png"};
qArray[4] = {image:"Images/q5.png"};
var count = 0;
var question = qArray[count];
document.getElementById('question').src = question.image;
</script>
</body>
</html>
I want to change the image when the page is refresh using html. I place my partial code here. i want a script or anything do change the image when the page gets refresh.. Please help me to do this using html ...
<div class="one-image">
<a href="">
<img src="img/IMG_1035.jpg" class="giThumbnail" alt="Nightclubs"></a><h4 class="giDescription">
Nightclubs</h4>
</div>
the above image tag image is change every refresh.. please help me ..
I believe this would work, but all your images would have to be sequentially named, e.g. 1-100. Also note that the script was placed AFTER the IMG tag.
<div class="one-image">
<a href="">
<img id="imgRand" src="" class="giThumbnail" alt="Nightclubs">
</a>
<h4 class="giDescription">
Nightclubs
</h4>
</div>
<script language="javascript">
// random number between 1 and 100
var numRand = Math.floor(Math.random()*101);
document.getElementById("imgRand").src = "img/IMG_"+numRand+".jpg";
</script>
The random formula in JS is:
var random = Math.floor(Math.random() * (max - min + 1)) + min;
so if you only had 5 images between 135 and 140 your script would look like:
var random = Math.floor(Math.random() * (140 - 135 + 1)) + 135;
If you wanted to change the image client-side, like a slideshow, just add a timer.
<script language="javascript">
function setImg(){
// random number between 1 and 100
var numRand = Math.floor(Math.random()*101);
document.getElementById("imgRand").src = "img/IMG_"+numRand+".jpg";}
// call it the first time
setImg();
// set an interval to change it every 30 seconds
window.setInterval("setImg()",30000);
</script>
Not Tested but something like this should work using Javascript:
//Add following inside script tag
//Add id to your image tag
var theImages = new Array();
theImages[0] = 'images/first.gif' // replace with names of images
theImages[1] = 'images/second.gif' // replace with names of images
theImages[2] = 'images/third.gif' // replace with names of images
......
var j = 0
var p = theImages.length;
var preBuffer = new Array();
for (i = 0; i < p; i++){
preBuffer[i] = new Image();
preBuffer[i].src = theImages[i];
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.getElementById("yourImgTagId").src = theImages[whichImage];
}
//call the function
showImage();
Did you mean something like that
What type of server are you using? Using PHP or ASP you can accomplish this using a script that cycles through your images in a script. So your HTML would just point to the script instead of directly to an image:
<img src="image_rotation_script.php" class="giThumbnail" alt="Nightclubs">
Then your script would rotate through your various images. Here is a PHP example:
<?php
header('content-type: image/jpeg');
// Your own logic here to pull from a database, randomize an array of images etc.
$images = array('img/IMG_1.jpg','img/IMG_2.jpg','img/IMG_3.jpg');
$imageFile = array_rand($images);
$image = imagecreatefromjpeg($imageFile);
imagejpeg($image);
imagedestroy($image);
?>
Use can use JavaScript to change the src field of the image tag. First insert an ID attribute to your img tag, or a NAME attribute if it appears more often on the same page.
<img id="nightClubImage" src="img/IMG_1035.jpg" class="giThumbnail" alt="Nightclubs">
Then write a script and change the src field:
document.getElementById('nightClubImage').src = "newImage.jpg";
If you want use only client-side solution try this:
<img src="img/IMG_1035.jpg" class="giThumbnail" alt="Nightclubs">
<script type="text/javascript">
var images = ['img/IMG_1035.jpg', 'img/IMG_1036.jpg', 'img/IMG_1037.jpg'];
document.getElementById('gitThumbnail').src = images[Math.round((Math.random() * (images.length-1))];
</script>