I am working on a video player that launches a video into an iframe within a div overlay. I want to avoid repetetive code such as onclick=() in every link, and want to avoid external libraries such as jQuery, because jQuery produces an unpleasant flickering screen when my video window is launched.
My problem is that with my work so far, only the first link opens the video overlay. I (somewhat) understand that the [0] indicates the first element in an array. Can an array contain an infinite numerical range, or is there a better way to accomplish my goal here? There will potentially be thousands of videos in these galleries, so listing them one at a time in my script is not practical.
I am still struggling to learn, so a working example would be greatly appreciated. Thanks
My work so far
https://jsfiddle.net/4oomb9rt/
example code
<!doctype html>
<html>
<head>
<title>Video Overlay</title>
<style>
body {
margin: 0;
font-family: arial;
}
#vidPlayer {
height: 100%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #000;
overflow: hidden;
transition: 0.5s;
display: none;
color: white;
}
.closebtn {
position: absolute;
top: 7px;
right: 7px;
font-size: 50px;
}
.openbtn {
font-size: 30px;
}
.openbtn, .closebtn {
max-height: 48px;
max-width: 48px;
min-height: 48px;
min-width: 48px;
border-radius: 7px;
line-height: 12px;
}
.vidContent {
width: 100%;
text-align: center;
font-size: 32px;
}
</style>
</head>
<body>
<div id="vidPlayer">
<button class="closebtn">×</button>
<div class="vidContent">vidplayer content</div>
</div>
<button class="openbtn">☰</button>
<button class="openbtn">☰</button>
<button class="openbtn">☰</button>
<script>
function openNav() {
document.getElementById("vidPlayer").style.display = "block";
}
function closeNav() {
document.getElementById("vidPlayer").style.display = "none";
}
var opener = document.getElementsByClassName('openbtn')[0];
opener.addEventListener("click", function(e) {
openNav();
}, false);
var closer = document.getElementsByClassName('closebtn')[0];
closer.addEventListener("click", function(e) {
closeNav();
}, false);
</script>
</body>
</html>
You can iterate over element using ClassName and assign event listener.
for(var i=0;i<document.getElementsByClassName("openbtn").length;i++){
document.getElementsByClassName("openbtn")[i].addEventListener("click", function(e) {
openNav();
}, false);
}
Demo : https://jsfiddle.net/tj23hy3h/
You are on the right track. You want to make a few minor changes to your javascript.
var openers = document.getElementsByClassName('openbtn');
for(var i=0; i<openers.length; i++) {
openers[i].addEventListener("click", function(e) {
openNav();
}, false);
}
var closers = document.getElementsByClassName('closebtn');
for(var i=0; i<closers.length; i++) {
closers[i].addEventListener("click", function(e) {
closeNav();
}, false);
}
by iterating through all of your openers or closers you can add the listener to each one.
What you're problem is that you'll have to add you event listener to all of the elements of that type so something like this would work:
var opener = document.querySelectorAll('.openbtn');
Array.from(opener).foreach(function(opener_single){
opener_single.addEventListener("click", openNav, false);
});
and then the same theory for the closer elements.
what I'm doing here is I'm getting all elements with the class name of openbutton then looping through them in the loop i am then applying the click event listener in which runs the openNav function.
Related
This is my code. Im new to JavaScript so idk what I'm really doing. Basically, every time the button is clicked, a new Van Gogh detail/image should fill the background. I feel like many images are repeated and sometimes the button doesn't work (a new image doesn't appear on each click). Ideally, I would like a new image with each click. For now, I only have 10 images, but may add more. Thank you for your help.
HTML
<!DOCTYPE html>
<html>
<head>
<title>VG java project</title>
<link rel="stylesheet" type="text/css" href="assets/main.css">
<script src="assets/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="assets/main.js"></script>
</head>
<body>
<div class="container1"></div>
<div class="container">
<div class="button">
Do you like Van Gogh?
</div>
</div>
</body>
</html>
CSS
body {
font-family: courier new;
padding: 3rem;
z-index: 200;
background: url(gogh4.jpg);
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.item {
max-width: 960px;
text-align: center;
}
.button {
position: absolute;
left: 50px;
top: 50px;
border: 7px double;
border-color: black;
padding: 20px;
font-size: 40px;
background-color: rgb(225, 186, 253);
opacity: 80%;
}
.button:hover {
background-color: rgb(197, 103, 247);
color: white;
cursor: pointer;
opacity: 90%;
}
.gogh1 {
background: url(gogh1.jpg);
}
.gogh2 {
background: url(gogh3.jpg);
}
.gogh3 {
background: url(gogh3.jpg);
}
.gogh4 {
background: url(gogh4.jpg);
}
.gogh5 {
background: url(gogh5.jpg);
}
.gogh6 {
background: url(gogh6.jpg);
}
.gogh7 {
background: url(gogh7.jpg);
}
.gogh8 {
background: url(gogh8.jpg);
}
.gogh9 {
background: url(gogh9.jpg);
}
.gogh10 {
background: url(gogh10.jpg);
}
.highlight {
font-size: 200px;
}
JavaScript ~ I'm using jQuery btw
$(function() {
$(".button").click(function(){
let goghs = ["gogh1", "gogh2", "gogh3", "gogh4",
"gogh5", "gogh6", "gogh7", "gogh8",
"gogh9", "gogh10"]
let i = Math.floor(Math.random()* goghs.length - Math.random() + 2 );
$("body").toggleClass(goghs[i]);
});
});
Since You asked for Javascript help.
Here's a problem you had in your code:
Edited:
$(function () {
$(".button").click(function () {
let goghs = ["gogh1", "gogh2", "gogh3", "gogh4",
"gogh5", "gogh6", "gogh7", "gogh8",
"gogh9", "gogh10"
]
let i = Math.floor(Math.random() * goghs.length); //There was no need to add + Random plus 2 to it. You already Selecting a random index from an array(sometimes 'i' value was 10 -> undefined).
console.log(i, goghs[i]); //logging helps you notice that is nothing wrong with other parts and function runs. only the code itself has some problems.
$("body").toggleClass(goghs[i]);
});
});
If "i" is 2 the first time around then "gogh2" get added as the class.
If "i" is 3 the second time around the "gogh3" will be 'added' to the class list. "gogh2" will still be there.
Then, if "i" is 2 the third time around, then it will remove "gogh2" and you'll just be left with "gogh3".
Try:
$("body").removeClass();
$("body").addClass(goghs[i]);
and do away with your toggleClass line.
toggleClass will add the class to the list if it's not there and remove it if it is.
I am trying to have a event happen at a current time through an audio file. The following code currently works and successfully plays the audio file:
<html>
<head>
<style>
.titletext {
color: white;
display: block;
position: absolute;
font-size: 50px;
width: 1000px;
margin-left: 150px;
margin-right: 200px;
}
.nametext {
color: white;
display: block;
position: absolute;
font-size: 30px;
width: 600px;
margin-left: 500px;
margin-right: 200px;
margin-top: 600px;
}
.earthphoto {
display: block;
position: absolute;
margin-left: 400px;
margin-top: 150px;
}
</style>
</head>
<body onload="update()">
<script type="text/javascript">
document.body.style.background="black";
var changescene=function(){
var allvariables=Object.keys( window );
if(page===1){
console.log(allvariables);
}
page++;
update();
};
var page=1;
var playsound=function(){
if(page===1){
document.getElementById("sound1").play();
document.getElementById("sound1").addEventListener("ended",function(){changescene();});
}
};
var update=function(){
if(page===1){
document.body.innerHTML="";
var text=document.createElement("p");
var textclass = document.createAttribute("class");
textclass.value="titletext";
text.setAttributeNode(textclass);
text.appendChild(document.createTextNode("Welcome to Mikey's Google Earth Presentation!"));
document.body.appendChild(text);
var text2=document.createElement("p");
text2class=document.createAttribute("class");
text2class.value="nametext";
text2.setAttributeNode(text2class);
text2.appendChild(document.createTextNode("By Mikey Richards"));
document.body.appendChild(text2);
googleearthimage=document.createElement("img");
googleearthimage.setAttribute("src","EARTH.png");
googleearthimage.setAttribute("class","earthphoto");
document.body.appendChild(googleearthimage);
var music=document.createElement("audio");
var musiclink=document.createElement("source");
musiclink.src="Slide1.mp3";
music.appendChild(musiclink);
var musicclass=document.createAttribute("id");
musicclass.value="sound1";
music.setAttributeNode(musicclass);
document.body.appendChild(music);
playsound();
}else if(page===2){
document.body.innerHTML="";
}
};
</script>
</body>
</html>
However, although this works for playing the audio file, when I add this code to run some code when it reaches a certain point, it crashes.
while(document.getElementById("sound1").currentTime<16){
}
//insert code here
I place this code in the playsound function directly after the play function for the audio, so the audio file should be playing. Why does the file crash.
Here is a link to see the result of the file:
http://www.presentation.bugs3.com/presentation.html
You effectively have a while(true){} loop in your code. while executes synchronously, which means that there is no break in the execution loop for anything else to happen, like the audio to advance. You only want to use while if the loop itself modifies the condition while is checking. Depending on exactly what you want to do, i'd use setTimeout or setInterval. If you want to stop it after 16 seconds, I'd do
setTimeout(
function(){document.getElementById("sound1").pause()},
16000)
alternatively
var curInterval = setInterval(
function(){
if(document.getElementById("sound1").currentTime<16)
{
doSomething();
}
else
{
clearInterval(curInterval);
doSomethingElse();
}
},
200) //whatever interval makes sense to you.
Here is my code:
Please fill out my form.
<script>
var test = document.getElementById('test');
var win = null;
test.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
win = window.open(test.href, null, 'height=823, width=680, toolbar=0, location=0, status=1, scrollbars=1, resizable=1');
return false;
});
window.addEventListener('click', function(e) {
if(win != null) {
win.close();
win = null;
}
});
</script>
This code works fine, but i need like to display as light box, for example please refer this site, http://fancybox.net/ ,, I am new to javascript, can anyone one help me to do this,
Any help would be appreciated, Thank you.
To start working with javascript, you would need a javascript library API. You must have heard about JQuery, this makes your work easier than regular Javascript codes. JQuery have lots of plugins especially for lightbox gallery that you are looking for. One useful lightbox plugin is Colorbox.
Start by importing the libraries to your header just like below. You also might need some css files for the colorbox themes.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
<script src="../jquery.colorbox.js"></script>
Then start using colorbox just like below
Please fill out my form.
$(document).ready(function(){
$("#test").click(function(){ //on clicking the link above
$(this).colorbox({ //this would capture the url from the href
width:'500px', //width of the colorbox
height:'auto', //height of the colorbox
initialWidth:'500px', //initial width upon loading
initialHeight:'auto', //initial height upon loading
speed:0, //animation speed
opacity:0.2, //background opacity
overlayClose: true, //close upon clicking anywhere
title:'Your Form Title', //your form title name
onComplete: function(){
//do something when the colorbox loaded completely
}
});
})
});
Take a look on this following example. This is custom light box without any plugin:
Updated Fiddle
jQuery:
var lightBox = $('#lightbox'),
lightBoxContent = $('#lb-content');
var positionLightbox = function() {
var veiwWidth = $(window).width(),
lbContentMargin = (veiwWidth / 2) - 148,
lbContent = $('#lb-content');
lbContent.css({
'left' : lbContentMargin,
'top' : $(window).scrollTop() + 50 + 'px'
});
};
$('#test').click(function(e) {
e.preventDefault();
lightBox.fadeIn(function() {
lightBoxContent.show();
});
positionLightbox();
});
$('#lb-close').click(function() {
lightBox.hide();
lightBoxContent.hide();
});
/*hide click outside*/
$(document).mouseup(function (e)
{
if (!lightBoxContent.is(e.target) // if the target of the click isn't the container...
&& lightBoxContent.has(e.target).length === 0) // ... nor a descendant of the container
{
lightBox.hide();
lightBoxContent.hide();
}
});
CSS:
body {color: #fff; font-family: arial; font-family: arial;}
#lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.8;
text-align: center;
display: none;
}
#lb-content {
color: #222;
height: 150px;
width: 260px;
border: 16px solid #222;
background-color: #fff;
position: relative;
text-align: center;
padding-top: 10px;
border-radius: 4px;
display: none;
}
#lb-close {
display: block;
height: 22px;
width: 25px;
background-color: red;
color: #fff;
position: absolute;
top: -25px;
right: -25px;
cursor: pointer;
text-align: center;
border-radius: 10px;
}
You can go for jQuery Plugin also:
http://lokeshdhakar.com/projects/lightbox2/
http://dimsemenov.com/plugins/magnific-popup/
http://www.jacklmoore.com/colorbox/
I am trying to create a pop-up message that disables the rest of the screen until you confirm it, only by using CSS and JavaScript (and without the alert function).
Although http://msdn.microsoft.com/en-us/library/ie/ms536739%28v=vs.85%29.aspx declares that setAttribute is supported in IE8 and higher, it does not seem to work correctly - well, actually it doesn't seem to work at all.
Here is my code:
<html>
<style type="text/css">
.overlay
{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.2);
}
.overlaytext
{
position: absolute;
left: 50%;
margin-left: -150px;
top: 50%;
margin-top: -50px;
width: 300px;
height: 100px;
padding-top: 5px;
background-color: #777777;
color: #000000;
font-size: 20px;
text-align: center;
}
.overlaybutton
{
position: absolute;
left: 50%;
margin-left: -30px;
top: 50%;
margin-top: 20px;
width: 60px;
height: 25px;
border: solid;
border-color: #000000;
border-width: 1px;
background-color: #999999;
color: #000000;
font-size: 20px;
}
</style>
<script type="text/javascript">
function showoverlay(message)
{
var overlay = document.createElement('div');
overlay.setAttribute('id','overlay');
overlay.setAttribute('class','overlay');
document.body.appendChild(overlay);
var overlaytext = document.createElement('div');
overlaytext.setAttribute('id','overlaytext');
overlaytext.setAttribute('class','overlaytext');
overlaytext.innerHTML = message;
document.body.appendChild(overlaytext);
var overlaybutton = document.createElement('input');
overlaybutton.setAttribute('type','button');
overlaybutton.setAttribute('id','overlaybutton');
overlaybutton.setAttribute('class','overlaybutton');
overlaybutton.setAttribute('value','OK');
overlaybutton.setAttribute('onclick','deleteoverlay()');
document.body.appendChild(overlaybutton);
}
function deleteoverlay()
{
var elem = document.getElementById('overlay');
elem.parentNode.removeChild(elem);
elem = document.getElementById('overlaytext');
elem.parentNode.removeChild(elem);
elem = document.getElementById('overlaybutton');
elem.parentNode.removeChild(elem);
}
</script>
<body>
<input type="button" value="Show message" onclick="showoverlay('Message text')"/>
</body>
</html>
It works just fine in Firefox and Chrome, but IE (testing with IE9) seems to ignore the setAttribute method, because it only puts in the text and the button, but without the formatting (i.e. class was not applied) and also clicking the newly created button does not remove the objects (i.e. either id was not applied, or there is some additional incompatibility with portions of the code that remove the objects).
I tried to replace setAttribute like this:
<script type="text/javascript">
function showoverlay(message)
{
var overlay = document.createElement('div');
overlay.id = 'overlay';
overlay.class = 'overlay';
document.body.appendChild(overlay);
var overlaytext = document.createElement('div');
overlaytext.id = 'overlaytext';
overlaytext.class = 'overlaytext';
overlaytext.innerHTML = message;
document.body.appendChild(overlaytext);
var overlaybutton = document.createElement('input');
overlaybutton.type = 'button';
overlaybutton.id = 'overlaybutton';
overlaybutton.class = 'overlaybutton';
overlaybutton.value = 'OK';
overlaybutton.onclick = 'deleteoverlay()';
document.body.appendChild(overlaybutton);
}
function deleteoverlay()
{
var elem = document.getElementById('overlay');
elem.parentNode.removeChild(elem);
elem = document.getElementById('overlaytext');
elem.parentNode.removeChild(elem);
elem = document.getElementById('overlaybutton');
elem.parentNode.removeChild(elem);
}
</script>
But this time it does not even add the text and the button.
So, how to make this script IE compatible, both showing all the elements and then removing them?
Thanks
Use this as your doctype
<!DOCTYPE html>
and then put this in the head of the document
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
and then enjoy using setAttribute and a number of other features which this will allow to properly work on IE8+ environments.
The correct way to set a class in your second example is:
overlaybutton.className = 'overlaybutton';
That will get classes working in IE. As far as deleting elements goes, I'd recommend reformatting your event handling attachment like so:
overlaybutton.onclick = deleteoverlay;
I have run into this issue as well. If you are able to include jQuery on the site, you can use $('#overlay').attr('class', 'overlay');. jQuery is extremely useful for making cross-browser compatible code.
I need to replace our Ajax Modal Popup controls with a JavaScript equivalent. We use this as a simple context sensitive help type popup. I did a quick browse but didn't see quite what I was looking for. I just need some text and a simple Close button/link, but I would like the page darkened below the popup, as it does with the Ajax modal control.
Can anyone suggest a nice JavaScript popup/help type solution that you've used?
I can provide you the code. Do your modifications as necessary, OK?
Page JavaScript:
function myPop() {
this.square = null;
this.overdiv = null;
this.popOut = function(msgtxt) {
//filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;
this.overdiv = document.createElement("div");
this.overdiv.className = "overdiv";
this.square = document.createElement("div");
this.square.className = "square";
this.square.Code = this;
var msg = document.createElement("div");
msg.className = "msg";
msg.innerHTML = msgtxt;
this.square.appendChild(msg);
var closebtn = document.createElement("button");
closebtn.onclick = function() {
this.parentNode.Code.popIn();
}
closebtn.innerHTML = "Close";
this.square.appendChild(closebtn);
document.body.appendChild(this.overdiv);
document.body.appendChild(this.square);
}
this.popIn = function() {
if (this.square != null) {
document.body.removeChild(this.square);
this.square = null;
}
if (this.overdiv != null) {
document.body.removeChild(this.overdiv);
this.overdiv = null;
}
}
}
Now the HTML page, using the JavaScript file:
<html>
<head>
<script type="text/javascript" src="NAME OF THE PAGE!.js"></script>
<style>
div.overdiv { filter: alpha(opacity=75);
-moz-opacity: .75;
opacity: .75;
background-color: #c0c0c0;
position: absolute;
top: 0px;
left: 0px;
width: 100%; height: 100%; }
div.square { position: absolute;
top: 200px;
left: 200px;
background-color: Menu;
border: #f9f9f9;
height: 200px;
width: 300px; }
div.square div.msg { color: #3e6bc2;
font-size: 15px;
padding: 15px; }
</style>
</head>
<body>
<div style="background-color: red; width: 200px; height: 300px;
padding: 20px; margin: 20px;"></div>
<script type="text/javascript">
var pop = new myPop();
pop.popOut("Jose leal");
</script>
</body>
</html>
Hope that this can help.
I've used the simplemodal jQuery plugin and I've been quite happy with it. You can check it out here.
Maybe you are looking for something like this? [ui.jquery.com]
It's the simplest one, and can come bundled with a lot of other eye candy. Of course you could also look around the rest of the jQuery plug-ins page, specially the Windows and Overlays section.
I developed a javascript library called Msg. It allows to easily create a modal window / popup. It creates an overlay behind it that darkens the background. It has no close button but it can be closed by clicking the background overlay.