I have a link on my page. When i click on it a pop up opens and the background becomes grey in color. But my problem is i am still able to click on other links present in background.
The div id for background is pagewrapper.
As far as i think code -
document.getElementById('pagewrapper').disabled=true; should have done the trick and diabled the entire background behind the pop up freezes. But it is not happening.
This is the code to open the popUp.
Last line was supposed to disable the background window.
function popUpText(popUpContents)
{
// move the popup to a relative position to how the page is scrolled
var containerTop = Position.page($('pagewrapper'))[1];
$('popup').setStyle({top: ((0-containerTop)+100) + 'px'});
var popupPageHTML = $(popUpContents).innerHTML;
var uniquePopupPageHTML = popupPageHTML.replace(/-POPUP_ID_REPLACER-/g,"-");
$('popup').innerHTML = uniquePopupPageHTML;
toggleIt('popup');
$('pagewrapper').setOpacity(.3);
document.getElementById('pagewrapper').disabled=true;
}
You should create a popup layout which must cover entire body and z-index of the overlay should be between body and popup. Delete the overlay when user closes the popup.
Edit: Here is a tutorial that you may follow:
http://hallofhavoc.com/2013/05/how-to-create-an-overlay-popup-box-using-html-css-and-jquery/
Related
I'm writing an Chrome Extension for Google Calendar, which adds an div under the header section of Google Calendar.
For simplicity, this is what essentially happens in Chrome Extension content script, you can just paste this code in the console of calendar.google.com to check what happens:
let header = document.querySelector("header[role='banner']");
let appContainer = document.createElement('DIV');
appContainer.style.height = '200px';
appContainer.style.backgroundColor = 'red';
header.parentNode.insertBefore(appContainer, header.nextSibling);
The problem I experience is, after creating or canceling the creation of an event in calendar view, the window scrolls up and doesn't show the page header now.
Anyone have an idea how to keep page steady after creating or canceling of an event in calendar view, and keep the div I append via Chrome Extension content script too?
EDIT: Here are screenshots of how it looks like before the event creation/cancel and after:
Normally, without your extension, header.parentElement contains two elements that count towards header.parentElement.clientHeight: header, and the div that contains the calendar itself:
(It also contains a few floating buttons and hidden divs and stuff, but those aren't important here.)
These two elements, header and calendar, have heights that are calculated specifically so that header.clientHeight + calendar.clientHeight is equal to the height of the page. Under normal circumstances this is perfect since it means there's no need for scrolling.
However, in your case, that you add an extra div, which pushes calendar down:
Normally you would be able to scroll down yourself to see the bottom of calendar, but since the scroll bar is disabled, you can't. However, when you create an event, your browser sees that you are trying to access the bottom of calendar, so it scrolls down automatically to show you the bottom of calendar. Since the whole page is now scrolled down to make the bottom of the page visible, the top of the page is now invisible, resulting in the behavior that you describe.
The way to fix this is to make adjust the height of calendar so that header.clientHeight + appContainer.clientHeight + calendar.clientHeight is equal to the height of the page, rather than just header.clientHeight + calendar.clientHeight. This can be done by adding the following code:
//Getting calendar can be a bit tricky since it's just one dive among others.
//While it does have a CSS class, I don't know how that name is determined or if it will change in future versions of Google Calendar, so it's best not to use it.
//What I do here instead is that I select the first child of header.parentElement that has parts outside of the page frame
const getCalendar = () => [...header.parentElement.querySelectorAll(":scope > div")].find(d => {
let boundingRect = d.getBoundingClientRect();
return boundingRect.y + boundingRect.height > document.body.clientHeight;
});
let calendar = getCalendar();
//This function adjusts the height of calendar
const adjustHeight = () => {
calendar = calendar || getCalendar(); //calendar may be null in the beginning before all the elements were set, so if it's null try to select it again
if(calendar != null){
calendar.style.height = (calendar.parentElement.clientHeight - header.clientHeight - appContainer.clientHeight) + "px"; //Adjust the height of calendar
}
};
window.addEventListener("resize", adjustHeight); //Adjust the height whenever the window gets resized
window.addEventListener("load", adjustHeight); //Adjust the height on page load
When I open a pop up from my page, it works fine. But when I try to open the it and scroll to other position on page, then the pop up open accordingly the position of scrolling. I want it to stay on the same position of the page regardless scrolling.
Here is my code that opens the container of my pop up:
//open page
$('.single-page').on('click', function() {
var selectedProject = $(this),
toggle = !selectedProject.hasClass('is-full-width');
if (toggle) toggleProject($(this), $('.page-container'), toggle);
});
$('#popup').show().scrollTop(0);
$('#popup').animate({ scrollTop: (0) }, 'slow');
refere link : https://www.w3schools.com/jquery/css_scrolltop.asp
I think it is scroll issue when toggle(open/close) second time it opens with previous scrolled position
FIX : scroll to top postion on toggle each time is one option
When I use editor.WindowManager.open to open a dialog window in tinyMce, it is centered on the screen.
I would like it to be centered inside the Editor.
How to approach this? Can I control the window location?
I found a solution by adding centering CSS dynamically to the web-page Head when the form opens.
In the "editor.windowManager.open" function of the dialog, I added this code:
id: 'xxx-dialog',
onopen: function() {
// Forcibly center dialog
if ($("head #added-xxx-dialog-CSS").length == 0) // only once
{
$("#xxx-dialog .mce-dragh").remove(); // disable dragging of dialog
var mceHeight=$(".mce-tinymce").height();
var mceTop=$(".mce-tinymce").position().top;
var thisHeight=$("#xxx-dialog").height();
var newTop=mceHeight/2+mceTop-thisHeight/2;
$("head").append('<style id="added-xxx-dialog-CSS"
type="text/css">#xxx-dialog {top:'+newTop+'px !important;}</style>');
}
}, // etc...
This code only centers the Dialog vertically, as in my application the Dialog is centered horizontally automatically anyway, but it is very easy to add a few more lines in the same way to center it horizontally as well.
I have long web page that scrolls vertically with several videos. Using Media Element Player, the videos play, but if you enter full screen mode and then exit full screen mode, the page returns to the very top, regardless of where the video is on the page. I want it to return to the same place. Here is the code I'm using:
var topPosition;
MediaElementPlayer.prototype.enterFullScreen_org =
MediaElementPlayer.prototype.enterFullScreen;
MediaElementPlayer.prototype.enterFullScreen = function() {
console.log('enter full screen');
this.enterFullScreen_org();
topPosition = window.pageYOffset;
console.log(topPosition);
}
MediaElementPlayer.prototype.exitFullScreen_org =
MediaElementPlayer.prototype.exitFullScreen;
MediaElementPlayer.prototype.exitFullScreen = function() {
console.log('exit full screen')
this.exitFullScreen_org();
ResetFullScreen();
}
function ResetFullScreen() {
console.log('top pos:', topPosition);
setTimeout(function () { window.scrollTo(0, topPosition) }, 500);
}
The console.log shows the correct value for "topPosition" but the window.scrollTo method doesn't appear to work.
Looking through your code, it appears that it should work. I do, however, have one more method to setting the scroll that may work. This will be useful if the element you're trying to scroll is not at the top level.
When storing the scroll position:
topPosition = document.body.scrollTop;
When setting the scroll position:
document.body.scrollTop = topPosition;
If what you're trying to scroll is an element within the body, and not the body itself, just replace document.body with the element you need to scroll.
Also, I found a little thing in your code:
MediaElementPlayer.prototype.enterFullScreen;'
There's a random quote at the end of that line.
EDIT:
If that method does not work, I have one more idea for you. When they click on the video they view, store the element that they clicked on in a variable. After leaving fullscreen, scroll the element into view. That way, you will be, more or less, where the screen was when it entered fullscreen.
Each video has an onclick containing the following; this stores the element they clicked on.
lastVideoClicked = event.target;
When leaving fullscreen, this code will attempt to scroll that element back into view.
lastVideoClicked.scrollIntoView();
You can try it out on the Stack Overflow site right here - scroll to the bottom of the page, open your javascript console, and enter the code document.getElementById('hlogo').scrollIntoView(). This scrolls the Stack Overflow logo into view.
In case you're on a large page and you've scrolled all the way down. At the bottom is a button which opens a dialog. In my case this dialog opens outside the viewport at the top of the page
DEMO
JS:
var showDialogButton = document.getElementById('showDialogButton');
showDialogButton.addEventListener('click', function() {
var bronteDialog = document.getElementById('bronteDialog');
var anchorPoint = document.getElementById('anchor');
bronteDialog.show(anchorPoint);
});
It turns out that the show function accepts an argument which is an anchor for the dialog. But whatever I do, the dialog is at the top. Any help would be appreciated!
You can add this to the CSS:
dialog {
position: fixed;
}