Autoplay fullscreen video not working. Not sure what the issue is - javascript

So I've been working on a homepage website for a decent amount of time now. Most things are fairly basic, but I am trying to input a script that randomly plays a video from a certain playlist once on.
This is what I have, I have messed around with this for a good couple of hours but haven't seemed to make any sort of progress.
var videos = [
'D1sZ_vwqwcE',
'yx2piPUudlE',
'BC_Ya4cY8RQ'
];
var index=Math.floor(Math.random() * videos.length);
var html='<div class="video-background"><div class="video-foreground"><iframe frameborder="0" src="https://www.youtube.com/embed/' +[index] + '?controls=0&showinfo=0&rel=0&autoplay=1&></iframe></div></div>';
document.write(html);
<html class=""><head>
<meta charset="UTF-8">
<title> Zenith</title>
<link rel="stylesheet" href="assets/css/style.css">
<style id="__web-inspector-hide-shortcut-style__" type="text/css">
.__web-inspector-hide-shortcut__, .__web-inspector-hide-shortcut__ *, .__web-inspector-hidebefore-shortcut__::before, .__web-inspector-hideafter-shortcut__::after
{
visibility: hidden !important;
}
</style></head>
<body>
<div class="wrapper">
<h1 class="glitch">Zenith</h1>
</div>
<a class="glitch-btn" href="http://steamcommunity.com/id/1zv" target="_blank">
<div class="label">Steam</div>
<div class="mask"><span>Steam</span></div>
<div class="mask"><span>Steam</span></div>
<div class="mask"><span>Steam</span></div>
<div class="mask"><span>Steam</span></div>
<div class="mask"><span>Steam</span></div></a>
<a class="glitch-btn1" href="https://www.youtube.com/channel/UCwBh4mBv-QrIynWxCj-8AVw" target="_blank">
<div class="label">Youtube</div>
<div class="mask"><span>Youtube</span></div>
<div class="mask"><span>Youtube</span></div>
<div class="mask"><span>Youtube</span></div>
<div class="mask"><span>Youtube</span></div>
<div class="mask"><span>Youtube</span></div></a>
<script src="assets/javascript/script.js"></script>
</body></html>
Now I'm not certain if it's because I am using a free host / codepen to mess around, or something is just wrong.
(I also have css but trying to copy it here exceeded the character limit)

You left out a closing quote from the html variable. Also, you're referencing the id wrong.
var html='<div class="video-background"><div class="video-foreground"><iframe frameborder="0" src="https://www.youtube.com/embed/' + videos[index] + '?controls=0&showinfo=0&rel=0&autoplay=1&"></iframe></div></div>';

Related

Controlling multiple CSS events with single Function

