Re: [jQuery] need help with simple jQuery problem
Hi Rory,
I will try to give you a detailed explanation.
The file expand.js contains two scripts: the expandAll() plug-in and the
small toggler() plug-in.
1.) expandAll()
- generates the switch 'Expand All/Collapse All' (or, in your case, 'go
ahead.../ ...go back');
- when the 'switch' is clicked, the plug-in toggles the visibility of the
matched elements;
- when the 'switch' is clicked, the strings 'Expand All' / 'Collapse All'
(or 'go ahead... ' / ' ...go back') are swapped;
- if the HTML code consists of pairs of triggers and collapsible sections,
the plug-in toggles the class of the trigger elements. Your code does not
contain such pairs. You have only the generated 'switch', and one
collapsible section.
2.) toggler()
- this script is needed if the HTML code consists of pairs of triggers and
collapsible sections, e.g.,
div class=container
h4 class=expandTitle 1/h4
div class=collapse.../div
h4 class=expandTitle 2/h4
div class=collapse.../div
/div
As I said above, your page does not contain such a structure.
So, you need only the expandAll() plug-in.
In your HTML code, you call the plug-ins expandAll() and toggler() with the
following chunk of code:
$(function() {
$(#outer).expandAll({trigger: span.expand, ref: div.demo});
$(#outer div.demo span.expand).toggler({method: toggle, speed :
1});
});
All you need is expandAll().
When you call the plug-in, you'll want to change some of the default options
because you want a 'slide' effect with duration 'slow', i.e., 600
milliseconds.
Replace the above code with this:
$(function() {
$(#outer).expandAll({
ref: div.demo,
showMethod: slideDown,
hideMethod: slideUp,
speed: 600
});
});
That's all.
Please, let me know if this explanation is clear enough.
Regards,
Adriana
Rory Bernstein wrote:
Hi Adriana,
Adriana, I am honored that you wrote in to help me; it is, or course,
your script I am trying to work with.
I do not understand what you are asking me to do; can you please give
more info/context? Are you saying that I am missing the lines of code
you put in your response? If so, where do I put the code?
I am truly a novice, as you see.
Thank you so much,
Rory
On Jan 20, 9:36 am, Adriana P adipa...@yahoo.com wrote:
Hi Rory,
You need only the expandAll() plug-in:
$(function() {
$(#outer).expandAll({trigger: span.expand, ref: div.demo,
showMethod: slideDown, hideMethod: slideUp, speed: 600});
});
Regards,
Adriana
Rory Bernstein wrote:
Hello,
I am a total jQuery novice, and I tried to use jQuery for a project
but I'm having trouble.
http://www.rorybernstein.com/stage/index2.html
When you click the blue go ahead link, it expands the hidden div,
revealing content. I want the effect to be a slide effect, as on
this sample page:
http://adipalaz.awardspace.com/experiments/jquery/expand.html
From these various examples, I want the slideToggle effect -
slideToggle (slow), as shown in section 2 of the above link.
I cannot figure out what is wrong; my toggle link does work (it
expands the hidden div), but I do not know how to get it to slide at
the speed shown in the sample.
Any help would be appreciated.
Thanks,
Rory
--
View this message in
context:http://old.nabble.com/need-help-with-simple-jQuery-problem-tp27228125...
Sent from the jQuery General Discussion mailing list archive at
Nabble.com.
--
View this message in context:
http://old.nabble.com/need-help-with-simple-jQuery-problem-tp27228125s27240p27260787.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
Re: [jQuery] need help with simple jQuery problem
Hi Rory,
You need only the expandAll() plug-in:
$(function() {
$(#outer).expandAll({trigger: span.expand, ref: div.demo,
showMethod: slideDown, hideMethod: slideUp, speed: 600});
});
Regards,
Adriana
Rory Bernstein wrote:
Hello,
I am a total jQuery novice, and I tried to use jQuery for a project
but I'm having trouble.
http://www.rorybernstein.com/stage/index2.html
When you click the blue go ahead link, it expands the hidden div,
revealing content. I want the effect to be a slide effect, as on
this sample page:
http://adipalaz.awardspace.com/experiments/jquery/expand.html
From these various examples, I want the slideToggle effect -
slideToggle (slow), as shown in section 2 of the above link.
I cannot figure out what is wrong; my toggle link does work (it
expands the hidden div), but I do not know how to get it to slide at
the speed shown in the sample.
Any help would be appreciated.
Thanks,
Rory
--
View this message in context:
http://old.nabble.com/need-help-with-simple-jQuery-problem-tp27228125s27240p27241857.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] need help with simple jQuery problem
Hello, I am a total jQuery novice, and I tried to use jQuery for a project but I'm having trouble. http://www.rorybernstein.com/stage/index2.html When you click the blue go ahead link, it expands the hidden div, revealing content. I want the effect to be a slide effect, as on this sample page: http://adipalaz.awardspace.com/experiments/jquery/expand.html From these various examples, I want the slideToggle effect - slideToggle (slow), as shown in section 2 of the above link. I cannot figure out what is wrong; my toggle link does work (it expands the hidden div), but I do not know how to get it to slide at the speed shown in the sample. Any help would be appreciated. Thanks, Rory
Re: [jQuery] need help with simple jQuery problem
That seems like a lot of code for something so simple. Why don't you just follow the example from the docs: http://docs.jquery.com/Effects/slideToggle#speedcallback ? Nathan
Re: [jQuery] need help with simple jQuery problem
Hi Rory
Like you a jQuery novice, but think I can help. Though I agree there
seems to be a lot of code in here/there that is not needed - plus would not
validate against W3C standards e.g. take out the p after the /h6 and
replace your / 's with strong / strong.
Anyhow here goes - and I have no dobut it can be simplified more
$(document).ready(function(){
$('a.hide').hide();
return false;
});
This is a standard a href = link with an id of hide and makes sure it is
hidden when the page opens
Create another link a href = with an id of toggle
(OK you can name them what you want)
Then in the head try something like
$(document).ready(function(){
$('a.toggle').click(function() {
$('.demo').toggle(400);
$('a.toggle').hide(slow);
$('a.hide').show(slow);
return false;
});
});
$(document).ready(function(){
$('a.hide').click(function() {
$('.demo').hide(slow);
$('a.toggle').show(slow);
$('a.hide').hide(slow);
return false;
});
});
OK, this assumes that the links - hide and toggle are out site your CSS
demo class but you can move them insider the class and hide/show only
based on the links.
e.g.
$(document).ready(function(){
$('a.toggle').click(function() {
$('.demo').show(slow);
return false;
});
});
$(document).ready(function(){
$('a.hide').click(function() {
$('.demo').hide(slow);
return false;
});
});
Rory Bernstein wrote:
Hello,
I am a total jQuery novice, and I tried to use jQuery for a project
but I'm having trouble.
http://www.rorybernstein.com/stage/index2.html
When you click the blue go ahead link, it expands the hidden div,
revealing content. I want the effect to be a slide effect, as on
this sample page:
http://adipalaz.awardspace.com/experiments/jquery/expand.html
From these various examples, I want the slideToggle effect -
slideToggle (slow), as shown in section 2 of the above link.
I cannot figure out what is wrong; my toggle link does work (it
expands the hidden div), but I do not know how to get it to slide at
the speed shown in the sample.
Any help would be appreciated.
Thanks,
Rory
--
View this message in context:
http://old.nabble.com/need-help-with-simple-jQuery-problem-tp27228125s27240p27229401.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
