Search in book...
Toggle Font Controls
Create new playlist

Name your new playlist

Playlist description (optional)
Sign In

Email address

Password

Forgot Password?

or

Continue with Facebook

Continue with Google
Sign Up

Full Name

Email address

Confirm Email Address

Password

or

Continue with Facebook

Continue with Google

Time for action — building custom Ajax tooltips

Follow these steps to set up some tooltips that display Ajax content:

We'll get started by creating an HTML document and associated files and folders like we did in Chapter 1, Designer, Meet jQuery. Our HTML page should contain a couple paragraphs of text that have some links to further information. My first HTML document looks like the following:

<!DOCTYPE html>
<html>
<head>
<title>Pittsburgh, Pennsylvania</title>
<link rel="stylesheet" href="styles/styles.css"/>
</head>
<body>
<h2>Pittsburgh, Pennsylvania</h2>
<p>Pittsburgh is the second-largest city in the US Commonwealth of Pennsylvania and the county seat of Allegheny County. Regionally, it anchors the largest urban area of Appalachia and the Ohio River Valley, and nationally, it is the 22nd-largest urban area in the United States. The population of the city in 2010 was 305,704 while that of the seven-county metropolitan area stood at 2,356,285. <a href="http://infoboxes/downtown.html">Downtown Pittsburgh</a> retains substantial economic influence, ranking at 25th in the nation for jobs within the urban core and 6th in job density.</p>
<p>The characteristic shape of Pittsburgh's central business district is a triangular tract carved by the confluence of the Allegheny and Monongahela rivers, which form the Ohio River. The city features 151 high-rise buildings, 446 bridges, two inclined railways, and a pre-revolutionary fortification. Pittsburgh is known colloquially as "The City of Bridges" and "The Steel City" for its <a href="http://infoboxes/bridges.html">many bridges</a> and former steel manufacturing base.</p>
<p>The warmest month of the year in Pittsburgh is July, with a 24-hour average of 72.6&deg;F. Conditions are often humid, and combined with the 90&deg;F (occurring on an average of 8.4 days per annum), a considerable <a href="http://infoboxes/heatindex.html">heat index</a> arises.</p>
<script src="scripts/jquery.js"></script>
<script src="scripts/scripts.js"></script>
</body>
</html>

We need an easy way to select the three more information links, so we'll add a CSS class to each one like this:
```
<a href ="http://infoboxes/downtown.html" class="infobox">Downtown Pittsburgh</a>
```
Next, we need to create a set of short pages that each contain a photo and a caption for each of the links in my previous text. Here's a sample of one of my short HTML pages:
```
<!DOCTYPE html>
<html>
<head>
<title>Downtown Pittsburgh</title>
</head>
<body>
<img src="../images/downtown.jpg"/>
<p>Downtown Pittsburgh</p>
</body>
</html>
```
As you can see, the file is extremely small and simple.
Create an infoboxes directory alongside the main page. Save your simple HTML file to this directory, and then create more simple files one for each link in the main document.
Now, if you open the main page in a browser and click the links in the text, you'll see that these short, plain pages load up in the browser. We've got the basic functionality down, so next we'll move on to progressively enhancing our page for those with JavaScript enabled.

We'll use the purple color scheme that we set up earlier in the chapter for our tooltips, so let's add the CSS for the ui-tooltip-purple class to the styles.css file:

/*! Purple tooltip style */
.ui-tooltip-purple .ui-tooltip-titlebar,
.ui-tooltip-purple .ui-tooltip-content{
border-color: #c1c3e6;
color: #545aba;
}
.ui-tooltip-purple .ui-tooltip-content{
background-color: #f1f2fa;
}
.ui-tooltip-purple .ui-tooltip-titlebar{
background-color: #d9daf0;
}
.ui-tooltip-purple .ui-state-default .ui-tooltip-icon{
background-position: -102px 0;
}
.ui-tooltip-purple .ui-tooltip-icon{
border-color: #c1c3e6;
}
.ui-tooltip-purple .ui-tooltip-titlebar .ui-state-hover{
border-color: #c1c3e6;
}

