[jQuery] Show hide layer on hover problem
I have created a login layer that slides down from the top of the
screen and i want it so that if the mouse leaves the layer or you
click outside of the layer it slides back up. I have it working on
mouse out but it is buggy and since i am new to this i am sure there
is probably a much better way to do what i am doing.
Can someone please take a look and let me know how to do this?
$(document).ready(function(){
$("#LoginForm").corner("bottom");
$("#LoginLink").click(function(){
if ($("#LoginForm").is(":hidden")){
$("#LoginForm").slideDown("fast");
}
else{
$("#LoginForm").slideUp("fast");
}
if ($(".FormContainer").is(":hidden")){
$(".FormContainer").show("fast");
}
});
setTimeout('$("#messageReply").hide();$("#LoginForm").slideUp
("fast")', 2);
$("#LoginFormContainer").hover(
function() {
$("#LoginFormContainer").show();
},
function() {
setTimeout('$("#LoginForm").slideUp("fast")', 2000);
}
);
$(".Content input").focus(function() {
$(this).parent().addClass("curFocus")
});
$(".Content input").blur(function() {
$(this).parent().removeClass("curFocus")
});
$("a").mouseover(function() {
$(this).fadeOut(100);
$(this).fadeIn(300);
});
// handle hide/show for text field default
values in only one form
inputDefaults = {};
$("#LoginForm input:text, #LoginForm
input:password").clearDefaultText();
});
function closeForm(){
$("#LoginForm .FormContainer").fadeOut("fast");
setTimeout('$("#messageReply").fadeIn("fast")', 350);
setTimeout('$("#messageReply").hide();$
("#LoginForm").slideUp("fast")', 3500);
}
// handle hide/show for text field default values in
only one form
jQuery.fn.clearDefaultText = function() {
return this.each(function(){
var element = $(this);
inputDefaults[element.attr("id")] =
element.val();
element.focus(function() {
if (element.val() ==
inputDefaults[element.attr("id")]) {
element.val('');
}
});
element.blur(function() {
if (element.val() == '') {
element.val(inputDefaults[element.attr("id")]);
}
});
});
}
The main problem is with
the
$("#LoginFormContainer").hover(
function() {
$("#LoginFormContainer").show();
},
function() {
setTimeout('$("#LoginForm").slideUp("fast")', 2000);
}
It seems to work but sometimes it slides up with the mouse over the
layer and you never left the layer.
Any help would greatly appreciated! :)
[jQuery] How to surround All content after a specified HTML attribute H2?
I am trying to look through content in a div and if i find an H2 or whatever attribute the content or HTML that follows it will be encloded in a div with a class. I will do this for every H2 so if i have 3 H2's and some paragraphs after them it will surround all HTML after each of the H2 in a div. So my HTML would look like this... some dummy text Some Content some dummy text Some Content some dummy text Some Content And i want it to do this... some dummy text Some Content some dummy text Some Content some dummy text Some Content Anyone know how to do this and can help me? I am just starting with jquery so any examples would be s appreciated and you would be my hero! :) Thanks in advance
[jQuery] Re: How to surround All content after a specified HTML attribute H2?
OMG! thank you s much! you are the best!
On Feb 19, 12:21 pm, Charlie Griefer
wrote:
> actually i should clarify... not "change", but wrap the elements following
> h2 elements with the specified HTML.
>
> On Thu, Feb 19, 2009 at 10:00 AM, Charlie Griefer
>
>
>
>
> > wrote:
> > On Thu, Feb 19, 2009 at 9:27 AM, cchun...@gmail.com
> > wrote:
>
> >> I am trying to look through content in a div and if i find an H2 or
> >> whatever attribute the content or HTML that follows it will be
> >> encloded in a div with a class. I will do this for every H2 so if i
> >> have 3 H2's and some paragraphs after them it will surround all HTML
> >> after each of the H2 in a div.
>
> > This will change the element following all h2 elements in the doc.
>
> >
> > $(function() {
> > $('h2').next().wrap('<div class="someclass"></div>');
> > });
> >
>
> > If you want it to be just within a certain div, and assuming that div has
> > an id attribute of "foo", it would be:
>
> >
> > $(function() {
> > $('#foo h2').next().wrap('<div class="someclass"></div>');
> > });
> >
>
> > --
> > I have failed as much as I have succeeded. But I love my life. I love my
> > wife. And I wish you my kind of success.
>
> --
> I have failed as much as I have succeeded. But I love my life. I love my
> wife. And I wish you my kind of success.- Hide quoted text -
>
> - Show quoted text -
[jQuery] Re: How to surround All content after a specified HTML attribute H2?
this is working pretty good but i noticed one problem. It only
surrounds the first html attribute.
My content would be more like this...
some dummy text
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Nullam malesuada suscipit pede. Nullam ipsum lacus, varius
vel, nonummy in, consequat ut, neque.
Lorem ipsum
Nullam malesuada suscipit pede. Nullam ipsum lacus,
varius vel, nonummy in, consequat ut, neque. Vivamus viverra. Duis
dolor arcu, lacinia sit amet, sollicitudin sed, aliquet vel, quam.
Pellentesque molestie laoreet tortor. Aenean quam. Pellentesque
magna metus, venenatis sit amet, congue nec, dictum in, est. Aliquam
nibh.
some more dummy text
Integer tincidunt. Cras dapibus. Vivamus elementum
semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula,
porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante,
dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla
ut metus varius laoreet.
Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi
vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam
rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam
semper libero, sit amet adipiscing sem neque
anything else
Here could be your content
Any way to surround all html elements down to the next H2?
On Feb 19, 12:21 pm, Charlie Griefer
wrote:
> actually i should clarify... not "change", but wrap the elements following
> h2 elements with the specified HTML.
>
> On Thu, Feb 19, 2009 at 10:00 AM, Charlie Griefer
>
>
>
>
> > wrote:
> > On Thu, Feb 19, 2009 at 9:27 AM, cchun...@gmail.com
> > wrote:
>
> >> I am trying to look through content in a div and if i find an H2 or
> >> whatever attribute the content or HTML that follows it will be
> >> encloded in a div with a class. I will do this for every H2 so if i
> >> have 3 H2's and some paragraphs after them it will surround all HTML
> >> after each of the H2 in a div.
>
> > This will change the element following all h2 elements in the doc.
>
> >
> > $(function() {
> > $('h2').next().wrap('<div class="someclass"></div>');
> > });
> >
>
> > If you want it to be just within a certain div, and assuming that div has
> > an id attribute of "foo", it would be:
>
> >
> > $(function() {
> > $('#foo h2').next().wrap('<div class="someclass"></div>');
> > });
> >
>
> > --
> > I have failed as much as I have succeeded. But I love my life. I love my
> > wife. And I wish you my kind of success.
>
> --
> I have failed as much as I have succeeded. But I love my life. I love my
> wife. And I wish you my kind of success.- Hide quoted text -
>
> - Show quoted text -
[jQuery] Re: How to surround All content after a specified HTML attribute H2?
Ok i have tried
$('.tabs h2').next().wrapAll('');
but it does not want to wrap all the paragraphs/tables/html in the one
div.
Any ideas?
Thanks for the help!
On Feb 19, 12:21 pm, Charlie Griefer
wrote:
> actually i should clarify... not "change", but wrap the elements following
> h2 elements with the specified HTML.
>
> On Thu, Feb 19, 2009 at 10:00 AM, Charlie Griefer
>
>
>
>
> > wrote:
> > On Thu, Feb 19, 2009 at 9:27 AM, cchun...@gmail.com
> > wrote:
>
> >> I am trying to look through content in a div and if i find an H2 or
> >> whatever attribute the content or HTML that follows it will be
> >> encloded in a div with a class. I will do this for every H2 so if i
> >> have 3 H2's and some paragraphs after them it will surround all HTML
> >> after each of the H2 in a div.
>
> > This will change the element following all h2 elements in the doc.
>
> >
> > $(function() {
> > $('h2').next().wrap('<div class="someclass"></div>');
> > });
> >
>
> > If you want it to be just within a certain div, and assuming that div has
> > an id attribute of "foo", it would be:
>
> >
> > $(function() {
> > $('#foo h2').next().wrap('<div class="someclass"></div>');
> > });
> >
>
> > --
> > I have failed as much as I have succeeded. But I love my life. I love my
> > wife. And I wish you my kind of success.
>
> --
> I have failed as much as I have succeeded. But I love my life. I love my
> wife. And I wish you my kind of success.- Hide quoted text -
>
> - Show quoted text -
