Solved

experts exchange login popup

Posted on 2013-05-21
5
185 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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.
Many old projects have bad code, but the budget doesn't exist to rewrite the codebase. You can update this code to be safer by introducing contemporary input validation, sanitation, and safer database queries.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to count occurrences of each item in an array.

717 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