Bouncing img in div game - javascript

I have a problem with my code in javascript. I want to edit code to make my mini game.
This is the original code I'm trying to edit. It's about bouncing balls. When you press the button the balls starts bouncing. The balls are in random position and every ball is moving randomly. When they are about to escape the border they are returning. Everything in this code works perfect.
Original code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#border {height:500px; width:500px; border:1px solid grey; margin:auto; position:relative}
b {display:block; height:10px; width:10px; border-radius:5px; background:red; position:absolute}
h1,div {text-align:center; margin:10px}
</style>
</head>
<body>
</body>
<h1>Balls</h1>
<div id='border'>
<b></b>
<b></b>
<b></b>
<b></b>
<b></b>
<b></b>
<b></b>
<b></b>
<b></b>
<b></b>
<b></b>
</div>
<div>
<button onclick="run=false"> Stop </button>
<button onclick="run=true;start()"> Start </button>
</div>
<script>
var b=document.getElementsByTagName('B');
var run=false;
var i;
for(i=0;i<b.length;i++)
{
b[i].x=Math.random()*490;
b[i].y=Math.random()*490;
b[i].vx=Math.random()*20-10;
b[i].vy=Math.random()*20-10;
b[i].style.left=b[i].x+"px";
b[i].style.top =b[i].y+"px";
}
function start()
{
var i;
for(i=0;i<b.length;i++)
{
b[i].x+=b[i].vx;
b[i].y+=b[i].vy;
if(b[i].x>490 || b[i].x<0) b[i].vx*=-1;
if(b[i].y>490 || b[i].y<0) b[i].vy*=-1;
b[i].style.left=b[i].x+"px";
b[i].style.top =b[i].y+"px";
}
if(run)
setTimeout(start,20);
}
</script>
</html>
I want to replace the balls with images. I think I did it but it doesn't work at all. Images are always in the same position. When I press the button to move them, images are moving in the same direction. Images are escaping from border (they should bounce on the walls and return).
My edit:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#border {height:500px; width:500px; border:1px solid grey; margin:auto; position:relative}
img {display:block; height:10px; width:10px; position:absolute}
h1,div {text-align:center; margin:10px}
</style>
</head>
<body>
</body>
<h1>Balls</h1>
<div id='border'>
<img src="http://www.doktoranci.uj.edu.pl/image/image_gallery?uuid=8de2ed31-63f2-42f3-83fd-8fc0b7c48975&groupId=1167150&t=1287521328354">
<img src="http://www.doktoranci.uj.edu.pl/image/image_gallery?uuid=8de2ed31-63f2-42f3-83fd-8fc0b7c48975&groupId=1167150&t=1287521328354">
<img src="http://www.doktoranci.uj.edu.pl/image/image_gallery?uuid=8de2ed31-63f2-42f3-83fd-8fc0b7c48975&groupId=1167150&t=1287521328354">
</div>
<div>
<button onclick="run=false"> Stop </button>
<button onclick="run=true; start()"> Start </button>
</div>
<script>
var b=document.getElementsByTagName('IMG');
var run=false;
var i;
for(i=0; i<b.length; i++)
{
b[i].x=Math.random()*490;
b[i].y=Math.random()*490;
b[i].vx=Math.random()*20-10;
b[i].vy=Math.random()*20-10;
b[i].style.left=b[i].x+"px";
b[i].style.top =b[i].y+"px";
}
function start()
{
var i;
for(i=0; i<b.length; i++)
{
b[i].x+=b[i].vx;
b[i].y+=b[i].vy;
if(b[i].x>490 || b[i].x<0) b[i].vx*=-1;
if(b[i].y>490 || b[i].y<0) b[i].vy*=-1;
b[i].style.left=b[i].x+"px";
b[i].style.top =b[i].y+"px";
}
if(run)
setTimeout(start,20);
}
</script>
</html>
I want my images to behavior like the balls in original code.
You're my only hope.

Instead of using <img>, use
b {background-image: url("http://www.doktoranci.uj.edu.pl/image/image_gallery?uuid=8de2ed31-63f2-42f3-83fd-8fc0b7c48975&groupId=1167150&t=1287521328354");
background-repeat: no-repeat;
background-position: right top;}

