Anyone know why when I click the #stopbar the #player doesn't disapear? I can click the .thumb and get the #player to show up, but getting it to go away doesn't work.
Here's a link to it in action: http://neroedge.shiftarch.com/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>NeroEdge</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var ids = new Array("U61s9-SzrtQ","Volvo","BMW");
var photoNum = 0;
var maxPhotos = 4;
var maxDisplay = 4; //must be able to /2
function getTempVar(i){
var temp = i;
if(temp < 0) temp += maxPhotos;
if(temp >= maxPhotos) temp -= maxPhotos;
return temp;
}
function getGallery(){
$("#gallery").empty();
var temp = photoNum - (maxDisplay/2);
for(var i = 0; i < maxDisplay; i += 1){
temp += 1;
var v = getTempVar(temp);
$("#gallery").append("<img class=\"thumb\" src=\"/images/gallery/thumb/"+v+".png\" alt=\""+ids[v]+"\" />");
}
}
getGallery();
$("#leftbutton").click(function(){
photoNum -= 1;
if(photoNum < 0) photoNum = maxPhotos - 1;
getGallery();
});
$("#rightbutton").click(function(){
photoNum += 1;
if(photoNum >= maxPhotos) photoNum = 0;
getGallery();
});
$(".thumb").click(function(){
$("#player").css("display","block");
$("#player").css("position","absolute");
$("#player").css("top", (($(window).height()/2) - 240) + $(window).scrollTop() + "px");
$("#player").css("left", (($(window).width()/2) - 360) + $(window).scrollLeft() + "px");
$("#player").html("<div id=\"stopbar\">Press this to close video</div><iframe width=\"640\" height=\"480\" src=\"http://www.youtube.com/embed/"+$(this).attr("alt")+"\" frameborder=\"0\" allowfullscreen></iframe>");
});
$("#stopbar").click(function(){
$("#player").css("display","none");
$("#player").css("position","absolute");
$("#player").css("top", "0px");
$("#player").css("left", "0px");
$("#player").html("<div id=\"stopbar\">Press this to close video</div>");
});
});
</script>
</head>
<body>
<div id="player">
<div id="stopbar">Press this to close video</div>
</div>
<div id="wrap">
<div id="banner">
<img src="images/banner.png" alt="NeroEdge" />
</div>
<div id="main">
<div id="navibar">
<div id="title">NeroEdge - By William Starkovich</div>
<div id="tester">Become a Tester</div>
</div>
<br />
<div id="bigcolumn">
<div id="gallerywrap">
<img id="lbutton" src="/images/gallery/left.png" alt="Left Button" />
<div id="gallery">Gallery not loaded.</div>
<img id="rbutton" src="/images/gallery/right.png" alt="Right Button" />
</div>
<br />
<br />
<br />
<br />
<hr style="width: 80%; color: #00ffff;"/>
You can use .live() instead of .click() on the #stopbar. You add the html for the #stopbar after the page has rendered, which is why it won't work.
You are writing the #stopbar into the page dynamically, but are only binding to it at runtime, once.
Check out delegate() (or on() in jQuery 1.7+) to find out how to do this for ALL #stopbars, even ones you create dynamically.
Info: http://api.jquery.com/on/
Example:
$('body').on('click', '#stopbar', function() { ... });
$(".thumb").click(function(){
$("#player").css("display","block");
$("#player").css("position","absolute");
$("#player").css("top", (($(window).height()/2) - 240) + $(window).scrollTop() + "px");
$("#player").css("left", (($(window).width()/2) - 360) + $(window).scrollLeft() + "px");
$("#player").html("<div id=\"stopbar\">Press this to close video</div><iframe width=\"640\" height=\"480\" src=\"http://www.youtube.com/embed/"+$(this).attr("alt")+"\" frameborder=\"0\" allowfullscreen></iframe>");
});
Related
I am trying to build a very simple points counter on a website. The numbers and button press aren't showing up in the main HTML. I am somewhat familiar with javascript, but not how to implement it onto a website. Help?
I've tried putting the javascript in a tag in the header, but it still doesn't show up.
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/public_html/script.js"></script>
</head>
<body>
<div id="main-container">
<div class="health-box" id="opponent-health">
<img src="https://www.trzcacak.rs/myfile/full/208-2086167_runic-letter-othalan-rune-odal.png">
<div class="health-counter" id="opponent-health-counter">
</div>
<div class="health-adjust health-minus" id="opponent-health-minus">
▼
</div>
<div class="health-adjust health-plus" id="opponent-health-plus">
▲
</div>
</div>
<div class="health-box" id="your-health">
<p> LP </p>
<div class="health-counter" id="your-health-counter">
</div>
<div class="health-adjust health-minus" id="your-health-minus">
▼
</div>
<div class="health-adjust health-plus" id="your-health-plus">
▲
</div>
</div>
</div>
</body>
</html>
$(document).ready(function() {
//Variable set-up
var opponentHealth = 0;
var yourHealth = 10;
$("#opponent-health-counter").html(opponentHealth);
$("#your-health-counter").html(yourHealth);
//Health adjust code
$(".health-adjust").click(function() {
if (this.id == "opponent-health-minus" && opponentHealth > 0) {
opponentHealth -= 1;
}
else{
opponentHealth -= 0;
};
if (this.id == "your-health-minus") {
yourHealth -= 1;
};
if (this.id == "opponent-health-plus" && opponentHealth < yourHealth) {
opponentHealth += 1;
}
else{
opponentHealth += 0;
};
if (this.id == "your-health-plus") {
yourHealth += 1;
};
$("#opponent-health-counter").html(opponentHealth);
$("#your-health-counter").html(yourHealth);
});
});
Here is a link to a Pen where the programming works as expected. https://codepen.io/iph33r/full/LYPpOJm
Since your script uses Jquery, you need to load that first.
<head>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/public_html/script.js"></script>
</head>
$(document).ready(function(){
console.log(document.getElementById("aDiv").offsetTop);
var e = document.getElementById("aDiv");
var s = 1;
setInterval(function(){
var eLeftPos = e.offsetTop;
// console.log(eLeftPos);
e.style.top = (eLeftPos - s) + 'px';
}, 200);
// Animation
(function makeDiv(){
var divsize = 30;
var color = '#'+ Math.round(0xffffff * Math.random()).toString(16);
$newdiv = $('<div/>',{
"class": "bubble theRestBubbles",
"id": "bDiv"
}).css({
'width':divsize+'px',
'height':divsize+'px',
'background-color': color,
'border-radius' : 50 + "%",
// 'class' : 'bubble',
});
var posx = (Math.random() * ($(document.getElementById("mainBlock")).width())).toFixed();
$newdiv.css({
'position':'absolute',
'left':posx+'px',
'top':370+'px',
'display':'none'
}).appendTo( '#mainBlock' ).fadeIn(1000).delay(00, function(){
// $(this).remove();
makeDiv();
});
})();
});
$(document).ready(function(){
$(".bubble").click(function(){
// $("input").append(" <b>Appended text</b>");
var x = document.getElementById("input").value;
var y = (parseInt(x, 10) || 0) + 1;
x = y;
console.log(x);
$('#input').val(x);
var currentPosition = this.offsetTop;
console.log(currentPosition);
this.style.top = "370px";
});
$(".btn-danger").click(function(){
$('#input').val("");
});
});
.bg{
height: 400px;
/*width: 400px;*/
background-color: #FFF1F1;
/*display: inline-block;*/
position: relative;
}
.bubble{
height: 30px;
width: 30px;
border-radius: 50%;
background-color: #24E93E;
cursor: pointer;
position: absolute;
bottom: 0;
left: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Game</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/js.js"></script>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container">
<div class="row text-center">
<div class="col-xs-3 btnDiv">
<button type="button" class="btn btn-danger">RESET</button>
<button type="button" class="btn btn-success">PLAY</button>
</div>
<div class="col-xs-6 bg main-block" id="mainBlock">
<div class="bubble testBubble" id="aDiv"></div>
</div>
<div class="col-xs-3 score-place">
<input id="input" type="text" name="" placeholder="">
</div>
</div>
</div>
</body>
</html>
Hi All.
Here I have a div, and by Math.Random a little dives are appearing. Now I need them to go up like the one I have at the beginning of the page.
Also When I click on the first and only the second div, there is a input, and the value +1. But the trick is that after first 2 divs, on clicking the rest ones, the value of input stays the same.
Will be glad if you will tell me how to solve this problem
first of all - you're question is very unclear - so I hope I understood you.
a. you want all the divs to bubble up - so why did you use getElementById ?
this will always return only one element + you do it before the interval so it's always the same one. try:
setInterval(function(){
$('.bubble').each(function(){
var e = this;
var eLeftPos = e.offsetTop;
e.style.top = (eLeftPos - s) + 'px';
})
}, 200);
b. only clicks on the original div are counted - that is because you set the click only on load where there is only one div available. try:
$(document).ready(function(){
$('.container').on('click',".bubble",function(){ // this is the only line I changed
// $("input").append(" <b>Appended text</b>");
var x = document.getElementById("input").value;
var y = (parseInt(x, 10) || 0) + 1;
x = y;
console.log(x);
$('#input').val(x);
var currentPosition = this.offsetTop;
console.log(currentPosition);
this.style.top = "370px";
});
$(".btn-danger").click(function(){
$('#input').val("");
});
});
I'm new to JavaScript and am trying to get this animation to move across the screen though to little avail , can someone help me out with my code? Added more code, im trying to get the image to move diagonally down my screen, trying to call the slowmovingmeteor() function.
Java Script
var meteoranim = new Array(6);
var curmeteor = 0;
var leftposition = 0;
var topposition = 0;
for(var t = 0; t<6; ++t){
meteoranim[t] = new Image();
meteoranim[t].src = "images/meteor" + t + ".png";
}
function meteoranimation(){
if(curmeteor == 5)
curmeteor = 0;
else
++curmeteor;
document.getElementById('meteor').src = meteoranim[curmeteor].src;
}
function slowmovingmeteor(){
var slowmeteor = document.getElementById("meteor");
slowmeteor.style.left = leftposition + "px";
slowmeteor.style.top = topposition + "px";
slowmeteor.style.visibility = "visible";
topposition += 6;
leftposition += 4;
if (topposition <= -20){
topposition = -10;
leftposition = -10;
}
if (curmeteor == 5)
curmeteor =0;
if (leftposition > 1000){
topposition = -10;
leftposition = -10;
}
else
document.getElementById('meteor').src = meteoranim[curmeteor].src;
++curmeteor
}
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Primordial Casino Casino</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link media="screen" href="styles/casinostyles.css" rel="stylesheet" type="text/css">
<script src="casinoAnimation.js" type="text/javascript">
</script>
</head>
<body id="wrapper" onLoad="
setInterval('caveboyanimation()', 150);
setInterval('slowmovingmeteor()', 80);
setInterval('campfireanimation()', 100);">
<header ><h1 class="casinotitle">Primordial Casino</h1>
</header>
<div>
<img class="caveboy" src="images/caveboy0.png" id="caveboy" alt="Image of a cave boy"/>
<img src="images/campfire0.png" id="firepit" alt="Image of a fire pit"/>
<img src="images/meteor0.png" id="meteor" alt="Image of a meteor"/>
<canvas width="650" height="450">
</canvas>
</div>
<div id="footer">
<p>© Primordial Casino</p>
<p>Thanks to ipicturee.com for the background image</p>
</div>
</body>
</html>
i having problem in creating textbox using jquery that is implemented in webview. here is the code
<html>
<head>
<title>jQuery Mobile List Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
<script type="text/javascript">
var counter = 1;
$('#AddQuestion').live('pagecreate', function() {
$('#button').click(function() {
$('#TextBoxesGroup').append("<input type ='text' id='option" + counter + "' placeholder='option" + counter + "'>");
$('#TextBoxesGroup').textinput();
if (counter > 4) {
document.getElementById("button").style.display = 'none';
}
counter++;
});
});
</script>
</head>
<body>
<div data-role="page" id="AddQuestion">
<div data-role="header" data-position="fixed">
<h1>AddQuestion</h1>
</div>
<div data-role="content">
<form name="newdocument">
<div data-role="listview" id="TextBoxesGroup"></div>
<input type="button" value="Add Option" id="button">
</form>
</div>
</div>
</body>
</html>
i have tried this code in jsfiddle and when i press the add option button it shows unstyle textbox. what would be the problem?
You need to trigger create on the page to have jQuery mobile apply the additional markup and classes required for styling.
<script type="text/javascript">
var counter = 1;
$('#AddQuestion').live('pagecreate', function() {
$('#button').click(function() {
$('#TextBoxesGroup').append("<input type ='text' id='option" + counter + "' placeholder='option" + counter + "'>");
$('#TextBoxesGroup').textinput();
if (counter > 4) {
document.getElementById("button").style.display = 'none';
}
$('#AddQuestion').trigger('create');
counter++;
});
});
</script>
I am making a jQuery carousel that is populated using JSON. I need it to stop at the end. I calculate the width of the list by multiplying the number of list items by the width of the list item, so new items can be added without changing the width in the CSS. Here is my code
slider.js
$(document).ready(function() {
var w = $("#carouselList").css("width");
var slider = $("#carouselList");
var leftProperty, newLeftProperty;
$("#rightButton").click(function(){
leftProperty = parseInt(slider.css("left"));
if (leftProperty - 991 <= -w) {
newLeftProperty = 0;
}
else {
newLeftProperty = leftProperty - 304;
}
slider.animate({left: newLeftProperty}, 500);
});
$("#leftButton").click(function(){
leftProperty = parseInt(slider.css("left"));
if (leftProperty < 0){
newLeftProperty = leftProperty + 304;
}
else {
newLeftProperty = 0;
}
slider.animate({left: newLeftProperty}, 500);
});
});
the HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="slider.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="carousel">
<h2>Recommended for You</h2>
<div id="leftButton" class="buttonPanel"></div>
<div id="display">
<ul id="carouselList">
</ul>
</div><!--display-->
<div id="rightButton" class="buttonPanel"></div>
<div class="clear"></div>
</div><!--carousel-->
<script>
$.getJSON('jsonData.json', function(data){
var items=[];
$.each(data, function(key, val){
items.push(val);
$("#carouselList").append(items[2]);
var c =$("#carouselList li").size();
$("#carouselList").css("width", c*250);
});
});
</script>
</body>
</html>