Develop Reference

.mouseleave() activate only when moving out of specific border

I'm trying to create a roll up div while mouse is over another div. It opens but I'd like it not to close when leaving through the bottom border. Is it possible using JS or JQuery? Here is my current code:
$("#sell1").mouseenter(function(){
$("#rollup1").css("display","inline");
});
$("#rollup1").mouseleave(function(){
$("#rollup1").css("display","none");
});
$("#sell1").mouseleave(function(){
$("#rollup1").css("display","none");
});

When processing the mouseleave, you can get the dimensions of the element and see whether the event's pageY is below the element:
$("#rollup1").mouseenter(function() {
$("#status").text("Over the element...");
});
$("#rollup1").mouseleave(function(e) {
var $this = $(this);
var bottom = $this.offset().top + $this.height();
if (bottom < e.pageY) {
$("#status").text("Left via bottom edge");
} else {
$("#status").text("Left NOT via bottom edge");
}
});
#rollup1 {
width: 50px;
height: 50px;
border: 1px solid black;
}
<div id="status"> </div>
<div id="rollup1"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

combine two sets of floats on click

I have a folio page. When a user clicks link 'design' - all the relevant design images are shown. When the user clicks 'art' all the relevant art images are shown
What I would like to have is an 'all' button which combines them all.
The two sets are contained in divs which turn on and off perfectly in the below javascript. What I need is to add to the script so there is a function that says - click all and display both, instead of one or the other.
When have them both turned on, they flow into each other fine so thats not an issue. I'll keep the code as brief as I can. I have only icluded one image in each section but there is actually 6-7.
Thanks in advance!
my html is:
<div class="sectiondivider">
<div id="ThumbLinks">
ALL
ART<br />
GD
</div>
</div>
<div class="thumb_container">
<div class="thumbs" id="gd_info">
<div class="flex_one">
<img class="icon-image" src="gd.jpg"/>
</div>
</div>
<div class="thumbs" id="art_info">
<div class="flex_one">
<img class="icon-image" src="art.jpg"/>
</div>
</div>
</div>
CSS:
.gd_thumbs {
display:none;
}
.art_thumbs {
display:none;
}
.icon-image {
width:100%;
height:auto;
opacity:1;
}
.flex_one {
width:28%;
float:left;
position:relative;
background-color:#000;
border: solid 2px rgb(0,81,88);
overflow:hidden;
margin-left:4%;
margin-top:4%;
}
Javascript
$('#ThumbLinks a').click(function(e) {
// do something fancy
return false; // prevent default click action from happening!
e.preventDefault(); // same thing as above
});
$(document).ready(function(){
$("div.thumbs:gt(0)").hide(); // to hide all div except for the first one
$('#ThumbLinks a').click(function(selected) {
var getID = $(this).attr("id");
var projectImages = $(this).attr("name");
$("div.thumbs").hide();
$("#" + getID + "_info" ).fadeIn( "slow" );
});
});

Try this snippet.
It just checks if the link's id is all to show them all and, if not, keeps on with your old code. I tried to keep it as short as possible.
EDIT: I think the effect is nicer if, first of all, you hide them all
$('#ThumbLinks a').click(function(e) {
// first we hide them all (for a nicer effect)
$("div.thumbs").hide();
if ($(this).attr("id") == "all")
// if the ThumbLink's id is 'all' we fade in all the divs
$(".thumbs").fadeIn("slow");
else
// if not, we fade in just the correct one
$("#" + $(this).attr("id") + "_info").fadeIn("slow");
});
$(document).ready(function() {
$("div.thumbs:gt(0)").hide(); // hide all div except for the first one
$('#ThumbLinks a').click(function(e) {
// fisrt we hide them all (for a nicer effect)
$("div.thumbs").hide();
if ($(this).attr("id") == "all")
// if the ThumbLink's id is 'all' fade in all the divs
$(".thumbs").fadeIn("slow");
else
// if not, we fade in just the correct one
$("#" + $(this).attr("id") + "_info").fadeIn("slow");
});
});
.thumbs {
color: white;
}
.gd_thumbs {
display: none;
}
.art_thumbs {
display: none;
}
.icon-image {
width: 100%;
height: auto;
opacity: 1;
}
.flex_one {
width: 28%;
float: left;
position: relative;
background-color: #000;
border: solid 2px rgb(0, 81, 88);
overflow: hidden;
margin-left: 4%;
margin-top: 4%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sectiondivider">
<div id="ThumbLinks">
ALL
ART
<br />
GD
</div>
</div>
<div class="thumb_container">
<div class="thumbs" id="gd_info">
<div class="flex_one">
I'm the GD div
<img class="icon-image" src="gd.jpg" />
</div>
</div>
<div class="thumbs" id="art_info">
<div class="flex_one">
I'm the ART div
<img class="icon-image" src="art.jpg" />
</div>
</div>
</div>

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)
}
}

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

jQuery: Showing a hidden div on page scroll

jQuery
function showDiv() {
if ($(window).scrollTop() > 100) {
$('.lock').fadeIn('slow');
} else {
$('.lock').fadeOut('slow');
});
}
$(window).scroll(showDiv);
showDiv();
HTML (.lock { display: none; position: fixed; })
<div class="lock">
Text
</div>
I'm trying to get a hidden fixed div to appear when you scroll to a certain part of the page, and to disappear when you scroll back up. What am I doing wrong?

looks like a syntax issue
function showDiv() {
if ($(window).scrollTop() > 100) {
$('.lock').fadeIn('slow');
} else {
$('.lock').fadeOut('slow');
}//); <-- drop this close parenthesis/semicolon
}
jsfiddle example

please test this:
put styles in the div.lock element.
<div class="lock" style="display: none; position: fixed;">
Text
</div>