The reason the code is not working with img tags is outlined in the documentation:
HTMLImageElement.x Read only Returns a long representing the
horizontal offset from the nearest layer. This property mimics an old
Netscape 4 behavior.
HTMLImageElement.y Read only Returns a long
representing the vertical offset from the nearest layer. This property
mimics an old Netscape 4 behavior.
As a work around you can use background-image on b tags or change the coordinates property names to i.e. currentX and currentY

Related

How to syntax highlight a content-editable div without external libraries?

I'm trying to make a web text editor that has live syntax highlighting like Visual Studio Code but the problem is when I try to highlight, it puts my cursor in the back of the editor.
My code:
<html>
<head>
<title>Code</title>
<style>
body {
margin:0px;
padding:0px;
overflow:hidden;
}
#code {
background:#2b2e33;
color:white;
font-family:Monaco;
width:100%;
height:100%;
font-size:12px;
}
</style>
</head>
<body>
<div id="code" contenteditable="true"></div>
<script>
var div = document.getElementById("code");
setInterval(function() {
var code = div.innerText;
code = code.replace("var","<span style='color:magenta'>var</span>");
div.innerHTML = code;
},100)
</script>
</body>
The cursor seems to go to the back and the text is being reversed for no apparent reason...

HTML background box for block of text

Completely new to HTML, I need an html file which does the above:
Some background color for the whole page.
In the center of the page, a block of text within a box of white background color.
Directly under (outside of) the white box, a small line of text at the center of page.
There is probably a better way to do it, but this is my way:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:color here;
}
#example-name {
background-color:white;
}
#example-2 {
text-align:center;
}
</style>
</head>
<body>
<div id='example-name' style="margin: 0 auto">
example content
</div>
<div id='example-2'>
<p>example text</p>
</div>
</body>
<html>
<html>
<body style="background-color:tan">
<p style="margin-left: 30%;margin-right: 30%; background-color: white; padding: 20px 20px 20px 20px;">
Hi.<br>
Thanks for using Mailgun! Please confirm your email address by clicking below!<br>
I hope this answers your question!
</p>
</body>
</html>
Use the css elements margin, background-color, and padding.

after giving the transition-duration property i cant able to use the jQuery functions properly

jQuery functions like .hide(),.fadeIn(),.fadeOut() are not properly working after giving the transition duration property.
example : hide(2000) then after 2 second it is hiding but the animation is not getting applied and it is the common problem i am having with all the jQuery functions
if i delete the transition-duration then all working with animation. Why this is happening? Someone explain it to me and also give solution to solve this problem
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Opening Sequence </title>
<link rel="stylesheet" href="open.css">
<script src="jquery.js"></script>
<script src="open.js"></script>
</head>
<body>
<br><br>
<section id="container">
<p id="content"> This is cool </p>
</section>
</body>
</html>
CSS
#charset "utf-8";
/* CSS Document */
#container
{
width:600px;
height:600px;
margin:0 auto;
border:1px solid red;
line-height:500px;
}
#content
{
font-weight:bold;
font-family:Verdana, Geneva, sans-serif;
font-size:20px;
text-align:center;
transition-duration:3s;
}
JS
$(document).ready(function()
{
//alert("Application has been started");
$i=0;
var ob=$('#content');
ob.slideUp(4000);
//ob.hide(2000);
});
problem is after 4 seconds it is hiding but not sliding up, in the sense not animating like hiding from the down to the top

Change image on mouseover for a button on another div

