|
JavaScript - Get Top And Left Onmousedown?
on my page: http://www.jbiddulph.com/john-drag.html
I want to be able to show the TOP and LEFT position on the textboxes below when I move the box?! Please help?! thanks J Similar TutorialsWhen a user pushes their mouse down on a DOM element I want to allow them to move it, so I would like to setup an on mouse move function. The code i have is: Code: var newHeader = document.createElement("div");
newHeader.id = "header" + tabID;
newHeader.className = "windowHeader";
newHeader.onmousedown = 'desktop.onmousemove = moveWindow('+tabID+');';
newHeader.onmouseup = 'desktop.onmousemove = null;';
newWindow.appendChild(newHeader);
However it doesn't work hence why I'm here... Any help appreciated! I have some code which looks like this. Code: <script type="text/javascript">
function links(){
var links=document.getElementsByTagName("A");
for(var i=0;i<links.length;i++){
links[i].onmousedown=function(i){
return Showalert(links[i]);
};
}
}
function Showalert(link){
alert("link: "+link);
}
</script>
What I want to know is how I can pass the number which 'i' is of the current link being clicked so like this - links hi // i = 0 hello // i = 1 dude // i = 2 so from the for loop I want the i to be passed into the function which "links[i].onmousedown" is outputting so when the user clicks any link on the page the function within the mousedown call can read the number of the link? can anyone help? EDIT: Don't worry I've done it. I have 9 boxes which I can drag around an invisible grid however when the onMouseDown function is called for the first time on each of the boxes, they behave erratically, then once all boxes have been clicked once, the entire script works as it should. I've tried using default values when declaring the variables however it doesn't seem to do anything. Does this happen with anyone else, anything obvious I'm missing. Code: <html>
<head>
<script language="javascript">
var x;
var y;
var org_top;
var org_left;
var diff_org_top;
var diff_org_left;
var element;
var element2;
var being_dragged = false;
var newleft;
var newtop;
function mouse_move(event)
{
if(event.offsetX || event.offsetY)
{
x=event.offsetX;
y=event.offsetY;
}
else
{
x=event.pageX;
y=event.pageY;
}
if(being_dragged = true)
{
document.getElementById(element).style.top = y-diff_org_top +'px';
document.getElementById(element).style.left = x-diff_org_left +'px';
}
}
function mouse_down(ele_name)
{
being_dragged = true;
element = document.elementFromPoint(x, y).id;
org_top = document.getElementById(element).style.top;
org_left = document.getElementById(element).style.left;
diff_org_top = y-org_top.substring(org_top.length-2,org_top);
diff_org_left = x-org_left.substring(org_left.length-2,org_left);
}
function mouse_up()
{
being_dragged = false;
newtop = Math.floor((y-diff_org_top+100)/200) * 200;
newleft = Math.floor((x-diff_org_left+100)/200) * 200;
if (newtop<0)
{
newtop = 0;
}
else if (newtop>400)
{
newtop = 400;
}
if (newleft<0)
{
newleft = 0;
}
else if (newleft>400)
{
newleft = 400;
}
document.getElementById(element).style.display = 'none';
if (document.elementFromPoint(newleft+100, newtop+100).id != '')
{
element2 = document.elementFromPoint(newleft+100, newtop+100).id;
document.getElementById(element2).style.top = org_top;
document.getElementById(element2).style.left = org_left;
element2 = null
}
document.getElementById(element).style.display = 'block';
document.getElementById(element).style.top = newtop +'px';
document.getElementById(element).style.left = newleft +'px';
element = null;
}
</script>
<style type="text/css">
.box
{
float:left;
display:block;
width:190;
height:190;
margin:5;
position:absolute;
}
.red
{
background:red;
top:0;
left:0;
}
.blue
{
background:blue;
top:0;
left:201;
}
.yellow
{
background:yellow;
top:0;
left:401;
}
.green
{
background:green;
top:201;
left:0;
}
.violet
{
background:violet;
top:201;
left:201;
}
.orange
{
background:orange;
top:201;
left:401;
}
.maroon
{
background:maroon;
top:401;
left:0;
}
.lime
{
background:lime;
top:401;
left:201;
}
.indigo
{
background:indigo;
top:401;
left:401;
}
</style>
</head>
<body onMouseMove="mouse_move(event)">
<div id="one" class="red box" onMouseDown="mouse_down('one')" onMouseUp="mouse_up()">
</div>
<div id="two" class="blue box" onMouseDown="mouse_down('two')" onMouseUp="mouse_up()">
</div>
<div id="three" class="yellow box" onMouseDown="mouse_down('three')" onMouseUp="mouse_up()">
</div>
<div id="four" class="green box" onMouseDown="mouse_down('four')" onMouseUp="mouse_up()">
</div>
<div id="five" class="orange box" onMouseDown="mouse_down('five')" onMouseUp="mouse_up()">
</div>
<div id="six" class="violet box" onMouseDown="mouse_down('six')" onMouseUp="mouse_up()">
</div>
<div id="seven" class="maroon box" onMouseDown="mouse_down('seven')" onMouseUp="mouse_up()">
</div>
<div id="eight" class="lime box" onMouseDown="mouse_down('eight')" onMouseUp="mouse_up()">
</div>
<div id="nine" class="indigo box" onMouseDown="mouse_down('nine')" onMouseUp="mouse_up()">
</div>
</body>
</html>
Hello, If you will open: joketube.tv (please use admin as username and admin as password) and have a look on the top menu you will find UPLOAD link. Please click on it and you will see 'popup window'. Everything is ok with except that all parts of the window is dragable... I was expecting following. After placing some container DIV element (none transparent) with higher z-index over dragable background DIV. This region (with higher z-index) would become NONE dragable! BUT what I got is that even if DIV is hidden behinde other DIV elements, onmousedown is still working for that hidden DIV. Why this happened and how can I solve this problem? Thank you in advance for any suggestion I have created a drag script and am having a problem with the cursor. When I hover over the div, the cursor becomes "move" as I want it to be. But if I click, then drag it changes to the I-beam cursor. I am wondering what I can do to get it to stay "move" or whatever I'd like it to be. I know things like onselectstart, etc, but that doesn't seem to do anything. Thanks for your time.
I need to set a divs margin-left value into a var, ive tried a few different ways and i always get undefined, anyone able to help me? Ideally id like it without the px too but thats not essential.
I have a slider that slides the content from the top to bottom when a link/button is clicked. I want it to slide out from the right side of the button and move left to right. Is this possible by just adjusting the code I already have? Thanks. HTML: 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=iso-8859-1" /> <title>jQuery Accordion Style DIV Menu</title> <link href="format.css" rel="stylesheet" type="text/css" /> <link href="text.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script> <script type="text/javascript" src="javascript.js"> </script> </head> <body> <div id="wrapper"> <div class="accordionButton">Button 1 Content</div> <div class="accordionContent">Content 1<br /><br /><br /><br /><br /><br /><br /><br />Long Example</div> <div class="accordionButton">Button 2 Content</div> <div class="accordionContent">Content 2<br /><br /><br /><br /><br />Medium Example</div> <div class="accordionButton">Button 3 Content</div> <div class="accordionContent">Content 1<br />Short Example</div> <div class="accordionButton">Button 4 Content</div> <div class="accordionContent">Content 4<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Extra Long Example</div> </div> </body> </html> javascript.js: Code: $(document).ready(function() {
//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
$('.accordionButton').click(function() {
//REMOVE THE ON CLASS FROM ALL BUTTONS
$('.accordionButton').removeClass('on');
//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
$('.accordionContent').slideUp('normal');
//IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
if($(this).next().is(':hidden') == true) {
//ADD THE ON CLASS TO THE BUTTON
$(this).addClass('on');
//OPEN THE SLIDE
$(this).next().slideDown('normal');
}
});
/*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
//ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER
$('.accordionButton').mouseover(function() {
$(this).addClass('over');
//ON MOUSEOUT REMOVE THE OVER CLASS
}).mouseout(function() {
$(this).removeClass('over');
});
/*** END REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
/********************************************************************************************************************
CLOSES ALL S ON PAGE LOAD
********************************************************************************************************************/
$('.accordionContent').hide();
});
Good morning, I'm using the TDC JavaScript Ticker code and would like to have the data scroll from right to left. Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="sagscroller.css" />
<script type="text/javascript">
//Note- Below example by JavaScriptKit.com
function tdcticker(){
tickerSet.MoveNext();
if (tickerSet.EOF) //if end of data's file
tickerSet.MoveFirst()
setTimeout("tdcticker()",9000);
}
function init(){
tickerSet=ticker.recordset
tickerSet.moveFirst()
setTimeout("tdcticker()",9000)
}
</script>
<a href="" datasrc="#ticker" class="ticker" datafld="messageURL" style="width:260px; border:0px solid black;">
<span id="tickerDiv" datasrc="#ticker" datafld="MESSAGES" ></span>
</a>
<script type="text/javascript">
if (document.all)
ticker.ondatasetcomplete=init
</script>
Thanks in advance! When I click on the image I want to get the "margin-left" value of its block. In the code below the margin-left is set at 100px. But when I click on the image the "margin-left" value shows in the "alert" as undefined. What code changes do I need to get the correct margin-left value? (Please, no guessing!) [CODE] <script type="text/javascript" > window.onload = function(){ document.getElementById("holder").onclick = showit; } function showit( ) { var marval = document.getElementById("holder").style.marginLeft; alert(" margin-left= " + marval + " typeof= " + typeof marval); } </script> <style type="text/css"> #holder{ padding: 0px; margin-left: 100px; } </style> </head> <body> <img id="holder" src="anyimage.gif" width="300px" height="200px" /> </body> [CODE] So I have a list of values in an xml document. 1. Tom 2. Ned 3. Steve 4. Bob 5. Rob If I leave/refresh the page, I start back at the 1st entry (Tom). I would like to return the viewer to where the viewer left off. Example, if user exists at Steve, I would like to resume him when he returns at Bob. Is this possible using Javascript/XML? Hi All, I have been searching the net for a tutorial of how to create a left to right slider when a link is clicked. Basically I want have the div hidden initially then when a link is clicked the div to slide out over the top of my current content. I can find plenty of tutorials of examples where the div slides up and down but not from left to right.. Can anyone help me out here? many thanks, greens85 Hi friends, <script language="JavaScript" > calDocFrameset = "<frameset rows='60,*' frameborder='0' sty >\n" + " <frame name='topCalFrame' src='javascriptarent.opener.calDocTop' scrolling='no'>\n" + " <frame name='bottomCalFrame' src='javascriptarent.opener.calDocBottom' scrolling='no'>\n" + "</frameset>\n"; document.write(calDocFrameset); </script> the above code i am using for popup calendar. It is working fine with IE.But it is not working in mozilla and GoogleChrome. In mozilla and gc it is comming in center. It is appearing only when i maximize the window. Even though i have given window properties as window.open('/includes/calendar.htm','cal','dependent=yes,width=180,height=180,left=400,top=250,titlebar=yes,resize=no'); I want the calendar to appear in popupwindow without maximizing. Srikanth I'm not very experienced with javascript, but I have a bit of code that works perfectly for me that expands/collapses a div without any animation from top to bottom. I'm looking for the same exact code that lets me expand/collapse from left to right. I've done my due diligence and have search many forums with limited luck (I've only found one that is animated that I can't turn off the animation). Can someone point me in the right direction to code that does exactly the same as what I've posted below except from left to right? Code: // code to keep collapsed on opening
function pageLoad() {
collapseAll($('wrapper1-sub','wrapper2-sub','wrapper3-sub','wrapper4-sub','wrapper5-sub','wrapper6-sub','wrapper7-sub','wrapper8-sub','wrapper9-sub','wrapper10-sub','wrapper11-sub','wrapper12-sub'));
}
addEvent(window,'load',pageLoad);
//code to work the collapse
function switchMenu(obj) {
var el = document.getElementById(obj);
if ( el.style.display != "none" ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}
function collapseAll(objs) {
var i;
for (i=0;i<objs.length;i++ ) {
objs[i].style.display = 'none';
}
}
function $() {
var elements = new Array();
for (var i = 0; i < arguments.length; i++) {
var element = arguments[i];
if (typeof element == 'string')
element = document.getElementById(element);
if (arguments.length == 1)
return element;
elements.push(element);
}
return elements;
}
function addEvent( obj, type, fn ) {
if (obj.addEventListener) {
obj.addEventListener( type, fn, false );
EventCache.add(obj, type, fn);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent( "on"+type, obj[type+fn] );
EventCache.add(obj, type, fn);
}
else {
obj["on"+type] = obj["e"+type+fn];
}
}
var EventCache = function(){
var listEvents = [];
return {
listEvents : listEvents,
add : function(node, sEventName, fHandler){
listEvents.push(arguments);
},
flush : function(){
var i, item;
for(i = listEvents.length - 1; i >= 0; i = i - 1){
item = listEvents[i];
if(item[0].removeEventListener){
item[0].removeEventListener(item[1], item[2], item[3]);
};
if(item[1].substring(0, 2) != "on"){
item[1] = "on" + item[1];
};
if(item[0].detachEvent){
item[0].detachEvent(item[1], item[2]);
};
item[0][item[1]] = null;
};
}
};
}();
addEvent(window,'unload',EventCache.flush);
I am able to align the tooltip using the offset command, but would like to align the tooltip to open in the upper left of the screen. How can I do this? Thanks, Wina Hi, Here's a sample division: Code: <div style="padding:0 0 0 30px; background:url(http://www.google.com/help/hc/images...ent_bubble.gif) left center no-repeat;">some text</div> I wonder how I can calculate the padding-left:30px dynamically so that any icon I choose the padding-left value changes according to the image width. Any help is appreciated! Hi, I want the image in the header of my website to move from left to right and back in an endless loop. The image width is larger than the width of the div which contains the image, so when the image moves to the right, the right end of the image has to disappear. When the image moves back to the left, the left end has to disappear. Now I know I can use the overflow: hidden; element in the CSS file to hide a part of the image. I found already several javascript scripts to move an image over the screen, but these scripts move the image only in 1 direction. I need it to go in the 2 directions in loop. Also these scripts require a position: relative; element to the image, so the hidden overflow of the div doesn't work. An example of this kind of script: Code: <body onload="moveRight()">
<div id="header" style="width: 1010px;height: 170px;overflow: hidden;">
<img src="images/header.jpg" id="header" style="position:relative;top:0px;left:0px; ">
</div>
<script type="text/javascript">
var userWidth = window.screen.width;
function moveRight() {
var pp = document.getElementById("header");
var lft = parseInt(pp.style.left);
var tim = setTimeout("moveRight()",100); // 100 controls the speed
lft = lft+3; // move by 3 pixels
pp.style.left = lft+"px";
if (lft > 50) { // left edge of image past the right edge of screen
pp.style.left = 0; // back to the left
}
}
</script>
</body>
Is there any way to improve this script to my requirements, or am I completely looking in the wrong direction? Hi, i have a container div with many other nested divs inside e.g. Code: <div id="thisOne"> <div>Div 1</div> <div>Div 2</div> </div> The outter div is 640 (ish) px wide, and the div will scroll on the across horizontally. I want it to scroll left if the mouse is in the first 100px on the left (0-100px) or right if its in the last 100 px (540-640px). What would be the best way of doing this? Sorry if that didnt make sense :P Hi On the following URL on the iphone and Ipad the jqzoom script is showing the enlarged image on the left but works fine in IE, Chrome, Firefox etc. The script in use is jqzoom. http://tinyurl.com/bwcxf8c Any idea welcome. Thanks Roy I am trying to assign the left and right arrows, but I cannot get the code to work. It would be great to get some help--I am a newbie to coding. <html> <head> <script language="javascript" type="text/javascript"> document.onkeydown=function(e) { var thelink if (e.keyCode==37) thelink='prevlink' else if (e.keyCode==39) thelink='nextlink' else return document.location.href=document.getElementById(thelink).href} </script> </head> <body> <a href="#" onkeydown="return previous(this)" id="prevlink">PREVIOUS</a><br /> <br /> <a href="#" onkeydown="return next(this)" id="nextlink">NEXT</a> </body> </html> Hi, I am looking for the equivalent for the following Internet Explorer code for Firefox: Code: z=event.srcElement; z.style.pixelLeft = 500px; Must be something like: Code: function move(e) {
z=e.target;
z.style.left .....
maybe. This is to assign a new left position to an Element. Any hints welcome ?! Thank you for your help ! |
|||||||