I've been trying to solve this problem: I want to pass a function parameter to select a div so I can change the style.top position with an interval.
var yPos = 0;
var divOne = document.getElementById("div1");
var divTwo = document.getElementById("div2");
var divThree = document.getElementById("div3");
.....
function jump(which){
yPos++;
(which).style.top = yPos + "px";
var jumpTimeOut = setTimeout(jump,100,which);
if(yPos > 500){
clearTimeout(jumpTimeOut);
}
}
jump("divOne");
I could use a switch statement for each div variable, but there is a lot of divs in the program, so I was wondering if there is a way to concatenate the div name with a function parameter. Needles to say I'm getting can't change properties style of NULL with the current code.
Any help is appreciated
---->> I found a solution, I passed the div name string "div1" as parameter inside the function, so I can get the div again with a inside variable:
var divOne = document.getElementById("div1");
var divTwo = document.getElementById("div2");
function jump(which){
var jumpingDiv = document.getElementById(which);
yPos++;
jumpingDiv.style.top = yPos + "px";
var jumpTimeOut = setTimeout(jump,100,which);
if(yPos > 500){
clearTimeout(jumpTimeOut);
}
}
jump("div1");
Odd solution I think, but its working so.. hehe.
Related
Hi currently I'm making some RPG game. I want to move my character with arrows. Which is working right now. But I want to change image when I clicking let's say the right arrow. Right now when I click right arrow with this code:
function rightArrowPressed() {
var element = document.getElementById("image1").src = "/img/run_1.png";
element = document.getElementById("image1");
element.style.left = parseInt(element.style.left) + 5 + 'px';
}
The image change's to run_1.png ant it stays like that. Than just the image slides in one pose. How to change the image again when I click right arrow ?
HTML
<img id="image1" src="{{Auth::user()->char_image}}" style="position:absolute;left:0; top:0;height: 45px; image-rendering: -webkit-optimize-contrast;">
You can use a counter variable:
var counter = 0;
function rightArrowPressed() {
counter = (counter === 4) ? 1 : counter+1;
var image = "/img/run_"+counter+".png";
var element = document.getElementById("image1");
element.src = image;
var left = parseInt(element.style.left)+5;
element.style.left = left + "px";
}
And this would make it so that every time you right click, a different image is used.
You can use an arry imeges sources to make a scene
function rightArrowPressed() {
var slides=['/img/run_1.png','/img/run_2.png','/img/run_1.png'];
slides.forEach(slide => {
setTimeout(function(){
var element = document.getElementById("image1").src = slide;
element = document.getElementById("image1");
element.style.left = parseInt(element.style.left) + 5 + 'px';
}, 500);//add a time in screen
});
}
I have this function that creates a "frame" or something like a frame and i want to delete it.
Here is the code for the create:
function disableIframe()
{
var iframe = document.getElementsByTagName('iframe')[0];
d = document.createElement('iframe');
var width = iframe.offsetWidth;
d.style.width = width + 'px';
var height = iframe.offsetHeight ;
d.style.height = height + 'px';
var top = iframe.offsetTop;
d.style.top = top + 'px';
var left = iframe.offsetLeft - 140;
d.style.left = left + 'px';
d.style.position = 'absolute';
// d.onclick="event.cancelBubble = true;"
d.style.opacity = '100';
d.style.filter = 'alpha(opacity=0)';
d.style.display="block";
d.style.background = 'black';
d.style.zIndex = '100';
d.id = 'd';
d.tagName = 'd';
iframe.offsetParent.appendChild(d);
}
I tried to delete the frame with this function:
document.getElementById('d').removeChild();
but it didn't work.
how i can find it and delete it?
It's suppose to block a web-frame until the time is over so that no one can click on the frame. So it creates a frame over the web-frame and I have a function to delete this frame because after sometime I need to be able click again on the original frame.
try this( A.removeChild(B).A is parent node of B, B is the node to delete)
var node = document.getElementById("d");
if (node.parentNode) {
node.parentNode.removeChild(node);
}
try this
var ele = document.getElementById("d");
ele.outerHTML = "";
delete ele;
or
var ele = document.getElementById('d');
ele.parentNode.removeChild(ele);
I'm trying to write a function to vertically center elements if they have a class called "vcenter(#)". For example, vcenter1 vcenter2. It's supposed to take the element's parent's innerheight and subtract the element's innerheight then divide by 2. The value then is applied to the css as the margin-top. It doesn't work though. Please help!
$(document).ready(function(){
for (i=1; i<3; i++){
var childID = $(".vcenter" + i);
var parent = childID.parent().innerHeight();
var child = childID.innerHeight();
var marginTop = (parent - child)/2 + 'px';
$(childID).css({"margin-top", marginTop})
}
});
How about this...
http://jsfiddle.net/mVn9S/
$(document).ready(function () {
$('.vcenter').each(function () {
var parent = $(this).parent().innerHeight();
var child = $(this).innerHeight();
$(this).css({
'margin-top': ((parent - child) / 2) + 'px'
});
});
});
Have you considered using CSS3 Flexbox with a polyfill for old versions of IE? Might be less work.
Change your code to look like this:
$(document).ready(function(){
for (i=1; i<3; i++){
var childElement = $(".vcenter" + i);
var parent = childElement.parent().innerHeight();
var child = childElement.innerHeight();
var marginTop = (parent - child) / 2;
childElement.css({"margin-top": marginTop});
}
});
Notice use of ; at the end of lines - it's a good habit even in JS.
I don't know how your HTML looks but probably this could be easily generalized for all elements with .vcenter class:
$(document).ready(function(){
$('.vcenter').each(function() {
var childElement = $(this);
var parent = childElement.parent().innerHeight();
var child = childElement.innerHeight();
var marginTop = (parent - child) / 2;
childElement.css({"margin-top": marginTop});
});
});
I have the following code and it seems like the .style does not recognize my variable wid! what is wrong with it?
var wid = document.getElementById("bd").offsetWidth/2;
obj = document.getElementById('div1');
obj.style.left = wid.toString();
'bd' is the id of my body and 'div1' the id of the div i want to move.
If I just use the following, it works fine:
obj.style.left = '10px';
You don't need to use toString, just append px to the number :
var wid = document.getElementById("bd").offsetWidth/2;
obj = document.getElementById('div1');
obj.style.left = wid + 'px';
ok... I just changed my code from:
obj.style.left = wid.toString();
to:
object.style.left = wid.toString()+'px';
and it worked fine
I have a little bit of Javascript that almost works correctly. Here's the code:
function toggle(curlink) {
curlink.style.backgroundColor = curlink.style.backgroundColor == "yellow" ? "transparent" : "yellow";
var maindiv = document.getElementById("grid");
var links = maindiv.getElementsByTagName("a");
var list = "";
for (var i = 0; i < links.length; ++i) {
var link = links[i];
if (link.style.backgroundColor == "yellow") {
list += ("," + parseInt(link.style.left, 10) + "-" + parseInt(link.style.top, 10));
}
}
document.theForm.theList.value = list.substring(1);
return false;
};
window.onload = function() {
var links = document.getElementById("grid").getElementsByTagName("a");
for (var i = 0; i < links.length; ++i) {
links[i].onclick = function() { return toggle(this); }
}
};
The issue is with line #9; it only works when I specify values for the top and left style property of every link in the array. How do I get the top and left style property values (or X and Y coordinates) of each link in the array with Javascript when those values aren't given?
Also, what would the code above look like in jquery? Not that it's needed - I just want to reduce the code a little and dabble in the jquery framework (I'm a Javascript newbie).
Thanks in advance,
Dude-Dastic
link.offsetLeft and link.offsetTop. More about finding position here. They'll be positions relative to the offsetParent, but the link shows a way to get position relative to the document.
offsetParent will evaluate to the body if the parent elements are positioned statically or there's no table in the parent hierarchy. If you want a position other than body then update the parent of the links to have a non-static position, perhaps relative
I'm not familiar with JQuery so I can't help there
The jQuery might look something like this. Untested.
$(function(){
// Get all <a> descendents of #grid
var $anchors = $('#grid a');
// Bind a click handler to the anchors.
$anchors.click(function(){
var $clickedAnchor = $(this);
var coordinates = [];
// Set the background color of the anchor.
$clickedAnchor.css('background-color', $clickedAnchor.css('background-color') == 'yellow' ? 'transparent' : 'yellow');
// Loop through each anchor.
$anchors.each(function(){
var $anchor = $(this);
if ($anchor.css('background-color') == 'yellow') {
var offset = $anchor.offset();
coordinates.push(offset.left + '-' + offset.top);
// Or maybe..
// var parentOffset = $('#grid').offset();
// coordinates.push((offset.left - parentOffset.left) + '-' + (offset.top - parentOffset.top));
}
});
$('#theList').val(coordinates.join(','));
return false;
});
});