Button/drop-down form headache!

[Everton]

Hello

I have a CSS button that, when an arrow is clicked, should drop down into a form like this:

Button

Sadly, my attempt at customising this button has only been partly successful:

Button1

The form does not drop down presumably because the arrow is not entirely visible? I have added a couple of extra fields to the
first link above but I am not sure how they have turned out because I can’t see the drop-down form.

The stylesheet that governs DimaRegister.html is register.css and I suspect the problem lies here:

/* Register Button */
#registerForm #register {
    width:auto;
    float:left;
    background:#339cdf url(../images/loginbuttonbg.png) repeat-x;
    color:#fff;
    padding:7px 10px 8px 10px;
    text-shadow:0px -1px #278db8;
    border:1px solid #339cdf;
    box-shadow:none;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    margin:0 12px 0 0;
    cursor:pointer;
    *padding:7px 2px 8px 2px; /* IE7 Fix */
}

and, in particular, with this line: #registerForm #register {

In the first link above, Dimalogin1.html, the stylesheet (style1.css) has this:

/* Sign In Button */
#loginForm #login {
    width:auto;
    float:left;
    background:#339cdf url(../images/loginbuttonbg.png) repeat-x;
    color:#fff;
    padding:7px 10px 8px 10px;
    text-shadow:0px -1px #278db8;
    border:1px solid #339cdf;
    box-shadow:none;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    margin:0 12px 0 0;
    cursor:pointer;
    *padding:7px 2px 8px 2px; /* IE7 Fix */
}

I would be grateful for any help in getting this to work.

Thanks

Everton

[nixnerd]

Please make a Codepen for this.

[Everton]

Hello Nix

Please excuse my naivete – do you mean click on the

CodePen
Chris Coyier

icon at the bottom of the page and paste the (erroneous) code I have?

[nixnerd]

Yep. That’s how we do it around here.

You can see the tips for forum use in the right column:

Use a live demo tool like CodePen to demonstrate problems.

Paste your HTML and CSS… then we fiddle with it until it works.

[Everton]

Great idea!

Does this make any sense?

[MOD EDIT – non-functional CP link removed]

Thank you again for your time.

You have both links, don’t you? Can you kind of see what I am trying to do? To have the form drop down and see if my efforts at adding a couple of extra fields have come to anything.

[nixnerd]

We have the links but we hate to use firebug. Looks like your Codepen is not working. All you need is the relevant HTML, CSS and JS if there is any.

[Everton]

Oh, I see what you mean

[Everton]

http://codepen.io/Everton/pen/uphAv

[Everton]

It’s just not doing it.

I have changed from IE to Safari, reset my pwd…..

just not my day!

[nixnerd]

I can see it. Mods, please delete like 3 of these codepens. I reported them NOT for inappropriate content… they’re just clogging this thread.

[nixnerd]

There is obviously some Javascript missing. The link you sent that has a working example is not done with pure CSS. Did you follow a tutorial? Can we have a link to that?

[Everton]

Yes, there is, at the top of the HTML page:

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2″></script&gt;
<script src=”js/login.js”></script>

This is the JS:

// Login Form

$(function() {
var button = $(‘#loginButton’);
var box = $(‘#loginBox’);
var form = $(‘#loginForm’);
button.removeAttr(‘href’);
button.mouseup(function(login) {
box.toggle();
button.toggleClass(‘active’);
});
form.mouseup(function() {
return false;
});
$(this).mouseup(function(login) {
if(!($(login.target).parent(‘#loginButton’).length > 0)) {
button.removeClass(‘active’);
box.hide();
}
});
});

[Everton]

I don’t have a link, sorry.

I have just had that button for ages, liked, it, and thought I would try to customise it.

[Paulie_D]

[MOD COMMENT]

I’ve cleaned up this thread as much as possible but, @Everton ,posting begging comments every hour is NOT recommended.

We aren’t all in the same timezone and we have lives away from CSS-Tricks. If we have time and are are willing, someone will help you out further.

This can hardly be urgent and even if it was…that’s hardly our problem.

Moving on…I’m not sure this is even a CSS problem as it does seem to be more of a JS/JQ issue than anything else. Rather than confusing matters at this stage…I’ll leave it here for now.

[Author]

Posts