Develop Reference

How we can move CSS object from Right to Left using javascript?

Hi, In javascript we have option of finding offSetRight position of Element and can move it towards Left to Right side using setInterval method but i like to bring that object from right to left and i did not find any javascript method which i can use Here in my code , if you guys can take a look it would be great, also i like to mention i am new to Js so i hope people will go easy on me.
P.s - CSS and Jquery not allowed for animation.
var e = document.getElementById("aDiv");
var s = 1;
function myInterval() {
var eLeftPos = e.offsetLeft;
//console.log(e.offsetLeft);
e.style.left = (eLeftPos + s) + 'px';
//console.log(e.style.left);
var leftPos = (eLeftPos + s) >= 300
if (leftPos) {
function myInterval1() {
var eTopPos = e.offsetTop;
//console.log(e.offsetLeft);
e.style.top = (eTopPos + s) + 'px';
//console.log(e.style.top);
if ((eTopPos + s) >= 100){
clearInterval(internal1)
}
}
var internal1 = setInterval(myInterval1, 100);
}
if ((eLeftPos + s) >= 300){
clearInterval(internal)
}
}
var internal = setInterval(myInterval, 100);

Try Using CSS methods instead of Javascript. Try this:
CSS Animation from Left to Right
or this: How to animate sliding-in text form left to right

Javascript remove image on click

var b = 1;
for(var i= 0; i < 5; i++){
fisk(b);
}
function getRandomPosition(element) {
var x = document.body.offsetHeight-element.clientHeight;
var y = document.body.offsetWidth-element.clientWidth;
var randomX = Math.floor(Math.random() * x);
var randomY = Math.floor(Math.random() * y);
return [randomX,randomY];
}
function fisk(skala) {
var img = document.createElement('img');
img.setAttribute("style", "position:fixed;");
img.setAttribute("src", "http://i.imgur.com/K9egEbW.jpg");
document.body.appendChild(img);
var xy = getRandomPosition(img);
img.style.top = xy[0] + 'px';
img.style.left = xy[1] + 'px';
}
With this code above i have made a tiny game where i am supposed to click on some fished that spawns with this code and when you click them all you win. But i'm having trouble finding out how to make the images disappear when i click them. Here is a jsbin link that shows all i've done so far so it's easier to understand. https://jsbin.com/josamuxoce/edit?html,css,js Anybody have a clue on how to make the fishes that spawn disappear when i click on them with the fishing rod?
Thanks

Add $(img).click(function(){ $(this).remove();}); to function fisk(skala);
But. img will never get click becaurse all clicks will be handled by #fiskespo.
Use fiskespo image as cursor image instead of extended img object (Using external images for CSS custom cursors). Should work;

function is not working properly

I have a problem with my functions for when a enemy shoots a laser. I have done so much debugging on this, i just cannot figure out why it is not working.
When i have my code like this it will shoot to the top of my playArea but not to the bottom (boundary is spelt wrong because i done it from the beginning)
for (var i = 0; i < enemylasers.length; i++){
if(parseInt(enemylasers[i][0].style.top) > playArea.topBoundry){
enemylasers[i][1] -= laserSpeed;
enemylasers[i][0].style.top = enemylasers[i][1] + 'px';
}else{
playArea.removeChild(enemylasers[i][0]);
enemylasers.splice(i,1);
}
}
When i change some of the code around to what i think might be right, it isnt and just does not make the lasers shoot anywhere. here is what i changed it to.
for (var i = 0; i < enemylasers.length; i++){
if(parseInt(enemylasers[i][0].style.top) > playArea.bottomBoundry){
enemylasers[i][1] += laserSpeed;
enemylasers[i][0].style.top = enemylasers[i][1] + 'px';
}else{
playArea.removeChild(enemylasers[i][0]);
enemylasers.splice(i,1);
}
}
This is what creates my enemies laser
function createenemylaser(){
if(enemylasers.length < enemymaxlasers){
var laserpush = Math.floor(Math.random()*enemies.length);
var laser = enemylaser();
laser.classList.add('enemylaser');
laser.style.top = enemies[laserpush][1] + 'px';
laser.style.left = parseInt(enemies[laserpush][0].offsetLeft) +'px';
playArea.appendChild(laser);
enemylasers.push([laser, enemies[laserpush][1]]);
}
}
setInterval(createenemylaser, 2000);
And this is my enemies lasers array
enemylasers=[],
enemylaserspeed = 5,
enemymaxlasers= 8,
And this is what creates the div for my enemy laser
function enemylaser(){
return document.createElement('div');
}
I hope someone can help, i am not that experienced in javascript but i know quiet abit.

Since #Chips_100 suggested I should post my solution from the comments section here, here it is:
You needed to change parseInt(enemylasers[i][0].style.top) > playArea.bottomBoundry to parseInt(enemylasers[i][0].style.top) < playArea.bottomBoundry as you have reversed the direction your lasers are travelling in.

IE7-8 ignoring selectively ignoring jquery image .load() and/or contents of .load function

