How to make text using javascript and youtube api clickable - javascript

Right now I have a base html page that gets the most popular videos using youtubes api. So far it displays the title of the videos but i'm trying to make those titles clickable. If the title was clicked they would then just be brought to the video on actual youtube. I know that I could theoretically just find the most popular videos then do a clickable link but I want this to more or less auto update everytime a new popular video gets found with the youtube api. Right now I have this basic code.
<html>
<head>
<title>My Videos</title>
<style>
.titlec {
font-size: small;
}
ul.videos li {
float: left;
width: 10em;
margin-bottom: 1em;
}
ul.videos {
margin-bottom: 1em;
padding-left : 0em;
margin-left: 0em;
list-style: none;
}
</style>
<script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script>
<script type="text/javascript">
function showData(data) {
var feed = data.feed;
var entries = feed.entry || [];
var html = ['<ul class="videos">'];
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var title = entry.title.$t.substr(0, 20);
// var thumbnailUrl = entries[i].media$group.media$thumbnail[0].url;
html.push('<span class="titlec">', title, '...</span><br /></span></li>');
}
// html.push('</ul><br style="clear: left;"/>');
document.getElementById('videos2').innerHTML = html.join('');
if (entries.length > 0) {
loadVideo(entries[0].media$group.media$content[0].url, false);
}
}
</script>
</head>
<body>
<div id="playerContainer" style="width: 20em; height: 180px; float: left;">
<object id="player">
</object>
</div>
<div id="videos2"></div>
<script
type="text/javascript"
src="http://gdata.youtube.com/feeds/api/standardfeeds/most_popular?time=this_week&alt=json-in-script&callback=showData&max-results=10&format=5">
</script>
</body>
</html>

I am not sure if I exactly understand what you are trying to achieve but I have created a jsfiddle!
Here is the code:
<html>
<head>
<title>My Videos</title>
<script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script>
<script type="text/javascript">
function showData(data) {
var feed = data.feed;
var entries = feed.entry || [];
var html = ['<ul class="videos">'];
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var title = entry.title.$t.substr(0, 20);
html.push('<li class="titlec">' + title + '</li>');
}
document.getElementById('videos2').innerHTML = html.join('') + '</ul>';
if (entries.length > 0) {
loadVideo(entries[0].media$group.media$content[0].url);
}
}
function loadVideo(e) {
var container = document.getElementById('playerContainer');
var player = document.getElementById('player');
container.removeChild(player);//remove object child
player.setAttribute('data',e);//change link
container.appendChild(player);//add object back
}
</script>
</head>
<body>
<div id="playerContainer" style="width: 20em; height: 180px; float: left;">
<object id="player"></object>
</div>
<div id="videos2"></div>
<script type="text/javascript" src="http://gdata.youtube.com/feeds/api/standardfeeds/most_popular?time=this_week&alt=json-in-script&callback=showData&max-results=10&format=5">
</script>
</body>

Related

Cycle Through Web Pages with Start and Stop Buttons

