PDA

View Full Version : DHTML Mask

robocop
03-20-2003, 10:07 PM
Hey there yall. Just a quick one....can i make a layer mask off another layer?

id like to do an effect on my page like this:

http://www.business2.com/articles/mag/0,1640,47750,00.html#

any ideas on how to accomplish this?


Thanks a million!!!

kc
robocop
03-21-2003, 03:24 PM
does anyone out there kinda know what im talking about here?

thanks you guys.....:thumbsup:
Weirdan
03-21-2003, 04:10 PM
Did you mean something like this:
https://a248.e.akamai.net/f/1016/606/1d/image.pathfinder.com/subs2/images/ec/b2_ofiesld_free.gif
If so, there is IE way to do it:
MSDN Article (http://msdn.microsoft.com/library/default.asp?url=/nhp/Default.asp?contentid=28000441)
Don't know how about other browsers.
robocop
03-21-2003, 08:14 PM
thanks for the reply, but i was talking about what happens when you roll your mouse over the ad on the upper right-ish area..it like....expands out...i have a cool idea for how to use this on my page...i just need to figure it out....is there a way to hide like portions of a layer and then like move something so that the layer appears to like "wipe left" into view? check out the ad that says expand......
Antoniohawk
03-21-2003, 09:14 PM
my computer is being a little freaky so the expand thing wasnt working for me. Im gonna guess that it slides over making the little box bigger. If you want to accomplish this i suggest a <div> and a lil javscript. Try out something like the following.

<html>
<head>
<script>
var vis = "hide";
function div()
{
if (vis == "hide")
{
document.getElementById("drop").style.visibility = "visible";
vis = "view";
}
else
{
document.getElementById("drop").style.visibility = "hidden";
vis = "hide";
}
}
</script>
</head>

<body>
<div id="div" style="width: 100px; height: 100px; background: red;"><a href="" onclick="div()" return false><b>+</b></a></div>
</body>
</html>

*Beware, this is antoniohawk's first attempt to help any1 on Coding Forums*
robocop
03-21-2003, 10:02 PM
thanks for the reply Audio.......what about actually making it move though? thats my question....i wanna put a form inside the part that slides out.......how would i go about accomplishing this? man, i keep rackin my brain on this one.....it hurts :)
Roy Sinclair
03-21-2003, 10:21 PM
I don't suppose it occured to you to try using "view source" to find the code they're using to see if you could understand it?

There are several ways this technique could be accomplished, one way would be to use a DIV floated to the right side of the page and set (via CSS) to clip overflowed content on the right hand side. Then to animate you simply increase or decrease the width property of the DIV a pixel (or maybe a few pixels) at a time using the setTimeout function.
robocop
03-21-2003, 10:23 PM
Yah, i know a decent amount of JS..so the first thing i did was tear apart the code...it appears they have some server side stuff that i cant get at to look @....i wouldnt have even come here if not for that :)

thanks for the help......im gonna figure this out if it kills me ;)
Roy Sinclair
03-21-2003, 10:27 PM
It can't be server side code doing that. You may have to download a javascript file though.
robocop
03-21-2003, 10:32 PM
ok.....ive got all their JS files downloaded.....and when i run it, its telling me "cant find this variable or that variable".......a lot of variables its saying arent defined.....yet, i have all the JS files linked correctly.....
robocop
03-21-2003, 10:33 PM
Heres the files:
Antoniohawk
03-22-2003, 07:03 AM
my first attempt at helping some1 and i make a major goof. The part of the code i provided. I have edited the code so it should now work.
Weirdan
03-22-2003, 09:40 AM
Ok, now I understand what are you talking about ;)
Try this sample. It works under IE and, with some modifications, under other browsers too.
robocop
03-23-2003, 01:54 AM
thanks W...im thinkin for other/older browsers, im gonna just write a sniffer script to just display a table of links to them....we'll see....if anyone else can come up w/ other variations....rock on :)
robocop
03-24-2003, 03:30 PM
is there any way to make a layer that will hide another layer, but still show what is on the page? i like how this layer slides, but i want it to start appearing like 100 pixels from the left....is this even possible?

if any of you have ever dealt with photoshop, im basically trying to do a mask.....look at the ad on the right of the page that i posted above...u'll see what i mean....how did they do that?
robocop
03-25-2003, 03:51 PM
again, thanks man....just wanted to know if you could make the layer completely fade away....its still somewhat translucent....i tried and tried....but to no avail.....what should i do to accomplish this?
Weirdan
03-25-2003, 05:03 PM
RTFM:
MSDN (http://msdn.microsoft.com/library/default.asp?url=/nhp/Default.asp?contentid=28000441)
also look at this link:
http://www.business2.com/subs/b2_ofiesld_all.js
business2.com implemented this fancy visual effect using filters and transitions.