/    Sign up×
Community /Pin to ProfileBookmark

help with simple IF ELSE statement

Copy linkTweet thisAlerts:
Aug 02.2008

[CODE]if (document.getElementById == ‘element1’){
document.getElementById(‘element1’) == xpos;
document.getElementById(‘element1’) == ypos;
} else {
document.getElementById(‘element2’) == xpos;
document.getElementById(‘element2’) == ypos;
}[/CODE]

Did I write the above correctly? I have close to no knowledge of javascript.

I’m pretty good with PHP and did my research on the js if else statements. I need some double checking here just to make sure this part of my function isn’t the culprit with a current issue I’m having.

to post a comment
JavaScript

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@scragarAug 02.2008 — erm... what is your code supposed to do?
Copy linkTweet thisAlerts:
@lgdevilauthorAug 02.2008 — I'm trying to make draggable elements which input each elements x/y coordinates to an html form. The if statement should see if element1 is the current element being dragged. If it is then do something if not do else. I'll eventually be adding hundreds of elements (image/icon) to be dragged so it has to be scalable but I can write them in there manually if need be.

function coords(e) { // capture mouse coordinates

xpos = e.layerX ? e.layerX : e.offsetX ? e.offsetX : 0; // +document.body.scrollLeft

ypos = e.layerY ? e.layerY : e.offsetY ? e.offsetY : 0; // +document.body.scrollTop

if(xpos!=0 && ypos !=0) {

if (document.getElementById == 'element1'){

document.getElementById('element1') == xpos;

document.getElementById('element1') == ypos;

} else {

document.getElementById('element2') == xpos;

document.getElementById('element2') == ypos;

}

window.status = 'X = '+xpos+' - Y = '+ypos;

}

}

I posted the whole script here:

http://www.webdeveloper.com/forum/showthread.php?t=187686

Figured I didn't get a response because it was so big and I don't know if post bumping is allowed here.
Copy linkTweet thisAlerts:
@scragarAug 02.2008 — well you can't capture the element being dragged using document.getElementById, I'm not sure how you would capture the element being dragged yourself, it all depends on how you are calling the function.
Copy linkTweet thisAlerts:
@Declan1991Aug 02.2008 — EDIT: Too late, and irrelevant by the time I posted it.
Copy linkTweet thisAlerts:
@lgdevilauthorAug 02.2008 — OK you asked for it. This is the whole enchilada. :eek:

Here's an image showing what I'm trying to do.

Ignore the firebug error in the screenshot I've fixed that.

Like I said in my last post I know practically nothing about js but my PHP is strong. I've tried messing around the best I could before asking for help. The script below could be close or way off from what I'd like to do. I have no idea.

[code=php]echo "<script type='text/javascript'>
var mousex = 0;
var mousey = 0;
var grabx = 0;
var graby = 0;
var orix = 0;
var oriy = 0;
var elex = 0;
var eley = 0;
var algor = 0;

var dragobj = null;

function falsefunc() { return false; } // used to block cascading events

function init()
{
document.onmousemove = update; // update(event) implied on NS, update(null) implied on IE
update();
}

function coords(e) { // capture mouse coordinates
xpos = e.layerX ? e.layerX : e.offsetX ? e.offsetX : 0; // +document.body.scrollLeft
ypos = e.layerY ? e.layerY : e.offsetY ? e.offsetY : 0; // +document.body.scrollTop
if(xpos!=0 && ypos !=0) {
document.getElementById('element1') == xpos;
document.getElementById('element1') == ypos;
window.status = 'X = '+xpos+' - Y = '+ypos;
}
}

function getMouseXY(e){ // works on IE6,FF,Moz,Opera7
if (!e) e = window.event; // works on IE, but not NS (we rely on NS passing us the event)

if (e)
{
if (e.pageX || e.pageY)
{ // this doesn't work on IE6!! (works on FF,Moz,Opera7)
mousex = e.pageX;
mousey = e.pageY;
algor = '[e.pageX]';
if (e.clientX || e.clientY) algor += ' [e.clientX] '
}
else if (e.clientX || e.clientY)
{ // works on IE6,FF,Moz,Opera7
mousex = e.clientX + document.body.scrollLeft;
mousey = e.clientY + document.body.scrollTop;
algor = '[e.clientX]';
if (e.pageX || e.pageY) algor += ' [e.pageX] '
}

}
}

function update(e){
getMouseXY(e); // NS is passing (event), while IE is passing (null)

document.getElementById('span_browser').innerHTML = navigator.appName;
document.getElementById('span_winevent').innerHTML = window.event ? window.event.type : '(na)';
document.getElementById('span_autevent').innerHTML = e ? e.type : '(na)';
document.getElementById('span_mousex').innerHTML = mousex;
document.getElementById('span_mousey').innerHTML = mousey;
document.getElementById('span_grabx').innerHTML = grabx;
document.getElementById('span_graby').innerHTML = graby;
document.getElementById('span_orix').innerHTML = orix;
document.getElementById('span_oriy').innerHTML = oriy;
document.getElementById('span_elex').innerHTML = elex;
document.getElementById('span_eley').innerHTML = eley;
document.getElementById('span_algor').innerHTML = algor;
document.getElementById('span_dragobj').innerHTML = dragobj ? (dragobj.id ? dragobj.id : 'unnamed object') : '(null)';
}

