I want to use an alert dialog in my angularjs application instead of all the $window.alert present. In each of the controllers of my application I inserted this (https://material.angularjs.org/latest/demo/dialog):
$scope.showAlert = function(ev) {
$mdDialog.show(
$mdDialog.alert()
.parent(angular.element(document.body))
.clickOutsideToClose(true)
.title('This is an alert title')
.textContent('You can specify some description text in here.')
.ariaLabel('Alert Dialog Demo')
.ok('Got it!')
.targetEvent(ev)
);};
and in my style.css file I added this:
.md-dialog-is-showing {
top: 0 !important;
}
The problem is that when $scope.showAlert is called the page under the modal dialog srolls on top and when I close the dialog returns to the previous position. How can I prevent the scroll-to-top in order to bring up the dialog at the same position where it is called?
---------- EDITED ----------
I tried to remove the css rule added but the entire web page, including dialog, doesn't appear. I noted that in the body tag the auto-generated style was the following (top: -1505px causes the problem)
<body ng-app="configuratorApp" class="ng-scope md-dialog-is-showing" style="position: fixed; width: 100%; top: -1505px; overflow: hidden;">
<md-backdrop class="md-dialog-backdrop md-opaque ng-scope" style="height: 2059px; position: fixed;" aria-hidden="true"></md-backdrop> ...
Related
This is a simple website that consists of finding some objects, when you click on each one of them a sweetalert pops up. What I want is to disable onclick when clicked once. There is a counter that tells you how many objects you have found but it won't work properly until I disable doble click. This is the link to replit: https://replit.com/#IzanLabrado/buscandoobjetos#index.html
You can unbind an onclick event as outlined in this stackoverflow question in your callback.
function general1() {
alert("I'll only be clicked once");
document.getElementById('image1').onclick=null;
}
#image1 {
background: lightblue;
width: 250px;
height: 50px;
border: 1px solid black;
cursor: pointer;
}
<button id="image1" onclick="general1()">Clicking me works once</button>
Setting onclick to null as part of your callback will prevent the function being called through a click event.
The more maintainable way to code this though would be to have a "state" object of some kind. Like a list of ids that starts empty and you add to each time the item gets clicked. This would allow you to only need to write one function, and you would call it from your html with a different id. Instead of list, you could simplify it further by using set so that duplicate ids can be added without increasing the size of your set.
const foundImages = new Set();
function foundImage(id) {
if (!foundImages.has(id)) {
alert("Congratulations you clicked a new one");
}
foundImages.add(id);
document.getElementById("count").innerHTML=foundImages.size;
}
<div id="1" onclick="foundImage(1)">Item1</div>
<div id="2" onclick="foundImage(2)">Item2</div>
<div id="3" onclick="foundImage(3)">Item3</div>
<p>You have found <span id="count">0</span> images </p>
What to do so that screen reader reads document loading while loading the document and document loaded when document component gets loaded in react?
Adding aria-busy="true" and aria-hidden="true" attributes to the component while loading will hide the content from screen readers temporarily.
For the announcement, somewhere else, create a <div role="status"> and add/remove child elements to it that will be announced when loading/loaded.
End result:
<main>
<Document
aria-busy={isLoading ? 'true' : null}
aria-hidden={isLoading ? 'true' : null}>
</Document>
<div role="status" class="visually-hidden">
{isLoading ? (
<span key="loading">
Document loading
</span>
) : (
<span key="loaded">
Document loaded
</span>
)}
</div>
</main>
The key props are there to make sure React doesn't reuse the same <span> element.
The .visually-hidden class makes it invisible except to screen readers:
.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
You will need to see how to do the following in React, but the principles for AJAX page loading carry across to all SPAs.
The only difference between this and what you asked for is you don't announce "document loaded" instead you focus the <h1> on the page as that is more useful to screen reader users.
Before Loading
You need to signal to a user that a page is loading if you are using a SPA pattern (and therefore interrupting normal navigation).
e.g. I click your link you need to let me know that an action is being performed (loading.....) as you intercept the normal browser behaviour with e.preventDefault() or equivalent.
The simplest way is to use aria-live=assertive on a region that explains the page is loading.
You may want to visually hide this aria-live region (so that only screen readers can access it) so I have included a class to do this in the snippet below, however for the demo I have left the region visible. Here is a link to my original discussion on why to use this class to hide content.
After Loading
Additionally when the new page loads you need to manage focus.
The best way to do this is to add a level 1 heading (<h1>) to each page that has tabindex="-1".
Once the page loads the last action you perform in your JavaScript navigation function is to place the focus onto this heading and then clear the aria-live region
This has two benefits:
it lets the user know where they are now
it also lets them know when the page load is complete (as AJAX navigation doesn't announce when the page is loaded in most screen readers).
By using tabindex="-1" it means that the heading won't be focusable by anything other than your JavaScript so won't interfere with the normal document flow.
Example
var link = document.querySelector('a');
var liveRegion = document.querySelector('p');
var originalPage = document.querySelector('.currentPage');
var newPage = document.querySelector('.newPage');
link.addEventListener('click', function(e){
e.preventDefault();
liveRegion.innerHTML = "loading";
simulateLoading();
});
//this function simulates loading a new page
function simulateLoading(){
window.setTimeout(function(){
//this bit just hides the old page and shows the new page to simulate a page load
originalPage.style.display = "none";
newPage.style.display = "block";
//////////////ACTUAL CODE/////////////////
// grab the heading on the new page (after the new page has loaded fully)
var mainHeading = document.querySelector('.newPage h1');
//focus the main heading
mainHeading.focus();
// reset the aria-live region ready for further navigation
liveRegion.innerHTML = "";
}, 1000);
}
.newPage{
display:none;
}
<div class="currentPage">
<h1>Current Page</h1>
Click me to navigate
<p class="live-region visually-hidden" aria-live="assertive"></p>
</div>
<div class="newPage">
<h1 tabindex="-1">New Page Heading Focused Once Loaded</h1>
<button>Just a button for something to focus so you can see you can't refocus the H1 using the Tab key (or shift + Tab)</button>
<p>Below is the visually hidden class I mentioned, this can be used to hide the aria-live region visually if you wish, I have left it visible for demonstration purposes.</p>
<pre>
.visually-hidden {
border: 0;
padding: 0;
margin: 0;
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}
</pre>
</div>
I have two buttons are set position equal to "absolute", when the LastPass addon's bar dipslays, they displays wrong because LastPass had inserted an iframe to my webpage:
LastPass iFrame
<iframe id="lpiframe74158812" src="chrome-extension://hdokiejnpimakedhajhdlcegeplioahd/overlay.html?&add=1" scrolling="no"
style="height: 27px; width: 1263px; border: 0px;"></iframe>
The CSS:
.button-bar {
width: 175px;
float: left;
top: 113px;
text-align: right;
right: 20px;
position: absolute;
}
Image: http://i.stack.imgur.com/Rq5Z5.png
How can I avoid this case? Thanks so much!
I had this same issue and I found that last pass editing the DOM of my webpage! LastPass had added a div right after the body tag of my page.
<div id="lptopspacer48468746" style="height: 27px;"></div>
It looks like the div id is random, so I can't strip it out. I think this problem is with lastPass. I don't think there is a way to truly fix it.
Also annoyed by this <div id="lptopspacer[0-9]+" style="height:40px"></div> inserted in any page monitored by firefox lastPass plugin (after the site has shown a login form), I've come up with a jQuery solution.
Only adding some CSS rules don't seems to works as the div is obviously added after page load by a script. Changing style or trying to remove the div just after page load doesn't works either.
So this snippet run a delayed function to hide the div when found, or stop running after 5 attempts if no lastPass plugin is affecting the document.
<script>
var log = function(msg) {
if (console && console.log){
console.log(msg)
}
};
$(document).ready(function(){
var maxTry = 5, lptopHideTimeout;
var clearLptop = function(delay) {
var $lptop = $("div[id^='lptopspacer']");
if (lptopHideTimeout) {
window.clearTimeout(lptopHideTimeout);
}
if ($lptop.length && $lptop.is(':visible')) {
log("** Hiding lastPass lptopspacer...");
$lptop.css( "display","none" );
}
else {
maxTry -= 1;
if (maxTry > 0) {
log("## No lastPass lptopspacer div found yet. Retrying in " + (delay/1000) + ' second...');
lptopHideTimeout = window.setTimeout(function(){
clearLptop(delay);
},delay);
}
else {
log("## Giving up after too much attempts.");
}
}
};
clearLptop(500);
});
</script>
Better late than never if others also are having this problem. I had it to, that Lp spacer, in my case it was generated because I had Mcafee safekey installed on the computer. It showed up with a notice on every pageload on my website and caused an lp spacer that broke my site with a white bar on top.
Uninstalling Mcafee safekey solved it for me.
I'd like to use TinyMCE 4.1.7 in inline mode. When the user right-clicks a DIV and selects Edit, indicating they want to edit the DIV, I execute
var id= g.currentElement$.attr('id');
tinymce.init({
selector: "div#"+id,
inline:true,
});
This adds a TinyMCE editor (I know because I catch an AddEditor event) but it doesn't seem to append the editor elements to the DOM (I can't see them in Chrome DevTools Elements tab). For the editor to appear I have to click inside the DIV.
I want to change this behavior so that when the user right-clicks the DIV and selects Edit, my handler will also trigger whatever is triggered now by clicking in the DIV. So after I've launched the editor, as above, I need to call some other method that will append the editor to the DOM and make it visible, so clicking Edit in the context menu is all I need to bring up the TinyMCE editor.
Could someone tell me what I need to do to accomplish this?
(The reason I can't just click the DIV to bring up the editor is that a click already means something else. A single click selects the DIV, where it can be deleted, duplicated, nudged, etc. A drag on the DIV moves it. And a drag on a DIV corner resizes the DIV. A right-click with an Edit option is all I have left.)
Thanks for your help.
Steve
I got this working as follows.
I first run the tinymce init:
var id= g.currentElement$.attr('id');
tinymce.init({
selector: "div#"+id,
inline:true,
});
That creates an editor for the element but doesn't render or show it. Rendering and showing the editor normally requires a mousedown on the element.
After stepping through a lot of tinymce code I realized that firing a focusin event on the editor instance is what gets the editor rendered and displayed. So I created a callback for AddEditor. The AddEditor event comes in early in the editor create process, though, and I didn't want to fire focusin until the editor was complete, so at the AddEditor event I get the editor instance and create a callback for "NodeChange," which happens at the end of the editor create.
When NodeCreate comes in I fire a "focusin" on the editor and that renders and displays the editor, as I wanted. A single click, now, runs tinymce init and leaves an inline editor displayed and ready on top of the element.
The total code is:
tinymce.on('AddEditor', function(e) {
e.editor.on('NodeChange', function(e) { // now that we know the editor set a callback at "NodeChange."
e.target.fire("focusin"); // NodeChange is at the end of editor create. Fire focusin to render and show it
});
});
If anyone sees anything wrong with this I'd be very grateful for any comments.
Thanks
tinymce.init({
selector: "div#"+id,
inline:true,
setup: function (ed) {
ed.on('init', function(e) {
e.target.fire("focusin");
});
}
});
This will do the trick for the initiating editor instance. Better then globally firing for every single NodeChange event for every single editor instance on the page. (Assuming there multiple editors but also works with single editor.)
BUT WAIT...
There is a better practice using JS Promises. tinymce.init returns a Promise Object.
let tinyMcePromise= tinymce.init({
selector: "div#"+id,
inline:true
});
tinyMcePromise.then(function(editors){
editors[0].focus();
});
Official documentation: https://www.tinymce.com/docs/api/tinymce/root_tinymce/#init
Beware: Some older versions of tinyMce have a bug about init Promise.
**Please first add jquery and tinymce library..**
<script src="latestjquery.js" type="text/javascript" charset="utf-8"></script>
<script src="tinymce.min.js"></script>
<form method="post">
<textarea>here firstly onlciki will show menu and when edit will be selcted then it will be converted into ediotr</textarea>
</form>
<ul class='custom-menu'>
<li data-action = "first">First thing</li>
<li data-action = "second">Second thing</li>
<li data-action = "third">Third thing</li>
</ul>
<script>
//Trigger action when the contexmenu is about to be shown
$("textarea").bind("contextmenu", function (event) {
// Avoid the real one
event.preventDefault();
// Show contextmenu
$(".custom-menu").finish().toggle(100).
// In the right position (the mouse)
css({
top: event.pageY + "px",
left: event.pageX + "px"
});
});
// If the document is clicked somewhere
$("textarea").bind("mousedown", function (e) {
// If the clicked element is not the menu
if (!$(e.target).parents(".custom-menu").length > 0) {
// Hide it
$(".custom-menu").hide(100);
}
});
// If the menu element is clicked
$(".custom-menu li").click(function(){
tinymce.init({
selector: "textarea"
});
// This is the triggered action name
switch($(this).attr("data-action")) {
// A case for each action. Your actions here
case "first": alert("first"); break;
case "second": alert("second"); break;
case "editor": alert("editor will appear");
break;
}
// Hide it AFTER the action was triggered
$(".custom-menu").hide(100);
});
</script>
<style>
.custom-menu {
display: none;
z-index: 1000;
position: absolute;
overflow: hidden;
border: 1px solid #CCC;
white-space: nowrap;
font-family: sans-serif;
background: #FFF;
color: #333;
border-radius: 5px;
}
.custom-menu li {
padding: 8px 12px;
cursor: pointer;
}
.custom-menu li:hover {
background-color: #DEF;
}
</style>
I have an iframe inside my main page. There is a modalpopup inside the iframe page. So when the modalpopup is shown, the parent of the modalpopup is the iframe body and the main page parent body. Thus the overlay only covers the iframe and not the entire page.
I tried moving the modalpopup from the iframe to the parent windows body element (or any other element inside the parents body) using jQuery. I am getting an invalid argument error.
How do I show a modalpopup from an page inside iframe and it should cover the entire document, parent document as well?
Update:
Since few users are interested in achieving the same behavior .. here is the workaround
The best workaround that I would suggest would be to have the modalpopup in the main page .. and then invoke it from the iframe .. say something like this ..
/* function in the main(parent) page */
var _onMyModalPopupHide = null;
function pageLoad(){
// would be called by ScriptManager when page loads
// add the callback that will be called when the modalpopup is closed
$find('MyModalPopupBehaviorID').add_hidden(onMyModalPopupHide);
}
// will be invoked from the iframe to show the popup
function ShowMyModalPopup(callback) {
_onMyModalPopupHide = callback;
$find('MyModalPopupBehaviorID').show();
}
/* this function would be called when the modal popup is closed */
function onMyModalPopupHide(){
if (typeof(_onMyModalPopupHide) === "function") {
// fire the callback function
_onMyModalPopupHide.call(this);
}
}
/* functions in the page loaded in the iframe */
function ShowPopup(){
if(typeof(window.parent.ShowMyModalPopup) === "function") {
window.parent.ShowMyModalPopup.apply(this, [OnPopupClosed]);
}
}
// will be invoked from the parent page .. after the popup is closed
function OnPopupClosed(){
// do something after the modal popup is closed
}
Hope it helps
If you're using the iframe simply for scrollable content you might consider a styled div with overflow: auto or scroll, instead.
A set up such as this makes it easier to modify the appearance of the entire page since you're not working with multiple documents that each essentially have their own window space inside the page. You can bypass some of the cross-frame communication and it may be easier to keep the information in sync if you need to do that.
This may not be suitable for all situations and may require ajax (or modifying the dom with javascript) to change the div contents instead of just loading a different document in the iframe. Also, some older mobile browsers such as Android Froyo builds don't handle scrollable divs well.
You answered your own question in your update. The modal dialog needs to live on the parent page and invoked from the iframe. Your only other option is to use a scrolling div instead of an iframe.
It is not possible the way you are asking. Think of it this way: an iframe is a seperate window. You cannot (for the time being) move a div in one webpage into another.
I have done this by writing a small code for jQuery see below maybe this can help :
NOTE: Make sure you are doing on same domain
HTML:
<button type="button" id="popup">Show Popup</button>
<br />
<br />
<iframe src="your url" style="width: 100%; height:400px;"></iframe>
JS:
// Author : Adeel Rizvi
// It's just a attempt to get the desire element inside the iframe show outside from iframe as a model popup window.
// As i don't have the access inside the iframe for now, so I'll grab the desire element from parent window.
(function () {
$.fn.toPopup = function () {
return this.each(function () {
// Create dynamic div and set its properties
var popUpDiv = $("<div />", {
class: "com_popup",
width: "100%",
height: window.innerHeight
});
// append all the html into newly created div
$(this).appendTo(popUpDiv);
// check if we are in iframe or not
if ($('body', window.parent.document).length !== 0) {
// get iframe parent window body element
var parentBody = $('body', window.parent.document);
// set height according to parent window body
popUpDiv.css("height", parentBody.height());
// add newly created div into parent window body
popUpDiv.appendTo(parentBody);
} else {
// if not inside iframe then add to current window body
popUpDiv.appendTo($('body'));
}
});
}
})();
$(function(){
$("#popup").click(function () {
// find element inside the iframe
var bodyDiv = $('iframe').contents().find('YourSelector');
if (bodyDiv.length !== 0) {
// Show
$(bodyDiv).toPopup();
} else {
alert('Sorry!, no element found');
}
});
});
CSS:
.com_popup {
background-color: Blue;
left: 0;
position: absolute;
top: 0;
z-index: 999999;
}