I am currently creating a program that allows the user to move an image to avoid falling blocks but I am stuck on getting the image to move. Ive been using onkeypress to move the picture with any button, eventually having it move with the arrow keys but so far the image doesn't move.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
font-size: 2.8em;
text-align: center;
}
#Screen{
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
box-shadow: 0 0 20px gray;
}
#car{
position: absolute;
background-color: blue;
width: 50px;
height: 80px;
}
</style>
</head>
<body>
<h1>Drive your car with arrow keys</h1>
<canvas id="Screen" width="400px" height="400px"></canvas>
<div id="car" tabindex="0"></div>
<div id="Screen"></div>
<!-- <img id="car" tabindex="0" src='race_car.png'> -->
<script>
var mycar = document.getElementById("car");
mycar.onkeypress = moveCar();
function moveCar(){
console.log(mycar.offsetLeft);
mycar.style.left = mycar.offsetLeft + 20 + "px";
}
</script>
</body>
</html>
You've assigned the event listener incorectly.
Use document.onkeypress = moveCar;
var mycar = document.getElementById("car");
document.onkeypress = moveCar;
function moveCar(){
console.log(mycar.offsetLeft);
mycar.style.left = mycar.offsetLeft + 20 + "px";
}
h1{
font-size: 2.8em;
text-align: center;
}
#Screen{
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
box-shadow: 0 0 20px gray;
}
#car{
position: absolute;
background-color: blue;
width: 50px;
height: 80px;
}
<h1>Drive your car with arrow keys</h1>
<canvas id="Screen" width="400px" height="400px"></canvas>
<div id="car" tabindex="0"></div>
<div id="Screen"></div>
<!-- <img id="car" tabindex="0" src='race_car.png'> -->
Unless you have to use onkeypress, which doesn't seem to work with the keyboard arrows. Per W3 Schools, this event only fires for a limited set of keys. There is a solution using leftArrowPressed (and the other arrow keys here: Move an image with the arrow keys using JavaScript
In that example, you have full movement with the arrow keys. Per MDN, the keypress event is now deprecated, and keydown should be used instead (as in the example referenced above).
Related
I have two drop-down buttons where the Difficulty button will make the Duration button move to the bottom when you click on it; likewise if you click on the Duration button it will move the Difficulty button to the bottom.
What's interesting is when the Difficulty button is clicked first, then the Duration button, both will be the proper height; but if you click the Duration button first, then the Difficulty button, only the Duration button will close its contents and move to the bottom again. This is what my code looks like:
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style_MP.css"/>
</head>
<body>
<div class="main_page">
<h1>Welcome to My Typing Test!</h1>
<h2>Select Your Difficulty and Duration</h2>
<div>
<!--Below, the word "diff" is short for "difficulty" -->
<!--So "diff-settings" means "difficulty settings" -->
<!--"diff-options" means "difficulty options" and so on -->
<div class="difficulty">
<button onclick="myfunction01()" class="diff-settings">Difficulty</button>
<div class="diff-options" id="diff-select">
Beginner
Intermediate
Advanced
Expert
</div>
</div>
<div class="duration">
<button onclick="myfunction02()" class="duration-settings">Duration</button>
<div class="duration-options" id="duration-select">
30 Seconds
60 Seconds
120 Seconds
Custom
</div>
</div>
<script src="script_MP.js"></script>
</body>
</html>
CSS Code:
body{background-color:grey}
.main_page{text-align: center;}
h1{font-size: 50px;}
h2{font-size: 30px; padding-bottom: 40px;}
.difficulty , .duration{
display: inline-block;
margin: 5px;
}
/* This section is for the Difficulty Button only */
.diff-settings{
padding: 20px;
position: relative;
border: none;
box-shadow: none;
background-color: green;
color:white;
font-size: 20px;
width: 130px;
}
.diff-settings:hover, .diff-settings:focus{
background-color:darkgreen;
color:white;
cursor: pointer;
}
.diff-options{
display: none;
font-size: 20px;
width: 130px;
}
.diff-options a{
background-color: green;
color: white;
display: block;
padding: 8px;
text-decoration: none;
}
.diff-options a:hover {background-color: darkgreen;}
.show {display: block;}
/* This section is for the Duration Button only */
.duration-settings{
padding: 20px;
border: none;
box-shadow: none;
background-color: green;
color:white;
font-size: 20px;
width: 130px;
}
.duration-settings:hover, .duration-settings:focus{
background-color:darkgreen;
color:white;
cursor: pointer;
}
.duration-options{
display: none;
font-size: 20px;
width: 130px;
}
.duration-options a{
background-color: green;
color: white;
display: block;
padding: 8px;
text-decoration: none;
}
.duration-options a:hover {background-color: darkgreen;}
.show {display: block;}
What should I change in order to stop both buttons from moving to the bottom when they're clicked?
Just add this ;) :
.diff-options, .duration-options {
position: absolute;
}
When you change the display of a block it was taken into account and moved the following elements. By adding an absolute position, it is no longer taken into account for the calculation of the next element.
Making the parent div of the buttons use flex fixes the problem.
.flex{
display: flex;
justify-content: center;
}
<div class="flex">
<!--Below, the word "diff" is short for "difficulty" -->
<!--So "diff-settings" means "difficulty settings" -->
<!--"diff-options" means "difficulty options" and so on -->
<div class="difficulty">
<button onclick="myfunction01()" class="diff-settings">Difficulty</button>
<div class="diff-options" id="diff-select">
Beginner
Intermediate
Advanced
Expert
</div>
</div>
<div class="duration">
<button onclick="myfunction02()" class="duration-settings">Duration</button>
<div class="duration-options" id="duration-select">
30 Seconds
60 Seconds
120 Seconds
Custom
</div>
</div>
</div>
Hey if anyone is able to assist it would be much appreciated, I have no idea how to move the following textbox to where I want it to be.
This is my HTML Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Stylesheet.css">
</head>
<body>
<img src="../Resources/MainBrowser.png" alt="SearchEngineGIF" class="custom2">
<img src="../Resources/SearchEngineGIF.gif" alt="SearchEngineGIF" class="custom1">
<input type="text" placeholder="Insert Keyword Here">
</body>
</html>
And here is the CSS behind it:
.custom1 {
display: block;
margin-left: auto;
margin-right: auto;
transform: translateY(-210px);
width: 23%;
}
.custom2 {
display: block;
margin-left: auto;
margin-right: auto;
transform: translateY(+25px);
width: 25%;
}
input[type=text]{
width:20%;
border:2px solid #000000 ;
border-radius:4px;
margin:8px 0;
outline:none;
padding:8px;
box-sizing:border-box;
transition:.3s;
font-size: 20px;
text-align: center;
}
input[type=text]:focus{
border-color:dodgerBlue;
box-shadow:0 0 8px 0 dodgerBlue;
}
input[type=text]::placeholder{
font-family: Calibri;
font-size: 20px;
font-style: italic;
text-align: center;
}
It would also be useful if anyone knew how to make it not move when zooming in and out, Setting the position to fixed doesnt help as I am moving a gif inside of the Image by transforming it up/ down y pixels
EDIT - MainBrowser.png is the whole image above "Insert Keyword Here" textbox, minus "Geoorgle" which is SearchEngineGIF.gif
Instead you can just use the form tag
<form style="width:25%;height:auto;">
<img src="yourimage.jpg" style="width:25%;">
<br>
<input type="text" style="width:20%;"><img src="searchimage.jpg" style="width:5%;">
</form>
Change the source of the images and the width according to your need.
You can also use the table tag if you want
And about the image not moving, once you fix the position, put the top and left parameters for the form in the style.
Example:
top:25%;
left:25%;
the following code applies gray box to all <divs> I would like to apply the class to specific divs shall I add some id somewhere?
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
</style>
</head>
<body>
<h2>Calculate the total width:</h2>
<img src="klematis4_big.jpg" width="350" height="263" alt="Klematis">
<div>The picture above is 350px wide. The total width of this element is also 350px.</div>
</body>
</html>
An ID (#idname), or better yet, a reusable class (.classname) would be appropriate for styling this element.
.caption {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
<h2>Calculate the total width:</h2>
<img src="http://placehold.it/350x263" width="350" height="263" alt="Klematis">
<div class="caption">The picture above is 350px wide. The total width of this element is also 350px.</div>
<!DOCTYPE html>
<html>
<head>
<style>
greyBox {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
</style>
</head>
<body>
<h2>Calculate the total width:</h2>
<img src="klematis4_big.jpg" width="350" height="263" alt="Klematis">
<div class = "greyBox" >The picture above is 350px wide. The total width of this element is also 350px.</div>
</body>
</html>
You can also try this:
CSS
.newStyle {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
HTML
<h2>Calculate the total width:</h2>
<img src="klematis4_big.jpg" width="350" height="263" alt="Klematis">
<div id="dvText">The picture above is 350px wide. The total width of this element is also 350px.</div>
JAVA SCRIPT
function addClass(el, className) {
var classes = el.className.match(/\S+/g) || [];
if (!hasClass(el, className)) {
classes.push(className);
}
el.className = classes.join(' ');
}
function hasClass(el, className) {
var re = new RegExp('(^|\\s+)' + className + '(\\s+|$)');
return re.test(el.className);
}
addClass(document.getElementById('dvText'), 'newStyle')
I am currently having problems with a website. I am trying to make the text stay in the same place when the page is either viewed on larger screens or when zooming out (zoom out and see for yourselves). I have the same problem with the buttons on the right side. Can anyone tell me how I can solve this?
http://ronnym.tk/
Please help me with this. I have no clue what to do, I tried absolute positioning, individually positioning divs with margins, nothing works. I think the parent's parameters overwrites the child parameters or something. I honestly don't know what else to try. Wasted days already.
Here is my HTML code
<!DOCTYPE html>
<html class="html">
<head>
<script type="text/javascript">
if(typeof Muse == "undefined") window.Muse = {}; window.Muse.assets = {"required":["jquery-1.8.3.min.js", "museutils.js", "jquery.musepolyfill.bgsize.js", "index.css"], "outOfDate":[]};
</script>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
<meta name="generator" content="2014.0.1.264"/>
<title>HOME</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/site_global.css?475048684"/>
<link rel="stylesheet" type="text/css" href="css/index.css?4024854745" id="pagesheet"/>
<!-- Other scripts -->
<script type="text/javascript">
document.documentElement.className += ' js';
var __adobewebfontsappname__ = "muse";
</script>
<!-- JS includes -->
<script type="text/javascript">
document.write('\x3Cscript src="' + (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//webfonts.creativecloud.com/cambo:n4:all.js" type="text/javascript">\x3C/script>');
</script>
</head>
<body>
<div class="clearfix" id="page"><!-- group -->
<div class="clearfix grpelem" id="pu203-4"><!-- column -->
<img class="colelem" id="u203-4" alt="ABOUT ME" width="171" height="41" src="images/u203-4.png"/><!-- rasterized frame -->
<div class="clearfix colelem" id="u205-24" data-ice-editable="html" data-ice-options="disableImageResize,none" data-muse-uid="U205"><!-- content -->
<p id="u205-2">My name is Ronny Minkovsky, and I'm a graphics designer and artist, currently based somewhere behind a computer screen.</p>
<p id="u205-3"> </p>
<p id="u205-5">About 6 years ago, I realized my passion for art, and began a self-taught career... for now.</p>
<p id="u205-6"> </p>
<p id="u205-8">Ever since my childhood days, I've always loved gaming, and developed a real passion for its graphics, a passion that eventually lead me into creating, and participating in the art production of several games, one of which will be released on steam shortly, by the name of CivCraft.</p>
<p id="u205-9"> </p>
<p id="u205-11">I'm majorly inspired by the Cyberpunk genre, and by authors such as Philip K. Dick, H. P. Lovecraft, Edgar Allan Poe, and Baudrillard and have been gaming since the good old days of Divine Divinity, and Ultima.</p>
<p id="u205-12"> </p>
<p id="u205-14">Even though I prefer gaming graphics, I also tend to be versatile, working on web design, and advertising as well.</p>
<p id="u205-15"> </p>
<p id="u205-17">I know my way around a number of digital art programs, mainly Photoshop, Illustrator, and Sketchbook Pro.</p>
<p id="u205-18"> </p>
<p id="u205-20">Take a moment to browse through my Projects section, where I uploaded a few works from different fields, or skim through the Artwork tab for random art I made.</p>
<p id="u205-21"> </p>
<p> </p>
</div>
</div>
<div class="clearfix grpelem" id="pu400"><!-- column -->
<a class="nonblock nontext museBGSize colelem" id="u400" href="mailto:portal-m#hotmail.com"><!-- simple frame --></a>
<a class="nonblock nontext museBGSize colelem" id="u383" href="callto://portal230762"><!-- simple frame --></a>
</div>
</div>
<div class="preload_images">
<img class="preload" src="images/mail%20button1-o.png" alt=""/>
<img class="preload" src="images/mail%20button1-m.png" alt=""/>
<img class="preload" src="images/mail%20button1-n.png" alt=""/>
<img class="preload" src="images/skype%20button-over.png" alt=""/>
<img class="preload" src="images/skype%20button-mouse%20down.png" alt=""/>
</div>
<!-- JS includes -->
<script type="text/javascript">
if (document.location.protocol != 'https:') document.write('\x3Cscript src="http://musecdn.businesscatalyst.com/scripts/4.0/jquery-1.8.3.min.js" type="text/javascript">\x3C/script>');
</script>
<script type="text/javascript">
window.jQuery || document.write('\x3Cscript src="scripts/jquery-1.8.3.min.js" type="text/javascript">\x3C/script>');
</script>
<script src="scripts/museutils.js?353204447" type="text/javascript"></script>
<script src="scripts/jquery.musepolyfill.bgsize.js?323834883" type="text/javascript"></script>
<!-- Other scripts -->
<script type="text/javascript">
$(document).ready(function() { try {
(function(){var a={},b=function(a){if(a.match(/^rgb/))return a=a.replace(/\s+/g,"").match(/([\d\,]+)/gi)[0].split(","),(parseInt(a[0])<<16)+(parseInt(a[1])<<8)+parseInt(a[2]);if(a.match(/^\#/))return parseInt(a.substr(1),16);return 0};(function(){$('link[type="text/css"]').each(function(){var b=($(this).attr("href")||"").match(/\/?css\/([\w\-]+\.css)\?(\d+)/);b&&b[1]&&b[2]&&(a[b[1]]=b[2])})})();(function(){$("body").append('<div class="version" style="display:none; width:1px; height:1px;"></div>');
for(var c=$(".version"),d=0;d<Muse.assets.required.length;){var f=Muse.assets.required[d],g=f.match(/([\w\-\.]+)\.(\w+)$/),l=g&&g[1]?g[1]:null,g=g&&g[2]?g[2]:null;switch(g.toLowerCase()){case "css":l=l.replace(/\W/gi,"_").replace(/^([^a-z])/gi,"_$1");c.addClass(l);var g=b(c.css("color")),h=b(c.css("background-color"));g!=0||h!=0?(Muse.assets.required.splice(d,1),"undefined"!=typeof a[f]&&(g!=a[f]>>>24||h!=(a[f]&16777215))&&Muse.assets.outOfDate.push(f)):d++;c.removeClass(l);break;case "js":l.match(/^jquery-[\d\.]+/gi)&&
typeof $!="undefined"?Muse.assets.required.splice(d,1):d++;break;default:throw Error("Unsupported file type: "+g);}}c.remove();(Muse.assets.outOfDate.length||Muse.assets.required.length)&&alert("Some files on the server may be missing or incorrect. Clear browser cache and try again. If the problem persists please contact website author.")})()})();/* body */
Muse.Utils.transformMarkupToFixBrowserProblemsPreInit();/* body */
Muse.Utils.prepHyperlinks(true);/* body */
Muse.Utils.showWidgetsWhenReady();/* body */
Muse.Utils.transformMarkupToFixBrowserProblems();/* body */
} catch(e) { if (e && 'function' == typeof e.notify) e.notify(); else Muse.Assert.fail('Error calling selector function:' + e); }});
</script>
</body>
</html>
And here is the CSS code
.version.index /* version checker */
{
color: #0000EF;
background-color: #E668D9;
}
.html
{
background-color: #000000;
}
#page
{
z-index: 1;
max-width:100%;
height: auto;
border-style: none;
border-color: transparent;
padding-bottom: 212px;
margin-left: auto;
margin-right: auto;
background: transparent url("../images/home%20back%20(smaller).jpg") no-repeat center center;
}
#pu203-4
{
width: 0.01px;
margin-right: -10000px;
margin-top: 478px;
margin-left: 138px;
position: relative;
}
#u203-4
{
z-index: 2;
display: block;
vertical-align: top;
margin-left: 138px;
position: relative;
}
#u205-24
{
z-index: 6;
min-width: 465px;
height: auto;
margin-top: 29px;
margin-left: 0px;
margin-right: 0px;
position: relative;
}
#u205-2,#u205-3,#u205-5,#u205-6,#u205-8,#u205-9,#u205-11,#u205-12,#u205-14,#u205-15,#u205-17,#u205-18,#u205-20,#u205-21
{
width:100%;
font-size: 11px;
line-height: 13px;
color: #86A4B2;
font-family: cambo, serif;
font-weight: 400;
}
#pu400
{
width: 0.01px;
margin-right: -10000px;
margin-top: 570px;
margin-left: 892px;
}
#u400
{
z-index: 31;
width: 354px;
height: 120px;
position: relative;
background: transparent url("../images/mail%20button1-a.png") no-repeat left top;
background-size: contain;
}
#u400:hover
{
margin: 0px;
background: transparent url("../images/mail%20button1-o.png") no-repeat left top;
background-size: contain;
}
#u400:active
{
margin: 0px;
background: transparent url("../images/mail%20button1-m.png") no-repeat left top;
background-size: contain;
}
#u400.MuseLinkActive
{
margin: 0px;
background: transparent url("../images/mail%20button1-n.png") no-repeat left top;
background-size: contain;
}
#u383
{
z-index: 30;
width: 354px;
height: 120px;
top: -8px;
margin-bottom: -8px;
position: relative;
background: transparent url("../images/skype%20button-active%20(normal).png") no-repeat left top;
background-size: contain;
}
#u383:hover
{
margin: 0px 0px -8px;
background: transparent url("../images/skype%20button-over.png") no-repeat left top;
background-size: contain;
}
#u383:active
{
margin: 0px 0px -8px;
background: transparent url("../images/skype%20button-mouse%20down.png") no-repeat left top;
background-size: contain;
}
body
{
position: relative;
min-width: 1280px;
max-height:100%;
}
Try using a wrapper for your page as following:
<div class="wrap"> all your page content </div>
using this CSS:
.wrap {width=800px; margin: 0px auto;}
This will automatically horizontally center the DIV wrapper, as well as making sure that all the content within always stays at the same place, relative to the wrapper.
You can still expand the page vertically by adding more content or adding a height value.
You might want to change the Width if 800px is too much or too little, but make sure it's a constant (px) value.
I'd like to add a png frame over a kwicks image slider, but when I do, I lose the interactivity.
How can I add a png frame over an element without losing the interactivity of the element below?
You can see the example here: www.jujumamablog.com/jujumama/dev.html
Below is the code for the dev page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<title>Kwicks Examples: Example 1</title>
<script src="http://jmar777.googlecode.com/svn/trunk/js/jquery-1.2.6.js" type="text/javascript"></script>
<script src="http://jmar777.googlecode.com/svn/trunk/js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://kwicks.googlecode.com/svn/branches/v1.5.1/Kwicks/jquery.kwicks-1.5.1.pack.js" type="text/javascript"></script>
<style type="text/css">
/* defaults for all examples */
.kwicks {
list-style: none;
position: relative;
margin: 5px 0;
padding: 0;
}
.kwicks li{
display: block;
overflow: hidden;
padding: 0;
cursor: pointer;
}
/* example 1 */
#example1 .kwicks li{
float: left;
width: 96px;
height: 200px;
margin-right: 2px;
}
#example1 #kwick1 {
background-color: #53b388;
}
#example1 #kwick2 {
background-color: #5a69a9;
}
#example1 #kwick3 {
background-color: #c26468;
}
#example1 #kwick4 {
background-color: #bf7cc7;
}
#example1 #kwick5 {
background-color: #bf7cc7;
margin-right: none;
}
#sliderFrame{
background: transparent url('sliderFrame.png') no-repeat scroll 0 0;
display: block;
height: 206px;
position: absolute;
// top: 150px;
width: 504px;
z-index: 99;
margin-top: -4px;
}
</style>
<script type="text/javascript">
$().ready(function() {
$('.kwicks').kwicks({
max : 205,
spacing : 5
});
});
</script>
</head>
<body>
<div id="example1">
<div id="sliderFrame"></div> <!-- This blocks ineteractivity -->
<ul class="kwicks">
<li id="kwick1"></li>
<li id="kwick2"></li>
<li id="kwick3"></li>
<li id="kwick4"></li>
<li id="kwick5"></li>
</ul>
</div>
<div style="clear:both;"></div>
<div id="example1">
<ul class="kwicks">
<li id="kwick1"></li>
<li id="kwick2"></li>
<li id="kwick3"></li>
<li id="kwick4"></li>
<li id="kwick5"></li>
</ul>
</div>
<div style="clear:both;"></div>
</body>
</html>
Thanks in advance
Unfortunately using z-index to 'layer' elements will cause the below elements to become non-interactive, but they are still obviously visible.
Therefore, there's two options here:
JavaScript - much like the coloured boxes below (layer 1), place a further element (layer 3) over the 'rounded corners' image (layer 2) but making the background-color: transparent for those interactable boxes, then referencing the JavaScript to move the 1st layer boxes as well as the 3rd layer boxes.
CSS - slice the rounded corner image to be used within those interactive boxes, and use them as background images. This would be a fair amount of work, trial and error to get it right but would mean no extra javascript or messing around with z-index.
Hope that helps, and doesn't confuse matters further :)
You can't place one element over another and retain the lower-level's interactivity. At least, not without using Javascript; and I can't think of a plugin or script that achieves what you want.
Could you use the image as some form of background for the element for which you want to retain the functionality?