[jQuery] Hiding and Showing Elements on a page with mouse over

[gogojuice]

Please can someone help me toggle page elements.

I have some elements on a page and if they have a class of edit I am
wrapping some edit tags around the element and hiding it when the page
loads.

For example:-

div id='blurb_7' class='edit'
Some Text
/div!-- end of blurb_7 --

At run time gets changed to:-

div class=admin
div id=blurb_7 class=edit
p
a class=modal href=http://website/element_control/edit/blurb/
7/1edit/a
a class=modal href=http://website/element_control/del/blurb/
7/1delete/a
blurb
/p
Some Text
/div
/div

by using this bit of code:

$('.edit').each(function() {
var fullid = $(this).attr('id');
var splitid = fullid.split('_');
var editlink = baseurl + 
'element_control/edit/' + splitid[0] +
'/'  + splitid[1] + '/' + pageid;
var dellink = baseurl + 'element_control/del/' 
+ splitid[0] + '/'
+ splitid[1] + '/' + pageid;
$(this).wrap('div 
class=admin').wrapInner('pa href=' +
editlink  + ' class=modaledit/a a href=' + dellink + '
class=modaldelete/a ' + splitid[0] + '/p/div');
ptotoggle = # + fullid +  p;
$(ptotoggle).hide();

});

All this works fine, I have created the html code that I want and then
hidden it from view.

What I want to be able to happen next is that the user then moves
their mouse over the page and when they get to one of the elements
that has the edit class, I show the links.  User moves mouse out of
the area and the edit link is hidden again.  Simple?!?

So I have been trying this and I have come up with the following line
of code which is inserted after the line $(ptotoggle).hide() in the
function above;

$(this).mouseover(function()  { $
(ptotoggle).show(); } ).mouseout( function()  { $
(ptotoggle).hide(); } );

Also tried this:-

$('#' + fullid).mouseover(function()  { $
(ptotoggle).show(); } ).mouseout( function()  { $
(ptotoggle).hide(); } );

What is happening is that only the last element on the page with the
class='edit' is being toggled.

Can someone please help, I am only just starting out with Jquery.

Thanks

[jQuery] Re: Hiding and Showing Elements on a page with mouse over

[gogojuice]

OK that now shows and hides all the elements.  I'm not sure that find
will work as there is something that I forgot to mention.  Elements
can be nested inside other elements.  So basically you can have a
section with some text inside which in turn can have another section
with more text inside etc etc.  Using find will select all the
elements in the tree.

e.g.

div class=admin
div id=section_1 class=edit
p style=display: none;
Links go here
/p
div class=admin
div id=blurb_7 class=edit
p style=display: none;
Links go here
/p
Revolution
/div
/div
/div
/div

 In the example above I have removed the links so the code is more
readable.

So is it possible to just show the links for the element that I am
currently hovering over?

Thanks

[jQuery] Re: Hiding and Showing Elements on a page with mouse over

[gogojuice]

Thanks using children did the trick.  So easy when you know how.

[jQuery] Re: Help refactoring code for css sprite animation

[gogojuice]

Thanks Michael

Your code worked right off the copy and paste.   I knew there was a
recursive procedure in there somewhere, but I'm just getting up to speed
with Javascript after years of ignoring it due to the pain and suffering
involved in writing cross platform stuff.  Jquery has made me want to learn
again.

Thanks Again 
-- 
View this message in context: 
http://www.nabble.com/Help-refactoring-code-for-css-sprite-animation-tp19597457s27240p19604365.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.

[jQuery] Help refactoring code for css sprite animation

[gogojuice]

Sorry if I posted this twice, I've just joined and got told I couldn't post
messages by google groups.  Think I have joined properly now though.

I have a css sprite which I have finally managed to figure out how to
animate.  All is well, except that there is a lot of repetition in the code
and my Software Engineering background is screaming at me telling me to
refactor and get rid of the duplication in the code.

code
$(document).ready(function(){
   $('#mjcwalk').css( {backgroundPosition: '0 0'} )
.fadeOut('slow', function() { $(this).css(
{backgroundPosition: '-500 0'} ).show()
.fadeOut('slow', function() { $(this).css(
{backgroundPosition: '-1000 0'} ).show()
.fadeOut('slow', function() { $(this).css( 
{backgroundPosition:
'-1500 0'} ).show()
.fadeOut('slow', function() { $(this).css( 
{backgroundPosition:
'-2000 0'} ).show()
.fadeOut('slow', function() { $(this).css( 
{backgroundPosition:
'-2500 0'} ).show()
});
});
});
});
}); 
});
/code

What I though I could do was to create a nice for loop and call the same
function over and over again, but can I for the life of me figure out how to
do it.  

Please could someone help me refactor this code into a function as have
tried and tried to figure it out form myself and am getting no where.

[EMAIL PROTECTED]
-- 
View this message in context: 
http://www.nabble.com/Help-refactoring-code-for-css-sprite-animation-tp19597457s27240p19597457.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.