Solved

experts exchange login popup

Posted on 2013-05-21
5
178 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 74

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 33

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 74

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 33

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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Consider the following scenario: You are working on a website and make something great - something that lets the server work with information submitted by your users. This could be anything, from a simple guestbook to a e-Money solution. But what…
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…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

760 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now