Trying to make my own project

bootstrap
jquery

#1

I tried some thing like this on my own code.
My Javascript/JQuery code looks like this

`var sign_in =function(){
$('.sign-in-button').click(function(){
$('.sign-in-dropdown').toggle();
});
}
}
(document).ready(sign_in);

But when I previewed what this well do with my html, the class '.sign-in-dropdown' is already visible so it basically can't toggle. What do I do?

Here is my what is in '.sign-in-button' and '.sign-in-dropdown' (this is based on what I saw in the beginning of this lesson):


#2

If you need help with this, please post (no images) full code. One of the problems you have is that you already call the function on document.ready:

(document).ready(sign_in);

why would you do this?


#3

But if I copy paste code codeacademy recognizes it as html used for formatting the message. So you mean i don't have to use
(document).ready(sign_in);
?


#4

No, i understand the document.ready, i do not understand why you call your sign_in function on document ready. Did you include jquery library in your code? Could i see your full code?


#5

@stetim94 What's wrong with calling sign_in() on page load? If sign_in() doesn't get called, it won't run I don't think.


@printcoder_eric I see two problems, you've got an extra curly brace before the last line, and (assuming you're using jQuery) you need a dollar sign ($) in front of (document).

How is .sign-in-dropdown being hidden? Like Stetim94 says, it'd be really helpful if you could post your code. If you format it, the forums will show it properly :)


#6

I think you are better of helping here, i haven't done jquery in ages


#7

How to format?


#8

The correct answer is three ` (backticks) located above your tab key. Place them at the beginning and end of your code. Thanks to stetim94 for that one when I was in the introductory phase of the forums.


#10

How do you withdraw a post? Or is it time sensitive and only possible before it is published?


#11

You can just click the trash can under the post


#13

Your code was visible are you reformatting to get rid of the scroll bar?


#14

Sorry I mean't to do this.
Here is the html:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="home.css"></link>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></link>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script src="home.js"></script>
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    </head>
    <body>
        <!-- nav with a bootstrap row in it -->
        <div class="nav">
        <div class="row">
       <nav class="navbar navbar-default">
           <div class='logo'>
            <img src="SciSols%20Logo.png">
           </div>
           <!-- Home, About Us, Debates, Fun links -->
           <div class="nav nav-tabs">
                <a href="file:///Users/eric/Desktop/SciSols/scisols.org/home/home.html">Home</a>
                <a href="file:///Users/eric/Desktop/SciSols/scisols.org/about/about.html">About Us</a>
                <a href="file:///Users/eric/Desktop/SciSols/scisols.org/debates/debates.php">Debates</a>
                <a href="file:///Users/eric/Desktop/SciSols/scisols.org/fun/fun.php">Fun</a>\
                <a href="">Join</a>
               <!-- end of navigation -->
               <!-- sign in dropdown menu -->
               <div class="sign-in-dropdown">
                   <form>
                       <input type="text" name="username" placeholder="Username">
                       <input type="text" name="password" placeholder="Password">
                       <input type="submit" value="Submit">
                   </form>
                   
               </div>
               <!-- end -->
           </div>
            </nav>
        </div>
        </div>
        <!-- sign in -->
               <div class="sign-in-button">
               <a class="sign-in-button" href="file:///Users/eric/Desktop/SciSols/scisols.org/sign_in/signin.html">Sign In</a>
               </div>
               <!-- end of sign in -->
        
            <div class="jumbotron">
                <div class='row'>
                <h3>SciSols</h3>
                <div class="col-md-6">
                    <p> We like to do everything here from helping the homeless to designing robots that might one day go to space. We are also working with a <a href="http://">small company</a> that makes origami and other little trinkets to bring that extra bit of joy to the world that alot of people are in need of.</p>
                </div>
         </div>
        </div>
    </body>
</html>

And here is the Javascript again:

var sign_in =function(){
   $('.sign-in-button').click(function(){
       $('.sign-in-dropdown').toggle();
     });
   }
}
(document).ready(sign_in);

Do you want the CSS too?


#15

They more than likely will. This is probably out of my league. I just wanted to help you format your code. But that does not mean I won't make an honest attempt. I also see that systvan already supplied the link for the formatting be on the look out for those in the future.


#16

Here is the CSS then,

.nav{
    background-color:rgb(65,174,57);
}
.nav{
    margin-left:auto;
    margin-right:auto;
    margin-bottom:auto;
    margin-top:auto;
}
.jumbotron h3{
    margin-left:100px;
    color: green;
}
.jumbotron p{
    text-indent: 45px;
    font-size:25px;
    margin-left:100px;
    margin-right:100px;
}
.jumbotron{
    margin-top:200px;
    margin-right:100px;
    margin-left:100px;
}
 nav a{
    margin-right:50px;
    margin-left:50px;
    margin-bottom:100px;
}
.jumbotron{
    margin-top:  100px;
    margin-left: 200px;
}
.logo{
    margin-top:50px;
}

#17

Google js validators and see if plugging this code into one of them is helpful. The validators can be cryptic at times but I had to use them for my class and if you find an official validator it may just help you track down your error. I use the official validators for html and css. When I am not tinkering.


#18

Just asking, what are validators?


#19

Validators are online programs that parse your submitted code and find errors in the syntax. Here is one for css https://jigsaw.w3.org/css-validator/ and here is another for html https://validator.w3.org/


#21

How did you add more too your post? (edited) Ok I see


#22

You can edit your existing post by selecting the pen icon. Edits will not send an alert to the respondent though to my knowledge. I recommend you save those links in your favorites they are invaluable for troubleshooting.


#23

I tried a validator and it said (The numbers are for number(in list),line,and column):

1 1 14 Missing space between '=' and 'function'.
var sign_in =function(){

2 1 22 Expected exactly one space between 'function' and '('.
var sign_in =function(){

3 1 24 Expected exactly one space between ')' and '{'.
var sign_in =function(){

4 2 4 Missing 'use strict' statement.
$('.sign-in-button').click(function(){

5 2 39 Expected exactly one space between 'function' and '('.
$('.sign-in-button').click(function(){

6 2 41 Expected exactly one space between ')' and '{'.
$('.sign-in-button').click(function(){

7 3 8 Expected '$' at column 13, not column 8.
$('.sign-in-dropdown').toggle();

8 4 6 Expected '}' at column 9, not column 6.
});

9 5 4 Expected '}' at column 5, not column 4.
}

10 5 5 Expected ';' and instead saw '}'.
}

11 6 1 Expected '(end)' and instead saw '}'.
}

I am using code beautify and it doesn't seem to understand what I mean.