On the "home" page I want to have a logotype and a menu on a #banner div (which will then be there throughout the whole site) and on a #content" div to have an image. All these divs are inside a #container" div. The menu has 3 buttons.
I would like that on mouseover event each button displayed image on the #content div changes accordingly. So basically, when hover button1, the image on #content will change from background.jpg to background1.jpg. The event of mouseover on button2 will change it to background2.jpg etc. When buttons are not hovered over, the image should revert to the original background.jpg.
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>E.S.T.</title>
<link href="_css/layout.css" rel="stylesheet" type="text/css">
<link href="SpryAssets/SpryMenuBarHorizontal.css"
rel="stylesheet"
type="text/css">
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="banner">
<div id="logo">E.S.T.</div>
<div id="menu">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li id="button1">Biography</li>
<li id="button2">Albums</li>
<li id="button3">Links</li>
</ul>
</div>
</div>
<div id="content">
<img id="back0" src="_img/background.jpg">
<img id="back1" src="_img/back_bio.jpg">
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1,
{
imgDown:"SpryAssets/SpryMenuBarDownHover.gif",
imgRight:"SpryAssets/SpryMenuBarRightHover.gif"
});
</script>
</body>
</html>
CSS:
#charset "UTF-8";
#import url("../_fonts/Days/fontstylesheet.css");
body {
background-color:#CCC;
font-family:Days;
font-size:100%;
}
#container {
width:850px;
max-height: 650px;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
font-family: Days;
}
#logo {
position:relative;
font-size: 4em;
color:white;
float:left;
}
#menu {
float:right;
margin-top:40px;
}
I have tried several different things but I manage only to change the background image from the buttons themselves. From searching around the web i think this should be done with JS, but i have no idea how to do it.
This can be solved entirely with CSS, but first let me give you a tip:
Combine background.jpg and background1.jpg into one image, and rather change the background position. This way, there won't be any delay from when the user hovers over the menu element to when the picture is displayed, and you'll have fewer files to keep track of.
Say we let #button1 be 100px tall. We make an image 200px tall containing the normal state image on top, and the hover image on the bottom. This is called a sprite.
#button1 {
height: 100px;
background-image: url("background.jpg");
}
#button1:hover {
background-position: 0 -100px;
}
This moves the background image, showing the hover version.
For convenience, I'll answer this question using the jQuery javascript library.
If I understand you right, you would like #content to contain an image that changes when you hover over the menu items, and the image should reflect the item currently hovered.
In stead of including every image in the body, I'll try an approach using the data attributes.
HTML The relevant parts
<ul id="MenuBar1" class="MenuBarHorizontal">
<li id="button1" data-img="background.jpg">Biography</li>
<li id="button2" data-img="back_album.jpg">Albums</li>
<li id="button3">Links</li>
</ul>
<div id="content">
<img id="back"
src="_img/background.jpg"
data-original="_img/background.jpg"
alt="e.s.t" />
</div>
JavaScript
$(document).ready(function() {
$("#MenuBar1 li").mouseover(function() {
$("#back").attr("src", $(this).data("img"));
}).mouseout(function() {
$("#back").attr("src", $("#back").data("original"));
});
});​
So now we store the original image path with the image tag in its data-original attribute, and the path to the :hover image is stored with the menu element.
See this Fiddle for a demo!
Give an id on your image like: id=idimage
You can use jQuery like this:
<script type="text/javascript">
$(document).ready(function(){
$("#MenuBar1 li").mouseover(function(){
var id=$(this).attr('id');
var number = id[id.length-1];
$("#id_image").attr("src","_img/background"+number+".jpg");
});
});
</script>

How to apply 100% height to div?

