Develop Reference

Close lightbox on click outside of the child div

I'm creating a lightbox without using a jquery plugin, and now I'm trying to close it by clicking on the close button or by clicking anywhere else outside of the white area (.white_content)
Jsfiddle Example
<button onclick="document.getElementById('lightbox').style.display='inline';">
Show lightbox
</button>
<!-- LIGHTBOX CODE BEGIN -->
<div id="lightbox" class="lightbox" style="display:none">
<div class="white_content">
Close
<p>Click anywhere to close the lightbox.</p>
<p>Use Javascript to insert anything here.</p>
</div>
</div>
<!-- LIGHTBOX CODE END -->
Although it's not just like I want it. I want it to close only if I click on the dark area of the lightbox and not on the white container (.white_content), I've heard that event.propagation can be a bad thing to use, so here's how I'm closing the lightbox
$(document).on('click', function(event) {
if (!$(event.target).closest('button').length) {
$(".lightbox").hide();
}
});

you can change you condition bit like below
$(document).on('click', function(event) {
if ($(event.target).has('.white_content').length) {
$(".lightbox").hide();
}
});

Most lightbox scripts are using two div-s, content and overlay. Overlay is there for background and to prevent users to click on page content, and also click on overlay can be used to close lightbox.
HTML:
<div id="lightbox"> LIGHTBOX CONTENT </div>
<div id="overlay"></div>
JS:
$( '#overlay, #close').on('click', function(event) {
$("#lightbox, #overlay").hide();
});
$( '#show').on('click', function(event) {
$("#lightbox, #overlay").show();
});
EXAMPLE

