var kidX = "";
if(kidX == ""){
kidX = 100;
}
document.addEventListener('keydown', function(event) {
if(event.keyCode == 37) {
kidX--;
document.getElementById("kid").style.transform = "translateX(kidX + "px")";
console.log(document.getElementById("kid").style.transform);
}
else if(event.keyCode == 39) {
kidX++;
document.getElementById("kid").style.transform = "translateX(kidX + "px")";
// console.log(kidX + "px");
console.log(document.getElementById("kid").style.transform);
}
});
<!DOCTYPE html>
<html>
<head>
</head>
<style>
img{
height = 100px;
}
.guy{
height = 100px;
}
div{
height = 100px;
}
</style>
<body id="body">
<p >
<div id="kid">
<img class = "guy" src="kid.png" alt="kid!" height = "100px" />
<p>
hello
</p>
</div>
<p>
</body></html>
Hello. I want to make the element kid move with the arrow keys, but I think I am formatting it wrong. Can someone tell me how to format it correctly, thanks. If there is a better way to make the element kid move left and right please tell me. I am new to JavaScript and html so any help is appreciated .
Related
Hi there fellow programmers!
I Want to be able to type in to the boxes how much px i want my div to move. But it won't move and I cant see whats wrong with my code. Can someone with fresh eyes spot the problem?
Any help is much appreciated!
Here's the code so far:
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<title> javascript</title>
<style>
#changeme {
background-color: lightblue;
position: absolute;
}
</style>
<script>
var $Rob = {};
$Rob.moveUpp = 0;
$Rob.moveLeft = 0;
$Rob.elementid = "";
$Rob.move = function(elementid, movex, movey)
{
$Rob.moveUpp = movey;
$Rob.moveLeft = movex;
$Rob.elementid = elementid;
$Rob.movesoft();
}
$Rob.movesoft = function() {
var elem = document.getElementById($Rob.elementid);
if ($Rob.moveUpp > 0) {
elem.style.top = (parseInt(elem.style.top) + 1) +
"px";
$Rob.moveUpp--;
} else if ($Rob.moveUpp < 0) {
elem.style.top = (parseInt(elem.style.top) - 1) +
"px";
$Rob.moveUpp++;
}
if ($Rob.moveUpp != 0) {
setTimeout($Rob.movesoft, 100);
}
}
</script>
</head>
<body>
<h1> Dynamic changes </h1>
<form>
<p>Move right:</p> <input value="0" type="text" id="moveRight" />
<p>Move down: </p> <input value="0" type="text" id="moveDown" />
<input type="button" value="Move" onClick="$Rob.move(document.getElementById('changeme'),parseInt(document.getElementById('moveRight').value),parseInt(document.getElementById('moveDown').value));" />
</form>
<div id="changeme" style="top: 100px;left: 100px;"> Hello </div>
</body>
</html>
All the best
I love Stackoverflow and its members!
cheers
// Mcgayjver
You're doing:
$Rob.move(document.getElementById('changeme'), x, y).
When you should just be doing:
$Rob.move('changeme, x, y)
Because $Rob.move expects an elementID string as a first parameter, not an actual HTMLElement.
here i want to apply some css to those divs are not visible because if its height. So i want to apply some css dynamically which are not showing here(sanjana, giri, santhosh divs)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div style="height:100px;overflow:hidden;background:red;border:2px dashed #000;">
<div>Ganesh</div>
<div>Om shankar</div>
<div>Sai</div>
<div>venkat</div>
<div>Sireesha</div>
<div>Sanjana</div>
<div>Giri</div>
<div>Santhosh</div>
</div>
</body>
</html>
If it's inline defined, you can use this:
[style*="overflow:hidden;"],[style*="overflow: hidden;"]
What it does is looking for ANY type of tag,
that has a style attribute set
and that style attribute contains: overflow:hidden; or overflow: hidden;
then applies relevant styles.
var value = 'initial';
var old = 'hidden';
function toggle() {
$('div[style]').css({'overflow':value});
var tmp = value;
value = old;
old = tmp;
}
[style*="overflow:hidden;"],[style*="overflow: hidden;"] {
color:white;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<input type="button" onclick="toggle()" value="toggle values">
<div style="height:100px;overflow:hidden;background:red;border:2px dashed #000;">
<div>Ganesh</div>
<div>Om shankar</div>
<div>Sai</div>
<div>venkat</div>
<div>Sireesha</div>
<div>Sanjana</div>
<div>Giri</div>
<div>Santhosh</div>
</div>
</body>
</html>
Now if you only wish to do something to the NOT visible divs, you need to use javascript, and you can use Bounding boxes to test if something is visible:
Also see How to check if an element is overlapping other elements?
$('[style*="overflow:hidden"],[style*="overflow: hidden;"]').children().each(function(index, element) {
var $el = $(element);
var $parent = $el.parent();
// get the bounding boxes.
var rect1 = $parent.get(0).getBoundingClientRect();
var rect2 = element.getBoundingClientRect();
// check for overlap(if it's visible)
if(!(rect1.right < rect2.left ||
rect1.left > rect2.right ||
rect1.bottom < rect2.top ||
rect1.top > rect2.bottom)) {
$el.removeClass('hidden');
}
else {
// it's hidden!
console.log('found hidden div '+$el.text());
$el.addClass("hidden");
}
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div style="height:100px;overflow:hidden;background:red;border:2px dashed #000;">
<div>Ganesh</div>
<div>Om shankar</div>
<div>Sai</div>
<div>venkat</div>
<div>Sireesha</div>
<div>Sanjana</div>
<div>Giri</div>
<div>Santhosh</div>
</div>
</body>
</html>
You can check the height from the wrapper via javascript and then add a class to all the elements which are not fully visible inside the wrapper. Added a class wrap to the wrapper to make it more obvious.
var wrap = document.querySelector('.wrap');
var wrapHeight = wrap.offsetHeight; // just in case it's not known and set by CSS
wrap.querySelectorAll('div').forEach(function(element){
var elementBottomPosition = element.offsetTop + element.offsetHeight;
if(elementBottomPosition >= wrapHeight) {
element.classList.add('some-class');
}
});
.wrap {
height:100px;
overflow:hidden;
background:red;
border:2px dashed #000;
}
.some-class {
color: lime;
}
<div class="wrap">
<div>Ganesh</div>
<div>Om shankar</div>
<div>Sai</div>
<div>venkat</div>
<div>Sireesha</div>
<div>Sanjana</div>
<div>Giri</div>
<div>Santhosh</div>
</div>
I wrote a code for progressbar using jquery it works as expect but if I add second element all element works same that is why I guess I have to make it dynamic but I have no idea to do how can I make it as dynamic ?
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div class="trustyou-progressbar pull-right">
<p class="trustyou-puan">100/72 Puan</p>
<div class="progressFill">
<span class="ani-puan" ani-puan="72"></span>
</div>
</div>
<div class="trustyou-progressbar pull-right">
<p class="trustyou-puan">100/39 Puan</p>
<div class="progressFill">
<span class="ani-puan" ani-puan="39"></span>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</body>
</html>
CSS
.trustyou-progressbar{
width:100px;
}
.trustyou-puan{
font-size: 13px;
color:#494949;
font-weight: 500;
}
.progressFill{
width:100%;
height:6px;
background:#222222;
}
.ani-puan{
display:block;
height:100%;
}
JQUERY
var getprogressPuan = $('.ani-puan').attr('ani-puan');
$(".ani-puan").css("width",getprogressPuan+"%");
if((getprogressPuan>0) && (getprogressPuan<=40)){
$(".ani-puan").css("background","#ca2424");
}else if((getprogressPuan>=40) && (getprogressPuan<75)){
$(".ani-puan").css("background","#d6d824");
}else if((getprogressPuan>=75)){
$(".ani-puan").css("background","#9ad204");
}
click to see demo
Use an iterator to apply your function to all elements:
$('.ani-puan').each(function() {
var getprogressPuan = $(this).attr('ani-puan');
$(this).css("width", getprogressPuan + "%");
if ((getprogressPuan > 0) && (getprogressPuan <= 40)) {
$(this).css("background", "#ca2424");
} else if ((getprogressPuan >= 40) && (getprogressPuan < 75)) {
$(this).css("background", "#d6d824");
} else if ((getprogressPuan >= 75)) {
$(this).css("background", "#9ad204");
}
});
Here is the sample page
This code just changes all elements with ani-puan class.
You need to create a jQuery component (a widget) to work with each progressbar separately.
Start by reading How to Create a Basic Plugin and then you can study jQuery UI's progressbar source code to see how they do it.
If you don't mind, you can download the jQuery UI progressbar (you don't need whole jQuery UI) and just change what you need.
Also note that HTML5 already contain component progress that already does what you need (including changing the colors).
You can also create Progress bar easily like this:
var i = 0;
var clear = setInterval(function(){
i++;
$('.progressFill').text(i+'0%');
$('.progressFill').width(i+'0%');
if(i==10)
{
clearInterval(clear);
}
},1000);
.trustyou-progressbar{
width: 100px;
background-color: #000000;
}
.trustyou-puan{
font-size: 13px;
color:#494949;
font-weight: 500;
}
.progressFill{
width: 0%;
height: 6px;
background: #15D318;
}
.ani-puan{
display:block;
height:100%;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div class="trustyou-progressbar pull-right">
<div class="progressFill">
<span class="ani-puan" ani-puan="72"></span>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</body>
</html>
here is the codepen link:http://codepen.io/kofijita/pen/WGyzQY
the $(".ani-puan") will get two elements , you should use iterator to differ them.
var $puan = $('.ani-puan');
for (var i = 0, len = $puan.length; i < len; i++) {
var $cur = $('.ani-puan').eq(i);
var getprogressPuan = $cur.attr('ani-puan');
$cur.css("width", getprogressPuan + "%");
if ((getprogressPuan > 0) && (getprogressPuan <= 40)) {
$cur.css("background", "#ca2424");
} else if ((getprogressPuan >= 40) && (getprogressPuan < 75)) {
$cur.css("background", "#d6d824");
} else if ((getprogressPuan >= 75)) {
$cur.css("background", "#9ad204");
}
}
I need your help,
How can I re-minimize (set the textarea's class back to normal) when I reclick on the button "expand"
I can get it to work, but just not the other way around.
Here is my HTML + Javascript
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.normal {
width: 400px;
height: 25px;
}
.expand {
height: 400px;
width: 400px;
}
</style>
<script type="text/javascript">
function expand() {
document.getElementById('subject_area').className = "expand"
document.getElementById('expand').value = "minimize"
}
</script>
</head>
<body>
<input class="normal" id="subject_area" type="textarea" >
<input id="expand" type="button" value="expand" onclick="expand()">
</body>
</html>
You can do:
var subject = document.getElementById('subject_area');
var btnExpand = document.getElementById('expand');
subject.className == "expand" ? subject.className = "normal" : subject.className = "expand";
btnExpand.value == "minimize" ? btnExpand.value = "expand" : btnExpand.value = "minimize";
var subject = document.getElementById('subject_area');
var button = document.getElementById('expand');
function expand() {
if (subject.className === 'normal') {
subject.className = 'expand';
button.value = 'minimize';
} else {
subject.className = 'normal';
button.value = 'expand';
}
}
Fiddle here: http://jsfiddle.net/ToddT/aPqgh/
I have created a basic slider that runs through images every 5 seconds while using javascript. My slider works just fine, but I'm not wanting to use it as an image slider anymore. I'm wanting to create a div with some more html design features and post that within my slider instead of my images. Going by this code below, what would I have to change and add to make it work?
<!doctype html>
<html>
<head>
<title>Ad Slider</title>
<style>
#slider
{
width: 800px;
height: 200px;
}
#sliderImages
{
width: 100%;
height: 100%;
border: 1px solid #06c;
border-radius: 10px;
}
</style>
<script type = "text/javascript">
var image1 = new Image();
image1.src = "sky.jpg";
var image2 = new Image();
image2.src = "chatImage.jpg";
var image3 = new Image();
image3.src = "orange.jpg";
</script>
</head>
<body>
<div id = "slider">
<img id = "sliderImages" src = "sky.jpg" name = "slide" />
<script type = "text/javascript">
var sliderAd = 1
function slideAds()
{
if (!document.images)
{
return;
}
document.images.slide.src = eval("image"+sliderAd+".src")
if (sliderAd < 3)
{
sliderAd++;
}
else
{
sliderAd = 1;
}
setTimeout("slideAds()",5000)
}
slideAds()
</script>
</div>
</body>
</html>
Now instead of adding those images, how can I add this type of content but working the same way like the images were?
<div>
<p>Some Content</p>
</div>
There are plenty of ways to write what you're looking for. Here's an augmented version of your code... You can toss whatever HTML you want into the innerHTML.
In the future, you're better of using Google to read up on the basics of Javascript...
<div id = "container">
</div>
<script type = "text/javascript">
MAXSLIDES = 2
slideText = 1
function slideAds() {
container = document.getElementById("container")
if(slideText == 1) {
container.innerHTML = "test1"
} else if (slideText == 2) {
container.innerHTML = "test2"
}
slideText += 1
if(slideText > MAXSLIDES) { slideText = 1 }
setTimeout("slideAds()",5000);
}
slideAds()
</script>
One of the easiest way is just to create an array of html you need, and than iterate through it inserting in each string as html in your holder div: here is an example from your question the only thing I used jQuery it is much easier that way.
<!doctype html>
<html>
<head>
<title>Ad Slider</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<style>
#slider
{
width: 800px;
height: 200px;
}
#sliderImages
{
width: 100%;
height: 100%;
border: 1px solid #06c;
border-radius: 10px;
}
</style>
<script type = "text/javascript">
var arrayOfDiv = new Array();
arrayOfDiv[0] = "<div style='background-color:#FF0'>this is first div!</div>";
arrayOfDiv[1] = "<div style='background-color:#0ff'>this is second div!</div>";
arrayOfDiv[2] = "<div style='background-color:#f0f'>this is third div!</div>";
var sliderAd = 0;
function slideAds()
{
$("#sliderImages").html(arrayOfDiv[sliderAd]);
if (sliderAd < arrayOfDiv.length-1)
{
sliderAd++;
}
else
{
sliderAd = 0;
}
setTimeout("slideAds()",5000);
}
$(function(){
slideAds();
});
</script>
</head>
<body>
<div id = "slider">
<div id = "sliderImages" ></div>
</div>
</body>
</html>