This forum is now read-only. Please use our new forums! Go to forums
could you please say where I make mistake?
var main =function () { $(‘.btn’).click(function()) { $(‘.status-box’).keyup(function() { var postLength = $(this).val().length; var charactersLeft = 140 - postLength; $(‘.counter’).text(charactersLeft); }); $(document).ready(main);
Answer 5550724595e378ea37000320
Your code must consist of 3 parts… 1- A =main= function, which will be called when your -html.index- file is fully loaded..
var main =function () {
//Begin of =main= FUNCTION-BODY
// code which should be executed
//End of =main= FUNCTION-BODY
};
$(document).ready(main);
2- A =click= Event-handler which is attached to a HTML-Element which is carrying a class attribute with class-name “btn”
$(‘.btn’).click();
3- As part of the =click= Event-handler you want an anonymous Function to be executed when somebody =click=’s on the HTML-Element carrying the class attribute with class-name “btn”
$('.btn').click(
//Begin of =click= Eventhandler
function() {
//Begin of FUNCTION-BODY
//code which is executed as the -btn- is clicked on
//End of FUNCTION-BODY
}
//End of =click= Eventhandler
);
Result program structure should look like
var main =function () {
$('.btn').click( function() {
//--code to be excuted when....
});
};
$(document).ready(main);
Answer 555072b4d3292f8341000352
- - - - - - - - - - - - S t a t u s U p d at e - - - - - - - - - -
= = = = = = = D ocument O bject M odel = = = = =
2html
|
|--------------+-----------|
3head 8body
| |
|-----|+----| |
| | | |
4link 5link 6link 9div
|
|----------------|---------------+---|--------------|
| | | |
10form 15div(.button-group 20ul 24script(2x)
| | .pull-right) (.posts) 25script
11div(.form-group) |
| |
12textarea |
(.form-control |
.status-box) |
|
|----------+----|
16p(.counter) 17a(.btn
| | .btn-primary)
text text
node node
Answer 555072d251b887039c000446
####### status update
class-name disabled….
Where is style for that class? Styling is an Attribute of an Element. In the style.css-file I was wondering where is disabled class.
The “disabled” class-name is -set- by you via the Javascript app.js as an additional class Attribute of the a-Element, which you identify by the class-name “btn”
The sole purpose of the “disabled” class-name is to have an indication, if the <textarea> identified by the clas-name “status-box” has 1 or more characters -set-
If the a-Element has the _”disabled” class-name as a class Attribute set, the Button-Functionality is Blocked. ( you use the Bootstrap-functionality )
Reference::
Answer 55507307d3292f927d00044d
The charactersLeft variable is created by substracting the == length of the actual characters in the status-box == var postLength = $(‘.status-box’).val().length ; from the == maximum characters allowed which is 140 == thus var charactersLeft = 140 - postLength
Now you will have to check on 3 conditions: 1- charactersLeft < 0 You have put in more then 140 characters into the $(‘.status-box’) thus you will want to add a class-attribute with class-name disabled to the HTML-Element which is allready carrying the class-name btn using the jQuery-method addClass()
2- charactersLeft === 140 You have not put any characters into the $(‘.status-box’) thus you will want to add a class-attribute with class-name disabled to the HTML-Element which is allready carrying the class-name btn using the jQuery-method addClass()
3- in all other charactersLeft cases you will want to make sure the btn does NOT have the disabled class-name set. Remove a class-attribute with class-name disabled from the HTML-Element which is allready carrying the class-name btn using the jQuery-method removeClass()
This you can achieve by setting up an IF ELSE-IF ELSE construct like
if ( condition1 ) {
//Begin of IF-codeblock
}
else if ( condition2 ) {
// Begin of ELSE-IF-codeblock
}
else {
//You do not use a condition !!
//Begin of ELSE-codeblock
}
You have to integrate the above mentioned into the FUNCTION-BODY of the $(‘.status-box’).keydown() Event-handler.
$('.status-box').keydown( function() {
//Begin of FUNCTION-BODY
// your code
//End of FUNCTION-BODY
}
//END-of-keydown Eventhandler
);
Answer 5550733595e378f94d000295
+++++ addClass removeClass
Every HTML-Element has so called attributes. One of the possible attributes, is the class-attribute.
If you write the HTML-document, you add the class-attribute within the Element-Tag by using the syntax class-keyword = then a string containing the class-name OR mutliple class-names which are =separated=from=eachother= by a space
Thus with <div class=”myClass1 myClass2 myClass3” ></div> you now have a DIV-Element carrying 3 classes myClass1, myClass2 and myClass3
As part of its CSS-category-of-Methods jQuery gives you the ability to manipulate this class-attribute by providing the addClass()-, removeClass()-, toggle-Class()-Methods. You will have to provide the Method at least 1 argument which is the string VALUE of the class-name. Thus you have to change $(‘.article’).removeClass(‘.current’) $(this).addClass(‘.current’) into $(‘.article’).removeClass(‘current’) $(this).addClass(‘current’)
The confusion when to use a pre-pending dot or NOT… In the Cascading Style Sheet syntax, you have to prepend-a-dot to to the classname so the CSS will interpret it as a class-attribute So in the file style.css you will find an object identified by .current, In this .current object the background property-key is set to a particular VALUE
jQuery uses the same syntax to identify a class-attribute like in the jQuery-selector $(“.current”) by which the HTML-Element is selected into a jQuery-object, this HTML-Element carries the class-attribute with class-name “current”
Reference::
google search class site:jquery.com http://api.jquery.com/class-selector/
what is CSS explained site:developer.mozilla.org https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/What_is_CSS
Some reference-material: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page
Popular free courses
- Free Course
Learn SQL
In this SQL course, you'll learn how to manage large datasets and analyze real data using the standard data management language.Beginner friendly,4 LessonsLanguage Fluency - Free Course
Learn JavaScript
Learn how to use JavaScript — a powerful and flexible programming language for adding website interactivity.Beginner friendly,11 LessonsLanguage Fluency - Free Course
Learn HTML
Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.Beginner friendly,6 LessonsLanguage Fluency