/    Sign up×
Community /Pin to ProfileBookmark

Login window like Digg

Helo Any one has idea how to make Login window like Digg and few others

[URL=”http://www.zahipedia.com”]tech News[/URL]

to post a comment
PHP

11 Comments(s)

Copy linkTweet thisAlerts:
@SyCoJun 03.2009 — This is done with javascript and CSS not PHP. You can create that effect with a hidden div that appears onclick of 'Login' with javascript.

[code=html]<html>
<head>
<script language="JavaScript">
<!--
function show(id){
document.getElementById(id).style.display='block';
}
function hide(id){
document.getElementById(id).style.display='none';
}
//-->
</script>
</head>
<body>
<div id="myHiddenDiv" style="display:none;width:200px;border:5px solid red;position:absolute;top:100px;left:100px;"><p onclick="hide('myHiddenDiv');">close me</p>(Login form here)</div>
<p onclick="show('myHiddenDiv');">show div</p>
</body>
</html>[/code]


The fades can be accomplished using something like scriptaculous or mootools. If you need transparent borders you can Google for the numerous tutorials, here's a pretty good one.

http://www.456bereastreet.com/archive/200505/transparent_custom_corners_and_borders/
Copy linkTweet thisAlerts:
@zahidrafauthorJun 03.2009 — Thanks dude

is there any open socure exmaple availble ?

Google Wave
Copy linkTweet thisAlerts:
@SyCoJun 03.2009 — I'm not sure what else you need. My snippet is the basic idea, scriptaculous and mootools are free libraries that are pretty simple to use and if you want the transparent border you'll need to read up a bit. I did find the link for you so that's one less thing you have to do. I can't read it for you though, sorry.

I don't know if you'll find an open source digg style login ready to go. You might have to write some of the code yourself. Bummer, I know.
Copy linkTweet thisAlerts:
@ryanlundJun 04.2009 —  You might have to write some of the code yourself. Bummer, I know.[/QUOTE]

=( writing your own code is supposed to be enjoyable - isnt it why we started in the first place?
Copy linkTweet thisAlerts:
@SyCoJun 04.2009 — Err, that was a double helping of sarcasm. I basically gave the guy most of the code he needs and told him where to find the rest and he still wants it done for him. It would take about 20 minutes to have a fading in div from this point to done if he just read how to use the JavaScript libraries (10 of the 20 mins).
Copy linkTweet thisAlerts:
@ryanlundJun 04.2009 — Lol sorry, my thinking isnt exactly clear at that time on a morning - especially since i didnt get any sleep the night before. Loving your signiture btw - just getting rid of bloody vista myself in favour of linux =)
Copy linkTweet thisAlerts:
@SyCoJun 04.2009 — ? another convert. Welcome to the happy side of the street ?
Copy linkTweet thisAlerts:
@criterion9Jun 04.2009 — :) another convert. Welcome to the happy side of the street :)[/QUOTE]

Unless you want sound from an older sound card... :-( (Stupid sound blaster 16)
Copy linkTweet thisAlerts:
@SyCoJun 04.2009 — I think the whole hardware compatibility superiority of Windows became moot with vista. ?
Copy linkTweet thisAlerts:
@criterion9Jun 04.2009 — I agree. I only use Ubuntu and XP.
Copy linkTweet thisAlerts:
@etardJun 05.2009 — I do not use Digg.. but could you not use Shadowbox to achieve the same thing and have the Shadowbox open your form page via the HTML plugin included with SB?

visit the link I gave you, go down to the Miscellaneous > Simple Form example and there you go.

this script contains all you need, but the form of your of course.
×

Success!

Help @zahidraf 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.17,
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: @nearjob,
tipped: article
amount: 1000 SATS,

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

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