jQuery
Help: IE7 won’t load my JSON but IE8 will – Using a JSON Validator
I just ran into this issue, and found surprisingly little documentation. My JSON request wasn’t returning. I was using the jQuery “getJSON” method to send the request out. Nothing was coming back.
Basic AJAX Tutorial: Smooth Scrolling Text Marquee with a jQuery plugin
This tutorial covers:
- What is a plugin?
- Installing a plugin
- The jQuery Marquee plugin
- Implementing the jQuery Marquee plugin
What is a plugin?
A plugin is an addition to the core jQuery functionality. Plugins are made to be simply integrated into an existing jQuery web page.
For this tutorial, we will be working with the jQuery Marquee plugin from remy sharp’s b: log. Take a look, he did a good job putting his post together.
Installing a plugin
Installing plugins is very easy. This is the easiest part of working with all plugins.
Pretty much:
- Download the plugin
- Upload the plugin to your server
- Include the plugin in your document
First, download the jQuery Marquee plugin here (taken from the original post, The Silky Smooth Marquee). If it just displays in your browser, right click on the link and select “Save Link As…”.
Now that we have the plugin, we just need to post it on our site. Upload it to your javascript folder (I normally use “/js” for this).
Finally we need to include the JS library in your document, so we add the following line (into a very basic document):
<html>
<head>
<script language="javascript" src="js/jquery.js"></script>
<script language="javascript" src="js/jquery.marquee.js"></script>
</head>
<body>
</body>
</html>
It’s uploaded!
The jQuery Marquee plugin
Whenever working with a plugin, normally the plugin page has helpful instructions on it’s use, and examples. In this case that is true.
Again, I’m going to link back to the original page — The Silky Smooth Marquee.
On that page the author has detailed:
- Demo
- Download
- Usage
- How it works
- Events
- Support
Very helpful. Additionally, it helps to look and see if there are any useful comments. Usually commenters point out minor flaws in the code posted (or major!), and supply resolutions. If you follow the conversation thread on the post, you will see commenters have requested functionality that was implemented back into the plugin.
Implementing the jQuery Marquee plugin
Now the final part. This is both easy and hard. The easy part is usually getting the basic implementation working. The hard part comes in when you try to do exactly what YOU want to do with THEIR plugin example. Usually it can be done. Sometimes there are minor modifications that have to be made to the original plugin.
Once you have added the library, all you need to do is include the code. There is a great example page, jQuery Marquee Demo, that shows the various implementations.
For our purposes we’ll implement a basic marquee on our page:
<html>
<head>
<script language="javascript" src="js/jquery.js"></script>
<script language="javascript" src="js/jquery.marquee.js"></script>
</head>
<body>
<marquee behavior="scroll" direction="up" scrollamount="1"
height="75" width="150">
<p>This is a test of a Smooth Marquee using jquery.</p>
<p>This is a test of a Smooth Marquee using jquery.</p>
<p>This is a test of a Smooth Marquee using jquery.</p>
</marquee>
</body>
</html>
The plugin automatically binds to the marquee tag. Does yours work? Check out our example of jQuery scrolling text marquee.
That was too easy?
Yes. If you look at the comments, one common request is to adjust the scroll speed. You can see that our scrollamount is already set to the minimum, 1.
The author recommended setting the timeout (refresh rate) to a larger number. By default, it is set to 25ms. If we wanted to go twice as slow, we just have to change that to 50ms. This is where modifying the core code of the plugin comes in. If you want to go ahead and do this:
- Open up the jquery.marquee.js file.
- Find the line: “setTimeout(animateMarquee, 25);”
- Change it to: “setTimeout(animateMarquee, 50);”
- Upload the new jquery.marquee.js file
The sky is the limit.
Please give us feedback on this tutorial, also take some time to thank the author of this plugin, Remy he’d probably appreciate a follow on Twitter, or even a comment on his blog.
Basic AJAX Tutorial: jQuery toggle and slide
In this tutorial we will review:
- Definition of AJAX
- Introduction to jQuery
- Basic document jQuery preparation
- Binding jQuery actions to an anchor (A) tag
- Toggling visibility of a div
- Sliding in and out of that div
It sounds like a lot, but it’s all very easy.
Definition of AJAX
The term AJAX means Asynchronous JavaScript and XML. That means AJAX technically defines a method for javascript to communicate with XML. Over the past few years AJAX has been interpreted as a means for implementing all “web 2.0″ functionality in the front end. That added things like animations to the general term “AJAX”.
Introduction to jQuery
jQuery is one of my favorite libraries with a good toolset for working with AJAX techniques. You can find out more information on jQuery at their site.
jQuery is a “fast and concise Javascript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development”. Taken from the website itself.
As a javascript library, we will have to include the jQuery library on a page, and implement some of it’s more basic functions.
Basic jQuery document preparation
The first thing we need to do is incorporate the jQuery library in our page. So download jQuery (direct link to the Google Code location).
Now that we have our JS library, we need to tell our document where it is (I renamed my js file to jquery.js, and threw it in the js folder):
<html>
<head>
<script language="javascript" src="js/jquery.js"></script>
</head>
<body>
</body>
</html>
We inserted the SCRIPT tag to include the jquery library when the page is loaded.
Binding jQuery actions to an anchor (A) tag
Lets create a basic link in our document:
<html>
<head>
<script language="javascript" src="js/jquery.js"></script>
</head>
<body>
<a href="javascript:void(0);">Click Here</a>
</body>
</html>
We now have a link that does nothing. You will see that I have bound the link to “javascript:void(0);”. It means that when you click the link, it will execute javascript code after the “javascript:” part. The javascript code to execute is “void(0);”. We do that so nothing happens when you click the code. We are preparing to bind jQuery to the anchor. Some people use “void();”, it depends on your intended functionality. Certain browsers treat the two options differently (off hand I can’t remember the exact behavior differences, one I believe stops page refreshes). Overall it is much better than using the standard “#” hash symbol, as the symbol will cause the browser to go to the top of the page when clicked. That can get very annoying on large pages
Toggling the visibility of a div
We need to do 2 things to toggle the visibility of a div with jQuery. First off, we need a DIV to toggle! Second we need to bind jQuery commands to the anchor link.
We will take advantage of the jQuery toggle effect.
To do this, we change our code below:
<html>
<head>
<script language="javascript" src="js/jquery.js"></script>
<script language="javascript">
$(document).ready(function() {
$('#toggleButton').click(function() {
$('#toggleSection').toggle();
});
});
</script>
</head>
<body>
<a href="javascript:void(0);" id="toggleButton">Click Here</a>
<div id="toggleSection">
Content to toggle on and off
</div>
</body>
</html>
This step we did a lot.
First we added [id="togglebutton"] to the A tag. That lets us identify it in the jQuery code.
Second we added the “toggleSection” DIV to the document. The entire div will be toggled on and off. Again, here we identified the DIV as “toggleSection” to be able to target it with the jQuery code.
Third, we added the jQuery code that actually does the toggling in the HEAD section of the document. jQuery is a javascript engine, so we have to execute the commands in SCRIPT tags. The first line of the code, “$(document).ready(function() {” is complicated. Lets dissect this code.
$(document) — this is the HTML document itself. It is the same as “document” in normal javascript.
.ready( — this is us looking at the “onLoad” part of jQuery. When the document is ready, it executes the “ready” method. Here we are defining what the ready method is.
function () { — basically, we are creating a new function that will fill in for the document.ready method. When the document is ready, our code will be executed. This is smart, as executing code when the page isn’t ready can result in missing elements that aren’t loaded yet.
After that statement, we have “$(‘#toggleButton’).click(function() {“, another complicated statement. Lets break it down:
$(‘#toggleButton’) — we are looking for the “toggleButton” via jQuery. This code finds it for us.
.click( — Instead of setting the value of the “ready” method before, we are setting the function of when the “toggleButton” is clicked. So we need to create a function…
function () { — again, creating a function inline. This will be assigned to the button’s “click” method.
Finally we do the fun stuff, toggling the DIV on and off with “$(‘#toggleSection’).toggle();”. By now it should be easier to read this line. We are finding the toggleSection div, and calling the jQuery method of “toggle()” which will toggle the visibility of the DIV.
We’re done! We are toggling the visibility, check out the demo — jQuery toggle demo. Fortunately, we can still have a little more fun..
Sliding in and out of that div
In the previous step, we toggled the visibility of a DIV. It’s not too exciting, as we could easily do that with javascript before with stylesheets and basic DOM code. What is great about the jQuery library is all of the additional methods for animation it gives us. Lets setup that div to not just appear, or hide — but to slide in and slide out.
For that we will take advantage of the slideUp and slideDown methods, they are just 2 of many Effects available in jQuery.
<html>
<head>
<script language="javascript" src="js/jquery.js"></script>
<script language="javascript">
$(document).ready(function() {
$('#toggleButton').click(function() {
if ($('#toggleSection').is(":hidden"))
{
$('#toggleSection').slideDown("slow");
} else {
$('#toggleSection').slideUp("slow");
}
});
});
</script>
</head>
<body>
<a href="javascript:void(0);" id="toggleButton">Click Here</a>
<div id="toggleSection">
Content to toggle on and off<br>
More content<br>
Slides are more fun with more content<br>
Four lines should be enough
</div>
</body>
</html>We have added a little more content to the DIV, so we can more easily see how the slideUp and slideDown work. There are 2 interesting steps we hav taken.
First, we added an “if” statement to detect if the DIV is hidden or not.
Second, we added code to slideUp or slideDown depending on whether the DIV is actually hidden.
Check out the result on our example — jQuery slideUp and slideDown demo.
Conclusion
I hope this helped some of you out. Let me know if it did. Comments are open!
jQuery 1.3 Released – How to use jQuery
jQuery is a “fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.”
jQuery version 1.3 was released yesterday.
Some new features in 1.3 are:
- Sizzle – a brand new CSS selector engine
- Live Events – event delegation with a jQuery twist
- jQuery Event Overhaul – simplified event handling
- HTML Injection Rewrite – Lightning-fast HTML appending
- Offset Rewrite – Super-quick position calculation
- No more browser sniffing!!
- New API Browser - http://api.jquery.com/
I have yet to play with jQuery 1.3, but will post my impressions after I get some hands on time with it.
Are you new to jQuery?
jQuery is a library that you can include on your web projects. jQuery enables HTML and JavaScript developers to rapidly deploy functionality that traditionally is more complex. Through browser independent APIs, developers and designers can implement event handling, CSS changes, animations, popular web 2.0 effects, or other common function of web 2.0+ sites.
Downloading jQuery
You can get jQuery by going to jQuery.com and downloading the version of jQuery you want:
- Production version – 18kb – Minified for production environments (don’t try to debug this, its a nightmare)
- Development version – 114kb – Developers can go in and see how things work with this version, but the footprint is huge
Getting Started with jQuery
jQuery provides a series of useful tutorials.
Some favorites are:
- Getting Started with jQuery – by Jörn Zaefferer - Goes through the basics of jQuery, all the way up to building plugins.
- jQuery Crash Course – by Nathan Smith – Great overview of what jQuery is and how to start using it.
- Submit a Form Without Page Refresh using jQuery – by Eric @ NETTUTS – Everyone starting out with AJAX wants to know how to do those cool form actions without the page refreshing. Here’s how.
- 5 Tips for Better jQuery Code – by Mark Grabanski – Useful tips to keep in mind when working with jQuery — slightly more advanced, but a good taste of what is to come
- The 20 Most Practical and Creative Uses of jQuery – by Drew Douglass @ NETTUTS – From scratch, how to creatively use jQuery in modern websites.
- jQuery Tip: Animation and CSS Queuing – by Drew Douglass – Queuing up animations is something we all run into and scratch our heads, Drew makes it sound easy.
There are so many more tutorials out there.
jQuery becomes an official part of Microsoft and Nokia Frameworks
As posted on the official jQuery blog, “jQuery, Microsoft, and Nokia“, jQuery is being made an official part of the development platforms for both Microsoft and Nokia.
That’s going to be quite the blow to other frameworks. Does this mean Scriptaculous will be slowing down?
I think this may have been strategic, as Apple has pushed Scriptaculous, and other developers have been using the Yahoo AJAX kit, as well as the Google AJAX kits.
All in all, great news for the talented jQuery team. A great piece of software that is changing the way the web is being built.
Tags
Follow Me
Email Subscription
Recent Posts
Top Commentators
- No commentators.
Archives
Blogroll
- 456 Berea St
- ActionScript 3 Design Patterns
- adactio – home of Jeremy Keith
- ajaxian
- Boxes and Arrows
- Chris Brogan
- CSS Globe
- InsideRIA
- Jarrod Michael Studios
- Mad Vertices
- NETTUTS
- Roomware Blog
- Signal vs. Noise
- Six Revisions
- Snook
- Style Grind
- Tiago’s Weblog
- Viget Extend
- Vitamin
- Whats the latest
- Why Banks Fail
- Woork
- zupko.info
