Coding-Spot

You are not connected. Please login or register

Coding-Spot » Services Category » Garbage

 
 
 

Failed to use Signin Dropdown Box

Started by -

Message (Page 1 of 1)

#1

weeknight

weeknight
 
Senior Member

Posted June 3rd 2013, 6:44 pm

 

*
THANKED

Hello mr.mark, i want to ask :)

before i try tutorial "Signin Dropdown Box like Twitter with jQuery"
http://www.alessioatzeni.com/blog/signin-dropdown-box-like-twitter-with-jquery/

I've tried but failed. :(
results like this.
my homepage so error :(
Failed to use Signin Dropdown Box 0isW2H1

I just tried, and expect success.,
but failed, because there are some steps you do not understand. :(

mr.mark, can you help me for this problem?
This should be easy, if you are trying. because almost all the tutorials you have tried, and success. :D

my forum:
http://testforum.forumid.net/

please help me mr.mark, thanks before ^_^





#2

Mark

Mark
 
Administrator
Administrator

Posted June 4th 2013, 5:59 am

 
Just make sure you copy the CSS code and it should work already.



https://coding-spot.darkbb.com


#3

weeknight

weeknight
 
Senior Member

Posted June 4th 2013, 7:02 am

 
if to put the css code, I probably will not go wrong. :D

you can see the steps that I do when trying tutorial above. :)
correction if I am wrong xD

first im go to my overall_header> find this part
Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

Now, im paste this below it.
Code:
<div id="top-stuff">
<div id="top-bar-out">
<div id="container">
<div id="topnav">
<div class="active-links">
    <div id="session">
    <a id="signin-link" href="#">
    <em>Have an account?</em>
    <strong>Sign in</strong>
    </a>
    </div>
        <div id="signin-dropdown">
   
        <form method="post" class="signin" action="#">
        <fieldset class="textbox">
        <label class="username">
        <span>Username or email</span>
        <input id="username" name="username" value="" type="text" autocomplete="on">
        </label>
       
        <label class="password">
        <span>Password</span>
        <input id="password" name="password" value="" type="password">
        </label>
        </fieldset>
       
        <fieldset class="remb">
        <label class="remember">
        <input type="checkbox" value="1" name="remember_me" />
        <span>Remember me</span>
        </label>
        <button class="submit button" type="button">Sign in</button>
        </fieldset>
        <p>
        <a class="forgot" href="#">Forgot your password</a>
        <br>
        <a class="mobile" href="#">Already using Twitter via SMS?</a>
        </p>
        </form>
    </div>
        </div>
    </div>
</div>
</div>
</div>

css
Code:
* {
    margin: 0;
    padding: 0;
}

body {
    background: #fff;
    position: relative;
    font: 13px Arial, Helvetica, sans-serif;
}

a {
    text-decoration: none;
    color: #00c6ff;
}

.content {
    width: 960px;
    margin: 0 auto;
    overflow: hidden;
}

#top-stuff {
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 12;
}

#top-bar-out {
    display: block;
    position: relative;
    width: 100%;
    height: 40px;
    background: -moz-linear-gradient(center top, #333333, #111111);
    background: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#111111));
    background: -o-linear-gradient(top, #333333, #111111);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#333333', EndColorStr='#111111');
    box-shadow: 0 1px 2px #666666;
    -webkit-box-shadow: 0 1px 2px #666666;
}

.active-links {
    position: absolute;
    right: 8px;
    top: 0;
}

#container {
    width: 780px;
    margin: 0 auto;
    position: relative;
}

#topnav {
    text-align: right;
}

#session {
    cursor: pointer;
    display: inline-block;
    height: 20px;
    padding: 10px 12px;
    vertical-align: top;
    white-space: nowrap;
}

#session.active, #session:hover {
    background: rgba(255,255,255,0.1);
    color: fff;
}

a#signin-link {
    color: #bababa;
    position: relative;
}

a#signin-link em {
    font-size: 10px;
    font-style: normal;
    margin-right: 4px;
}

a#signin-link strong {
    color: #fff;
}

#signin-dropdown {
    background-color: #202020;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    box-shadow: 0 1px 2px #666666;
    -webkit-box-shadow: 0 1px 2px #666666;
    min-height: 200px;
    min-width: 160px;
    position: absolute;
    right: 0;
    display: none;
}

#signin-dropdown form {
    cursor: pointer;
    padding: 10px;
    text-align: left;
}

