Trying to make my own project

Give us the code, i will help you find your problems!

Is this specifically a JS validator?
I would not have expected it to return so many errors. See if Mozilla has one that it recommends also check W3C.

The code is on the top. And how did you get such a cool profile picture?

I think it supports many languages.

Wow, your last bracket is useless

Here is the correct version of your javascript code
var sign_in =function(){
('.sign-in-button').click(function(){ (’.sign-in-dropdown’).toggle();
});
}
(document).ready(sign_in);

Now are there any errors? If so please post the html and css code so i can validate that to. Thankyou

Glad you like it :grinning: I made it in InkScape. There is a link to my blog in my profile. I go through great pains to explain how to make images with InkScape. Not overblown and overly technical. I would be happy to help you personally if you are interested in learning how to make your own. I make my images without plugins and without gaussian blurs etc. Check it out. InkScape is free and awesome.

1 Like

That’s cool but I was targeting that question to amanuel2

DOH!!! (must be twenty characters.) @amanuel2 please post link of Validator you are using.

Is there any more problems now? In the console error message?

And how did you make it? What program etc? Your GIF. Kind of messed up considering we are using a free learning site and requesting free help.:smirk: However if the owners of the site will get upset keep it secret.:no_mouth:

Is it a must to know? Cause i prefer to keep it private, its a private website.

@printcoder_eric See my post above. Those are the only problems in your JS, the rest are just different coding styles which you can ignore. After you fix those two things, the reason the sign-in form is showing by default is because you aren’t hiding .sign-in-dropdown. Try adding this in your CSS file:

.sign-in-dropdown {
  display: none;
}

That way the dropdown will be hidden on page load and will only be shown once you click the button.

It isn’t doing anything when clicked. But the hiding in css did it’s trick.

@printcoder_eric Could you please put your updated code in a pen & post the link here so we can take a look through the code?

Here is the pen

What are you talking about?

Your code works fine if you click next to your tag with the href attribute. Just click on the invisible white space to the side. You can’t turn an A tag into a button if it has an href attribute, it’s throwing an error.e

If you want your code to work as it is, just remove the a tag and have ‘Sign In’ inside the div container as plain text. If you want it to look like a button than user the css properties below.

.sign-in-button {
    cursor: pointer;
    text-decoration: underline;
    color: blueSomething;
}

Despite working however, your jQuery is messy, I would recommend cleaning up your syntax.

// Define Function
// Do not assign an event handler to an item every time it is called
function sign_in(item){
  $('.sign-in-dropdown').toggle(500);
}

// Use jQuery symbol when appropriate despite getting away with not needing it
$(document).ready(function() {
  
  // Declare event handler with function inside, remember to call it as a function
  $('.sign-in-button').click(function(){
    sign_in();
  });

});

I am talking to amanuel2 not you printcoder_eric. I was asking him to post the link to the validator that he was using. Then I was asking what he used to make his GIF. He stated it was secret so I was giving him some grief.

@printcoder_eric Thanks. If you remove the .sign-in-button class from your <a> tag, I found it works. So lines 41 to 43 look like this:

<div class="sign-in-button">
  <a href="file:///Users/eric/Desktop/SciSols/scisols.org/sign_in/signin.html">Sign In</a>
</div>

Sure it’s important to get the results you want, but it’s more important to get there using proper code. It sounds like this solution is just a bypass to an underlying problem with no explanation.

The reason this works, is because as it stands he is assigning the same class to two elements. I did not notice what was causing the double toggle to occur, however what I stated in my post above was that you could click on the empty white space of the container for the a tag, and it would work, however by clicking the a tag it’s running the function twice, toggle + toggle. However this is not a fix, because it seems as though he wants a jQuery event to work on the page, however he’s also targeting an a tag which points to another file. This does not make sense, as if this was a functioning page, it’d just load the target page before you’d be able to load the username and password section.

3 Likes