Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

jQuery - Five Questions And Answers

DZone's Guide to

jQuery - Five Questions And Answers

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

I've had quite a good response to these Question and Answer style articles. I got some nice traffic from Nettuts on their "Best of May" list. So I've decided to write part two of this series.

How Can I Increase and Decrease The Text With jQuery?

View The Example

There are several ways that you can accomplish this goal. We'll just focus on one. First, let's add our simple markup.

<div>
<p id="text">
This is some text. This is some text. This is some text. This is some text. This
is some text. This is some text. This is some text. This is some text. This is some
text. This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text. This
is some text. This is some text.
</p>
<a href="#" id="smallerTextLink">Smaller Text</a><br>
<a href="#" id="largerTextLink">Larger Text</a>
</div>

Here we have some generic text and two link. These links, when clicked, will control whether the text is increased or decreased. Now, let's add our jQuery.

$(document).ready(function()
{
$('a').click(function()
{
var theElement = $("#text").css("font-size");
var textSize = parseFloat(theElement, 10);
var unitOfMeasurement = theElement.slice(-2);

if ( (this).id == "largerTextLink")
{
textSize += 2;
}
else
{
textSize -= 2;
};

$('p').css("font-size", textSize + unitOfMeasurement);

return false;
});
});

As always, we'll take it step by step.

