Handle mouseenter/mouseleave on a div and nested elements with jQuery - javascript

I want to display a toolbar if the mouse is over a div or any of the div's nested elements. But the following solution with jQuery 1.7 only works if the mouse is over the div directly what is only possible if I add a padding to the item css class.
<head>
<script type="text/javascript" src="jquery-1.7.min.js"></script>
<style type="text/css">
.toolbar { display: none; }
.item { padding: 1px; } /* doesn't work without padding! */
</style>
<title>Demo</title>
</head>
<body>
<div class="section">
<div class="item">
<p class="toolbar">TOOLS</p>
<p>content</p>
</div>
<div class="item">
<p class="toolbar">TOOLS</p>
<p>content</p>
</div>
</div>
<script type="text/javascript">
$(".section").on(
"mouseenter",
".item",
function(event) {
$(event.target).children('.toolbar')
.show(100);
}
)
$(".section").on(
"mouseleave",
".item",
function(event) {
$(event.target).children('.toolbar').hide();
}
)
</script>
</body>
A padding of 1px wouldn't be so bad, but it leads to bigger padding at the top and bottom and this workaround doesn't work properly - especially if the mouse enters from the left or right side.
How can I handle mouseenter and mouseleave events without the padding trick?

It seems that the event.target is not the div - changing to $(this) fixes the problem -> http://api.jquery.com/event.target/
http://jsfiddle.net/manseuk/StUvz/

This fiddle I created works fine without padding. Maybe you just need to tweak something small (like a width inherited in the CSS chain).
If that doesn't answer it for you, give us a fiddle that reproduces the problem so we can modify it for you.

This one work without the padding, too http://jsfiddle.net/rkpVW/ you can directly do a on(".item") i think it's the easiest solution for binding elements.
Edit : http://jsfiddle.net/rkpVW/1/ using live for dynamic content

Using $(event.currentTarget) will clear up the issue and will behave the same as $(this) only better as it will continue to work in situations where this is something else:
init: function()
{
$("button").on("mouseenter", this.proxy(function(event)
{
this.classMethod();
console.log( event.currentTarget );
}) );
}
As you can see, event.currentTarget is this:
$("button").on("mouseenter", function(event)
{
console.log( event.currentTarget === this );
});

Related

Removing mouseclick and adding border to simple Javascript