I have a few URLs that each show the status of some industrial equipment. I'm trying to create an HTML/Javascript solution that, on load, cycles through each of the websites at a set interval, with two buttons to stop the cycle (to take a closer look at something) and restart the cycle (either from the beginning or where it left off, I'm not picky). I'm REALLY rusty, but I got what I think is a good start. Unfortunately, it doesn't work. Here are the CSS and HTML:
html,
body {
height: 100vh;
width: 100vw;
}
#btStart {
position: absolute;
width: 50px;
height: 40px;
left: 20px;
top: 50px;
}
#btStop {
position: absolute;
width: 50px;
height: 40px;
left: 20px;
top: 120px;
}
#infoFrame {
width: 100%;
height: 100%;
}
.holder {
width: 100%;
height: 100%;
position: relative;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Info Cycle</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="main.css" rel="stylesheet">
</head>
<body>
<div class="holder">
<iframe src="" id="infoFrame" frameborder="0" allowfullscreen>
<script type="text/javascript">
var urlArray = ['url1.com',
'url2.com',
'url3.com',
'url4.com',
'url5.com'];
var count = 0;
var i = document.getElementById('infoFrame');
var u = document.getElementById('url');
var timer = setInterval(cycleTimer, 5000);
function nextUrl() {
url = urlArray[++count];
count = (count >= urlArray.length - 1)? -1 : count;
return url;
}
function cycleTimer() {
u.innerHTML = '';
i.src = nextUrl();
i.onload = function(){
u.innerHTML = i.src;
}
}
</script>
</iframe>
<button type="button" id="btStart" onclick="var timer = setInterval(cycleTimer, 5000);">Start</button>
<button type="button" id="btStop" onclick="clearInterval(timer)";>Stop</button>
</div>
</body>
<footer>
</footer>
</html>
Before I added the buttons it would load, then 5 seconds later it would cycle correctly, and so on. Now it only shows the buttons. Looking at the requests, I believe what's happening in my CSS and structure is trash, and it's loading the appropriate URL, but not displaying. I should add, prior to the buttons I only had the iframe with the script in it as a proof of concept. I div'd it, added the stylesheet, and added the buttons, and now here we are.
This may be a rookie mistake, or something more complicated. I haven't done development in a long time, and I'm just trying to solve a little problem at work. If you could spare a minute, I'd be happy to know how to fix this, and also any feedback on what I could be doing better. I'd love to get back into doing more of this, so I'm interested to learn anything the community can share. I've searched the site and the internet, and I've found a couple of related solutions but nothing for this in particular.
Thanks!
EDIT:
In case it helps, below is the HTML before the buttons and stylesheet, which worked (it rotated between webpages every 7 seconds):
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Info Cycle</title>
</head>
<body>
<iframe id="frame" src=""
style="
position: fixed;
top: 0px;
bottom: 0px;
right: 0px;
width: 100%;
border: none;
margin: 0;
padding: 0;
overflow: hidden;
z-index: 999999;
height: 100%;
"></iframe>
<script type="text/javascript">
var urlArray = ['url1.com',
'url2.com',
'url3.com',
'url4.com',
'url5.com'];
var count = 0;
var i = document.getElementById('frame');
var u = document.getElementById('url');
var timer = setInterval(cycleTimer, 7000);
function nextUrl() {
url = urlArray[++count];
count = (count >= urlArray.length - 1)? -1 : count;
return url;
}
function cycleTimer() {
u.innerHTML = '';
i.src = nextUrl();
i.onload = function(){
u.innerHTML = i.src;
}
}
</script>
</body>
</html>
The iframe style was something I found in an old file I'd written (probably copied and pasted from Stack Overflow to just get a thing to work).
The problem here is having the script inside the iframe. If you move your script out of the iframe and put it under body or head then it will work.
<!DOCTYPE HTML>
<html>
<head>
<title>Info Cycle</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="main.css" rel="stylesheet">
<script type="text/javascript">
var urlArray = ['url1.com',
'url2.com',
'url3.com',
'url4.com',
'url5.com'];
var count = 0;
var timer = setInterval(cycleTimer, 5000);
function nextUrl() {
url = urlArray[++count];
count = (count >= urlArray.length - 1) ? -1 : count;
return url;
}
function cycleTimer() {
var i = document.getElementById('infoFrame');
var u = document.getElementById('url');
u.innerHTML = '';
i.src = nextUrl();
i.onload = function () {
u.innerHTML = i.src;
}
}
</script>
</head>
<body>
<div class="holder">
<iframe src="" id="infoFrame" frameborder="0" allowfullscreen>
</iframe>
<button type="button" id="btStart" onclick="var timer = setInterval(cycleTimer, 5000);">Start</button>
<button type="button" id="btStop" onclick="clearInterval(timer)" ;>Stop</button>
</div>
</body>
<footer>
</footer>
</html>

Script creating a new div with header and a paragraph

I would like to make a script that will create a new div with header and a paragraph which will be taken from the form. Here is my code:
<!DOCTYPE html>
<html lang="en">
<style>
.h{
width: 500px;
}
.p{
width: 500px;
height: 250px;
text-overflow: ellipsis;
}
</style>
<body>
H:<br>
<input type="text" class="h"><br><br>
P:<br>
<textarea class="p"></textarea><br><br>
<button onclick="add();">Send</button>
</body>
<script>
function add(){
var a = document.getElementsByClassName("h");
var b = document.getElementsByClassName("p")
var div = document.createElement("DIV");
var naglowek = document.createTextNode(a);
var tresc = document.createTextNode(b);
div.appendChild(naglowek);
document.body.appendChild(div);
}
</script>
</html>
You're passing an array-type object to the function createTextNode, what you need to do is assign the value of those fields.
I recommend you to use ids.
<!DOCTYPE html>
<html lang="en">
<style>
.h{
width: 300px;
}
.p{
width: 300px;
height: 150px;
text-overflow: ellipsis;
}
</style>
<body>
H:<br>
<input type="text" id="h" class="h"><br><br>
P:<br>
<textarea id="p" class="p"></textarea><br><br>
<button onclick="add();">Send</button>
</body>
<script>
function add(){
var a = document.getElementById("h").value;
var b = document.getElementById("p").value;
var div = document.createElement("DIV");
var naglowek = document.createTextNode(a);
var tresc = document.createTextNode(b);
div.appendChild(naglowek);
div.appendChild(document.createElement('p'));
div.appendChild(tresc);
document.body.appendChild(div);
}
</script>
</html>

apply jquery filter to an created div?

Hey guys i was wondering if someone could help with some issues on my code.
Basically ive created 4 elements(divs) in an onclick event.From html i've also done so that same button dissapears
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="blackjack2.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="blackjack1.js"></script>
</head>
<body>
<button class= "boton" id="start">Play</button>
<button class= "boton" id="hit">Hit</button>
<button class= "boton" id= "stand">Stand</button>
<script type="text/javascript">
var jugar = document.getElementById('start')
var mas = document.getElementById('hit')
var mantener = document.getElementById('stand')
var cuerpo= document.getElementsByTagName('body')[0]
var crear_cartas= function() {
var card= document.createElement('div');
var texto =document.createTextNode("CASINO");
card.setAttribute("class","cartas");
card.appendChild(texto);
cuerpo.appendChild(card);
}
jugar.onclick= function(){
crear_cartas()
crear_cartas()
crear_cartas()
crear_cartas()
jugar.setAttribute('class','ocultar')
}
</script>
</body>
</html>
Up to there is ok , but im not sure if from jquery i can apply a filter that activates on the same onclick event that appears in javascript code (on those 4 created elements )to the even ones so that they make an animation lowering slightly the margin.
I've read about it but i am a bit at sea given that the filter would apply to created elements..
Thank you in advance guys
css class ".cartas" code included:
.cartas{
/*display: none;*/
margin: 260px 75px 0 75px;
display: inline-block;
border-radius: 10px;
border: 1px solid black;
padding-top: 50px;
height:100px;
width:100px;
color: #003366;
font-family: Muli,Helvetica Neue,Helvetica,sans-serif;
text-align: center;
background-color: #f0f8ff;
}
Add an onlcick event to all event divs. This event will add a class that will push the elements below those divs downward using a margin-bottom
Snippet below
var counter = 0;
var jugar = document.getElementById('start')
var mas = document.getElementById('hit')
var mantener = document.getElementById('stand')
var cuerpo = document.getElementsByTagName('body')[0]
var crear_cartas = function() {
card = document.createElement('div');
var texto = document.createTextNode("CASINO");
card.setAttribute("class", "cartas");
card.appendChild(texto);
cuerpo.appendChild(card);
}
jugar.onclick = function() {
for (var x = 0; x < 4; ++x) {
crear_cartas();
if ((x + 1) % 2 == 0) {
card.addEventListener('click', function() {
this.classList.add("move");
})
}
}
jugar.setAttribute('class', 'ocultar')
} //end func
div {
transition: margin-bottom 0.5s;
}
.move {
margin-bottom: 50px;
}
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="blackjack2.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="blackjack1.js"></script>
</head>
<body>
<button class="boton" id="start">Play</button>
<button class="boton" id="hit">Hit</button>
<button class="boton" id="stand">Stand</button>
</body>
</html>

how can I loop url arrays in a page after the autoscroll hits the bottom part of the page?

<body>
<div id="scr" style="overflow:auto; width: 100%; height: 100%; ">
<p id="content"></p>
</div>
var sites = ['linkexample.com', 'http://link2.com', 'http://link3.com'];
i = 3;
ctr = 0;
while(ctr < i){
document.getElementById("content").innerHTML = '<object width="100%" height="100%" data="' + sites[ctr] + '"></object>';
function ScrollDiv(){
if(document.getElementById('scr').scrollTop<(document.getElementById('scr').scrollHeight-document.getElementById('scr').offsetHeight)){-1
document.getElementById('scr').scrollTop=document.getElementById('scr').scrollTop+1
}
else {
ctr++;
}
setInterval(ScrollDiv, 5)
}
};
This code example iterates through the array and loads the url into <p id="content"></p>
Also I have corrected some mistakes in your code.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div id="scr" style="overflow:auto; width: 100%; height: 100%; ">
<p id="content"></p>
</div>
</body>
<script type="text/javascript">
var ctr = 0;
var sites = ['http://link1.com', 'http://link2.com', 'http://link3.com'];
function ScrollDiv(){
if(document.getElementById('scr').scrollTop<(document.getElementById('scr').scrollHeight-document.getElementById('scr').offsetHeight)){
document.getElementById('scr').scrollTop=document.getElementById('scr').scrollTop+1;
}else{
ctr++;
if(ctr>2){
ctr=0;
}
document.getElementById("content").innerHTML = '<object width="100%" height="100%" data="' + sites[ctr] + '"></object>';
}
}
setInterval(ScrollDiv, 3000);
</script>
</html>
There is no page content in the example that you have provided. I am unclear about what you want to do with scrolls.

DOM not updating after adding a class to a div?

I'm trying to write a program that collects all class names in a div, stores them in an array and pushes them all back to the DOM with a class called blue at the end, this is the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>some title</title>
<style>
.blue{
width: 200px;
height: 200px;
background: blue;
}
</style>
</head>
<body>
<div class="someClass otherClass" id="box"></div>
<button id="btn">click</button>
</body>
</html>
The thing is, I know how to get all the class names inside the div and even how to push blue (on btn click) inside of that div together with the other values I have collected but why isn't the blue box showing up? What am I missing?
var domManipulation = function(){
var box = document.querySelector('#box');
var btn = document.querySelector('#btn');
var class_list = [];
if(box.classList.length > 0){
for(var i = 0; i < box.classList.length; i++){
class_list.push(box.classList[i]);
}
}
btn.addEventListener('click', function(){
class_list.push("blue");
box.classList.add(class_list);
console.log(class_list);
});
}();
Here is a JsBin and I can't use jQuery btw.
This is the problem:
box.classList.add(class_list);
You can't add a whole array of classes because they end up being comma-separated.
var domManipulation = function() {
var box = document.querySelector('#box');
var btn = document.querySelector('#btn');
var class_list = [];
if (box.classList.length > 0) {
for (var i = 0; i < box.classList.length; i++) {
class_list.push(box.classList[i]);
}
}
btn.addEventListener('click', function() {
class_list.push("blue");
class_list.forEach(function(e){
box.classList.add(e);
})
console.log(class_list);
});
}();
#box {height: 50px; background: #eee}
#box.blue {background: blue}
<div class="someClass otherClass" id="box"></div>
<button id="btn">click</button>

Categories

Resources