$(document).ready(function()
{
$('a').click(function()

When the document is ready to be manipulated, we're going to grab all anchor tags and run a function when they are clicked.

var theElement = $("#text").css("font-size");
var textSize = parseFloat(theElement, 10);
var unitOfMeasurement = theElement.slice(-2);

Here, we are creating a few variables. "theElement" will grab the paragraph with an id of "text" and grab its font-size. ".css" can be used to GET and SET values. When we just add the property in parenthesis, we are telling jQuery to get the font-size for the paragraph. This value will be returned as a number and the unit (i.e. 20px). We need to get separate these two.

The "textSize" variable uses the "parseFloat" method. "parseFloat" will go through a value and cut off any nonnumeric characters. In this case, we're parsing the font-size property in order to get rid of "px". "10" simply means that we're working in base ten.

"unitOfMeasurement" is grabbing the unit of measurement for the font-size by grabbing the last two characters of the value (px). We'll need this in order to add the new value.

if ( (this).id == "largerTextLink")
{
textSize += 2;
}
else
{
textSize -= 2;
};

This if statement is checking to whether the anchor tag that was clicked has an id of "largerTextLink". If it does, then we're going to add 2px to the textSize. This is the same as writing - textSize = textSize + 2 -. If it is not, the user must have clicked the "smallerTextLink" anchor tag. In that case, we'll decrease the textSize by 2px.

$('p').css("font-size",  textSize + unitOfMeasurement);
return false;

Lastly, we're going to grab the paragraph and set a new value. The font-size will be set to the new textSize that we outline plus the unitOfMeasurement. Pretty simple, right?

How Can I Zoom An Image When It Is Clicked?

View The Example

This is a rather easy one. First, we'll add the very brief html.

<img src="img/logo.gif" alt="Logo" id="image">
<p>
Click To Zoom In
</p>

We simply have our image and a paragraph. We could have just as simply used an anchor tag instead of the paragraph. I just wanted to show you that we can apply a click event to anything!

$(document).ready(function()
{
$("#image").css("width", "100px");
$("#image").toggle(function()
{
$(this).animate({width: "300px"}, 1000);
$('p').text("Click To Zoom Out");

}, function(){
$(this).animate({width: "100px"}, 1000);
$('p').text("Click To Zoom In");
});
});

You know the drill...step by step.

$(document).ready(function()
{
$("#image").css("width", "100px");

When the document is ready, we're going to set the width of the element with an id of "image" to 100px. This second part isn't really necessary, it'll just shorten things up a bit.

$("#image").toggle(function()
{
$(this).animate({width: "300px"}, 1000);
$('p').text("Click To Zoom Out");

When the image is clicked, we're going to run the toggle method. Using "toggle", we can set two functions. The first one will be run when the image is clicked once. The second function will be used when the image is clicked a second time. This is best used when creating some sort of expanding/contracting layout.

The first time the image is clicked, we're going to grab "this" (the image that was clicked) and animate it. We'll change the width of the image to 300px and expand to that new size over the course of one second (1000).

}, function(){
$(this).animate({width: "100px"}, 1000);
$('p').text("Click To Zoom In");

The second time the image is clicked, we'll change the width of the image back to 100px and change the text of the paragraph accordingly.

How Can I create A "Read More" Link That Will Instantly Expand To Show The User Additional Text When Clicked?

View The Example

Very easily! Let's add our sample html.

<p>
This is some text. This is some text. This is some text. This is some text. This
is some text. This is some text. This is some text. This is some text. This is some
text. This is some text. This is some text. <span class="readMore">Read More</span>
</p>
<p>
This is some text. This is some text. This is some text. This is some text. This
is some text. This is some text. This is some text. This is some text. This is some
text. This is some text. This is some text. This is some text. This is some text.
</p>

This is just some generic text inside of two paragraph tags. We also have a span with a class of "readMore". When this span tag is clicked, we'll need to remove it.

Now for the jQuery!

$(document).ready(function()
{
$('p:eq(1)').hide();
$('span.readMore').css({"cursor" : "pointer", "color" : "blue", "font-size" : ".8em"}).click(function()
{
$('p:eq(1)').fadeIn("slow");
$(this).fadeOut("normal");
});
});

Here, we are going to hide the second paragraph (p:eq(1). Remember, Javascript uses a base zero. As a result, "1" will be equal to the second paragraph.

$('span.readMore').css({"cursor" : "pointer", "color" : "blue", "font-size" : ".8em"}).click(function()

Next, we'll grab the span tag with a class of readMore and set some CSS. We'll change the cursor to the pointer so that the user has some feedback to let them know that this is a clickable span tag. Next, we'll change the color to a random color in order to make the tag stand out. We'll also decrease the text size just a bit. Next, we'll run a function when the span is clicked.

$('p:eq(1)').fadeIn("slow");
$(this).fadeOut("normal");

When the tag is clicked, we're going to grab that second paragraph (p:eq(1)) and slowly fade it in. Then "this" (the span tag that was clicked) will fade out over the course of .4 seconds ("normal").

That is all there is to it!

How Can I Shift An Image A Specific Number Of Pixels Every Time It Is Clicked?

View The Example

I can solve that one in five lines of code, Bob!

<img src="img/logo.gif" alt="Detached Designs" id="image">
<a href="#" id="scroll">Scroll</a>

That is our simple html. It is just an image and anchor tag. Now for the jQuery.

$(document).ready(function()
{
$("#scroll").click(function()
{
var theLeftAmount = $("#image").css("left");
var theNumber = parseFloat(theLeftAmount, 10);
theNumber += 25;
var amountToShift = theNumber + "px";
$("#image").css("left", amountToShift); });
});

Here we go with the analysis!

$(document).ready(function()
{
$("#scroll").click(function()

When the document is ready to be manipulated, we're going to grab the anchor tag with an id of "scroll" and run a function when it is clicked.

var theLeftAmount = $("#image").css("left");
var theNumber = parseFloat(theLeftAmount, 10);
theNumber += 25;
var amountToShift = theNumber + "px";

Here, we are going to create a few variables. In order to shift the image, we're going to change the "left" property in the CSS. The variable, "theLeftAmount", is going to grab that current value for the left property. If, in the CSS file, the image has the left property set at "20px"..."theLeftAmount" will be equal to "20px".

"theNumber" is going to parse that returned number and remove the "px" off the end. The "10" specifies that we're working with base 10.

Next, we're going to take that number and add 25px to it. We'll then create a new variable called "amountToShift" and make that eqaul to our number "theNumber" plus the unit of measurement - which in this case is "px".

$("#image").css("left", amountToShift); });

Finally, we're going to change the left property of our image to our new value (amountToShift).

Keep in mind that, with all of these examples, using ".css" will add the styles directly to our document. I did it this way to keep things simple. Ideally, you'd want to add the styles directly to your stylesheet and then reference them using "addClass".

This Last Question Is One From Me To All Of You

Is there something that you'd like me to go over in future tutorials? Thanks! I hope all of this helps you. Download The Source Code For All Of These Examples

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:

Published at DZone with permission of Jeffrey Way, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}