You want to close the lightbox on any click that isn't targeting the lightbox or one of its children. Your existing code is pretty close:
$(document).on('click', function(event) {
if (!$(event.target).closest('button').length &&
!$(event.target).closest('.white_content').length) {
$(".lightbox").hide();
}
});
$(document).on('click', function(event) {
if (!$(event.target).closest('button').length &&
!$(event.target).closest('.white_content').length) {
$(".lightbox").hide();
}
});
.textright {
float: right;
}
.lightbox {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0, 0, 0, .8);
}
.white_content {
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 5px solid gray;
background-color: white;
z-index:1002;
overflow: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="document.getElementById('lightbox').style.display='inline';">
Show lightbox
</button>
<!-- LIGHTBOX CODE BEGIN -->
<div id="lightbox" class="lightbox" style="display:none">
<div class="white_content">
Close
<p>Click anywhere to close the lightbox.</p>
<p>Use Javascript to insert anything here.</p>
</div>
</div>
<!-- LIGHTBOX CODE END -->
I'd also recommend using a class to denote whether the lightbox is visible or not, rather than changing the display property directly; that way it's more clear when you check it. Compare $el.is('.active') with $(el).css('display') == 'inline'

How to scroll back to the top of page on button click?

I am creating my product pages by using the object tag code, but every time I click the "view" button, the next page is staying at the same position of previous page which I just viewed. How can I add functionality that will let me view from the top of page every time I click the "view" button?
<div id="container" class="clearfix"><!--! end of #sidebar -->
<div class="holder"></div>
<div id="content" class="defaults"><!-- navigation holder -->
<div id="title2">Office Section</div>
<!-- item container -->
<ul id="itemContainer">
<li>
<div id="product">
<div id="title">FuBang®</div>
<div class="imageOuter" style="margin:0">
<a class="image" href="officesection010.html">
<span class="rollover" ></span>
<img class="imgborder" src="product/officesection/010.jpg" width="165" height="165" />
</a>
</div><br />
<div id="text">Sofa </div><br />
<div id="button">
View Details
</div>
</div>
</li>
</ul>
<br />
<div id="title2"></div>
<div class="holder"></div>
</div>
</div> <!--! end of #content -->
</div> <!--! end of #container -->
When I click the "View Details" button at a specific position "x" here: http://postimg.org/image/vgs0lwhtr/
The next page shows the same position "x", but I want it to jump to the top of page:
http://postimg.org/image/vn80e2lph/

Using Javascript:
document.body.scrollTop = document.documentElement.scrollTop = 0;
Using jQuery:
$(function() {
$('body').scrollTop(0);
});

jQuery(document).ready(function($){
$(window).scroll(function(){
if ($(this).scrollTop() > 50) {
$('#backToTop').fadeIn('slow');
} else {
$('#backToTop').fadeOut('slow');
}
});
$('#backToTop').click(function(){
$("html, body").animate({ scrollTop: 0 }, 500);
//$("html, body").scrollTop(0); //For without animation
return false;
});
});
please refere this, may this help

Sometimes placing scroll to body doesn't work if your current content is generated through jQuery (as it was in my case). In such situation you can just do following.
$(function() {
$('html').scrollTop(0);
});

A small issue with Subhash's jQuery solution is that you must call this code within $(document).ready() in order for your $('body') selector to work. The ready event may not fire before parts of your page have been rendered to the screen.
An better approach is to simply modify the user's location as a work-around to this browser 'feature':
//Above all of your $(document).ready(...) code
document.location = "#";

Simple HTML solution for jumping between page parts
// Place a tag like this where you would like to go
// in your case at the top
<a name="top"></a>
// you will reach there by click of this link better use an image reach their by clicking on this we can also use an image, align in right
last

Back to top button, works in all browsers.To change the scroll speed simply change the x in counter -= x here x = 10
function scrollToTop(){
var myBody = document.body;
var id = setInterval(secondFunction,1);
var height = window.pageYOffset;
var counter = height;
function secondFunction(){
if(window.pageYOffset == 0){
clearInterval(id);
}
else {
if(!!navigator.userAgent.match(/Trident/g) || !!navigator.userAgent.match(/MSIE/g)){
counter -= 10;
counter--;
document.documentElement.scrollTop = counter;
}
else {
counter -= 10;
counter--;
myBody.scrollTop = counter;
}
}
}
}
body {
height: 5000px;
margin: 0;
padding: 0;
}
.backToTop {
position: fixed;
/* Fixed at page */
top: auto;
bottom: 20px;
left: auto;
right: 20px;
background-color: crimson;
color: white;
padding: 5px;
cursor: pointer;
}
header {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100px;
background-color: black;
}
<!-- back to top button -->
<span class="backToTop" onclick="scrollToTop()">TOP</span>
<!-- Header -->
<header>
</header>

Assign an id="#body" and tabindex in the <body> tag
<body id="#body" tabindex="1">
and use jquery focus()
$(function() {
$("#body").attr("tabindex",-1).focus();
}

You can use this method:
function gototop() {
if (window.scrollY>0) {
window.scrollTo(0,window.scrollY-20)
setTimeout("gototop()",10)
}
}

iScroll a dynamically filled div ONLY without scrolling main page also

So this post might get lengthy but I'm stuck with iScroll. What I'm doing is populating my list with articles and when one gets clicked, I'm sliding in a div over the list to display the article. That part works but what doesn't is when I scroll through the article and get to the end, it keeps scrolling the list with articles. You can have a look here (the site is in russian but click on an article and scroll all the way to the bottom). Here's my entire code:
<head>
<style>
body{
padding: 0;
margin: 0;
border: 0;
}
#header{
position:fixed;
top:0;
left:0;
height:100px;
width: 100%;
background-color: black;
}
header{
position: absolute;
z-index: 2;
top: 0; left: 0;
width: 100%;
height: 50px;
}
#wrapper{
position: absolute;
z-index: 1;
width: 100%;
top: 52px;
left: 0;
overflow: auto;
}
#container{
position:fixed;
top:0;
right:-100%;
width:100%;
height:100%;
z-index: 10;
background-color: red;
overflow: auto;
}
#content{
margin:100px 10px 0px 10px;
}
</style>
</head>
<body>
<header>Main News</header>
<div id="wrapper">
<ul id="daily"></ul>
<ul id="exclusive"></ul>
<ul id="must"></ul>
<ul id="main"></ul>
<ul id="ukr"></ul>
<ul id="nba"></ul>
<ul id="euro"></ul>
</div>
<div id="container">
<div id="wrapper2">
<div id="header">
<button onclick="hide();">Back</button>
</div>
<div id="content"></div>
</div>
</div>
<script src="js/zepto.js"></script>
<script>
//AJAX requests to fill the li's...
function sayhi(url){
$('#container').animate({
right:'0',
}, 200, 'linear');
$.ajax({
url: serviceURL + "getnewstext.php",
data: {link: url},
success: function(content){
$('#content').append(content);
}
});
}
function hide(){
$('#container').animate({
right:'-100%'
}, 200, 'linear');
$('#content').empty();
}
</script>
<script src="js/iscroll-lite.js"></script>
<script>
var myScroll;
function scroll () {
myScroll = new iScroll('wrapper2', {hScroll: false, vScrollbar: false, bounce: false});
myScroll2 = new iScroll('wrapper', {hScroll: false, vScrollbar: false});
}
document.addEventListener('DOMContentLoaded', scroll, false);
</script>
</body>
Is there a way to scroll on the div container, or content, or wrapper2 without scrolling the wrapper div with the list of articles? Maybe I'm not using iScroll correctly? The same problem happens on Android and iPhone.
EDIT 1:
I set the wrapper position to fixed. Now the div container is the only one scrolling but the list of articles isn't scrolling...I added another iScroll to the wrapper but it's not working. Any advice here?
EDIT 2:
So I dropped iScroll all together and trying with CSS instead. To my onclick events I added:
$('body').css('overflow', 'hidden');
And when the close button is clicked I changed the overflow to auto. Now this stops the body from scrolling in a browser but not on mobile!!! How can I make it do the same thing on mobile???