I am struggling to change CSS based on user actions with some script. Currently I have each navBar button performing 5 functions onClick. 1 each to change the CSS of 5 different divs. Since I am newer to scripting, I wanted to make an example similar to what I am doing in order to refer back in the future as well as hopefully help out the next person to come along.
Can someone please help me with this short example? I have tried many various scripts and just end up destroying my spirits.
For this, I want to click an openButton in the navBar and have it change the width (essentially open) a corresponding div on the page.
<div id="navBar">
<a id="div1OpenButton" class="openButton" onClick="openDiv()">div1</a>
<a id="div2OpenButton" class="openButton" onClick="openDiv()">div2</a>
<a id="div3OpenButton" class="openButton" onClick="openDiv()">div3</a>
</div>
<div id="main">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
<style>
#div1 {width: 0px;}
#div2 {width: 0px;}
#div3 {width: 0px;}
</style>
Don's use onclick within your HTML - that is bad practice. You want a separation of concerns, with your JS in a separate file.
If you use jQuery (which a good library for a use-case like this), you can use its powerful selector to select all five elements at the same time. jQuery's selector is nice for beginners because it's identical to how you use selectors in CSS.
I also like to attach my JS to my HTML via IDs, not classes. This way, you know your JS has unique HTML targets to attach to.
Putting all of this together, use the jQuery selector to select all buttons, then use a .click() event to encapsulate your CSS manipulation in an anonymous function:
$(".openButton").click(function() {
$("#div1, #div2, #div3").css("width", "500px");
});
There are better ways to do it, but following the line of your code, you must pass a param to your openDiv function such as the ID of the element you want to show.
<a id="div1OpenButton" class="openButton" onClick="openDiv('div1')">div1</a>
Your onClick function must to hide all divs inside your "main" and show only the id you just passed by param.
If you need more help, paste your code please.
Try this
<html><head>
<script src=path/to/jquery.js></script>
</head><body>
<div id="navBar">
<!-- openDiv(1) with "1" is the div number -->
<a id="div1OpenButton" class="openButton" onClick="openDiv(1)">div1</a>
<a id="div2OpenButton" class="openButton" onClick="openDiv(2)">div2</a>
<a id="div3OpenButton" class="openButton" onClick="openDiv(3)">div3</a>
</div>
<div id="main">
<div id="div1">div1 opened</div>
<div id="div2">div2 opened</div>
<div id="div3">div3 opened</div>
</div>
<style>
div#main div {overflow:hidden;width:0px} //to hide div content while closed
</style>
<script>
function openDiv(n) {
$('#div'+n).width(400);} // set width to 400px
</script>
</body></html>
OR without the inline onClick()
<html><head>
<script src=path/to/jquery.js></script>
</head><body>
<div id="navBar">
<a id="div1" class="openButton" >div1</a>
<a id="div2" class="openButton" >div2</a>
<a id="div3" class="openButton" >div3</a>
</div>
<div id="main">
<div id="div1">div1 opened</div>
<div id="div2">div2 opened</div>
<div id="div3">div3 opened</div>
</div>
<style>
div#main div {overflow:hidden;width:0px} //to hide div content while closed
</style>
<script>
$('a.openButton').click(function() {
var itm = $(this).attr("id");
$("#main div#"+itm).width(400);} );// set width to 400px
</script>
</body></html>
Firstly, don't mix HTML, CSS and JavaScript in the same file. You should write your JavaScript code in a .js file, and your styles in an external stylesheet ;
Add handlers on events in your JavaScript code by using element.addEventListener() ;
Use data attributes on your buttons to link them with target divs.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>My page</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div id="navBar">
<a class="openButton" data-target="div1">div1</a>
<a class="openButton" data-target="div2">div2</a>
<a class="openButton" data-target="div3">div3</a>
</div>
<div id="main">
<div id="div1" class="container hide"></div>
<div id="div2" class="container hide"></div>
<div id="div3" class="container hide"></div>
</div>
</body>
</html>
And in the script.js file:
document.addEventListener('DOMContentLoaded', function(event) {
var divs = document.querySelectorAll('.openButton');
for (var i = 0; i < divs.length; i++) {
divs[i].addEventListener('click', openDiv);
}
});
function openDiv(e) {
// Use e.target.dataset.target
// Add 'hide' class on all containers
var containers = document.querySelectorAll('.container');
for (var i = 0; i < containers.length; i++) {
containers[i].classList.add('hide');
}
// Remove 'hide' class on the container to display
document.getElementById(e.target.dataset.target).classList.remove('hide');
}
<a id="div1OpenButton" class="openButton" onClick="openDiv(this)">div1</a>
<script>
function openDiv(e){
document.getElementById(e.innerHTML).style.width= '20px'
}
</script>

jQuery - Random image generator (fix my code,maybe only syntax errors)

Welcome again,I have some problems with my code.
I still want to get random() background images,but
I can't get it working. It show the default white background with the two text 'title'. :(
My files are => in extension '.jpg' and in directory '/res/images' what's wrong?
<!doctype html>
<html>
<head>
<title>Random_page</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
//the highest number of the image you want to load
var upperLimit = 10;
//get random number between 1 and 10
//change upperlimit above to increase or
//decrease range
var randomNum = Math.floor((Math.random() * upperLimit) + 1);
//change the background image to a random jpg
//edit add closing ) to prevent syntax error
$("body").css("background-image","url('res/images/" + randomNum + ".jpg')");//<--changed path
});
</script>
</head>
<body>
<div id="container1" style="float:left; width:40%; margin:10px;">
<h1>Title</h1>
<img src="" width='100%' height='100%' />
</div>
<div id="container2" style="float:left; width:40%; margin: 10px;">
<h1>Title</h1>
<img src="" width='100%' height='100%' />
</div>
</body>
</html>
Developer console says:
ReferenceError: $ is not defined.
It means jQuery didn't load. Actual reason is missing http:
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