I'm writing a rather complex AJAX driven menu with multiple levels that animate around allowing a user to navigate a complicated tree structure at some point I had to add a function that auto centers (vert and horz) the images associated with each item on the menu tree. In order to measure the images and position them accordingly I must first write them to a hidden div ("#tempHolder") once they .load() I can then get their dimensions, calculate my offsets and then write the images to the DOM in the appropriate place.
This all works A Okay in the standards compliant browsers but IE7-8 seem to only process the .load() command when they feel like it. (homepage the menu loads okay, first visit to a sub-page breaks the menu, refreshing said page fixes it again...etc.). I restructured my function to make the .load() declaration early because of the advice I read here (http://blog.stchur.com/2008/02/26/ie-quirk-with-onload-event-for-img-elements/) but that doesn't seem to have worked. I also added e.preventDefault because of a stackOverflow thread that said this might prevent IE from caching my load statements.
Here is the function causing the issues:
if (this.imagePath != "") {
runImage = function (imagePath, $itemEle) {
var $itemEleA = $itemEle.find('a');
var image = new Image();
//$thisImage = $(image);
$(image).load(function (e) {
//alert('image loaded')
$(image).evenIfHidden(function (element) {
//alert('even if hidden');
////////////console.log($thisImage);
var elementWidth = element.width();
var elementHeight = element.height();
this.imageHeight = elementHeight;
this.imageWidth = elementWidth;
//alert('widthoffset = ' + widthOffset + 'imagewidth = ' + imageWidth + 'this.imageWidth = ' + this.imageWidth + 'elementWidth = ' + elementWidth);
var imagePaddingWidth = 230 - imageWidth;
var widthOffset = imagePaddingWidth / 2;
widthOffset = widthOffset + "px";
element.css("left", widthOffset);
var imagePaddingHeight = 112 - imageHeight;
if (imagePaddingHeight < 0) {
var heightOffset = imagePaddingHeight;
heightOffset = heightOffset + "px";
element.css("top", heightOffset);
}
if (imagePaddingHeight > 0) {
var heightOffset = imagePaddingHeight - 18;
heightOffset = heightOffset + "px";
element.css("top", heightOffset);
}
});
$(this).appendTo($itemEleA);
e.preventDefault();
return image;
});
image.src = imagePath;
//var tempvar = $itemEle.find('a');
$(image).appendTo("#tempHolder");
}
this.image = runImage(this.imagePath, $itemEle);
}
Since this is for a big client and the site is not yet live I can't show the site but I'll try to throw up some screen shots later.
Any help is greatly appreciated.

It is quite a common problem, and if the images are already in the cache some browsers (shall I say directly - IE?) fails to trigger load events on them. Hence there is a technique for a workaround.
// After this line of your code
image.src = imagePath;
// put this
if (image.complete || image.naturalWidth > 0) { // if image already loaded
$(image).load(); // trigger event manually
}

Javascript's setExpression is the biggest problem for me. Any solution to overcome this

I am trying to freeze my gridview header for last 2 days and got this link and many other links too provided to me on Stackoverflow as well as from googling. This worked fine when i used it on IE 6,7 and under compatibility mode in IE8 but in normal mode, this code is not working.
This line is giving me an error. I want to implement this functionality.
trs[x].style.setExpression("top", "this.parentElement.parentElement.parentElement.scrollTop + 'px'");
On reading comments, I came to know that scrollableTable.js uses setExpression Method which has been depreciated in IE8.
Previously I didn't have any idea about the problem. I hope there would be some alternative to setExpression method.
How to replace setExpression method with some other alternative in this code
function ScrollableTable (tableEl, tableHeight, tableWidth) {
this.initIEengine = function() {
this.containerEl.style.overflowY = 'auto';
if (this.tableEl.parentElement.clientHeight - this.tableEl.offsetHeight < 0) {
this.tableEl.style.width = this.newWidth - this.scrollWidth + 'px';
} else {
this.containerEl.style.overflowY = 'hidden';
this.tableEl.style.width = this.newWidth + 'px';
}
if (this.thead) {
var trs = this.thead.getElementsByTagName('tr');
for (x = 0; x < trs.length; x++) {
trs[x].style.position = 'relative';
trs[x].style.setExpression("top", "this.parentElement.parentElement.parentElement.scrollTop + 'px'");
}
}
if (this.tfoot) {
var trs = this.tfoot.getElementsByTagName('tr');
for (x = 0; x < trs.length; x++) {
trs[x].style.position = 'relative';
trs[x].style.setExpression("bottom", "(this.parentElement.parentElement.offsetHeight - this.parentElement.parentElement.parentElement.clientHeight - this.parentElement.parentElement.parentElement.scrollTop) + 'px'");
}
}
eval("window.attachEvent('onresize', function () { document.getElementById('" + this.tableEl.id + "').style.visibility = 'hidden'; document.getElementById('" + this.tableEl.id + "').style.visibility = 'visible'; } )");
};

Try this:
for (x=0; x < trs.length; x++)
{
trs[x].style.position = 'fixed';
trs[x].style.top.setExpression = "this.offsetParent.scrollTop";
}
It works for me!

You should try the http://fixedheadertable.com/ jQuery plug-in instead. This should eliminate any cross-browser problems and be more future-proof.

For the same think is better to use jQuery and do the same job with jQuery that is going to work on all browsers and drop setExpression.
Something like:
var MyMainControl = $(".StyleOf");
MyMainControl.attr("top", MyMainControl.parent(".TheKeeper").offset().top );
or if you have many
jQuery(document).ready(function()
{
jQuery(".StyleOf").each(function(i, selected) {
var MyMainControl = $(selected);
MyMainControl.attr("top", MyMainControl.parent(".TheKeeper").offset().top );
}
}
I think that the html is something like
<div class="TheKeeper">
<div>
<div>
<div class="StyleOf"></div>
</div>
</div>
</div>
The setExpression is for make css compatible with ie6.
Of cource you can get some other ready Header Grids... :)