Focus change disturbing the UI in chrome and IE - javascript

I'm trying to recreate the issue i was facing at my work. It can roughly be translated as follows.
Here goes the code.
<button style="margin:20px 0;">Click this button first and press tab </button>
<div class="div2">
</div>
<div class="div1">
<span>ABCDEFGHIJKLMNOPQRST</span>
<button >moved out </button>
</div>
.div1
{
width:200px;
overflow: hidden;
background-color:#ff0;
margin-left:50px;
}
div button
{
width:50px;
margin-left:180px;
}
.div2
{
position:fixed;
height:100%;
width:50px;
background-color:#f00;
}
Please use this for better clarification jsfiddle in chrome and IE.
The problem is- if we press the first button and press tab the focus will move to the second button. Along with that the second button is appearing from partly hidden state and pushing the contents of the container div, which is making the UI distorted.
Actually behavior should be button should still be in hidden state and should not push the div. Is there a simple way to handle this other than writing JS to push back the div again.

Related

Why toggling doesn't work on Firefox Developer Tools?

I don't know why my javascript code is not toggling on firefox developers tools, and that's my code:
const hamburger = document.querySelector('.header .nav-bar .nav-list .hamburger');
const mobile_menu = document.querySelector('.header .nav-bar .nav-list .menu');
const header = document.querySelector('.header-container')
hamburger.addEventListener('click',() => {
hamburger.classList.toggle('active');
});
Maybe you can check, if your element is clicked or not with console.log()
hamburger.addEventListener('click', function(){
console.log("test")
})
I suggest you not to use arrow function in addEventListener, because of 'this' problem in arrow function
When you open developer tools in Firefox, on the left hand side of the menu there are tab header for "inspect", "console", network" and so on.
On the right hand side of the same menu bar, there is an icon of a framed document that shows "Select an iframe as the currently targeted document" when you hover over it. Click the icon and select the iframe containing the .header-container element.
Assuming the correct nested elements have been set up in HTML, the posted code now runs if you paste it after the script input prompt and press enter, and you can click the hamburger icon to toggle its active cf class.
Use of the const declaration in the pasted script prevents it being run more than once without reloading the page, which is a good thing - an even number of anonymous listeners that each toggle active would not affect the class list of the hamburger element.
FWIW, some HTML that can be used to show the code in the post "just works" when run in the Firefox console:
<style>
div { margin: 0.5rem; margin-left: 2rem; border: thin solid maroon;}
.active {background-color: yellow;}
</style>
<div class="header-container">
.header-container
<div class="header">
.header
<div class="nav-bar">
.nav-bar
<div class="nav-list">
.nav-list
<div class="hamburger">
.hamburger
</div>
<div class="menu">
.menu
</div>
(nav-list)
</div>
(nav-bar)
</div>
(header)
</div>
(header-container)
</div>
However, if the hamburger menu structure is inside an iframe element it needs to be selected first to prevent generating an error that hamburger is null.

How to freeze browser window intentionally (like alert, confirm and prompt does)?