start/play video player onClick of image for LeadPlayer (or any Player)

I would like to figure out a way to get my image when clicked on to autoplay my media player. I'm a bit new and can't figure out onclick for this matter. I suppose jquery is the way to go. So, Thanks in advanced.
<!DOCTYPE html>
<html><head><style>#leadplayer_video_element_5348CAD9E1F02
<head>
<style>
<style>
position:absolute;
left:8px;
top:8px;
z-index:-1;
}
</style>
</head>
</head>
<body>
<a href="#">
<img src="https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-prn2/t1.0-9/1508520_496016637195955_3564444582693127544_n.png" hight="294" width="377" onclick="this.style.display='none';" style="position:absolute;opacity:1.0; z-index:1;"/>
</a>
<!-- LeadPlayer video embed code start [ video: 5348CAD9E1F02 ] -->
<div>
<script type="text/javascript" src="//s3.amazonaws.com/cdn.leadbrite.com/leadplayer/r0034/js/leadplayer.js">
</script>
</div>
<div id="leadplayer_video_element_5348CAD9E1F02" style="width:377px;height:260px">
</div>
<div>
<script type="text/javascript">jQLeadBrite("#leadplayer_video_element_5348CAD9E1F02").leadplayer(false, "eyJnYSI6dHJ1ZSwib3ZlcmxheSI6dHJ1ZSwicG93ZXJlZF9ieSI6dHJ1ZSwicG93ZXJlZF9ieV9saW5rIjoiaHR0cDpcL1wvd3d3LmxlYWRwbGF5ZXIuY29tXC8/dXRtX3NvdXJjZT1kZW1vLXNpdGUmYW1wO3V0bV9tZWRpdW09cG93ZXJlZC1ieS1sb2dvJmFtcDt1dG1fY2FtcGFpZ249TGVhZFBsYXllciAiLCJjb2xvcjEiOiIjRjVCQjBDIiwiY29sb3IyIjoiIzE3OThDRCIsImNvbG9yMyI6IiNGNUJCMEMiLCJ0eHRfc3VibWl0IjoiU1VCTUlUIiwidHh0X3BsYXkiOiJQTEFZIiwidHh0X2VtbCI6IllvdXIgRW1haWwgQWRkcmVzcyIsInR4dF9uYW1lIjoiWW91ciBOYW1lIiwidHh0X2ludmFsaWRfZW1sIjoiUGxlYXNlIGVudGVyIGEgdmFsaWQgZW1haWwiLCJ0eHRfaW52YWxpZF9uYW1lIjoiUGxlYXNlIGVudGVyIHlvdXIgbmFtZSIsImxwX3NvdXJjZSI6IldQIFBsdWdpbiAxLjQuMS44IFVubGltaXRlZCIsImlkIjoiNTM0OENBRDlFMUYwMiIsIndpZHRoIjozNzcsImhlaWdodCI6MjYwLCJ0aHVtYm5haWwiOiJodHRwczpcL1wvZmJleHRlcm5hbC1hLmFrYW1haWhkLm5ldFwvc2FmZV9pbWFnZS5waHA/ZD1BUUQ1S0U0R3lkYkotY0Y4JmFtcDt3PTM3NyZhbXA7aD0xOTcmYW1wO3VybD1odHRwJTNBJTJGJTJGcGljcmVkaXJlY3QuY29tJTJGcG9zdCUyRnVwbG9hZHMlMkYxMzk3MDY2MzkyLmpwZWclM0Z2JTNENTkyMTg3NjY1JmFtcDtjZnM9MSIsInRpdGxlIjoiVmlkZXJlZGlyZWN0IFRlc3QgQ29kZSAxIiwiZGVzY3JpcHRpb24iOiJUZXN0IENvZGUiLCJhdXRvcGxheSI6ZmFsc2UsInNob3dfdGltZWxpbmUiOnRydWUsImVuYWJsZV9oZCI6dHJ1ZSwib3B0IjpmYWxzZSwiY3RhIjp7InRpbWUiOjEwLCJidGV4dCI6IkNhbGwgVG8gQWN0aW9uIC0gQ2xpY2sgSGVyZSAiLCJ1cmwiOiJodHRwczpcL1wvd3d3LnBheXBhbC5jb21cL2NnaS1iaW5cL3dlYnNjcj9jbWQ9X3MteGNsaWNrJmFtcDtob3N0ZWRfYnV0dG9uX2lkPURZVUdCRUpHVzg2U0ciLCJhdXRvX2ZvbGxvdyI6ZmFsc2UsIm5ld193aW5kb3ciOnRydWV9LCJ5bSI6IklUWlUwaTlueEdnIn0=");
</script>
</div>
<!-- LeadPlayer video embed code end [ video: 5348CAD9E1F02 ] -->
</body>
</html>
OR... Can anyone find a way to make the pic refresh in the same div using ajax and jquery? Both would be highly appreciated.
Add Jquery Lib in head section
<script src="//code.jquery.com/jquery-1.9.1.js" type="text/javascript">
Try this (Add inside <script>..code..</script>)
$(window).load(function(){
$('a').click(function(){
$('.player').slideToggle();
});
});
DEMO

