/    Sign up×
Community /Pin to ProfileBookmark

Code to hide an object

Copy linkTweet thisAlerts:
Aug 22.2011

I have a very generic webpage that I created to attempt to show a rule that is used. I have used some drag and drop language that I found which enables me to drag and drop elements on the page. This is great. My problem is I have a total of 6 drag and drop items in two catagories. CML and nonCML. If one nonCML is used, I’d like two of the CML objects to disappear. (disappear could even be turning white to make them hidden). I’m very new to Javascript. Is there easy code that would say if an item from Catagory 1 is moved, have 2 items from Catagory 2 disappear?

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@Raftingdon2authorAug 22.2011 — Here is my previous code (don't laugh), it's very basic (except for the drag and drop). I've written in all in notepad. I did get the drag and drop portion from the web.

<html xmlns:mso="urn:schemas-microsoft-com?office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">

<head>

<style>

<!--

.dragme{position:relative;}

-->

</style>

<script language="JavaScript1.2">

<!--

var ie=document.all;

var nn6=document.getElementById&&!document.all;

var isdrag=false;

var x,y;

var dobj;

function movemouse(e)

{

if (isdrag)

{

dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;

dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y;

return false;

}

}

function selectmouse(e)

{

var fobj = nn6 ? e.target : event.srcElement;

var topelement = nn6 ? "HTML" : "BODY";

while (fobj.tagName != topelement && fobj.className != "dragme")

{

fobj = nn6 ? fobj.parentNode : fobj.parentElement;

}

if (fobj.className=="dragme")

{

isdrag = true;

dobj = fobj;

tx = parseInt(dobj.style.left+0);

ty = parseInt(dobj.style.top+0);

x = nn6 ? e.clientX : event.clientX;

y = nn6 ? e.clientY : event.clientY;

document.onmousemove=movemouse;

return false;

}

}

document.onmousedown=selectmouse;

document.onmouseup=new Function("isdrag=false");

//-->

</script>





<!--[if gte mso 9]><xml>

<mso:CustomDocumentProperties>

<mso:ContentType msdt:dt="string">Document</mso:ContentType>

</mso:CustomDocumentProperties>

</xml><![endif]-->

<title>Puzzle</title></head><body bgcolor="ghostwhite" alink="red" vlink="green" link="blue" >

<title>OMA Hotel/Gateway Information)</title>

<center>


<u><h1>Domestic Legs in International Trip</h1></u>

<p><a href="H:DSIT Tooltool.html">Restart</a></p>

<img src="SCHEDULE.png" </img>

<U><p center>Commercial Deadhead Domestic Segments</p></U>

<img src="cml1.png" class="dragme" </img>

<img src="cml2.png" class="dragme" </img>

<img src="cml3.png" class="dragme" </img>

<img src="cml4.png" class="dragme" </img>

<U><p center>Non-Commercial Deadhead Domestic Segments</p></U>

<img src="Noncml1.png" class="dragme" </img>

<img src="NonCML2.png" class="dragme" </img>


</br>

</br>

<p><a href="http://wss.inside.ups.com/sites/ttg/GOC/CR/default.aspx">Return to Crew Scheduling Page</a></p>

</center>

<p>&nbsp;</p>

<h1>&nbsp;</h1>

</body>

</html>
Copy linkTweet thisAlerts:
@JMRKERAug 22.2011 — Let us see your working code or link from which to modify.
Copy linkTweet thisAlerts:
@Raftingdon2authorAug 22.2011 — When ever I try to post it (I'm new to this site about 20 minutes new) it says a moderator has to approve it?
Copy linkTweet thisAlerts:
@Raftingdon2authorAug 22.2011 — I found some drag and drop function on the internet. The rest is my very basic attempt to use it.


<script language="JavaScript1.2">

<!--

var ie=document.all;

var nn6=document.getElementById&&!document.all;

var isdrag=false;

var x,y;

var dobj;

function movemouse(e)

{

if (isdrag)

{

dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;

dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y;

return false;

}

}

function selectmouse(e)

{

var fobj = nn6 ? e.target : event.srcElement;

var topelement = nn6 ? "HTML" : "BODY";

while (fobj.tagName != topelement && fobj.className != "dragme")

{

fobj = nn6 ? fobj.parentNode : fobj.parentElement;

}

if (fobj.className=="dragme")

{

isdrag = true;

dobj = fobj;

tx = parseInt(dobj.style.left+0);

ty = parseInt(dobj.style.top+0);

x = nn6 ? e.clientX : event.clientX;

y = nn6 ? e.clientY : event.clientY;

document.onmousemove=movemouse;

return false;

}

}

document.onmousedown=selectmouse;

document.onmouseup=new Function("isdrag=false");

//-->

</script>





<!--[if gte mso 9]><xml>

<mso:CustomDocumentProperties>

<mso:ContentType msdt:dt="string">Document</mso:ContentType>

</mso:CustomDocumentProperties>

</xml><![endif]-->

<title>Puzzle</title></head><body bgcolor="ghostwhite" alink="red" vlink="green" link="blue" >

<title>Puzzle</title>

<center>


<u><h1>Legs</h1></u>

<p><a href="H:DSIT Tooltool.html">Restart</a></p>

<img src="SCHEDULE.png" </img>

<U><p center>CML</p></U>

<img src="cml1.png" class="dragme" </img>

<img src="cml2.png" class="dragme" </img>

<img src="cml3.png" class="dragme" </img>

<img src="cml4.png" class="dragme" </img>

<U><p center>NonCML</p></U>

<img src="Noncml1.png" class="dragme" </img>

<img src="NonCML2.png" class="dragme" </img>


</br>

</br>
Copy linkTweet thisAlerts:
@Raftingdon2authorAug 22.2011 — CML1.PNG all of these files are simply rectangular boxes that are semi transparent

NonCML1.PNG are also semi transparent boxes.


I move them over top of a schedule. If NonCML1 or NonCML2 is moved, I'd like for 2 of the cml1.png to disappear.

I learn best attempting to do things myself. I'm just so new to attempting this, that any help would be appreciated.
Copy linkTweet thisAlerts:
@JMRKERAug 22.2011 — Looks like some dated code.


Should be <script type="text/javascript"> not language=...

Don't need the <!-- and --> within the script anymore.

Some problems to be addressed:

1. document.all is MSIE only and I believe no longer supported.

2. your class "dragme" is not defined

3. your restart action goes to your local computer address

4. your pictures need a path for us to see them.
Copy linkTweet thisAlerts:
@Raftingdon2authorAug 22.2011 — I had all of this stuff just locally stored. Was only going to be used internally. The dragme functionality works. It just doesn't disappear when needed. Do you know of a website I can upload this stuff to for you to view?
×

Success!

Help @Raftingdon2 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 6.2,
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: @meenaratha,
tipped: article
amount: 1000 SATS,

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

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...