I got a quick question. If I want to pare a style left / right value with another coordinates (lets say mouse) how do I do it?
Here is what I tried without mouse coordinates but for some reason my condition never executes...
<style>
#container
{
position:absolute;
left:400px;
top:200px;
}
</style>
<script>
function moveExit(){
var containerId = document.getElementById("container").style;
if(containerId.left == 400 + "px")
containerId.left = 395 + "px";
}
</script>
And here is my body:
<body>
<div id="container">
<img
src="Images/image.jpg"
onmouseover="moveExit();"
/>
</div>
</body>
This is my first time playing around with javascript.. Thanks!
I got a quick question. If I want to pare a style left / right value with another coordinates (lets say mouse) how do I do it?
Here is what I tried without mouse coordinates but for some reason my condition never executes...
<style>
#container
{
position:absolute;
left:400px;
top:200px;
}
</style>
<script>
function moveExit(){
var containerId = document.getElementById("container").style;
if(containerId.left == 400 + "px")
containerId.left = 395 + "px";
}
</script>
And here is my body:
<body>
<div id="container">
<img
src="Images/image.jpg"
onmouseover="moveExit();"
/>
</div>
</body>
This is my first time playing around with javascript.. Thanks!
Share Improve this question asked Jul 30, 2013 at 20:24 Zain1291Zain1291 171 silver badge5 bronze badges 4-
Part of your problem is that
document.getElementById("container").stylewill apply only to that element's actualstyleattribute. CSS properties set elsewhere (such as you have here) will not be visible using this method. The easiest thing here, I think, would be to use jQuery's.position()method to get and set the coordinates you are after. – Chris Nielsen Commented Jul 30, 2013 at 20:28 - In conjunction with @ChrisNielsen , if you haven't looked into a library such as jQuery, I would suggest doing so as you learn javascript. But remember.. jQuery is like a drug : use it, never abuse it, and certainly don't abuse it. – Brett Weber Commented Jul 30, 2013 at 20:34
- Thanks for the ments and I really liked the not abusing jQuery part :D. Is it possible to use jQuery variables in JavaScript? So lets say I have a class P and I get my positions with .position() then use if condition within javascript to change the positions? – Zain1291 Commented Jul 30, 2013 at 20:52
- Yes, certainly. There is no such thing as a "jQuery variable." jQuery is a JavaScript library, written in JavaScript, and executed as JavaScript. Its variables are JavaScript variables. It is not a separate language; just a bunch of useful functions and utilities that help smooth over some of the rough spots that e up in web development. There are a lot of rough spots. Use a library. – Chris Nielsen Commented Jul 31, 2013 at 16:55
3 Answers
Reset to default 6you need to use puted style for this purpose.
How do I get a puted style?
var left = window.getComputedStyle(document.getElementById("container")).left
for IE8 you have to use currentStyle proeprty as puted style is not supported.
document.getElementById("container").currentStyle.left
Cross-browser (IE8-) getComputedStyle with Javascript?
Try something like this:
http://jsfiddle/xtJA4/
$(document).ready( function() {
$("#container").mouseleave(function() {
if ($(this).css("left")=="400px") {
alert("Left = 400px");
}
});
});
There are of course changes that can be made to this, but for what you're needing this should work fine. You can of course go and change the alert() function to match what you need (modifying the left offset), but hopefully this helps!
While I'm not 100% sure what exactly you are looking to acplish, here are a few ments, and suggestions for your code.
Rather than user javascript, I would use jQuery. This is something that David has suggested previously. One of the great advantages of jQuery is that it gets around most browser inpatibility issues.
To do this with jQuery you'll need to import jquery, and then you can use it like so:
<script type="text/javascript" src="./jquery/jquery.js"></script>
<script type="text/javascript">
function moveExit(){
var $element = jQuery('#container');
$element.css('left', '350px');
}
</script>
Please also notice that I have added the "type" attribute to the script elements.
As a side-note I would also remind you to add "alt" attributes to img elements. Good for accessibility and for when the images are blocked for whatever reason.
With greater understanding about what you are trying to acplish a better answer can be provided.