Is there any way of freezing the browser window intentionally like alert, confirm and prompt (in short: "acp") does?
I want to show a modal dialog with custom css instead of the native popups for "acp" but also want to have the ability to freeze the browser until I have users feedback just like "acp".
But man, why? This is bad practice (uh I have to downvote)!
So when it is bad practice - then why does "acp" actually offer this synchronous behavior? Because in some particular scenarios its just exactly the right tool for an appropriate UX. Those native modals do look so ugly and are also very limited at the same time.
Here's just one quick and dirty example where it would be totally fine to freeze the browser until the user gives feedback. Lets say we have a form with an input[type="reset"]-element. So before we really let the form reset we ask the user something like: "Are you sure you want to reset (data will be lost)?".
If I would be fine with the native modal look (which I'm not) I could do:
document.querySelector('form').addEventListener(
'reset', e => confirm('Are you sure you want to reset (data will be lost)?') || e.preventDefault()
);
<form>
<input placeholder="type something, reset and cancel to keep input value" style="width:100%">
<input type="reset">
</form>
So "everybody" should agree (edit: or at least somebody could) this isn't bad practice, right?
But how can we achieve the same with a custom styled modal/dialog/popup?
I'm -of course- not asking for the HTML/CSS part but for the capability of freezing the browser window via JavaScript!
To be honest, I actually expect some downvotes for this but maybe there is this one Killer JavaScript Ninja, who have this one special hack to make it possible...
You can't freeze the browser application like the native dialogs do. Those are not built with JavaScript, they are built with native code and can affect the browser application in any way. JavaScript is prohibited from affecting the client application in such ways.
But, you can freeze interactions with your page content within the browser window....
Just place a window sized div above the page with fixed positioning. That will prevent the user from being able to interact with anything on the main page (behind it). Then, display your modal dialog on top of that. When the user clears the modal, hide it and the window sized div, thus making the main page interactive again.
let modal = document.querySelector(".modal");
let pageCover = document.querySelector(".pageCover");
let main = document.querySelector("main");
document.getElementById("open").addEventListener("click", function(){
modal.classList.remove("hidden");
pageCover.classList.remove("hidden");
main.addEventListener("focus", preventFocus);
});
document.getElementById("close").addEventListener("click", function(){
modal.classList.add("hidden");
pageCover.classList.add("hidden");
main.removeEventListener("focus", preventFocus);
});
function preventFocus (evt){
evt.preventDefault();
}
.hidden { display:none; }
.pageCover {
position:fixed;
z-index:10;
background-color:rgba(0,0,0,.25);
width:100vw;
height:100vh;
top:0;
left:0;
}
.modal {
position:absolute;
z-index:100;
background-color:aliceblue;
border:2px double grey;
width:200px;
height:200px;
top:30%;
left:30%;
text-align:center;
}
.modalTitle {
margin:0;
background-color:#00a;
color:#ff0;
padding:5px;
font-weight:bold;
font-size:1.1em;
}
#close {
background-color:#800080;
color:#ff0;
border:1px solid #e0e0e0;
padding:5px 10px;
}
#close:hover { background-color:#c000c0; }
<main>
<h1>This is some page content</h1>
<p>And more content</p>
<button id="open">Click Me To Show Modal</button>
<div>More content</div>
</main>
<div class="hidden pageCover"></div>
<div class="hidden modal">
<div class="modalTitle">Modal Title Here</div>
<p>
Now, you can only interact with the contents of this "modal".
</p>
<button id="close" >Close</button>
</div>
You can place everything within a div except for your popup. You can then turn on/off pointer events via css.
Everything within the div will no longer be interactable. This will give the appearance of freezing the browser window.
.freeze { pointer-events: none; }
Note: When adding pointer-events to an element this affects all child elements as well, so placing it on the body would also lock the popup.
Once the popup has been closed, we can remove the freeze class from the div and everything will start working again.
const content = document.getElementById('content')
const overlay = document.querySelector('.overlay')
const a = document.querySelector('.open-overlay')
const close = document.querySelector('.overlay .close')
// Open a popup and freeze the browser content
a.addEventListener('click', e => {
e.preventDefault()
content.classList.add('freeze')
overlay.classList.remove('hidden')
})
// Close the popup window and unfreeze the browser content
close.addEventListener('click', e => {
e.preventDefault()
content.classList.remove('freeze')
overlay.classList.add('hidden')
})
.freeze { pointer-events: none; }
.hidden { display: none; }
.overlay {
position: fixed;
z-index: 100;
padding: 20px;
background: white;
border: solid 1px #ccc;
width: 300px;
top: 20px;
left: 0;
right: 0;
margin: auto;
}
<div class="overlay hidden">
<h1>Overlay</h1>
Close
</div>
<div id="content">
Open Overlay
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<form>
<input type="text">
</form>
</div>

How to fit text properly inside a div with overflow: hidden?

I'm having problems with the text inside a div with overflow: hidden.
The div is a dropdown that shows another div containing an image and text. The dropdown works with javascript editing height. There is also a problem; once in a while when I click on the drop button, it takes two clicks for it to work, I don't know why.
<div class="dropDiv">
<strong class="divTitle">Title</strong>
<div class="dropDownBtn" onclick="dropDown()"></div>
<br>
<div class="heroInfoDiv">
<img height="100%" width="20%" src="Media/image/img.png">
<div class="textHolder">If this text is too long, it dissapears.</div>
</div>
</div>
At first I tried having the div holding the text as a p-element, but changing it to div with any kind of CSS on it didn't work. What I want to happen is for the text to obey the rules of like any normal container, where it breaks lines automatically.
Here is a jsFiddle showing what is happening:
https://jsfiddle.net/56oypcbj/5/
Remove the float: left form your .textHolder class.
.textHolder {
padding: 0px;
}

How to make callout window appear when mouse hovers over this shape?

I have this jsfiddle.
http://jsfiddle.net/helpme128/3kwwo53t/2/
<div ng-app="test" ng-controller="testCtrl">
<div id="container">
<div class="shape" ng-draggable='dragOptions'></div>
</div>
</div>
I would like to make a callout window appear with the text "Callout" when the mouse pointer touches the white square. When the mouse leaves the white square, the callout window disappears. How can this be done? Are there angularjs modules suitable for this task?
check out the fiddle I made, CSS only:
http://jsfiddle.net/3kwwo53t/16/
.shape::after{
display:none;
height: 50px;
width: 50px;
background-color:blue;
content:'Callout';
position:relative;
left:20px;
}
.shape:hover::after{
display:block;
}
EDIT:
Angular way: http://jsfiddle.net/3kwwo53t/18/
you can change text using the dragOptions

How to full page a div element?

I wonder if there is any way to set one div container to full page (like a zoom, with no other elements of the page shown) and allow user to turn back to normal by doing a escape or click outside of the div element.
I use jQuery UI for this solution. It's really simple and straight forward.
Here's the Fullscreen working Demo of this effect
Here's the Fiddle broken down piece by piece
And of course, the code ->
The HTML ->
<div class="body">
Open Modal
<div class="overlay"></div>
<div id="modal" title="the modal"> Modal </div>
</div>
The CSS ->
body{
height:100%;
width:100%;
padding:50px;
}
.ui-widget-overlay{
z-index:10;
}
.ui-dialog{
z-index:20;
}
The jQuery ->
$('#modal').dialog({
'autoOpen' : false,
'modal' : true
});
$('#open-modal').click(function(){
$('#modal').dialog('open');
$('.overlay').addClass('ui-widget-overlay');
});
$(document).on('click', '.ui-widget-overlay', function(){
$(this).removeClass('ui-widget-overlay');
$('#modal').dialog('close');
});

Categories