i use casperjs for automatical click on twitter share button. Twitter use iframe for create this buttons:
<iframe src="some src">
</iframe>
When i click it open popup window, but when i trying to login into twitter, i got error, form not found
casper.withFrame(0) { //it twitter iframe
this.fill("#twitter-widget-0 form#update-form", {
"session[username_or_email]": "myemail#email.com",
"session[password]": "password"
}, true);
});
Why? It possible with casperjs?
I'm not familiar with Twitter widgets, but are you sure #twitter-widget-0 is not the id of the iframe you just switched in to? It seems that way, because I found code like this: https://dev.twitter.com/discussions/11450
If you switched into the iframe, you cannot access elements from the parent page anymore, and you are trying to access the iframe element, which resides in the parent.
You should just select form#update-form, because it's not a child element of #twitter-widget-0: it is just an element that is contained in the iframe.
If so, the solution is simply omitting #twitter-widget-0 from your selector inside the iframe.
casper.withFrame(0) { //it twitter iframe
this.fill("form#update-form", {
"session[username_or_email]": "myemail#email.com",
"session[password]": "password"
}, true);
});
Related
I'm using Magnific popup our product product pages as a method for image hot points. Right now when you click on a hot point a popup appears with larger image and text. I received a request to open the popup on a mouseover.
Is there a way to trigger open Magnific Popup on a mouseover not on a mouse click?
I was trying to call the mouseover event on the link first, but it seems the Popup still requires a click. How to I make it so it opens up just with a mouseover?
<!-- Popup link -->
Show inline popup
<!-- Popup itself -->
<div id="test-popup" class="white-popup mfp-hide">
Popup content
</div>
Javascript:
$('.open-popup-link').mouseover(function(){
$(this).magnificPopup({
type: 'inline'
});
});
Answering my own question. After a bit more research I found that I needed to open the popup directly via API. It works now:
$('.open-popup-link').mouseover(function(){
$.magnificPopup.open({
items: {
src: '.white-popup' // can be a HTML string, jQuery object, or CSS selector
}
})
});
Working example: https://codepen.io/pen/ZKrVNK
Taking it further with multiple links opening separate slides of a gallery, using event delegation:
http://codepen.io/pen/EmEOMa
I have an static HTML page I want to pop up using Magnific Popup when the page loads. In the examples on the site he only shows clicking a link that has the url of the page. I don't want a link but just page load. How do I get the url to be called without a link? I have the onload figured out
$(window).load(function () {
$.magnificPopup.open({
type: 'ajax',
showCloseBtn: true
}, 0);
});
So for example I want test.html to show up in the popup onload. Not sure how this is done.
You can initialize the magnific popup with a DOM Element created by jQuery and then click it. For example:
$(function() {
$('<a href="test.html">').magnificPopup({
type: 'ajax'
}).click();
});
If you need the link appear in the page, then just use appendTo function after click.
I was just wondering how I go about firing a magnific-popup with an iframe NOT from a video site.
I'm trying to load a page from another site that my company owns and I can't seem to get it to do anything other than open the url in a new page.
Any help would be greatly appreciated.
Let me know if code examples will help.
Simply add such option to init code of popup, and iframe src will match href.
iframe: {
patterns: {
yourcustomsource: {
index: '',
src: '%id%'
}
}
}
Also, take a look at - http://codepen.io/dimsemenov/details/jnohA
I'm adding Google+ sign in button to my site using the server-side flow.
Here is how I render the sign in button:
<script type="text/javascript">
(function () {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://plus.google.com/js/client:plusone.js?onload=renderGPlus';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
<script type="text/javascript">
function renderGPlus() {
gapi.signin.render('customGPlusBtn', {
'callback': 'gPlusSignInCallback',
'clientid': '<my_client_id>',
'redirecturi': 'postmessage',
'accesstype': 'offline',
'cookiepolicy': 'single_host_origin',
'requestvisibleactions': 'http://schemas.google.com/BuyActivity',
'scope': 'https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email'
});
}
</script>
When the button is loaded, it immediately checks to see if the user has authorized my application (immediate mode). If the user has previously authorized my application, a notification bar will pop up at the bottom of the page with the message "Welcome back, you've already connected with this app via Google+ Sign-In as .....".
Is there anyway to stop this message from popping up?
Just recently the newly accepted answer on this page for hiding the "Google Sign-in Welcome back pop up"
window.___gcfg = { isSignedOut: true };
does not work again.
AIM: "Hide or Suppress the Google+ Sign In Welcome Back message" on all browsers.
Please if you have been using `
window.___gcfg = { isSignedOut: true };
to suppress the warning. After serious experimentation I discovered this.
I will recommend you use this iframe versions to suppress any kind of Google API pop up window on your web page..
Iframe 1: iframe[src^="https://apis.google.com"] {display: none;} This Hides all pop up windows from Google APIs on your web page.
Iframe 2: iframe[src^="https://apis.google.com/u/0/_/sharebox"] {display: none;} This Hides all Google's Interactive Share Dialog pop up on your web page.
Iframe 3: iframe[src^="https://apis.google.com/u/0/_/widget/oauthflow/toast"] {display: none;} This Hides all "Google's Welcome Back Message" pop up window on your web page.
Iframe 4: iframe[src^="https://apis.google.com/u/0/_/+1/"] {display: none;} This Hides all "Google's +1 Button" on your web page.
So for this particular question do this in the Head tag of your HTML Page
<style> `iframe[src^="https://apis.google.com/u/0/_/widget/oauthflow/toast` </style>
Have tested it and it works perfectly well.
First, the message only appears the first time that a user is signing in as recognized by Google for a particular browser session. In other words, the user will only see the message if they have closed their browser windows and have started a new browser session.
You should be authorizing the user any time that you are seeing the authorization result successfully returning and updating the user to an authorized state. As such, the user is getting automatically signed in whenever this message appears.
Because the message that appears is there to inform your users that they have automatically been signed in, you probably should not be suppressing this message unless you are doing it intentionally for a user whose session you are explicitly managing.
However, if you have implemented explicit sign-out and are managing the user's signed-in state, the following code change to the plusone.js synchronous include will suppress the toast message.
<script src="https://apis.google.com/js/plusone.js">
isSignedOut: true
</script>
Another note, you no longer need to manage the user's state to sign the user out. The new method gapi.auth.signOut will sign the user out. You can see a demo of signout here.
If you are doing an asynchronous include, the following global configuration flags will suppress the message:
window.___gcfg = { isSignedOut: true };
UPDATE:
As pointed out by Chimdi2000 this solution does not work in Chrome. You can add the following CSS to hide the generated iframe:
iframe[src^="https://apis.google.com"] {
display: none;
}
As his answer is far more complete than mine and addresses additional issues, please check it out.
The accepted answer is the right way to do it, but if for some other reason you just want to hide the generated iframe, you can do it with CSS:
iframe[src^="https://apis.google.com"] {
display: none;
}
Chimdi2000's last style code must be:
<style>
iframe[src^="https://apis.google.com/u/0/_/widget/oauthflow/toast"] {
display: none;
}
</style>
and runs perfect.
EDIT :
Coding below also hides the login button.
<style>
iframe[src^="https://apis.google.com"] {
display: none;
}
</style>
I am using colorbox in my project to show application forms and if the user closes colorbox page the main window will be refreshed with this script:
$(".form").colorbox({
iframe: true,
innerWidth: 755,
innerHeight: 440,
overlayClose: false,
//main page refresh
onClosed: function () {
location.reload(true);
}
but after page refresh if the user clicks on colorbox link the screen looks like this.
Any help?
i have found the problem, and i write the solution for the developers who has the same problem like me;
in index page i call javascript first, than css. it was the problem. i call first css and after that javascripts the problem solved