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
});
Related
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
Below is my code. When I drag and drop the '.dragme' div then the parent of this div become change from '#source' to '#drop'. Its ok. But this dragme div's position become fixed in #drop div and I can't move it anywhere in #drop div. How can I do it? Thank you.
HTML:
<div id="source" class="box">
<div class="dragme">bacon</div>
</div>
<div id="drop" class="box"></div>
CSS:
.box { height:100px;width:100px;border:1px solid #333; }
.dragme { width:100%; margin:5px; border:1px solid #333; }
JavaScript:
$('.dragme').draggable();
$('#drop, #source').droppable({
drop:function(e, ui) {
$(e.target).append($(ui.draggable).detach().css({'top':'', 'left':''}));
}
});
Here is a Demo Fiddle.
$('.dragme').draggable();
$('#drop, #source').droppable({
drop:function(e, ui) {
//$(e.target).append($(ui.draggable).detach().css({'top':'', 'left':''})); //removed this line.
}
});
You are setting css .css({'top':'', 'left':''}), which is why you cannot move it.
Your code is setting the dragged element position to TOP LEFT, that's the reason why you are not able to drag that element to some other position. To avoid this problem, just update the position only if you drag the element out of the parent container.
Updated Code:
$('.dragme').draggable();
$('#drop, #source').droppable({
drop:function(e, ui) {
if ($(e.target).attr('id') != $(ui.draggable).parent().attr('id')) {
$(e.target).append($(ui.draggable).detach().css({'top':'', 'left':''}));
}
}
});
Fiddle: http://jsfiddle.net/LHGqP/1/
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
I have a div, which has contenteditable=true. Now, if I enter a longer text, it goes over the bottom. I don't want that. I want the text to stop and block any other text.
This is the solution like I want to have it: http://jsfiddle.net/37Jnn/
The problem here is that this is a textarea and it isn't working with my editable div.
Here is my editable div: http://jsfiddle.net/N4tTp/1/
Any thoughts?
Credit goes to Mohsen but I think this post should have a formal answer:
You're looking for the css style of:
overflow:hidden;
on the div in question. To make the div scrollable, set overflow to:
overflow:auto;
You could save the state of the div (original and after each successful input) and after input events check the div size and restore the state if the size is too big.
The advantage of this solution over the overflow:hidden; one is that the div actually doesn't have the extra content. If someone was to select all the text in it after inputting too much, the extra characters wouldn't be part of the selection.
While it isn't the most elegant way to do it, it does work.
HTML:
<div class="myDiv" contenteditable=true>This text is in the box.... but this is not in the box</div>
CSS:
.myDiv {
background: #acacac;
width:60px;
height: 60px;
overflow: hidden;
}
Javascript:
var text = undefined;
$(function(){
while($('.myDiv').get(0).scrollHeight > $('.myDiv').height()) {
$('.myDiv').text($('.myDiv').text().slice(0,-1));
}
});
$('.myDiv').bind('keydown', function(e) {
text = $('.myDiv').text();
if($('.myDiv').get(0).scrollHeight > $('.myDiv').height() && e.which != 8) {
e.preventDefault();
}
});
$('.myDiv').bind('keyup', function() {
if($('.myDiv').get(0).scrollHeight > $('.myDiv').height()) {
$('.myDiv').text(text);
}
});