Quick button pressing for iOS web app

I couldn't find anything on how fast a button was pressed, so I hope this is OK. This is for a web-application.
For those of you who have an iPhone (or most modern smartphones now), if you have the pin styled unlock screen when you unlock your phone, the smartphone recognizes every touch you do, as quick as you do it.
The same is with a website, if you click on buttons quickly, it registers every click you do as soon as you do it.
However, I am having a problem crossing the two over.
I have a 'pin' styled login where the pin is just 1234 for test purposes. I want it so that someone can use it as a web-app and they have their unique pin to sign in quickly. However, if I try to put in 1234 quickly, it only registers 1 and 4 or sometimes 1 and 3 depending on how slow I do it. If I take my time and do it, then I can get all 4, but doing it quick is where my problem lies.
Overall question:
Is there any way for a web-app to register quick finger presses on smartphones (but primarily iOS?)
Code
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Pin</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src='http://code.jquery.com/jquery.min.js'></script>
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class='container'>
<div class='row text-center'>
<div class='col-xs-12'>
<div class='small-circle a1'></div>
<div class='small-circle a2'></div>
<div class='small-circle a3'></div>
<div class='small-circle a4'></div>
</div>
<div class='col-xs-4'>
<div class='main num hover' data-number="1"></div>
</div>
<div class='col-xs-4'>
<div class='main num hover' data-number="2"></div>
</div>
<div class='col-xs-4'>
<div class='main num hover' data-number="3"></div>
</div>
<div class='col-xs-4'>
<div class='main num hover' data-number="4"></div>
</div>
<div class='col-xs-4'>
<div class='main num hover' data-number="5"></div>
</div>
<div class='col-xs-4'>
<div class='main num hover' data-number="6"></div>
</div>
<div class='col-xs-4'>
<div class='main num hover' data-number="7"></div>
</div>
<div class='col-xs-4'>
<div class='main num hover' data-number="8"></div>
</div>
<div class='col-xs-4'>
<div class='main num hover' data-number="9"></div>
</div>
<div class='clearfix'></div>
<div class='col-xs-12'>
<div class='bottom_main num hover' data-number="0"></div>
</div>
</div>
</div>
</div>
<script src='script.js'></script>
</body>
</html>
CSS
body{
counter-reset: amount;
}
.num{
width:75px;
height:75px;
border:1px solid #000;
border-radius:100%;
line-height:75px;
margin:auto;
margin-top:30px;
counter-increment:amount;
}
.main:before{
content:counter(amount);
}
.bottom_main:before{
content:'0';
}
.active{
background:blue !important;
}
.small-circle{
display:inline-block;
width:20px;
height:20px;
border:1px solid #000;
border-radius:100%;
margin-top:20px;
}
jQuery
$(document).ready(function() {
var array = [];
var pin = "1234";
var a = 0;
$('.num').click(function(){
a++;
if (array.length <= 3)
{
array.push($(this).attr('data-number'));
}
});
setInterval(function() {
$('.a'+a).addClass('active');
if (array.length >= 4)
{
if (array.join("") === pin)
{
$('.small-circle').css('background','green');
$('.small-circle').removeClass('active');
}
else
{
array = [];
a = 0;
$('.small-circle').css('background','red');
$('.small-circle').removeClass('active');
}
}
}, 100);
});
And a jsFiddle for quick checking, although I'm not sure that it will work on an iPhone.
A click performed by the user takes 300ms to dispatch an event. This is just to detect possible doubleclicks.
You can prevent this by listening to touchstart-touchend and trigger them as a click without delay.
But instead of building your own start-end detections, this is already done well by Financial Times in their web app. See: https://github.com/ftlabs/fastclick for details.