Now that we've got our HTML and CSS all set up, let's dive into the JavaScript. Attach the qTip plugin at the bottom of the page, between jQuery and your scripts.js file:
```
<script src="scripts/jquery.js"></script>
<script src="scripts/jquery.qtip.min.js"></script>
<script src="scripts/scripts/js"></script>
</body>
</html>
```
Next, open scripts.js and we'll get started with our document ready function:
```
$(document).ready(function(){
});
```
Next, we're going to call the qtip() method in a slightly different way than we have before. Inside the qtip() method, we need to easily get to the information about just the link we're working with, so we're going to use jQuery's each() method to loop through them one at a time. That will look like this:
```
$(document).ready(function(){
$('a.infobox').each(function(){
$(this).qtip()
});
});
```
Now, if you refresh the page in your browser, you'll see that nothing happens when you hover over the links. This is because our links don't have title attributes, and that's what the qTip plugin is looking for by default. However, we can override that default to insert any content we'd like into our tooltips.
We're going to be displaying those simple HTML pages we set up inside our tooltips. Even though Ajax requests tend to be quick, there could still be a bit of a delay, so let's get ready to use Ajax by adding a loading message that will display for our site visitors while they wait for the real content to show up:
```
$(document).ready(function(){
$('a.infobox').each(function(){
$(this).qtip({
content: {
text: 'Loading...'
}
});
})
});
```
Now when you refresh the page in the browser, you'll see the tooltips contain the Loading... text.
We want to switch the behavior of the tooltips so that they show up when the link is clicked instead of when the mouse hovers over. We also want to make sure that only one tooltip is visible on the page at a time. If the site visitor opens a tooltip while another is already open, the first one should close so they don't end up with many tooltips open all over the screen. This is how we'll do that:
```
$(document).ready(function(){
$('a.infobox').each(function(){
$(this).qtip({
content: {
text: 'Loading...'
},
show: {
event: 'click',
solo: true
},
});
})
});
```
Now if you refresh the page in a browser, you'll see that the tooltip no longer appears when we hover over the links.
However, when we click on the links right now, we're taken to the short simple HTML page we set up. We have to tell the browser to ignore the link because we have other plans in mind. We can cancel the default behavior by adding this line of code above our earlier code and inside the document ready statement:
```
$(document).ready(function(){
$('a.infobox').bind('click', function(e){e.preventDefault()});
$('a.infobox').each(function(){
```
What we're doing here is binding a function that fires when the links are clicked. Our function is pretty simple. We pass the current link to the function (e in this case for brevity, but we could have named it almost anything), and then we tell the browser to prevent the default link behavior.
Now if you refresh the page in the browser, you'll see that the tooltips appear when we click on the links — clicking the links no longer takes us off to a new page.
But we could write our code in a more succinct way. Remember that jQuery allows us to chain methods, one right after the other. In this case, we can chain the bind() method directly to the end of the each() method we wrote earlier. The new JavaScript will look like this:
```
$(document).ready(function(){
$('a.infobox').each(function(){
$(this).qtip({
content: {
text: 'Loading...'
},
show: {
event: 'click',
solo: true
},
});
}).bind('click', function(e){e.preventDefault()});
});
```

Next, let's adjust the style of our tooltips by adding a drop shadow and applying the purple color scheme we wrote to our tooltips:

$(document).ready(function(){
$('a.infobox').each(function(){
$(this).qtip({
content: {
text: 'Loading...',
},
show: {
event: 'click',
solo: true
},
style: {
classes: 'ui-tooltip-purple ui-tooltip-shadow'
}
});
}).bind('click', function(e){e.preventDefault();});
});

Now when you refresh the page in the browser, you'll see that we have purple tooltips that have a drop shadow. We're getting closer.

Next, let's add in the Ajax magic to load our simple HTML pages into the tooltips. Remember, this will only work from a server, so to see this step in action, you'll either have to upload your files to a server, or else set up a server on your own computer.
To tell the tooltips to fetch content via Ajax, all we have to do is pass the URL of the content we'd like to fetch. In this case, we've already linked out to that content. We just have to grab the link URL from each link. That's easily accessible to us by using the attr() method of jQuery. That will look like this:
```
$(this).attr('href')
```
In this case, $(this) is referring to the current link. I call the attr() method and pass that method the attribute I would like to fetch, in this case the href attribute of the link contains the information that I want. The attr() method can be used to fetch any attribute — an src attribute of an image, a title attribute of any element, a cellspacing attribute of a table, and so on:
```
$('img').attr('src')
$('p').attr('title')
$('table').attr('cellspacing')
```

Now that we know how to get the href attribute of our link, we'll use that to tell the tooltip which URL to use to get the content for our tooltip:

$(document).ready(function(){
$('a.infobox').each(function(){
$(this).qtip({
content: {
text: 'Loading...',
ajax: {
url: $(this).attr('href')
}
},
show: {
event: 'click',
solo: true
},
style: {
classes: 'ui-tooltip-purple ui-tooltip-shadow'
}
});
}).bind('click', function(e){e.preventDefault()});
});

Refresh your browser and click on one of the links — you'll see the purple tooltip pop up with the HTML content from our simple HTML pages. Pretty amazing that fetching content with Ajax can be that simple, isn't it?
Now, let's make a couple of other final tweaks to the tooltips to make them even better.

