I have two divs; one inside the other one. I would like to show the inner div when hovered on the outer div, otherwise the inner div should be hidden. The outer div has an image in it as well (sibling of the inner div) which is always displayed, so when hovered over the image it will also show the text. Can someone help me?
<script>
$(".divone").hover(
function () {
$(".divtwo").css("visibility","visible");
},
function () {
$(".divtwo").css("visibility","hidden");
}
);
</script>
<div class="divone">
<div class="divtwo">some text here</div>
<img src="images/test.png" />
</div>
.divtwo{
background-color:red;
top:120px;
height:50px;
width:223px;
position:absolute;
visibility: hidden;
}
.divone{
height:169px;
position:relative;
}
You could also have a style like this:
.divone:hover .divtwo {
visibility: visible;
}
No JS required.
You can attach the events to mouseenter and mouseleave events like this.
$(".divone").mouseenter(function () {
$(".divtwo").css("visibility","visible");
});
$(".divone").mouseleave(function () {
$(".divtwo").css("visibility","hidden");
});
Related
I have a div that is supposed to follow the pointer, but it stays very far from the pointer right now, though it follows it.
I've tried some different codes, both written by me, suggested on here, or found online, but nothing helped.
Right now the one that works best is this..
var currentMousePos = { x: -1, y: -1 };
$(document).mousemove(function(event) {
currentMousePos.x = event.pageX;
currentMousePos.y = event.pageY;
$(".hidden-img").css('top', currentMousePos.y);
$(".hidden-img").css('left', currentMousePos.x);
});
I've also tried this http://jsfiddle.net/BfLAh/1/ but it doesn't work as in the fiddle
It follows the pointer but it's very far from the top left of the pointer.
I have managed to go with this code and make it work, at least the positioning
$(document).ready(function() {
$(".list-item").mousemove(function(e) {
var offset = $(".list-item").offset();
$("#hoverDisplay").animate({
left: e.pageX - offset.left,
top: e.pageY - offset.top
}, 1);
});
});
Now the only problem that stays is, I have 20+ "li" items that have to get hovered and show their own hidden div.
Here is the code of just 2 "li" elements.
<li class="list-item" style="background-color: #03C0A4;">
<div class="small-title" style="color:#E07354">nevaly</div>
<a href="a-project-called/nevaly/index.html" style="color:#E07354" class="project-title" onmouseenter=toggleHiddenDisplay("hoverDisplay") onmouseout=toggleHiddenDisplay("hoverDisplay")>Connecting brands and influencers - no limits.</a>
<div class="hidden-img" id="hoverDisplay" style="display:none;">
<img src='a-project-called/nevaly/thumb.gif'>
</div>
</li>
<li class="list-item" style="background-color: #f8e975;">
<div class="small-title" style="color:#e32e1d">Kulturhavn</div>
<a href="a-project-called/kulturhavn/index.html" style="color:#e32e1d" class="project-title" onmouseenter=toggleHiddenDisplay("hoverDisplay") onmouseout=toggleHiddenDisplay("hoverDisplay")>Ahoy! From the cultural harbour of Copenaghen.</a>
<div class="hidden-img" id="hoverDisplay" style="display:none;">
<img src='a-project-called/kulturhavn/thumb.gif'>
</div>
</li>
Now when I hover just the first hidden div content gets shown.
How can I take the hoverDisplay of the hovered "li" element using the JS that I wrote (thanks to you also guys!)?!
Thanks
If you want to match the position of image's top left corner and mouse pointer, then jsut set negative margin-top, and margin-left for you image like below:
$(document).ready(function () {
$("body").mousemove(function (e) {
$("#image").animate({
left: e.pageX,
top: e.pageY
}, 1);
});
});
body {
overflow:hidden;
position:absolute;
height:100%;
width:100%;
background:#efefef;
}
#image {
height:50px;
width:50px;
margin-top:-10px;
margin-left:-10px;
position:absolute;
}
<div id="container">
<img id="image"></img>
</div>
Here is its link to check it online in fiddle.
UPDATE
If your only reason for detecting mouse position is to show and hide the content of list items, then you don't need to detect mouse position manually, you can do it using jQuery with ease. First add this selector to your CSS file:
li.list-item div {
display: none;
}
And then you can show child of each .small-item using mouseover and children like below:
$(document).ready(function() {
$('.list-item').mouseover(function() {
$(this).children('.small-title').show();
}).mouseout(function() {
$(this).children('.small-title').hide();
});
})
We can get rid of this because as you mentioned in your comment you just want to fix the child state.
.mouseout(function() {
$(this).children('.small-title').hide();
})
I have a div that is 300px from the top, and an up arrow image on top of the div.
I want users to click on the up arrow image, making this div go up 300px, then the up arrow image changes into a down arrow image, then when users click on the down arrow image, this div goes back down 300px to it's original location.
I'm looking to do this with jQuery.
using a response, this is what my markup looks like now:
$(function() {
$('.container img').click(function() {
$('.container').animate({top:-276});
});
$('.container img').click(function() {
$('.container').animate({top:0});
});
});
.container{
border:1px solid gray;
margin-top:300px;
height:800px;
padding:50px;
position:relative;
}
.container img{
position:absolute;
top:-22px;
width:25px;
height:25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" />
<p>some text here</p>
</div>
</body>
The div is just moving up and down without stopping at the top.
Also, how do I get a the up arrow to change to down arrow on first click? then back again to up arrow on second click?
I would use jQuery.animate() triggered by the jQuery.click() event.
Like this but with 2 states, toggling from one to the other:
$(function() {
$('#arrow').click(function() {
$('#thediv').animate({top:300});
});
});
$(function()
{
var expanded = false;
$('#sidebar').click(function()
{
if (!expanded)
{
$(this).animate({'left' : '0px'}, {duration : 400});
expanded = true;
}
else
{
$(this).animate({'left' : '565px'}, {duration: 400});
expanded = false;
}
});
});
You can check this link below. May be it can help you to find solution.
link:-Javascript move div onClick
I am using wordpress site. I created menu bar, inside of sub-menu, used position:fixed element. Anybody tell me how can i disable mousewheel inside of that sub-menu. That means i don't want page scroll inside of that sub-menu.
Please anyone help me.
You can use CSS property overflow: hidden; which specifies what happens if content overflows an element's box.
Using overflow: hidden; allow you to do not show up the scroll bar and so do not allowing scrolling at all including mouse weal.
Here below a very generic example, please consider to add your real markup in your question for a fix on your real app code.
https://jsfiddle.net/bxohL8tt/2/
#sub-menu{
width:250px;
height: 100px;
background-color:red;
overflow: hidden;
}
If the element that is scrolling on mouse-wheel event is the body, or even some other element, you can use JavaScript to prevent it from scrolling while your menu has "focus" like this:
var menuBar = document.getElementById('menuBar');
menuBar.onmouseover = function()
{
document.body.style.overflow = 'hidden';
};
menuBar.onmouseout = function()
{
document.body.style.overflow = 'auto';
};
Add the above inside a <script> element at the end of your main HTML source-code and it should work.
You can do this by the following code:
$("sub-menu-selector").bind("wheel mousewheel", function() {
return false;
});
For example: (The example shows the disabling on the menu but it's just the same)
$(".menu").bind("wheel mousewheel", function() {
return false;
});
body {
margin:0;
}
.menu {
background:black;
color:#fff;
position:fixed;
width:100%;
padding:15px;
}
.content {
height:1500px;
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
Menu
</div>
<div class="content"></div>
I want to place a div over the button once the button is clicked like the image below:
http://i.imgur.com/pdrqnmj.png
Any ideas on how to do this ?
put the button and the div panel in a parent div. make the popup div absolute and hidden.
.parent-div{
position:relative;
}
.popup-div{
position:absolute;top:0px;left:0px;
z-index:10;
display:none;
}
show the popup-div on btn click.
$(".btn").on("click", function(){
$(".popup-div").show();
});
you can do that! Suppose you are having the button on the very bottom left of your page.
I will just show the basic, only the code for button and the div. Hope it helps.
css for that:
.button, .div {
position: absolute;
bottm: 0;
left: 0;
}
.div {
display: none; // to make it hidden.
}
the HTML would be:
<button class="button">I am button</button>
<div class="div">I am on the button!</div>
Now the jQuery should be something like:
$(document)ready(function() {
$(".button")click(function() {
$(".div").show();
})
})
I have the following block of code, characterising a div:
#posts{
position:absolute;
left:150px;
top:90px;
width:640px;
}
And my problem is: when i scroll down, it goes beyond "top:90px".
What I'm trying to do is: the part of the div's content which is above top:90px should be invisible.
The thing is... i can't use z-index:(...) because the only thing i have behind this div is the background.
$(function () {
$(window).scroll(function () {
$('#clickme').click(function() {
if ($(this).scroll() > 100) {
$('#myDiv').hide('slow', function() {
alert('Animation complete.');
});
}
} else {
alert('Error');
}
});
/*HTML*/
<div id="clickme">
test.
</div>
This will hide the div.