Greetings and thanks in advance for the help. My first hack at javascript. Just trying to add a 2em black border around the slider, and remove the mouse pointer when hovering over the slider (I don't wish to offer links from the pictures).
Link is: www.bakashana.org/test-slider
Here is the entire code:
<html>
<head>
<script language="JavaScript1.1">
<!--
var slideimages=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}
//-->
</script>
</head>
<body>
<center><img src="https://secureservercdn.net/198.71.233.163/4b5.320.myftpupload.com/wp-content/uploads/2019/09/cropped-girls-jump-compressor-400x300_c.jpg" name="slide" border="2em" width=400 height=300></center>
<script>
<!--
//configure the paths of the images, plus corresponding target links
slideshowimages("https://secureservercdn.net/198.71.233.163/4b5.320.myftpupload.com/wp-content/uploads/2019/09/cropped-girls-jump-compressor-400x300_c.jpg","https://secureservercdn.net/198.71.233.163/4b5.320.myftpupload.com/wp-content/uploads/2019/09/All-the-ladies-compressor-400x300_c.jpg","https://secureservercdn.net/198.71.233.163/4b5.320.myftpupload.com/wp-content/uploads/2019/09/highcompress-banner20-400x300_c.jpg","https://secureservercdn.net/198.71.233.163/4b5.320.myftpupload.com/wp-content/uploads/2019/09/banner10-1-compressor-400x300_c.jpg","https://secureservercdn.net/198.71.233.163/4b5.320.myftpupload.com/wp-content/uploads/2019/09/cropped-banner-testing-compressor-400x300_c.jpg")
//configure the speed of the slideshow, in miliseconds
var slideshowspeed=2000
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()
//-->
</script>
</body>
</html>
Okay this as you mentioned in comment so there it is. Removing cursor with simple CSS:By adding cursor:none property to slider and using pseudo class :hover to checking if the cursor is hovering the given div and then apply border property to it on other hand disabling the mouse clicks on your slider like this but we need to use jquery for this i have added the jquery in snippet working example below.
var event = $("#yourSlider").click(function(e) {
e.stopPropagation();
e.preventDefault();
e.stopImmediatePropagation();
return false;
});
// disable right click
$("#yourSlider").bind('contextmenu', function(e) {
e.stopPropagation();
e.preventDefault();
e.stopImmediatePropagation();
return false;
});
#yourSlider{
background:orange;
width:400px;
height:300px;
cursor:none;
}
#yourSlider:hover{
border:1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="yourSlider"></div>
Thank you all for your help! I tried the abovementioned solutions but wasn't able to get them to work properly (the mouse hand continued to be seen on scroll-over). I found the easiest possible solution, I thought I would post it for others to see.
<style>
#yourSlider{
width:400px !important;
height:300px !important;
border:.2em solid black;
pointer-events:none !important;
}
</style>
The 'pointer-events:none !important' taking care of the scroll-over issue (it didn't work without the !important added), and the border taking care of the border issue.
Thanks again to all who contributed!

Reorganizing divs vertically with jquery

I have 5 divs going vertically down a page.
I want to be able to click any one, and have it move to be the first div in the order, the top of the "list" in a way. In a perfect world, the others would dim/decrease opacity and the clicked one would slide/animate up to the top while the others bumped down. But, that can come later. I've seen div-reordering done with CSS, but that's not continuously dynamic on the page.
I tried putting all 5 divs inside a container wrapper and doing this in css:
#wrapper { display: table; }
with this javascript (example for clicking second div):
$('#secondDiv').css("display","table-header-group");
$('#firstDiv').css("display","table-row-group");
$('#thirdDiv').css("display","table-row-group");
$('#fourthDiv').css("display","table-row-group");
$('#fifthDiv').css("display","table-row-group");
but that messed up my rounded corners on the div, my alignment, and other parts of my existing css.
This seems like it shouldn't be that hard, but I can't figure it out. Thanks for any help!
A very simple solution: move the element to the top using jQuery's prepend() to the parent element.
$("div").click(function() {
$(this).parent().prepend($(this));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Div1</div>
<div>Div2</div>
<div>Div3</div>
<div>Div4</div>
<div>Div5</div>
<div>Div6</div>
<div>Div7</div>
<div>Div8</div>
<div>Div9</div>
<div>Div10</div>
$('.reorderable').click(function(){
$(this).prependTo(this.parentNode);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="reorderable">first</div>
<div class="reorderable">second</div>
<div class="reorderable">third</div>
<div class="reorderable">fourth</div>
<div class="reorderable">fifth</div>
</div>
Look at the jQuery UI tools that enable sortable displays.
Your end goal seems to be consistent with this jQuery UI feature.

scroll() event not firing when attached to a div

<div class="row">
<div class="col-md-8" id="homeview-story"></div>
<div class="col-md-4" id="homeview-stream">
<div id="log"></div>
</div>
</div>
#homeview-story {
overflow: scroll;
width: 72%;
height: 800px;
}
#homeview-stream {
overflow: scroll;
width: 28%;
height: 800px;
}
$(document).ready(function() {
$('#homeview-story').scroll(function() {
$("#log").append("<div>Handler for .scroll() called.</div>");
});
});
Objective is to implement infinite scrolling for both homeview-story and homeview-stream separately to load respective data. The scroll function works on the window obj ($(window).scroll) but is not working with specific div.
"scroll" only works when the element is actually scrollable / scrolling. If you want scroll data regardless of element size, you can use "wheel" if your browser supports it.
document.addEventListener("wheel", function(event) {
console.log(event);
});
The issue is that, #homeview-story isn't overflowing, So it isn't scrolling. First of all it should have some content larger than that for it to scroll, which is missing in your code.
Here's a Demo, where #logo has a height greater than it's parent #homeview-stream and we're listening to it's scroll.
Well I can't see what's not working for you. Here is a working fiddle
Have to paste some code so:
$(document).ready(function() {
$('#homeview-story').scroll(function() {
$("#log").append("<div>Handler for .scroll() called.</div>");
});
});
Are you actually scrolling inside the #homeview-story div? So not the page itself, because the jquery scroll() event obvious needs that (http://api.jquery.com/scroll/)
Are you loading your custom CSS after the bootstrap CSS? Otherwise your div might still not be set to overflow:scroll. Hmm, on second thought it probably would since you are referencing an ID. Just to make sure then.
Put a inner div in #homeview-story
<div class="row">
<div id="homeview-story">
<div class="inner"></div>
</div>
<div id="homeview-stream"></div>
</div>
$(document).ready(function() {
$('#homeview-story').bind('scroll',function() {
var html = "<div id='log'>Hello</div>";
$('#homeview-stream').append(html);
});
});
Hope this demo can help you in what you want to achieve.
I was facing the same problem as you do, and I solved it by putting that specific selector that I want to be triggered by the scroll() function inside the $(window).scroll() function like this:
$(window).scroll(function() {
$('#homeview-story').scroll(function() {
$("#log").append("<div>Handler for .scroll() called.</div>");
});
});
I'm not sure if this solution is correct way of fixing this, but works fine for me.

implementing a div showing up partially at the bottom inside another div to show up fully on mouse hover

this is the link
When you take the mouse over the four image boxes under 'TUI Exclusive Offering', you get the effect described in the question title.
html :
<div class="maindiv">
<img src="img/img.jpg" />
<div class="lower_div">
this is the lower div1<br>
this is the lower div2<br>
this is the lower div3<br>
this is the lower div4<br>
this is the lower div5<br>
this is the lower div6<br>
</div>
</div>
the way to make the lower_div sit at the bottom is to make its position absolute and bottom 0. But for whatever reason in my big html page , this technique is not working though it does work in another html page containing only this snippet.
So I am looking for another way to make the div sit at the bottom. Besides I also need to make it show up fully on mousehover.
How to achieve those ?
Here is a working demo: http://jsfiddle.net/qbyeC/
The javascript is simple when jQuery is involved. All you have to do is define on mouseenter and mouseleave for each maindiv.
$('.maindiv').on({
mouseenter : function(e){
$(this).children('.lowerdiv').stop(true,false);
$(this).children('.lowerdiv').animate({top:0,marginTop:0});
},
mouseleave : function(e){
$(this).children('.lowerdiv').stop(true,false);
$(this).children('.lowerdiv').animate({top:'100%',marginTop:'-40px'});
}
});​
This checks for the lowerdiv class and animates it to the right position on each event. NOTE: The marginTop on the second line of mouseleave should match the margin-top css property on the lowerdiv class. This is the amount that you want the div to stick up when the mouse is not over the element.
The css should be modified to your liking, but these are the important parts:
.maindiv {
overflow:hidden;
position:relative;
}
.lowerdiv {
position:absolute;
width:100%;
bottom:0px;
top:100%;
margin-top:-40px;
}
The html code is how you put it except I changed lower-div to lowerdiv to match maindiv.
May be this will help you out.
SCRIPT
$(function(){
$(".maindiv").hover(function(){
$(this).children('.lowerdiv').stop().animate({top:0})
},function() {
$(this).children('.lowerdiv').stop()..animate({top:150})
})
})​
HTML
<div class="maindiv">
Main div content
<div class="lowerdiv">
lowediv content
</div>
</div>
<div class="maindiv">
Main div content
<div class="lowerdiv">
lowediv content
</div>
</div>
CSS
.maindiv{
height:200px;
width:200px;
background:#CCC;
position:relative;
overflow:hidden;
float:left;
margin:10px;
}
.lowerdiv{
height:200px;
width:200px;
background:#797987;
position:absolute;
top:150px;
}​
jsfiddle - http://jsfiddle.net/tRYTq/4/
you need a negative position (as they did it on the tui page), start with something like
position:absolute;
bottom:-20px;
and try around until it fits.
using jquery you then can do something like:
$('.maindiv').hover(
function () {
$(this).find('.lower_div').stop(true, false).animate({'bottom':0});
},
function () {
$(this).find('.lower_div').stop(true, false).animate({'bottom':-20});
}
);
http://api.jquery.com/hover/
Of course this way you always have to change the original position (-20) in your css AND the js while you try around to find the best starting position. You could do this more elegantly by storing the original_position before the animation starts, but that is maybe going to far here? I am rather new to stackoverflow

How to make div slidedown

Sorry I'm really new to JQUery and would like to know how do I make an Div Slide Down?
JQuery is confusing to me and really just need help
Try this:
HTML:
<button id="click_to_slide"></button>
<div id="me_down" style="display:none;">I'm Sliding down</div>
Javascript:
$('#click_to_slide').click(function () {
$('#me_down').slideDown();
});
And Optional CSS:
#me_down {
color:white;
width: 100px;
height: 100px;
background-color: #000;
}
Try this, and it will work :)
HTML
<a id="click_to_slide">Click To Slide Down</a>
<div id="slide_me_down"></div>
CSS
#slide_me_down {
display: none;
width: 100px;
height: 100px;
background-color: #000;
}
JAVASCRIPT
$(document).ready(function () {
$('#click_to_slide').live('click', function () {
$('#slide_me_down').slideDown();
});
});
Here is a jsfiddle of the above code: http://jsfiddle.net/EfmeW/
Also if you want to have the div slideUp and Down depending on whether or not the div is already visible or not you can use .slideToggle() instead of .slideDown()
To slide an element down, just use this:
<script type="text/javascript">
$(document).ready(function() {
$('#test').slideDown();
});
</script>
<div id="test" style="background-color:lightgrey;border:2px solid grey;padding:10px;">Hello, this will slide down.</div>
Check out an example here: http://jsfiddle.net/WvVf3/1/
Hope this helps.
When you say slide down, do you mean:
make the div appear by sliding down: $('#me').slideDown();
or
make the div slide down: $('#me').css('position','relative').animate({top:'+200'},'slow');
http://jsfiddle.net/rkw79/AnTDk/5/
Use the following JQuery. You'll need to have a div with class myDivClass as JQuery uses CSS-selectors to find elements. The document.ready part is to ensure your page is fully downloaded / parsed before the Javascript is executed (this is a crucial step).
$(document).ready(function() {
$('.myDivClass').slideDown();
});
Here is a JSFiddle as an example to have a div slide down on a button press.
P.S. If you are using Firebug or Chrome right, you can try this out right now on this page!
$('#hlogo').hide().slideDown('slow');

Categories