Develop Reference

FireFox - switching focus after hiding DIV?

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

How hide div inside div when inner div mode left by jquery animate:left function?

I have html:
<div style='width:300px; height:40px; float:left;' class='outerDiv'>
<div style='width:200px; height:40px; float:right;' class='innerDiv'>
Some text
</div>
</div>
I try to make small move div.innerDiv by:
$('.innerDiv').animate({ left: '+=200px' });
Basic idea - when div.innerDiv move to border of div.outerDiv, div.outerDiv should hide part of div.innerDiv. I stuck on css styles on div's.

see here : jsfiddle
you need to set a position ( relative,absolute,fixed ) so the css left:200px can work.
css :
.outerDiv {
overflow:hidden;
}
.innerDiv {
position:relative;
}
jq :
$('.innerDiv').animate({ left: '+=200px' });
let me know if this was what you were looking for.

If i understand you correctly, you want to hide the outer div but show the inner div.
You should not hide parent div, because if you hide parent div, child will be hidden.
You can change the background color of the outer div.
js fiddle link
$('.innerDiv').animate({left:'200px'}, {
complete: function () {
$('.outerDiv').addClass('hide');
}
}
);

UI Sortable moves scroll

I have issue with jQuery sortable.
Here is live example: JSFiddle
HTML:
<div class="a">
<div class="b">
a<br>
b<br>
c<br>
d<br>
e<br>
f<br>
g<br>
h<br>
i<br>
j<br>
k<br>
l<br>
m<br>
n<br>
o<br>
</div>
</div>
JS:
$(function(){
$('.a').sortable();
});
CSS:
.b {
border: 1px solid;
width: 100px;
height: 100px;
overflow-y: scroll;
overflow-x: hidden;
text-align: center;
}
In this case I have div with scroll. I scroll to the end of the div and I try to sort element using drag&drop. After this action, scroll in div jumps to beginning of this div. How I can "remember" position of scroll and "revert" it after sortable?

You need to save the scroll position and then reapply it when you stop moving the object.
JSFIDDLE: JSFIDDLE
$(function(){
var scrollTop = 0;
$('.a').sortable({
start: function(event, ui){
scrollTop = ui.item.scrollTop();
},
stop: function(event, ui){
ui.item.scrollTop(scrollTop);
}
});
});

You should use the sortable() method on the inner <div id="b"> and put every element you want to sort inside a <div> tag so they can be treated as DOM elements.
Here's a working solution JSFiddle
You might want to check THIS topic.

Horizontal centering of a div without knowing the div width, possible?

I'm currently building a popup box script using css/jquery and i can't seem to get the div centered on the screen on all cases. It it possible to center it without knowing the div width?
Instead of posting all the code here i put up a live example at http://goo.gl/N45cp
Any kind of help is much appreciated!
Best Regards
John

<div id="wrapper">
<div id="child"></div>
</div>
If the position of the #child is not absolute, you can set left and right margins to auto:
#child {
margin: 0 auto;
}
Or if the position is absolute you can try the following:
$("#child").css("left", function(){
return ($("#wrapper").width() - $(this).width()) / 2;
});

You can achieve this with pure CSS if you have a containing div:
HTML
​<div id="outer">
<div id="inner">some content here</div>
</div>
CSS
​body, html, div#outer { height:100%; }
div#outer { text-align:center; }
div#inner { display:inline-block; }
http://jsfiddle.net/NjZbW/
​​​​​​​​​​​​​​

How to resize DIV with its component using Javascript

I have created a html page of two DIV with tab component using jquery. Tab component is resizable and have min/max width. There is a scrollable divider between DIV. But the problem are the components of the div, which are not resizing according to the resized div position, it is overlaping on the other div.
Any suggestion or code will be helpful.
Thanks and regards,
Global

You can use jQuery with jQuery resize plugin (because default jQuery resize event handler only works when event target is window) to resize child divs when parent div has been resized.
Here is an example that will shrink parent div after 2 seconds, causing child div to also shrink:
Javascript:
$(document).ready(function() {
$('#parent').bind("resize", resizeChild);
setTimeout(resizeParent, 2000);
});
function resizeChild()
{
$("#child").css('width', $('#parent').width() - 20);
$("#child").css('height', $('#parent').height() - 20);
}
function resizeParent()
{
$("#parent").css('width', '100px')
$("#parent").css('height', '100px')
}
​
HTML:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://github.com/cowboy/jquery-resize/raw/v1.1/jquery.ba-resize.min.js"></script>
<div id='parent'>
<div id='child'></div>
</div>​
CSS:
#parent {
width:200px;
height:200px;
border:1px solid black;
}
#child {
width:180px;
height:180px;
border:1px solid black;
}​
Proof of concept here: http://jsfiddle.net/t26ZW/