Javascript - Changing an image with variables

I'm trying to create a slide show but I'm having some difficulty. I've googled the problem and read loads of pages but I still can't get it to work. I'm doing this all in my header, then the header.php will be included on whichever page. I've tried setting the source to a string containing the location, creating an image before and then setting it to that image's source, and just trying odd things trying to get it to work.
The strange thing is when I call the updateSlider() function, the source of my image is null even though I can see it on the screen, and afterwards when I set it, it says there is a source but the image is the same.
But at the moment I'm just trying to change the image when I click a button and then I'm going to try and make the slide show. Here is the header.php code, you can see some of the different things I've tried in it:
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="all">#import "./includes/layout.css";</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var slideImages = new Array("includes/images/mmSlideImage1.png",
"includes/images/mmSlideImage2.png", "includes/images/mmSlideImage3.png");
var slideImage = newImage();
slideImage.src = slideImages[0];
pic = document.createElement("img");
pic.setAttribute("src", "includes/images/mmSlideImage2.png");
pic.setAttribute("alt", "No Image");
var url2 = "includes/images/mmSlideImage2.png";
var img2 = new Image();
img2.src = url2;
function updateSlider() {
console.log(document.getElementById("ht").getAttribute("src"));
document.getElementById("ht").setAttribute("src", img2.src);
console.log(document.getElementById("ht").getAttribute("src"));
}
</script>
</head>
<body>
<img src="includes/images/mmSlideImage1.png" alt="Logo" width="970" height="278" />
<button type="button" onclick="updateSlider()">Update Slider</button>
<div id="nav">
Home
About
Gallery
Programs
</div>
Thank you in advance for any help!
==================================================================================
UPDATED CODE:
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="all">#import "./includes/layout.css";</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"
</script>
<script>
var url2 = "includes/images/mmSlideImage2.png";
function updateSlider() {
console.log(document.getElementById("ht").getAttribute("src"));
$('ht').attr('src', url2);
console.log(document.getElementById("ht").getAttribute("src"));
}
</script>
</head>
<body>
<img src="includes/images/mmSlideImage1.png" alt="Logo" width="970" height="278" />
<button type="button" onclick="updateSlider()">Update Slider</button>
Simple. You're trying to give an anchor a image attribute. Give your img an id and fix it in the Javascript. For example, if you give it an "currentSlideImage" id:
$('#currentSlideImage').attr('src', url2);
BTW, I'd suggest you take a read on Unobstrusive Javascript.
i am not sure why are you using new image when you are just changing src of an image tag.
the easiest way is to use jquery code
$('#imgTagID').attr('src', url2);
or in javascript
document.getElementById("imgTagID").src = url2;
Here you go you were just missing id Tag inside jquery i just tried it with online images
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var url2 = "http://www.thinkstockphotos.com.au/CMS/StaticContent/WhyThinkstockImages/Best_Images.jpg";
function updateSlider() {
//console.log(document.getElementById("ht").getAttribute("src"));
$('#ht').attr('src', url2);
//console.log(document.getElementById("ht").getAttribute("src"));
}
</script>
</head>
<body>
<a href="index.html" class="logo" > <img id="ht" src="http://www.nasa.gov/sites/default/files/images/743348main_Timelapse_Sun_4k.jpg" alt="Logo" width="970" height="278" /></a>
<button type="button" onclick="updateSlider()">Update Slider</button>
</body>
</html>

Categories

Resources