[jQuery] Re: Hide/Close div when clicked outside of it.
So the other option is to have the wrapper not contain the
divLoginBox1 so that clicking inside of divLoginBox1 would not be
clicking inside of wrapper. Just be sure to set the z-index on
divLoginBox1 higher.
On May 2, 4:21 am, Aleksandr [EMAIL PROTECTED] wrote:
I was try to do in this way. But it also close div clicking inside of
it.
So, if I click in wrapper area it close divLoginBox1. But if I clicked
divLoginBox1 area it close it also.
Should be the way how exclude divLoginBox1 area from wrapper div.
This line not help to do it:
$(#wrapper).not('#divLoginBox1')
On May 1, 10:14 pm, Jimslam [EMAIL PROTECTED] wrote:
The Easiest method would be to create a wrapper div that takes up
the entire screen and assign an onClick event to that, which would
then contain the other div. For example:
div id=wrapper
div id=divLoginBox1
Login box content
/div
/div
The CSS for the DIV id=wrapper would be something like:
#wrapper {
position:absolute;
height:100%;
width: 100%;
}
Then the JS would be:
$(#wrapper').click(function() { $('#divLoginBox1').hide(); });
That should do it. You could leave the #wrapper background
transparent or add in some opacity to a background color to emulate a
faded effect to the page content. I believe this is similar to how
well established libraries like thickbox handle the same
functionality.
On May 1, 11:14 am, Aleksandr [EMAIL PROTECTED] wrote:
Yes you right.
Also I have close link inside of the div.
Everything is working, only outside click left.
On May 1, 3:08 pm, Wes Duff [EMAIL PROTECTED] wrote:
Let me see if I have this clear. Once I do I will write you up a
script.
When someone clicks a link a href=#Show Login Box/a you want
to display a div that shows the login box.
When someone clicks somewhere else on the screen and not on the link
you want to hide the login box?
On May 1, 5:08 am, Aleksandr [EMAIL PROTECTED] wrote:
I still have the same issue.
Yes, I have wrapper div how it can be solved in this case?
Thanks
On Apr 30, 7:05 pm, Wes Duff [EMAIL PROTECTED] wrote:
Off the top of my head --- Try something like this
$('div#mydiv').clcik(function(){$('div#mydiv').show();}); //click to
show div
$('div:not(#mydiv)').click(function(){$('div#mydiv').hide()}); click
anywhere else to hide div ## Problem just thought of If you are
using
a wrapper div then you will have the same problem as before. Well
you
get the idea.
This is just off the top of my head but if it donst work you get the
idea.
On Apr 30, 11:17 am, Aleksandr [EMAIL PROTECTED] wrote:
Hi All,
I am showing a div on click of a hyperlink. Now, when i click
elsewhere in
the document other than the div itself, then i want to hide the
showing
div... Is there any easy way to do this?
I've already try:
$('html').click(function() { $('#divLoginBox1').hide(); });
and
$('body').click(function() { $('#divLoginBox1').hide(); });
but this close div when clicked inside of it.
Thanks,
Alex
[jQuery] Re: Hide/Close div when clicked outside of it.
The Easiest method would be to create a wrapper div that takes up
the entire screen and assign an onClick event to that, which would
then contain the other div. For example:
div id=wrapper
div id=divLoginBox1
Login box content
/div
/div
The CSS for the DIV id=wrapper would be something like:
#wrapper {
position:absolute;
height:100%;
width: 100%;
}
Then the JS would be:
$(#wrapper').click(function() { $('#divLoginBox1').hide(); });
That should do it. You could leave the #wrapper background
transparent or add in some opacity to a background color to emulate a
faded effect to the page content. I believe this is similar to how
well established libraries like thickbox handle the same
functionality.
On May 1, 11:14 am, Aleksandr [EMAIL PROTECTED] wrote:
Yes you right.
Also I have close link inside of the div.
Everything is working, only outside click left.
On May 1, 3:08 pm, Wes Duff [EMAIL PROTECTED] wrote:
Let me see if I have this clear. Once I do I will write you up a
script.
When someone clicks a link a href=#Show Login Box/a you want
to display a div that shows the login box.
When someone clicks somewhere else on the screen and not on the link
you want to hide the login box?
On May 1, 5:08 am, Aleksandr [EMAIL PROTECTED] wrote:
I still have the same issue.
Yes, I have wrapper div how it can be solved in this case?
Thanks
On Apr 30, 7:05 pm, Wes Duff [EMAIL PROTECTED] wrote:
Off the top of my head --- Try something like this
$('div#mydiv').clcik(function(){$('div#mydiv').show();}); //click to
show div
$('div:not(#mydiv)').click(function(){$('div#mydiv').hide()}); click
anywhere else to hide div ## Problem just thought of If you are using
a wrapper div then you will have the same problem as before. Well you
get the idea.
This is just off the top of my head but if it donst work you get the
idea.
On Apr 30, 11:17 am, Aleksandr [EMAIL PROTECTED] wrote:
Hi All,
I am showing a div on click of a hyperlink. Now, when i click
elsewhere in
the document other than the div itself, then i want to hide the
showing
div... Is there any easy way to do this?
I've already try:
$('html').click(function() { $('#divLoginBox1').hide(); });
and
$('body').click(function() { $('#divLoginBox1').hide(); });
but this close div when clicked inside of it.
Thanks,
Alex
[jQuery] Re: JQuery timer with reset option
UPDATE:
I had set the mousemove event to bind to window:
$(document).ready(function() {
startTimer();
$(window).bind(mousemove, function()
{ resetTimer(); });
});
That works fine in FF, but IE had some trouble with it. Better to set
that to document
$(document).ready(function() {
startTimer();
$(document).bind(mousemove, function()
{ resetTimer(); });
});
So the full updated script:
My code:
-
/**
* When the document is ready, start the timer
(startTimer();) and
* bind all mouse movement to resetTimer();
*/
$(document).ready(function() {
startTimer();
$(document).bind(mousemove, function()
{ resetTimer(); });
});
/**
* Some vital global variables for the timer
*/
var timerId = 0;
var counterId = 0;
/**
* Start the timer
*/
function startTimer()
{
alertTimerId= setTimeout('refreshPage()',
15000);
updateCounter('15');
}
/**
* Reset the Timer
*/
function resetTimer()
{
clearTimeout ( alertTimerId );
clearTimeout ( counterId );
startTimer();
}
/**
* Refresh the Page
*/
function refreshPage()
{
var sURL = unescape(window.location.pathname);
window.location.replace( sURL );
}
/**
* Update the on-page Counter
*/
function updateCounter(count)
{
count = count - 1;
$('#timer').html(count);
counterId = setTimeout('updateCounter(\''+count
+'\')', 1000);
}
[jQuery] Re: JQuery timer with reset option
Here's a page timer I'm using - right now it's set to 15 seconds and
displays the current count every second in a div with id timer.
There's probably a more elegant solution, but this can at least be a
start. The key is clearing the setTimeout function when the timer
gets reset, as just setting the setTimeout function again won't stop
the previous timer but start a new instance.
My code:
-
/**
* When the document is ready, start the timer (startTimer();) and
* bind all mouse movement to resetTimer();
*/
$(document).ready(function() {
startTimer();
$(window).bind(mousemove, function() { resetTimer();
});
});
/**
* Some vital global variables for the timer
*/
var timerId = 0;
var counterId = 0;
/**
* Start the timer
*/
function startTimer()
{
alertTimerId= setTimeout('refreshPage()', 15000);
updateCounter('15');
}
/**
* Reset the Timer
*/
function resetTimer()
{
clearTimeout ( alertTimerId );
clearTimeout ( counterId );
startTimer();
}
/**
* Refresh the Page
*/
function refreshPage()
{
var sURL = unescape(window.location.pathname);
window.location.replace( sURL );
}
/**
* Update the on-page Counter
*/
function updateCounter(count)
{
count = count - 1;
$('#timer').html(count);
counterId = setTimeout('updateCounter(\''+count+'\')',
1000);
}
