I would maybe try something like this after the line $
(ptotoggle).hide()
$(this).mouseover(function() {
$(this).find('p').show(); } ).mouseout( function() {
$(this).find('p').hide(); } );
You may need to mess with the size of the box to make sure the
mouseover area is where you want it, but that should work out for you.
-Tim
On Oct 29, 11:21 am, gogojuice <[EMAIL PROTECTED]> wrote:
> 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/1">edit</a>
> <a class="modal" href="http://website/element_control/del/blurb/
> 7/1">delete</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('<p><a href="' +
> editlink + '" class="modal">edit</a> <a href="' + dellink + '"
> class="modal">delete</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
