I am creating a popup form. I am using the code below and I want the form to show up in the center of the page with the pre determined height/width. The popup is all over the place. It will pop up on the left top, right middle and with different sizes. How can I set it to be consistent?
<a class="collapse-item" href="#" onclick="reqcred()">Cards</a>
<script>
function reqcred() {
w = window.open("{% url 'test_popup' %}","popup_form", 'left=100,top=100,height=450,width=650');
w.onload =
function() {
w.onunload = function() {
location.reload(true);
}}}
</script>
I figured it out. This is what I did.
<script>
function reqcred() {
var height = 750
var width = 950
var left = Number((screen.width/2)-(width/2));
var top = Number((screen.height/2)-(height/2));
w = window.open("{% url 'test_popup' %}","popup_form", 'width='+ width + ', height=' + height + ', top='
+ top + ', left=' + left);
w.onload =
function() {
w.onunload = function() {
location.reload(true);
}}}
</script>
Related
I have html which has header footer and divs between. I am trying to create an event when the window is scrolled to footer. As the footer appears immediately an alert must popup which shows a message.
Here is my HTML content
http://jsfiddle.net/q4bw82gy/
I have tried the below jquery code, but it is not working for resolutions other than desktop
$(window).scroll(function() {
var scrollPosition = $(window).height() + $(window).scrollTop();
var theight = ($('.banner-section').height()+$('.section-one').height()+$('.section-two').height()+$('.read-one').height()+$('.read-two').height()+$('.next-program').height())-($('.navbar-dark').height()+
($('.main-navigation').height()));
var height1 = $(window).scrollTop();
var height2 = $('.main').height()-$('.expand-section').height()-$('.ftr').height();
if(height1 >= theight){
alert('message 1');
}
else{
alert('message 2');
}
});
Please help with a better solution
Do you want something like this?
$(function() {
$(window).scroll(function() {
var footerTop = $('.ftr').position().top; // or .offset().top
var scrollTop = $(window).scrollTop();
var viewportHeight = $(window).height();
if (footerTop <= scrollTop + viewportHeight) {
console.log("true|" + footerTop + "|" + scrollTop + "|" + viewportHeight);//alert
} else {
console.log("false|" + footerTop + "|" + scrollTop + "|" + viewportHeight);//alert
}
});
});
I am having a problem with closing a pop window. My problem is unique in kind if I click Logout from the parent, it closes all the windows, but when I log out from a child, then I am logging out from Parent, so it does not close the other child windows that are open.
When I am logging out from a child and then I am logging out from a parent, I checked in console and it is not going inside the if block.
I am opening all the pop-ups like this -
function openpop1() {
sessionId = getURLParameters('requestID');
userName = getURLParameters('userName');
userId = getURLParameters('userId');
lvalue = getURLParameters('lValue');
lver = getURLParameters('lVer');
window.name = "parent";
var intWidth = screen.width - 10; //Adjust for the end of screen
var intHeight = screen.height - 80; //Adjust for the Icon Bar at the bottom of the window.
var strWinProp = " toolbar=no" //Back, Forward, etc...
+ ",location=no" //URL field
+ ",directories=no" //"What's New", etc...
+ ",status=yes" //Status Bar at bottom of window.
+ ",menubar=no" //Menubar at top of window.
+ ",resizable=yes" //Allow resizing by dragging.
+ ",scrollbars=yes" //Displays scrollbars is document is larger than window.
+ ",titlebar=yes" //Enable/Disable titlebar resize capability.
+ ",width="+intWidth //Standard 640,800/788, 800/788
+ ",height="+intHeight //Standard 480,600/541, 600/566
+ ",top=0" //Offset of windows top edge from screen.
+ ",left=0" //Offset of windows left edge from screen.
+ "";
awin = window.open(aUrl + userName + "&requestID=" + sessionId
+ "&userId=" + userId + "&lValue=" + lvalue + "&lVer=" + lver,'_blank',strWinProp);
}
function openpop2() {
sessionId = getURLParameters('requestID');
userName = getURLParameters('userName');
userId = getURLParameters('userId');
lvalue = getURLParameters('lValue');
lver = getURLParameters('lVer');
window.name = "parent";
var intWidth = screen.width - 10; //Adjust for the end of screen
var intHeight = screen.height - 80; //Adjust for the Icon Bar at the bottom of the window.
var strWinProp = " toolbar=no" //Back, Forward, etc...
+ ",location=no" //URL field
+ ",directories=no" //"What's New", etc...
+ ",status=yes" //Status Bar at bottom of window.
+ ",menubar=no" //Menubar at top of window.
+ ",resizable=yes" //Allow resizing by dragging.
+ ",scrollbars=yes" //Displays scrollbars is document is larger than window.
+ ",titlebar=yes" //Enable/Disable titlebar resize capability.
+ ",width="+intWidth //Standard 640,800/788, 800/788
+ ",height="+intHeight //Standard 480,600/541, 600/566
+ ",top=0" //Offset of windows top edge from screen.
+ ",left=0" //Offset of windows left edge from screen.
+ "";
bwin = window.open(bUrl + userName + "&requestID=" + sessionId + "&userId="
+ userId + "&lValue=" + lvalue + "&lVer=" + lver,'_blank',strWinProp);
}
And while log out I am calling
function onLogout() {
if (awin && !awin.closed) {
awin.close();
}
if (bwin && !bwin.closed) {
bwin.close();
}
sessionId = getURLParameters('requestID');
var rcvReq = getXmlHttpRequestObject();
rcvReq.onreadystatechange = function() {
if (rcvReq.readyState == 4 || rcvReq.readyState == 0) {
var data = rcvReq.status;
}
}
rcvReq.open("GET", logoutUrl +sessionId, true);
rcvReq.send(null);
window.location = loginPageUrl;
}
Now my problem is why is it not going inside the if block when I am logging out from the child and then the parent. I checked this by adding a breakpoint to these lines.
if (awin && !awin.closed) {
awin.close();
}
if (bwin && !bwin.closed) {
bwin.close();
}
I also checked whenever I am closing one pop-up the value of the both awin and bwin is getting set to undefined.
But why it happening. Somebody can help me on this?
EDIT :
Is this because if I am logging out I am setting a modal window on main page for user to tell the session is time out.
The code for that is here-
if (responseBodyFull == "Invalid Session Id passed") {
console.log("Invalid Session");
showModalBoxForInvalidSessionInfo();
}
and the function is defined like this -
function showModalBoxForInvalidSessionInfo(){
$("#modelView").dialog({
autoOpen : false,
modal : true,
buttons : [ {
text : "OK",
icons : {
primary : "ui-icon-heart"
},
click : function() {
$(this).dialog("close");
}
}]
});
$("#modelView" ).dialog("open");
$("#modelView").text("Session Timed Out. Please login again to access the Dashboard");
}
But anyway when we do console.log it is coming to the if part. So, I guess this should not be a problem.
I am trying to display preloaded images in a newly created popup window. Here is the code:
HTML
<div id="hiddenImages" style="display: none;"></div>
<img src="SmallImage1.gif" width="196" height="130" border="0">
<img src="SmallImage2.gif" width="196" height="130" border="0">
JS
<script type="text/javascript">
preloadImages('BigImage1.png','BigImage2.png');
</script>
// PreLoadImages:
function preloadImages() {
var hiddenDiv = document.getElementById('hiddenImages');
var i;
var img;
for(i = 0; i < arguments.length; i++) {
img = document.createElement('img');
img.src = arguments[i];
img.id = arguments[i];
img.alt = '';
hiddenDiv.appendChild(img);
}
}
// OpenImage:
function OpenImage(element,e)
{
e.preventDefault();
var big_image = element.getAttribute("href");
var img = document.getElementById(big_image);
var top = (screen.height/2)-(img.height/2);
var left = (screen.width/2)-(img.width/2);
var str = "\"" + "width=" + img.width + ",height=" + img.height + ",top=" + top + ",left=" + left + ",status=0, scrollbars=0, resizable=0" + "\"";
alert(str);
var myWindow = window.open(img.src , "win1", str);
}
When I output 'str' variable in OpenImage() function, this code gives perfect dimensions of the big image. However, the size of popup window is always different than size of the image. IE stretches the popup window horizontally while Google Chrome stretches it vertically. In spite of the fact that both browsers show exactly the same dimensions for the image. And these dimensions of the image are actually being set as size of the pop up window.
Regards.
Try this out, also try to rename your variable top, I think javascript read this as a keyword.
var str = "width=" + img.width + ",height=" + img.height + ",top=" + tops + ",left=" + left + ",status=0, scrollbars=0, resizable=0 ";
I'm using a custom Tumblr share button on my Blogger-based website and I'd like the share screen to open in a pop-up window. Right now it opens in a new tab.
Can someone please show me how to do this?
<div class='tumblr-button'>
<script>
var strPostUrl = "<data:post.url/>";
var strPostTitle = '<data:post.title/>';
var strNewUrl = strPostUrl.replace("http://","");
var strNewTitle = strPostTitle.replace(/"/g, '"');
document.write("<a href='http://www.tumblr.com/share/link?url="+strNewUrl+"&name="+strNewTitle+"' target='_new'><img src='http://platform.tumblr.com/v1/share_1.png'/></a>");
</script>
</div>
<div class='tumblr-button'>
<script>
var strPostUrl = "http://google.com";
var strPostTitle = 'Google';
var strNewUrl = strPostUrl.replace("http://","");
var strNewTitle = strPostTitle.replace(/"/g, '"');
</script>
<a href='javascript:void(0);' id='tumblr'><img src='http://platform.tumblr.com/v1/share_1.png'/></a>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#tumblr').click(function(){
var width = 775,
height = 500,
left = ($(window).width() - width) / 2,
top = ($(window).height() - height) / 2,
opts = 'status=1' +
',width=' + width +
',height=' + height +
',top=' + top +
',left=' + left;
var url = "http://www.tumblr.com/share/link?url="+strNewUrl+"&name="+strNewTitle;
window.open(url , 'tumblr', opts);
});
});
</script>
check demo code on http://jsfiddle.net/gzMXd/
Use javascript window.open() function
$('#buttonID').click(function() {
myWindow=window.open('','','width=200,height=100');
myWindow.document.write("<p>This is 'myWindow'</p>");
myWindow.focus();
});
Syntax:
window.open (URL, windowName[, windowFeatures])
eg. window.open ("http://jsc.simfatic-solutions.com", "mywindow","status=1,toolbar=1");
I have an aspx page with a button. When the user clicks that button, the following javascript opens a new browser window (in this case, 'Reasons.aspx'). Works great. Here's the function for that part:
function ShowPanel(url)
{
var width = 750;
var height = 600;
var left = (screen.width - width) / 2;
var top = (screen.height - height) / 2;
var params = 'width=' + width + ', height=' + height;
params += ', top=' + top + ', left=' + left;
params += ', toolbar=no';
params += ', menubar=no';
params += ', resizable=yes';
params += ', directories=no';
params += ', scrollbars=no';
params += ', status=no';
params += ', location=no';
newwin = window.open(url + '?LetterNumber=1&ReasonType=3', 'd', params); //<--- Change This (LetterNumber) When Copying!
if (window.focus)
{
newwin.focus()
}
return false;
}
Now here's where it gets funky. When this window pops up, there are some controls. One of which is a button, which triggers almost identical code to popup a third window (in this case, ReasonCodes.aspx). Only it won't work. Here's the code for that:
function fGetReasons(url)
{
var width = 750;
var height = 600;
var left = (screen.width - width) / 2;
var top = (screen.height - height) / 2;
var params = 'width=' + width + ', height=' + height;
params += ', top=' + top + ', left=' + left;
params += ', toolbar=no';
params += ', menubar=no';
params += ', resizable=yes';
params += ', directories=no';
params += ', scrollbars=no';
params += ', status=no';
params += ', location=no';
newwin = window.open(url, 'd', params); //<--- Change This (LetterNumber) When Copying!
if (window.focus)
{
newwin.focus()
}
return false;
}
I've set breakpoints on the javascript. It does execute. Here's what's weird -- The above javascript executes, only I don't get a new window with ReasonCodes.aspx. However, I set a breakpoint in the page_load of ReasonCodes.aspx and all of it executes. So the javascript executes, the code-behind page_load of the third page executes, but I don't get a third page.
Instead, the second window (Reasons.aspx) refreshes. It's like my third window is somehow 'hidden'.
Can anybody tell me what's going on, or what am I missing?
Thanks,
Jason
PS -- I know 3 windows sounds like a lot, and it's not by choice. There's a business need here (this is a local intranet application) and I have to abide by the specs. Thanks.
The 2nd parameter to window.open is the name of the window. You are using the same name in both calls so it is attempting to use the same window. Change the name of the 2nd call and you should be fine.
Or use '_blank' name to open each time in new window!