First, we'll add a title bar to the tooltips. To get some custom text for this, let's go back to each of the links in the index.html file and add a title attribute that contains the text to display at the top of the tooltips:

<a href ="http://infoboxes/downtown.html" class="infobox" title="Downtown Pittsburgh">Downtown Pittsburgh</a>
...
<a href ="http://infoboxes/bridges.html" class="infobox" title="Pittsburgh Bridges">many bridges</a>
<a href ="http://infoboxes/heatindex.html" class="infobox" title="Beating the Heat">heat index</a>

Now, we can fetch the title attribute of these links in much the same way that we fetched the URL of the href attribute and pass it to qTip as the title text for the tooltip. While we're at it, we can also pass in a true value for button to show a small close button at the top-right of the tooltip:
```
$(document).ready(function(){
$('a.infobox').each(function(){
$(this).qtip({
content: {
text: 'Loading...',
ajax: {
url: $(this).attr('href')
},
title: {
text: $(this).attr('title'), button: true
}
},
show: {
event: 'click',
solo: true
},
style: {
classes: 'ui-tooltip-purple ui-tooltip-shadow'
}
});
}).bind('click', function(e){e.preventDefault()});
});
```
Now when you refresh the browser, you'll see a darker title bar with a close button appear at the top of each tooltip.
However, if you try to move your mouse over to click the close button, you'll see that the tooltip disappears before you can get there. We changed the show value of the tooltip to show on a click instead of on a mouse hover, but we never changed the hide value — the tooltip is still being hidden when we move our mouse off the link. This is a little bit awkward, so I'm going to change the hide value to unfocus so that the tooltip will be hidden when the link loses focus or when the site visitor clicks the close button on the tooltip:
```
$(document).ready(function(){
$('a.infobox').each(function(){
$(this).qtip({
content: {
text: 'Loading...',
ajax: {
url: $(this).attr('href')
},
title: {
text: $(this).attr('title'),
button: true
}
},
show: {
event: 'click',
solo: true
},
hide: 'unfocus',
style: {
classes: 'ui-tooltip-purple ui-tooltip-shadow'
}
});
}).bind('click', function(e){e.preventDefault()});
});
```
Refresh your browser and you'll see that the interaction is much better now. Our site visitor doesn't have to carefully leave their mouse over the link in order to view the content inside our tooltip. And our tooltip is still easy to remove — the site visitor can click the close button, or click anywhere outside the tooltip on the page and the tooltips hide.

Now, there's just one thing left to do, and that's to position the tooltips right where we'd like them to appear. I want to show my tooltips centered below the links, so I'll match up the top-center of the tooltip with the bottom-center of the link:

$(document).ready(function(){
$('a.infobox').each(function(){
$(this).qtip({
content: {
text: 'Loading...',
ajax: {
url: $(this).attr('href')
},
title: {
text: $(this).attr('title'),
button: true
}
},
position: {
my: 'top center',
at: 'bottom center'
},
show: {
event: 'click',
solo: true
},
hide: 'unfocus',
style: {
classes: 'ui-tooltip-purple ui-tooltip-shadow'
}
});
}).bind('click', function(e){e.preventDefault()});
});

Now, if you refresh the page in the browser and click the links, you'll see the tooltips slide into place from their default position.

Our tooltips are looking good, but we still have a couple of problems. One is that the animation of the tooltip from the bottom corner to the middle of the tooltip is a little bit distracting. To work around this, let's set the effect value to false. That way the tooltip will show up where it's supposed to without the animation of sliding into place. The other problem is that, depending on the size of your browser window, sometimes the tooltips are cut off and display outside the screen area. To make sure this doesn't happen, we'll set the viewport value to the window like the following:
```
$(document).ready(function(){
$('a.infobox').each(function(){
$(this).qtip({
content: {
text: 'Loading...',
ajax: {
url: $(this).attr('href')
},
title: {
text: $(this).attr('title'),
button: true
}
},
position: {
my: 'top center',
at: 'bottom center',
effect: false,
viewport: $(window)
},
show: {
event: 'click',
solo: true
},
hide: 'unfocus',
style: {
classes: 'ui-tooltip-purple ui-tooltip-shadow'
}
});
}).bind('click', function(e){e.preventDefault()});
});
```
Now you'll see when you reload the page in the browser, that the tooltip will display centered below the link if possible, but if that would put it outside the window area, then the tooltip will adjust its position to the best possible place for display in relation to the link. We lose a bit of control over just where the tooltip appears, but we can make sure that our site visitors will always be able to see the tooltip's content, which is more important.

Time for action — building custom Ajax tooltips

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.

Table of Contents for Time for action — building custom Ajax tooltips

Create new playlist

Sign In

Sign Up

Time for action — building custom Ajax tooltips

Table of Contents for
Time for action — building custom Ajax tooltips