Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

experts exchange login popup

Posted on 2013-05-21
5
Medium Priority
?
197 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 400 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 1600 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

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

Question has a verified solution.

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

Developers of all skill levels should learn to use current best practices when developing websites. However many developers, new and old, fall into the trap of using deprecated features because this is what so many tutorials and books tell them to u…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
Suggested Courses

618 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