Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
73
rated 0 times [  75] [ 2]  / answers: 1 / hits: 56129  / 13 Years ago, sun, may 22, 2011, 12:00:00

I am trying to position my Div wherever the user clicks on my Image.



test is my Div, and myimg is my image.



Here is my JS:



<script type=text/javascript src=jquery.js></script>
<script type=text/javascript>
jQuery(document).ready(function(){
$(#myimg).click(function(e){
$(#test).show(2000);
$(#test).offset({left:e.pageX,top:e.pageY});

})
})
</script>


However that does not work. Can anyone tell me what I am doing wrong?



Edit: Sorry, I forgot to mention that the Div wont show up, if I include the offset line, if I dont, it shows, but not at the right position.



Here is the full code:



<!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>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8 />
<title>xSky Software - Most likely the only software on Clickbank that exists.</title>
<link href=style.css rel=stylesheet type=text/css />
<script type='text/javascript' src='video/jwplayer.js'></script>

<script type=text/javascript src=jquery.js></script>
<script type=text/javascript>
$(document).ready(function(){
$(#myimg).click(function(e){
$(#test).show(2000);
$(#test).offset({left:e.pageX,top:e.pageY});

})
})
</script>


</head>
<body>
<!--Header and Logo-->
<div id=header>
<div id='mainvid'>This text will be replaced</div>
<script type='text/javascript'>
jwplayer('mainvid').setup({
'flashplayer': 'video/player.swf',
'file': 'video/Untitled1.mp4',
'controlbar': 'none',
'frontcolor': 'FFFFFF',
'lightcolor': 'FFFFFF',
'screencolor': 'FFFFFF',
'autostart': 'true',
'width': '709',
'height': '422'
});
</script>
</div>
</div>


<div id=test style=width:100px; position:absolute; display:none; height:100px; border:#093 solid 2px; background:#0C6;>
Teeest
</div>

<!--Content-->
<div id=content>
<center><img src=Images/downloadbutton.png id=myimg /></center>
<br />
<div class=text>
OH YEAH!
</div>
</div>



<!--Footer-->
<div id=footer>

</div>

</body>
</html>

More From » jquery

 Answers
100

It seems to work fine. I have set up a JSFiddle for you:



http://jsfiddle.net/JPvya/



Click on the image and the test div moves. The only change is using the $ short notation for JQuery instead of typing JQuery which, by the way is probably case sensetive and causing the problem!


[#92119] Thursday, May 19, 2011, 13 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
lara

Total Points: 462
Total Questions: 100
Total Answers: 102

Location: Jersey
Member since Mon, Jun 14, 2021
3 Years ago
lara questions
;