I want to make the last/third div to be filled the whole remaining space. I given the 100% height but there is scroll bar is coming, which i dont want to show. I there any CSS solution for same. if not possible from css then the jQuery/JS solution will be fine.
<html style="height:100%">
<head>
<style type="css">
html , body {
width:100%; height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="height:100%;width:100%">
<div style="height:100px;background-color:#ddd"> </div>
<div style="height:25px;background-color:#eee"> </div>
<div style="display:block;height:100%;background-color:#ccc"> </div>
</div>
</body>
</html>
In jQuery, you can try something like this:
$(function() {
$(window).resize(function() {
$('div:last').height($(window).height() - $('div:last').offset().top);
});
$(window).resize();
});
Whenever the window is resized, the last div's height is modified so that the div extends to the bottom of the page. Window's resize method is called on page load so that the div is resized immediately.
If you substract the top offset of the div from the height of the window, you are left with the maximum height available. If you have margins, borders of padding applied, you might have to adjust the value which is substracted, for example:
$('div:last').height($(window).height() - $('div:last').offset().top - 30);
Assuming you want the div 30px from the bottom of the window.
On modern browsers: set position: relative on the container div, position: absolute on the third div. Then you can position it to the top and bottom of the container the same time: top: 0px, bottom: 0px;
You could also use faux columns by adding a vertically repeating background image to the CSS making the columns appear toy the space - this gives the appear. You could add this image to the div that wraps the three columns or to the body tag.
If these columns a going to have content in them it's probably worth adding some as the columns will behave differently.
You can hide the overflow in the containing DIV:
<html>
<head>
<style>
*{margin:0;padding:0;}
html,body{height:100%;}
</style>
</head>
<body>
<div style="overflow:hidden;height:100%">
<div style="height:100px;background-color:#ddd"></div>
<div style="height:25px;background-color:#eee"></div>
<div style="height:100%;background-color:#ccc"> </div>
</div>
</body>
</html>
Note that content might dissapear when resizing the window using this technique.
You can use pure CSS height:100% (where 100% is the height of the visible area in the window) values in quirks mode by not using DOCTYPE at all or using IE-faulty HTML 4.0 DOCTYPE (without the .dtd url)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<body style="margin:0; padding:0; overflow:hidden;">
<div style="height: 100%; background: red"></div>
</body>
</html>
You can ditch the <!DOCTYPE.. entirely, it still would have the same effect. overflow:hidden declaration in body style is to get rid of the empty scrollbar in IE. But remember - this is quirks mode which means that you are on unpredictable territory, CSS box model differs from browser to browser!
html style="height:100%">
<head>
<style type="css">
html , body {
width:100%;
height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="height:100%;">
<div style="height:100px;background-color:#ddd"> </div>
<div style="height:25px;background-color:#eee"> </div>
<div style="position:fixed;top:125px;height:100%;width:100%;background-color:#ccc"> </div>
</div>
</body>
</html>
Perhaps this could work?! But I don't know whats happens if there is to mutch text...
Simply don't worry about it if your goal is to have the colour fill the bottom.
Set the colour of the outer div, and let the third one resize its height however it wants as content goes in.
<html style="height:100%">
<head>
<style type="css">
html , body {
width:100%; height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="height:100%;width:100%;background-color:#ccc">
<div style="height:100px;background-color:#ddd"> </div>
<div style="height:25px;background-color:#eee"> </div>
<div style=""> </div>
</div>
</body>
</html>
The property 'height: 100%;' will instruct browsers to take the 100 per cent of the available screen space for that particular div, which means that your browser will check the browsing space size and return it to the CSS engine without checking whether there are any elements inside it.
The only workaround that I see to fit here is to use the solution provided by David to use 'position: absolute; bottom: 0;' for that div.
it a bit ugly, but it works..
<html style="height:100%">
<head>
<style type="css">
html , body {
width:100%;
height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="width:100%;height:100%;">
<div style="width:100%;height:100px;background-color:#ddd;"> </div>
<div style="width:100%;height:25px;background-color:#eee;"> </div>
<div style="width:100%;height:100%;background-color:#ccc;margin-bottom:-1000em;padding-bottom:1000em;"> </div>
</div>
</body>
</html>
Here's a litle jquery fix I have done:
<html>
<head>
<title>test</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
$("#thirdDiv").height(heightToFill);
});
</script>
</head>
<body style="height: 100%; padding: 0px; margin: 0px;">
<div id="parentDiv" style="height: 100%; width: 100%; position:absolute;">
<div id="firstDiv" style="height: 100px; background-color: #ddd">
</div>
<div id="secondDiv" style="height: 25px; background-color: #eee">
</div>
<div id="thirdDiv" style="background-color: #ccc;">
a</div>
</div>
</body>
</html>
$(window).resize(function(){
$('.elastic').each(function(i,n){
var ph = $(this).parent().height();
var pw = $(this).parent().width();
var sh = 0;
var s = $(this).siblings().each(function(i,n){
sh += $(this).height();
})
$(this).height(ph-sh);
sh = 0, ph = 0, s=0;
});
});
put the following on on your script tag or external javascript.
then change
when you resize the window... it will automatically fit its height to available space on the bottom. you could have as many divs as you like however you can only have one elastic inside that parent. couldnt be bothered to calculate multiple elastics :) hope it helps
$(document).ready(function() {
var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
$("#thirdDiv").height(heightToFill);
$(window).resize(function(){ var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
$("#thirdDiv").height(heightToFill);
});
This should be included in case the browser is resized....
window.onload = setHeight
window.onresize = setHeight
function setHeight() {
document.getElementById('app').style.height = window.innerHeight + "px"
}

Categories

Resources