#signin-dropdown .textbox span {
    color: #BABABA;
}

#signin-dropdown .textbox input {
    width: 200px;
}

fieldset {
    border: none;
}

form.signin .textbox label {
    display: block;
    padding-bottom: 7px;
}

form.signin .textbox span {
    display: block;
}

form.signin p, form.signin span {
    color: #999;
    font-size: 11px;
    line-height: 18px;
}

form.signin .textbox input {
    background: #666666;
    border-bottom: 1px solid #333;
    border-left: 1px solid #000;
    border-right: 1px solid #333;
    border-top: 1px solid #000;
    color: #fff;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    font: 13px Arial, Helvetica, sans-serif;
    padding: 6px 6px 4px;
}

form.signin .remb {
    padding: 9px 0;
    position: relative;
    text-align: right;
}

form.signin .remb .remember {
    text-align: left;
    position: absolute;
    left: 0;
}

.button {
    background: -moz-linear-gradient(center top, #f3f3f3, #dddddd);
    background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#dddddd));
    background: -o-linear-gradient(top, #f3f3f3, #dddddd);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f3f3f3', EndColorStr='#dddddd');
    border-color: #000;
    border-width: 1px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    color: #333;
    cursor: pointer;
    display: inline-block;
    padding: 4px 7px;
    margin: 0;
    font: 12px;
}

.button:hover {
    background: #ddd;
}

make new javascript 1
Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

make new javascript 2
Code:
$(document).ready(function () {
$('.active-links').click(function () {
    //Conditional states allow the dropdown box appear and disappear
    if ($('#signin-dropdown').is(":visible")) {
        $('#signin-dropdown').hide()
    $('#session').removeClass('active'); // When the dropdown is not visible removes the class "active"
    } else {
        $('#signin-dropdown').show()
    $('#session').addClass('active'); // When the dropdown is visible add class "active"
    }
    return false;
});
Allow to hide the dropdown box if you click anywhere on the document.
$('#signin-dropdown').click(function(e) {
e.stopPropagation();
});
$(document).click(function() {
    $('#signin-dropdown').hide();
$('#session').removeClass('active');
});
});   

done. but failed :(

is there something wrong? if there is one let me know mr.mark. :D

thanks before ^_^





#4

Mark

Mark
 
Administrator
Administrator

Posted June 4th 2013, 7:36 am

 
Apply it on your site, i can't see them :v.



https://coding-spot.darkbb.com


#5

weeknight

weeknight
 
Senior Member

Posted June 4th 2013, 10:48 am

 
done mr.mark,
i done apply on my forum :)
http://testforum.forumid.net/

you can check xD





#6

Nathan Adhitya

avatar
 
Advance Member

Posted June 4th 2013, 3:05 pm

 
hello mostone i can solve this problem now you missed a javascript and have putted something wrong that's all you did
just remove the javascript that have this thing :
Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>





#7

weeknight

weeknight
 
Senior Member

Posted June 4th 2013, 4:22 pm

 
done, but not eff on my forum :)
still error :(
http://testforum.forumid.net/





#8

Nathan Adhitya

avatar
 
Advance Member

Posted June 4th 2013, 7:21 pm

 
This is an error on your forum that might give a tip
Code:
Uncaught SyntaxError: Unexpected identifier                      99070.js





#9

tommycoo

tommycoo
 
CS Staff
CS Staff

Posted June 4th 2013, 9:53 pm

 
mostone wrote:done, but not eff on my forum :)
still error :(
http://testforum.forumid.net/
did you sure your javascript is enable ?

Failed to use Signin Dropdown Box 2mUqXTw



http://atlanta.forumid.net/


#10

weeknight

weeknight
 
Senior Member

Posted June 4th 2013, 10:31 pm

 
yes, still enable since im add tutorial about "view user menu" :)





#11

Nathan Adhitya

avatar
 
Advance Member

Posted June 5th 2013, 8:57 pm

 
There's An Error on your forum which crashing all of the javascripts





#12

Mark

Mark
 
Administrator
Administrator

Posted August 3rd 2013, 6:20 pm

 
Explained already by Nathan, Old Thread, Locked.



https://coding-spot.darkbb.com


#13

Sponsored content


 

Posted

 





Message (Page 1 of 1)

Similar topics

-

» simple css dropdown menu

Permissions in this forum:
You cannot reply to topics in this forum

In total there is 0 user online :: 0 Registered, 0 Hidden and 0 Guests

Users browsing this forum: None