I finally got it to work. What I needed to do is add another div inside the wrapper div. I'll share the code so hopefully it helps someone else Here's what the new code looks like:
<body>
<!--Added scroller div(without iScroll it works also...just make two divs so the body isn't scrolled but the second div is scrolled-->
<div id="wrapper">
<div class="scroller">
<header>Main News</header>
<ul id="daily"></ul>
<ul id="exclusive"></ul>
<ul id="must"></ul>
<ul id="main"></ul>
<ul id="ukr"></ul>
<ul id="nba"></ul>
<ul id="euro"></ul>
</div>
</div>
<div id="container">
<div class="scroller">
<div id="header">
<button onclick="hide();">Back</button>
</div>
<div id="content"></div>
</div>
</div>
<script>
$('body').on('touchmove', function(e){
e.preventDefault();
});
//prevents native scrolling so only iScroll is doing the scrolling
//after the AJAX call to get the content, declare your iScroll variable
var myScroll;
myScroll = new iScroll('wrapper');
setTimeout (function(){
myScroll.refresh();
}, 2000);
//set time out to give the page a little time to load the content and refresh your iScroll variable so it takes in the entire content of the wrapper div
var myScroll1;
myScroll1 = new iScroll('container');
//I defined my second iScroll variable here so I can destroy it in the next part...
//function sayhi(url) stays the same but in success of AJAX looks like this:
success: function(content){
$('#content').append(content);
myScroll1.destroy();
myScroll1 = null;
myScroll1 = new iScroll('container');
setTimeout (function(){
myScroll1.refresh();
}, 2000);
}
//when the div slides on the screen and content gets loaded, destroy your second iScroll
//variable, set it to null and define it all over again so it takes in the entire content
And that's it. Works perfectly now with two divs which need to use iScroll on the same page. Hope the explanation is clear enough and helps someone!!!

If div is not hidden click anywhere to hide [duplicate]

This question already has answers here:
How do I detect a click outside an element?
(91 answers)
Closed 9 years ago.
I am trying to make a div hidden by default and show by clicking a button. To close the div, I can either click on the button or anywhere else on the screen. Below is my attempt but the closing part is not working. I appreciated if anyone can point me to the right implementation or maybe a better way to do this.
$('#theDiv').hide();
$("#showDivBtn").click(function(){
$("#theDiv").show();
});
if ( !$('#theDiv:hidden') ) {
$(document).click(function() {
$('#theDiv').hide();
});
$('#theDiv').click(function(e) {
e.stopPropagation();
return false;
});
}
});

placing the entire event handler inside a condition only checks the condition on first pageload, and the event handler is probably never attached, try it like this instead :
$('#theDiv').hide();
$(document).on('click', function(e) {
if ( $(e.target).closest('#showDivBtn').length ) {
$("#theDiv").show();
}else if ( ! $(e.target).closest('#theDiv').length ) {
$('#theDiv').hide();
}
});
FIDDLE

Try this,
$('#theDiv').hide();
$("#showDivBtn").click(function(){
$("#theDiv").toggle();
});
$(document).on("click" , function(event){
if( $(event.target).attr("id") != "theDiv" && $(event.target).attr("id") != "showDivBtn" && $(event.target).parents("#theDiv").attr("id") != "theDiv")
{
$('#theDiv').hide();
}
});

try using
if( !$('.theDiv' ).is( ':visible' ) )
instead of
if ( !$('.theDiv:hidden') )

try this
<script type="text/javascript">
$('.opendiv').hide();
$(document).click(function (event) {
var $target = $(event.target);
if ($target.attr('id') == 'addAccordion') {
if ($('.opendiv').is(':hidden')) {
$('.opendiv').show();
}
else {
$('.opendiv').hide();
}
}
else if ($target.closest('.opendiv').length > 0) {
}
else {
$('.opendiv').hide();
}
})
</script>
<div>
<input id="addAccordion" type="button" value="ADD COMMENT" />
</div>
<div id="rs" class="opendiv">
<h2>
Welcome to ASP.NET!
</h2>
<p>
To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">
www.asp.net</a>.
</p>
<p>
You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&clcid=0x409"
title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
</p>
</div>

