Solved

experts exchange login popup

Posted on 2013-05-21
5
182 Views
Last Modified: 2013-05-28
Hi. When click "log on" on the experts exchange home page, a pop up type thing opens up for you to type your username and password in. What is that done with? I would love to do something similar. Please advise. Thanks!
0
Comment
Question by:jonofat
  • 2
  • 2
5 Comments
 
LVL 75

Assisted Solution

by:käµfm³d 👽
käµfm³d   👽 earned 100 total points
ID: 39185057
It's just some JQuery that changes some styles on the "popup" object.

<script type="text/javascript">
      jqBind('#toggleButton .toggleButton','click',function(e){jqToggle('#loginToggle');jqToggleClass('#loginToggle','selected');jqToggleClass(this,'selected');return false;});
</script>

Open in new window


I'm not too familiar with "jqBind" or "jqToggle", so I'll have to let the others comment on that bit. (From the names I can infer what they do, but I haven't used them so I'm not comfortable commenting on what exactly they do.) Functionally, though, you can see the classes change if you inspect the source with something like the Chrome debugger or perhaps Firebug in Firefox.

Screenshot
0
 
LVL 34

Expert Comment

by:Slick812
ID: 39185580
greetings  jonofat, , The pages here at experts exchange have much custom javascript for display and some functions like showing the LogIn DIV, but you may have to do much work to dive into the EE JS code and see how this is done. But if you just want to do a small Login PopUp DIV, that is not very difficult to do. Let me know what you want in javascript, as, ,  do you need a Framework like Jquery, or just the javascript to do this? This is a common javascript function, you can find many JS tutorials for a click to PopUP  if you do a web search.
How good is your javascript knowledge?
0
 

Author Comment

by:jonofat
ID: 39187160
Hi guys. Thanks for the response. I actually found something via google that isn't the same but is good enough for what I wanted to do so I am sorted. What do I do about points now?
0
 
LVL 75

Expert Comment

by:käµfm³d 👽
ID: 39187169
That's up to you. If you feel either answer helped you, then award accordingly. If your answer was the answer that helped you, then choose that as the solution. You might post a link to the latter for the benefit of others.
0
 
LVL 34

Accepted Solution

by:
Slick812 earned 400 total points
ID: 39191892
OK, I have some code that has a functional opens "a pop up type thing for sign in", it is NOT based on EE code, which is modular for javascript and CSS.  But as all HTML elements, your "pop up" will depend on the location on page you place it, maybe it's neighbors (below, sides), and colors and sizes.

<script>/* <![CDATA[ */
function showLog(){
var lf = document.getElementById("logform");
lf.style.visibility='visible';
document.login.name.focus();
}
/* ]]> */</script>

<style>
.log1 {position:relative;
width:8em;
height:1.5em;
background:#4bd;
text-align:center;
padding-top:5px;
}

.log1 a {color:#000;
text-decoration:none;
font-weight:bold;
}

.log1 a:hover {color:#faa;}

.log1 form {position:absolute;
top:1.5em;
left:-5em;
width:16.2em;
height:5.9em;
background:#fff;
text-align:center;
z-index:3;
border:solid 6px #4bd;
visibility:hidden;
padding-top:1em;
margin-bottom:0;
-webkit-border-radius:12px;
-moz-border-radius:12px;
-ms-border-radius:12px;
-o-border-radius:12px;
border-radius:12px;
}

.butX {display:block;
position:absolute;
width:16px;
height:16px;
top:-2px;
right:-2px;
background:#e66;
line-height:16px;
font-size:15px;
font-family:arial,helvetica,sans-serif;
border:solid 1px #5ce;
-webkit-border-radius:4px;
-moz-border-radius:4px;
-ms-border-radius:4px;
-o-border-radius:4px;
border-radius:4px;
}

.inT {border:inset 2px #666;
color:#840;
background:#eef;
margin-bottom:5px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
-ms-border-radius:4px;
-o-border-radius:4px;
border-radius:4px;
}
</style>

<div class="log1"><a href="#" title="Login"  onclick="showLog()">Member Login</a>
    <form id="logform" name="login" action="logit.php" method="post">
        <a class="butX" href="#" style="color:#fff;" onclick="document.getElementById('logform').style.visibility='hidden';">X</a>
        name: <input name="name" type="text" class="inT" onfocus="this.style.background='#fee';" onblur="this.style.background='#eef';" />
        <br />password: <input type="password" name="pass" class="inT" onfocus="this.style.background='#fee';" onblur="this.style.background='#eef';" />
        <br /><input name="sub" type="submit" value="Log In" /><
    /form>
</div>

Open in new window

This works for me, and does Not look exactly like the EE pop-up, and has some things that the EE does not. You may not can use it, but any and all of it can be adjusted to factors that a page has on it (colors, sizes).
Ask questions if you need more info.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question