• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 218
  • Last Modified:

experts exchange login popup

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
jonofat
Asked:
jonofat
  • 2
  • 2
2 Solutions
 
käµfm³d 👽Commented:
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
 
Slick812Commented:
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
 
jonofatAuthor Commented:
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
 
käµfm³d 👽Commented:
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
 
Slick812Commented:
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

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now