I don't think you can target document with a .click handler like that.
Rather than making it so you can literally click anywhere to close the DIV, just make it seem that way. Put a clear DIV behind the one that you want to be able to close and make it cover the whole screen. Then you can attach your click handler to that.
HTML:
<button>Click me to show the DIV</button>
<div class="container">
<div class="thediv">
<p>I'm the DIV</p>
</div>
</div>
JavaScript:
$(document).ready(function () {
var $button = $("button");
var $container = $("div.container");
$button.click(function () {
$container.show();
});
$container.click(function () {
$container.hide();
});
});
CSS:
div.container {
display: none;
position: fixed;
top: -5%;
left: -5%;
width: 110%;
height: 110%;
}
div.thediv {
position: absolute;
top: 30%;
left: 10%;
background-color: gray;
color: white;
padding-top: 1em;
border-radius: 5px;
width: 50%;
}
p {
background-color: black;
text-align: center;
padding: 2em;
}
For demonstration purposes, I made the background DIV visible in this Fiddle

How to open different content in popups on clicking html links

I am using following code.I want to open different content on click.
<style>
#overlay_form {
position: absolute;
border: 5px solid gray;
padding: 10px;
background: white;
width: 270px;
height: 190px;
}
#pop {
display: block;
border: 1px solid gray;
width: 65px;
text-align: center;
padding: 6px;
border-radius: 5px;
text-decoration: none;
margin: 0 auto;
}
</style>
Following javascript
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//open popup
$("#pop").click(function () {
$("#overlay_form").fadeIn(1000);
positionPopup();
});
//close popup
$("#close").click(function () {
$("#overlay_form").fadeOut(500);
});
});
//position the popup at the center of the page
function positionPopup() {
if (!$("#overlay_form").is(':visible')) {
return;
}
$("#overlay_form").css({
left: ($(window).width() - $('#overlay_form').width()) / 2,
top: ($(window).width() - $('#overlay_form').width()) / 7,
position: 'absolute'
});
}
//maintain the popup at center of the page when browser resized
$(window).bind('resize', positionPopup);
</script>
I want to use something like following html
<html>
<div>
<a href="#" id="pop" >Product Overview</a>
<br/>
<div id="overlay_form" style="display:none">
<a href="#" id="close" >Close</a>
</div>
<a href="#" id="pop" >User Interface</a>
<div id="overlay_form" style="display:none">
<a href="#" id="close" >Close</a>
</div>
</div>
</html>
On clicking different links I want to open different content in pop up.
Is is possible without repetition of whole java script with different ids.
Thanks

First of all you can't use the same id twice on the same page, you currently use #pop, #close and #overlay_form on both your links, update them with a class or different ids.
You could add a div inside each of your a tags that stores your content then just show/hide this on click?

There are a number of ways in which you could do this, but the simplest one that uses your existing code, requires switching a lot of your id's to classes. Something like this:
HTML
<html>
<div>
Product Overview
<div class="overlay_form" id="popup1" style="display:none">
<a href="#" class="close" >Close</a><br />
Popup1 text.
</div>
User Interface
<div class="overlay_form" id="popup2" style="display:none">
<a href="#" class="close" >Close</a><br />
Popup2 text.
</div>
</div>
</html>
JS
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//open popup
$(".pop").click(function () {
var targetPopup = $(this).attr('popup-id');
$("#" + targetPopup).fadeIn(1000);
positionPopup(targetPopup );
});
//close popup
$(".close").click(function () {
$(this).closest(".overlay_form").fadeOut(500);
});
});
//position the popup at the center of the page
function positionPopup(targetPopup) {
$("#" + targetPopup).css({
left: ($(window).width() - $('#overlay_form').width()) / 2,
top: ($(window).width() - $('#overlay_form').width()) / 7,
position: 'absolute'
});
}
//maintain the popup at center of the page when browser resized
$(window).bind('resize', positionPopup);
</script>
This approach lets you use the class attribute to define a larger group of items that share the same behavior (as well as styles :) ), while still supporting the "uniqueness" of each popup.
Note: this makes use of a custom attribute (popup-id) which will not validate unless you update your DOCTYPE declaration to include it. Many people simply overlook that issue, though, particularly since HTML5 is adding support for custom attributes.
EDIT: forgot to mention . . . since you are changing your IDs to classes here, you will also need to update your CSS #pop and #overlay_form to .pop and .overlay_form.