function grab(context){
document.onmousedown = falsefunc; // in NS this prevents cascading of events, thus disabling text selection
dragobj = context;
dragobj.style.zIndex = 10; // move it to the top
document.onmousemove = drag;
document.onmouseup = drop;
grabx = mousex;
graby = mousey;
elex = orix = dragobj.offsetLeft;
eley = oriy = dragobj.offsetTop;
update();
}

function drag(e){
if (dragobj){
elex = orix + (mousex-grabx);
eley = oriy + (mousey-graby);
dragobj.style.position = 'absolute';
dragobj.style.left = (elex).toString(10) + 'px';
dragobj.style.top = (eley).toString(10) + 'px';
}
update(e);
return false; // in IE this prevents cascading of events, thus text selection is disabled
}

function drop(){
if (dragobj){
dragobj.style.zIndex = 1;
dragobj = null;
}
document.Profile.x_avatar.value = xpos;
document.Profile.y_avatar.value = ypos;
update();
document.onmousemove = update;
document.onmouseup = null;
document.onmousedown = null; // re-enables text selection on NS
}

</script>";[/code]

[code=php]// DRAGGABLE ICON BEGIN
echo '<div id="element1" onmousedown="grab(this)" onmouseup="drop(this)">';
echo '<img style="position: relative;" src="images/mteam/games/dod2.gif" border="0" alt="" />';
echo '</div>';
echo '<div id="element2" onmousedown="grab(this)" onmouseup="drop(this)">';
echo '<img style="position: relative;" src="images/mteam/games/css.gif" border="0" alt="" />';
echo '</div>';
// DRAGGABLE ICON END[/code]

[code=php]echo "<div id='xfire_div'>";
echo "<img style='position: relative;' onmousemove='coords(event)' src='xfiresig.png' alt='Error: Image Not Displayed' border='0' />";
echo "</div>";
// DROPPABLE DIV END[/code]
Copy linkTweet thisAlerts:
@scragarAug 02.2008 — make a new variable for what your wanting to move:
var obj;
when the drag function is called store the object:
function drag(e){
obj = e;// HERE :P
if (dragobj){
elex = orix + (mousex-grabx);
eley = oriy + (mousey-graby);
dragobj.style.position = 'absolute';
dragobj.style.left = (elex).toString(10) + 'px';
dragobj.style.top = (eley).toString(10) + 'px';
}
update(e);
return false; // in IE this prevents cascading of events, thus text selection is disabled
}
after that it's all easy, no need for your if code, since the element is now stored in [b]obj[/b] for use later, just be sure to check if the object is stored before moving it though:
if(obj){// code to do if dragging
}else{// not dragging
};
oh, and be sure to remove the reference when dropping:
<i>
</i>function drop(){
if (dragobj){
dragobj.style.zIndex = 1;
dragobj = null;
}
document.Profile.x_avatar.value = xpos;
document.Profile.y_avatar.value = ypos;
update();
document.onmousemove = update;
document.onmouseup = null;
document.onmousedown = null; // re-enables text selection on NS

obj = 0;// make sure it's at the end of the function, incase you need it earlier on.
}
Copy linkTweet thisAlerts:
@lgdevilauthorAug 03.2008 — I'm sorry I've spent the last couple of hours messing around with the code you suggested and I can't seem to get it to work. I did come up with a crappy work around. I know this isn't the best way to do it because I'll literally have to repeat this function hundreds of times. ?

[CODE]function drop(){
if (dragobj){
dragobj.style.zIndex = 1;
dragobj = null;
document.Profile.x_avatar.value = xpos;
document.Profile.y_avatar.value = ypos;
}
update();
document.onmousemove = update;
document.onmouseup = null;
document.onmousedown = null; // re-enables text selection on NS
}
function drop2(){
if (dragobj){
dragobj.style.zIndex = 1;
dragobj = null;
document.Profile.x_xfire_nick.value = xpos;
document.Profile.y_xfire_nick.value = ypos;
}
update();
document.onmousemove = update;
document.onmouseup = null;
document.onmousedown = null; // re-enables text selection on NS
}[/CODE]

[code=php]// DRAGGABLE ICON BEGIN
echo '<div id="element1" onmousedown="grab(this)" onmouseup="drop(this)">';
echo '<img style="position: relative;" src="images/mteam/games/dod2.gif" border="0" alt="" />';
echo '</div>';
echo '<div id="element2" onmousedown="grab(this)" onmouseup="drop2(this)">';
echo '<img style="position: relative;" src="images/mteam/games/css.gif" border="0" alt="" />';
echo '</div>';
// DRAGGABLE ICON END[/code]

I just changed the onmouseup to drop2. That does input the coordinates into the element2 field correctly so I got it working. ? On the other hand the way I'd use this to repeat the drop function hundreds of times is ummm sucky to say the least.

I made the new var in your example:

var element1 = document.getElementById('element1');

I tried working with that the best I could spending hours mixing around stuff by trial and error but didn't get anywhere.

Could you be more specific in how I should use your example? You said I don't need the if else statement but then immediately after that you say I need an if else statement but don't say where or how. I tried adding dragobj.element1 to an if statement among tons of other things. I tried, I really tried and the best I could come up with was duplicating the drop function for each element. ?
Copy linkTweet thisAlerts:
@lgdevilauthorAug 04.2008 — Please someone? I'm stuck in the middle of this thing.
Copy linkTweet thisAlerts:
@JMRKERAug 04.2008 — How about a link to the actual site that isn't working at this time?

Then post specific instructions as to what to do that is not doing what you currently want it to do.

Maybe point out area of code that will be repeated hundreds of times when completed.
×

Success!

Help @lgdevil spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...