There is a social login wordpress plugin that produces a large popup window when authenticating a login from a social networking site (facebook, google, etc.)
I would like to make the popup window much smaller, but can't figure it out. The code the produces the popup window is:
if( get_option( 'wsl_settings_use_popup' ) == 1 || ! get_option( 'wsl_settings_use_popup' ) ){
?>
<html><head><script>
function init() {
window.opener.wsl_wordpress_social_login({
'action' : 'wordpress_social_login',
'provider' : '<?php echo $provider ?>'
});
window.close()
}
How do I set the width and height for this popup?
Thanks in advance!
UPDATE FOR CENTERED WINDOW
Add this 2 calculation just under provider = $(this).attr("data-provider");:
datop = (($(document).height()-400)/2);
daleft = (($(document).width()-225)/2);
Add this 2 parameters to the attributes:
top="+datop+",left="+daleft+""
like this:
"location=1,status=0,scrollbars=0,width=225,height=400,top="+datop+",left="+daleft+""
END
Edit
You can find the file here: wp-content/plugins/wordpress-social-login/assets/js/connect.js
End edit
The file is "wordpress-social-login\assets\js\connect.js" I don't know where this file will be installed, but probably you can find the function inside it in every page which contain the login (if you can locate it, you can unistall, edit the file and the reinstall with the file modified). This should be the function you are searching for:
(function($){
$(function(){
$(".wsl_connect_with_provider").click(function(){//selector.event
popupurl = $("#wsl_popup_base_url").val();//assign text of the element with id #wls_popup_base..
provider = $(this).attr("data-provider");//assign the attribute data-provider of the element with class .wls_connect..
window.open(
popupurl+"provider="+provider,//url
"hybridauth_social_sing_on", //window name
"location=1,status=0,scrollbars=0,width=1000,height=600"//attributes of the window
);
});
});
})(jQuery);
This should be the code of the popup
window.open(
popupurl+"provider="+provider,
"hybridauth_social_sing_on",
"location=1,status=0,scrollbars=0,width=1000,height=600"
);
To change width and height,edit this 2 params: ..width=1000,height=600"
Note that i add the comments to let you understand what the function do and what are you doing
Related
There have already been answers to this question but I am still unsure exactly how it works.
I am using the following HTML in my footer.php:
<div id="popup">
<div>
<div id="popup-close">X</div>
<h2>Content Goes Here</h2>
</div>
</div>
and the following Javascript:
$j(document).ready(function() {
$j("#popup").delay(2000).fadeIn();
$j('#popup-close').click(function(e) // You are clicking the close button
{
$j('#popup').fadeOut(); // Now the pop up is hiden.
});
$j('#popup').click(function(e)
{
$j('#popup').fadeOut();
});
});
Everything works great, but I want to only show the pop up once per user (maybe using the cookie thing all the forum posts go on about) but I do not know exactly how to incorporate it into the JS above.
I know that I will have to load the cookie JS in my footer with this:
<script type="text/javascript" src="scripts/jquery.cookies.2.2.0.min.js"></script>
But that is all I understand, can anyone tell me exactly how the JS/jQuery should look with the cookie stuff added?
Thanks
James
*Note : This will show popup once per browser as the data is stored in browser memory.
Try HTML localStorage.
Methods :
localStorage.getItem('key');
localStorage.setItem('key','value');
$j(document).ready(function() {
if(localStorage.getItem('popState') != 'shown'){
$j('#popup').delay(2000).fadeIn();
localStorage.setItem('popState','shown')
}
$j('#popup-close, #popup').click(function() // You are clicking the close button
{
$j('#popup').fadeOut(); // Now the pop up is hidden.
});
});
Working Demo
This example uses jquery-cookie
Check if the cookie exists and has not expired - if either of those fails, then show the popup and set the cookie (Semi pseudo code):
if($.cookie('popup') != 'seen'){
$.cookie('popup', 'seen', { expires: 365, path: '/' }); // Set it to last a year, for example.
$j("#popup").delay(2000).fadeIn();
$j('#popup-close').click(function(e) // You are clicking the close button
{
$j('#popup').fadeOut(); // Now the pop up is hiden.
});
$j('#popup').click(function(e)
{
$j('#popup').fadeOut();
});
};
You could get around this issue using php. You only echo out the code for the popup on first page load.
The other way... Is to set a cookie which is basically a file that sits in your browser and contains some kind of data. On the first page load you would create a cookie. Then every page after that you check if your cookie is set. If it is set do not display the pop up. However if its not set set the cookie and display the popup.
Pseudo code:
if(cookie_is_not_set) {
show_pop_up;
set_cookie;
}
Offering a quick answer for people using Ionic. I need to show a tooltip only once so I used the $localStorage to achieve this. This is for playing a track, so when they push play, it shows the tooltip once.
$scope.storage = $localStorage; //connects an object to $localstorage
$scope.storage.hasSeenPopup = "false"; // they haven't seen it
$scope.showPopup = function() { // popup to tell people to turn sound on
$scope.data = {}
// An elaborate, custom popup
var myPopup = $ionicPopup.show({
template: '<p class="popuptext">Turn Sound On!</p>',
cssClass: 'popup'
});
$timeout(function() {
myPopup.close(); //close the popup after 3 seconds for some reason
}, 2000);
$scope.storage.hasSeenPopup = "true"; // they've now seen it
};
$scope.playStream = function(show) {
PlayerService.play(show);
$scope.audioObject = audioObject; // this allow for styling the play/pause icons
if ($scope.storage.hasSeenPopup === "false"){ //only show if they haven't seen it.
$scope.showPopup();
}
}
You can use removeItem() class of localStorage to destroy that key on browser close with:
window.onbeforeunload = function{
localStorage.removeItem('your key');
};
The code to show only one time the popup (Bootstrap Modal in the case) :
modal.js
$(document).ready(function() {
if (Cookies('pop') == null) {
$('#ModalIdName').modal('show');
Cookies('pop', '365');
}
});
Here is the full code snipet for Rails :
Add the script above to your js repo (in Rails : app/javascript/packs)
In Rails we have a specific packing way for script, so :
Download the js-cookie plugin (needed to work with Javascript Cokkies) https://github.com/js-cookie/js-cookie (the name should be : 'js.cookie.js')
/*!
* JavaScript Cookie v2.2.0
* https://github.com/js-cookie/js-cookie
*
* Copyright 2006, 2015 Klaus Hartl & Fagner Brack
* Released under the MIT license
*/
;(function (factory) {
var registeredInModuleLoader = false;
if (typeof define === 'function' && define.amd) {
define(factory);
registeredInModul
...
Add //= require js.cookie to application.js
It will works perfectly for 365 days!
You might be using an API for fetching user from database, so use any unique data like id or email or name to identify user then use localstorage method suggested by #Shaunak D. Just replace key with user's unique field and value with popup state.
Like:
ID : popup_state
Sorry for the mistakes in the reply. I am not on my pc today 😅😛
When I add another window using var w = window.open("", "_blank"); , it shows as URL about:blank and I can write to its body with no problem. but at the end, looking at the sources it only has and there is nothing to work with.
If instead I use existing HTML file,var w = window.open("{some path}/Empy.html", "_blank"); All the $(w.document.body).append(... commands write somewhere else not inside the opened file.
Is there a promise I can use, to start writing to it only after the existing file finished rendering?
this will work in IE to, extended from this answer
function openindex(){
OpenWindow = window.open("http://www.htmlgoodies.com/beyond/javascript/article.php/3471221", "_blank");
myFunction = function(){
alert("hi")
window.document.write("<TITLE>Title Goes Here</TITLE>")
window.document.write("<BODY BGCOLOR=pink>")
window.document.write("<h1>Hello!</h1>")
window.document.write("This text will appear in the window!")
window.document.write("</BODY>")
window.document.write("</HTML>")
window.document.close()
}
OpenWindow[OpenWindow.addEventListener ? 'addEventListener' : 'attachEvent'](
(OpenWindow.attachEvent ? 'on' : '') + 'load', myFunction, false
);
}
in my example i overwrite the entire page since i dont know if it has jQuery nor i tried to target specific element, but that is the way to go.
p.s. the url is just random
I have set subscribe popup box, but now because of Google penalty I need to have 2 different one for mobile and desktop. Function is set in function.php and ideally would like to keep it there but not sure how to gpo around it.
add_action( 'wp_footer', 'show_subscribe_popup' );
function show_subscribe_popup(){
if(is_front_page()){
//$subscribe_popup = '
//';
//echo $subscribe_popup;
include('inc/popup_form_test.php');
}
}
I created to form files and trying to incorporate var viewportWidth = $(window).width();
Any suggestions please
There have already been answers to this question but I am still unsure exactly how it works.
I am using the following HTML in my footer.php:
<div id="popup">
<div>
<div id="popup-close">X</div>
<h2>Content Goes Here</h2>
</div>
</div>
and the following Javascript:
$j(document).ready(function() {
$j("#popup").delay(2000).fadeIn();
$j('#popup-close').click(function(e) // You are clicking the close button
{
$j('#popup').fadeOut(); // Now the pop up is hiden.
});
$j('#popup').click(function(e)
{
$j('#popup').fadeOut();
});
});
Everything works great, but I want to only show the pop up once per user (maybe using the cookie thing all the forum posts go on about) but I do not know exactly how to incorporate it into the JS above.
I know that I will have to load the cookie JS in my footer with this:
<script type="text/javascript" src="scripts/jquery.cookies.2.2.0.min.js"></script>
But that is all I understand, can anyone tell me exactly how the JS/jQuery should look with the cookie stuff added?
Thanks
James
*Note : This will show popup once per browser as the data is stored in browser memory.
Try HTML localStorage.
Methods :
localStorage.getItem('key');
localStorage.setItem('key','value');
$j(document).ready(function() {
if(localStorage.getItem('popState') != 'shown'){
$j('#popup').delay(2000).fadeIn();
localStorage.setItem('popState','shown')
}
$j('#popup-close, #popup').click(function() // You are clicking the close button
{
$j('#popup').fadeOut(); // Now the pop up is hidden.
});
});
Working Demo
This example uses jquery-cookie
Check if the cookie exists and has not expired - if either of those fails, then show the popup and set the cookie (Semi pseudo code):
if($.cookie('popup') != 'seen'){
$.cookie('popup', 'seen', { expires: 365, path: '/' }); // Set it to last a year, for example.
$j("#popup").delay(2000).fadeIn();
$j('#popup-close').click(function(e) // You are clicking the close button
{
$j('#popup').fadeOut(); // Now the pop up is hiden.
});
$j('#popup').click(function(e)
{
$j('#popup').fadeOut();
});
};
You could get around this issue using php. You only echo out the code for the popup on first page load.
The other way... Is to set a cookie which is basically a file that sits in your browser and contains some kind of data. On the first page load you would create a cookie. Then every page after that you check if your cookie is set. If it is set do not display the pop up. However if its not set set the cookie and display the popup.
Pseudo code:
if(cookie_is_not_set) {
show_pop_up;
set_cookie;
}
Offering a quick answer for people using Ionic. I need to show a tooltip only once so I used the $localStorage to achieve this. This is for playing a track, so when they push play, it shows the tooltip once.
$scope.storage = $localStorage; //connects an object to $localstorage
$scope.storage.hasSeenPopup = "false"; // they haven't seen it
$scope.showPopup = function() { // popup to tell people to turn sound on
$scope.data = {}
// An elaborate, custom popup
var myPopup = $ionicPopup.show({
template: '<p class="popuptext">Turn Sound On!</p>',
cssClass: 'popup'
});
$timeout(function() {
myPopup.close(); //close the popup after 3 seconds for some reason
}, 2000);
$scope.storage.hasSeenPopup = "true"; // they've now seen it
};
$scope.playStream = function(show) {
PlayerService.play(show);
$scope.audioObject = audioObject; // this allow for styling the play/pause icons
if ($scope.storage.hasSeenPopup === "false"){ //only show if they haven't seen it.
$scope.showPopup();
}
}
You can use removeItem() class of localStorage to destroy that key on browser close with:
window.onbeforeunload = function{
localStorage.removeItem('your key');
};
The code to show only one time the popup (Bootstrap Modal in the case) :
modal.js
$(document).ready(function() {
if (Cookies('pop') == null) {
$('#ModalIdName').modal('show');
Cookies('pop', '365');
}
});
Here is the full code snipet for Rails :
Add the script above to your js repo (in Rails : app/javascript/packs)
In Rails we have a specific packing way for script, so :
Download the js-cookie plugin (needed to work with Javascript Cokkies) https://github.com/js-cookie/js-cookie (the name should be : 'js.cookie.js')
/*!
* JavaScript Cookie v2.2.0
* https://github.com/js-cookie/js-cookie
*
* Copyright 2006, 2015 Klaus Hartl & Fagner Brack
* Released under the MIT license
*/
;(function (factory) {
var registeredInModuleLoader = false;
if (typeof define === 'function' && define.amd) {
define(factory);
registeredInModul
...
Add //= require js.cookie to application.js
It will works perfectly for 365 days!
You might be using an API for fetching user from database, so use any unique data like id or email or name to identify user then use localstorage method suggested by #Shaunak D. Just replace key with user's unique field and value with popup state.
Like:
ID : popup_state
Sorry for the mistakes in the reply. I am not on my pc today 😅😛
I have two pages, the parent and from this page I am using:
window.open('OrderDetailsFull.aspx?ObjectID=' + ObjectID[1] , "TableDetails","status=0 , toolbar=0 , location=no , menubar=0 , scrollbars=yes , height=600px , width=800px");
to open a new window and manipulate data over there.
When I finish what I am doing I need the parent page to refresh so I will get the new data data in it...
From what I know the method is:
top.opener.location.reload(true);
but for some reason, it is not working in IE8 or IE9...
As I am building an application and not a general web page. It will work on Windows OS with IE (as for now it is still the most common system...nothing to do about it) so I really need to solve this problem....
I couldn't find any new solution over the web for this problem, every one say it should work like that.....
Did anyone encounter this problem? and does any one knows how to solve it?
OK, FOLLOW UP question: when I do opener.location.reload(true); does it render the parent page all over again (as it sound) or not? If it does then I'm in a big problem, if not, then there must be a way to do that...
The problem is the I have an ajax call in the parent page and for some reason it stays in it's old values when I am using it, only when I reload the child window, the parent ajax shows the real results, some code follows...
This is in the document ready jQuery function of the opener page:
$('div[id^="divTable"]').hover(
function(e){
//קבלת זהות השולחן הנלחץ
ObjectID = $(this).attr('id').split('_');
$(this).css("cursor","pointer");
//AJAX הבאת נתוני רשומת ההזמנה מהשרת ב
var OrderDetails = $.ajax({
url:'AjaxActions/OrderDetails.aspx?ObjectID=' + ObjectID[1],
async:false
}).responseText;
//צף מעל שולחן כשעומדים עליו, ניתן לראות את פרטי הרשומה של אותו השולחן DIV
$(this).append($('<div style="position: absolute; top: 0; left: -150;">' + OrderDetails + '</div>'));
//וידוא שהשולחן עליו אנו עומדים יהיה העליון
$(this).css("z-index","10");
$(this).siblings().css("z-index","1");
},
//כשיוצאים מהשולחן DIVהעלמת ה
function () {
$(this).find('div:last').remove()
}
);
This is in one of the functions in the child window that should refresh the opener:
$('#ctrl_Print').click(
function()
{
alert($('#hidItem').val());
var Items = new Array();
Items = $('#hidItem').val().split(',');
for(var i=0;i<Items.length;i++)
{
alert(Items[i]);
}
opener.location.reload(true);
window.location = 'OrderDetailsFull.aspx?OrderID=' + OrderID + '&ObjectID=' + ObjectID + '&Print=' + Items;
window.close();
}
);
10x...
It looks like IE 8 and 9 have security restrictions on refreshing the opener.
I've run into this problem where reload() works in Chrome, but pukes in IE.
Try using window.location.replace(your url and params here).
You have to collect the url and params for replace(), but it gets around the IE error message.
Example:
In Joomla 2.5 parent window launches modal for users input, where we need to reload the parent window (view) in order to run code that uses modal input.
The modal fires a function in the parent window like;
function updateAddresses(runUpdate, itemID, closeModal){
if(closeModal == true ){
SqueezeBox.close();
}
if(runUpdate == true){
//location.reload();
var replaceURL = 'index.php?option=com_poecom&view=cart&ItemId='+itemID;
window.location.replace(replaceURL);
}
}
top is used to get the outermost document within the current physical window when you're dealing with framesets and/or iframes and is not related to window.open in any way, so you shouldn't use top unless there are frames or iframes within your pop-up page. The following will do:
opener.location.reload(true);
If you want to access the parent window (or frame), you should use parent, not top:
parent.location.reload(true);
When your page is a frame inside that window, add more parents to it:
parent.parent.location.reload(true);