stumped noobie needs help
Hey Everyone,
I've just started playing around with jquery and hit a big roadblock that I've worked my way around but still don't understand and am wondering if anyone can clarify it for me. I'll post two js codes below, the first one has the problem where the third click function wont respond at all though it seems to be written properly. The second code is the one that I've got working by changing the position of the closing parenthesies and braces so that now the third click is inside the second function but the code looks really messy.
Here's an online example so you can see what im doing - this is running the first code.
[url]
http://patrick.horsley.08wdwe07.natcoll ... index.html
[/url]
-
$(function(){
[color=green] //this variable is a paragraph that is appended in the first function[/color]
var placedtext = "<div id='placedtext'><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut nunc a purus eleifend gravida. Phasellus sem sapien, ultrices placerat, elementum in, vestibulum ac, turpis. Quisque sed mauris. Suspendisse potenti. Donec augue eros, condimentum vel, cursus consectetur, tincidunt ut, dui. Curabitur eleifend imperdiet tellus. Aliquam dapibus, risus id tincidunt consequat, est ligula tristique nunc, imperdiet euismod dui lectus vitae erat. Vestibulum eleifend mattis erat. Nunc non ligula. Sed ornare. Donec magna elit, mollis eget, iaculis eget, cursus a, urna. Nam sagittis quam quis odio. Nullam auctor lobortis tellus. Donec quis neque. Quisque sagittis, arcu vitae pretium convallis, nunc nunc rhoncus libero, vel feugiat dolor mauris et pede. Nunc aliquet. Proin turpis dui, rutrum id, tincidunt in, porta at, mauris.</p><a id='controller3' href='#'>Hi There!</a></div>";
$('#controller a').click(function(){
$('#controller').remove();
$('#scroller').fadeIn(2000);
$(placedtext).appendTo('#container');
});
$('#controller2 a').click(function(){
$('#controller2').remove();
$('#scroller').slideUp(2000);
});
$('#controller3').click(function(){
$(this).remove();
});
});//ends onready function
And the Code that is working:
-
$(function(){
var placedtext = "<div id='placedtext'><p id='controller3' ><a href='#'>Hi There!</a></p><p id='p'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut nunc a purus eleifend gravida. Phasellus sem sapien, ultrices placerat, elementum in, vestibulum ac, turpis. Quisque sed mauris. Suspendisse potenti. Donec augue eros, condimentum vel, cursus consectetur, tincidunt ut, dui. Curabitur eleifend imperdiet tellus. Aliquam dapibus, risus id tincidunt consequat, est ligula tristique nunc, imperdiet euismod dui lectus vitae erat. Vestibulum eleifend mattis erat. Nunc non ligula. Sed ornare. Donec magna elit, mollis eget, iaculis eget, cursus a, urna. Nam sagittis quam quis odio. Nullam auctor lobortis tellus. Donec quis neque. Quisque sagittis, arcu vitae pretium convallis, nunc nunc rhoncus libero, vel feugiat dolor mauris et pede. Nunc aliquet. Proin turpis dui, rutrum id, tincidunt in, porta at, mauris.</p></div>";
$('#controller a').click(function(){
$('#controller').remove();
$('#scroller').fadeIn(2000);
$(placedtext).appendTo('#container');
});
$('#controller2 a').click(function(){
$('#controller2').remove();
$('#scroller').slideUp(2000);
$('#controller3').click(function(){
$(this).remove();
});
});
});//ends onready function