I have a div in my code in which I have inserted an image. I want that when I hover on that image, a box with some text should be displayed on the image.....
<div id=".image">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSZPFUnMbNKcDHYgjgLqslZtOicCfxph__Jwk95NZGXM_HZ1wzvbGhlrSNi">
<div id="des">hi</div>
</div>
I want to make a box with some text appear on top of the image when it is hovered over.
How can I do that?
I tried following but didnt work
<script type="text/javascript">
$(document).ready(function(){
$(".image").mouseover(function() {
alert("hello");
$(this).children(".des").show();
}).mouseout(function() {
$(this).children(".des").hide();
});
});
</script>
Make two divs, one for your image and one for the box with text.
For example div1 (the Image) and div2 (the box with text).
.div1 {
background:url('image.jpg');
}
.div2 {
width:20px;
height:20px;
background-color:#000;
}
With me so far?
So in HTML you will have...
<HTML>
<head>
</head>
<body>
<div class="div1">
</div>
<div class="div2">
TEXT HERE
</div>
</body>
</HTML>
Then to display div2 when hovering over div1 you will need to make div2 not display as default, and make the hover commands.
.div1 {
background:url('image.jpg');
}
.div2 {
width:20px;
height:20px;
background-color:#000;
display:none;
}
.div1:hover + .div2 {
display:block;
}
I think this should work :)
First, you declare a div such that it will trail your mouse pointer. Then you can show the div when it is over the image. When mouse leaves the image, the div is hidden. Please check the example fiddle
http://jsfiddle.net/B5h6v/
You can implement it using jQuery mouseenter() and mouseleave() events
Related
I have a contenteditable="true" div that has 2 child elements. When starting to edit the div, I want to hide the right element. This works correctly in CHROME/EDGE.
On FireFox, my issue is that if the user clicks the right DIV, instead of switching the cursor focus to the left DIV(Because the right DIV is now hidden), the focus stays on the left div. And basically the cursor is gone.
Any solution for this one?
window.onload = function() {
$('.parent').on('click',function(evt) {
$('.age').css('display','none');
});
}
.parent{
display:flex;
flex-direction:row;
font-size:18;
}
.name{
margin-right:6px;
}
.age{
border:1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent" contenteditable="true">
<div class="name">On Chrome/EDGE, clicking the div with the red border will hide and switch the focus (cursor) to this div. In FireFox it does not work and our cursor/focus is lost.</div>
<div class="age">(Click on this div to see the problem)</div>
</div>
$('.parent').on('click',function(evt) {
$('.age').css('display','none');
$('.name').focus(); // Trigger focus on the .name element
});
I am trying to implement when a div1 is hovered div2 should be visible and options should be clickable. when div1 is mouse out it should not show div2
<div class="div1">Hover me</div>
<div class="div2">Clickable items</div>
.div1
{
width:100px;
height:30px;
background:red;
}
.div2
{
width:100px;
background:blue;
display:none;
padding:10px;
}
$('.div1').hover(function()
{$('.div2').show()});
$('.div2').hover(function()
{}, function() {$('.div2').hide()});
This solution works partially, After the element is hovered and when the mouse is moved downwards it works fine. but when the mouse is moved upwards it doesnt dissepear sub menu.
here is the pen http://codepen.io/anon/pen/KwWGVq
Your jQuery is wrong, see below:
$('.div1, .div2').hover(function(){
$('.div2').show();
}, function(){
$('.div2').hide();
});
I have 2 Divs, side by side. By default, only the left one shows, and it centered in the page content horizontally. But when the user click's a button on the first div, it would slide to the left, and show the other div.
I already have the visibilty setup. But The problem is, I need my js to detect that the div's display:none attribute, and adjust the first div accordingly (float:left or float:right)
If possible, a fiddle would be nice also.
This should work for you if I got your problem completely:-
HTML
<div id="left">
<button onclick="showDiv()">Show</button>
</div>
<div id="right">
</div>
JS
function showDiv(){
var leftDiv = document.getElementById('left');
var rightDiv = document.getElementById('right');
leftDiv.style.float = 'left';
rightDiv.style.float = 'right';
rightDiv.style.display = 'block';
}
CSS
div{
width:200px;
height:200px;
background:gray;
margin:10px;
}
#left{
float:right;
}
#right{
display:none;
}
Fiddle
I have a group of objects (divs) that are small squares that I can move anywhere (there's a JavaScript function to move then). Those squares are all together and form a figure. So I have that figure centered by the CSS: "left: 600px" but now I'm trying to make a more responsive design for my page and I started to percents but I encountered 2 problems.
If I add the percentage to all the objects individually, when I zoom in or zoom out or when i resize my page they become more closer of far away from each other.
If I create a div including all the objects and then add "left:50%" when I click to move them they go instantanially another 50% to left.
So my mouse is this -> () [spacespacescpace] / \ <- and this the object, but I'm still selecting that object. So that's weird...
This is the HTML:
<div id="container">
<div class="VEPart" id="me2"></div>
<script type="text/javascript">
jcl.LoadBehaviour("me2", MoverBehaviour);
</script>
<div class="VEPart" id="me3"></div>
<script type="text/javascript">
jcl.LoadBehaviour("me3", MoverBehaviour);
</script>
<div class="VEPart" id="me4"></div>
<script type="text/javascript">
jcl.LoadBehaviour("me4", MoverBehaviour);
</script>
<div class="VEPart" id="me5"></div>
<script type="text/javascript">
jcl.LoadBehaviour("me5", MoverBehaviour);
</script></div>
Here's the CSS:
#me2
{
content:url("some image");
top:401px;
left:0px;
z-index:5;
}
#me3
{
content:url("some image");
top:400px;
left:-58px;
z-index:5;
}
#me4
{
content:url("some image");
top:400px;
left:58px;
z-index:5;
}
#me5
{
content:url("some image");
top:500px;
left:-57px;
z-index:5;
}
Try setting the position property to absolute and using the percentage. It sounds like you are having a problem with relative positioning.
#me2
{
content:url("some image");
position:absolute;
top:401px;
left:50%;
z-index:5;
}
http://www.w3schools.com/cssref/pr_class_position.asp
provide a style for all div..
Just put this in your css
div {
margin-left: 20%
}
I want to achieve hide/show with div's in html but in this way.
Here is my html:
<div id="left"></div>
<div id="middle">
<input type="button" id="button"/>
</div>
<div id="right"></div>
And this is my css:
body
{
height: 100%;
margin: 0;
padding: 0 ;
border: 0 none;
}
#left
{
background-color:#EEEEEE;
height:570px;
width:73.9%;
float:left;
}
#center
{
background-color:#D4EAE4;
color:#535353;
height:570px;
width:15.25%;
float:left;
margin:0;
}
#right
{
background-color:#D4EAE4;
float:left;
width:11%;
height:570px;
margin:0;
}
I want to do that when I click button on div center to hide div right and to expand divleft for the size of the div right and then move div center all the way to the right. I want to hide/show them with horizontal animation, such as from left to right or right to left.
Playing with the words can be tricky so I made a little pictures so you can actually see what am I talking about:
Start phase:
And end phase:
You can see a working demo here... http://jsfiddle.net/miqdad/3WDbz/
or you can see other demo which increment width of first div here .. http://jsfiddle.net/miqdad/3WDbz/1/
I had almost the same question a couple of days ago and maybe it helps you too.
this example uses a checkbox to hide the div. and make the other div 100% width.
javascript, When right div is hidden left div has to be 100% width.
the javascript code from the example:
$(function() {
$("#foo").on("click",function() {
if ($(this).is(':checked')) $('#checked-a').show('fast',function() {
$('#checked-b').css("width","60%");
$('#checked-a').css("width","40%");
}) ;
else $('#checked-a').show('fast',function(){
$('#checked-b').css("width","100%").show();
$('#checked-a').css("width","0%").hide();
});
});
});
and an example:
http://jsfiddle.net/mplungjan/5rdXh/
This is one of the best ways to hide a div element using JavaScript:
<html>
<head>
<script>
function hideDiv() {
document.getElementById("myP2").style.visibility = "hidden";
}
</script>
</head>
<body>
<button onClick="hideDiv()">Hide</button>
<br>
<br>
<p id="myP2">Hello world!</p>
</body>
</html>
Implementing with JQuery is easy. Have a look at this JSFiddle example: http://jsfiddle.net/q39wv/2/
(To all: Normally I wouldn't put only a JSFiddle link here, but this time I think it's worth showing the OP how the whole thing works, with some adjustments to his HTML and CSS).
A Javascript-only solution would be much more difficult to implement.