Window scroll to start when open dialog at the end of page - javascript

I have a page with width is over 100% (2000px). When I click to show dialog from button in the end of page (by horizontal page), window scroll to the start of page (by horizontal page) and display the dialog.
This is my code: codepen
$mdDialog.show(
$mdDialog.alert()
.parent(angular.element(document.querySelector('#popupContainer')))
.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)
);
};
I use angularjs 1.5 and newest angular material js.
How can i show dialog from button in the end of page (by horizontal page) and window not scroll to the start of page?

You can add the following CSS.
.md-dialog-container {
width: 2000px;
}
md-backdrop {
width: 2000px;
}
md-dialog {
position: absolute;
top: 25%;
right: 10%;
}
It adjusts dialog container's and backdrop's width.
Then, positioning the dialog the way you want.
See a working CodePen.

Related

Prevent full screen menu from scrolling

I have a full-screen menu and once active the page still scrolls, is there a way to stop this?
I read another post that stated to
body,html {
overflow: hidden;
max-height: 100%;
}
but this stops the page from scrolling as well.
You may want to consider some JS/Jquery to enable / disable a fixed class when the menu toggles open and closed?
for example
if($('#menu').hasClass('open'))
{
$('body').addClass("fixedPosition");
}
else
{
$('body').removeClass("fixedPosition");
}

How to get a button to fill the full width of the footer in Mobile View?

I'm trying to get a button that's found in the right rail column on my test page (in desktop view) to take up the entire footer of the page in mobile view.
This is the css and js code that I am using:
#media screen and (max-width: 768px) {
#register_text_container {
position: fixed;
bottom: 0px;
}
}
$(function() { //doc ready
if (!($.browser == "msie" && $.browser.version < 7)) {
var target = "#register_text_container", top = $(target).offset().top - parseFloat($(target).css("margin-top").replace(/auto/, 0));
$(window).scroll(function(event) {
if (top <= $(this).scrollTop()) {
$(target).addClass("fixed");
} else {
$(target).removeClass("fixed");
}
});
}
});
The js code is not mine, it is one I found searching stackoverflow and its been working great, I just can't seem to figure out how to get it fill the page. I have tried using width: 100% but that didn't work.
The container that I'm calling in my CSS code is one I do not have direct access to, its built into the CMS and pops up as a button.
when I inspect the Register button to look at the html code to see what I should be calling in my css document this is what I found:
<div class="entry-page-button-container" id="register_link_container">
<div class="manageable-content" data-container="edit_register_text_container">
<a class="entry-text-link secondary-step step-button" id="register_text_container" href="">Register</a>
</div>
</div>
I've tried it on each class and id and so far still unable to get the register button to take up the full width of the page.
Appreciate any help I can get.
Thanks!
Test Page
You have a width: 250px !important on this link .entry-text-link secondary-step step-button
Change it to width:100%; (and remove the !important, it is not needed ).
Then add left:0; and right:0; in this fixed element .entry-page-button-container
And it should works properly.
just set the width of the button element to 100%. This will make it take up the full width of the button's parent container.
Set it using the style attribute like so:
<div>
<button style="width: 100%">Press this full width button!</button>
</div>
this will make the button go to the full width of the parent div element
You have to remove width : 250px !important on <a> element and add this on fixed element.
width: 100%;
left: 0;
bottom: -10px;

popup can't stay in the center of screen due to background page scrolling back to top

I have this problem that the page is scrolling to the top when I click a button to open a popup window.
So, if I scroll down the page to almost bottom, there is a button 'submit', when clicked, a popup window will open, which supposed to open in the center of the screen. But once 'submit' is clicked, the page scrolls up to the top, which makes the popup is not visible(the popup window is in the center of the old page before it scrolls to the top). What's more, if I scroll page down, close the popup window, click 'submit' again, the page will not scroll to the top, and the popup is indeed in the center of the window. It's only the first time when the button is clicked, the page will scroll to the top by itself.
I want the popup window keep in the center of the screen all the time, I used data-position-to="window" to achieve this. I believe the reason it's not in the center is because the page itself scrolls to the top. Wondering how should I do to fix this?
This is my popup :
<div data-role="popup" id="feedbackValidationError" data-position-to="window" data-dismissible="false" data-history="false" data-overlay-theme="a" data-transition="slidedown" class="ui-corner-all">
<div data-role="header" data-theme="a">
<h1 class="center">Form Error</h1>
</div>
<div data-role="content" class="ui-corner-bottom ui-content popupPadding">
<p>Please answer to at least one of the questions</p>
OK
</div>
</div>
Code I use to open popup:
$("#feedbackValidationError").popup("open");
and for close the popup:
$(document).on('pageinit', '#FeedbackEnter',
function () {
$("#feedbackValidationErrorButton").on("click",
function () {
$("#feedbackValidationError").popup("close");
}
);
}
);
I think this is the behavior that you are trying to describe in your question. https://jsfiddle.net/5mrybr1v/3/
To solve that you can show popUp after scroll.
window.scrollTo(0,0);
$("#feedbackValidationError").popup("open");
https://jsfiddle.net/5mrybr1v/4/
You can use CSS to handle this. position: fixed will keep the element fixed to the window instead of the position in the document.
Fiddle: http://jsfiddle.net/vLeh24z1/1/
No matter where you scroll it stays in the same position.
.popup {
height: 100px;
width: 100px;
position: fixed;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}

use browser default scrollbar on jquery ui modal dialog

Is it possible to use jquery ui's dialog, and span it across the full browser height?
Then, if there is extra page, use the browser default scrollbar to go up and down, freezing the rest of the page behind the overlay?
$(function()
{
$('#category_modal').dialog({
autoOpen: false,
title: 'hello',
modal: true,
height: auto,
width: 500,
resizable: false
});
});
Not using the default dialog. You can make the dialog 100% height/width and "overflow" text scrollable using CSS. Your dialog would look something like this in CSS:
#dialog_box {
width: 100%;
height: 100%;
overflow-y: scroll;
}
You could also put an iFrame within the dialog if you wanted. However, this is no way to completely "Freeze" what is in the background. The user can always select the background and use the mouse-wheel or simply use the browser's scroll bar. Using overflow-y will create a 2nd scroll bar on the edge of the dialog that will scroll the content within (should you need to).

Safari Extension overlay an iframe on to every page

I am writing a Safari extension. It needs to overlay content from another source on top of the page when I click a button in the toolbar.
How do I position it at the top left corner of the browser, on top of the content? When I click the close button the iframe should be destroyed, displaying the content that was previously covered up?
Thanks!
You can put the CSS either inline or in a stylesheet.
<iframe src="http://path.to/content" style="width: 200px; height: 100px;
position: absolute; top: 0; left: 0; z-index: 100000;" id="overlay_frame"></iframe>
Then, for your "close" link, you have a choice of either completely destroying the iframe:
<a href="#" onClick="document.getElementById('overlay_frame').removeChild(
document.getElementById('overlay_frame').childNodes[0] );">Close</a>
or just hiding it:
Close
Personally, I'd just hide it so you could re-use it again by changing the source:
Change Frame

Categories

Resources