[jQuery] Re: A better way of writing this code?
Thanks James!
On Thu, May 14, 2009 at 6:49 PM, James james.gp@gmail.com wrote:
Slight typo near the end.
$(document).ready(function() {
$('li.a').hover(
function() { $(this).addClass('move'); },
function() { $(this).removeClass('move'); }
);
)};
On May 14, 3:47 pm, James james.gp@gmail.com wrote:
$(document).ready(function() {
$('li.a').hover(
function() { $(this).addClass('move'); },
function() { $(this).removeClass('move'); }
)};
)};
On May 14, 3:35 pm, Calvin cstephe...@gmail.com wrote:
Hi,
I was able to get this script to work and was wondering if there was
a better/proper/more efficient way of writing it. Here is the script:
$(document).ready(function() {
$('li.a').hover(function() {
$(this).addClass('move');
});
$('li.a').mouseLeave(function() {
$(this).removeClass('move');
)};
)};
Thanks for your time,
Calvin Stephens
[jQuery] Re: jQuery script simplification question
Hi Richard,
Thanks for taking time out of your schedule to help me learn how to
write simplified code!
Cheers,
Calvin
On Thu, Apr 16, 2009 at 9:47 PM, Richard D. Worth rdwo...@gmail.com wrote:
You only need one document.ready, and there's a shorthand:
$(function() {
$(li.one).click(function() {
$(div.a).toggle(highlight, {}, 1000);
});
$(li.two).click(function() {
$(div.b).toggle(highlight, {}, 1000);
});
$(li.three).click(function() {
$(div.c).toggle(highlight, {}, 1000);
});
});
If you're wanting to go even more minimal:
$(function() {
var hash = { one: a, two: b, three: c };
$(li.one,li.two,li.three).click(function() {
$(div. + hash[this.className]).toggle(highlight, {}, 1000);
})
});
- Richard
On Fri, Apr 17, 2009 at 12:26 AM, Calvin cstephe...@gmail.com wrote:
I'm having trouble simplifying my jQuery script... I tried but I am
at beginner level with this stuff.
Here is the jQuery script:
$(document).ready(function() {
(li.one).click(function() {
$(div.a).toggle(highlight, {}, 1000);
});
});
$(document).ready(function() {
(li.two).click(function() {
$(div.b).toggle(highlight, {}, 1000);
});
});
$(document).ready(function() {
(li.three).click(function() {
$(div.c).toggle(highlight, {}, 1000);
});
});
Here is the mark-up:
ul
li class=onetext/li
li class=twotext/li
li class=threetext/li
/ul
div class=atext/div
div class=btext/div
div class=ctext/div
[jQuery] Re: Has anyone used these jQuery books?
I think compatability is important Karl. Also, thanks for the heads up on the reference guide. Cheers, Calvin On Wed, Apr 15, 2009 at 2:32 PM, Karl Swedberg k...@englishrules.com wrote: As one of the authors of jQuery Reference Guide, I'd have to recommend that you not buy it, especially if you already have Learning jQuery 1.3. Some of the information in the reference guide is outdated, and most of it can be found elsewhere. I still haven't gotten my hands on jQuery UI 1.6 (though a photo I took is on its cover), but you should know that a lot changed between 1.6 and 1.7. Also, 1.6 is compatible with jQuery 1.2.x, while 1.7 is compatible with 1.3.x, in case that matters. --Karl Karl Swedberg www.englishrules.com www.learningjquery.com On Apr 15, 2009, at 5:08 PM, Calvin wrote: Hi everybody, Has anyone here read/ used these books: jQuery UI 1.6 by Dan Wellman jQuery Reference Guide by Chaffer Swedberg I am wondering which one is better for learning how to make front-end interfaces for applications. p.s- Learning jQuery 1.3 is a awesome book!
[jQuery] Re: Simple HTML swap question
Hi Karl,
I was actually trying to build on a tutorial from your book- Learning
jQuery 1.3. The example was from Chapter 6 (the appending HTML/ AHAH
technique). Your solution will more than likeley work... I was just
trying to figure out how to make some reuseable code for all of the
links.
Your book is pretty good by the way!
Thanks for your time,
Calvin
On Sat, Apr 11, 2009 at 4:39 PM, Karl Swedberg k...@englishrules.com wrote:
Hi Calvin,
One way you can simplify things is to give each of those containers
(#letters-a, #letters-b, etc.) the same class -- for example, letters.
Bind a click handler to all links within element that have class=letters
Then, inside the click handler, you're going to load a file based on the
last character of the container's id. To do so, first store that letter in a
variable:
1. traverse up through the parent nodes until you find the element with the
letters class
2. grab its id. (for example letters-a)
3. slice the last letter of that id (e.g. a)
When you use the load method, concatenate the variable and .html
This is what it might look like:
$(document).ready(function() {
$('.letters a').click(function() {
var letter = $(this).parents('.letters')[0].id.slice(-1);
$('#dictionary').load(letter + '.html');
return false;
});
});
Hope that helps.
--Karl
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Apr 11, 2009, at 5:46 PM, Calvin wrote:
I have a simple index page with 3 links(with separate ids) and a empty
div/div tag(with an id). I am able to get content to load into the
empty div tags but I am also repeating jquery code to do so. I have
limited experience creating variables and switch/case statements and
I'm thinking that's the best way to go but can't get the code to work.
Here is the code I have so far:
$(document).ready(function() {
$('#letter-a a').click(function(){
$('#dictionary').load('a.html');
return false;
});
});
$(document).ready(function() {
$('#letter-b a').click(function(){
$('#dictionary').load('b.html');
return false;
});
});
$(document).ready(function() {
$('#letter-c a').click(function(){
$('#dictionary').load('c.html');
return false;
});
});
[jQuery] Re: Simple HTML swap question
Thanks for offering to help out more Karl! I was able to get it to work!
Cheers,
Calvin
On Sat, Apr 11, 2009 at 5:16 PM, Karl Swedberg k...@englishrules.com wrote:
Yeah, I thought that looked familiar. ;-) Glad you like the book. Let me
know if you need any more help with that.
--Karl
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Apr 11, 2009, at 7:49 PM, Calvin Stephens wrote:
Hi Karl,
I was actually trying to build on a tutorial from your book- Learning
jQuery 1.3. The example was from Chapter 6 (the appending HTML/ AHAH
technique). Your solution will more than likeley work... I was just
trying to figure out how to make some reuseable code for all of the
links.
Your book is pretty good by the way!
Thanks for your time,
Calvin
On Sat, Apr 11, 2009 at 4:39 PM, Karl Swedberg k...@englishrules.com
wrote:
Hi Calvin,
One way you can simplify things is to give each of those containers
(#letters-a, #letters-b, etc.) the same class -- for example, letters.
Bind a click handler to all links within element that have class=letters
Then, inside the click handler, you're going to load a file based on the
last character of the container's id. To do so, first store that letter in a
variable:
1. traverse up through the parent nodes until you find the element with the
letters class
2. grab its id. (for example letters-a)
3. slice the last letter of that id (e.g. a)
When you use the load method, concatenate the variable and .html
This is what it might look like:
$(document).ready(function() {
$('.letters a').click(function() {
var letter = $(this).parents('.letters')[0].id.slice(-1);
$('#dictionary').load(letter + '.html');
return false;
});
});
Hope that helps.
--Karl
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Apr 11, 2009, at 5:46 PM, Calvin wrote:
I have a simple index page with 3 links(with separate ids) and a empty
div/div tag(with an id). I am able to get content to load into the
empty div tags but I am also repeating jquery code to do so. I have
limited experience creating variables and switch/case statements and
I'm thinking that's the best way to go but can't get the code to work.
Here is the code I have so far:
$(document).ready(function() {
$('#letter-a a').click(function(){
$('#dictionary').load('a.html');
return false;
});
});
$(document).ready(function() {
$('#letter-b a').click(function(){
$('#dictionary').load('b.html');
return false;
});
});
$(document).ready(function() {
$('#letter-c a').click(function(){
$('#dictionary').load('c.html');
return false;
});
});
