hide - Understanding jQuery

Recommendations

Info

Sometimes it makes sense to make the button out of the tag (which creates a hyperlink) and simply re-style it into a button and mute HREF functionality. You may think that is a convenient choice because by default the tag is already clickable. However, this is not a good reason for choosing the tag to create buttons at all. In fact the default clickability of the tag should be muted entirely if we want it to serve as a CSS button. Later on you will see that we will override all button events using jQuery’s .bind() method instead of using the href or onclick attributes. Doing it this way makes it easy to switch to DIV later on if in fact you do run into some type of a CSS style conflict that has to do with element tag name collisions. Let’s compare the two HTML tags that can be used to spur the roots of HTML button creation: Okay Okay Normally, we should reserve the tag specifically for hyperlinks to avoid clashing CSS styles between hyperlinks and buttons that may be added later on in our project. We can, however create a special button and refer to it by its class name. Such a button can be created using the A.button {...} style as in Okay) as long as we promise ourselves that all buttons will be created this way (to keep our CSS files organized and easier to work with). Working on a serious web project your responsibility is to do everything in your power to ensure that the buttons created using the tag will work the same and look the same in all browsers. While I try to maintain at least some cross-browser compatibility in my tutorials you can say that this tutorial is mainly limited to the Chrome, Firefox, Safari and the latest version of Internet Explorer browser. Writing a different tutorial for each browser could interfere with the fundamental concepts presented here and I think one could write an entire book talking about the differences between browsers alone. Keep Things Simple At The Root Choose one tag. But don’t choose both (A and DIV) to represent different buttons. Sticking to one tag may prevent future confusion. Within the context of this tutorial I am going to explain the details of using both: the tag and the tag to create buttons which are pretty much the same minus some trivial differences. 129
The DIV tags don’t have to deal with the HREF attribute. Aside from that the two tags will produce identical results. However, for this to be true within our script there are a few things you should know about the tag. Dealing with A and HREF The tag has the infamous HREF attribute which is used to specify the destination of the hyperlink. But we don’t want a button created using the tag to go to a web page. In other words, we want our universal button to be able to respond to a click event. But we don’t want to do that using the onclick attribute either. After all, this is a jQuery tutorial and jQuery offers the convenience of using events which are accessible within a single point in our JavaScript code. Being able to access important code from a single point in our script will save time working on our application in the long term. jQuery allows us to bind events to our buttons and this code will always be stored in the same place during initialization of our web page (let’s say within the $(document).ready event.) This will prevent us from having to jump from one onclick element to another throughout the entire HTML part of our web application. And when the time comes to deal with modifying button functionality in the future we can always refer to that single place in our code to modify button functionality. And save ourselves a headache. Let’s now talk more about the HREF attribute. As we just discussed we will be using jQuery events instead of onclick and HREF attributes. This means that we need to figure out a way to completely disable HREF. You probably already know that when instead of providing a URL we can use the number symbol # followed by a custom anchor name (like #Paris) as HREF value. This will make the vertical scrollbar “jump” to the anchor location named “Paris” on your website. In other words Clicking on this link: Go to paris the page will jump to a location marked by this code: Travel to Paris We can simply use just the # symbol as in Return to top of the page and this way, seeing how the anchor name is not provided at all, the web page will jump back to the very beginning. This is the default hyperlink functionality. But we want this to be completely disabled for our button. We don’t want the button to go to any URLs or anchors. And we definitely don’t want our button to jump back to the very top of the page when it’s clicked. But we do want something to happen when a button is clicked using a jQuery event. We’ll discuss that momentarily. For now let’s disable the HREF functionality completely by doing one of the following: 130
Page 1 and 2:
“ Second Revision. July 2012 Unde
Page 3 and 4:
Prototype, JavaScript Objects and J
Page 5 and 6:
Thought transcends matter. When we
Page 7 and 8:
Preface The purpose of this book is
Page 9 and 10:
A Lesson in Creativity The web deve
Page 11 and 12:
I love jQuery because it allows me
Page 13 and 14:
Improving Page Load Performance The
Page 15 and 16:
Determining the Placement of Intern
Page 17 and 18:
JavaScript 1. The only language peo
Page 19 and 20:
What is JavaScript? Web designers u
Page 21 and 22:
As you can see, variables can be as
Page 23 and 24:
The example above will first execut
Page 25 and 26:
Only variables and events should be
Page 27 and 28:
Notice that variables a and b are c
Page 29 and 30:
What Exactly is a JavaScript Variab
Page 31 and 32:
A variable allocates enough data st
Page 33 and 34:
Do you want to really understand pr
Page 35 and 36:
What is a Variable? Variables can b
Page 37 and 38:
In order to understand bitwise logi
Page 39 and 40:
At first this might seem confusing.
Page 41 and 42:
Let’s display the variable “a
Page 43 and 44:
What’s important is the return va
Page 45 and 46:
Inserting Form Values into MySQL Da
Page 47 and 48:
I like code that you can “read”
Page 49 and 50:
An object is created from a class.
Page 51 and 52:
Dynamic Prototype-based Objects in
Page 53 and 54:
Without knowing anything at all abo
Page 55 and 56:
More About JSON JSON is a data inte
Page 57 and 58:
In some programming languages the t
Page 59 and 60:
JavaScript from scratch. If you are
Page 61 and 62:
property access operator - the . (d
Page 63 and 64:
Why does jQuery do exactly the same
Page 65 and 66:
Learning jQuery The greatest thing
Page 67 and 68:
If this sounds like you, then you w
Page 69 and 70:
Web App Initialization To initializ
Page 71 and 72:
In JavaScript, we can define variab
Page 73 and 74:
As mentioned above, to an experienc
Page 75 and 76:
Including jQuery In Your Source Cod
Page 77 and 78:
Including jQuery as an External CDN
Page 79 and 80:
Including jQuery UI In the Starting
Page 81 and 82:
What Kind of Elements Can You Selec
Page 83: To traverse the DOM and make sure t
Page 86 and 87: Here is a basic inline CSS example
Page 88 and 89: Because the DIV element has ID of
Page 90 and 91: After selecting all of these input
Page 92 and 93: Figure 1 Mentality of a beginner jQ
Page 94 and 95: Whose Children Are These? If we are
Page 96 and 97: Next, let’s explore the possibili
Page 98 and 99: jQuery Events Because jQuery is so
Page 100 and 101: Of course, the effects of binding a
Page 102 and 103: Using toggle() Events Toggling betw
Page 104 and 105: Speed Up Your jQuery Code jQuery is
Page 106 and 107: Let’s now look at the jQuery way
Page 108 and 109: Practical jQuery Lessons Instead of
Page 110 and 111: There is a solution to this problem
Page 112 and 113: jQuery provides a secondary way of
Page 114 and 115: Lesson 3: Callback Functions All jQ
Page 116 and 117: For example, the following statemen
Page 118 and 119: As you may know an object can conta
Page 120 and 121: Notice that when we do it this way,
Page 122 and 123: Alternatively, we can create the pa
Page 124 and 125: if (“light”.match(/darkness/) =
Page 126 and 127: jQuery and Regular Expressions In p
Page 128 and 129: This is probably as simple as it ge
Page 130 and 131: The following example will demonstr
Page 132 and 133: Making Good CSS Buttons This tutori
Page 136 and 137: 1. Specify javascript: return false
Page 138 and 139: Our goal is to match the button wit
Page 140 and 141: So far, we have briefly discussed t
Page 142: Note from the Author Looks like you
show all

hide - Understanding jQuery

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?